living.css 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020
  1. /**
  2. * 这里是uni-app内置的常用样式变量
  3. *
  4. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  5. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  6. *
  7. */
  8. /**
  9. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  10. *
  11. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  12. */
  13. /* 颜色变量 */
  14. /* 行为相关颜色 */
  15. /* 文字基本颜色 */
  16. /* 背景颜色 */
  17. /* 边框颜色 */
  18. /* 尺寸变量 */
  19. /* 文字尺寸 */
  20. /* 图片尺寸 */
  21. /* Border Radius */
  22. /* 水平间距 */
  23. /* 垂直间距 */
  24. /* 透明度 */
  25. /* 文章场景相关 */
  26. /*自定义主题色 */
  27. .u-empty[data-v-ac70166d],
  28. .u-empty__wrap[data-v-ac70166d],
  29. .u-tabs[data-v-ac70166d],
  30. .u-tabs__wrapper[data-v-ac70166d],
  31. .u-tabs__wrapper__scroll-view-wrapper[data-v-ac70166d],
  32. .u-tabs__wrapper__scroll-view[data-v-ac70166d],
  33. .u-tabs__wrapper__nav[data-v-ac70166d],
  34. .u-tabs__wrapper__nav__line[data-v-ac70166d] {
  35. display: flex;
  36. flex-direction: column;
  37. flex-shrink: 0;
  38. flex-grow: 0;
  39. flex-basis: auto;
  40. align-items: stretch;
  41. align-content: flex-start;
  42. }
  43. @font-face {
  44. font-family: "uicon-iconfont";
  45. src: url("https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf") format("truetype");
  46. }
  47. .u-icon[data-v-ac70166d] {
  48. display: flex;
  49. align-items: center;
  50. }
  51. .u-icon--left[data-v-ac70166d] {
  52. flex-direction: row-reverse;
  53. align-items: center;
  54. }
  55. .u-icon--right[data-v-ac70166d] {
  56. flex-direction: row;
  57. align-items: center;
  58. }
  59. .u-icon--top[data-v-ac70166d] {
  60. flex-direction: column-reverse;
  61. justify-content: center;
  62. }
  63. .u-icon--bottom[data-v-ac70166d] {
  64. flex-direction: column;
  65. justify-content: center;
  66. }
  67. .u-icon__icon[data-v-ac70166d] {
  68. font-family: uicon-iconfont;
  69. position: relative;
  70. display: flex;
  71. flex-direction: row;
  72. align-items: center;
  73. }
  74. .u-icon__icon--primary[data-v-ac70166d] {
  75. color: #3c9cff;
  76. }
  77. .u-icon__icon--success[data-v-ac70166d] {
  78. color: #5ac725;
  79. }
  80. .u-icon__icon--error[data-v-ac70166d] {
  81. color: #f56c6c;
  82. }
  83. .u-icon__icon--warning[data-v-ac70166d] {
  84. color: #f9ae3d;
  85. }
  86. .u-icon__icon--info[data-v-ac70166d] {
  87. color: #909399;
  88. }
  89. .u-icon__img[data-v-ac70166d] {
  90. height: auto;
  91. will-change: transform;
  92. }
  93. .u-icon__label[data-v-ac70166d] {
  94. line-height: 1;
  95. }
  96. /**
  97. * 这里是uni-app内置的常用样式变量
  98. *
  99. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  100. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  101. *
  102. */
  103. /**
  104. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  105. *
  106. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  107. */
  108. /* 颜色变量 */
  109. /* 行为相关颜色 */
  110. /* 文字基本颜色 */
  111. /* 背景颜色 */
  112. /* 边框颜色 */
  113. /* 尺寸变量 */
  114. /* 文字尺寸 */
  115. /* 图片尺寸 */
  116. /* Border Radius */
  117. /* 水平间距 */
  118. /* 垂直间距 */
  119. /* 透明度 */
  120. /* 文章场景相关 */
  121. /*自定义主题色 */
  122. .u-empty[data-v-12f6646d],
  123. .u-empty__wrap[data-v-12f6646d],
  124. .u-tabs[data-v-12f6646d],
  125. .u-tabs__wrapper[data-v-12f6646d],
  126. .u-tabs__wrapper__scroll-view-wrapper[data-v-12f6646d],
  127. .u-tabs__wrapper__scroll-view[data-v-12f6646d],
  128. .u-tabs__wrapper__nav[data-v-12f6646d],
  129. .u-tabs__wrapper__nav__line[data-v-12f6646d] {
  130. display: flex;
  131. flex-direction: column;
  132. flex-shrink: 0;
  133. flex-grow: 0;
  134. flex-basis: auto;
  135. align-items: stretch;
  136. align-content: flex-start;
  137. }
  138. .u-link[data-v-12f6646d] {
  139. line-height: 1;
  140. display: flex;
  141. flex-direction: row;
  142. flex-wrap: wrap;
  143. flex: 1;
  144. }
  145. /**
  146. * 这里是uni-app内置的常用样式变量
  147. *
  148. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  149. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  150. *
  151. */
  152. /**
  153. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  154. *
  155. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  156. */
  157. /* 颜色变量 */
  158. /* 行为相关颜色 */
  159. /* 文字基本颜色 */
  160. /* 背景颜色 */
  161. /* 边框颜色 */
  162. /* 尺寸变量 */
  163. /* 文字尺寸 */
  164. /* 图片尺寸 */
  165. /* Border Radius */
  166. /* 水平间距 */
  167. /* 垂直间距 */
  168. /* 透明度 */
  169. /* 文章场景相关 */
  170. /*自定义主题色 */
  171. .u-empty[data-v-0a574502],
  172. .u-empty__wrap[data-v-0a574502],
  173. .u-tabs[data-v-0a574502],
  174. .u-tabs__wrapper[data-v-0a574502],
  175. .u-tabs__wrapper__scroll-view-wrapper[data-v-0a574502],
  176. .u-tabs__wrapper__scroll-view[data-v-0a574502],
  177. .u-tabs__wrapper__nav[data-v-0a574502],
  178. .u-tabs__wrapper__nav__line[data-v-0a574502] {
  179. display: flex;
  180. flex-direction: column;
  181. flex-shrink: 0;
  182. flex-grow: 0;
  183. flex-basis: auto;
  184. align-items: stretch;
  185. align-content: flex-start;
  186. }
  187. .u-text[data-v-0a574502] {
  188. display: flex;
  189. flex-direction: row;
  190. align-items: center;
  191. flex-wrap: nowrap;
  192. flex: 1;
  193. width: 100%;
  194. }
  195. .u-text__price[data-v-0a574502] {
  196. font-size: 14px;
  197. color: #606266;
  198. }
  199. .u-text__value[data-v-0a574502] {
  200. font-size: 14px;
  201. display: flex;
  202. flex-direction: row;
  203. color: #606266;
  204. flex-wrap: wrap;
  205. text-overflow: ellipsis;
  206. align-items: center;
  207. }
  208. .u-text__value--primary[data-v-0a574502] {
  209. color: #3c9cff;
  210. }
  211. .u-text__value--warning[data-v-0a574502] {
  212. color: #f9ae3d;
  213. }
  214. .u-text__value--success[data-v-0a574502] {
  215. color: #5ac725;
  216. }
  217. .u-text__value--info[data-v-0a574502] {
  218. color: #909399;
  219. }
  220. .u-text__value--error[data-v-0a574502] {
  221. color: #f56c6c;
  222. }
  223. .u-text__value--main[data-v-0a574502] {
  224. color: #303133;
  225. }
  226. .u-text__value--content[data-v-0a574502] {
  227. color: #606266;
  228. }
  229. .u-text__value--tips[data-v-0a574502] {
  230. color: #909193;
  231. }
  232. .u-text__value--light[data-v-0a574502] {
  233. color: #c0c4cc;
  234. }
  235. /**
  236. * 这里是uni-app内置的常用样式变量
  237. *
  238. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  239. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  240. *
  241. */
  242. /**
  243. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  244. *
  245. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  246. */
  247. /* 颜色变量 */
  248. /* 行为相关颜色 */
  249. /* 文字基本颜色 */
  250. /* 背景颜色 */
  251. /* 边框颜色 */
  252. /* 尺寸变量 */
  253. /* 文字尺寸 */
  254. /* 图片尺寸 */
  255. /* Border Radius */
  256. /* 水平间距 */
  257. /* 垂直间距 */
  258. /* 透明度 */
  259. /* 文章场景相关 */
  260. /*自定义主题色 */
  261. .u-empty[data-v-34d954f9],
  262. .u-empty__wrap[data-v-34d954f9],
  263. .u-tabs[data-v-34d954f9],
  264. .u-tabs__wrapper[data-v-34d954f9],
  265. .u-tabs__wrapper__scroll-view-wrapper[data-v-34d954f9],
  266. .u-tabs__wrapper__scroll-view[data-v-34d954f9],
  267. .u-tabs__wrapper__nav[data-v-34d954f9],
  268. .u-tabs__wrapper__nav__line[data-v-34d954f9] {
  269. display: flex;
  270. flex-direction: column;
  271. flex-shrink: 0;
  272. flex-grow: 0;
  273. flex-basis: auto;
  274. align-items: stretch;
  275. align-content: flex-start;
  276. }
  277. .u-avatar[data-v-34d954f9] {
  278. display: flex;
  279. flex-direction: row;
  280. align-items: center;
  281. justify-content: center;
  282. }
  283. .u-avatar--circle[data-v-34d954f9] {
  284. border-radius: 100px;
  285. }
  286. .u-avatar--square[data-v-34d954f9] {
  287. border-radius: 4px;
  288. }
  289. .u-avatar__image--circle[data-v-34d954f9] {
  290. border-radius: 100px;
  291. overflow: hidden;
  292. }
  293. .u-avatar__image--square[data-v-34d954f9] {
  294. border-radius: 4px;
  295. }
  296. /**
  297. * 这里是uni-app内置的常用样式变量
  298. *
  299. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  300. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  301. *
  302. */
  303. /**
  304. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  305. *
  306. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  307. */
  308. /* 颜色变量 */
  309. /* 行为相关颜色 */
  310. /* 文字基本颜色 */
  311. /* 背景颜色 */
  312. /* 边框颜色 */
  313. /* 尺寸变量 */
  314. /* 文字尺寸 */
  315. /* 图片尺寸 */
  316. /* Border Radius */
  317. /* 水平间距 */
  318. /* 垂直间距 */
  319. /* 透明度 */
  320. /* 文章场景相关 */
  321. /*自定义主题色 */
  322. .u-empty[data-v-df79975b],
  323. .u-empty__wrap[data-v-df79975b],
  324. .u-tabs[data-v-df79975b],
  325. .u-tabs__wrapper[data-v-df79975b],
  326. .u-tabs__wrapper__scroll-view-wrapper[data-v-df79975b],
  327. .u-tabs__wrapper__scroll-view[data-v-df79975b],
  328. .u-tabs__wrapper__nav[data-v-df79975b],
  329. .u-tabs__wrapper__nav__line[data-v-df79975b] {
  330. display: flex;
  331. flex-direction: column;
  332. flex-shrink: 0;
  333. flex-grow: 0;
  334. flex-basis: auto;
  335. align-items: stretch;
  336. align-content: flex-start;
  337. }
  338. .u-input[data-v-df79975b] {
  339. display: flex;
  340. flex-direction: row;
  341. align-items: center;
  342. justify-content: space-between;
  343. flex: 1;
  344. }
  345. .u-input--radius[data-v-df79975b], .u-input--square[data-v-df79975b] {
  346. border-radius: 4px;
  347. }
  348. .u-input--no-radius[data-v-df79975b] {
  349. border-radius: 0;
  350. }
  351. .u-input--circle[data-v-df79975b] {
  352. border-radius: 100px;
  353. }
  354. .u-input__content[data-v-df79975b] {
  355. flex: 1;
  356. display: flex;
  357. flex-direction: row;
  358. align-items: center;
  359. justify-content: space-between;
  360. }
  361. .u-input__content__field-wrapper[data-v-df79975b] {
  362. position: relative;
  363. display: flex;
  364. flex-direction: row;
  365. margin: 0;
  366. flex: 1;
  367. }
  368. .u-input__content__field-wrapper__field[data-v-df79975b] {
  369. line-height: 26px;
  370. text-align: left;
  371. color: #303133;
  372. height: 24px;
  373. font-size: 15px;
  374. flex: 1;
  375. }
  376. .u-input__content__clear[data-v-df79975b] {
  377. width: 20px;
  378. height: 20px;
  379. border-radius: 100px;
  380. background-color: #c6c7cb;
  381. display: flex;
  382. flex-direction: row;
  383. align-items: center;
  384. justify-content: center;
  385. transform: scale(0.82);
  386. margin-left: 4px;
  387. }
  388. .u-input__content__subfix-icon[data-v-df79975b] {
  389. margin-left: 4px;
  390. }
  391. .u-input__content__prefix-icon[data-v-df79975b] {
  392. margin-right: 4px;
  393. }
  394. /**
  395. * 这里是uni-app内置的常用样式变量
  396. *
  397. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  398. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  399. *
  400. */
  401. /**
  402. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  403. *
  404. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  405. */
  406. /* 颜色变量 */
  407. /* 行为相关颜色 */
  408. /* 文字基本颜色 */
  409. /* 背景颜色 */
  410. /* 边框颜色 */
  411. /* 尺寸变量 */
  412. /* 文字尺寸 */
  413. /* 图片尺寸 */
  414. /* Border Radius */
  415. /* 水平间距 */
  416. /* 垂直间距 */
  417. /* 透明度 */
  418. /* 文章场景相关 */
  419. /*自定义主题色 */
  420. .u-empty[data-v-5cec8177],
  421. .u-empty__wrap[data-v-5cec8177],
  422. .u-tabs[data-v-5cec8177],
  423. .u-tabs__wrapper[data-v-5cec8177],
  424. .u-tabs__wrapper__scroll-view-wrapper[data-v-5cec8177],
  425. .u-tabs__wrapper__scroll-view[data-v-5cec8177],
  426. .u-tabs__wrapper__nav[data-v-5cec8177],
  427. .u-tabs__wrapper__nav__line[data-v-5cec8177] {
  428. display: flex;
  429. flex-direction: column;
  430. flex-shrink: 0;
  431. flex-grow: 0;
  432. flex-basis: auto;
  433. align-items: stretch;
  434. align-content: flex-start;
  435. }
  436. /**
  437. * vue版本动画内置的动画模式有如下:
  438. * fade:淡入
  439. * zoom:缩放
  440. * fade-zoom:缩放淡入
  441. * fade-up:上滑淡入
  442. * fade-down:下滑淡入
  443. * fade-left:左滑淡入
  444. * fade-right:右滑淡入
  445. * slide-up:上滑进入
  446. * slide-down:下滑进入
  447. * slide-left:左滑进入
  448. * slide-right:右滑进入
  449. */
  450. .u-fade-enter-active[data-v-5cec8177],
  451. .u-fade-leave-active[data-v-5cec8177] {
  452. transition-property: opacity;
  453. }
  454. .u-fade-enter[data-v-5cec8177],
  455. .u-fade-leave-to[data-v-5cec8177] {
  456. opacity: 0;
  457. }
  458. .u-fade-zoom-enter[data-v-5cec8177],
  459. .u-fade-zoom-leave-to[data-v-5cec8177] {
  460. transform: scale(0.95);
  461. opacity: 0;
  462. }
  463. .u-fade-zoom-enter-active[data-v-5cec8177],
  464. .u-fade-zoom-leave-active[data-v-5cec8177] {
  465. transition-property: transform, opacity;
  466. }
  467. .u-fade-down-enter-active[data-v-5cec8177],
  468. .u-fade-down-leave-active[data-v-5cec8177],
  469. .u-fade-left-enter-active[data-v-5cec8177],
  470. .u-fade-left-leave-active[data-v-5cec8177],
  471. .u-fade-right-enter-active[data-v-5cec8177],
  472. .u-fade-right-leave-active[data-v-5cec8177],
  473. .u-fade-up-enter-active[data-v-5cec8177],
  474. .u-fade-up-leave-active[data-v-5cec8177] {
  475. transition-property: opacity, transform;
  476. }
  477. .u-fade-up-enter[data-v-5cec8177],
  478. .u-fade-up-leave-to[data-v-5cec8177] {
  479. transform: translate3d(0, 100%, 0);
  480. opacity: 0;
  481. }
  482. .u-fade-down-enter[data-v-5cec8177],
  483. .u-fade-down-leave-to[data-v-5cec8177] {
  484. transform: translate3d(0, -100%, 0);
  485. opacity: 0;
  486. }
  487. .u-fade-left-enter[data-v-5cec8177],
  488. .u-fade-left-leave-to[data-v-5cec8177] {
  489. transform: translate3d(-100%, 0, 0);
  490. opacity: 0;
  491. }
  492. .u-fade-right-enter[data-v-5cec8177],
  493. .u-fade-right-leave-to[data-v-5cec8177] {
  494. transform: translate3d(100%, 0, 0);
  495. opacity: 0;
  496. }
  497. .u-slide-down-enter-active[data-v-5cec8177],
  498. .u-slide-down-leave-active[data-v-5cec8177],
  499. .u-slide-left-enter-active[data-v-5cec8177],
  500. .u-slide-left-leave-active[data-v-5cec8177],
  501. .u-slide-right-enter-active[data-v-5cec8177],
  502. .u-slide-right-leave-active[data-v-5cec8177],
  503. .u-slide-up-enter-active[data-v-5cec8177],
  504. .u-slide-up-leave-active[data-v-5cec8177] {
  505. transition-property: transform;
  506. }
  507. .u-slide-up-enter[data-v-5cec8177],
  508. .u-slide-up-leave-to[data-v-5cec8177] {
  509. transform: translate3d(0, 100%, 0);
  510. }
  511. .u-slide-down-enter[data-v-5cec8177],
  512. .u-slide-down-leave-to[data-v-5cec8177] {
  513. transform: translate3d(0, -100%, 0);
  514. }
  515. .u-slide-left-enter[data-v-5cec8177],
  516. .u-slide-left-leave-to[data-v-5cec8177] {
  517. transform: translate3d(-100%, 0, 0);
  518. }
  519. .u-slide-right-enter[data-v-5cec8177],
  520. .u-slide-right-leave-to[data-v-5cec8177] {
  521. transform: translate3d(100%, 0, 0);
  522. }
  523. .u-zoom-enter-active[data-v-5cec8177],
  524. .u-zoom-leave-active[data-v-5cec8177] {
  525. transition-property: transform;
  526. }
  527. .u-zoom-enter[data-v-5cec8177],
  528. .u-zoom-leave-to[data-v-5cec8177] {
  529. transform: scale(0.95);
  530. }
  531. /**
  532. * 这里是uni-app内置的常用样式变量
  533. *
  534. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  535. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  536. *
  537. */
  538. /**
  539. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  540. *
  541. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  542. */
  543. /* 颜色变量 */
  544. /* 行为相关颜色 */
  545. /* 文字基本颜色 */
  546. /* 背景颜色 */
  547. /* 边框颜色 */
  548. /* 尺寸变量 */
  549. /* 文字尺寸 */
  550. /* 图片尺寸 */
  551. /* Border Radius */
  552. /* 水平间距 */
  553. /* 垂直间距 */
  554. /* 透明度 */
  555. /* 文章场景相关 */
  556. /*自定义主题色 */
  557. .u-empty[data-v-9112bed9],
  558. .u-empty__wrap[data-v-9112bed9],
  559. .u-tabs[data-v-9112bed9],
  560. .u-tabs__wrapper[data-v-9112bed9],
  561. .u-tabs__wrapper__scroll-view-wrapper[data-v-9112bed9],
  562. .u-tabs__wrapper__scroll-view[data-v-9112bed9],
  563. .u-tabs__wrapper__nav[data-v-9112bed9],
  564. .u-tabs__wrapper__nav__line[data-v-9112bed9] {
  565. display: flex;
  566. flex-direction: column;
  567. flex-shrink: 0;
  568. flex-grow: 0;
  569. flex-basis: auto;
  570. align-items: stretch;
  571. align-content: flex-start;
  572. }
  573. .u-overlay[data-v-9112bed9] {
  574. position: fixed;
  575. top: 0;
  576. left: 0;
  577. width: 100%;
  578. height: 100%;
  579. background-color: rgba(0, 0, 0, 0.7);
  580. }
  581. /**
  582. * 这里是uni-app内置的常用样式变量
  583. *
  584. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  585. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  586. *
  587. */
  588. /**
  589. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  590. *
  591. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  592. */
  593. /* 颜色变量 */
  594. /* 行为相关颜色 */
  595. /* 文字基本颜色 */
  596. /* 背景颜色 */
  597. /* 边框颜色 */
  598. /* 尺寸变量 */
  599. /* 文字尺寸 */
  600. /* 图片尺寸 */
  601. /* Border Radius */
  602. /* 水平间距 */
  603. /* 垂直间距 */
  604. /* 透明度 */
  605. /* 文章场景相关 */
  606. /*自定义主题色 */
  607. .u-status-bar[data-v-eb8e0cdd] {
  608. width: 100%;
  609. }
  610. /**
  611. * 这里是uni-app内置的常用样式变量
  612. *
  613. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  614. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  615. *
  616. */
  617. /**
  618. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  619. *
  620. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  621. */
  622. /* 颜色变量 */
  623. /* 行为相关颜色 */
  624. /* 文字基本颜色 */
  625. /* 背景颜色 */
  626. /* 边框颜色 */
  627. /* 尺寸变量 */
  628. /* 文字尺寸 */
  629. /* 图片尺寸 */
  630. /* Border Radius */
  631. /* 水平间距 */
  632. /* 垂直间距 */
  633. /* 透明度 */
  634. /* 文章场景相关 */
  635. /*自定义主题色 */
  636. .u-safe-bottom[data-v-f3d22cfe] {
  637. width: 100%;
  638. }
  639. /**
  640. * 这里是uni-app内置的常用样式变量
  641. *
  642. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  643. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  644. *
  645. */
  646. /**
  647. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  648. *
  649. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  650. */
  651. /* 颜色变量 */
  652. /* 行为相关颜色 */
  653. /* 文字基本颜色 */
  654. /* 背景颜色 */
  655. /* 边框颜色 */
  656. /* 尺寸变量 */
  657. /* 文字尺寸 */
  658. /* 图片尺寸 */
  659. /* Border Radius */
  660. /* 水平间距 */
  661. /* 垂直间距 */
  662. /* 透明度 */
  663. /* 文章场景相关 */
  664. /*自定义主题色 */
  665. .u-empty[data-v-05c24e9b],
  666. .u-empty__wrap[data-v-05c24e9b],
  667. .u-tabs[data-v-05c24e9b],
  668. .u-tabs__wrapper[data-v-05c24e9b],
  669. .u-tabs__wrapper__scroll-view-wrapper[data-v-05c24e9b],
  670. .u-tabs__wrapper__scroll-view[data-v-05c24e9b],
  671. .u-tabs__wrapper__nav[data-v-05c24e9b],
  672. .u-tabs__wrapper__nav__line[data-v-05c24e9b] {
  673. display: flex;
  674. flex-direction: column;
  675. flex-shrink: 0;
  676. flex-grow: 0;
  677. flex-basis: auto;
  678. align-items: stretch;
  679. align-content: flex-start;
  680. }
  681. .u-popup[data-v-05c24e9b] {
  682. flex: 1;
  683. }
  684. .u-popup__content[data-v-05c24e9b] {
  685. background-color: #fff;
  686. position: relative;
  687. }
  688. .u-popup__content--round-top[data-v-05c24e9b] {
  689. border-top-left-radius: 0;
  690. border-top-right-radius: 0;
  691. border-bottom-left-radius: 10px;
  692. border-bottom-right-radius: 10px;
  693. }
  694. .u-popup__content--round-left[data-v-05c24e9b] {
  695. border-top-left-radius: 0;
  696. border-top-right-radius: 10px;
  697. border-bottom-left-radius: 0;
  698. border-bottom-right-radius: 10px;
  699. }
  700. .u-popup__content--round-right[data-v-05c24e9b] {
  701. border-top-left-radius: 10px;
  702. border-top-right-radius: 0;
  703. border-bottom-left-radius: 10px;
  704. border-bottom-right-radius: 0;
  705. }
  706. .u-popup__content--round-bottom[data-v-05c24e9b] {
  707. border-top-left-radius: 10px;
  708. border-top-right-radius: 10px;
  709. border-bottom-left-radius: 0;
  710. border-bottom-right-radius: 0;
  711. }
  712. .u-popup__content--round-center[data-v-05c24e9b] {
  713. border-top-left-radius: 10px;
  714. border-top-right-radius: 10px;
  715. border-bottom-left-radius: 10px;
  716. border-bottom-right-radius: 10px;
  717. }
  718. .u-popup__content__close[data-v-05c24e9b] {
  719. position: absolute;
  720. }
  721. .u-popup__content__close--hover[data-v-05c24e9b] {
  722. opacity: 0.4;
  723. }
  724. .u-popup__content__close--top-left[data-v-05c24e9b] {
  725. top: 15px;
  726. left: 15px;
  727. }
  728. .u-popup__content__close--top-right[data-v-05c24e9b] {
  729. top: 15px;
  730. right: 15px;
  731. }
  732. .u-popup__content__close--bottom-left[data-v-05c24e9b] {
  733. bottom: 15px;
  734. left: 15px;
  735. }
  736. .u-popup__content__close--bottom-right[data-v-05c24e9b] {
  737. right: 15px;
  738. bottom: 15px;
  739. }
  740. /**
  741. * 这里是uni-app内置的常用样式变量
  742. *
  743. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  744. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  745. *
  746. */
  747. /**
  748. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  749. *
  750. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  751. */
  752. /* 颜色变量 */
  753. /* 行为相关颜色 */
  754. /* 文字基本颜色 */
  755. /* 背景颜色 */
  756. /* 边框颜色 */
  757. /* 尺寸变量 */
  758. /* 文字尺寸 */
  759. /* 图片尺寸 */
  760. /* Border Radius */
  761. /* 水平间距 */
  762. /* 垂直间距 */
  763. /* 透明度 */
  764. /* 文章场景相关 */
  765. /*自定义主题色 */
  766. .content[data-v-471975a0] {
  767. position: relative;
  768. z-index: 2;
  769. height: 100%;
  770. width: 100%;
  771. top: 0;
  772. left: 0;
  773. display: flex;
  774. flex-direction: column;
  775. justify-content: space-between;
  776. }
  777. .content .content-top[data-v-471975a0] {
  778. width: 100%;
  779. margin-top: 4.6875rem;
  780. display: flex;
  781. align-items: center;
  782. justify-content: space-between;
  783. padding: 0 0.75rem;
  784. box-sizing: border-box;
  785. }
  786. .content .content-top .sum[data-v-471975a0] {
  787. width: 2.5rem;
  788. height: 1.625rem;
  789. background: rgba(0, 0, 0, 0.5);
  790. border-radius: 0.8125rem 0.8125rem 0.8125rem 0.8125rem;
  791. font-size: 0.75rem;
  792. color: #FFFFFF;
  793. text-align: center;
  794. line-height: 1.625rem;
  795. }
  796. .content .follow-btn[data-v-471975a0] {
  797. padding: 0.25rem 0.5rem;
  798. background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
  799. border-radius: 0.8125rem;
  800. font-weight: 500;
  801. font-size: 0.8125rem;
  802. color: #FFFFFF;
  803. }
  804. .videolist[data-v-471975a0] {
  805. position: relative;
  806. }
  807. .vedio[data-v-471975a0] {
  808. height: 100vh;
  809. /* 占屏幕高度的80% */
  810. width: 100%;
  811. background-color: rgba(0, 0, 0, 0.6);
  812. }
  813. .videotop[data-v-471975a0] {
  814. width: 100%;
  815. height: 100%;
  816. }
  817. .popup-video[data-v-471975a0] {
  818. position: absolute;
  819. top: 30%;
  820. height: 15.625rem;
  821. display: flex;
  822. flex-direction: column;
  823. align-items: center;
  824. justify-content: center;
  825. width: 100%;
  826. color: #fff;
  827. z-index: 9;
  828. }
  829. .popup-video .more[data-v-471975a0] {
  830. background-color: #3280fe;
  831. border-radius: 2.5rem;
  832. width: 8.75rem;
  833. text-align: center;
  834. height: 1.875rem;
  835. line-height: 1.875rem;
  836. }
  837. .icon-bg[data-v-471975a0] {
  838. background-color: rgba(255, 255, 255, 0.2);
  839. border-radius: 50%;
  840. width: 2.25rem;
  841. height: 2.25rem;
  842. display: flex;
  843. justify-content: center;
  844. align-items: center;
  845. transition: transform 0.2s ease;
  846. }
  847. .list[data-v-471975a0] {
  848. width: 80%;
  849. margin-bottom: 0.625rem;
  850. animation: xxxawdawd-471975a0 0.2s;
  851. }
  852. @keyframes xxxawdawd-471975a0 {
  853. from {
  854. margin-top: 0;
  855. opacity: 0;
  856. }
  857. to {
  858. margin-top: 0.625rem;
  859. opacity: 1;
  860. }
  861. }
  862. .shop-prompt[data-v-471975a0] {
  863. position: absolute;
  864. bottom: 18.75rem;
  865. left: 0.75rem;
  866. padding: 0.1875rem 0.625rem;
  867. background: rgba(230, 154, 34, 0.7);
  868. border-radius: 0.75rem;
  869. z-index: 9;
  870. font-weight: 500;
  871. font-size: 0.8125rem;
  872. color: #FFFFFF;
  873. }
  874. .side-group[data-v-471975a0] {
  875. position: absolute;
  876. top: 30%;
  877. right: 1.5625rem;
  878. z-index: 9;
  879. display: flex;
  880. flex-direction: column;
  881. align-items: center;
  882. }
  883. .side-group .side-item[data-v-471975a0] {
  884. font-weight: 500;
  885. font-size: 0.75rem;
  886. color: #FFFFFF;
  887. margin-bottom: 1rem;
  888. text-align: center;
  889. }
  890. .side-group .side-item uni-image[data-v-471975a0] {
  891. width: 2.25rem;
  892. height: 2.25rem;
  893. }
  894. .shoppop[data-v-471975a0] {
  895. padding: 0.6875rem 0.5rem;
  896. }
  897. .shoppop .shoppop-top[data-v-471975a0] {
  898. display: flex;
  899. justify-content: space-between;
  900. align-items: center;
  901. padding: 0 0.5rem 0.6875rem;
  902. }
  903. .shoppop .shoppop-top .search-input[data-v-471975a0] {
  904. width: 12.9375rem;
  905. height: 2.375rem;
  906. background: #FFFFFF;
  907. border-radius: 1.125rem;
  908. margin-left: 0.625rem;
  909. padding: 0 1rem;
  910. box-sizing: border-box;
  911. font-size: 0.75rem;
  912. margin-right: 0.75rem;
  913. }
  914. .shoppop .shoppop-top .search-top[data-v-471975a0] {
  915. font-size: 0.5625rem;
  916. color: #222222;
  917. }
  918. .shoppop .shop-list[data-v-471975a0] {
  919. overflow: hidden;
  920. }
  921. .shoppop .shop-list .list-item[data-v-471975a0] {
  922. display: flex;
  923. align-items: center;
  924. padding: 0.625rem 0.5rem;
  925. background: #FFFFFF;
  926. border-radius: 0.5rem;
  927. margin-bottom: 0.5rem;
  928. }
  929. .shoppop .shop-list .list-item .goods-img[data-v-471975a0] {
  930. width: 6.25rem;
  931. height: 6.25rem;
  932. border-radius: 0.5rem;
  933. overflow: hidden;
  934. position: relative;
  935. margin-right: 0.75rem;
  936. }
  937. .shoppop .shop-list .list-item .goods-img uni-image[data-v-471975a0] {
  938. width: 100%;
  939. height: 100%;
  940. }
  941. .shoppop .shop-list .list-item .goods-img .goods-label[data-v-471975a0] {
  942. position: absolute;
  943. top: 0;
  944. width: 2rem;
  945. height: 1.25rem;
  946. background: rgba(0, 0, 0, 0.5);
  947. border-radius: 0.5rem 0 0.5rem 0;
  948. text-align: center;
  949. font-weight: 500;
  950. font-size: 0.875rem;
  951. color: #FFFFFF;
  952. }
  953. .shoppop .shop-list .list-item .goods-right[data-v-471975a0] {
  954. flex: 1;
  955. }
  956. .shoppop .shop-list .list-item .goods-right .goods-title[data-v-471975a0] {
  957. font-weight: 500;
  958. font-size: 0.875rem;
  959. color: #000000;
  960. }
  961. .shoppop .shop-list .list-item .goods-right .goods-details[data-v-471975a0] {
  962. font-size: 0.75rem;
  963. color: #999999;
  964. margin: 0.3125rem 0 0.625rem;
  965. }
  966. .shoppop .shop-list .list-item .goods-right .goods-people[data-v-471975a0] {
  967. font-size: 0.6875rem;
  968. color: #E69A22;
  969. height: 1.75rem;
  970. }
  971. .shoppop .shop-list .list-item .goods-right .goods-shop[data-v-471975a0] {
  972. display: flex;
  973. justify-content: space-between;
  974. }
  975. .shoppop .shop-list .list-item .goods-right .goods-shop .nummber[data-v-471975a0] {
  976. color: #FF5C03;
  977. font-size: 0.6875rem;
  978. font-weight: 500;
  979. }
  980. .shoppop .shop-list .list-item .goods-right .goods-shop .btn-group[data-v-471975a0] {
  981. text-align: center;
  982. line-height: 1.75rem;
  983. }
  984. .shoppop .shop-list .list-item .goods-right .goods-shop .btn-group .collect-btn[data-v-471975a0] {
  985. width: 2.25rem;
  986. background: #F5F7FA;
  987. border-radius: 0.25rem 0 0 0.25rem;
  988. }
  989. .shoppop .shop-list .list-item .goods-right .goods-shop .btn-group .shop-btn[data-v-471975a0] {
  990. width: 4.75rem;
  991. background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
  992. border-radius: 0 0.25rem 0.25rem 0;
  993. font-weight: 500;
  994. font-size: 0.8125rem;
  995. color: #FFFFFF;
  996. }
  997. [data-v-471975a0] .u-list-item {
  998. width: 100%;
  999. display: flex;
  1000. align-items: center;
  1001. }