123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410 |
- @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%);
- }
|