收费员

liuqimichale
1 parent fafdedae
Showing 9 changed files with 92 additions and 13 deletions
build/utils.js
package-lock.json
package.json
src/assets/img/nosign.png
src/assets/img/sign.png
src/main.js
src/styles/mixin.scss
src/views/sfysection.vue
src/views/youdaopingsection.vue
@@ -60,7 +60,14 @@ exports.cssLoaders = function (options) {
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    scss: generateLoaders('sass').concat(
+      {
+        loader: 'sass-resources-loader',
+        options: {
+          resources: path.resolve(__dirname, '../src/styles/mixin.scss')
+        }
+      }
+    ),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }
@@ -9531,6 +9531,45 @@
         "semver": "^5.5.0"
       }
     },
+    "sass-resources-loader": {
+      "version": "2.0.0",
+      "resolved": "http://registry.npm.taobao.org/sass-resources-loader/download/sass-resources-loader-2.0.0.tgz",
+      "integrity": "sha1-iFacVC+/HxjzOmV4t3zFs2xWkR0=",
+      "dev": true,
+      "requires": {
+        "async": "^2.1.4",
+        "chalk": "^1.1.3",
+        "glob": "^7.1.1",
+        "loader-utils": "^1.0.4"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "http://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -43,6 +43,7 @@
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
     "sass-loader": "^7.1.0",
+    "sass-resources-loader": "^2.0.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "style-loader": "^0.23.1",
@@ -4,6 +4,7 @@ import Vue from &#39;vue&#39;
 import App from './App'
 import './mock/mock'
 import '@/styles/reset.css'/*引入重置样式*/
+// import '@/styles/mixin.scss'/*引入公共样式*/
 import * as filters from './filters/filters'
 import util from './utils/formatNum'
 Vue.prototype.$util = util
+@mixin fonttextStyle($size){
+  font-size: $size;
+  font-weight:bold;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+$fontBlue: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0,202,254, 1)), to(rgba(39,114,244, 1)));
+
+$fontOrange: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,186,0, 1)), to(rgba(255,129,0, 1)));
 <template>
   <div>
-    <titlesection title="地磁"></titlesection>
+    <titlesection title="收费员"></titlesection>
     <totalsection :totalNum="totalVal"></totalsection>
     <ul class="flexfm sfy-wrap">
       <li>
         <div class="sign">
-          <p>1234</p>
-          <p>签到</p>
+          <p class="signnum">{{ signNum|formatNum }}</p>
+          <p class="text">签到</p>
+        </div>
+      </li>
+      <li>
+        <div class="nosign">
+          <p class="signnum">{{ nosignNum|formatNum }}</p>
+          <p class="text">未签到</p>
         </div>
       </li>
-      <li>1</li>
     </ul>
   </div>
 </template>
@@ -29,6 +34,8 @@ export default {
   data() {
     return {
       totalVal: '219734',
+      signNum: '454',
+      nosignNum: '5125'
     }
   },
   created() {
@@ -55,12 +62,29 @@ export default {
       align-items:center;
       >div{
         width: 100%;
-        height: 74px;
-        padding-left: 87px;
+        height: 49px;
+        padding-left: 71px;
         color: #fff;
       }
       .sign{
+        background: url("../assets/img/nosign.png") no-repeat;
+        .signnum{
+          padding: 5px 0;
+          @include fonttextStyle(24px);
+          background-image: $fontBlue;
+        }
+      }
+      .nosign{
         background: url("../assets/img/sign.png") no-repeat;
+        .signnum{
+          padding: 5px 0;
+          @include fonttextStyle(24px);
+          background-image: $fontOrange;
+        }
+      }
+      .text{
+        color: #fff;
+        font-size: 12px;
       }
     }
   }
@@ -83,16 +83,13 @@ export default {
           transform: translate(-50%,-50%);
           background:url("../assets/img/bg-wrap.png") no-repeat;
           .dznum-total,.ydpnum-total{
-            font-size: 17px;
-            font-weight:bold;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            @include fonttextStyle(20px);
           }
           .dznum-total{
-            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0,202,254, 1)), to(rgba(39,114,244, 1)));
+            background-image: $fontBlue;
           }
           .ydpnum-total{
-            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,186,0, 1)), to(rgba(255,129,0, 1)));
+            background-image: $fontOrange;
           }
           .name{
             padding-top: 5px;