diff --git a/build/utils.js b/build/utils.js
index e534fb0..8fd92ab 100644
--- a/build/utils.js
+++ b/build/utils.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')
}
diff --git a/package-lock.json b/package-lock.json
index 506e75f..77ba671 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 35424ad..28bf6cb 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/VParking.vue b/src/components/VParking.vue
index 05571d8..0e9100d 100644
--- a/src/components/VParking.vue
+++ b/src/components/VParking.vue
@@ -3,6 +3,16 @@
停车场消息
+
+ -
+
{{sideNum|filterTotal}}
+ 路侧
+
+ -
+
{{closeNum|filterTotal}}
+ 封闭
+
+
@@ -15,6 +25,12 @@ export default {
components: {
CardTitle,
AccountNum
+ },
+ data(){
+ return{
+ sideNum: 23454,
+ closeNum: 23454
+ }
}
}
@@ -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;
+ }
+ }
diff --git a/src/images/content/roadclose.png b/src/images/content/roadclose.png
new file mode 100644
index 0000000..34720f6
--- /dev/null
+++ b/src/images/content/roadclose.png
diff --git a/src/images/content/roadside.png b/src/images/content/roadside.png
new file mode 100644
index 0000000..0ac1b07
--- /dev/null
+++ b/src/images/content/roadside.png
diff --git a/src/style/mixin.scss b/src/style/mixin.scss
new file mode 100644
index 0000000..35af260
--- /dev/null
+++ b/src/style/mixin.scss
@@ -0,0 +1,9 @@
+@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)));
diff --git a/src/utils/filters.js b/src/utils/filters.js
index 9cc88cf..1eee9c7 100644
--- a/src/utils/filters.js
+++ b/src/utils/filters.js
@@ -1,4 +1,14 @@
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
}
diff --git a/src/utils/formate.js b/src/utils/formate.js
index 23deefc..3eed038 100644
--- a/src/utils/formate.js
+++ b/src/utils/formate.js
@@ -20,7 +20,6 @@ function formateTime() {
}
function formaterTotal(val) {
- // return val.split('')
let str = val.toString()
let newStr = ''
let count = 0