├── babel.config.js ├── public ├── favicon.ico └── index.html ├── src ├── assets │ └── statics │ │ ├── img │ │ ├── 01.gif │ │ └── loading2.gif │ │ ├── site │ │ └── css │ │ │ └── icon │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.ttf │ │ │ ├── iconfont.woff │ │ │ ├── iconfont.css │ │ │ ├── demo_fontclass.html │ │ │ ├── demo.css │ │ │ ├── demo_unicode.html │ │ │ ├── demo_symbol.html │ │ │ ├── iconfont.svg │ │ │ └── iconfont.js │ │ └── lib │ │ ├── hoverNav │ │ ├── images │ │ │ ├── s_03.jpg │ │ │ ├── w_03.jpg │ │ │ ├── bodyBg.jpg │ │ │ ├── bodyBg2.jpg │ │ │ └── bodyBg3.jpg │ │ ├── www.jq22.com.txt │ │ ├── jquery插件库.url │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ │ └── zoom │ │ ├── images │ │ └── move-box.png │ │ ├── css │ │ └── magnifier.css │ │ └── js │ │ └── magnifier.js ├── components │ ├── paySuccess.vue │ ├── login.vue │ ├── orderInfo.vue │ ├── PersonalCenter.vue │ ├── index.vue │ ├── orderCenter.vue │ ├── buyCar.vue │ ├── lookOrder.vue │ ├── payOrder.vue │ └── goodsInfo.vue ├── main.js └── App.vue ├── .gitignore ├── README.md └── package.json /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/statics/img/01.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/img/01.gif -------------------------------------------------------------------------------- /src/assets/statics/img/loading2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/img/loading2.gif -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/site/css/icon/iconfont.eot -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/site/css/icon/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/images/s_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/lib/hoverNav/images/s_03.jpg -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/images/w_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/lib/hoverNav/images/w_03.jpg -------------------------------------------------------------------------------- /src/assets/statics/lib/zoom/images/move-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/lib/zoom/images/move-box.png -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/site/css/icon/iconfont.woff -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/images/bodyBg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/lib/hoverNav/images/bodyBg.jpg -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/images/bodyBg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/lib/hoverNav/images/bodyBg2.jpg -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/images/bodyBg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/lib/hoverNav/images/bodyBg3.jpg -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/www.jq22.com.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AutumnFish/SZHMBBB_pro/HEAD/src/assets/statics/lib/hoverNav/www.jq22.com.txt -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/jquery插件库.url: -------------------------------------------------------------------------------- 1 | [{000214A0-0000-0000-C000-000000000046}] 2 | Prop3=19,2 3 | [InternetShortcut] 4 | URL=http://www.jq22.com/ 5 | IDList= 6 | HotKey=0 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 02.first 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 黑马买买买剁手也要买 12 | 13 | 14 | 17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/css/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none} 3 | h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal} 4 | body>div{margin:0 auto} 5 | div {text-align:left} 6 | a img {border:0} 7 | body { color: #333; text-align: center; font: 12px "微软雅黑"; background-color: #2B2B2B; } 8 | ul, ol, li {list-style-type:none;vertical-align:0} 9 | 10 | .menu{height:48px;display:block;padding:0px;width:999px;margin:0px auto 0 auto;} 11 | .menu ul{list-style:none;padding:0;margin:0;} 12 | .menu ul li{float:left;overflow:hidden;position:relative;line-height:48px;text-align:center;} 13 | .menu ul li a{position:relative;display:block;width:111px;height:48px;font-family:"微软雅黑", "宋体";font-size:14px;text-decoration:none;cursor:pointer;font-weight:bold;line-height:48px;} 14 | .menu ul li a span{position:absolute;left:0;width:111px;} 15 | .menu ul li a span.out{top:0px;} 16 | .menu ul li a span.over, .menu ul li a span.bg{top:-48px;} 17 | /* #menu2{background-image:url(../images/s_03.jpg);background-repeat:repeat;} */ 18 | #menu2 ul li a{color:#FFFFFF;} 19 | #menu2 ul li a span.over{color:#FFF;height:48px;width:111px;background-image:url(../images/w_03.jpg);background-repeat:repeat;} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "02.first", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@xkeshi/vue-qrcode": "^1.0.0", 12 | "axios": "^0.18.0", 13 | "element-ui": "^2.4.4", 14 | "font-awesome": "^4.7.0", 15 | "iview": "^2.14.3", 16 | "jquery": "^3.3.1", 17 | "moment": "^2.22.2", 18 | "v-distpicker": "^1.0.17", 19 | "vue": "^2.5.17", 20 | "vue-product-zoomer": "^2.0.10", 21 | "vue-router": "^3.0.1", 22 | "vuex": "^3.0.1" 23 | }, 24 | "devDependencies": { 25 | "@vue/cli-plugin-babel": "^3.0.0-rc.5", 26 | "@vue/cli-plugin-eslint": "^3.0.0-rc.5", 27 | "@vue/cli-service": "^3.0.0-rc.5", 28 | "node-sass": "^4.9.2", 29 | "sass-loader": "^7.0.3", 30 | "vue-lazyload": "^1.2.6", 31 | "vue-template-compiler": "^2.5.16" 32 | }, 33 | "eslintConfig": { 34 | "root": true, 35 | "env": { 36 | "node": true 37 | }, 38 | "extends": [ 39 | "plugin:vue/essential", 40 | "eslint:recommended" 41 | ], 42 | "rules": {}, 43 | "parserOptions": { 44 | "parser": "babel-eslint" 45 | } 46 | }, 47 | "postcss": { 48 | "plugins": { 49 | "autoprefixer": {} 50 | } 51 | }, 52 | "browserslist": [ 53 | "> 1%", 54 | "last 2 versions", 55 | "not ie <= 8" 56 | ] 57 | } 58 | -------------------------------------------------------------------------------- /src/assets/statics/lib/hoverNav/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery鼠标悬停上下翻滚动画导航菜单 6 | 7 | 8 | 26 | 27 | 28 |

