init

src/assets/css/iconfont.styl

@@ -0,0 +1,26 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 1255596 */
+  src: url('iconfont/iconfont.woff2?t=1620977303191') format('woff2'),
+       url('iconfont/iconfont.woff?t=1620977303191') format('woff'),
+       url('iconfont/iconfont.ttf?t=1620977303191') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-guanbi:before {
+  content: "\e60f";
+}
+
+@font-face {
+  font-family: "阿里妈妈数黑体";
+  src: url("font/Alimama_ShuHeiTi_Bold.woff2") format("woff2"),
+       url("font/Alimama_ShuHeiTi_Bold.woff") format("woff"),
+       url('font/Alimama_ShuHeiTi_Bold.ttf') format('truetype');
+  font-display: swap;
+}

src/assets/css/iconfont/iconfont.json

@@ -0,0 +1,37 @@
+{
+  "id": "1255596",
+  "name": "nl-hht-hl",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "2229060",
+      "name": "无信号",
+      "font_class": "no-signal",
+      "unicode": "e76b",
+      "unicode_decimal": 59243
+    },
+    {
+      "icon_id": "400034",
+      "name": "下拉",
+      "font_class": "htmal5icon03",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "731140",
+      "name": "选择",
+      "font_class": "guanbi1",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "4736203",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    }
+  ]
+}

src/assets/css/layout.styl

