app.less 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. @import 'tailwindcss/base';
  2. @import 'tailwindcss/components';
  3. @import 'tailwindcss/utilities';
  4. @import './styles/_vars.less';
  5. /* 确保变量定义在全局作用域 */
  6. /* 为 RootPortal 容器单独定义变量 */
  7. :root, .taro-portal-container, page {
  8. font-family: PingFangSC-Medium;
  9. --color-primary: #317CFA;
  10. --color-primary-rgb: 49, 124, 250;
  11. --color-primary-light: rgba(49, 124, 250, 0.1);
  12. --color-primary-dark: #1E6FF8;
  13. --color-text-primary: #262626;
  14. --color-bg-primary: #F4F9FF;
  15. --color-bg-gray: #F4F9FF;
  16. }
  17. .taro-portal-container-ztop{
  18. z-index: 10000;
  19. }
  20. .w-full{
  21. box-sizing: border-box;
  22. }
  23. .global-color{
  24. font-family: PingFang SC;
  25. font-weight: 400;
  26. font-size: 14px;
  27. line-height: 22px;
  28. }
  29. .global-color-new{
  30. .global-color{
  31. color: yellowgreen;
  32. }
  33. }
  34. .primary-color{
  35. color: var(--color-primary, #317CFA);
  36. }
  37. .primary-color-dark{
  38. color: var(--color-primary-dark);
  39. }
  40. .text-primary-color{
  41. color: var(--color-primary, #317CFA);
  42. }
  43. .bg-primary-color {
  44. background-color: var(--color-bg-primary, #317CFA);
  45. }
  46. .warn-color{
  47. color: #EE4949;
  48. }
  49. .global-page-bg{
  50. height: 652px;
  51. background: var(--color-bg-gray);
  52. }
  53. .global-linear-gradient-bg{
  54. position: relative;
  55. height: 652px;
  56. background: linear-gradient(176.35deg, #E6F1FF 18.69%, rgba(255, 255, 255, 0) 113.37%);
  57. background-size: 100% 600px;
  58. background-repeat: no-repeat;
  59. }
  60. .global-gray-bg{
  61. background-color: var(--color-bg-gray);
  62. }
  63. .bg-primary-color{
  64. background-color: var(--color-bg-primary);
  65. }
  66. // text
  67. .label-text{
  68. font-weight: 500;
  69. font-size: 14px;
  70. color: #000000;
  71. line-height: 22px;
  72. }
  73. // buttons
  74. .button-rounded-big{
  75. display: flex;
  76. height: 48px;
  77. justify-content: center;
  78. align-items: center;
  79. background-color: var(--color-primary);
  80. border-radius: 8px;
  81. overflow: hidden;
  82. color: white;
  83. }
  84. .button-plain{
  85. .button-rounded-big();
  86. background-color: white;
  87. }
  88. .wemeta-button{
  89. .button-rounded-big();
  90. border-radius: 12px;
  91. }
  92. .button-rounded{
  93. display: flex;
  94. padding: 14px;
  95. align-items: center;
  96. word-break: keep-all;
  97. justify-content: center;
  98. border-radius: 8px;
  99. background-color: white;
  100. color: rgba(#000, .85);
  101. text-align: center;
  102. font-size: 12px;
  103. font-style: normal;
  104. font-weight: 500;
  105. line-height: 20px;
  106. transition: background-color .2s;
  107. }
  108. .button-rounded.actived{
  109. background-color: #000;
  110. color: #FFF;
  111. }
  112. .button-rounded.button-primary{
  113. color: white;
  114. font-size: 14px;
  115. background-color: var(--color-primary);
  116. }
  117. .button-rounded.button-primary-light{
  118. font-size: 14px;
  119. color: var(--color-primary);
  120. background-color: rgba(var(--color-primary-rgb), .1);
  121. }
  122. .button-border-primary{
  123. border: 1px solid #327BF9;
  124. }
  125. .button-inline-flex{
  126. display: inline-flex;
  127. padding: 14px 32px;
  128. }
  129. .button-warn{
  130. .warn-color();
  131. }
  132. // /* 竖屏且宽度<390px */
  133. // @media (orientation: portrait) and (max-width: 390px) {
  134. // .button-rounded.button-primary {
  135. // }
  136. // }
  137. // 社交媒体icon
  138. .social-media-icon{
  139. width: 24px;
  140. height: 24px;
  141. flex-shrink: 0;
  142. background-size: 100%;
  143. }
  144. .social-media-link{
  145. .social-media-icon();
  146. background-image: url(@linkUrl);
  147. }
  148. .social-media-wechat{
  149. .social-media-icon();
  150. background-image: url(@wechatUrl);
  151. }
  152. .social-media-shiping{
  153. .social-media-icon();
  154. background-image: url(@shipingUrl);
  155. }
  156. .social-media-shipingVideo{
  157. .social-media-icon();
  158. background-image: url(@shipingVideoUrl);
  159. }
  160. .component-icon-tel{
  161. .social-media-icon();
  162. background-image: url(@tel);
  163. }
  164. .component-icon-address{
  165. .social-media-icon();
  166. background-image: url(@local);
  167. }
  168. // 空气按钮分享
  169. .share-button{
  170. position: absolute;
  171. left: 0;
  172. right: 0;
  173. top: 0;
  174. width: 100%;
  175. height: 100%;
  176. opacity: 0;
  177. background-color: transparent;
  178. }
  179. .full-button-rounded{
  180. display: flex;
  181. width: 100%;
  182. padding: 17px 10px;
  183. border-radius: 50px;
  184. justify-content: center;
  185. align-items: center;
  186. background-color: var(--color-primary);
  187. }
  188. .popup-close-button{
  189. width: 36px;
  190. height: 36px;
  191. background: url(https://cdn.wehome.cn/cmn/png/116/META-H8UKVHWU-K4SOR0KW954A0B7Q6JXJ2-5SZANE1M-H8.png) no-repeat;
  192. background-size: 36px 36px;
  193. }
  194. // 空数据提示 ui
  195. // 飞机
  196. .data-empty, .data-empty-plane{
  197. width: 120px;
  198. height: 120px;
  199. background-image: url(https://cdn.wehome.cn/cmn/png/8/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-OWTHCUCM-WC.png);
  200. background-size: 100%;
  201. background-repeat: no-repeat;
  202. }
  203. // 放大镜
  204. .data-empty-search{
  205. background-image: url(https://cdn.wehome.cn/cmn/png/137/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-EZTHCUCM-YC.png);
  206. }
  207. // 空白写字板
  208. .data-empty-whiteboard{
  209. background-image: url(https://cdn.wehome.cn/cmn/png/87/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-QYTHCUCM-XC.png);
  210. }
  211. // 三角牌感叹号
  212. .data-empty4{
  213. background-image: url(https://cdn.wehome.cn/cmn/png/63/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-NYTHCUCM-SC.png);
  214. }
  215. // 两个对话框
  216. .data-empty-chat{
  217. background-image: url(https://cdn.wehome.cn/cmn/png/30/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-RYTHCUCM-TC.png);
  218. }
  219. // 破碎文件夹
  220. .data-empty6{
  221. background-image: url(https://cdn.wehome.cn/cmn/png/82/META-H8UKWHWU-8HXWA0PE7HXUV4QMQUBV2-Z5UHCUCM-UC.png);
  222. }
  223. // 空白文件盒
  224. .data-empty-box{
  225. background-image: url(https://cdn.wehome.cn/cmn/png/69/META-H8UKWHWU-HGXWYHZT5H6E78JCO9YE2-36UHCUCM-ZC.png);
  226. }
  227. // 居正中
  228. .flex-center{
  229. display: flex;
  230. align-items: center;
  231. justify-content: center;
  232. }
  233. // ios 底部安全区
  234. .bottom-bar{
  235. position: fixed;
  236. z-index: 100;
  237. left: 0;
  238. bottom: 0;
  239. right: 0;
  240. width: 100%;
  241. background-color: var(--color-bg-primary);
  242. padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  243. padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  244. }
  245. //global text
  246. .gradient-text{
  247. color: transparent; /* 文字透明以显示背景渐变 */
  248. display: inline-block; /* 确保渐变生效 */
  249. background: linear-gradient(279.56deg, #317CFA 13.29%, #FF2DF8 92.34%);
  250. -webkit-background-clip: text;
  251. background-clip: text;
  252. -webkit-text-fill-color: transparent;
  253. background-size: 200% auto;
  254. animation: gradientMove 3s linear infinite;
  255. }
  256. @keyframes gradientMove {
  257. 0% {
  258. background-position: 200% center;
  259. }
  260. 100% {
  261. background-position: -200% center;
  262. }
  263. }
  264. // 边框相关
  265. .border-bottom1-gray{
  266. border-bottom: 1px solid rgba(#000, .05);
  267. }
  268. .border-top1-gray{
  269. border-top: 1px solid rgba(#000, .05);
  270. }
  271. // 灰底圆框
  272. .rounded-card{
  273. margin-bottom: 12px;
  274. padding: 20px;
  275. border-radius: 12px;
  276. border: 1px solid transparent;
  277. background-color: rgba(#000, .03);
  278. }
  279. .rounded-card-actived{
  280. .rounded-card();
  281. background-color: rgba(var(--color-primary-rgb), .06);
  282. border: 1px solid var(--color-primary);
  283. }
  284. .rounded-container-header{
  285. width: 100%;
  286. border-top-left-radius: 24px;
  287. border-top-right-radius: 24px;
  288. padding-top: 20px;
  289. border-top-width: 1px;
  290. border-top: 1px solid #FFFFFF;
  291. backdrop-filter: blur(38px);
  292. }
  293. /* 保持和之前相同,仅需确保以下类名存在 */
  294. .picker-modal {
  295. position: fixed;
  296. bottom: 0;
  297. left: 0;
  298. width: 100%;
  299. background: #fff;
  300. z-index: 3000;
  301. box-shadow: 0px -2px 20px #999;
  302. }
  303. .picker-header {
  304. display: flex;
  305. justify-content: space-between;
  306. padding: 15px;
  307. border-bottom: 1px solid #f5f5f5;
  308. }
  309. .picker-item {
  310. text-align: center;
  311. line-height: 50px;
  312. }
  313. // 组件卡片空数据显示
  314. .component-card-empty{
  315. width: 100%;
  316. height: 160px;
  317. border-radius: 16px;
  318. overflow: hidden;
  319. background-color: rgba(240, 240, 240, 1);
  320. .component-card-content{
  321. display: flex;
  322. flex-direction: column;
  323. align-items: center;
  324. justify-content: center;
  325. height: 100%;
  326. gap: 12px;
  327. }
  328. // 小蓝本灰色 logo
  329. .component-card-empty-figure{
  330. width: 68px;
  331. height: 24px;
  332. background: url(https://cdn.wehome.cn/cmn/png/67/META-H8UKVHWU-1JNUXQBKDFMDLDZZ7BUW3-68R2H1CM-ZU2.png) no-repeat;
  333. background-size: 100%;
  334. }
  335. .component-card-empty-tips{
  336. font-family: PingFang SC;
  337. font-weight: 400;
  338. font-size: 16px;
  339. line-height: 24px;
  340. text-align: center;
  341. color:rgba(#000, .25);
  342. }
  343. }
  344. // 智能体内容容器毛玻璃效果,距顶部距离 240 ,留出空间显示形象, 最小高度 600px 以防止没有顶到底部
  345. .blur-rounded-container{
  346. margin-top: 240px;
  347. width: 100%;
  348. min-height: calc(100vh - 240px);
  349. box-sizing: border-box;
  350. border-top-left-radius: 24px;
  351. border-top-right-radius: 24px;
  352. // background: rgba(#FFF, .45);
  353. backdrop-filter: blur(38px);
  354. background: linear-gradient( rgba(#fff, .45) 1%, rgba(#fff, 0) 100%);
  355. }