Newer
Older
DH_Apicture / src / assets / styles / WaterAssets.scss
@ZZJ ZZJ on 30 Nov 5 KB 融云样式相关
  1. // 左右模块背景
  2. .WaterAssetsBoxLeft {
  3. left: 18px;
  4. }
  5. .WaterAssetsBoxRight {
  6. right: 18px;
  7. }
  8.  
  9. .TOP_Title {
  10. width: 100%;
  11. height: 44px;
  12. background: url('@/assets/images/shuiwuzichan/big-title-bg.png') no-repeat center;
  13. background-size: 100% 100%;
  14. .p56 {
  15. height: 100%;
  16. padding-left: 56px;
  17. padding-right: 7px;
  18. margin-left: 2px;
  19. }
  20.  
  21. .tabData {
  22. .eachClick {
  23. // width: 64px;
  24. height: 26px;
  25. background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%);
  26. margin-left: 10px;
  27. padding: 0 12px;
  28.  
  29. font-weight: bold;
  30. font-size: 14px;
  31. color: #8fbffe;
  32. line-height: 26px;
  33. cursor: pointer;
  34. border-radius: 1px;
  35. border: 1px solid #0b9bff;
  36. }
  37. .active {
  38. background: linear-gradient(0deg, rgba(6, 227, 209, 0.8) 0%, rgba(12, 59, 85, 0.1) 100%);
  39. border-radius: 1px;
  40. border: 1px solid #2ff6e8;
  41. font-family: Source Han Sans CN;
  42. font-weight: bold;
  43. font-size: 14px;
  44. color: #ffffff;
  45. }
  46. }
  47. }
  48.  
  49. .shuziluansheng {
  50. background: url('@/assets/images/shuiwuzichan/shuziluansheng.png') no-repeat center;
  51. background-size: 100% 100%;
  52. }
  53.  
  54. .WaterAssetsBox {
  55. width: 450px;
  56. height: calc(100vh - 108px);
  57. position: fixed;
  58. top: 88px;
  59. background: linear-gradient(90deg, rgba(11, 18, 28, 0.4) 0%, rgba(48, 58, 69, 0.3) 4100%);
  60. background-size: 100% 100%;
  61. overflow: hidden;
  62. z-index: 10;
  63. }
  64.  
  65. .centerbottmBox {
  66. width: calc(100% - 1000px);
  67. height: 110px;
  68. position: fixed;
  69. left: 50%;
  70. transform: translateX(-50%);
  71. bottom: 20px;
  72. background: url('@/assets/images/donghu/bottombg.png') no-repeat;
  73. background-size: 100% 100%;
  74. z-index: 10;
  75. padding-top: 10px;
  76. }
  77.  
  78. .pbottom {
  79. padding-bottom: 10px;
  80. }
  81.  
  82. .top-title {
  83. font-weight: bold;
  84. font-size: 20px;
  85. color: #ffffff;
  86. }
  87.  
  88. // .small-TitleBox {
  89. // width: 100%;
  90. // height: 27px;
  91.  
  92. // font-weight: bold;
  93. // font-size: 18px;
  94. // color: #ffffff;
  95. // padding-left: 40px;
  96. // margin-left: 10px;
  97. // }
  98.  
  99. .small-TitleBox {
  100. height: 35px;
  101. background: url('@/assets/images/pictureOnMap/leve2.png') no-repeat center bottom;
  102. background-size: 103% auto;
  103. font-weight: bold;
  104. font-size: 18px;
  105. color: #e0e5fa;
  106. padding-left: 39px;
  107. line-height: 37px;
  108. }
  109.  
  110. .wushuichulizhan {
  111. background: url('@/assets/images/shuiwuzichan/title-wushuichulizhan.png') no-repeat;
  112. background-size: 100% 100%;
  113. }
  114.  
  115. .tiaoxuchi {
  116. background: url('@/assets/images/shuiwuzichan/title-tiaoxuchi.png') no-repeat;
  117. background-size: 100% 100%;
  118. }
  119.  
  120. .guanwang {
  121. background: url('@/assets/images/shuiwuzichan/title-guanwang.png') no-repeat;
  122. background-size: 100% 100%;
  123. }
  124.  
  125. .fenliujin {
  126. background: url('@/assets/images/shuiwuzichan/title-fenliujin.png') no-repeat;
  127. background-size: 100% 100%;
  128. }
  129.  
  130. .jishuidian {
  131. background: url('@/assets/images/shuiwuzichan/title-jishuidian.png') no-repeat;
  132. background-size: 100% 100%;
  133. }
  134.  
  135. .guanwangjiance {
  136. background: url('@/assets/images/shuiwuzichan/title-guanwangjiance.png') no-repeat;
  137. background-size: 100% 100%;
  138. }
  139. .shuixijiance {
  140. background: url('@/assets/images/shuiwuzichan/title-shuixijiance.png') no-repeat;
  141. background-size: 100% 100%;
  142. }
  143.  
  144. .video {
  145. background: url('@/assets/images/shuiwuzichan/title-video.png') no-repeat;
  146. background-size: 100% 100%;
  147. }
  148.  
  149. .psh {
  150. background: url('@/assets/images/shuiwuzichan/title-psh.png') no-repeat;
  151. background-size: 100% 100%;
  152. }
  153.  
  154. .bengzhan {
  155. background: url('@/assets/images/shuiwuzichan/title-bengzhan.png') no-repeat;
  156. background-size: 100% 100%;
  157. }
  158.  
  159. .Gw_center_box {
  160. padding: 10px;
  161. display: flex;
  162. justify-content: space-between;
  163.  
  164. .boxitem {
  165. width: 28%;
  166. position: relative;
  167.  
  168. .itemimg {
  169. width: 100%;
  170. height: 80%;
  171. }
  172.  
  173. .centervalue {
  174. left: 50%;
  175. }
  176.  
  177. .Numbervalue {
  178. position: absolute;
  179. top: 0;
  180. left: 50%;
  181. transform: translateX(-50%);
  182. display: flex;
  183. align-items: end;
  184.  
  185. .value {
  186. font-family: DINPro;
  187. font-weight: bold;
  188. font-size: 23px;
  189. color: #61cdfa;
  190. }
  191.  
  192. .unit {
  193. margin-left: 4px;
  194. font-size: 11px;
  195. font-weight: normal;
  196. color: #ffffff;
  197. }
  198. }
  199.  
  200. .name {
  201. position: absolute;
  202. bottom: 0;
  203. left: 50%;
  204. transform: translateX(-50%);
  205.  
  206. font-weight: bold;
  207. font-size: 12px;
  208. color: #ffffff;
  209. }
  210. }
  211. }
  212.  
  213. .shuixijianceBox {
  214. display: flex;
  215. justify-content: space-around;
  216. padding: 0 10px;
  217.  
  218. .boxitem {
  219. width: 218;
  220.  
  221. .itemimg {
  222. width: 100%;
  223. height: 55%;
  224. }
  225.  
  226. .value {
  227. text-align: center;
  228. font-family: DINPro;
  229. font-weight: bold;
  230. font-size: 20px;
  231. color: #61cdfa;
  232. }
  233.  
  234. .name {
  235. text-align: center;
  236.  
  237. font-weight: 400;
  238. font-size: 12px;
  239. color: #ffffff;
  240. }
  241. }
  242. }
  243.  
  244. .videoitem {
  245. display: flex;
  246. height: 18%;
  247. align-items: center;
  248. padding: 0 20px;
  249. background: url('@/assets/images/shuiwuzichan/video-bg.png') no-repeat;
  250. background-size: 100% 100%;
  251.  
  252. .lefticon {
  253. width: 60px;
  254. height: 30px;
  255. }
  256.  
  257. .itembox {
  258. display: flex;
  259. width: 74px;
  260. justify-content: space-between;
  261. margin-left: 30px;
  262.  
  263. .name {
  264. font-family: Source Han Sans SC;
  265. font-weight: 500;
  266. font-size: 14px;
  267. color: #ffffff;
  268. line-height: 32px;
  269. }
  270.  
  271. .value {
  272. font-family: DINPro;
  273. font-weight: bold;
  274. font-size: 24px;
  275. }
  276.  
  277. &.two_item {
  278. margin-left: 80px;
  279. }
  280. }
  281.  
  282. .blue {
  283. color: #2cb7ff;
  284. }
  285.  
  286. .green {
  287. color: #00fcff;
  288. }
  289.  
  290. .yellow {
  291. color: #ff993e;
  292. }
  293. }