deviceDetail.wxss 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  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. .container .content.data-v-d4784c2a {
  27. padding: 24rpx;
  28. }
  29. .container .content .xy-card.data-v-d4784c2a {
  30. margin-bottom: 24rpx;
  31. }
  32. .container .content .top > view.data-v-d4784c2a:nth-child(1) {
  33. display: flex;
  34. flex-flow: row nowrap;
  35. justify-content: space-between;
  36. }
  37. .container .content .top > view:nth-child(1) .t-left.data-v-d4784c2a {
  38. width: 380rpx;
  39. }
  40. .container .content .top > view:nth-child(1) .t-left > view.data-v-d4784c2a:nth-child(1) {
  41. font-size: 36rpx;
  42. font-weight: bold;
  43. }
  44. .container .content .top > view:nth-child(1) .t-left > view.data-v-d4784c2a:nth-child(2) {
  45. font-size: 26rpx;
  46. color: #2C6FF3;
  47. border: 1rpx solid #2C6FF3;
  48. border-radius: 6rpx;
  49. padding: 0 8rpx;
  50. background-color: rgb(243, 249, 255);
  51. margin-left: 12rpx;
  52. }
  53. .container .content .top > view:nth-child(1) .t-right.data-v-d4784c2a {
  54. font-size: 30rpx;
  55. color: #f56c6c;
  56. position: relative;
  57. margin-left: 24rpx;
  58. }
  59. .container .content .top > view:nth-child(1) .t-right.data-v-d4784c2a::before {
  60. content: "";
  61. display: inline-block;
  62. background-color: green;
  63. width: 16rpx;
  64. height: 16rpx;
  65. border-radius: 16rpx;
  66. margin-right: 12rpx;
  67. }
  68. .container .content .top > view:nth-child(1) .t-right.off.data-v-d4784c2a {
  69. color: #666;
  70. }
  71. .container .content .top > view:nth-child(1) .t-right.off.data-v-d4784c2a::before {
  72. background-color: #666;
  73. }
  74. .container .content .top > view.data-v-d4784c2a:nth-child(2) {
  75. display: flex;
  76. flex-direction: row;
  77. justify-content: space-between;
  78. margin-top: 12rpx;
  79. }
  80. .container .content .top > view:nth-child(2) > .cu-btn.data-v-d4784c2a {
  81. height: 40rpx;
  82. }
  83. .container .content .top > view:nth-child(2) .down-qr.data-v-d4784c2a {
  84. font-size: 26rpx;
  85. color: #2C6FF3;
  86. border: 1rpx solid #2C6FF3;
  87. border-radius: 6rpx;
  88. padding: 4rpx 8rpx;
  89. background-color: rgb(243, 249, 255);
  90. }
  91. .container .content .top > view:nth-child(2) .edit.data-v-d4784c2a {
  92. font-size: 26rpx;
  93. color: #fff;
  94. border: 1rpx solid #2C6FF3;
  95. border-radius: 6rpx;
  96. padding: 4rpx 8rpx;
  97. background-color: rgb(243, 249, 255);
  98. margin-left: 12rpx;
  99. background-color: #2C6FF3;
  100. }
  101. .container .content .center.data-v-d4784c2a {
  102. border-radius: 8rpx;
  103. background-color: rgb(245, 248, 251);
  104. padding: 24rpx 12rpx 42rpx;
  105. font-size: 30rpx;
  106. margin-top: 24rpx;
  107. overflow: hidden;
  108. position: relative;
  109. height: 560rpx;
  110. transition: all 0.5s ease 0s;
  111. }
  112. .container .content .center .unfold.data-v-d4784c2a {
  113. position: absolute;
  114. bottom: 8rpx;
  115. right: 24rpx;
  116. }
  117. .container .content .center.center-more.data-v-d4784c2a {
  118. height: 170rpx;
  119. }
  120. .container .content .center .d-line.data-v-d4784c2a {
  121. display: flex;
  122. flex-flow: row nowrap;
  123. justify-content: flex-start;
  124. }
  125. .container .content .center .d-line > view.data-v-d4784c2a:nth-child(1) {
  126. width: 50%;
  127. }
  128. .container .content .center .d-line > view.data-v-d4784c2a:nth-child(2) {
  129. width: 50%;
  130. }
  131. .container .content .center .c-item.data-v-d4784c2a {
  132. display: flex;
  133. flex-flow: row nowrap;
  134. justify-content: flex-start;
  135. font-size: 28rpx;
  136. margin-bottom: 18rpx;
  137. align-items: flex-end;
  138. }
  139. .container .content .center .c-item .name.data-v-d4784c2a {
  140. min-width: 100rpx;
  141. color: #999;
  142. }
  143. .container .content .center .c-item .val.data-v-d4784c2a {
  144. color: #333;
  145. padding-left: 6rpx;
  146. overflow: hidden;
  147. text-overflow: ellipsis;
  148. white-space: nowrap;
  149. }
  150. .container .content .center .c-item .val text.data-v-d4784c2a {
  151. margin-left: 12rpx;
  152. text-decoration: underline;
  153. color: #2C6FF3;
  154. }
  155. .container .content .center .c-item .val.net text.data-v-d4784c2a {
  156. text-decoration: none;
  157. }
  158. .container .content .bot.data-v-d4784c2a {
  159. display: flex;
  160. flex-flow: row nowrap;
  161. justify-content: space-between;
  162. margin-top: 24rpx;
  163. }
  164. .container .content .bot .cu-btn.data-v-d4784c2a {
  165. padding: 0 12rpx;
  166. font-size: 26rpx;
  167. height: 60rpx;
  168. line-height: 50rpx;
  169. }
  170. .container .content .bot .cu-btn1.data-v-d4784c2a {
  171. background-color: red;
  172. color: #fff;
  173. }
  174. .container .content .bot .cu-btn2.data-v-d4784c2a {
  175. background-color: #fff;
  176. color: #2C6FF3;
  177. border: 1rpx solid #2C6FF3;
  178. }
  179. .container .content .bot .cu-btn3.data-v-d4784c2a {
  180. background-color: #2C6FF3;
  181. color: #fff;
  182. }
  183. .container .content .qrcode-content.data-v-d4784c2a {
  184. padding: 24rpx;
  185. }
  186. .container .content .qrcode-content .save-qrcode.data-v-d4784c2a {
  187. margin-top: 24rpx;
  188. }
  189. .container .content .chart-content.data-v-d4784c2a {
  190. width: 100%;
  191. }
  192. .container .content .chart-content .total.data-v-d4784c2a {
  193. display: flex;
  194. flex-direction: column;
  195. align-items: center;
  196. }
  197. .container .content .chart-content .more.data-v-d4784c2a {
  198. background-color: #2C6FF3;
  199. padding: 0 24rpx;
  200. font-size: 26rpx;
  201. height: 50rpx;
  202. line-height: 50rpx;
  203. margin-top: 24rpx;
  204. }
  205. .container .content .t-content.data-v-d4784c2a {
  206. display: flex;
  207. flex-flow: row nowrap;
  208. width: 100%;
  209. box-sizing: border-box;
  210. text-align: center;
  211. }
  212. .container .content .t-content .t-item.data-v-d4784c2a {
  213. width: 50%;
  214. margin-top: 24rpx;
  215. }
  216. .container .content .t-content .t-item .t-name.data-v-d4784c2a {
  217. font-size: 28rpx;
  218. line-height: 40rpx;
  219. }
  220. .container .content .t-content .t-item .t-num.data-v-d4784c2a {
  221. font-size: 28rpx;
  222. line-height: 46rpx;
  223. padding: 12rpx 0;
  224. }
  225. .container .content .t-content .t-item .t-num text.data-v-d4784c2a {
  226. font-size: 40rpx;
  227. font-weight: bold;
  228. }
  229. .container .content .title.data-v-d4784c2a {
  230. font-size: 34rpx;
  231. font-weight: bold;
  232. color: #333;
  233. line-height: 54rpx;
  234. }
  235. .container .content .bot1.data-v-d4784c2a {
  236. display: flex;
  237. justify-content: flex-end;
  238. }
  239. .container .content .l-content.data-v-d4784c2a {
  240. padding-top: 24rpx;
  241. }
  242. .container .content .l-content .l-item.data-v-d4784c2a {
  243. font-size: 28rpx;
  244. line-height: 50rpx;
  245. display: flex;
  246. flex-direction: row;
  247. }
  248. .container .content .l-content .l-item .l-status.data-v-d4784c2a {
  249. margin-left: 24rpx;
  250. }
  251. .container .content .popup-content.data-v-d4784c2a {
  252. padding: 0 24rpx;
  253. }
  254. .container .content .restart.data-v-d4784c2a {
  255. padding: 40rpx 0;
  256. font-size: 34rpx;
  257. text-align: center;
  258. }
  259. .temp .info.data-v-d4784c2a {
  260. color: red;
  261. height: 60rpx;
  262. line-height: 60rpx;
  263. text-align: center;
  264. }
  265. .temp .flex.data-v-d4784c2a {
  266. margin-top: 20rpx;
  267. height: 60rpx;
  268. }
  269. .temp .flex .lab.data-v-d4784c2a {
  270. line-height: 60rpx;
  271. height: 60rpx;
  272. text-align: center;
  273. font-weight: 600;
  274. margin-top: 20rpx;
  275. }
  276. .temp .flex .to.data-v-d4784c2a {
  277. width: 60rpx;
  278. margin-left: 20rpx;
  279. margin-top: 0;
  280. font-weight: 500;
  281. }
  282. .temp .flex .time-box.data-v-d4784c2a {
  283. height: 50rpx;
  284. width: 200rpx;
  285. line-height: 50rpx;
  286. margin-left: 20rpx;
  287. text-align: center;
  288. border-radius: 10rpx;
  289. border-style: solid;
  290. border-width: 1px;
  291. }