@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; @import './styles/_vars.less'; /* 确保变量定义在全局作用域 */ /* 为 RootPortal 容器单独定义变量 */ :root, .taro-portal-container, page { font-family: PingFangSC-Medium; --color-primary: #317CFA; --color-primary-rgb: 49, 124, 250; --color-primary-light: rgba(49, 124, 250, 0.1); --color-primary-dark: #1E6FF8; --color-text-primary: #262626; --color-bg-primary: #F4F9FF; --color-bg-gray: #F4F9FF; } .taro-portal-container-ztop{ z-index: 10000; } .w-full{ box-sizing: border-box; } .global-color{ font-family: PingFang SC; font-weight: 400; font-size: 14px; line-height: 22px; } .global-color-new{ .global-color{ color: yellowgreen; } } .primary-color{ color: var(--color-primary, #317CFA); } .primary-color-dark{ color: var(--color-primary-dark); } .text-primary-color{ color: var(--color-primary, #317CFA); } .bg-primary-color { background-color: var(--color-bg-primary, #317CFA); } .warn-color{ color: #EE4949; } .global-page-bg{ height: 652px; background: var(--color-bg-gray); } .global-linear-gradient-bg{ position: relative; height: 652px; background: linear-gradient(176.35deg, #E6F1FF 18.69%, rgba(255, 255, 255, 0) 113.37%); background-size: 100% 600px; background-repeat: no-repeat; } .global-gray-bg{ background-color: var(--color-bg-gray); } .bg-primary-color{ background-color: var(--color-bg-primary); } // text .label-text{ font-weight: 500; font-size: 14px; color: #000000; line-height: 22px; } // buttons .button-rounded-big{ display: flex; height: 48px; justify-content: center; align-items: center; background-color: var(--color-primary); border-radius: 8px; overflow: hidden; color: white; } .button-plain{ .button-rounded-big(); background-color: white; } .wemeta-button{ .button-rounded-big(); border-radius: 12px; } .button-rounded{ display: flex; padding: 14px; align-items: center; word-break: keep-all; justify-content: center; border-radius: 8px; background-color: white; color: rgba(#000, .85); text-align: center; font-size: 12px; font-style: normal; font-weight: 500; line-height: 20px; transition: background-color .2s; } .button-rounded.actived{ background-color: #000; color: #FFF; } .button-rounded.button-primary{ color: white; font-size: 14px; background-color: var(--color-primary); } .button-rounded.button-primary-light{ font-size: 14px; color: var(--color-primary); background-color: rgba(var(--color-primary-rgb), .1); } .button-border-primary{ border: 1px solid #327BF9; } .button-inline-flex{ display: inline-flex; padding: 14px 32px; } .button-warn{ .warn-color(); } // /* 竖屏且宽度<390px */ // @media (orientation: portrait) and (max-width: 390px) { // .button-rounded.button-primary { // } // } // 社交媒体icon .social-media-icon{ width: 24px; height: 24px; flex-shrink: 0; background-size: 100%; } .social-media-link{ .social-media-icon(); background-image: url(@linkUrl); } .social-media-wechat{ .social-media-icon(); background-image: url(@wechatUrl); } .social-media-shiping{ .social-media-icon(); background-image: url(@shipingUrl); } .social-media-shipingVideo{ .social-media-icon(); background-image: url(@shipingVideoUrl); } .component-icon-tel{ .social-media-icon(); background-image: url(@tel); } .component-icon-address{ .social-media-icon(); background-image: url(@local); } // 空气按钮分享 .share-button{ position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; opacity: 0; background-color: transparent; } .full-button-rounded{ display: flex; width: 100%; padding: 17px 10px; border-radius: 50px; justify-content: center; align-items: center; background-color: var(--color-primary); } .popup-close-button{ width: 36px; height: 36px; background: url(https://cdn.wehome.cn/cmn/png/116/META-H8UKVHWU-K4SOR0KW954A0B7Q6JXJ2-5SZANE1M-H8.png) no-repeat; background-size: 36px 36px; } // 空数据提示 ui // 飞机 .data-empty, .data-empty-plane{ width: 120px; height: 120px; background-image: url(https://cdn.wehome.cn/cmn/png/8/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-OWTHCUCM-WC.png); background-size: 100%; background-repeat: no-repeat; } // 放大镜 .data-empty-search{ background-image: url(https://cdn.wehome.cn/cmn/png/137/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-EZTHCUCM-YC.png); } // 空白写字板 .data-empty-whiteboard{ background-image: url(https://cdn.wehome.cn/cmn/png/87/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-QYTHCUCM-XC.png); } // 三角牌感叹号 .data-empty4{ background-image: url(https://cdn.wehome.cn/cmn/png/63/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-NYTHCUCM-SC.png); } // 两个对话框 .data-empty-chat{ background-image: url(https://cdn.wehome.cn/cmn/png/30/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-RYTHCUCM-TC.png); } // 破碎文件夹 .data-empty6{ background-image: url(https://cdn.wehome.cn/cmn/png/82/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-Z5UHCUCM-UC.png); } // 空白文件盒 .data-empty-box{ background-image: url(https://cdn.wehome.cn/cmn/png/69/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-36UHCUCM-ZC.png); } // 居正中 .flex-center{ display: flex; align-items: center; justify-content: center; } // ios 底部安全区 .bottom-bar{ position: fixed; z-index: 100; left: 0; bottom: 0; right: 0; width: 100%; background-color: var(--color-bg-primary); padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ } //global text .gradient-text{ color: transparent; /* 文字透明以显示背景渐变 */ display: inline-block; /* 确保渐变生效 */ background: linear-gradient(279.56deg, #317CFA 13.29%, #FF2DF8 92.34%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradientMove 3s linear infinite; } @keyframes gradientMove { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } // 边框相关 .border-bottom1-gray{ border-bottom: 1px solid rgba(#000, .05); } .border-top1-gray{ border-top: 1px solid rgba(#000, .05); } // 灰底圆框 .rounded-card{ margin-bottom: 12px; padding: 20px; border-radius: 12px; border: 1px solid transparent; background-color: rgba(#000, .03); } .rounded-card-actived{ .rounded-card(); background-color: rgba(var(--color-primary-rgb), .06); border: 1px solid var(--color-primary); } .rounded-container-header{ width: 100%; border-top-left-radius: 24px; border-top-right-radius: 24px; padding-top: 20px; border-top-width: 1px; border-top: 1px solid #FFFFFF; backdrop-filter: blur(38px); } /* 保持和之前相同,仅需确保以下类名存在 */ .picker-modal { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; z-index: 3000; box-shadow: 0px -2px 20px #999; } .picker-header { display: flex; justify-content: space-between; padding: 15px; border-bottom: 1px solid #f5f5f5; } .picker-item { text-align: center; line-height: 50px; } // 组件卡片空数据显示 .component-card-empty{ width: 100%; height: 160px; border-radius: 16px; overflow: hidden; background-color: rgba(240, 240, 240, 1); .component-card-content{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; } // 小蓝本灰色 logo .component-card-empty-figure{ width: 68px; height: 24px; background: url(https://cdn.wehome.cn/cmn/png/67/META-H8UKVHWU-1JNUXQBKDFMDLDZZ7BUW3-68R2H1CM-ZU2.png) no-repeat; background-size: 100%; } .component-card-empty-tips{ font-family: PingFang SC; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color:rgba(#000, .25); } } // 智能体内容容器毛玻璃效果,距顶部距离 240 ,留出空间显示形象, 最小高度 600px 以防止没有顶到底部 .blur-rounded-container{ margin-top: 240px; width: 100%; min-height: calc(100vh - 240px); box-sizing: border-box; border-top-left-radius: 24px; border-top-right-radius: 24px; // background: rgba(#FFF, .45); backdrop-filter: blur(38px); background: linear-gradient( rgba(#fff, .45) 1%, rgba(#fff, 0) 100%); }