init

src/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <div id="app">
+    <v-toast v-show="showToast"></v-toast>
+    <v-dialog v-show="showAlert"></v-dialog>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import toast from '@/components/toast'
+import dialog from '@/components/dialog'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'App',
+  components: {
+    'v-toast': toast,
+    'v-dialog': dialog
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['showToast', 'showAlert'])
+  }
+}
+</script>

src/assets/css/iconfont.styl

@@ -0,0 +1,32 @@
+@font-face {
+  font-family: "iconfont";
+  src: url('iconfont/iconfont.woff2') format('woff2'),
+       url('iconfont/iconfont.woff') format('woff'),
+       url('iconfont/iconfont.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: "PangMenZhengDao";
+  src: url('font/PangMenZhengDao.ttf')
+}
+
+@font-face {
+  font-family: "SourceHanSansCN";
+  src: url('font/SourceHanSansCN-Normal.otf');
+}
+
+.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";
+}
+
+.icon_arrow:before {
+  content: '\e601'
+}

src/assets/css/layout.styl

@@ -0,0 +1,5 @@
+@import 'iconfont.styl'
+.bg
+  width 100%
+  height 100%
+  overflow hidden

src/assets/css/layout2.styl

@@ -0,0 +1,133 @@
+@import 'mixin2.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/screen3/popup_bg.png')
+.foldline
+  position absolute
+  right -109px
+  z-index 10
+  _wh(127px,105px)
+  _bis('../images/screen3/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/screen3/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 @@
+$red = #ed4754
+$green = #67c23a
+$yellow = #f2d648
+$orange = #f17d3a
+$blue = #6798ef
+$gray = #c9c9c9
+$fc1 = #323232
+
+.green
+  background-color #11ff0d
+.yellow
+  background-color #fdfd0f
+.gray
+  background-color #bfbfbf
+.red
+  background-color #ff1016
+
+//宽高
+_wh(w, h)
+  width: w
+  height: h
+
+//字体大小、行高、颜色
+_font(size,height,color=$fc1,weight=normal,align=left)
+  font-size: size
+  line-height: height
+  color: color
+  font-weight: weight
+  text-align: align
+
+//flex 布局和 子元素 对其方式
+_fj(x=space-between,y=center)
+  display: flex
+  justify-content: x
+  align-items: y
+
+// 背景图片地址和大小
+_bis(url,w,h=auto,x=center,y=center)
+  background-position: x y
+  background-size: w h
+  background-image: url(url)
+  background-repeat: no-repeat
+
+// 定位上下居中
+_ct()
+  position: absolute
+  top: 50%
+  transform: translateY(-50%)

src/assets/css/mixin2.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,132 @@
+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;
+    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+}
+ 
+/* 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;
+}
+
+/* 马钢大屏尺寸1920*1080 */
+html, body {
+     /* width: 100%;
+     height: 100%;
+     min-width: 1440px;
+     min-height: 1040px; */
+     width: 1920px;
+     height: 1080px;
+}
+ 
+body {
+     -webkit-text-size-adjust: none;
+     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+     background: #05032a center center / 100% 100% url(../../assets/images/screen1/bg.jpg) no-repeat;
+}
+
+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;
+}
+
+.fontselect {
+    -moz-user-select:none;/*火狐*/
+    -webkit-user-select:none;/*webkit浏览器*/
+    -ms-user-select:none;/*IE10*/
+    -khtml-user-select:none;/*早期浏览器*/
+    user-select:none;
+}