jQuery鼠标悬停上下翻滚动画导航菜单

29 |
30 | 31 | 45 | 46 |
47 |
48 | 49 | -------------------------------------------------------------------------------- /src/assets/statics/lib/zoom/css/magnifier.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8";*{margin:0;padding:0}ul li{list-style:none}img{border:0}.small-img{display:flex;align-items:center;justify-content:center}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.magnifier{width:500px;position:relative;margin-top:100px;margin-left:100px}.magnifier-container{width:500px;height:500px;overflow:hidden;position:relative;border:1px solid #ddd}.move-view{width:100px;height:100px;position:absolute;background-image:url(../images/move-box.png)}.images-cover{height:100%;width:100%;position:relative}.images-cover img{position:absolute}.magnifier-assembly{height:92px;overflow:hidden;position:relative;padding-left:30px;padding-right:30px}.magnifier-btn{position:absolute;font-family:宋体;width:100%;top:50%;left:0;margin-top:-40px}.magnifier-btn span{line-height:80px;height:80px;width:20px;background-color:#6e6e6e;color:#fff;display:block;z-index:9998;text-align:center;font-size:20px;cursor:pointer;border-radius:3px}.magnifier-btn .magnifier-btn-left{float:left}.magnifier-btn .magnifier-btn-right{float:right}.magnifier-line{position:relative;overflow:hidden;height:92px}.magnifier-line ul{display:block;font-size:0;width:1e4%;position:absolute;left:0;z-index:9997}.magnifier-line li{float:left;width:100px;cursor:pointer}.magnifier-line ul>.active .small-img{border-color:#bbb}.small-img{height:78px;padding:1px;margin:5px;overflow:hidden;border:1px solid #ddd;text-align:center}.small-img img{max-width:100%;max-height:100%}.magnifier-view{width:100%;height:100%;position:absolute;right:-105%;top:0;z-index:9999;background-color:#fff;display:none;overflow:hidden}.magnifier-view img{display:block}.animation03{transition:all .3s ease-in .1s;-ms-transition:all .3s ease-in .1s;-moz-transition:all .3s ease-in .1s;-webkit-transition:all .3s ease-in .1s;-o-transition:all .3s ease-in .1s} -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1496954256369'); /* IE9*/ 4 | src: url('iconfont.eot?t=1496954256369#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('iconfont.woff?t=1496954256369') format('woff'), /* chrome, firefox */ 6 | url('iconfont.ttf?t=1496954256369') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1496954256369#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-error:before { content: "\e600"; } 19 | 20 | .icon-reply:before { content: "\e607"; } 21 | 22 | .icon-cart:before { content: "\e601"; } 23 | 24 | .icon-plus:before { content: "\e676"; } 25 | 26 | .icon-play:before { content: "\e602"; } 27 | 28 | .icon-phone:before { content: "\e603"; } 29 | 30 | .icon-user-full:before { content: "\e6ce"; } 31 | 32 | .icon-user:before { content: "\e6f5"; } 33 | 34 | .icon-close:before { content: "\e659"; } 35 | 36 | .icon-check:before { content: "\e61f"; } 37 | 38 | .icon-view:before { content: "\e61b"; } 39 | 40 | .icon-date:before { content: "\e721"; } 41 | 42 | .icon-top-label:before { content: "\e60d"; } 43 | 44 | .icon-order:before { content: "\e62a"; } 45 | 46 | .icon-comment:before { content: "\e7e9"; } 47 | 48 | .icon-search:before { content: "\e629"; } 49 | 50 | .icon-right-label:before { content: "\e628"; } 51 | 52 | .icon-point:before { content: "\e606"; } 53 | 54 | .icon-arrow-left:before { content: "\e604"; } 55 | 56 | .icon-attach:before { content: "\e644"; } 57 | 58 | .icon-down:before { content: "\e87a"; } 59 | 60 | .icon-tip:before { content: "\e605"; } 61 | 62 | .icon-amount:before { content: "\e6a0"; } 63 | 64 | .icon-arrow-right:before { content: "\e87b"; } 65 | 66 | -------------------------------------------------------------------------------- /src/components/paySuccess.vue: -------------------------------------------------------------------------------- 1 | 40 | 45 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/login.vue: -------------------------------------------------------------------------------- 1 | 36 | 67 | 68 | 70 | 71 | -------------------------------------------------------------------------------- /src/components/orderInfo.vue: -------------------------------------------------------------------------------- 1 | 83 | 140 | 141 | -------------------------------------------------------------------------------- /src/components/PersonalCenter.vue: -------------------------------------------------------------------------------- 1 | 115 | 118 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /src/assets/statics/lib/zoom/js/magnifier.js: -------------------------------------------------------------------------------- 1 | // 导入模块 2 | import jQuery from 'jquery'; 3 | (function ($) { 4 | var fnName = 'magnifier'; 5 | var magnifier = { 6 | magnifier: ".magnifier", 7 | container: ".magnifier-container", 8 | containerImg: '.images-cover', 9 | view: ".magnifier-view", 10 | width: 400, 11 | height: 400, 12 | moveView: ".move-view", 13 | moveWidth: null, 14 | zoom: 4, 15 | thumbnail: ".magnifier-line > ul", 16 | assembly: ".magnifier-btn", 17 | index: 0 18 | }; 19 | window[fnName] = function (magnifierAttr) { 20 | if (typeof (magnifierAttr) == "object") { 21 | for (var n in magnifierAttr) { 22 | magnifier[n] = magnifierAttr[n]; 23 | } 24 | } 25 | var _this = this; 26 | _this.magnifier = $(magnifier.magnifier); 27 | _this.container = _this.magnifier.find(magnifier.container); 28 | _this.view = _this.magnifier.find(magnifier.view); 29 | _this.moveView = _this.magnifier.find(magnifier.moveView); 30 | _this.thumbnail = _this.magnifier.find(magnifier.thumbnail); 31 | _this.assembly = _this.magnifier.find(magnifier.assembly); 32 | _this.containerImg = _this.magnifier.find(magnifier.containerImg); 33 | var imgBox = _this.containerImg; 34 | _this.magnifier.css({ 35 | "width": magnifier.width 36 | }); 37 | _this.container.css({ 38 | "width": magnifier.width, 39 | "height": magnifier.height 40 | }); 41 | _this.view.css({ 42 | "width": magnifier.width, 43 | "height": magnifier.height 44 | }); 45 | var boxMoveViewWidth, boxMoveViewHeight; 46 | if (magnifier.moveWidth) { 47 | boxMoveViewWidth = magnifier.moveWidth; 48 | } else { 49 | boxMoveViewWidth = magnifier.width / magnifier.zoom; 50 | } 51 | boxMoveViewHeight = boxMoveViewWidth; 52 | _this.moveView.css({ 53 | "width": boxMoveViewWidth, 54 | "height": boxMoveViewHeight 55 | }); 56 | var deviationXl, deviationXr, deviationYt, deviationYb, imgWidth, imgHieght, multiple; 57 | _this.eqImg = function () { 58 | var img = new Image(), 59 | src = _this.thumbnail.find("img").eq(magnifier.index).attr('src'); 60 | img.src = src; 61 | containerWidth = magnifier.width; 62 | containerHeight = magnifier.height; 63 | _this.thumbnail.find('>*').removeClass('active').eq(magnifier.index).addClass('active'); 64 | 65 | function imgLoadEnd() { 66 | if (img.width == 0) { 67 | img.onload = imgLoadEnd; 68 | } 69 | var styleCss; 70 | if (img.width > img.height) { 71 | imgWidth = magnifier.width; 72 | imgHieght = img.height / (img.width / magnifier.width); 73 | styleCss = "top:50%;margin-top:" + (-imgHieght / 2) + "px"; 74 | } else { 75 | imgWidth = img.width / (img.height / magnifier.width); 76 | imgHieght = magnifier.width; 77 | styleCss = "left:50%;margin-left:" + (-imgWidth / 2) + "px"; 78 | } 79 | imgBox.empty().append(''); 80 | multiple = magnifier.width / boxMoveViewWidth; 81 | _this.view.empty().append(''); 82 | deviationXl = (magnifier.width - imgWidth) / 2; 83 | deviationXr = magnifier.width - deviationXl - boxMoveViewWidth + 1; 84 | deviationYt = (magnifier.height - imgHieght) / 2; 85 | deviationYb = magnifier.height - deviationYt - boxMoveViewHeight + 1; 86 | } 87 | imgLoadEnd(); 88 | } 89 | _this.eqImg(); 90 | _this.moveFn = function (e) { 91 | var X = (e.clientX - _this.magnifier.offset().left) - boxMoveViewWidth / 2, 92 | Y = (e.clientY - _this.magnifier.offset().top + $(document).scrollTop()) - boxMoveViewHeight / 2; 93 | endX = (X > deviationXl) ? (X < deviationXr) ? X : deviationXr : deviationXl; 94 | endY = (Y > deviationYt) ? (Y < deviationYb) ? Y : deviationYb : deviationYt; 95 | endY = (endY > 0) ? (endY > (magnifier.width - boxMoveViewHeight)) ? (magnifier.height - boxMoveViewHeight) : endY : 0; 96 | _this.moveView.css({ 97 | 'left': endX, 98 | 'top': endY, 99 | 'display': "block" 100 | }); 101 | positionX = (endX - (magnifier.width - imgWidth) / 2) * multiple; 102 | positionY = (endY - (magnifier.height - imgHieght) / 2) * multiple; 103 | _this.view.css({ 104 | 'display': "block" 105 | }).find('img').css({ 106 | 'margin-left': -positionX, 107 | 'margin-top': -positionY 108 | }); 109 | } 110 | _this.container.on('mousemove', function (e) { 111 | _this.moveFn(e); 112 | }).on('mouseleave', function () { 113 | _this.moveView.hide(); 114 | _this.view.hide(); 115 | }); 116 | var thumbnailImg = _this.thumbnail.find('>*'), 117 | lineLenght = thumbnailImg.length; 118 | _this.imgMove = function (_boole) { 119 | (_boole) ? magnifier.index++: magnifier.index--; 120 | var _deviation = Math.ceil(magnifier.width / thumbnailImg.width() / 2); 121 | if (lineLenght < _deviation) { 122 | return false; 123 | } 124 | (magnifier.index < 0) ? magnifier.index = 0: (magnifier.index > lineLenght - _deviation) ? magnifier.index = lineLenght - _deviation : magnifier.index; 125 | var endLeft = (thumbnailImg.width() * magnifier.index) - thumbnailImg.width(); 126 | _this.thumbnail.css({ 127 | "left": ((endLeft > 0) ? -endLeft : 0) + "px" 128 | }); 129 | } 130 | _this.assembly.find(">*").on('click', function () { 131 | _this.imgMove($(this).index()); 132 | }); 133 | thumbnailImg.on('click', function () { 134 | magnifier.index = $(this).index(); 135 | _this.eqImg(); 136 | _this.imgMove(magnifier.index); 137 | }); 138 | _this.setIndex = function (n) { 139 | magnifier.index = (n) ? n : 0; 140 | } 141 | return _this; 142 | } 143 | })(jQuery); -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | // 引入路由模块 4 | import VueRouter from "vue-router"; 5 | // 引入index组件 6 | import index from "./components/index.vue"; 7 | import goodsInfo from "./components/goodsInfo.vue"; 8 | import buyCar from "./components/buyCar.vue"; 9 | import payOrder from "./components/payOrder.vue"; 10 | import login from "./components/login.vue"; 11 | import orderInfo from "./components/orderInfo.vue"; 12 | import paySuccess from "./components/paySuccess.vue"; 13 | import personalCenter from "./components/PersonalCenter.vue"; 14 | import orderCenter from "./components/orderCenter.vue"; 15 | import lookOrder from "./components/lookOrder.vue"; 16 | // 导入ui框架 17 | import ElementUI from "element-ui"; 18 | // 导入css 19 | import "element-ui/lib/theme-chalk/index.css"; 20 | // 导入懒加载插件 21 | import VueLazyload from "vue-lazyload"; 22 | // 引入css 23 | import "./assets/statics/site/css/style.css"; 24 | // 引入模块 moment 25 | import moment from "moment"; 26 | // 导入 axios模块 目的是让所有组件都可以使用 27 | import axios from "axios"; 28 | // 导入iViewUI框架 29 | import iView from "iview"; 30 | import "iview/dist/styles/iview.css"; 31 | // 导入Vuex 32 | import Vuex from "vuex"; 33 | 34 | // 正常的服务器 35 | axios.defaults.baseURL = "http://47.106.148.205:8899"; 36 | //让ajax携带cookie 37 | axios.defaults.withCredentials = true; 38 | // 崩溃后的备用服务器 39 | // axios.defaults.baseURL = 'http://127.0.0.1:8848'; 40 | // 挂载到Vue的原型上->Vue实例化出来的对象 共用 vue-resource this.$http 41 | Vue.prototype.axios = axios; 42 | 43 | // 使用路由中间件 $route 44 | Vue.use(VueRouter); 45 | // 使用ui中间件 $message 46 | Vue.use(ElementUI); 47 | // 使用懒加载中间件 48 | Vue.use(VueLazyload, { 49 | // 图片当做资源来引入 50 | loading: require("./assets/statics/img/loading2.gif") 51 | }); 52 | // 使用iView $Message 53 | Vue.use(iView); 54 | // 使用Vuex 55 | Vue.use(Vuex); 56 | 57 | // 注册路由规则 58 | const router = new VueRouter({ 59 | routes: [ 60 | // 访问的是 / 打到(重定向) 61 | { 62 | path: "/", 63 | redirect: "/index" 64 | }, 65 | // index 都显示 index这个组件 66 | { 67 | path: "/index", 68 | component: index 69 | }, 70 | { 71 | // goodsInfo/:id 参数 72 | // form表单中的 name属性 73 | path: "/goodsInfo/:id", 74 | component: goodsInfo 75 | }, 76 | { 77 | path: "/buyCar", 78 | component: buyCar 79 | }, 80 | // 订单支付路由 81 | // 动态路由匹配 82 | { 83 | path: "/payOrder/:ids", 84 | component: payOrder, 85 | // 路由元信息 86 | meta: { checkLogin: true } 87 | }, 88 | // 登陆路由 89 | { 90 | path: "/login", 91 | component: login, 92 | }, 93 | // 订单详情路由 94 | { 95 | path: "/orderInfo/:orderid", 96 | component: orderInfo, 97 | // 路由元数据 98 | meta: { checkLogin: true } 99 | }, 100 | // 注册成功页 101 | { 102 | path: "/paySuccess", 103 | component: paySuccess, 104 | // 路由元数据 105 | meta: { checkLogin: true } 106 | }, 107 | // 个人中心 108 | { 109 | path: "/personalCenter", 110 | component: personalCenter, 111 | // 路由元数据 112 | meta: { checkLogin: true } 113 | }, 114 | // 订单中心 115 | { 116 | path: "/orderCenter", 117 | component: orderCenter, 118 | // 路由元数据 119 | meta: { checkLogin: true } 120 | }, 121 | // 订单详情 122 | { 123 | path: "/lookOrder/:orderId", 124 | component: lookOrder, 125 | // 路由元数据 126 | meta: { checkLogin: true } 127 | }, 128 | ] 129 | }); 130 | 131 | // 注册全局过滤器 132 | // 支持自定义规则 133 | Vue.filter("cutTime", function(value,myFormat) { 134 | if(myFormat){ 135 | return moment(value).format(myFormat); 136 | }else{ 137 | return moment(value).format("YYYY年MM月DD日"); 138 | } 139 | }); 140 | 141 | // 判断数据是否存在 142 | let buyList = JSON.parse(window.localStorage.getItem("buyList")) || {}; 143 | 144 | // 实例化一个 Vuex的 仓库 145 | const store = new Vuex.Store({ 146 | // 状态 147 | state: { 148 | // 数量 149 | // buyList: {} 150 | buyList, 151 | isLogin: false, 152 | // 来时的路由 153 | fromPath: "/" 154 | }, 155 | // 类似于computed的属性 156 | getters: { 157 | totalCount(state) { 158 | let num = 0; 159 | // 遍历对象 160 | for (const key in state.buyList) { 161 | // 累加总数 162 | num += parseInt(state.buyList[key]); 163 | } 164 | return num; 165 | } 166 | }, 167 | mutations: { 168 | // info->{goodId:xx,goodNum:xxx} 169 | buyGood(state, info) { 170 | if (state.buyList[info.goodId]) { 171 | // 解决字符串累加问题 172 | let oldNum = parseInt(state.buyList[info.goodId]); 173 | oldNum += parseInt(info.goodNum); 174 | // 重新赋值 175 | state.buyList[info.goodId] = oldNum; 176 | } else { 177 | // 没有 直接赋值这种方法 vue不会跟踪属性 178 | // state.buyList[info.goodId]=info.goodNum; 179 | // 需要使用 Vue.set(obj, 'newProp', 123) 替代 180 | Vue.set(state.buyList, info.goodId, parseInt(info.goodNum)); 181 | } 182 | }, 183 | // 直接修改数值的方法 184 | changeNum(state, info) { 185 | state.buyList[info.goodId] = info.goodNum; 186 | }, 187 | // 删除数据 188 | delGoodById(state, id) { 189 | // 使用Vue的方法来删除 190 | Vue.delete(state.buyList, id); 191 | }, 192 | // 修改登陆状态 193 | changeLogin(state, login) { 194 | state.isLogin = login; 195 | }, 196 | // 保存来时的路由 197 | saveFromPath(state, fromPath) { 198 | state.fromPath = fromPath; 199 | } 200 | } 201 | }); 202 | 203 | // beforeEach 可以当做一个回调函数 不是立刻触发 所以这里顺序不调整是可以的 204 | router.beforeEach((to, from, next) => { 205 | // 保存来时的路由 206 | store.commit("saveFromPath", from.path); 207 | console.log(to); 208 | 209 | // from 从哪来 to 去哪里 next()下一个 210 | // if (to.path == "/payOrder/") { 211 | // 路由源信息进行判断 212 | if(to.meta.checkLogin){ 213 | // 判断 214 | axios 215 | .get("/site/account/islogin") 216 | .then(response => { 217 | // // console.log(response); 218 | if (response.data.code == "nologin") { 219 | // 去登录页 220 | // // console.log('登录页') 221 | next("/login"); 222 | } else { 223 | next(); 224 | } 225 | }) 226 | .catch(err => {}); 227 | } else { 228 | next(); 229 | } 230 | }); 231 | 232 | Vue.config.productionTip = false; 233 | 234 | new Vue({ 235 | // 选择器 236 | el: "#app", 237 | // 挂载到vue 238 | router, 239 | // 渲染 App组件 240 | render: h => h(App), 241 | // 挂载仓库 242 | store, 243 | // 生命周期函数 244 | beforeCreate() { 245 | // console.log('app-beforeCreate'); 246 | axios 247 | .get("/site/account/islogin") 248 | .then(response => { 249 | // console.log(response); 250 | // if(response.data.code=='logined') 251 | store.state.isLogin = response.data.code == "logined"; 252 | }) 253 | .catch(err => { 254 | // console.log(err); 255 | }); 256 | }, 257 | created() { 258 | // console.log('app-created'); 259 | } 260 | }); 261 | 262 | // 注册一些逻辑 263 | window.onbeforeunload = function() { 264 | // alert('onbeforeunload'); 265 | // window.localStorage.setItem('onbeforeunload',123); 266 | window.localStorage.setItem("buyList", JSON.stringify(store.state.buyList)); 267 | }; 268 | -------------------------------------------------------------------------------- /src/components/index.vue: -------------------------------------------------------------------------------- 1 | 105 | 171 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 120 | 121 | 184 | 185 | 189 | -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 | 160 | 161 |

