Clock.wxss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  2. !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/pages/index/index.scss ***!
  3. \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
  4. .canvas-container {
  5. width: 100%;
  6. height: 500rpx;
  7. }
  8. .demo {
  9. width: 749rpx;
  10. height: 30rpx;
  11. background-color: aqua;
  12. }
  13. .login {
  14. color: red;
  15. }
  16. /*!*******************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  17. !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/pages/Clock.scss ***!
  18. \*******************************************************************************************************************************************************************************************************************************************************************************************************************/
  19. .console_box {
  20. display: -webkit-flex;
  21. display: -ms-flexbox;
  22. display: flex;
  23. -webkit-flex-direction: column;
  24. -ms-flex-direction: column;
  25. flex-direction: column;
  26. -webkit-align-items: center;
  27. -ms-flex-align: center;
  28. align-items: center;
  29. margin: 20rpx;
  30. padding-top: 40rpx;
  31. padding-bottom: 40rpx;
  32. color: #fff;
  33. background-color: #1c1c1c;
  34. border-radius: 40rpx;
  35. }
  36. /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  37. !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./node_modules/taro-ui/dist/style/components/float-layout.scss ***!
  38. \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
  39. @charset "UTF-8";
  40. /**
  41. * Default variables
  42. */
  43. /**
  44. * Mixes a color with white. It's different from lighten()
  45. *
  46. * @param {color} $color
  47. * @param {number (percentage)} $percent [The amout of white to be mixed in]
  48. * @return {color}
  49. *
  50. * @example
  51. * .element {
  52. * background-color: tint(#6ecaa6 , 40%);
  53. * }
  54. *
  55. * // CSS Output
  56. * .element {
  57. * background-color: #a8dfc9;
  58. * }
  59. */
  60. /* The Color of O2Team Brand */
  61. /* Color */
  62. /* Color Palette */
  63. /* Text Color */
  64. /* Link */
  65. /* 背景色 */
  66. /* 边框颜色 */
  67. /* 图标颜色 */
  68. /* Border Radius */
  69. /* 透明度 */
  70. /* Font */
  71. /* Line Height */
  72. /* 水平间距 */
  73. /* 垂直间距 */
  74. /* 图标尺寸 */
  75. /* z-index */
  76. /* timing function */
  77. /**
  78. * CSS cubic-bezier timing functions
  79. * http://bourbon.io/docs/#timing-functions
  80. */
  81. /**
  82. * 组件变量
  83. */
  84. /* Accordion */
  85. /* Activity Indicator */
  86. /* Avatar */
  87. /* Badge */
  88. /* Button */
  89. /* Float Button */
  90. /* Calendar */
  91. /* Card */
  92. /* Checkbox */
  93. /* Countdown */
  94. /* Curtain */
  95. /* Divider */
  96. /* Drawer */
  97. /* FloatLayout */
  98. /* Grid */
  99. /* ImagePicker */
  100. /* Indexes */
  101. /* InputNumber */
  102. /* Input */
  103. /* List */
  104. /* LoadMore */
  105. /* Loading */
  106. /* Message */
  107. /* Modal */
  108. /* NavBar */
  109. /* NoticeBar */
  110. /* Pagination */
  111. /* Progress */
  112. /* Radio */
  113. /* Range */
  114. /* Rate */
  115. /* SearchBar */
  116. /* SegmentedControl */
  117. /* Slider */
  118. /* Steps */
  119. /* SwipeAction */
  120. /* Switch */
  121. /* TabBar */
  122. /* Tabs */
  123. /* Tag */
  124. /* Textarea */
  125. /* Timeline */
  126. /**
  127. * Mixins
  128. */
  129. /* library */
  130. /**
  131. * 元素居中定位
  132. */
  133. /**
  134. * @example scss
  135. *
  136. * .element {
  137. * @include clearfix;
  138. * }
  139. *
  140. * // CSS Output
  141. * .element::after {
  142. * clear: both;
  143. * content: '';
  144. * display: block;
  145. * }
  146. */
  147. /**
  148. * 通用的遮罩
  149. */
  150. /**
  151. * Mixes a color with black. It's different from darken()
  152. *
  153. * @param {color} $color
  154. * @param {number (percentage)} $percent [The amount of black to be mixed in]
  155. * @return {color}
  156. *
  157. * @example
  158. * .element {
  159. * background-color: shade(#ffbb52, 60%);
  160. * }
  161. *
  162. * // CSS Output
  163. * .element {
  164. * background-color: #664a20;
  165. * }
  166. */
  167. /**
  168. * Mixes a color with white. It's different from lighten()
  169. *
  170. * @param {color} $color
  171. * @param {number (percentage)} $percent [The amout of white to be mixed in]
  172. * @return {color}
  173. *
  174. * @example
  175. * .element {
  176. * background-color: tint(#6ecaa6 , 40%);
  177. * }
  178. *
  179. * // CSS Output
  180. * .element {
  181. * background-color: #a8dfc9;
  182. * }
  183. */
  184. /* Flex Item */
  185. /**
  186. * 默认主题下 $color-border-light
  187. */
  188. /**
  189. * 点击态
  190. */
  191. /**
  192. * 禁止态
  193. */
  194. /**
  195. * 设置placeholder 颜色
  196. */
  197. /**
  198. * 默认主题下 $color-border-light
  199. */
  200. .at-float-layout {
  201. position: fixed;
  202. width: 100%;
  203. height: 100%;
  204. top: 0;
  205. left: 0;
  206. visibility: hidden;
  207. z-index: 810;
  208. -webkit-transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  209. transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  210. /* elements */
  211. /* modifiers */
  212. }
  213. .at-float-layout__overlay {
  214. top: 0;
  215. left: 0;
  216. width: 100%;
  217. height: 100%;
  218. position: absolute;
  219. background-color: rgba(0, 0, 0, 0.3);
  220. opacity: 0;
  221. -webkit-transition: opacity 150ms ease-in;
  222. transition: opacity 150ms ease-in;
  223. }
  224. .at-float-layout__container {
  225. position: absolute;
  226. bottom: 0;
  227. width: 100%;
  228. min-height: 600rpx;
  229. max-height: 950rpx;
  230. background-color: #FFF;
  231. -webkit-transform: translate3d(0, 100%, 0);
  232. transform: translate3d(0, 100%, 0);
  233. -webkit-transition: -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  234. transition: -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  235. transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  236. transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
  237. }
  238. .at-float-layout .layout-header {
  239. position: relative;
  240. padding: 18rpx;
  241. line-height: 1.5;
  242. background-color: #F7F7F7;
  243. }
  244. .at-float-layout .layout-header__title {
  245. overflow: hidden;
  246. text-overflow: ellipsis;
  247. white-space: nowrap;
  248. color: #333;
  249. font-size: 32rpx;
  250. display: block;
  251. padding-right: 80rpx;
  252. }
  253. .at-float-layout .layout-header__btn-close {
  254. position: absolute;
  255. padding: 10rpx;
  256. top: 50%;
  257. right: 18rpx;
  258. width: 40rpx;
  259. height: 100%;
  260. line-height: 1;
  261. -webkit-transform: translate(0, -50%);
  262. -ms-transform: translate(0, -50%);
  263. transform: translate(0, -50%);
  264. }
  265. .at-float-layout .layout-header__btn-close::before, .at-float-layout .layout-header__btn-close::after {
  266. content: "";
  267. position: absolute;
  268. top: 50%;
  269. left: 50%;
  270. display: inline-block;
  271. width: 36rpx;
  272. height: 2PX;
  273. border-radius: 1PX;
  274. background: #CCC;
  275. }
  276. .at-float-layout .layout-header__btn-close::before {
  277. -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  278. transform: translate3d(-50%, -50%, 0) rotate(45deg);
  279. }
  280. .at-float-layout .layout-header__btn-close::after {
  281. -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
  282. transform: translate3d(-50%, -50%, 0) rotate(-45deg);
  283. }
  284. .at-float-layout .layout-body {
  285. font-size: 28rpx;
  286. padding: 18rpx;
  287. max-height: 828rpx;
  288. min-height: 514rpx;
  289. }
  290. .at-float-layout .layout-body__content {
  291. max-height: 798rpx;
  292. min-height: 484rpx;
  293. }
  294. .at-float-layout--active {
  295. visibility: visible;
  296. }
  297. .at-float-layout--active .at-float-layout__overlay {
  298. opacity: 1;
  299. }
  300. .at-float-layout--active .at-float-layout__container {
  301. -webkit-transform: translate3d(0, 0, 0);
  302. transform: translate3d(0, 0, 0);
  303. }
  304. /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  305. !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/features/trackTimeDuration/components/TitleBar.scss ***!
  306. \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
  307. .detail {
  308. display: -webkit-flex;
  309. display: -ms-flexbox;
  310. display: flex;
  311. -webkit-flex-direction: row;
  312. -ms-flex-direction: row;
  313. flex-direction: row;
  314. -webkit-justify-content: space-between;
  315. -ms-flex-pack: justify;
  316. justify-content: space-between;
  317. -webkit-align-items: center;
  318. -ms-flex-align: center;
  319. align-items: center;
  320. margin-bottom: 10rpx;
  321. color: #fff;
  322. background-color: #000;
  323. }
  324. .title {
  325. color: #fff;
  326. font-size: 48rpx;
  327. line-height: 48rpx;
  328. margin-bottom: 8rpx;
  329. }
  330. .time {
  331. color: #fff;
  332. opacity: 0.4;
  333. font-size: 32rpx;
  334. line-height: 48rpx;
  335. }
  336. .detail_item {
  337. display: -webkit-flex;
  338. display: -ms-flexbox;
  339. display: flex;
  340. -webkit-flex: 1;
  341. -ms-flex: 1;
  342. flex: 1;
  343. -webkit-flex-direction: column;
  344. -ms-flex-direction: column;
  345. flex-direction: column;
  346. -webkit-justify-content: center;
  347. -ms-flex-pack: center;
  348. justify-content: center;
  349. -webkit-align-items: center;
  350. -ms-flex-align: center;
  351. align-items: center;
  352. }
  353. .title_bg {
  354. padding-top: 9rpx;
  355. position: relative;
  356. width: 100rpx;
  357. }
  358. .badge {
  359. position: absolute;
  360. right: -9rpx;
  361. top: 0rpx;
  362. width: 18rpx;
  363. height: 18rpx;
  364. border-radius: 50%;
  365. background-color: #AAFF00;
  366. }