停车场信息

liuqimichale
1 parent 43352ba2
Showing 9 changed files with 127 additions and 4 deletions
build/utils.js
package-lock.json
package.json
src/components/VParking.vue
src/images/content/roadclose.png
src/images/content/roadside.png
src/style/mixin.scss
src/utils/filters.js
src/utils/formate.js
@@ -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/style/mixin.scss')//引入的scss文件位置
+        }
+      }
+    ),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
   }
@@ -10349,6 +10349,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",
@@ -50,6 +50,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",
@@ -3,6 +3,16 @@
         <card-title> <span>停车场消息</span></card-title>
         <div class="theme-body">
             <account-num></account-num>
+            <ul class="theme-container">
+                <li class="roadside">
+                    <p>{{sideNum|filterTotal}}</p>
+                    <p>路侧</p>
+                </li>
+                <li class="roadclose">
+                    <p>{{closeNum|filterTotal}}</p>
+                    <p>封闭</p>
+                </li>
+            </ul>
         </div>
     </div>
 </template>
@@ -15,6 +25,12 @@ export default {
   components: {
     CardTitle,
     AccountNum
+  },
+  data(){
+    return{
+      sideNum: 23454,
+      closeNum: 23454
+    }
   }
 }
 </script>
@@ -27,5 +43,47 @@ export default {
         height: calc(100% - 30px);
         margin-left: 20px;
     }
+    .theme-container{
+        height: 70%;
+        display: flex;
+        align-items: center;
+        >li{
+            flex: 1;
+            height: 57px;
+            padding-left: 70px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            &:nth-of-type(1){
+                p{
+                    &:first-child{
+                        @include fontStyle(24px);
+                        background-image: $fontBlue;
+                    }
+                    &:last-child{
+                        font-size: 16px;
+                    }
+                }
+            }
+            &:nth-of-type(2){
+                p{
+                    &:first-child{
+                        @include fontStyle(24px);
+                        background-image: $fontOrange;
+                    }
+                    &:last-child{
+                        font-size: 16px;
+                    }
+                }
+            }
+        }
+
+        .roadside{
+            background: url("../images/content/roadside.png") no-repeat 0 center;
+        }
+        .roadclose{
+            background: url("../images/content/roadclose.png") no-repeat 0 center;
+        }
+    }
  
 </style>
+@mixin fontStyle($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)));
 export  function filterTotal(val) {
-  console.log(val.split(''))
-  return val.split('')
+  let str = val.toString()
+  let newStr = ''
+  let count = 0
+  for(let i=str.length-1;i>=0;i--){
+    if(count % 3 == 0 && count!= 0){
+      newStr = str.charAt(i)+","+newStr
+    }else{
+      newStr = str.charAt(i)+newStr
+    }
+    count++
+  }
+  return newStr
 }
@@ -20,7 +20,6 @@ function formateTime() {
 }
  
 function formaterTotal(val) {
-  // return val.split('')
   let str = val.toString()
   let newStr = ''
   let count = 0