font-class引用

162 |
163 | 164 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

165 |

与unicode使用方式相比，具有如下特点：

166 | 172 |

使用步骤如下：

173 |

第一步：引入项目下面生成的fontclass代码：

174 | 175 | 176 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
177 |

第二步：挑选相应图标并获取类名，应用于页面：

178 | 
<i class="iconfont icon-xxx"></i>
179 |
180 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

181 |
182 |
183 | 184 | 185 | -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main { 60 | padding: 30px 100px; 61 | width: 960px; 62 | margin: 0 auto; 63 | } 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 65 | 66 | .helps{margin-top:40px;} 67 | .helps pre{ 68 | padding:20px; 69 | margin:10px 0; 70 | border:solid 1px #e7e1cd; 71 | background-color: #fffdef; 72 | overflow: auto; 73 | } 74 | 75 | .icon_lists{ 76 | width: 100% !important; 77 | 78 | } 79 | 80 | .icon_lists li{ 81 | float:left; 82 | width: 100px; 83 | height:180px; 84 | text-align: center; 85 | list-style: none !important; 86 | } 87 | .icon_lists .icon{ 88 | font-size: 42px; 89 | line-height: 100px; 90 | margin: 10px 0; 91 | color:#333; 92 | -webkit-transition: font-size 0.25s ease-out 0s; 93 | -moz-transition: font-size 0.25s ease-out 0s; 94 | transition: font-size 0.25s ease-out 0s; 95 | 96 | } 97 | .icon_lists .icon:hover{ 98 | font-size: 100px; 99 | } 100 | 101 | 102 | 103 | .markdown { 104 | color: #666; 105 | font-size: 14px; 106 | line-height: 1.8; 107 | } 108 | 109 | .highlight { 110 | line-height: 1.5; 111 | } 112 | 113 | .markdown img { 114 | vertical-align: middle; 115 | max-width: 100%; 116 | } 117 | 118 | .markdown h1 { 119 | color: #404040; 120 | font-weight: 500; 121 | line-height: 40px; 122 | margin-bottom: 24px; 123 | } 124 | 125 | .markdown h2, 126 | .markdown h3, 127 | .markdown h4, 128 | .markdown h5, 129 | .markdown h6 { 130 | color: #404040; 131 | margin: 1.6em 0 0.6em 0; 132 | font-weight: 500; 133 | clear: both; 134 | } 135 | 136 | .markdown h1 { 137 | font-size: 28px; 138 | } 139 | 140 | .markdown h2 { 141 | font-size: 22px; 142 | } 143 | 144 | .markdown h3 { 145 | font-size: 16px; 146 | } 147 | 148 | .markdown h4 { 149 | font-size: 14px; 150 | } 151 | 152 | .markdown h5 { 153 | font-size: 12px; 154 | } 155 | 156 | .markdown h6 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown hr { 161 | height: 1px; 162 | border: 0; 163 | background: #e9e9e9; 164 | margin: 16px 0; 165 | clear: both; 166 | } 167 | 168 | .markdown p, 169 | .markdown pre { 170 | margin: 1em 0; 171 | } 172 | 173 | .markdown > p, 174 | .markdown > blockquote, 175 | .markdown > .highlight, 176 | .markdown > ol, 177 | .markdown > ul { 178 | width: 80%; 179 | } 180 | 181 | .markdown ul > li { 182 | list-style: circle; 183 | } 184 | 185 | .markdown > ul li, 186 | .markdown blockquote ul > li { 187 | margin-left: 20px; 188 | padding-left: 4px; 189 | } 190 | 191 | .markdown > ul li p, 192 | .markdown > ol li p { 193 | margin: 0.6em 0; 194 | } 195 | 196 | .markdown ol > li { 197 | list-style: decimal; 198 | } 199 | 200 | .markdown > ol li, 201 | .markdown blockquote ol > li { 202 | margin-left: 20px; 203 | padding-left: 4px; 204 | } 205 | 206 | .markdown code { 207 | margin: 0 3px; 208 | padding: 0 5px; 209 | background: #eee; 210 | border-radius: 3px; 211 | } 212 | 213 | .markdown pre { 214 | border-radius: 6px; 215 | background: #f7f7f7; 216 | padding: 20px; 217 | } 218 | 219 | .markdown pre code { 220 | border: none; 221 | background: #f7f7f7; 222 | margin: 0; 223 | } 224 | 225 | .markdown strong, 226 | .markdown b { 227 | font-weight: 600; 228 | } 229 | 230 | .markdown > table { 231 | border-collapse: collapse; 232 | border-spacing: 0px; 233 | empty-cells: show; 234 | border: 1px solid #e9e9e9; 235 | width: 95%; 236 | margin-bottom: 24px; 237 | } 238 | 239 | .markdown > table th { 240 | white-space: nowrap; 241 | color: #333; 242 | font-weight: 600; 243 | 244 | } 245 | 246 | .markdown > table th, 247 | .markdown > table td { 248 | border: 1px solid #e9e9e9; 249 | padding: 8px 16px; 250 | text-align: left; 251 | } 252 | 253 | .markdown > table th { 254 | background: #F7F7F7; 255 | } 256 | 257 | .markdown blockquote { 258 | font-size: 90%; 259 | color: #999; 260 | border-left: 4px solid #e9e9e9; 261 | padding-left: 0.8em; 262 | margin: 1em 0; 263 | font-style: italic; 264 | } 265 | 266 | .markdown blockquote p { 267 | margin: 0; 268 | } 269 | 270 | .markdown .anchor { 271 | opacity: 0; 272 | transition: opacity 0.3s ease; 273 | margin-left: 8px; 274 | } 275 | 276 | .markdown .waiting { 277 | color: #ccc; 278 | } 279 | 280 | .markdown h1:hover .anchor, 281 | .markdown h2:hover .anchor, 282 | .markdown h3:hover .anchor, 283 | .markdown h4:hover .anchor, 284 | .markdown h5:hover .anchor, 285 | .markdown h6:hover .anchor { 286 | opacity: 1; 287 | display: inline-block; 288 | } 289 | 290 | .markdown > br, 291 | .markdown > p > br { 292 | clear: both; 293 | } 294 | 295 | 296 | .hljs { 297 | display: block; 298 | background: white; 299 | padding: 0.5em; 300 | color: #333333; 301 | overflow-x: auto; 302 | } 303 | 304 | .hljs-comment, 305 | .hljs-meta { 306 | color: #969896; 307 | } 308 | 309 | .hljs-string, 310 | .hljs-variable, 311 | .hljs-template-variable, 312 | .hljs-strong, 313 | .hljs-emphasis, 314 | .hljs-quote { 315 | color: #df5000; 316 | } 317 | 318 | .hljs-keyword, 319 | .hljs-selector-tag, 320 | .hljs-type { 321 | color: #a71d5d; 322 | } 323 | 324 | .hljs-literal, 325 | .hljs-symbol, 326 | .hljs-bullet, 327 | .hljs-attribute { 328 | color: #0086b3; 329 | } 330 | 331 | .hljs-section, 332 | .hljs-name { 333 | color: #63a35c; 334 | } 335 | 336 | .hljs-tag { 337 | color: #333333; 338 | } 339 | 340 | .hljs-title, 341 | .hljs-attr, 342 | .hljs-selector-id, 343 | .hljs-selector-class, 344 | .hljs-selector-attr, 345 | .hljs-selector-pseudo { 346 | color: #795da3; 347 | } 348 | 349 | .hljs-addition { 350 | color: #55a532; 351 | background-color: #eaffea; 352 | } 353 | 354 | .hljs-deletion { 355 | color: #bd2c00; 356 | background-color: #ffecec; 357 | } 358 | 359 | .hljs-link { 360 | text-decoration: underline; 361 | } 362 | 363 | pre{ 364 | background: #fff; 365 | } 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
32 |

IconFont 图标

33 |
    34 | 35 |
  • 36 | 37 |
    Error
    38 |
    &#xe600;
    39 |
    • 40 | 41 |
  • 42 | 43 |
    返回
    44 |
    &#xe607;
    45 |
    • 46 | 47 |
  • 48 | 49 |
    购物车
    50 |
    &#xe601;
    51 |
    • 52 | 53 |
  • 54 | 55 |
    加号
    56 |
    &#xe676;
    57 |
    • 58 | 59 |
  • 60 | 61 |
    播放
    62 |
    &#xe602;
    63 |
    • 64 | 65 |
  • 66 | 67 |
    电话
    68 |
    &#xe603;
    69 |
    • 70 | 71 |
  • 72 | 73 |
    用户
    74 |
    &#xe6ce;
    75 |
    • 76 | 77 |
  • 78 | 79 |
    User
    80 |
    &#xe6f5;
    81 |
    • 82 | 83 |
  • 84 | 85 |
    close
    86 |
    &#xe659;
    87 |
    • 88 | 89 |
  • 90 | 91 |
    正确
    92 |
    &#xe61f;
    93 |
    • 94 | 95 |
  • 96 | 97 |
    查看
    98 |
    &#xe61b;
    99 |
    • 100 | 101 |
  • 102 | 103 |
    日期
    104 |
    &#xe721;
    105 |
    • 106 | 107 |
  • 108 | 109 |
    标签
    110 |
    &#xe60d;
    111 |
    • 112 | 113 |
  • 114 | 115 |
    购物
    116 |
    &#xe62a;
    117 |
    • 118 | 119 |
  • 120 | 121 |
    评论
    122 |
    &#xe7e9;
    123 |
    • 124 | 125 |
  • 126 | 127 |
    放大镜
    128 |
    &#xe629;
    129 |
    • 130 | 131 |
  • 132 | 133 |
    标签
    134 |
    &#xe628;
    135 |
    • 136 | 137 |
  • 138 | 139 |
    积分
    140 |
    &#xe606;
    141 |
    • 142 | 143 |
  • 144 | 145 |
    arrow
    146 |
    &#xe604;
    147 |
    • 148 | 149 |
  • 150 | 151 |
    09附件
    152 |
    &#xe644;
    153 |
    • 154 | 155 |
  • 156 | 157 |
    下载
    158 |
    &#xe87a;
    159 |
    • 160 | 161 |
  • 162 | 163 |
    tip
    164 |
    &#xe605;
    165 |
    • 166 | 167 |
  • 168 | 169 |
    余额
    170 |
    &#xe6a0;
    171 |
    • 172 | 173 |
  • 174 | 175 |
    arrow
    176 |
    &#xe87b;
    177 |
    • 178 | 179 |
180 |

unicode引用

181 |
182 | 183 |

unicode是字体在网页端最原始的应用方式，特点是：

184 |
    185 |
  • 兼容性最好，支持ie6+，及所有现代浏览器。
    • 186 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 187 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 188 |
189 |
190 |

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

191 |
192 |

unicode使用步骤如下：

193 |

第一步：拷贝项目下面生成的font-face

194 | 
@font-face {
195 |   font-family: 'iconfont';
196 |   src: url('iconfont.eot');
197 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
198 |   url('iconfont.woff') format('woff'),
199 |   url('iconfont.ttf') format('truetype'),
200 |   url('iconfont.svg#iconfont') format('svg');
201 | }
202 |
203 |

第二步：定义使用iconfont的样式

204 | 
.iconfont{
205 |   font-family:"iconfont" !important;
206 |   font-size:16px;font-style:normal;
207 |   -webkit-font-smoothing: antialiased;
208 |   -webkit-text-stroke-width: 0.2px;
209 |   -moz-osx-font-smoothing: grayscale;
210 | }
211 |
212 |

第三步：挑选相应图标并获取字体编码，应用于页面

213 | 
<i class="iconfont">&#x33;</i>
214 | 215 |
216 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

217 |
218 |
219 | 220 | 221 | 222 | 223 | -------------------------------------------------------------------------------- /src/components/orderCenter.vue: -------------------------------------------------------------------------------- 1 | 137 | 181 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /src/components/buyCar.vue: -------------------------------------------------------------------------------- 1 | 122 | 241 | 243 | 244 | -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

IconFont 图标

28 |
    29 | 30 |
  • 31 | 34 |
    Error
    35 |
    #icon-error
    36 |
    • 37 | 38 |
  • 39 | 42 |
    返回
    43 |
    #icon-reply
    44 |
    • 45 | 46 |
  • 47 | 50 |
    购物车
    51 |
    #icon-cart
    52 |
    • 53 | 54 |
  • 55 | 58 |
    加号
    59 |
    #icon-plus
    60 |
    • 61 | 62 |
  • 63 | 66 |
    播放
    67 |
    #icon-play
    68 |
    • 69 | 70 |
  • 71 | 74 |
    电话
    75 |
    #icon-phone
    76 |
    • 77 | 78 |
  • 79 | 82 |
    用户
    83 |
    #icon-user-full
    84 |
    • 85 | 86 |
  • 87 | 90 |
    User
    91 |
    #icon-user
    92 |
    • 93 | 94 |
  • 95 | 98 |
    close
    99 |
    #icon-close
    100 |
    • 101 | 102 |
  • 103 | 106 |
    正确
    107 |
    #icon-check
    108 |
    • 109 | 110 |
  • 111 | 114 |
    查看
    115 |
    #icon-view
    116 |
    • 117 | 118 |
  • 119 | 122 |
    日期
    123 |
    #icon-date
    124 |
    • 125 | 126 |
  • 127 | 130 |
    标签
    131 |
    #icon-top-label
    132 |
    • 133 | 134 |
  • 135 | 138 |
    购物
    139 |
    #icon-order
    140 |
    • 141 | 142 |
  • 143 | 146 |
    评论
    147 |
    #icon-comment
    148 |
    • 149 | 150 |
  • 151 | 154 |
    放大镜
    155 |
    #icon-search
    156 |
    • 157 | 158 |
  • 159 | 162 |
    标签
    163 |
    #icon-right-label
    164 |
    • 165 | 166 |
  • 167 | 170 |
    积分
    171 |
    #icon-point
    172 |
    • 173 | 174 |
  • 175 | 178 |
    arrow
    179 |
    #icon-arrow-left
    180 |
    • 181 | 182 |
  • 183 | 186 |
    09附件
    187 |
    #icon-attach
    188 |
    • 189 | 190 |
  • 191 | 194 |
    下载
    195 |
    #icon-down
    196 |
    • 197 | 198 |
  • 199 | 202 |
    tip
    203 |
    #icon-tip
    204 |
    • 205 | 206 |
  • 207 | 210 |
    余额
    211 |
    #icon-amount
    212 |
    • 213 | 214 |
  • 215 | 218 |
    arrow
    219 |
    #icon-arrow-right
    220 |
    • 221 | 222 |
223 | 224 | 225 |

symbol引用

226 |
227 | 228 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 229 | 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

230 |
    231 |
  • 支持多色图标了，不再受单色限制。
    • 232 |
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
    • 233 |
  • 兼容性较差，支持 ie9+,及现代浏览器。
    • 234 |
  • 浏览器渲染svg的性能一般，还不如png。
    • 235 |
236 |

使用步骤如下：

237 |

第一步：引入项目下面生成的symbol代码：

238 | 
<script src="./iconfont.js"></script>
239 |

第二步：加入通用css代码（引入一次就行）：

240 | 
<style type="text/css">
241 | .icon {
242 |    width: 1em; height: 1em;
243 |    vertical-align: -0.15em;
244 |    fill: currentColor;
245 |    overflow: hidden;
246 | }
247 | </style>
248 |

第三步：挑选相应图标并获取类名，应用于页面：

249 | 
<svg class="icon" aria-hidden="true">
250 |   <use xlink:href="#icon-xxx"></use>
251 | </svg>
252 |
253 |
254 | 255 | 256 | -------------------------------------------------------------------------------- /src/components/lookOrder.vue: -------------------------------------------------------------------------------- 1 | 203 | 239 | 241 | 242 | 243 | -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Fri Jun 9 04:37:36 2017 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 34 | 38 | 41 | 44 | 48 | 50 | 53 | 56 | 59 | 64 | 67 | 71 | 75 | 78 | 80 | 84 | 88 | 91 | 93 | 99 | 101 | 111 | 113 | 116 | 122 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /src/components/payOrder.vue: -------------------------------------------------------------------------------- 1 | 174 | 392 | 394 | 395 | 396 | -------------------------------------------------------------------------------- /src/components/goodsInfo.vue: -------------------------------------------------------------------------------- 1 | 165 | 365 | 366 | 367 | -------------------------------------------------------------------------------- /src/assets/statics/site/css/icon/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite=""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+''+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+"";var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&// console.log(e)}}ready(appendSvg)})(window) --------------------------------------------------------------------------------