@@ -0,0 +1,133 @@
+@import 'mixin.styl'
+
+// 样式测试
+.style_block
+  display none
+  position absolute
+  _wh(calc(100% / 3), calc(100% / 3))
+  background red
+// 页面跳转
+.tooltip_wrap
+  position fixed
+  bottom 10%
+  z-index 10
+  _wh(auto, 40px)
+  padding 5px 5px
+  background-color rgba(228,233,237,1)
+  _fj(row)
+  &:hover
+    opacity 1 !important
+.left_tooltip_wrap
+    right 0
+    border-top-left-radius 12px
+    border-bottom-left-radius 12px
+.right_tooltip_wrap
+    left 0
+    border-top-right-radius 12px
+    border-bottom-right-radius 12px
+.tooltip_arrow
+  _wh(40px, 100%)
+  _font(14px, 30px, #999,,)
+.tooltip_pages
+  height 100%
+  _fj(row)
+  transition width .3s ease
+  overflow hidden
+.tooltip_page
+  height 100%
+  margin 0 5px
+  _font(14px, 30px, #999,,)
+  border 1px solid #999
+  border-radius: 30px;
+  box-sizing: border-box;
+  padding: 0 10px;
+  &:hover
+    background-color #03fcfd
+    border-color #03fcfd
+    color #fff
+.current_page
+    background-color #02d0d0
+    border-color #02d0d0
+    color #fff
+
+// 弹窗
+.popup_block_wraper
+  position fixed
+  top 0
+  left 0
+  z-index 100
+  width 550px
+  padding 20px 14px 30px 14px
+  _bis('../../images/popup_bg.png')
+.foldline
+  position absolute
+  right -109px
+  z-index 10
+  _wh(127px,105px)
+  _bis('../images/dot_line.png')
+.foldline_right
+   right -109px
+.foldline_left
+   left -109px
+   transform rotateY(180deg)
+.popup_bg
+  _wh(100%, 100%)
+  background top center / 100% 18px url(../../images/popup_line.png) no-repeat
+  overflow hidden
+.popup_block
+  _wh(100%,100%)
+  padding 15px 0 0 0
+.pop_header
+    _wh(100%, 28px)
+    padding 0 5px
+    _fj(row)
+.pop_name
+  width 50%
+  _font(14px,28px,#32C5FF,,left)
+  text-shadow 2px 2px 4px #A6E6FF
+  margin-bottom 8px
+.pop_status
+  _wh(50%, 28px)
+  _fj(row,flex-end)
+.pop_status_dot
+    _wh(15px, 15px)
+    border-radius 50%
+    margin-right 10px
+.pop_status_text
+    _font(16px, 28px, #fff,,)
+.pop_content
+  _wh(100%, calc(100% - 28px))
+  padding 0 5px
+  overflow-y auto
+  _fj(row,flex-start)
+  flex-wrap wrap
+.pop_item
+    _wh(calc(50% - 2.5px), 30px)
+    _fj(row,flex-start)
+    background-color rgba(50,197,255,50%)
+    border-left 3px solid #fdfd0f
+    margin-bottom 5px
+    padding 0 5px
+    &:nth-child(2n+2)
+        width calc(50% - 2.5px)
+        margin-left 5px
+.pop_label
+    width 100px
+    _font(12px, 24px, #fff,,left)
+.pop_val
+    width calc(100% - 100px)
+    _font(13px, 24px, #0ff,,left)
+    white-space nowrap
+.pop_val_s
+    width calc(100% - 118px)
+.pop_unit
+    width 18px
+    _font(13px, 24px, #fff,,right)
+    overflow hidden
+.icon-guanbi
+    position absolute
+    top 8px
+    right 9px
+    _wh(30px, 22px)
+    _font(15px, 22px, #fff,,center)
+    background-color #0a3679

src/assets/css/mixin.styl

@@ -0,0 +1,48 @@
+$green = #30EBC9
+$yellow = #E2BB0E
+$gray = #516282
+$gray1 = #8B90A6
+$orange = #F96700
+$green2 = #65d837
+
+.green
+  background-color #11ff0d
+.yellow
+  background-color #fdfd0f
+.gray
+  background-color #bfbfbf
+.gray1
+  background-color #d8d1d1
+.red
+  background-color #ff1016
+
+//宽高
+_wh(w, h)
+  width: w
+  height: h
+
+//字体大小、行高、颜色
+_font(size,height,color=#ffffff,weight=normal,align=center)
+  font-size: size
+  line-height: height
+  color: color
+  font-weight: weight
+  text-align: align
+
+// 背景图片地址和大小
+_bis(url,w=100%,h=100%,x=center,y=center,r=no-repeat)
+  background-position: x y
+  background-size: w h
+  background-image: url(url)
+  background-repeat: r
+
+// 背景图片改变颜色
+_shadow(w,c)
+  filter drop-shadow(w 0 0 c)
+
+//flex 布局和 子元素 对其方式
+_fj(c=column, x=space-between,y=center)
+  display: flex
+  flex-direction: c
+  justify-content: x
+  align-items: y

src/assets/css/reset.css

@@ -0,0 +1,163 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, input {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    /* font-size: 0.16rem;
+    line-height: inherit; */
+    color: #ffffff;
+    /* font-weight: normal; */
+    /* vertical-align: baseline; */
+}
+ 
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, menu, nav, section {
+     display: block;
+}
+ 
+body {
+     line-height: 1;
+}
+ 
+blockquote, q {
+     quotes: none;
+}
+
+ blockquote:before, blockquote:after,
+q:before, q:after {
+     content: none;
+}
+ 
+table {
+     border-collapse: collapse;
+     border-spacing: 0;
+}
+ 
+/* custom */
+a,a:link,a:visited,a:active {
+     color: #7e8c8d;
+     text-decoration: none;
+     -webkit-backface-visibility: hidden;
+}
+ 
+li {
+     list-style: none;
+}
+ 
+::-webkit-scrollbar {
+     width: 5px;
+     height: 5px;
+}
+ 
+::-webkit-scrollbar-track-piece {
+     background-color: rgba(0, 0, 0, 0.2);
+     -webkit-border-radius: 6px;
+}
+ 
+::-webkit-scrollbar-thumb:vertical {
+     height: 5px;
+     background-color: rgba(125, 125, 125, 0.7);
+     -webkit-border-radius: 6px;
+}
+ 
+::-webkit-scrollbar-thumb:horizontal {
+     width: 5px;
+     background-color: rgba(125, 125, 125, 0.7);
+     -webkit-border-radius: 6px;
+}
+ 
+html, body {
+     width: 100%;
+     height: 100%;
+     /* min-width: 1440px;
+     min-height: 789px; */
+     width: 1920px;
+     /* width: 3840px; */
+     height: 1080px;
+}
+ 
+body {
+     -webkit-text-size-adjust: none;
+     -webkit-tap-highlight-color: rgba(11, 7, 7, 0);
+     -moz-user-select:none;/*火狐*/
+     -webkit-user-select:none;/*webkit浏览器*/
+     -ms-user-select:none;/*IE10*/
+     -khtml-user-select:none;/*早期浏览器*/
+     user-select:none;
+     background-color: #050830;
+}
+
+div, p {
+     box-sizing: border-box;
+}
+
+.clearfix { 
+    zoom: 1; 
+}
+    
+.clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+    
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+    
+.fl {
+    float: left !important;
+} 
+
+.fr {
+    float: right !important;
+}
+
+.hide {
+     visibility: hidden;
+}
+
+.fontselect {
+    -moz-user-select:none;/*火狐*/
+    -webkit-user-select:none;/*webkit浏览器*/
+    -ms-user-select:none;/*IE10*/
+    -khtml-user-select:none;/*早期浏览器*/
+    user-select:none;
+}
+
+.flexcenter {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.pointer {
+     cursor: pointer;
+}
+
+.hidden {
+     visibility: hidden
+}
+
+.pl10 {padding-left: 10px;}
+.pl20 {padding-left: 20px;}
+.mgb3 {margin-bottom: .03rem;}
+.mgb14 {margin-bottom: .14rem;}
+.mgb08 {margin-bottom: .08rem;}
+.mgt3 { margin-top: .03rem;}
+.mgt80 { margin-top: .8rem;}