diff --git a/build/utils.js b/build/utils.js index 42be615..3c310c5 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/styles/mixin.scss') + } + } + ), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } diff --git a/package-lock.json b/package-lock.json index 03aa1ad..2154a20 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 355abcf..257b8eb 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/img/nosign.png b/src/assets/img/nosign.png new file mode 100644 index 0000000..ae48249 --- /dev/null +++ b/src/assets/img/nosign.png diff --git a/src/assets/img/sign.png b/src/assets/img/sign.png index 92b0a8d..a40bbae 100644 --- a/src/assets/img/sign.png +++ b/src/assets/img/sign.png diff --git a/src/main.js b/src/main.js index 2386c7f..0a75ec9 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,7 @@ import Vue from 'vue' 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 diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss new file mode 100644 index 0000000..8095330 --- /dev/null +++ b/src/styles/mixin.scss @@ -0,0 +1,10 @@ +@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))); diff --git a/src/views/sfysection.vue b/src/views/sfysection.vue index be1a5a3..d3e4c05 100644 --- a/src/views/sfysection.vue +++ b/src/views/sfysection.vue @@ -1,15 +1,20 @@ @@ -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; } } } diff --git a/src/views/youdaopingsection.vue b/src/views/youdaopingsection.vue index 0ba449f..d3a0be9 100644 --- a/src/views/youdaopingsection.vue +++ b/src/views/youdaopingsection.vue @@ -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;