apt

src/style/common.styl

@@ -0,0 +1,172 @@
+@import 'mixin.styl'
+@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont/iconfont.woff2?t=1631676179964') format('woff2'),
+       url('iconfont/iconfont.woff?t=1631676179964') format('woff'),
+       url('iconfont/iconfont.ttf?t=1631676179964') format('truetype');
+}
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url('font/YouSheBiaoTiHei.ttf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Bold";
+  src: url('font/SourceHanSansCN-Bold.otf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Regular";
+  src: url('font/SourceHanSansCN-Regular.otf') format('truetype');
+}
+@font-face {
+  font-family: "SourceHanSansCN-Medium";
+  src: url('font/SourceHanSansCN-Medium.otf') format('truetype');
+}
+
+::-webkit-scrollbar-track
+{
+	background-color: #1A2B47;
+}
+
+::-webkit-scrollbar
+{
+	width: 6px;
+}
+
+::-webkit-scrollbar-thumb
+{
+	background-color: #5291F0;
+}
+
+// 软键盘
+#keyboard
+  position fixed
+  right 0
+  bottom 0
+  z-index 1000
+  width 100%
+  padding 0.05rem
+  background-color: #ececec
+  border-radius 0
+  font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
+  .keyboard
+    .line:not(:last-child)
+      margin-bottom 0.05rem
+    .key
+      height .36rem
+      line-height .36rem
+      background-color: #fff;
+      border: none;
+      border-bottom: 1px solid #b5b5b5;
+      border-radius: 5px;
+      box-shadow: 0 0 3px -1px rgba(0,0,0,.3);
+      color: #000;
+      font-size .2rem
+      &:not(:last-child)
+        margin-right 0.05rem
+    .backspace
+      background-color: #b3b3b3;
+
+// animation
+@keyframes scrollText {
+  0% {
+    transform translateX(0)
+  }
+  100% {
+    transform translateX(-100%)
+  }
+}
+
+// element css
+.el-button
+  font-size .16rem
+.el-dialog
+  background center / 100% 100% url(../images/new/modal_bg.png) no-repeat
+.el-dialog__header
+  padding .2rem .2rem .1rem
+.el-dialog__headerbtn
+  top .2rem
+  right .2rem
+.el-dialog__body
+  padding .2rem .4rem .3rem .4rem
+.el-dialog__title
+  font-size .2rem
+  font-family 'YouSheBiaoTiHei'
+  line-height .24rem
+  color #fff
+.el-form-item__label
+  font-size .16rem
+  line-height .4rem
+  color #AFBED8
+.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label
+  line-height .4rem
+.el-form-item__content
+  font-size .15rem
+.el-input, .el-select .el-input .el-select__caret, .el-select-dropdown__item
+  font-size .15rem
+  line-height .4rem
+  height .4rem
+.el-input__inner
+  background: rgba(45,88,184,0.1);
+  border: 2px solid #4980BD;
+  box-sizing: border-box;
+  color: #fff;
+  border-radius: 0;
+  padding 0 0.1rem
+.el-input--mini .el-input__inner
+  line-height .4rem
+  height .4rem
+.el-select-dropdown
+  background-color rgba(7,31,62,0.95)
+  border 1px solid #4980BD
+.el-popper[x-placement^=bottom] .popper__arrow,.el-popper[x-placement^=bottom] .popper__arrow::after
+  border-bottom-color #4980BD
+.el-select-dropdown__item
+  padding 0 0.1rem
+  color #fff
+.el-table, .el-table tr
+  background-color transparent
+.el-table th
+  font-size .16rem
+  font-family 'Source Han Sans CN'
+  color #AFBED8
+  background left center / 1px 81px url(../images/new/th_bg.png) repeat-x
+.el-table td
+  font-size .16rem
+  font-family 'Source Han Sans CN'
+  color #fff
+  border-bottom 2px solid rgba(122,159,224,0.17)
+.el-table tr:nth-child(odd) td
+  background: rgba(31,46,73,0.3);
+.el-table tr:nth-child(even) td
+  background: rgba(31,46,73,0.5);
+.el-table--enable-row-hover .el-table__body tr:hover>td
+  background: rgba(63,106,202,0.3);
+
+// button
+.button_control
+  _wh(100%, 0.36rem)
+  background center url(../images/new/button.png) no-repeat
+  background-size 100% 100%
+  p
+    _font(.22rem, 1, #EFF2FF,,center)
+    font-family: 'YouSheBiaoTiHei'
+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+.button_control_disabled
+  background center url(../images/new/button_disabled.png) no-repeat
+  background-size 100% 100%
+.button_control_gray
+  background center url(../images/new/button_gray.png) no-repeat
+  background-size 100% 100%
+
+// main
+.body-container
+  background center / 100% 100% url(../images/new/bg.jpg) no-repeat
+.main-conatiner
+  width 100%
+  height calc(100% - 1.18rem)
+.page_container
+  _wh(96%, 100%)
+  padding 1%
+  margin 0 auto

src/style/iconfont.styl

@@ -0,0 +1,21 @@
+.icon_dropdown
+  &::before
+    content: '\e65b'
+.icon_eyeopen
+  &::before
+    content: '\ee33'
+.icon_eyeclose
+  &::before
+    content: '\ee34'
+.icon_admin
+  &::before
+    content: '\e7a3'
+.icon_close
+  color: #909399
+  &::before
+    content '\e659'
+.icon_radio
+  position relative
+  color #ffffff
+  &::before
+    content '\e608'

src/style/mixin.styl

@@ -0,0 +1,50 @@
+$red = #FD6A35
+$red1 = #E74F19
+$red2 = #FA6400
+$green = #6CBE8B
+$green1 = #00d246
+$yellow = #E9B451
+$blue = #6798ef
+$gray = #989EBB
+$gray1 = #8B90A6
+$gray2 = #DFE1E6
+$fc1 = #464646
+
+
+//宽高
+_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,z=row)
+  display: flex
+  justify-content: x
+  align-items: y
+  flex-direction: z
+
+// 背景图片地址和大小
+_bis(url,w,h=auto,x=center,y=center,c=transparent)
+  background-color: c
+  background-position: x y
+  background-size: w h
+  background-image: url(url)
+  background-repeat: no-repeat
+
+// 定位上下居中
+_ct()
+  position: absolute
+  top: 50%
+  transform: translateY(-50%)
+
+// 背景图片改变颜色
+_shadow(w,c)
+  filter drop-shadow(w 0 0 c)

src/style/reset.css

@@ -0,0 +1,164 @@
+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, button {
+    margin: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+}
+ 
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, menu, nav, section {
+     display: block;
+}
+
+*{
+  -webkit-tap-highlight-color:transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+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 {
+     text-decoration: none;
+     -webkit-backface-visibility: hidden;
+}
+ 
+li {
+     list-style: none;
+}
+
+html {
+     -webkit-text-size-adjust: none;
+     -webkit-tap-highlight-color: #ffffff;
+     background-color: #001539;
+     width: 100%;
+     height: 100%;
+     /* width: 1024px;
+     height: 600px; */
+}
+
+body {
+     width: 100%;
+     height: 100%;
+     font-size: .16rem;
+     line-height: .2rem;
+}
+
+select, option, textarea {
+     appearance: none;
+     outline: none;
+}
+
+div, input, select, textarea, button, ul, li  {
+     box-sizing: border-box;
+}
+
+input::-webkit-input-placeholder {
+     color: #C0C4CC;
+}
+
+.clearfix {
+    zoom: 1; 
+}
+
+.userselect {
+     user-select: none;
+}
+
+.clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+    
+.ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.zbox {
+     width: 100%;
+     height: 100%;
+}
+
+.allwidth {
+     width: 100% !important;
+}
+
+.fl {
+    float: left !important;
+} 
+
+.fr {
+    float: right !important;
+}
+
+.relative {
+     position: relative;
+}
+
+.absolute {
+     position: absolute;
+}
+
+.text-left {
+     text-align: left;
+}
+
+.text-right {
+     text-align: right;
+}
+
+.pointer {
+     cursor: pointer;
+}
+
+.mgb40 {
+     margin-bottom: .4rem !important;
+}
+
+.mgr5 {
+     margin-right: .05rem !important;  
+}
+
+.mgt10 {
+     margin-top: .1rem !important;
+}
+
+.mgl10 {
+    margin-left: .1rem !important;
+}
+.mgl20 {
+     margin-left: .2rem !important;
+ }
+