├── .gitattributes
├── .gitignore
├── README.md
├── babel.config.js
├── dist
    ├── css
    │   ├── app.067151cb.css
    │   └── chunk-vendors.1d96ec67.css
    ├── favicon.ico
    ├── fonts
    │   ├── fontawesome-webfont.674f50d2.eot
    │   ├── fontawesome-webfont.af7ae505.woff2
    │   ├── fontawesome-webfont.b06871f2.ttf
    │   └── fontawesome-webfont.fee66e71.woff
    ├── img
    │   ├── fontawesome-webfont.912ec66d.svg
    │   └── right.560c4f47.png
    ├── index.html
    └── js
    │   ├── app.5a8487fd.js
    │   ├── app.5a8487fd.js.map
    │   ├── chunk-vendors.08e1b7b1.js
    │   └── chunk-vendors.08e1b7b1.js.map
├── docs
    └── images
    │   └── public_1.png
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── css
    │   │   ├── font.css
    │   │   └── style.css
    │   └── image
    │   │   ├── flash.jpg
    │   │   ├── home-logo.png
    │   │   ├── icon-slides.png
    │   │   ├── logo-footer.png
    │   │   ├── mi-home.png
    │   │   ├── mi-logo.png
    │   │   ├── right.png
    │   │   └── slogan2016.png
    ├── bus.js
    ├── components
    │   ├── FlashSale.vue
    │   ├── GoodsSale.vue
    │   ├── MenuBanner.vue
    │   ├── SiteFooter.vue
    │   ├── SiteInfo.vue
    │   ├── SubChannel.vue
    │   ├── ToolBar.vue
    │   ├── TopBar.vue
    │   ├── TopHeader.vue
    │   └── VideoBox.vue
    ├── main.js
    ├── parts
    │   ├── Banner.vue
    │   ├── GoodsBox.vue
    │   ├── LocationWindow.vue
    │   ├── Poster.vue
    │   ├── Slide.vue
    │   ├── VideoWindow.vue
    │   └── WeChatWindow.vue
    ├── router.js
    └── views
    │   └── mi.vue
└── vue.config.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 小米商城首页-使用Vue仿写
  2 | ![avatar](docs/images/public_1.png)
  3 | > ### 简介
  4 | 
  5 | * 基于Vue的小米商城首页仿写，这是我学习Vue路上的一个大型项目(<del>DEMO</del>)，原版代码发布于``MyProject-Contents``仓库，现在迁移到这里。
  6 | 
  7 | * 项目没有用到API，图片等静态资源都是直接引用官网的，如果图片原地址更改，那么部分图片可能存在**无法加载**的情况。所有的动画效果都是纯手写的。
  8 | 
  9 | * 项目预览地址：[请点这里](https://starlightunion.github.io/Xiaomi-Vue/dist/index.html#/)
 10 | 
 11 | > ### 学习到的内容
 12 | 
 13 | * 1.Vue的一次深入了解，对整个框架有了完整的印象；学习了Vue的**组件化思想**，项目组件化复用；熟悉了项目开发时的配置和结构等。
 14 | 
 15 | * 2.Vue的**通信**方式。
 16 | > * ``props``父->子组件通信
 17 | > 
 18 | > ```
 19 | > // 父组件
 20 | > <div @click='clickEvt'></div>
 21 | > <Child :a='a' rel='children'></Child>
 22 | > 
 23 | > import 'Child' from '../components/Child'
 24 | > export default {
 25 | > 	name: 'father',
 26 | > 	data () {
 27 | > 		a: [1, 2, 3]
 28 | > 	},
 29 | > 	methods: {
 30 | > 		clickEvt: function () {
 31 | > 			this.$refs.children.stop();// 父组件调用子组件方法
 32 | > 		}
 33 | > 	},
 34 | > 	components: {
 35 | > 		'Child': Child
 36 | > 	}
 37 | > }
 38 | > 
 39 | > // 子组件
 40 | > ...
 41 | > 
 42 | > export default {
 43 | > 	name: 'child',
 44 | > 	data () {},
 45 | > 	methods: {
 46 | > 		stop: function () {console.log('stop');}
 47 | > 	},
 48 | > 	props: [a]
 49 | > }
 50 | > ```
 51 | > 
 52 | > * ``$emit``子->父组件通信
 53 | > 
 54 | > ```
 55 | > // 父组件
 56 | > <div @listen='listenEvt'></div>
 57 | > 
 58 | > import 'Child' from '../components/Child'
 59 | > export default {
 60 | > 	name: 'father',
 61 | > 	data () {
 62 | > 		a: [1, 2, 3]
 63 | > 	},
 64 | > 	methods: {
 65 | > 		listenEvt: function (mess) {
 66 | > 			console.log(mess);
 67 | > 		}
 68 | > 	}
 69 | > 	components: {
 70 | > 		'Child': Child
 71 | > 	}
 72 | > }
 73 | > 
 74 | > // 子组件
 75 | > <div @click='clickEvt'></div>
 76 | > 
 77 | > export default {
 78 | > 	name: 'child',
 79 | > 	data () {},
 80 | > 	methods: {
 81 | > 		clickEvt: function () {
 82 | > 			this.$emit('listen', 'this is a message from child');
 83 | > 		}
 84 | > 	}
 85 | > }
 86 | > ```
 87 | > 
 88 | > * 中央事件总线通信
 89 | > 
 90 | > ```
 91 | > // main.js
 92 | > new Vue({
 93 | >  router,
 94 | >  render: h => h(App),
 95 | >  data: {
 96 | >    bus: new Vue(),// 暴露
 97 | >    ...
 98 | >  }
 99 | >}).$mount('#app')
100 | >
101 | > // 发送方
102 | > bus.$emit('transInfo', [1, 2, 3]);// 需定义好名称
103 | > 
104 | > // 接收方
105 | > bus.$on('transInfo', (data) => {
106 | > 	console.log(datas)
107 | > })
108 | > ```
109 | 
110 | * 3.``<transition>``和``<transition-group>``的使用以及动画的设计。
111 | 
112 | * 4.Vue操作DOM。
113 | 
114 | * 5.钩子函数的使用。
115 | 
116 | * 6.等...
117 | 
118 | > ### 安装与使用
119 | 
120 | ```
121 | > npm install	#安装依赖
122 | > npm run serve	#开发环境编译
123 | > npm run build	#生产环境编译
124 | ```
125 | 
126 | 
127 | 
128 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/dist/css/chunk-vendors.1d96ec67.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
3 |  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 |  */@font-face{font-family:FontAwesome;src:url(../fonts/fontawesome-webfont.674f50d2.eot);src:url(../fonts/fontawesome-webfont.674f50d2.eot?#iefix&v=4.7.0) format("embedded-opentype"),url(../fonts/fontawesome-webfont.af7ae505.woff2) format("woff2"),url(../fonts/fontawesome-webfont.fee66e71.woff) format("woff"),url(../fonts/fontawesome-webfont.b06871f2.ttf) format("truetype"),url(../img/fontawesome-webfont.912ec66d.svg#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scaleY(-1);transform:scaleY(-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\F000"}.fa-music:before{content:"\F001"}.fa-search:before{content:"\F002"}.fa-envelope-o:before{content:"\F003"}.fa-heart:before{content:"\F004"}.fa-star:before{content:"\F005"}.fa-star-o:before{content:"\F006"}.fa-user:before{content:"\F007"}.fa-film:before{content:"\F008"}.fa-th-large:before{content:"\F009"}.fa-th:before{content:"\F00A"}.fa-th-list:before{content:"\F00B"}.fa-check:before{content:"\F00C"}.fa-close:before,.fa-remove:before,.fa-times:before{content:"\F00D"}.fa-search-plus:before{content:"\F00E"}.fa-search-minus:before{content:"\F010"}.fa-power-off:before{content:"\F011"}.fa-signal:before{content:"\F012"}.fa-cog:before,.fa-gear:before{content:"\F013"}.fa-trash-o:before{content:"\F014"}.fa-home:before{content:"\F015"}.fa-file-o:before{content:"\F016"}.fa-clock-o:before{content:"\F017"}.fa-road:before{content:"\F018"}.fa-download:before{content:"\F019"}.fa-arrow-circle-o-down:before{content:"\F01A"}.fa-arrow-circle-o-up:before{content:"\F01B"}.fa-inbox:before{content:"\F01C"}.fa-play-circle-o:before{content:"\F01D"}.fa-repeat:before,.fa-rotate-right:before{content:"\F01E"}.fa-refresh:before{content:"\F021"}.fa-list-alt:before{content:"\F022"}.fa-lock:before{content:"\F023"}.fa-flag:before{content:"\F024"}.fa-headphones:before{content:"\F025"}.fa-volume-off:before{content:"\F026"}.fa-volume-down:before{content:"\F027"}.fa-volume-up:before{content:"\F028"}.fa-qrcode:before{content:"\F029"}.fa-barcode:before{content:"\F02A"}.fa-tag:before{content:"\F02B"}.fa-tags:before{content:"\F02C"}.fa-book:before{content:"\F02D"}.fa-bookmark:before{content:"\F02E"}.fa-print:before{content:"\F02F"}.fa-camera:before{content:"\F030"}.fa-font:before{content:"\F031"}.fa-bold:before{content:"\F032"}.fa-italic:before{content:"\F033"}.fa-text-height:before{content:"\F034"}.fa-text-width:before{content:"\F035"}.fa-align-left:before{content:"\F036"}.fa-align-center:before{content:"\F037"}.fa-align-right:before{content:"\F038"}.fa-align-justify:before{content:"\F039"}.fa-list:before{content:"\F03A"}.fa-dedent:before,.fa-outdent:before{content:"\F03B"}.fa-indent:before{content:"\F03C"}.fa-video-camera:before{content:"\F03D"}.fa-image:before,.fa-photo:before,.fa-picture-o:before{content:"\F03E"}.fa-pencil:before{content:"\F040"}.fa-map-marker:before{content:"\F041"}.fa-adjust:before{content:"\F042"}.fa-tint:before{content:"\F043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\F044"}.fa-share-square-o:before{content:"\F045"}.fa-check-square-o:before{content:"\F046"}.fa-arrows:before{content:"\F047"}.fa-step-backward:before{content:"\F048"}.fa-fast-backward:before{content:"\F049"}.fa-backward:before{content:"\F04A"}.fa-play:before{content:"\F04B"}.fa-pause:before{content:"\F04C"}.fa-stop:before{content:"\F04D"}.fa-forward:before{content:"\F04E"}.fa-fast-forward:before{content:"\F050"}.fa-step-forward:before{content:"\F051"}.fa-eject:before{content:"\F052"}.fa-chevron-left:before{content:"\F053"}.fa-chevron-right:before{content:"\F054"}.fa-plus-circle:before{content:"\F055"}.fa-minus-circle:before{content:"\F056"}.fa-times-circle:before{content:"\F057"}.fa-check-circle:before{content:"\F058"}.fa-question-circle:before{content:"\F059"}.fa-info-circle:before{content:"\F05A"}.fa-crosshairs:before{content:"\F05B"}.fa-times-circle-o:before{content:"\F05C"}.fa-check-circle-o:before{content:"\F05D"}.fa-ban:before{content:"\F05E"}.fa-arrow-left:before{content:"\F060"}.fa-arrow-right:before{content:"\F061"}.fa-arrow-up:before{content:"\F062"}.fa-arrow-down:before{content:"\F063"}.fa-mail-forward:before,.fa-share:before{content:"\F064"}.fa-expand:before{content:"\F065"}.fa-compress:before{content:"\F066"}.fa-plus:before{content:"\F067"}.fa-minus:before{content:"\F068"}.fa-asterisk:before{content:"\F069"}.fa-exclamation-circle:before{content:"\F06A"}.fa-gift:before{content:"\F06B"}.fa-leaf:before{content:"\F06C"}.fa-fire:before{content:"\F06D"}.fa-eye:before{content:"\F06E"}.fa-eye-slash:before{content:"\F070"}.fa-exclamation-triangle:before,.fa-warning:before{content:"\F071"}.fa-plane:before{content:"\F072"}.fa-calendar:before{content:"\F073"}.fa-random:before{content:"\F074"}.fa-comment:before{content:"\F075"}.fa-magnet:before{content:"\F076"}.fa-chevron-up:before{content:"\F077"}.fa-chevron-down:before{content:"\F078"}.fa-retweet:before{content:"\F079"}.fa-shopping-cart:before{content:"\F07A"}.fa-folder:before{content:"\F07B"}.fa-folder-open:before{content:"\F07C"}.fa-arrows-v:before{content:"\F07D"}.fa-arrows-h:before{content:"\F07E"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\F080"}.fa-twitter-square:before{content:"\F081"}.fa-facebook-square:before{content:"\F082"}.fa-camera-retro:before{content:"\F083"}.fa-key:before{content:"\F084"}.fa-cogs:before,.fa-gears:before{content:"\F085"}.fa-comments:before{content:"\F086"}.fa-thumbs-o-up:before{content:"\F087"}.fa-thumbs-o-down:before{content:"\F088"}.fa-star-half:before{content:"\F089"}.fa-heart-o:before{content:"\F08A"}.fa-sign-out:before{content:"\F08B"}.fa-linkedin-square:before{content:"\F08C"}.fa-thumb-tack:before{content:"\F08D"}.fa-external-link:before{content:"\F08E"}.fa-sign-in:before{content:"\F090"}.fa-trophy:before{content:"\F091"}.fa-github-square:before{content:"\F092"}.fa-upload:before{content:"\F093"}.fa-lemon-o:before{content:"\F094"}.fa-phone:before{content:"\F095"}.fa-square-o:before{content:"\F096"}.fa-bookmark-o:before{content:"\F097"}.fa-phone-square:before{content:"\F098"}.fa-twitter:before{content:"\F099"}.fa-facebook-f:before,.fa-facebook:before{content:"\F09A"}.fa-github:before{content:"\F09B"}.fa-unlock:before{content:"\F09C"}.fa-credit-card:before{content:"\F09D"}.fa-feed:before,.fa-rss:before{content:"\F09E"}.fa-hdd-o:before{content:"\F0A0"}.fa-bullhorn:before{content:"\F0A1"}.fa-bell:before{content:"\F0F3"}.fa-certificate:before{content:"\F0A3"}.fa-hand-o-right:before{content:"\F0A4"}.fa-hand-o-left:before{content:"\F0A5"}.fa-hand-o-up:before{content:"\F0A6"}.fa-hand-o-down:before{content:"\F0A7"}.fa-arrow-circle-left:before{content:"\F0A8"}.fa-arrow-circle-right:before{content:"\F0A9"}.fa-arrow-circle-up:before{content:"\F0AA"}.fa-arrow-circle-down:before{content:"\F0AB"}.fa-globe:before{content:"\F0AC"}.fa-wrench:before{content:"\F0AD"}.fa-tasks:before{content:"\F0AE"}.fa-filter:before{content:"\F0B0"}.fa-briefcase:before{content:"\F0B1"}.fa-arrows-alt:before{content:"\F0B2"}.fa-group:before,.fa-users:before{content:"\F0C0"}.fa-chain:before,.fa-link:before{content:"\F0C1"}.fa-cloud:before{content:"\F0C2"}.fa-flask:before{content:"\F0C3"}.fa-cut:before,.fa-scissors:before{content:"\F0C4"}.fa-copy:before,.fa-files-o:before{content:"\F0C5"}.fa-paperclip:before{content:"\F0C6"}.fa-floppy-o:before,.fa-save:before{content:"\F0C7"}.fa-square:before{content:"\F0C8"}.fa-bars:before,.fa-navicon:before,.fa-reorder:before{content:"\F0C9"}.fa-list-ul:before{content:"\F0CA"}.fa-list-ol:before{content:"\F0CB"}.fa-strikethrough:before{content:"\F0CC"}.fa-underline:before{content:"\F0CD"}.fa-table:before{content:"\F0CE"}.fa-magic:before{content:"\F0D0"}.fa-truck:before{content:"\F0D1"}.fa-pinterest:before{content:"\F0D2"}.fa-pinterest-square:before{content:"\F0D3"}.fa-google-plus-square:before{content:"\F0D4"}.fa-google-plus:before{content:"\F0D5"}.fa-money:before{content:"\F0D6"}.fa-caret-down:before{content:"\F0D7"}.fa-caret-up:before{content:"\F0D8"}.fa-caret-left:before{content:"\F0D9"}.fa-caret-right:before{content:"\F0DA"}.fa-columns:before{content:"\F0DB"}.fa-sort:before,.fa-unsorted:before{content:"\F0DC"}.fa-sort-desc:before,.fa-sort-down:before{content:"\F0DD"}.fa-sort-asc:before,.fa-sort-up:before{content:"\F0DE"}.fa-envelope:before{content:"\F0E0"}.fa-linkedin:before{content:"\F0E1"}.fa-rotate-left:before,.fa-undo:before{content:"\F0E2"}.fa-gavel:before,.fa-legal:before{content:"\F0E3"}.fa-dashboard:before,.fa-tachometer:before{content:"\F0E4"}.fa-comment-o:before{content:"\F0E5"}.fa-comments-o:before{content:"\F0E6"}.fa-bolt:before,.fa-flash:before{content:"\F0E7"}.fa-sitemap:before{content:"\F0E8"}.fa-umbrella:before{content:"\F0E9"}.fa-clipboard:before,.fa-paste:before{content:"\F0EA"}.fa-lightbulb-o:before{content:"\F0EB"}.fa-exchange:before{content:"\F0EC"}.fa-cloud-download:before{content:"\F0ED"}.fa-cloud-upload:before{content:"\F0EE"}.fa-user-md:before{content:"\F0F0"}.fa-stethoscope:before{content:"\F0F1"}.fa-suitcase:before{content:"\F0F2"}.fa-bell-o:before{content:"\F0A2"}.fa-coffee:before{content:"\F0F4"}.fa-cutlery:before{content:"\F0F5"}.fa-file-text-o:before{content:"\F0F6"}.fa-building-o:before{content:"\F0F7"}.fa-hospital-o:before{content:"\F0F8"}.fa-ambulance:before{content:"\F0F9"}.fa-medkit:before{content:"\F0FA"}.fa-fighter-jet:before{content:"\F0FB"}.fa-beer:before{content:"\F0FC"}.fa-h-square:before{content:"\F0FD"}.fa-plus-square:before{content:"\F0FE"}.fa-angle-double-left:before{content:"\F100"}.fa-angle-double-right:before{content:"\F101"}.fa-angle-double-up:before{content:"\F102"}.fa-angle-double-down:before{content:"\F103"}.fa-angle-left:before{content:"\F104"}.fa-angle-right:before{content:"\F105"}.fa-angle-up:before{content:"\F106"}.fa-angle-down:before{content:"\F107"}.fa-desktop:before{content:"\F108"}.fa-laptop:before{content:"\F109"}.fa-tablet:before{content:"\F10A"}.fa-mobile-phone:before,.fa-mobile:before{content:"\F10B"}.fa-circle-o:before{content:"\F10C"}.fa-quote-left:before{content:"\F10D"}.fa-quote-right:before{content:"\F10E"}.fa-spinner:before{content:"\F110"}.fa-circle:before{content:"\F111"}.fa-mail-reply:before,.fa-reply:before{content:"\F112"}.fa-github-alt:before{content:"\F113"}.fa-folder-o:before{content:"\F114"}.fa-folder-open-o:before{content:"\F115"}.fa-smile-o:before{content:"\F118"}.fa-frown-o:before{content:"\F119"}.fa-meh-o:before{content:"\F11A"}.fa-gamepad:before{content:"\F11B"}.fa-keyboard-o:before{content:"\F11C"}.fa-flag-o:before{content:"\F11D"}.fa-flag-checkered:before{content:"\F11E"}.fa-terminal:before{content:"\F120"}.fa-code:before{content:"\F121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\F122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\F123"}.fa-location-arrow:before{content:"\F124"}.fa-crop:before{content:"\F125"}.fa-code-fork:before{content:"\F126"}.fa-chain-broken:before,.fa-unlink:before{content:"\F127"}.fa-question:before{content:"\F128"}.fa-info:before{content:"\F129"}.fa-exclamation:before{content:"\F12A"}.fa-superscript:before{content:"\F12B"}.fa-subscript:before{content:"\F12C"}.fa-eraser:before{content:"\F12D"}.fa-puzzle-piece:before{content:"\F12E"}.fa-microphone:before{content:"\F130"}.fa-microphone-slash:before{content:"\F131"}.fa-shield:before{content:"\F132"}.fa-calendar-o:before{content:"\F133"}.fa-fire-extinguisher:before{content:"\F134"}.fa-rocket:before{content:"\F135"}.fa-maxcdn:before{content:"\F136"}.fa-chevron-circle-left:before{content:"\F137"}.fa-chevron-circle-right:before{content:"\F138"}.fa-chevron-circle-up:before{content:"\F139"}.fa-chevron-circle-down:before{content:"\F13A"}.fa-html5:before{content:"\F13B"}.fa-css3:before{content:"\F13C"}.fa-anchor:before{content:"\F13D"}.fa-unlock-alt:before{content:"\F13E"}.fa-bullseye:before{content:"\F140"}.fa-ellipsis-h:before{content:"\F141"}.fa-ellipsis-v:before{content:"\F142"}.fa-rss-square:before{content:"\F143"}.fa-play-circle:before{content:"\F144"}.fa-ticket:before{content:"\F145"}.fa-minus-square:before{content:"\F146"}.fa-minus-square-o:before{content:"\F147"}.fa-level-up:before{content:"\F148"}.fa-level-down:before{content:"\F149"}.fa-check-square:before{content:"\F14A"}.fa-pencil-square:before{content:"\F14B"}.fa-external-link-square:before{content:"\F14C"}.fa-share-square:before{content:"\F14D"}.fa-compass:before{content:"\F14E"}.fa-caret-square-o-down:before,.fa-toggle-down:before{content:"\F150"}.fa-caret-square-o-up:before,.fa-toggle-up:before{content:"\F151"}.fa-caret-square-o-right:before,.fa-toggle-right:before{content:"\F152"}.fa-eur:before,.fa-euro:before{content:"\F153"}.fa-gbp:before{content:"\F154"}.fa-dollar:before,.fa-usd:before{content:"\F155"}.fa-inr:before,.fa-rupee:before{content:"\F156"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen:before{content:"\F157"}.fa-rouble:before,.fa-rub:before,.fa-ruble:before{content:"\F158"}.fa-krw:before,.fa-won:before{content:"\F159"}.fa-bitcoin:before,.fa-btc:before{content:"\F15A"}.fa-file:before{content:"\F15B"}.fa-file-text:before{content:"\F15C"}.fa-sort-alpha-asc:before{content:"\F15D"}.fa-sort-alpha-desc:before{content:"\F15E"}.fa-sort-amount-asc:before{content:"\F160"}.fa-sort-amount-desc:before{content:"\F161"}.fa-sort-numeric-asc:before{content:"\F162"}.fa-sort-numeric-desc:before{content:"\F163"}.fa-thumbs-up:before{content:"\F164"}.fa-thumbs-down:before{content:"\F165"}.fa-youtube-square:before{content:"\F166"}.fa-youtube:before{content:"\F167"}.fa-xing:before{content:"\F168"}.fa-xing-square:before{content:"\F169"}.fa-youtube-play:before{content:"\F16A"}.fa-dropbox:before{content:"\F16B"}.fa-stack-overflow:before{content:"\F16C"}.fa-instagram:before{content:"\F16D"}.fa-flickr:before{content:"\F16E"}.fa-adn:before{content:"\F170"}.fa-bitbucket:before{content:"\F171"}.fa-bitbucket-square:before{content:"\F172"}.fa-tumblr:before{content:"\F173"}.fa-tumblr-square:before{content:"\F174"}.fa-long-arrow-down:before{content:"\F175"}.fa-long-arrow-up:before{content:"\F176"}.fa-long-arrow-left:before{content:"\F177"}.fa-long-arrow-right:before{content:"\F178"}.fa-apple:before{content:"\F179"}.fa-windows:before{content:"\F17A"}.fa-android:before{content:"\F17B"}.fa-linux:before{content:"\F17C"}.fa-dribbble:before{content:"\F17D"}.fa-skype:before{content:"\F17E"}.fa-foursquare:before{content:"\F180"}.fa-trello:before{content:"\F181"}.fa-female:before{content:"\F182"}.fa-male:before{content:"\F183"}.fa-gittip:before,.fa-gratipay:before{content:"\F184"}.fa-sun-o:before{content:"\F185"}.fa-moon-o:before{content:"\F186"}.fa-archive:before{content:"\F187"}.fa-bug:before{content:"\F188"}.fa-vk:before{content:"\F189"}.fa-weibo:before{content:"\F18A"}.fa-renren:before{content:"\F18B"}.fa-pagelines:before{content:"\F18C"}.fa-stack-exchange:before{content:"\F18D"}.fa-arrow-circle-o-right:before{content:"\F18E"}.fa-arrow-circle-o-left:before{content:"\F190"}.fa-caret-square-o-left:before,.fa-toggle-left:before{content:"\F191"}.fa-dot-circle-o:before{content:"\F192"}.fa-wheelchair:before{content:"\F193"}.fa-vimeo-square:before{content:"\F194"}.fa-try:before,.fa-turkish-lira:before{content:"\F195"}.fa-plus-square-o:before{content:"\F196"}.fa-space-shuttle:before{content:"\F197"}.fa-slack:before{content:"\F198"}.fa-envelope-square:before{content:"\F199"}.fa-wordpress:before{content:"\F19A"}.fa-openid:before{content:"\F19B"}.fa-bank:before,.fa-institution:before,.fa-university:before{content:"\F19C"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\F19D"}.fa-yahoo:before{content:"\F19E"}.fa-google:before{content:"\F1A0"}.fa-reddit:before{content:"\F1A1"}.fa-reddit-square:before{content:"\F1A2"}.fa-stumbleupon-circle:before{content:"\F1A3"}.fa-stumbleupon:before{content:"\F1A4"}.fa-delicious:before{content:"\F1A5"}.fa-digg:before{content:"\F1A6"}.fa-pied-piper-pp:before{content:"\F1A7"}.fa-pied-piper-alt:before{content:"\F1A8"}.fa-drupal:before{content:"\F1A9"}.fa-joomla:before{content:"\F1AA"}.fa-language:before{content:"\F1AB"}.fa-fax:before{content:"\F1AC"}.fa-building:before{content:"\F1AD"}.fa-child:before{content:"\F1AE"}.fa-paw:before{content:"\F1B0"}.fa-spoon:before{content:"\F1B1"}.fa-cube:before{content:"\F1B2"}.fa-cubes:before{content:"\F1B3"}.fa-behance:before{content:"\F1B4"}.fa-behance-square:before{content:"\F1B5"}.fa-steam:before{content:"\F1B6"}.fa-steam-square:before{content:"\F1B7"}.fa-recycle:before{content:"\F1B8"}.fa-automobile:before,.fa-car:before{content:"\F1B9"}.fa-cab:before,.fa-taxi:before{content:"\F1BA"}.fa-tree:before{content:"\F1BB"}.fa-spotify:before{content:"\F1BC"}.fa-deviantart:before{content:"\F1BD"}.fa-soundcloud:before{content:"\F1BE"}.fa-database:before{content:"\F1C0"}.fa-file-pdf-o:before{content:"\F1C1"}.fa-file-word-o:before{content:"\F1C2"}.fa-file-excel-o:before{content:"\F1C3"}.fa-file-powerpoint-o:before{content:"\F1C4"}.fa-file-image-o:before,.fa-file-photo-o:before,.fa-file-picture-o:before{content:"\F1C5"}.fa-file-archive-o:before,.fa-file-zip-o:before{content:"\F1C6"}.fa-file-audio-o:before,.fa-file-sound-o:before{content:"\F1C7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\F1C8"}.fa-file-code-o:before{content:"\F1C9"}.fa-vine:before{content:"\F1CA"}.fa-codepen:before{content:"\F1CB"}.fa-jsfiddle:before{content:"\F1CC"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-ring:before,.fa-life-saver:before,.fa-support:before{content:"\F1CD"}.fa-circle-o-notch:before{content:"\F1CE"}.fa-ra:before,.fa-rebel:before,.fa-resistance:before{content:"\F1D0"}.fa-empire:before,.fa-ge:before{content:"\F1D1"}.fa-git-square:before{content:"\F1D2"}.fa-git:before{content:"\F1D3"}.fa-hacker-news:before,.fa-y-combinator-square:before,.fa-yc-square:before{content:"\F1D4"}.fa-tencent-weibo:before{content:"\F1D5"}.fa-qq:before{content:"\F1D6"}.fa-wechat:before,.fa-weixin:before{content:"\F1D7"}.fa-paper-plane:before,.fa-send:before{content:"\F1D8"}.fa-paper-plane-o:before,.fa-send-o:before{content:"\F1D9"}.fa-history:before{content:"\F1DA"}.fa-circle-thin:before{content:"\F1DB"}.fa-header:before{content:"\F1DC"}.fa-paragraph:before{content:"\F1DD"}.fa-sliders:before{content:"\F1DE"}.fa-share-alt:before{content:"\F1E0"}.fa-share-alt-square:before{content:"\F1E1"}.fa-bomb:before{content:"\F1E2"}.fa-futbol-o:before,.fa-soccer-ball-o:before{content:"\F1E3"}.fa-tty:before{content:"\F1E4"}.fa-binoculars:before{content:"\F1E5"}.fa-plug:before{content:"\F1E6"}.fa-slideshare:before{content:"\F1E7"}.fa-twitch:before{content:"\F1E8"}.fa-yelp:before{content:"\F1E9"}.fa-newspaper-o:before{content:"\F1EA"}.fa-wifi:before{content:"\F1EB"}.fa-calculator:before{content:"\F1EC"}.fa-paypal:before{content:"\F1ED"}.fa-google-wallet:before{content:"\F1EE"}.fa-cc-visa:before{content:"\F1F0"}.fa-cc-mastercard:before{content:"\F1F1"}.fa-cc-discover:before{content:"\F1F2"}.fa-cc-amex:before{content:"\F1F3"}.fa-cc-paypal:before{content:"\F1F4"}.fa-cc-stripe:before{content:"\F1F5"}.fa-bell-slash:before{content:"\F1F6"}.fa-bell-slash-o:before{content:"\F1F7"}.fa-trash:before{content:"\F1F8"}.fa-copyright:before{content:"\F1F9"}.fa-at:before{content:"\F1FA"}.fa-eyedropper:before{content:"\F1FB"}.fa-paint-brush:before{content:"\F1FC"}.fa-birthday-cake:before{content:"\F1FD"}.fa-area-chart:before{content:"\F1FE"}.fa-pie-chart:before{content:"\F200"}.fa-line-chart:before{content:"\F201"}.fa-lastfm:before{content:"\F202"}.fa-lastfm-square:before{content:"\F203"}.fa-toggle-off:before{content:"\F204"}.fa-toggle-on:before{content:"\F205"}.fa-bicycle:before{content:"\F206"}.fa-bus:before{content:"\F207"}.fa-ioxhost:before{content:"\F208"}.fa-angellist:before{content:"\F209"}.fa-cc:before{content:"\F20A"}.fa-ils:before,.fa-shekel:before,.fa-sheqel:before{content:"\F20B"}.fa-meanpath:before{content:"\F20C"}.fa-buysellads:before{content:"\F20D"}.fa-connectdevelop:before{content:"\F20E"}.fa-dashcube:before{content:"\F210"}.fa-forumbee:before{content:"\F211"}.fa-leanpub:before{content:"\F212"}.fa-sellsy:before{content:"\F213"}.fa-shirtsinbulk:before{content:"\F214"}.fa-simplybuilt:before{content:"\F215"}.fa-skyatlas:before{content:"\F216"}.fa-cart-plus:before{content:"\F217"}.fa-cart-arrow-down:before{content:"\F218"}.fa-diamond:before{content:"\F219"}.fa-ship:before{content:"\F21A"}.fa-user-secret:before{content:"\F21B"}.fa-motorcycle:before{content:"\F21C"}.fa-street-view:before{content:"\F21D"}.fa-heartbeat:before{content:"\F21E"}.fa-venus:before{content:"\F221"}.fa-mars:before{content:"\F222"}.fa-mercury:before{content:"\F223"}.fa-intersex:before,.fa-transgender:before{content:"\F224"}.fa-transgender-alt:before{content:"\F225"}.fa-venus-double:before{content:"\F226"}.fa-mars-double:before{content:"\F227"}.fa-venus-mars:before{content:"\F228"}.fa-mars-stroke:before{content:"\F229"}.fa-mars-stroke-v:before{content:"\F22A"}.fa-mars-stroke-h:before{content:"\F22B"}.fa-neuter:before{content:"\F22C"}.fa-genderless:before{content:"\F22D"}.fa-facebook-official:before{content:"\F230"}.fa-pinterest-p:before{content:"\F231"}.fa-whatsapp:before{content:"\F232"}.fa-server:before{content:"\F233"}.fa-user-plus:before{content:"\F234"}.fa-user-times:before{content:"\F235"}.fa-bed:before,.fa-hotel:before{content:"\F236"}.fa-viacoin:before{content:"\F237"}.fa-train:before{content:"\F238"}.fa-subway:before{content:"\F239"}.fa-medium:before{content:"\F23A"}.fa-y-combinator:before,.fa-yc:before{content:"\F23B"}.fa-optin-monster:before{content:"\F23C"}.fa-opencart:before{content:"\F23D"}.fa-expeditedssl:before{content:"\F23E"}.fa-battery-4:before,.fa-battery-full:before,.fa-battery:before{content:"\F240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\F241"}.fa-battery-2:before,.fa-battery-half:before{content:"\F242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\F243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\F244"}.fa-mouse-pointer:before{content:"\F245"}.fa-i-cursor:before{content:"\F246"}.fa-object-group:before{content:"\F247"}.fa-object-ungroup:before{content:"\F248"}.fa-sticky-note:before{content:"\F249"}.fa-sticky-note-o:before{content:"\F24A"}.fa-cc-jcb:before{content:"\F24B"}.fa-cc-diners-club:before{content:"\F24C"}.fa-clone:before{content:"\F24D"}.fa-balance-scale:before{content:"\F24E"}.fa-hourglass-o:before{content:"\F250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\F251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\F252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\F253"}.fa-hourglass:before{content:"\F254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\F255"}.fa-hand-paper-o:before,.fa-hand-stop-o:before{content:"\F256"}.fa-hand-scissors-o:before{content:"\F257"}.fa-hand-lizard-o:before{content:"\F258"}.fa-hand-spock-o:before{content:"\F259"}.fa-hand-pointer-o:before{content:"\F25A"}.fa-hand-peace-o:before{content:"\F25B"}.fa-trademark:before{content:"\F25C"}.fa-registered:before{content:"\F25D"}.fa-creative-commons:before{content:"\F25E"}.fa-gg:before{content:"\F260"}.fa-gg-circle:before{content:"\F261"}.fa-tripadvisor:before{content:"\F262"}.fa-odnoklassniki:before{content:"\F263"}.fa-odnoklassniki-square:before{content:"\F264"}.fa-get-pocket:before{content:"\F265"}.fa-wikipedia-w:before{content:"\F266"}.fa-safari:before{content:"\F267"}.fa-chrome:before{content:"\F268"}.fa-firefox:before{content:"\F269"}.fa-opera:before{content:"\F26A"}.fa-internet-explorer:before{content:"\F26B"}.fa-television:before,.fa-tv:before{content:"\F26C"}.fa-contao:before{content:"\F26D"}.fa-500px:before{content:"\F26E"}.fa-amazon:before{content:"\F270"}.fa-calendar-plus-o:before{content:"\F271"}.fa-calendar-minus-o:before{content:"\F272"}.fa-calendar-times-o:before{content:"\F273"}.fa-calendar-check-o:before{content:"\F274"}.fa-industry:before{content:"\F275"}.fa-map-pin:before{content:"\F276"}.fa-map-signs:before{content:"\F277"}.fa-map-o:before{content:"\F278"}.fa-map:before{content:"\F279"}.fa-commenting:before{content:"\F27A"}.fa-commenting-o:before{content:"\F27B"}.fa-houzz:before{content:"\F27C"}.fa-vimeo:before{content:"\F27D"}.fa-black-tie:before{content:"\F27E"}.fa-fonticons:before{content:"\F280"}.fa-reddit-alien:before{content:"\F281"}.fa-edge:before{content:"\F282"}.fa-credit-card-alt:before{content:"\F283"}.fa-codiepie:before{content:"\F284"}.fa-modx:before{content:"\F285"}.fa-fort-awesome:before{content:"\F286"}.fa-usb:before{content:"\F287"}.fa-product-hunt:before{content:"\F288"}.fa-mixcloud:before{content:"\F289"}.fa-scribd:before{content:"\F28A"}.fa-pause-circle:before{content:"\F28B"}.fa-pause-circle-o:before{content:"\F28C"}.fa-stop-circle:before{content:"\F28D"}.fa-stop-circle-o:before{content:"\F28E"}.fa-shopping-bag:before{content:"\F290"}.fa-shopping-basket:before{content:"\F291"}.fa-hashtag:before{content:"\F292"}.fa-bluetooth:before{content:"\F293"}.fa-bluetooth-b:before{content:"\F294"}.fa-percent:before{content:"\F295"}.fa-gitlab:before{content:"\F296"}.fa-wpbeginner:before{content:"\F297"}.fa-wpforms:before{content:"\F298"}.fa-envira:before{content:"\F299"}.fa-universal-access:before{content:"\F29A"}.fa-wheelchair-alt:before{content:"\F29B"}.fa-question-circle-o:before{content:"\F29C"}.fa-blind:before{content:"\F29D"}.fa-audio-description:before{content:"\F29E"}.fa-volume-control-phone:before{content:"\F2A0"}.fa-braille:before{content:"\F2A1"}.fa-assistive-listening-systems:before{content:"\F2A2"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before{content:"\F2A3"}.fa-deaf:before,.fa-deafness:before,.fa-hard-of-hearing:before{content:"\F2A4"}.fa-glide:before{content:"\F2A5"}.fa-glide-g:before{content:"\F2A6"}.fa-sign-language:before,.fa-signing:before{content:"\F2A7"}.fa-low-vision:before{content:"\F2A8"}.fa-viadeo:before{content:"\F2A9"}.fa-viadeo-square:before{content:"\F2AA"}.fa-snapchat:before{content:"\F2AB"}.fa-snapchat-ghost:before{content:"\F2AC"}.fa-snapchat-square:before{content:"\F2AD"}.fa-pied-piper:before{content:"\F2AE"}.fa-first-order:before{content:"\F2B0"}.fa-yoast:before{content:"\F2B1"}.fa-themeisle:before{content:"\F2B2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\F2B3"}.fa-fa:before,.fa-font-awesome:before{content:"\F2B4"}.fa-handshake-o:before{content:"\F2B5"}.fa-envelope-open:before{content:"\F2B6"}.fa-envelope-open-o:before{content:"\F2B7"}.fa-linode:before{content:"\F2B8"}.fa-address-book:before{content:"\F2B9"}.fa-address-book-o:before{content:"\F2BA"}.fa-address-card:before,.fa-vcard:before{content:"\F2BB"}.fa-address-card-o:before,.fa-vcard-o:before{content:"\F2BC"}.fa-user-circle:before{content:"\F2BD"}.fa-user-circle-o:before{content:"\F2BE"}.fa-user-o:before{content:"\F2C0"}.fa-id-badge:before{content:"\F2C1"}.fa-drivers-license:before,.fa-id-card:before{content:"\F2C2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\F2C3"}.fa-quora:before{content:"\F2C4"}.fa-free-code-camp:before{content:"\F2C5"}.fa-telegram:before{content:"\F2C6"}.fa-thermometer-4:before,.fa-thermometer-full:before,.fa-thermometer:before{content:"\F2C7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\F2C8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\F2C9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\F2CA"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\F2CB"}.fa-shower:before{content:"\F2CC"}.fa-bath:before,.fa-bathtub:before,.fa-s15:before{content:"\F2CD"}.fa-podcast:before{content:"\F2CE"}.fa-window-maximize:before{content:"\F2D0"}.fa-window-minimize:before{content:"\F2D1"}.fa-window-restore:before{content:"\F2D2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\F2D3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\F2D4"}.fa-bandcamp:before{content:"\F2D5"}.fa-grav:before{content:"\F2D6"}.fa-etsy:before{content:"\F2D7"}.fa-imdb:before{content:"\F2D8"}.fa-ravelry:before{content:"\F2D9"}.fa-eercast:before{content:"\F2DA"}.fa-microchip:before{content:"\F2DB"}.fa-snowflake-o:before{content:"\F2DC"}.fa-superpowers:before{content:"\F2DD"}.fa-wpexplorer:before{content:"\F2DE"}.fa-meetup:before{content:"\F2E0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}


--------------------------------------------------------------------------------
/dist/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/dist/favicon.ico


--------------------------------------------------------------------------------
/dist/fonts/fontawesome-webfont.674f50d2.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/dist/fonts/fontawesome-webfont.674f50d2.eot


--------------------------------------------------------------------------------
/dist/fonts/fontawesome-webfont.af7ae505.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/dist/fonts/fontawesome-webfont.af7ae505.woff2


--------------------------------------------------------------------------------
/dist/fonts/fontawesome-webfont.b06871f2.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/dist/fonts/fontawesome-webfont.b06871f2.ttf


--------------------------------------------------------------------------------
/dist/fonts/fontawesome-webfont.fee66e71.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/dist/fonts/fontawesome-webfont.fee66e71.woff


--------------------------------------------------------------------------------
/dist/img/right.560c4f47.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/dist/img/right.560c4f47.png


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=favicon.ico type=image/x-icon><link rel=icon href=favicon.ico type=image/x-icon><title>小米商城</title><link href=css/app.067151cb.css rel=preload as=style><link href=css/chunk-vendors.1d96ec67.css rel=preload as=style><link href=js/app.5a8487fd.js rel=preload as=script><link href=js/chunk-vendors.08e1b7b1.js rel=preload as=script><link href=css/chunk-vendors.1d96ec67.css rel=stylesheet><link href=css/app.067151cb.css rel=stylesheet></head><body><div id=app></div><script src=js/chunk-vendors.08e1b7b1.js></script><script src=js/app.5a8487fd.js></script></body></html>


--------------------------------------------------------------------------------
/docs/images/public_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/docs/images/public_1.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mi",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "core-js": "^2.6.5",
11 |     "font-awesome": "^4.7.0",
12 |     "terser": "^4.0.0",
13 |     "vue": "^2.6.10",
14 |     "vue-router": "^3.0.3"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^3.8.0",
18 |     "@vue/cli-service": "^3.8.0",
19 |     "less": "^3.0.4",
20 |     "less-loader": "^4.1.0",
21 |     "vue-cli-plugin-fontawesome": "^0.2.0",
22 |     "vue-template-compiler": "^2.6.10"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon">
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon">
 9 |     <title>小米商城</title>
10 |   </head>
11 |   <body>
12 |     <div id="app"></div>
13 |     <!-- built files will be auto injected -->
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="less">
 8 |   #app {
 9 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
10 |     -webkit-font-smoothing: antialiased;
11 |     -moz-osx-font-smoothing: grayscale;
12 |     text-align: center;
13 |     color: #2c3e50;
14 |   }
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/assets/css/font.css:
--------------------------------------------------------------------------------
 1 | @font-face {font-family: "iconfont";
 2 |   src: url('//at.alicdn.com/t/font_1431387_f4npbvnboyw.eot?t=1569251627961'); /* IE9 */
 3 |   src: url('//at.alicdn.com/t/font_1431387_f4npbvnboyw.eot?t=1569251627961#iefix') format('embedded-opentype'), /* IE6-IE8 */
 4 |   url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAdsAAsAAAAADRQAAAcdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDXgqMQIouATYCJAMcCxAABCAFhG0HgQQbKgsjEWZ8NED2zwPbmHrwfeDUoPEC6tMWRdg2Ja+Or8vokPudD8+f+uciQmmlE5POTjo6HZWOcD6zT7wGCCCIeeXf+yFGLOFKqiCUqXgvk2ovoFq4lA/bz/lj8LsIs30Ci76oKa/l9NJkYPX/n2Opl8/T81/bAZ1adtkB3ZvQ3oAiGg+31umaB0hzn4J4Nr00ST8fCAA5vBEJUlhc2QgpOBg1Qd3AfoaekJos4D44Aqle7LIvJ2QRRJDS2fQWgIXy+5PvEE+kAIWIgblQrb6oD3KtYmsSMwoIXdg8rE7PBeB6EMAARALgAJnh6jFiqipS1sjdVuZoBKCGFBTitN5WbfWwhlkjrEmCAOZhZpZAzYrpPzwKERg4xAARg2qUwHaIiQErzwMCWNU8oIDVgwciwBrGAwZYI3jAAWuSFq2KlmysBuANkL8Buo9gEzW8H64tgRQ8jnQNVSBzDPHydHULk8o4F3E7pYM9USplnrRY2f3hU58/Zk7i0mcOeeItrq4d2T8f+/ypx8idOeSRS5sWlvcPHUzHnvpnseKeHZh8DjGFaOeCrphT07g9kjaRRhZvCsFBN4qnzUwHYfO+c/CoMGsVW92W5c0mce/lR84aF2I2O5qXzaMFu7bDspWOJ8nt/M4hz1361F8St5kdh462R8mknnj8qV8aU2lTjGUqDHNiys3CErabEJjUJjjWsKCo0h39c97C9bd8mwX/m94nOI3Sj68NB1bPnvhLRwcrNlI35eOn8KxcRnlncCyandwj6cwfrq5BDCFuMj8gj9hpeoSoUl073KPoaPmcHSIgi1ZBBRbN3J1iphBVYJX28raFBWRLl+vKcEJ5ttlUqoKuTkHlvSFnigYlUU2AqBoXpc9d+8q5XufTl+HTg8PmhyUXv35r7nVyTS3fio+ct16fPbmCx/HkRZ2PT545thWd5Gvvz33oY9pzC9fnZZv+ki/dA9sORVf/uq3/ufeN9+Y8mGAqG5KvrCJKkYYr5ziWZjWringCkam91bR6CPvLopUWfNZsXMlk8TXxqnY47nN7qPvOgCk5pbKOSkv49MAOZl0H51NPvE/4FMvMXhmhRzo8mX54VPBkyNa7X/1m2SivqDQNdFkcViQ3/3mKusiiAR0GTetOrFN1V3QMtyTlpveF5sKUOF2yo7N9XEetaoRT3HcDDEM6feiqlQ8Vz5lMupJsezuJT3hwCRc1srp87nZjC7fXitOd53na5sUFBzmiwyMhI3M3uVMXfOAS6UmjT7TB5mLb8PvY+fDFH5cET706u9r0ovT/2eWq8tpPAdecVyv+WZY7PUwhv7sB82nCoOtTjeKD3GYbCNc+YPvyz5aRV7uCoFzbUjmqsCRrBFz2e5acv2Csrx300jJni37QIJ2D7sJ5OF/b67H2c3rCoEEFxWHuLMHdPYAQLZbiwqJVHq/+qxyNV9MyoCWBBTmWTk8srakPfRXZL9XJpTY0pEvA2aLSqvKb3t3jpjoKudNKIv50otrF69yGmqi22XlFZ0NrQ1qdmuqmdkW+Cq2vyc1P3GVX43ocibR5V3Zx1unMspLyshp9xtmcvKJdxkTNIt7kGiGoPGGMcMWLUS/SJHzqUGpcgdIUtkQdKymUFhaWxfZvctiyxLGXY/tzx+ffzZr9zPFZu0MvB8QvttGZOyyzSCvdvZu2invv55WdDR9ifzZUdNZuI0pGBA0E/ChofYTobfPp6dN0vqT/YWVVV8PuL4Ffdhuqux5SSvqTpUePyhoiXT8YKmMcJO5NW3fvbqWzyA4LnSlJbs6uf3TgqAB3NbRFtRmuu2iFHyFAI5CfhKsxnFSQclQAqQxQ26lz+f18c4FzgHrW+vWvl5sdXH7aNUd1ZKD7wCMqZgm1ZDsYBLyfBJMBAEJfdpP+Jvwu7GO/sgnCT8IsTtk8AGB96G+A8DMrZFmA8A3bwPbd9fDis+1Od03mb1LF9hx/vpdGyKL42L5ZKSgQWrqnDnAm/ARwepMzKslXA76RCb9zKvxklsXtggT9IQXWdxPkbAAQaMAeb9LTOYWW/hnonHSgkMALGKQIRHLsnkgQUUgEMakckItQcrCCg+H6yGQAwk0nQGjtBUrtLDBat5Ec+xpEnNlATFsf5HTtj6kQXDb7YgwEYwhvkEVUG84uM6XewkTLgI1ymewht1kcHqJjrfk/rJHT2KE9J48iBgxTBb/kYliWBA1TjpGcUpHm8y5G77bjKaKqM1OAoYCI7DHQy42/nwipmYXFzPb2FpRQpQD7jH3zexBrZUsHcaLFhkD+aepQY8vSOsJZ4tFI6jKATzFSqbrikwuVbIaAoe5r5VBEnLTESDU+xdBp+rCaU/66ajhrMPgmMttIooQRTkRETCQEv9zhSSOzoL5omd1IRbNUafdmXXYdKmkVkGiYiW3Pr7zMLjrtuehRsO1tiep+6AAAAA==') format('woff2'),
 5 |   url('//at.alicdn.com/t/font_1431387_f4npbvnboyw.woff?t=1569251627961') format('woff'),
 6 |   url('//at.alicdn.com/t/font_1431387_f4npbvnboyw.ttf?t=1569251627961') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 7 |   url('//at.alicdn.com/t/font_1431387_f4npbvnboyw.svg?t=1569251627961#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-15tianwuliyoutuihuo:before {
19 |   content: "\e606";
20 | }
21 | 
22 | .icon-7tianwuliyoutuihuo:before {
23 |   content: "\e60e";
24 | }
25 | 
26 | .icon-buoumaotubiao46:before {
27 |   content: "\e629";
28 | }
29 | 
30 | .icon-liwu:before {
31 |   content: "\e62b";
32 | }
33 | 
34 | .icon-icon-test:before {
35 |   content: "\e61b";
36 | }
37 | 
38 | .icon-icon-test1:before {
39 |   content: "\e635";
40 | }


--------------------------------------------------------------------------------
/src/assets/css/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0px;
 3 |     padding: 0px;
 4 |     box-sizing: border-box;
 5 |     /* font-family: Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif; */
 6 |     font-family: Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
 7 |   }
 8 |   li{
 9 |     list-style: none;
10 |   }
11 |   a{
12 |     text-decoration: none;
13 |     color: #000;
14 |     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
15 |     -webkit-user-select: none;
16 |     -moz-user-focus: none;
17 |     -moz-user-select: none;
18 |   }
19 |   html{
20 |     height: 100%;
21 |     width: 100%;
22 |   }
23 |   body{
24 |     height: 100%;
25 |     width: 100%;
26 |   }
27 | 
28 |   html,body{
29 |     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
30 |   }
31 |   input{
32 |     border:none;
33 |     outline: none;
34 |   }
35 |   i{
36 |     font-style: normal;
37 |   }
38 |   button{
39 |     border:none;
40 |     outline: none;
41 |   }
42 |   .clearfix:after{
43 |     content:"";
44 |     height:0;
45 |     line-height:0;
46 |     visibility:hidden;
47 |     display:block;
48 |     clear:both
49 |   }
50 |   .clearfix{
51 |     zoom: 1;
52 |   }


--------------------------------------------------------------------------------
/src/assets/image/flash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/src/assets/image/flash.jpg


--------------------------------------------------------------------------------
/src/assets/image/home-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/src/assets/image/home-logo.png


--------------------------------------------------------------------------------
/src/assets/image/icon-slides.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/src/assets/image/icon-slides.png


--------------------------------------------------------------------------------
/src/assets/image/logo-footer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/src/assets/image/logo-footer.png


--------------------------------------------------------------------------------
/src/assets/image/mi-home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/src/assets/image/mi-home.png


--------------------------------------------------------------------------------
/src/assets/image/mi-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/src/assets/image/mi-logo.png


--------------------------------------------------------------------------------
/src/assets/image/right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/src/assets/image/right.png


--------------------------------------------------------------------------------
/src/assets/image/slogan2016.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StarlightUnion/Xiaomi-Vue/995665e80f131889cf8bd629d2b7ac870e7fd7c1/src/assets/image/slogan2016.png


--------------------------------------------------------------------------------
/src/bus.js:
--------------------------------------------------------------------------------
1 | // 中央事件总线 一
2 | import Vue from 'vue'
3 | 
4 | const bus = new Vue();
5 | export default bus;


--------------------------------------------------------------------------------
/src/components/FlashSale.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="flash-sale">
  3 |     <div class="box-header">
  4 |       <h2 class="box-title">小米闪购</h2>
  5 |       <div class="slide-control">
  6 |         <span class="slide-left slide-button" @click="prev">
  7 |           <i class="fa fa-angle-left"></i>
  8 |         </span>
  9 |         <span class="divider"></span>
 10 |         <span class="slide-right slide-button" @click="next">
 11 |           <i class="fa fa-angle-right"></i>
 12 |         </span>
 13 |       </div>
 14 |     </div>
 15 |     <div class="box-sale">
 16 |       <div class="sale-count-down">
 17 |         <div class="sale-round">{{round}} 场</div>
 18 |         <img src="../assets/image/flash.jpg" alt="小米闪购">
 19 |         <div class="time-left">距离结束还有</div>
 20 |         <div class="count-down">
 21 |           <span>{{hour}}</span>
 22 |           <i>:</i>
 23 |           <span>{{minute}}</span>
 24 |           <i>:</i>
 25 |           <span>{{second}}</span>
 26 |         </div>
 27 |       </div>
 28 |       <slide :slideItems="slideItems" ref="slide"></slide>
 29 |     </div>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | import Slide from '../parts/Slide'
 35 | 
 36 | export default {
 37 |   data () {
 38 |     return {
 39 |       round: '24:00',
 40 |       hour: '',
 41 |       minute: '',
 42 |       second: '',
 43 |       countDownTimer: '',
 44 |       slideItems: [
 45 |         {value: '高品质多功能头戴耳机', desc: '我的私人KTV', newPrice: '199', oldPrice: '249', topColor: '#ffac13', src: 'https://i8.mifile.cn/a1/pms_1551343984.14546114.jpg', url: 'https://www.mi.com/seckill/'},
 46 |         {value: 'Yeelight LED灯泡 彩光版', desc: '亮度自由调节', newPrice: '1', oldPrice: '99', topColor: '#83c44e', src: 'https://i8.mifile.cn/v1/a1/T1HPZgBTAv1RXrhCrK.jpg', url: 'https://www.mi.com/seckill/'},
 47 |         {value: '飞利浦智睿筒灯 可调色温版 白色', desc: '冷暖随心调', newPrice: '1', oldPrice: '59', topColor: '#2196f3', src: 'https://i8.mifile.cn/a1/pms_1524452958.92865446.jpg', url: 'https://www.mi.com/seckill/'},
 48 |         {value: '小米AI音箱', desc: '听音乐、语音遥控家电', newPrice: '249', oldPrice: '299', topColor: '#e53935', src: 'https://i8.mifile.cn/b2c-mimall-media/e277547c6e3329303dd2c20a327424c4.jpg', url: 'https://www.mi.com/seckill/'},
 49 |         {value: '小米笔记本电脑 15.6" i3 4G 128G 深空灰', desc: '全面均衡的国民轻薄本', newPrice: '2799', oldPrice: '3399', topColor: '#00c0a5', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cd2aa2dcad6440b469c22e27db9b6236.jpg', url: 'https://www.mi.com/seckill/'},
 50 |         {value: '小米路由器4C 白色', desc: '300M单频，高增益4天线', newPrice: '59', oldPrice: '99', topColor: '#ffac13', src: 'https://i8.mifile.cn/a1/pms_1532604005.80875371.jpg', url: 'https://www.mi.com/seckill/'},
 51 |         {value: '小米小爱音箱 Play（白色）量产版 白色', desc: '听音乐、语音遥控家电', newPrice: '99', oldPrice: '169', topColor: '#83c44e', src: 'https://i8.mifile.cn/a1/pms_1560230039.28979252.jpg', url: 'https://www.mi.com/seckill/'},
 52 |         {value: '米家空气净化器Pro', desc: '大空间，快循环', newPrice: '1099', oldPrice: '1499', topColor: '#2196f3', src: 'https://i8.mifile.cn/v1/a1/b315ba2c-3dc0-1352-3fbf-b23ffad1bb0f.jpg', url: 'https://www.mi.com/seckill/'},
 53 |         {value: '米家驱蚊器基础版 3个装 白色', desc: '3个装 长效驱蚊', newPrice: '99', oldPrice: '129', topColor: '#e53935', src: 'https://i8.mifile.cn/a1/pms_1557804685.13891176.jpg', url: 'https://www.mi.com/seckill/'},
 54 |         {value: '小米笔记本电脑 15.6" i3 4G 256G 集显 白色', desc: '全面均衡的国民轻薄本', newPrice: '2999', oldPrice: '3699', topColor: '#00c0a5', src: 'https://i8.mifile.cn/a1/pms_1553928054.21241826.jpg', url: 'https://www.mi.com/seckill/'},
 55 |         {value: '小米手环3 NFC版 黑色', desc: '能刷公交卡的手环', newPrice: '179', oldPrice: '199', topColor: '#ffac13', src: 'https://i8.mifile.cn/a1/pms_1536833428.43292402.jpg', url: 'https://www.mi.com/seckill/'},
 56 |         {value: '小米WiFi放大器Pro 黑色', desc: '轻松扩展WiFi信号', newPrice: '59', oldPrice: '79', topColor: '#83c44e', src: 'https://i8.mifile.cn/v1/a1/9085cddd-530a-0bf0-8b09-74e96fa97cc9.jpg', url: 'https://www.mi.com/seckill/'},
 57 |         {value: '米家飞利浦蓝牙夜灯 白色', desc: '感知照亮，多个组合联动', newPrice: '69', oldPrice: '79', topColor: '#2196f3', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ae1af0084c22ed9d78828f9a534ad15.jpg', url: 'https://www.mi.com/seckill/'},
 58 |         {value: '小米随身蓝牙音箱 星空灰', desc: '全金属外壳，内置麦克风', newPrice: '58', oldPrice: '69', topColor: '#e53935', src: 'https://i8.mifile.cn/v1/a1/T17aJ_BbDv1RXrhCrK.jpg', url: 'https://www.mi.com/seckill/'},
 59 |         {value: '小米游戏本15.6"  8代i7 GTX1060 16G 512G SSD 灰色', desc: '性能怪兽 信仰级游戏体验', newPrice: '7499', oldPrice: '8999', topColor: '#00c0a5', src: 'https://i8.mifile.cn/a1/pms_1557312623.98719913.jpg', url: 'https://www.mi.com/seckill/'},
 60 |         {value: '小米米家滤水壶', desc: '高效过滤 享安心好水', newPrice: '99', oldPrice: '129', topColor: '#ffac13', src: 'https://i8.mifile.cn/a1/pms_1528790321.27625165.png', url: 'https://www.mi.com/seckill/'},
 61 |         {value: '小米净水器 白色', desc: '无垢直饮健康纯水', newPrice: '899', oldPrice: '999', topColor: '#83c44e', src: 'https://i8.mifile.cn/a1/pms_1565506142.80495591.jpg', url: 'https://www.mi.com/seckill/'},
 62 |         {value: '小米路由器Pro 星空灰', desc: '全新一代智能家庭中心', newPrice: '399', oldPrice: '499', topColor: '#2196f3', src: 'https://i8.mifile.cn/v1/a1/fa55bc47-3fb8-c007-9195-fe1cf628030c.jpg', url: 'https://www.mi.com/seckill/'},
 63 |         {value: '净化器MAX滤芯', desc: '高效过滤 PM2.5', newPrice: '349', oldPrice: '399', topColor: '#e53935', src: 'https://i8.mifile.cn/a1/pms_1564038314.72163178.jpg', url: 'https://www.mi.com/seckill/'},
 64 |         {value: 'USB-C至VGA 千兆网口多功能转接器 白色', desc: '小巧便携，节省桌面空间', newPrice: '178', oldPrice: '199', topColor: '#00c0a5', src: 'https://i8.mifile.cn/v1/a1/f25d7464-8f9e-15e0-6652-29dd3b9187a5.jpg', url: 'https://www.mi.com/seckill/'},
 65 |         {value: '米家台灯Pro 白色', desc: '全桌面立体光照', newPrice: '299', oldPrice: '349', topColor: '#ffac13', src: 'https://i8.mifile.cn/a1/pms_1545707508.47641362.png', url: 'https://www.mi.com/seckill/'},
 66 |         {value: '小米USB-C电源适配器 白色', desc: '多协议快充 / USB-C接口输出 / 可折叠插脚', newPrice: '118', oldPrice: '129', topColor: '#83c44e', src: 'https://i8.mifile.cn/a1/pms_1528266159.29925871.jpg', url: 'https://www.mi.com/seckill/'},
 67 |         {value: '小米水质TDS检测笔 白色', desc: '准确检测家中水质纯度', newPrice: '35', oldPrice: '39', topColor: '#2196f3', src: 'https://i8.mifile.cn/v1/a1/T1Z7VvBvdv1RXrhCrK.jpg', url: 'https://www.mi.com/seckill/'},
 68 |         {value: '米家台灯1S 白色', desc: 'A 级光学照度', newPrice: '169', oldPrice: '179', topColor: '#e53935', src: 'https://i8.mifile.cn/a1/pms_1559097300.03074345.jpg', url: 'https://www.mi.com/seckill/'},
 69 |         {value: '小米时尚通勤双肩包 深灰', desc: '稳重的外表，张扬的内心。', newPrice: '228', oldPrice: '249', topColor: '#00c0a5', src: 'https://i8.mifile.cn/a1/pms_1528351766.85564518.jpg', url: 'https://www.mi.com/seckill/'},
 70 |         {value: '小米米家智能门锁 推拉式 黑色', desc: '一步推拉，高端智能门锁', newPrice: '1649', oldPrice: '1699', topColor: '#ffac13', src: 'https://i8.mifile.cn/a1/pms_1560158562.71434641.jpg', url: 'https://www.mi.com/seckill/'},
 71 |         {value: '米物蓝牙双模键盘 黑色', desc: '联结多屏生活', newPrice: '198', oldPrice: '249', topColor: '#83c44e', src: 'https://i8.mifile.cn/a1/pms_1544149468.46125837.jpg', url: 'https://www.mi.com/seckill/'},
 72 |         {value: '小米小钢炮蓝牙音箱 2 白色', desc: '极简设计，专业喇叭', newPrice: '118', oldPrice: '129', topColor: '#2196f3', src: 'https://i8.mifile.cn/v1/a1/T1o7bgB5Kv1RXrhCrK.jpg', url: 'https://www.mi.com/seckill/'},
 73 |         {value: '小米净水器滤芯 反渗透 白色', desc: '有效滤除抗生素、重金属、细菌、亚硝酸盐、有机物等', newPrice: '469', oldPrice: '499', topColor: '#e53935', src: 'https://i8.mifile.cn/a1/pms_1525316758.09779938.jpg', url: 'https://www.mi.com/seckill/'},
 74 |         {value: '米家无线手持擦地机 白色', desc: '全家人都喜欢的擦地机', newPrice: '479', oldPrice: '499', topColor: '#00c0a5', src: 'https://i8.mifile.cn/a1/pms_1560324263.44264444.png', url: 'https://www.mi.com/seckill/'},
 75 |         {value: '小米小爱音箱HD 浅灰色', desc: '震撼嘹亮 音智同享', newPrice: '568', oldPrice: '599', topColor: '#ffac13', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/93ef574280f48c407b6e7643c2b2636e.jpg', url: 'https://www.mi.com/seckill/'},
 76 |         {value: '米家智能门锁 标准锁体 磨砂金', desc: '全新磨砂金配色，精湛工艺升级', newPrice: '1299', oldPrice: '1499', topColor: '#83c44e', src: 'https://i8.mifile.cn/a1/pms_1563188402.30011093.jpg', url: 'https://www.mi.com/seckill/'},
 77 |         {value: '小米VR一体机 超级玩家版 白 32GB', desc: '为VR游戏而生', newPrice: '1748', oldPrice: '1799', topColor: '#2196f3', src: 'https://i8.mifile.cn/a1/pms_1554738222.83651040.jpg', url: 'https://www.mi.com/seckill/'}
 78 |       ]
 79 |     }
 80 |   },
 81 |   methods: {
 82 |     countDown () {
 83 |       clearInterval(this.countDownTimer);
 84 |       this.countDownTimer = setInterval(() => {
 85 |         this.timeComput();
 86 |       }, 1000);
 87 |     },
 88 |     timeComput () {
 89 |       let hour = 24 - new Date().getHours() - 1;
 90 |       let minute = 60 - new Date().getMinutes() - 1;
 91 |       let second = 60 - new Date().getSeconds() - 1;
 92 | 
 93 |       this.hour = this.addZero(hour);
 94 |       this.minute = this.addZero(minute);
 95 |       this.second = this.addZero(second);
 96 |     },
 97 |     addZero (m) {
 98 |       return m < 10 ? '0' + m : m
 99 |     },
100 |     prev () {
101 |       this.$refs.slide.prev();
102 |     },
103 |     next () {
104 |       this.$refs.slide.next();
105 |     }
106 |   },
107 |   components: {
108 |     'Slide': Slide
109 |   },
110 |   mounted () {
111 |     this.countDown();
112 |   }
113 | }
114 | </script>
115 | 
116 | <style lang="less">
117 |   .flash-sale {
118 |     position: relative;
119 |     width: 1226px;
120 |     height: auto;
121 |     padding-top: 4px;
122 |     margin: 0 auto;
123 |   }
124 | 
125 |   .box-header {
126 |     text-align: start;
127 |     display: flex;
128 |     justify-content: space-between;
129 |     align-items: center;
130 |     .box-title {
131 |       display: inline-block;
132 |       font-size: 22px;
133 |       font-weight: 200;
134 |       line-height: 58px;
135 |       color: #333;
136 |     }
137 |   }
138 | 
139 |   .box-sale {
140 |     display: flex;
141 |     .sale-count-down {
142 |       display: inline-block;
143 |       width: 234px;
144 |       height: 340px;
145 |       padding-top: 39px;
146 |       border-top: 1px solid #e53935;
147 |       background: #f1eded;
148 |       text-align: center;
149 |       .sale-round {
150 |         font-size: 21px;
151 |         color: #ef3a3b;
152 |         padding-top: 15px;
153 |       }
154 | 
155 |       .time-left {
156 |         color: rgba(0,0,0,.54);
157 |         font-size: 15px
158 |       }
159 | 
160 |       img {
161 |         margin: 25px auto;
162 |       }
163 | 
164 |       .count-down {
165 |         width: 168px;
166 |         margin: 28px auto 0;
167 |         display: flex;
168 |         span {
169 |           display: block;
170 |           width: 46px;
171 |           height: 46px;
172 |           background: #605751;
173 |           color: #fff;
174 |           font-size: 24px;
175 |           font-weight: 600;
176 |           line-height: 46px;
177 |           text-align: center;
178 |         }
179 | 
180 |         i {
181 |           display: block;
182 |           width: 15px;
183 |           height: 46px;
184 |           line-height: 46px;
185 |           color: #605751;
186 |           font-size: 28px;
187 |           font-style: normal;
188 |           text-align: center;
189 |         }
190 |       }
191 |     }
192 |   }
193 | 
194 |   .slide-control {
195 |     display: flex;
196 |     border: 1px solid #e0e0e0;
197 |     .slide-button {
198 |       padding: 0 4px;
199 |       font-size: 20px;
200 |       font-weight: 800;
201 |       line-height: 20px;
202 |       color: #b0b0b0;
203 |       text-align: center;
204 |       transition: color .5s;
205 |       cursor: pointer;
206 |       &:hover {
207 |         color: #ff6700;
208 |       }
209 | 
210 |       i {
211 |         width: 26px;
212 |         height: 18px;
213 |       }
214 |     }
215 | 
216 |     .divider {
217 |       width: 1px;
218 |       height: 21px;
219 |       background: #e0e0e0;
220 |     }
221 |   }
222 | </style>


--------------------------------------------------------------------------------
/src/components/GoodsSale.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="goods-sale">
  3 |     <poster :postItem="postItem1"></poster>
  4 |     <goods-box :goodsItem="goodsItem1"></goods-box>
  5 |     <poster :postItem="postItem2"></poster>
  6 |     <goods-box :goodsItem="goodsItem2"></goods-box>
  7 |     <poster :postItem="postItem3"></poster>
  8 |     <goods-box :goodsItem="goodsItem3"></goods-box>
  9 |     <poster :postItem="postItem4"></poster>
 10 |     <goods-box :goodsItem="goodsItem4"></goods-box>
 11 |     <poster :postItem="postItem5"></poster>
 12 |     <goods-box :goodsItem="goodsItem5"></goods-box>
 13 |     <poster :postItem="postItem6"></poster>
 14 |     <goods-box :goodsItem="goodsItem6"></goods-box>
 15 |     <poster :postItem="postItem7"></poster>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | import Poster from '../parts/Poster'
 21 | import GoodsBox from '../parts/GoodsBox'
 22 | 
 23 | export default {
 24 |   data () {
 25 |     return {
 26 |       postItem1: {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a2f39c9fe0804ace1d3707574c7c86f.jpg?w=2452&h=240', url: 'https://www.mi.com/redminote7pro/'},
 27 |       postItem2: {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e64bcac4e4b7c2ceb94f277bbc57ad45.jpg?w=2452&h=240', url: 'https://www.mi.com/a/h/9819.html'},
 28 |       postItem3: {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7606bb66991f59e15b5b35e917b1a907.jpg?w=2452&h=240', url: 'https://www.mi.com/a/h/11544.html'},
 29 |       postItem4: {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e2cf7dd837eb8d4690070d7dfa817d9.jpg?w=2452&h=240', url: 'https://item.mi.com/10476.html'},
 30 |       postItem5: {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/89c2a209b742fce9b10d9d196149d634.jpg?w=2452&h=240', url: 'https://www.mi.com/airenergy/'},
 31 |       postItem6: {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/10fb0086cb21120c53248a3d8cc56dc5.jpg?w=2452&h=240', url: 'https://item.mi.com/10327.html'},
 32 |       postItem7: {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg?w=2452&h=240', url: 'https://item.mi.com/9836.html'},
 33 | 
 34 |       goodsItem1: {
 35 |         boxTitle: '手机',
 36 |         isHot: false,
 37 |         vertical: true,
 38 |         url: 'https://www.mi.com/a/h/9891.html',
 39 |         listData: {
 40 |           promo: [{src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/79ed6663b57e30554a5d1f0653c68b78.jpg?w=468&h=1228', url: 'https://www.mi.com/mix2s/'}],
 41 |           goods: [
 42 |             {value: 'Redmi Note 8 Pro', desc: '6400万全场景四摄', sub: true, newPrice: '1399', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6f2493e6c6fe8e2485c407e5d75e3651.jpg', url: 'http://www.mi.com/redminote8pro'},
 43 |             {value: 'Redmi Note 8', desc: '千元4800万四摄', sub: true, newPrice: '999', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4c87947d104ee5833913e4c520108f16.jpg', url: 'http://www.mi.com/redminote8'},
 44 |             {value: 'Redmi K20 Pro 6GB+128GB', desc: '骁龙855， 弹出全面屏', sub: false, newPrice: '2299', oldPrice: '2599', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/beee478168e5c4fd0d66369386fddbbe.jpg', url: 'https://www.mi.com/redmik20pro/'},
 45 |             {value: 'Redmi Note 7', desc: '4800万拍照千元机', sub: false, newPrice: '1099', oldPrice: '1399', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ce61b71e2f81df62bd0c05aaa901d22.jpg', url: 'https://www.mi.com/redminote7/'},
 46 |             {value: 'Redmi 7', desc: '4000mAh超长续航', sub: true, newPrice: '699', oldPrice: '799', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9aab8a7fa9005ef918c9aa2d5f17c806.jpg', url: 'https://www.mi.com/redmi7/'},
 47 |             {value: '小米MIX 3 8GB+128GB', desc: 'DxO百分拍照手机', sub: false, newPrice: '2599', oldPrice: '3599', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/411d540271f6efbdd882fa33daee0de3.jpg', url: 'https://www.mi.com/mix3/'},
 48 |             {value: '小米CC9', desc: '3200万自拍，4800万三摄', sub: true, newPrice: '1699', oldPrice: '1799', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bd25cc614a670f4d5546fe82e239ef86.jpg', url: 'https://www.mi.com/micc9/'},
 49 |             {value: '小米9 SE', desc: '索尼4800万三摄，骁龙712', sub: true, newPrice: '1599', oldPrice: '1999', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/134efaa5dec3267ce29e36bad3ec26c9.jpg', url: 'https://www.mi.com/mi9se/'}
 50 |           ]
 51 |         }
 52 |       },
 53 |       goodsItem2: {
 54 |         boxTitle: '家电',
 55 |         isHot: true,
 56 |         vertical: false,
 57 |         tabList: [
 58 |           {value: '热门', type: 'hots', url: 'https://www.mi.com/p/3469.html'},
 59 |           {value: '电视音影', type: 'television', url: 'https://www.mi.com/a/h/9819.html'}
 60 |         ],
 61 |         listData: {
 62 |           promo: [
 63 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/221f2c4adfda2fc3827ce3a5dcb4850a.jpg?w=468&h=600', url: 'https://item.mi.com/9614.html'},
 64 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b67de5a8ce9025fb5d8bac66e019d1c3.jpg?w=468&h=600', url: 'https://item.mi.com/9527.html'}
 65 |           ],
 66 |           hots: [
 67 |             {value: '米家互联网空调C1（一级能效）', desc: '变频节能省电，自清洁', sub: false, newPrice: '2599', oldPrice: '2799', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8ce424d6fe93dfb74733b5838140b7ee.jpg', url: 'https://www.mi.com/airconditionc1/v1c1/'},
 68 |             {value: '米家空调', desc: '出众静音，快速制冷热', sub: false, newPrice: '1699', oldPrice: '1799', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2b911be4c2f156bb6e4cf367c6080045.jpg', url: 'https://www.mi.com/aircondition/f3w1/'},
 69 |             {value: '米家互联网洗烘一体机 Pro 10kg', desc: '智能洗烘，省心省力', sub: false, newPrice: '2999', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec20453216dcd42f982cffe5fdbc3115.jpg', url: 'https://item.mi.com/9963.html'},
 70 |             {value: '小米电视4A 32英寸', desc: '人工智能系统，高清液晶屏', sub: false, newPrice: '699', oldPrice: '799', src: 'https://i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633.jpg', url: 'https://www.mi.com/mitv4A/32/'},
 71 |             {value: 'Redmi全自动波轮洗衣机1A 8kg', desc: '一键操作，父母都爱用', sub: false, newPrice: '799', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b8c63a2024528fe5410ebe669b7d2407.jpg', url: 'https://item.mi.com/9509.html'},
 72 |             {value: '小米全面屏电视E55A', desc: '全面屏设计，人工智能语音', sub: false, newPrice: '1999', oldPrice: '2099', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg', url: 'https://www.mi.com/mitvall-screen/e55a/'},
 73 |             {value: '15.6" 四核i7 16G 独显 512G', desc: '全面均衡的国民轻薄本', sub: false, newPrice: '4899', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cd2aa2dcad6440b469c22e27db9b6236.jpg', url: 'https://item.mi.com/10253.html'},
 74 |             {value: 'Air 13.3" 2019款 ', desc: '', sub: true, newPrice: '4699', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/74e573c4c0d89048392d14831cc507d5.jpg', url: 'https://item.mi.com/10000142.html'}
 75 |           ],
 76 |           television: [
 77 |             {value: '小米电视4A 32英寸', desc: '人工智能系统，高清液晶屏', sub: false, newPrice: '699', oldPrice: '799', src: 'https://i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633.jpg', url: 'https://www.mi.com/mitv4A/32/'},
 78 |             {value: '小米全面屏电视E55A', desc: '全面屏设计，人工智能语音', sub: false, newPrice: '1999', oldPrice: '2099', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg', url: 'https://www.mi.com/mitvall-screen/e55a/'},
 79 |             {value: '小米全面屏电视E65A', desc: '全面屏设计，人工智能语音', sub: false, newPrice: '2999', oldPrice: '3999', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3317a291b112aa4712059ad93263668.jpg', url: 'https://www.mi.com/mitvall-screen/e65a/'},
 80 |             {value: '小米电视4X 43英寸', desc: 'FHD全高清屏，人工智能语音', sub: false, newPrice: '1299', oldPrice: '1499', src: 'https://i8.mifile.cn/b2c-mimall-media/ede227c1f0e3472fb8dcfae980d1e43f.jpg', url: 'https://www.mi.com/mitv4x/43/'},
 81 |             {value: '小米电视4C 55英寸', desc: '4K HDR，人工智能系统', sub: false, newPrice: '1699', oldPrice: '1799', src: 'https://i8.mifile.cn/v1/a1/cef8a9c0-2386-5b66-9ed2-6b1d4e4490bf.jpg', url: 'https://www.mi.com/mitv4c/55/'},
 82 |             {value: '小米电视4A 65英寸', desc: '4K HDR，人工智能语音系统', sub: false, newPrice: '2699', oldPrice: '2999', src: 'https://i8.mifile.cn/b2c-mimall-media/91b59cc6474e0cd777445b15adb13980.jpg', url: 'https://www.mi.com/mitv4A/65'},
 83 |             {value: '小米壁画电视 65英寸', desc: '壁画外观，全面屏，远场语音', sub: false, newPrice: '6999', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e7eee530e4a103f2f5a0937a14bed53.jpg', url: 'https://www.mi.com/arttv/'},
 84 |             {value: '小米盒子4', desc: '', sub: false, newPrice: '299', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/aa8a6ce3b2b1201d74d0197482f3403b.jpg', url: 'https://www.mi.com/mibox4'}
 85 |           ]
 86 |         }
 87 |       },
 88 |       goodsItem3: {
 89 |         boxTitle: '智能',
 90 |         isHot: true,
 91 |         vertical: false,
 92 |         tabList: [
 93 |           {value: '热门', type: 'hots', url: 'https://www.mi.com/p/3469.html'},
 94 |           {value: '出行', type: 'trip', url: 'https://www.mi.com/p/3469.html'}
 95 |         ],
 96 |         listData: {
 97 |           promo: [
 98 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45c23f5b9a927b2dc49c25277e07727c.jpg?w=468&h=600', url: 'https://www.mi.com/camera-360/'},
 99 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?w=468&h=600', url: 'https://item.mi.com/9285.html'}
100 |           ],
101 |           hots: [
102 |             {value: '小米「小爱老师」', desc: '口袋里的英语外教', sub: true, newPrice: '499', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/011dd8493ad62f3793dbb63d9fbd3bc0.jpg', url: 'https://www.mi.com/aiteacher-wifi/'},
103 |             {value: '小米米家智能门锁 推拉式', desc: '一步推拉，高端智能门锁', sub: false, newPrice: '1599', oldPrice: '1699', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0baacf6e54cbf89cab2c543cc02344e9.jpg', url: 'https://item.mi.com/10025.html'},
104 |             {value: '小米小爱音箱 Play', desc: '听音乐、语音遥控家电', sub: false, newPrice: '99', oldPrice: '169', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7c6e79433c883e1a022ec21402c1679.jpg', url: 'https://www.mi.com/aispeaker-play/'},
105 |             {value: '小爱音箱万能遥控版', desc: '传统家电秒变智能', sub: false, newPrice: '149', oldPrice: '199', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/44a30f0da2aacb66a0f896293ebc703f.jpg', url: 'https://www.mi.com/aispeaker-control/'},
106 |             {value: '米家电饭煲4L', desc: '890W 立体加热', sub: false, newPrice: '299', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b42e49c6c0208f2de5a2f7a491a3af46.jpg', url: 'https://item.mi.com/9990.html'},
107 |             {value: '小米手环4', desc: '大屏彩显，20天超长续航', sub: false, newPrice: '169', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e850fa029579ba886e3d5c81f00ae534.jpg', url: 'https://www.mi.com/shouhuan4/'},
108 |             {value: '米家九号平衡轮', desc: '能花式酷玩的“风火轮”', sub: false, newPrice: '999', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0c65d472682f0679e192dc7b4cd6e64c.jpg', url: 'https://item.mi.com/10003.html'},
109 |             {value: '小米体脂秤2', desc: '', sub: false, newPrice: '99', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/550177d2e54387521bce9e78cb2949dd.jpg', url: 'https://item.mi.com/9686.html'}
110 |           ],
111 |           trip: [
112 |             {value: '小米米家电动滑板车', desc: '便携折叠，自由穿行', sub: false, newPrice: '1999', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/768992ca-4136-92f1-244a-0194a81a6360.jpg', url: 'https://www.mi.com/scooter2/'},
113 |             {value: '米兔折叠婴儿推车', desc: '出发去向往的地方', sub: false, newPrice: '669', oldPrice: '699', src: 'https://i8.mifile.cn/b2c-mimall-media/18a82e7cda6ecbc22ecee7ac927d6ff9.jpg', url: 'https://www.mi.com/babyfoldingcar/'},
114 |             {value: '米兔遥控小飞机', desc: '迷你酷玩具，溜到飞起', sub: false, newPrice: '399', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/553b5c01820c844565abe64e50bba323.jpg', url: 'https://www.mi.com/minidrone/'},
115 |             {value: '米家车载空气净化器', desc: '高效净化车内空气', sub: false, newPrice: '449', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/cdc5c77b-d7e9-5a42-f848-3ff1808a139a.jpg', url: 'https://www.mi.com/carair/'},
116 |             {value: 'AMAZFIT 运动手表', desc: '扔掉手机去跑步', sub: false, newPrice: '769', oldPrice: '799', src: 'https://i8.mifile.cn/v1/a1/aaa1593d-9ca7-2944-3b62-380cc3427d82.jpg', url: 'https://www.mi.com/hmwatch/'},
117 |             {value: '九号平衡车 Plus', desc: '一个形影不离的新伙伴', sub: false, newPrice: '3499', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/877d3ce8-68ab-7506-2a78-55a8c0fba946.png', url: 'https://www.mi.com/scooterplus/'},
118 |             {value: '米家车载逆变器', desc: '双USB充电口，国际组合插孔', sub: false, newPrice: '199', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/61472c3fcd181959055551e5c73aafec.jpg', url: 'https://item.mi.com/7627.html'},
119 |             {value: '米家充气宝', desc: '', sub: false, newPrice: '199', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0294e2f3997bf0cffb7bf48361d03588.jpg', url: 'https://item.mi.com/9613.html'}
120 |           ]
121 |         }
122 |       },
123 |       goodsItem4: {
124 |         boxTitle: '搭配',
125 |         isHot: true,
126 |         vertical: false,
127 |         tabList: [
128 |           {value: '热门', type: 'hots', url: 'https://www.mi.com/p/3469.html'},
129 |           {value: '耳机音箱', type: 'earphone', url: 'https://www.mi.com/p/3469.html'}
130 |         ],
131 |         listData: {
132 |           promo: [
133 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6874615b3c50e837ffe532eb6ea4ef1a.jpg?w=468&h=600', url: 'https://www.mi.com/scooter/'},
134 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e4e456617d58227cc70d682b42fe90e3.jpg?w=468&h=600', url: 'https://www.mi.com/mj-electricshaver/'}
135 |           ],
136 |           hots: [
137 |             {value: 'Redmi充电宝 10000mAh 标准版 白色', desc: '10000mAh大电量', sub: false, newPrice: '59', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ea8e42faebf7d76a4cb42b8930cf9e46.jpg', url: 'https://item.mi.com/10317.html'},
138 |             {value: 'Redmi充电宝 20000mAh 快充版', desc: '大容量，	可上飞机 ', sub: false, newPrice: '99', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eaf70e0e9905de6452f07b1f48fcc386.jpg', url: 'https://item.mi.com/10318.html'},
139 |             {value: '小米二合一数据线', desc: '两种接口，支持多种设备', sub: false, newPrice: '19.9', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/287594eb-b765-8db1-3255-0a05c4c07440.jpg', url: 'https://item.mi.com/4833.html'},
140 |             {value: '小米插线板 5孔位', desc: '多重安全保护', sub: false, newPrice: '39', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/5dd69c0a-8f4a-b42f-d840-6c5a47f2cd03.jpg', url: 'https://item.mi.com/5857.html'},
141 |             {value: '小米无线充电器', desc: '快速充电，轻巧便携', sub: false, newPrice: '99', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/d7fd9ecdca3959beae3fb5db59aa9aff.jpg', url: 'https://item.mi.com/9009.html'},
142 |             {value: '小米蓝牙耳机AirDots青春版', desc: '雅致简约，收纳充电盒', sub: false, newPrice: '199', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/92af1f21293fabfbf2a112892b864925.jpg', url: 'https://item.mi.com/9016.html'},
143 |             {value: '小米小爱蓝牙音箱 随身版', desc: '小巧便携，一键唤醒小爱', sub: false, newPrice: '49', oldPrice: '', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/321610e787393c42e5cb2e5730a7681d.jpg', url: 'https://www.mi.com/sound-carry/'},
144 |             {value: '小米小爱触屏音箱', desc: '', sub: false, newPrice: '249', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9946e252a7c49662376c056ced004a20.jpg', url: 'https://www.mi.com/aispeaker-touch/'}
145 |           ],
146 |           earphone: [
147 |             {value: '小米双单元半入耳式耳机', desc: '半入耳式舒适佩戴', sub: false, newPrice: '69', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/ddf317f34e47eed06d910ee0ffd6b2fc.jpg', url: 'https://www.mi.com/half-in-ear/'},
148 |             {value: '小米蓝牙项圈耳机', desc: '挂在脖子上的好耳机', sub: false, newPrice: '299', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/838ba427ef55317d8c4911b02c95bb79.jpg', url: 'https://www.mi.com/bluetooth-collar/'},
149 |             {value: '小米圈铁耳机2', desc: '全面升级，让声音更有质感', sub: false, newPrice: '99', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/a0e1b48582e68cecf4b3e32dd1b5549d.jpg', url: 'https://www.mi.com/quantie2/'},
150 |             {value: '小米随身蓝牙音箱', desc: '全金属外壳，内置麦克风', sub: false, newPrice: '69', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/T1hVY_BTdv1RXrhCrK.jpg', url: 'https://www.mi.com/littleaudio/'},
151 |             {value: '小米蓝牙耳机青春版', desc: '6.5 克轻巧，高清通话音质', sub: false, newPrice: '59', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/e4c0f21c-3bd4-323e-673b-a9c1c1c6e294.jpg', url: 'https://www.mi.com/bluetooth-earphone/'},
152 |             {value: '小米运动蓝牙耳机mini', desc: '迷你机身, 小如蚕豆', sub: false, newPrice: '169', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/852c3872-7aca-e565-b8fb-37aa3ce88979.jpg', url: 'https://www.mi.com/sportearphone-mini/'},
153 |             {value: '小米蓝牙耳机AirDots青春版', desc: '雅致简约，收纳充电盒', sub: false, newPrice: '199', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/92af1f21293fabfbf2a112892b864925.jpg', url: 'https://item.mi.com/9016.html'}
154 |           ]
155 |         }
156 |       },
157 |       goodsItem5: {
158 |         boxTitle: '配件',
159 |         isHot: true,
160 |         vertical: false,
161 |         tabList: [
162 |           {value: '热门', type: 'hots', url: 'https://search.mi.com/search_%E4%BF%9D%E6%8A%A4%E5%A3%B3'},
163 |           {value: '保护套', type: 'protective', url: 'https://search.mi.com/search_%E4%BF%9D%E6%8A%A4%E5%A3%B3'}
164 |         ],
165 |         listData: {
166 |           promo: [
167 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/739ebd8abfc2b1be8866a2c1ad87e709.jpg?w=468&h=600', url: 'https://item.mi.com/9016.html'},
168 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ffe4182f1d9a5befdf2380ec90ae1620.jpg?w=468&h=600', url: 'https://www.mi.com/dispenser/'}
169 |           ],
170 |           hots: [
171 |             {value: '小米9 SE 街头风保护壳', desc: '简约时尚，多彩三色', sub: false, newPrice: '49', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c19fad90ad73f91e13c97cce2b15d82.jpg', url: 'https://item.mi.com/9355.html'},
172 |             {value: '小米CC9e 高透果冻保护壳', desc: '更薄更清透', sub: false, newPrice: '49', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9dd5ef3ab726a9b9b9cd39587a1d0e86.jpg', url: 'https://item.mi.com/10173.html'},
173 |             {value: 'Redmi K20 / K20 Pro 怪力魔王保护壳', desc: '怪力魔王专属定制', sub: false, newPrice: '39', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8fb7f3be403cfcbe98576bee28c7cc25.jpg', url: 'https://item.mi.com/9889.html'},
174 |             {value: '小米MIX 3 獬豸神兽保护壳', desc: '因为独特而备受瞩目', sub: false, newPrice: '32.9', oldPrice: '69', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/20bb12392d70e3b7158c252e9c34d0b0.jpg', url: 'https://item.mi.com/9133.html'},
175 |             {value: '小米 USB充电器（4口）', desc: '化繁为简，以一敌四', sub: false, newPrice: '59', oldPrice: '69', src: 'https://i8.mifile.cn/v1/a1/T1C__gBmYv1RXrhCrK.jpg', url: 'https://www.mi.com/chongdianqi4kou'},
176 |             {value: '米家LED随身灯', desc: '小巧轻便 5级亮度调节', sub: false, newPrice: '16.9', oldPrice: '19.9', src: 'https://i8.mifile.cn/v1/a1/b0ded71f-b235-8f99-ba1c-20f80c3a4231.jpg', url: 'https://item.mi.com/4053.html'},
177 |             {value: '小米USB-C数据线 编织线版', desc: '高强度纤维编制线体', sub: true, newPrice: '18.9', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/4132366589e457f407b918fe48c89cb1.jpg', url: 'https://item.mi.com/10000124.html'},
178 |             {value: 'USB Type-C 转接头', desc: '', sub: false, newPrice: '5', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/T1hvC_BQdT1RXrhCrK.jpg', url: 'https://item.mi.com/3751.html'}
179 |           ],
180 |           protective: [
181 |             {value: '小米CC9&小米CC9美图定制版 标准高透贴膜', desc: '高清透亮，耐磨性强', sub: false, newPrice: '19', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5c200476bc9336d171931cb7ee2e4549.jpg', url: 'https://item.mi.com/10171.html'},
182 |             {value: '小米CC9e 标准高透贴膜', desc: '高清透亮，耐磨性强', sub: false, newPrice: '19', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/24f8b0547a798b69be1b868872ddd80f.jpg', url: 'https://item.mi.com/10172.html'},
183 |             {value: 'Redmi 7A标准高透贴膜', desc: '高清高透，精彩清晰可见', sub: false, newPrice: '19', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/958e872fe9930838e90de8acc9fffc28.jpg', url: 'https://item.mi.com/9891.html'},
184 |             {value: '小仙女心愿手链保护壳', desc: '手链绕于指尖，仙气满满', sub: false, newPrice: '199', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5599ccd40bab44fb0f1722d150fe43f.jpg', url: 'https://item.mi.com/10177.html'},
185 |             {value: '小米CC9 荧光色高透果冻保护壳', desc: '玩转多彩青春色', sub: false, newPrice: '49', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d8a74ade6b1b5fbd0c88b9679c63832.jpg', url: 'https://item.mi.com/10168.html'},
186 |             {value: 'Redmi K20 / K20 Pro 怪力魔王保护壳', desc: '怪力魔王专属定制', sub: false, newPrice: '39', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8fb7f3be403cfcbe98576bee28c7cc25.jpg', url: 'https://item.mi.com/9889.html'},
187 |             {value: '小米9 ARE U OK保护壳', desc: '一个与众不同的保护壳', sub: false, newPrice: '39', oldPrice: '49', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/39a5445afe8c48d9b92b2bf9d6d88a26.jpg', url: 'https://item.mi.com/9720.html'},
188 |             {value: '小米9 RUOK保护壳', desc: '', sub: false, newPrice: '39', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/913e51883bf91da95c2f84b0776b95cf.jpg', url: 'https://item.mi.com/9721.html'}
189 |           ]
190 |         }
191 |       },
192 |       goodsItem6: {
193 |         boxTitle: '周边',
194 |         isHot: true,
195 |         vertical: false,
196 |         tabList: [
197 |           {value: '热门', type: 'hots', url: 'https://www.mi.com/p/3484.html'},
198 |           {value: '出行', type: 'trip', url: ''}
199 |         ],
200 |         listData: {
201 |           promo: [
202 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/99f1f43d9df484572bd81138f45dfc0f.jpg?w=468&h=600', url: 'https://item.mi.com/10578.html'},
203 |             {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0b8cffcbdaa88e2a314f0a372ca75dd.jpg?w=468&h=600', url: 'https://item.mi.com/8621.html'}
204 |           ],
205 |           hots: [
206 |             {value: '米家飞行员太阳镜 Pro', desc: '尼龙偏光，轻巧佩戴', sub: false, newPrice: '199', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg', url: 'https://item.mi.com/9732.html'},
207 |             {value: '小米巨能写中性笔10支装', desc: '一支顶4支，超长顺滑书写', sub: false, newPrice: '9.9', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/57433a4b991b2a2ddc889f2d8d434655.jpg', url: 'https://item.mi.com/9836.html'},
208 |             {value: '小米旅行箱 20英寸 布朗熊限量版', desc: '“国际巨星” LINE FRIENDS布朗熊', sub: false, newPrice: '399', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c149537ebb0c2cdb977ddd93200074f4.jpg', url: 'https://item.mi.com/10007.html'},
209 |             {value: '米家迷你保温杯', desc: '可以随身携带的温度', sub: false, newPrice: '49', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03d94ee6059481a6adcb6c4c5c572fb4.jpg', url: 'https://item.mi.com/10480.html'},
210 |             {value: '米家驱蚊器基础版 3个装', desc: '3个装 长效驱蚊', sub: false, newPrice: '99', oldPrice: '129', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41e6890f9d6b7fdb4275c986dc3644e8.jpg', url: 'https://item.mi.com/9723.html'},
211 |             {value: '3卷装抽绳式垃圾袋', desc: '让清洁更简单', sub: false, newPrice: '14.9', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/38748fefeef78183ac01356a23dbc5c5.jpg', url: 'https://item.mi.com/9938.html'},
212 |             {value: '贝医生巴氏牙刷 四色装', desc: '进口刷毛，好品质', sub: false, newPrice: '39.9', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/413f5e2f-53e7-0879-119c-8b4466feea53.jpg', url: 'https://www.mi.com/toothbrush-set/'},
213 |             {value: '8H 乳胶弹簧静音床垫 M3', desc: '', sub: true, newPrice: '1499', oldPrice: '', src: 'https://i8.mifile.cn/v1/a1/eaa7c8e5-2a8c-0d2c-6de7-a6db2068b192.jpg', url: 'https://item.mi.com/6512.html'}
214 |           ],
215 |           trip: [
216 |             {value: '90分框体旅行箱', desc: '专利轻量合金中框，轻盈坚固 ', sub: true, newPrice: '599', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d26d3a80dd1ab0c6a657f13cb234dade.jpg', url: 'https://item.mi.com/10000147.html'},
217 |             {value: '小米商旅多功能双肩包 2', desc: '商务旅行多场景，切换无压力', sub: false, newPrice: '199', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/47ecc65d37065fde1e71b1b34326e741.jpg', url: 'https://item.mi.com/10181.html'},
218 |             {value: '米家飞行员太阳镜 Pro', desc: '尼龙偏光，轻巧佩戴', sub: false, newPrice: '199', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cccac948e1b8ffb47f1fecde67692e60.jpg', url: 'https://item.mi.com/9732.html'},
219 |             {value: '小米小背包', desc: '小身材大容量， 更精彩！', sub: false, newPrice: '29', oldPrice: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5f4677730c6be3ecab615795fb0e9c7.jpg', url: 'https://item.mi.com/8621.html'},
220 |             {value: 'Free Tie 真皮板鞋 米家定制', desc: '做一双简单的板鞋', sub: false, newPrice: '129', oldPrice: '199', src: 'https://i8.mifile.cn/v1/a1/e2775107-da04-6611-3580-82227ffec369.png', url: 'https://www.mi.com/plateshoes/'},
221 |             {value: '自动折叠伞', desc: '防泼水伞布，轻盈拒水', sub: false, newPrice: '94', oldPrice: '99', src: 'https://i8.mifile.cn/v1/a1/43549b8e-c8cd-0464-17ba-6be26f395ef0.jpg', url: 'https://www.mi.com/umbrella/'},
222 |             {value: '最生活毛巾•青春系列', desc: '3秒吸水，杀菌无刺激', sub: false, newPrice: '19.9', oldPrice: '', src: 'https://i8.mifile.cn/b2c-mimall-media/1f4c867b5ccb878b43054f640636c872.jpg', url: 'https://item.mi.com/4917.html'},
223 |           ]
224 |         }
225 |       }
226 |     }
227 |   },
228 |   components: {
229 |     'Poster': Poster,
230 |     'GoodsBox': GoodsBox
231 |   }
232 | }
233 | </script>
234 | 
235 | <style lang="less">
236 |   .goods-sale {
237 |       position: relative;
238 |       width: 1226px;
239 |       height: auto;
240 |       margin: 0 auto;
241 |       display: flex;
242 |       flex-direction: column;
243 |   }
244 | </style>


--------------------------------------------------------------------------------
/src/components/MenuBanner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="menu-banner">
  3 |     <div class="menu-container" @mouseleave="bannerMenuHide()">
  4 |       <ul class="menu-list">
  5 |         <li class="list-item"
  6 |         v-for="(item, index) in menus"
  7 |         :key="index"
  8 |         @mouseenter="bannerMenuShow(item.type)">
  9 |           <a :href="item.url" target="blank">{{item.value}}</a>
 10 |           <i class="fa fa-angle-right"></i>
 11 |         </li>
 12 |       </ul>
 13 |     </div>
 14 |     <div class="menu-info"
 15 |     v-show="bannerMenuFlag"
 16 |     @mouseleave="bannerMenuHide()"
 17 |     @mouseenter="bannerMenuShow()">
 18 |         <ul class="menu-info-list"
 19 |         v-for="(list, key) in menuListMatch"
 20 |         :key="key"
 21 |         :data-key="key">
 22 |           <li class="info-list-item"
 23 |           v-for="(item, index) in list"
 24 |           :key="index"
 25 |           :data-index="index">
 26 |             <a :href="item.url">
 27 |               <img :src="item.src" :alt="item.name" />
 28 | 							<span class="">{{item.name}}</span>
 29 |             </a>
 30 |           </li>
 31 |         </ul>
 32 |       </div>
 33 |     <banner :banners="banners"></banner>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import Banner from '../parts/Banner'
 39 | 
 40 | export default {
 41 |   data () {
 42 |     return {
 43 |       bannerMenuFlag: false,
 44 |       menuTimer: '',
 45 |       listInfoData: [],
 46 |       menus: [
 47 |         {value: '手机 电话卡', url: 'https://www.mi.com/p/1915.html', type: 'phone'},
 48 |         {value: '电视 盒子', url: 'https://www.mi.com/a/h/9819.html', type: 'tv'},
 49 |         {value: '笔记本 平板', url: 'https://www.mi.com/a/h/7529.html', type: 'laptop'},
 50 |         {value: '家电 插线板', url: 'https://www.mi.com/p/9285.html', type: 'household'},
 51 |         {value: '出行 穿戴', url: 'https://www.mi.com/p/9289.html', type: 'wear'},
 52 |         {value: '智能 路由器', url: 'https://www.mi.com/a/h/8363.html', type: 'router'},
 53 |         {value: '电源 配件', url: 'https://www.mi.com/p/9290.html', type: 'power'},
 54 |         {value: '健康 儿童', url: 'https://www.mi.com/p/9291.html', type: 'health'},
 55 |         {value: '耳机 音箱', url: 'https://www.mi.com/p/9292.html', type: 'pods'},
 56 |         {value: '生活 箱包', url: 'https://www.mi.com/p/9293.html', type: 'life'}
 57 |       ],
 58 |       banners: [
 59 |         {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cefed8336bae62768afeeb6a3b8f55c8.jpg?w=2452&h=920', url: 'https://www.mi.com/redminote7/'},
 60 |         {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/743e04f29f920648b9d99b04a85ce343.jpg?w=2452&h=920', url: 'https://www.mi.com/a/h/11251.html'},
 61 |         {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d7d3f2df881cf62e5fafdada94f5018.jpg?w=2452&h=920', url: 'https://www.mi.com/mitvall-screen/e55c/'},
 62 |         {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg?w=2452&h=920', url: 'https://www.mi.com/washer-dryer-10/'},
 63 |         {src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1f0eb196c6c65a89ffba6efa4b5679c.jpg?w=2452&h=920', url: 'https://www.mi.com/a/h/11117.html'}
 64 |       ],
 65 |       phone: [
 66 |         {name:'Redmi Note 8 Pro', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e99f7f32923b2ef482338c08544000bb.png', url: 'http://www.mi.com/redminote8pro'},
 67 |         {name:'Redmi Note 8', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c20f8ee8bfff9b12c2c13f6b55a77abb.png', url: 'http://www.mi.com/redminote8'},
 68 |         {name: '小米CC9', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2b0d7d2c85734b80a1b8d1a4100c9c1f.png', url: 'https://www.mi.com/micc9/'},
 69 |         {name: '小米CC美图定制版', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/20e23b306f50384ab85b6658f5c963ff.jpg', url: 'https://www.mi.com/xiaomicc9mt'},
 70 |         {name: '小米CC9e', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d3ee15816d2ccbe922172033c3c3941.png', url: 'https://www.mi.com/micc9e'},
 71 |         {name: '小米9', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1cce3d767b8841c237cd610833799fe3.png', url: 'https://www.mi.com/mi9/'},
 72 |         {name: '小米9 SE', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ebff4a3d7ac1df43737d195cd38a2a37.png', url: 'https://www.mi.com/mi9se/'},
 73 |         {name: '小米MIX 3', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9e83fabc3efeb8dd9f880ce26220c294.png', url: 'https://www.mi.com/mix3/'},
 74 |         {name: '小米MIX 2S', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7ab17259cd65adb7222e856fa1996a34.png', url: 'https://www.mi.com/mix2s/'},
 75 |         {name: '小米Max 3', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fbb0bc35bd92d1fa8840762810a5cc84.png', url: 'https://www.mi.com/max3/'},
 76 |         {name: '黑鲨手机2 Pro', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eea579b45e6d01f214423c19ef76a459.png', url: 'https://item.mi.com/product/10000175.html'},
 77 |         {name: '黑鲨游戏手机 2', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82a363a6644bc3661ae5592726d4625e.jpg', url: 'https://www.mi.com/blackshark-game2/'},
 78 |         {name: 'Redmi K20 Pro', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b04a1e68b00130a879fa75865fb7c4b1.jpg', url: 'https://www.mi.com/redmik20pro/'},
 79 |         {name: 'Redmi K20', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb14154721f2b239a4eff12f28b8cd93.jpg', url: 'https://www.mi.com/redmik20/'},
 80 |         {name: 'Redmi 7A', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/85d746207b997873ddfcdca0da025f78.jpg', url: 'https://www.mi.com/redmi7a/'},
 81 |         {name: 'Redmi 7', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/265c87b03067bc11097db369e71bf976.png', url: 'https://www.mi.com/redmi7/'},
 82 |         {name: 'Redmi Note 7 Pro', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/26d1de72e958da75048be5c6cc0b73f6.jpg', url: 'https://www.mi.com/redminote7pro/'},
 83 |         {name: 'Redmi Note 7', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7c684a08a482a61b19c8d7f9b1113f5f.png', url: 'https://www.mi.com/redminote7/'},
 84 |         {name: '移动4G+专区', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5c483e65040470208823a8bfb5d73c27.jpg', url: 'https://www.mi.com/p/5592.html'},
 85 |         {name: '小米移动 电话卡', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/dafced4abb82c502c087a2aca7078f48.jpg', url: 'https://www.mi.com/mimobile/'},
 86 |         {name: '手机上门维修', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/84e19ece0125992449a6276e2ba333e9.png', url: 'https://item.mi.com/7532.html'},
 87 |         {name: '云服务空间月卡', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ade0163e9fdbd92a4b7d7ee3aeab905.jpg', url: 'https://item.mi.com/8262.html'},
 88 |         {name: '米粉卡 日租卡', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1a2ed8c7ac2ab7ebfd1554a7a1ac25a6.jpg', url: 'https://www.mi.com/micard'}
 89 |       ],
 90 |       tv: [
 91 |         {name: '米家激光投影电视', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d78230a2f48ecb44a30db910476acf7b.jpg', url: 'https://search.mi.com/search_%E6%BF%80%E5%85%89%E6%8A%95%E5%BD%B1%E7%94%B5%E8%A7%86'},
 92 |         {name: '小米壁画电视 65英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5732e8f317eb86bfcb174fbb49d00c4a.jpg', url: 'https://www.mi.com/arttv/'},
 93 |         {name: '小米全面屏电视', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8aeae36f5d088f22c84b8953bd0d08b4.jpg', url: 'https://search.mi.com/search_%E5%85%A8%E9%9D%A2%E5%B1%8F%E7%94%B5%E8%A7%86'},
 94 |         {name: '小米电视4A 32英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/820cba6c44f7263c5fe773a7ffaf85b9.png', url: 'https://www.mi.com/mitv4A/32/'},
 95 |         {name: '小米电视4A 43英寸青春版', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ea8be80c82c273e167d5b282b17e9b2b.png', url: 'https://www.mi.com/mitv4A/43y'},
 96 |         {name: '小米电视4A 49英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a9710af2fff5548ea05950473898ef0e.jpg', url: 'https://www.mi.com/mitv4A/49/'},
 97 |         {name: '小米电视4A 50英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2f15dd9779865b48bfa8c8e915ac75ac.png', url: 'https://www.mi.com/mitv4A/50'},
 98 |         {name: '小米电视4A 55英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37ce1615e1e8fcbbda2b3f37c09ec676.png', url: 'https://www.mi.com/mitv4A/55/'},
 99 |         {name: '小米电视4A 58英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/11e4d06f29877044ddce0f9fdd2e26d5.png', url: 'https://www.mi.com/mitv4A/58/'},
100 |         {name: '小米电视4A 65英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ca8058c9c776447265b99420ff04e544.png', url: 'https://www.mi.com/mitv4A/65/'},
101 |         {name: '小米电视4C 32英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/cb83515483547404cd26a962bada5d5b.png', url: 'https://www.mi.com/mitv4c/32/'},
102 |         {name: '小米电视4C 40英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/af572c503ed2a81ab71e2810617860c5.jpg', url: 'https://www.mi.com/mitv4c/40/'},
103 |         {name: '小米电视4C 43英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7bef124bc015669bdacf76d5d4b02a7e.png', url: 'https://www.mi.com/mitv4c/43/'},
104 |         {name: '小米电视4C 50英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/24ee18218b3b98161e17abe23c6fd539.png', url: 'https://www.mi.com/mitv4c/50/'},
105 |         {name: '小米电视4C 55英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fe603cc3b9c19903be14aac4e9b571d6.jpg', url: 'https://www.mi.com/mitv4c/55/'},
106 |         {name: '小米电视4X 43英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/53f3593ab87d90c4cc5201e10a5c42f7.png', url: 'https://www.mi.com/mitv4x/43/'},
107 |         {name: '小米电视4X 55英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/247f20519504afe5222b5a810e30fd14.png', url: 'https://www.mi.com/mitv4x/55/'},
108 |         {name: '小米电视4X 65英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/0df6f56ead57cb5a90f6b81a21fb5261.jpg', url: 'https://item.mi.com/9666.html'},
109 |         {name: '小米电视4 55英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f89f8c92035e635b64a2f4a0c3ca8a9b.png', url: 'https://www.mi.com/mitv4/55/'},
110 |         {name: '小米电视4 65英寸旗舰版', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/823ff82753067c5651cc70c8daf3021d.jpg', url: 'https://www.mi.com/mitv4/65aio/'},
111 |         {name: '小米电视4 75英寸', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/45d9675f31b2c22e286284e62de35f7d.jpg', url: 'https://www.mi.com/mitv4/75/'},
112 |         {name: '小米电视4S', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/46be9462fab23618500fda14e7e07e0f.png', url: 'https://search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%94%B5%E8%A7%864s'},
113 |         {name: '小米电视 体育版', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/16278c189bb0ba0d12aae41c278fa5a1.png', url: 'https://search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%94%B5%E8%A7%86%20%E4%BD%93%E8%82%B2%E7%89%88'},
114 |         {name: '小米盒子', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/554a4f8ea0c2c3ed19d843bea7321203.jpg', url: 'https://search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%9B%92%E5%AD%90'}
115 |       ],
116 |       laptop: [
117 |         {name: '小米笔记本 15.6"', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d28f298362ba20046db1dbb0c8eb5e70.jpg', url: 'https://search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%AC%94%E8%AE%B0%E6%9C%AC%2015.6'},
118 |         {name: '小米笔记本 13.3"', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1f95bb7c9206951e3d870cb5581b8329.png', url: 'https://search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%AC%94%E8%AE%B0%E6%9C%AC%2013.3'},
119 |         {name: '小米笔记本 12.5"', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/eaab0db21859e0e58cae1fb807907905.jpg', url: 'https://search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%AC%94%E8%AE%B0%E6%9C%AC%2012.5'},
120 |         {name: 'RedmiBook 14', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a3c149225946312f2b4bbe1263f65450.png', url: 'https://www.mi.com/redmibook14/'},
121 |         {name: '小米游戏本', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a66c24ee8ae2efea3ae92ec455a27352.jpg', url: 'https://search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%AC%94%E8%AE%B0%E6%9C%AC%E6%B8%B8%E6%88%8F%E6%9C%AC'},
122 |         {name: '小米平板4', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/131e5d409e62eedb94577cae11c530f1.jpg', url: 'https://www.mi.com/mipad4/'},
123 |         {name: '键盘', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/03c3afaa26624708921a2875b293e866.jpg', url: 'https://search.mi.com/search_%E9%94%AE%E7%9B%98'},
124 |         {name: '鼠标／鼠标垫', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c61933e7ac89c61bc727c275391e82e0.png', url: 'https://search.mi.com/search_%E9%BC%A0%E6%A0%87'},
125 |         {name: '转接器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/62f36168a0fb318102ff74ab65e6a8fc.jpg', url: 'https://search.mi.com/search_%E8%BD%AC%E6%8E%A5%E5%99%A8'},
126 |         {name: '平板配件', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/32bfcdebff3058de7bc0b2855d05c240.jpg', url: 'https://search.mi.com/search_%E7%AC%94%E8%AE%B0%E6%9C%AC%E5%B9%B3%E6%9D%BF%E9%85%8D%E4%BB%B6'},
127 |         {name: '笔记本双肩包', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a23f28ad195aa93679012c785db11fc2.jpg', url: 'https://search.mi.com/search_%E7%AC%94%E8%AE%B0%E6%9C%AC%E5%8F%8C%E8%82%A9%E5%8C%85'},
128 |         {name: '小米笔记本内胆包', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/48ec2200729879ed3e3bc01b61146d79.jpg', url: 'https://list.mi.com/accessories/tag?id=neidanbao'}
129 |       ],
130 |       household: [
131 |         {name: '米家立式空调', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/96de94415b860f3de95b2d6294f0d0fd.png', url: 'https://www.mi.com/aircondition-f/f3c1/'},
132 |         {name: '米家空调', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/630b9e523bb2e1387ce6c7be1edaca18.png', url: 'https://search.mi.com/search_%E4%BA%92%E8%81%94%E7%BD%91%E7%A9%BA%E8%B0%83'},
133 |         {name: '滚筒洗衣机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/18723c3561252ce76c9a1b1eebc4c01c.png', url: 'https://search.mi.com/search_%E6%BB%9A%E7%AD%92%E6%B4%97%E8%A1%A3%E6%9C%BA'},
134 |         {name: 'Redmi全自动波轮洗衣机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d3bace6e62cecb7901e306b05502535f.jpg', url: 'https://search.mi.com/search_%E6%B3%A2%E8%BD%AE%E6%B4%97%E8%A1%A3%E6%9C%BA'},
135 |         {name: '净水器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/12f4b26ced3716d07bfcc6beba751188.jpg', url: 'https://search.mi.com/search_%E5%87%80%E6%B0%B4%E5%99%A8'},
136 |         {name: '净水器滤芯', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d38c628865341057d6e19a3a6a4ab88e.png', url: 'https://search.mi.com/search_%E5%87%80%E6%B0%B4%E5%99%A8%E6%BB%A4%E8%8A%AF'},
137 |         {name: '扫地机器人', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/603beb09930e32addd1b362bf43c7ac2.jpg', url: 'https://www.mi.com/roomrobot/?cfrom=search'},
138 |         {name: '吸尘器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/26deda5474eb7eb7e5b34547c58b9893.jpg', url: 'https://www.mi.com/vacuum-cleaner/'},
139 |         {name: '空气净化器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e997ed31cd5199ec0a24eeb48a37b1e7.jpg', url: 'https://search.mi.com/search_%E7%A9%BA%E6%B0%94%E5%87%80%E5%8C%96%E5%99%A8'},
140 |         {name: '电饭煲', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/390e15818dd103b2f96f4ac742d47379.jpg', url: 'https://search.mi.com/search_%E7%94%B5%E9%A5%AD%E7%85%B2'},
141 |         {name: '电磁炉', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d93e6a98403262a506c9e9b22293cdae.jpg', url: 'https://search.mi.com/search_%E7%94%B5%E7%A3%81%E7%82%89'},
142 |         {name: '厨房用具', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b945d8524ca8497b899f04ef957b71ec.jpg', url: 'https://search.mi.com/search_%E7%9F%A5%E5%90%BE%E7%85%AE'},
143 |         {name: '电水壶', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/39c8ccbebd08687bc6780373b7ef2a95.jpg', url: 'https://search.mi.com/search_%E7%94%B5%E6%B0%B4%E5%A3%B6'},
144 |         {name: '滤水壶', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9ffcebcacca008ed2d92a692f7312ef6.jpg', url: 'https://search.mi.com/search_%E6%BB%A4%E6%B0%B4%E5%A3%B6'},
145 |         {name: '落地风扇', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3a3e4238b70ef8db89ae77f8a3762fc8.png', url: 'https://search.mi.com/search_%E8%90%BD%E5%9C%B0%E9%A3%8E%E6%89%87'},
146 |         {name: '投影仪', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c12fd1da9fed662842d6f5c57d7737c9.png', url: 'https://www.mi.com/projection-youth/'},
147 |         {name: '灯具', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c0a6b523433a492dbf32035b2983d98e.jpg', url: 'https://search.mi.com/search_%E7%81%AF%E5%85%B7'},
148 |         {name: '插线板', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d1c8cfb055709db380c6de981a4c894b.jpg', url: 'https://search.mi.com/search_%E6%8F%92%E6%8E%92'},
149 |         {name: '新风机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/1cc417a7cae8c4ff8b0041fa29003717.jpg', url: 'https://search.mi.com/search_%E6%96%B0%E9%A3%8E%E6%9C%BA'},
150 |         {name: '电暖器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6aa1871d84aaae98cd676f5e2cf5c2f2.jpg', url: 'https://item.mi.com/product/9145.html'},
151 |         {name: '电压力锅', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ba8d2a2d383f612575d323ce159bdce3.jpg', url: 'https://item.mi.com/1190200053.html'},
152 |         {name: '料理机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/0bf0ba35dc3ad57115c59f0ebde0fd1d.jpg', url: 'https://search.mi.com/search_%E6%96%99%E7%90%86%E6%9C%BA'},
153 |         {name: '电煮壶', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b7de8a5bc64975df73f5fde5507fc8d1.jpg', url: 'https://item.mi.com/product/9529.html'}
154 |       ],
155 |       wear: [
156 |         {name: '手环手表', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4dd7eeff34b478acd2cf3eec99b78c96.png', url: 'https://search.mi.com/search_%E6%89%8B%E7%8E%AF%E6%89%8B%E8%A1%A8'},
157 |         {name: 'VR', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fece041c17bdebaab5f3a9313c7c0f8c.jpg', url: 'https://search.mi.com/search_vr'},
158 |         {name: '平衡车', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/50180b158690a40f9cbc684c7646d297.jpg', url: 'https://search.mi.com/search_%E5%B9%B3%E8%A1%A1%E8%BD%A6'},
159 |         {name: '滑板车', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4e9da27ebbeeb38078910c97173c4671.jpg', url: 'https://search.mi.com/search_%E6%BB%91%E6%9D%BF%E8%BD%A6'},
160 |         {name: '车载逆变器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/601f0b54e805d769ab6dc1bdea93706d.jpg', url: 'https://search.mi.com/search_%E8%BD%A6%E8%BD%BD%E9%80%86%E5%8F%98%E5%99%A8'},
161 |         {name: '平衡车配件', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ac5b263aac2ffa1894fb7b215c3ce87.jpg', url: 'https://search.mi.com/search_%E5%B9%B3%E8%A1%A1%E8%BD%A6%E9%85%8D%E4%BB%B6'},
162 |         {name: '智能后视镜', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/971c8c01a246c7ac69a4c9be9e77e832.jpg', url: 'https://search.mi.com/search_%E5%90%8E%E8%A7%86%E9%95%9C'},
163 |         {name: '智能记录仪', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e2748064a9ac9969e53851479d55f1a9.jpg', url: 'https://search.mi.com/search_%E8%AE%B0%E5%BD%95%E4%BB%AA'},
164 |         {name: '车载空气净化器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e73568f1bfc9b92fb0302c0a1538f181.jpg', url: 'https://search.mi.com/search_%E8%BD%A6%E8%BD%BD%E7%A9%BA%E6%B0%94%E5%87%80%E5%8C%96%E5%99%A8'},
165 |         {name: '无线车充', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/efd04d4a90822e7e2f04a365083f2607.jpg', url: 'https://item.mi.com/product/9357.html'},
166 |         {name: '充气宝', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8b398bad185dddb5397f2c0d9a3f6271.jpg', url: 'https://item.mi.com/product/9613.html'},
167 |         {name: '平衡轮', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6d92b9db10f261f56b2f2dfb93ca132e.jpg', url: 'https://item.mi.com/product/10003.html'}
168 |       ],
169 |       router: [
170 |         {name: '打印机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5ef6c2d63df78e140afab6ac3c088fac.jpg', url: 'https://search.mi.com/search_%E6%89%93%E5%8D%B0%E6%9C%BA'},
171 |         {name: '路由器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/50b4287ee78e7f190c5603ad7ce7e5d6.jpg', url: 'https://www.mi.com/a/h/8363.html'},
172 |         {name: '智能家庭', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/14107363b5dc77b18e9983bda999931d.jpg', url: 'https://search.mi.com/search_%E6%99%BA%E8%83%BD%E5%AE%B6%E5%BA%AD'},
173 |         {name: '对讲机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/21fedf7ba9019bce59cbc4856f907076.jpg', url: 'https://search.mi.com/search_%E5%AF%B9%E8%AE%B2%E6%9C%BA'},
174 |         {name: '无人机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9f50ae9f7f38378e057462483c8cf65f.jpg', url: 'https://search.mi.com/search_%E6%97%A0%E4%BA%BA%E6%9C%BA'},
175 |         {name: '摄像机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg', url: 'https://search.mi.com/search_%E6%91%84%E5%83%8F%E6%9C%BA'},
176 |         {name: '照相机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/81d89cfdb72d0445ed4ef19942d9dedb.jpg', url: 'https://search.mi.com/search_%E7%85%A7%E7%9B%B8%E6%9C%BA'},
177 |         {name: '智能门锁', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4fb7885d49255b93f7245aa53501294c.jpg', url: 'https://search.mi.com/search_%E9%97%A8%E9%94%81'},
178 |         {name: '视频门铃', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/feaab5bd13257dbe8f30b80b6a4472be.jpg', url: 'https://search.mi.com/search_%E9%97%A8%E9%93%83'},
179 |         {name: '小爱老师', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/90b75c1046e486c19f14effd9b45f488.png', url: 'https://search.mi.com/search_%E5%B0%8F%E7%88%B1%E8%80%81%E5%B8%88'},
180 |         {name: '小爱音箱', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d5963e212402fa5ebd2e71dd10c426c.jpg', url: 'https://search.mi.com/search_%E5%B0%8F%E7%88%B1%E9%9F%B3%E7%AE%B1'}
181 |       ],
182 |       power: [
183 |         {name: '移动电源', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/91e56808d5c6f4fb7e9d41590f8b889c.jpg', url: 'https://search.mi.com/search_%E5%85%85%E7%94%B5%E5%AE%9D'},
184 |         {name: '数据线', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/45dd7a2c4fc3d17d5d261ed3eed7cd15.jpg', url: 'https://search.mi.com/search_usb%E6%95%B0%E6%8D%AE%E7%BA%BF'},
185 |         {name: '车充', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/397d8119508e8e3c895fc30ece88e799.jpg', url: 'https://search.mi.com/search_%E8%BD%A6%E8%BD%BD%E5%85%85%E7%94%B5%E5%99%A8'},
186 |         {name: '无线充', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/18d288107e1a72ad3c7b3aa66a1dc780.jpg', url: 'https://search.mi.com/search_%E6%97%A0%E7%BA%BF%E5%85%85%E7%94%B5%E5%99%A8'},
187 |         {name: '电池', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/10ec831749f1c657fc0a494feab15ed4.jpg', url: 'https://search.mi.com/search_%E5%BD%A9%E8%99%B9%E7%94%B5%E6%B1%A0'},
188 |         {name: '自拍杆', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2725e04c955dc060ac142fabbf809c1e.jpg', url: 'https://search.mi.com/search_%E8%87%AA%E6%8B%8D%E6%9D%86'},
189 |         {name: '手机壳', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5c6e60e48edf17219724faad95963b93.jpg', url: 'https://list.mi.com/8-0-0-0-0-0-0-0-1'},
190 |         {name: '手机贴膜', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e9e248c899fd895c9267f494ea1aaebf.jpg', url: 'https://list.mi.com/9'},
191 |         {name: '手机支架', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/826264a4845f45a0a503600f9331ab06.jpg', url: 'https://item.mi.com/1162000043.html?cfrom=search'},
192 |         {name: '平板配件', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6ce8ff4bc1e6ded2d40c53b2aa83b98c.jpg', url: 'https://search.mi.com/search_%E5%B9%B3%E6%9D%BF%E9%85%8D%E4%BB%B6'},
193 |         {name: '黑鲨配件', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9c3ead590f49767a4f562b7285215f5e.jpg', url: 'https://search.mi.com/search_%E9%BB%91%E9%B2%A8%E9%85%8D%E4%BB%B6'},
194 |         {name: '其他配件', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/57d9989807dbc15c1a82bc49acc1f06f.jpg', url: 'https://search.mi.com/search_%E5%85%B6%E4%BB%96%E7%94%B5%E6%BA%90%E9%85%8D%E4%BB%B6'}
195 |       ],
196 |       health: [
197 |         {name: '洗手机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/da43c3dd6b171ee267f1fd1ec01b9208.jpg', url: 'https://www.mi.com/dispenser/'},
198 |         {name: '剃须刀', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/60d7bdf307ceaba08b3275246ad3ab53.jpg', url: 'https://search.mi.com/search_%E5%89%83%E9%A1%BB%E5%88%80'},
199 |         {name: '日光镜', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/320c12a501b40fa1d69d0ca3a4303129.jpg', url: 'https://item.mi.com/product/9235.html'},
200 |         {name: '牙刷', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/15447769c461fdc71e84a7badb83f09b.jpg', url: 'https://search.mi.com/search_%E7%89%99%E5%88%B7'},
201 |         {name: '吹风机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bba7ce79f4d61939c69b7a26bf507bae.jpg', url: 'https://item.mi.com/1184700005.html'},
202 |         {name: '体重秤', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/459afd0eb2a3bc6313e7ac62bd3a52df.png', url: 'https://search.mi.com/search_%E4%BD%93%E9%87%8D%E7%A7%A4'},
203 |         {name: '体脂秤', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fe6166ca2026008abb86bc67dfd8211d.jpg', url: 'https://search.mi.com/search_%E4%BD%93%E8%84%82%E7%A7%A4'},
204 |         {name: '早教启智', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2cb10391d6527bf64126a63446a38e2e.jpg', url: 'https://search.mi.com/search_%E6%97%A9%E6%95%99%E5%90%AF%E6%99%BA'},
205 |         {name: '遥控电动', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ab36232a1004421e1a5b3efd0b9226c0.jpg', url: 'https://search.mi.com/search_%E5%84%BF%E7%AB%A5%E9%81%A5%E6%8E%A7'},
206 |         {name: '益智积木', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c9a5feb1f6c9b9aa0dc998c17e5eb3e9.jpg', url: 'https://search.mi.com/search_%E7%9B%8A%E6%99%BA%E7%A7%AF%E6%9C%A8'},
207 |         {name: '儿童手表', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0b3a592784632760a7ef25de50147a7.jpg', url: 'https://search.mi.com/search_%E5%84%BF%E7%AB%A5%E6%89%8B%E8%A1%A8'},
208 |         {name: '儿童滑板车', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9f6a34ed8071b821ee5aa8d32a7be95d.jpg', url: 'https://search.mi.com/search_%E5%84%BF%E7%AB%A5%E6%BB%91%E6%9D%BF%E8%BD%A6'},
209 |         {name: '米兔拉杆箱', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a2c84adc7a3620d222346068528da1b5.jpg', url: 'https://item.mi.com/product/8878.html'},
210 |         {name: '自行车', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8f200595fe0a6b4b67291970f25e4f02.jpg', url: 'https://item.mi.com/10491.html'},
211 |         {name: '婴儿推车', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/12235daeb49fd45e709e68c7dacd3336.jpg', url: 'https://item.mi.com/product/9029.html'},
212 |         {name: '儿童书包', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d55c8943ceac7cd5ac7d8aa052f69b93.jpg', url: 'https://item.mi.com/product/10000130.html'},
213 |         {name: '婴儿理发器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/17d625c8b5466b9527e9c06c71601939.jpg', url: 'https://item.mi.com/product/9315.html'},
214 |         {name: '儿童保温杯', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/81737be7672dfa85cbb3abc65669f091.jpg', url: 'https://item.mi.com/product/9317.html'},
215 |         {name: '走步机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fb1fee7e2f2963baae34d3611a2b7e9f.jpg', url: 'https://www.mi.com/treadmill/?cfrom=search'},
216 |         {name: '点读笔', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ccdce424f41806f775693748058fa2ca.jpg', url: 'https://item.mi.com/product/9834.html'}
217 |       ],
218 |       pods: [
219 |         {name: '小米小爱音箱 Play版', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d5963e212402fa5ebd2e71dd10c426c.jpg', url: 'https://www.mi.com/aispeaker-play'},
220 |         {name: '线控耳机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8b3d235f4a5a5bf5c9d8d066d2166e6c.jpg', url: 'https://search.mi.com/search_%E7%BA%BF%E6%8E%A7%E8%80%B3%E6%9C%BA'},
221 |         {name: '蓝牙耳机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/649f781dd8595272ac3885f064205114.jpg', url: 'https://search.mi.com/search_%E8%93%9D%E7%89%99%E8%80%B3%E6%9C%BA'},
222 |         {name: '头戴耳机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/28a77451da1dbd0d3e42d529777997c3.jpg', url: 'https://search.mi.com/search_%E5%A4%B4%E6%88%B4%E8%80%B3%E6%9C%BA'},
223 |         {name: '品牌耳机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4885bda69e45b870a5bcf5bbaea1548b.jpg', url: 'https://search.mi.com/search_%E5%93%81%E7%89%8C%E8%80%B3%E6%9C%BA'},
224 |         {name: '蓝牙音箱', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f7c7a9d73fb7b3cf93d3ae0dc2849f5e.jpg', url: 'https://search.mi.com/search_%E8%93%9D%E7%89%99%E9%9F%B3%E7%AE%B1'},
225 |         {name: '小米AI音箱', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/db89d422ef877cf7290616fef515e413.jpg', url: 'https://www.mi.com/aispeaker/'},
226 |         {name: '小米小爱音箱HD', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4df2fa022495e79f890a943a9d7e70a5.jpg', url: 'https://item.mi.com/product/9151.html'},
227 |         {name: 'k歌耳机', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a290d924c1bbd1e3ce64e96f497d4059.jpg', url: 'https://search.mi.com/search_k%E6%AD%8C%E8%80%B3%E6%9C%BA'},
228 |         {name: '小爱音箱 万能遥控版', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/cebeb2536e051c4792b57c07bf404c21.jpg', url: 'https://www.mi.com/aispeaker-control/?cfrom=search'},
229 |         {name: '小爱触屏音箱', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/abe665fafbef94eb3626ae8baf1de97e.jpg', url: 'https://www.mi.com/aispeaker-touch/?cfrom=search'}
230 |       ],
231 |       life: [
232 |         {name: '双肩包', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f628feba0f2f8253f9cc41f9984194a7.jpg', url: 'https://search.mi.com/search_%E5%8F%8C%E8%82%A9%E5%8C%85'},
233 |         {name: '钱包', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5763f4e2fd983cd30d4976cc438f9d1e.jpg', url: 'https://search.mi.com/search_%E9%92%B1%E5%8C%85'},
234 |         {name: '旅行箱', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ae3df443bfe6b9e634e8957264f6060c.jpg', url: 'https://search.mi.com/search_%E6%97%85%E8%A1%8C%E7%AE%B1'},
235 |         {name: '运动鞋', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e899d08e36c306570d4fe3c75df90a42.jpg', url: 'https://search.mi.com/search_%E8%BF%90%E5%8A%A8%E9%9E%8B'},
236 |         {name: '服饰', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/57d894d9d776e1bcb81681720e4294a9.jpg', url: 'https://search.mi.com/search_%E8%A1%A3%E7%89%A9'},
237 |         {name: '眼镜', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d521bd58668f66c50562b8fa8949f67c.jpg', url: 'https://search.mi.com/search_%E7%9C%BC%E9%95%9C'},
238 |         {name: '床垫', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/aba45662667dceaf4ba0e5b08f44d3a7.jpg', url: 'https://search.mi.com/search_%E5%BA%8A%E5%9E%AB'},
239 |         {name: '枕头', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/744306b95df4d130bdfc346ff2b3c871.png', url: 'https://search.mi.com/search_%E6%9E%95%E5%A4%B4'},
240 |         {name: '沙发', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a991c859604a4960744643eccde76c56.png', url: 'https://search.mi.com/search_%E6%B2%99%E5%8F%91'},
241 |         {name: '饰品', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d24d3886ab3d6b6187cb8a15db3308f4.jpg', url: 'https://search.mi.com/search_%E9%A5%B0%E5%93%81'},
242 |         {name: '螺丝刀', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/458169c8138413666feb860068ce1a56.jpg', url: 'https://search.mi.com/search_%E8%9E%BA%E4%B8%9D%E5%88%80'},
243 |         {name: '保温杯', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/813d173eff50a83abb8abd5abde5f5a6.jpg', url: 'https://item.mi.com/1174800007.html?cfrom=search'},
244 |         {name: '伞', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/395ffd04841f70b8bdf67339ba1dfc98.jpg', url: 'https://item.mi.com/product/6124.html'},
245 |         {name: '驱蚊器', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/59d3a701ac0bbb78f1b1d0ea7ebc7505.jpg', url: 'https://search.mi.com/search_%E9%A9%B1%E8%9A%8A%E5%99%A8'},
246 |         {name: '尤克里里', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2cb85b96b12395fdaa7bccaf8f94e758.jpg', url: 'https://item.mi.com/product/7716.html'},
247 |         {name: '毛巾/浴巾', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/21c3ec8638dd75f5c54f1a69864a1cc9.jpg', url: 'https://search.mi.com/search_%E6%AF%9B%E5%B7%BE'},
248 |         {name: '米兔', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/972026cd032be6da4093358f70c3f6ba.jpg', url: 'https://search.mi.com/search_%E7%B1%B3%E5%85%94'},
249 |         {name: '笔', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c9279a17e9399958420af64e449e3214.jpg', url: 'https://search.mi.com/search_%E7%AC%94'},
250 |         {name: '床', src: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e73794f2d870970b6d4acd9ce39c0f2b.jpg', url: 'https://item.mi.com/product/10000160.html'}
251 |       ]
252 |     }
253 |   },
254 |   methods: {
255 |     bannerMenuHide () {
256 |       this.menuTimer = setTimeout(() => {
257 | 				this.bannerMenuFlag = false;
258 | 			}, 300);
259 |     },
260 |     bannerMenuShow (type) {
261 |       if (type) {
262 |         this.listInfoData = this[type];
263 |       }
264 | 
265 |       this.bannerMenuFlag = true;
266 |       clearTimeout(this.menuTimer);
267 |     }
268 |   },
269 |   computed: {
270 |     menuListMatch () {
271 |       if (this.listInfoData && this.listInfoData.length) {
272 |         const matchData = [];
273 |         for (let i = 0; i < this.listInfoData.length; i += 6) {
274 |           matchData.push(this.listInfoData.slice(i, i + 6));
275 |         }
276 |         return matchData;
277 |       }
278 |     }
279 |   },
280 |   components: {
281 |     'Banner': Banner
282 |   }
283 | }
284 | </script>
285 | 
286 | <style lang="less">
287 |   .menu-banner {
288 |     position: relative;
289 |     width: 1226px;
290 |     height: auto;
291 |     margin: 0 auto;
292 |     .menu-container {
293 |       position: absolute;
294 |       left: 0;
295 |       top: 0;
296 |       width: 235px;
297 |       height: auto;
298 |       background: rgba(0, 0, 0, 0.3);
299 |       z-index: 10;
300 |     }
301 |   }
302 | 
303 |   .menu-list {
304 |     padding: 20px 0;
305 |     height: 460px;
306 |     .list-item {
307 |       display: flex;
308 |       padding-left: 30px;
309 |       &:hover {
310 |         background-color: #ff6700;
311 |       }
312 | 
313 |       a {
314 |         position: relative;
315 |         display: inline-block;
316 |         width: 170px;
317 |         height: 42px;
318 |         line-height: 42px;
319 |         color: #fff;
320 |         text-align: left;
321 |         background-color: transparent;
322 |       }
323 | 
324 |       i {
325 |         font-size: 22px;
326 |         color: #e0e0e0;
327 |         line-height: 42px;
328 |       }
329 |     }
330 |   }
331 | 
332 |   .menu-info {
333 |     position: absolute;
334 |     display: flex;
335 |     flex-flow: row nowrap;
336 |     justify-content: flex-start;
337 |     left: 235px;
338 |     top: 0;
339 |     z-index: 11;
340 |     border: 1px solid #e0e0e0;
341 |     box-shadow: 3px 8px 16px rgba( 0, 0, 0, 0.18);
342 |     .menu-info-list {
343 |       width: 248px;
344 |       height: 458px;
345 |       margin: 0;
346 |       padding: 0;
347 |       list-style: none;
348 |       background: #fff;
349 |       a {
350 |         display: flex;
351 |         padding: 18px 20px;
352 |         line-height: 40px;
353 |         color: #333;
354 |         img {
355 |           width: 40px;
356 |           height: 40px;
357 |           margin-right: 12px;
358 |           vertical-align: middle;
359 |         }
360 | 
361 |         span {
362 |           width: 172px;
363 |           line-height: 40px;
364 |           font-size: 14px;
365 |           text-align: start;
366 |           white-space: nowrap;
367 |           text-overflow: ellipsis;
368 |           overflow: hidden;
369 |         }
370 | 
371 |         &:hover {
372 |           span {
373 |             color: #ff6700;
374 |           }
375 |         }
376 |       }
377 |     }
378 |   }
379 | </style>


--------------------------------------------------------------------------------
/src/components/SiteFooter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="site-footer">
  3 |     <ul class="site-service">
  4 |       <li class="service-item"
  5 |       v-for="(item, index) in serviceInfo"
  6 |       :key="index">
  7 |         <a :href="item.url" target="_blank">
  8 |           <i :class="item.font"></i>
  9 |           <span>{{item.value}}</span>
 10 |         </a>
 11 |       </li>
 12 |     </ul>
 13 |     <div class="site-link">
 14 |       <div class="links">
 15 |         <div class="link-container"
 16 |         v-for="(list, key) in serviceLink"
 17 |         :key="key">
 18 |           <span class="link-title">{{list.value}}</span>
 19 |           <ul class="link-list">
 20 |             <li class="link-item"
 21 |             v-for="(item, index) in list.subLinks"
 22 |             :key="index">
 23 |               <a :href="item.url" @click="showWindow" v-if="item.value === '官方微信'">
 24 |                 {{item.value}}
 25 |               </a>
 26 |               <a :href="item.url" target="_blank" v-else>
 27 |                 {{item.value}}
 28 |               </a>
 29 |             </li>
 30 |           </ul>
 31 |         </div>
 32 |       </div>
 33 |       <div class="link-contact">
 34 |         <p class="phone">400-100-5678</p>
 35 |         <p class="desc">周一至周日 8:00-18:00<br>（仅收市话费）</p>
 36 |         <a href="https://support.kefu.mi.com/" target="_blank">
 37 |           <i class="iconfont icon-icon-test1"></i>
 38 |           <span>人工客服</span>
 39 |         </a>
 40 |       </div>
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import bus from '@/bus.js'
 47 | 
 48 | export default {
 49 |   data () {
 50 |     return {
 51 |       serviceInfo: [
 52 |         {value: '预约维修服务', font:'iconfont icon-buoumaotubiao46', url: 'https://www.mi.com/static/fast/'},
 53 |         {value: '7天无理由退货', font:'iconfont icon-7tianwuliyoutuihuo', url: 'https://www.mi.com/service/exchange#back'},
 54 |         {value: '15天免费换货', font:'iconfont icon-15tianwuliyoutuihuo', url: 'https://www.mi.com/service/exchange#back'},
 55 |         {value: '满150元包邮', font:'iconfont icon-liwu', url: 'https://www.mi.com/service/buy/postage/'},
 56 |         {value: '520余家售后网点', font:'iconfont icon-icon-test', url: 'https://www.mi.com/static/maintainlocation/'}
 57 |       ],
 58 |       serviceLink: [
 59 |         {value: '帮助中心', subLinks: [
 60 |           {value: '账户管理', url: 'https://www.mi.com/service/account/Account%20registration/'},
 61 |           {value: '购物指南', url: 'https://www.mi.com/service/buy/SalesTime/'},
 62 |           {value: '订单操作', url: 'https://www.mi.com/service/order/sendprogress/'}
 63 |         ]},
 64 |         {value: '服务支持', subLinks: [
 65 |           {value: '售后政策', url: 'https://www.mi.com/service/exchange'},
 66 |           {value: '自助服务', url: 'https://www.mi.com/service/'},
 67 |           {value: '相关下载', url: 'https://www.mi.com/c/service/download/'}
 68 |         ]},
 69 |         {value: '线下门店', subLinks: [
 70 |           {value: '小米之家', url: 'https://www.mi.com/c/xiaomizhijia/'},
 71 |           {value: '服务网点', url: 'https://www.mi.com/static/maintainlocation/'},
 72 |           {value: '授权体验店', url: 'https://www.mi.com/static/familyLocation/'}
 73 |         ]},
 74 |         {value: '关于小米', subLinks: [
 75 |           {value: '了解小米', url: 'https://www.mi.com/about/'},
 76 |           {value: '加入小米', url: 'https://hr.xiaomi.com/'},
 77 |           {value: '投资者关系', url: 'https://company.mi.com/zh-cn/ir/indexContent/index.html'}
 78 |         ]},
 79 |         {value: '关注我们', subLinks: [
 80 |           {value: '新浪微博', url: 'https://weibo.com/xiaomishangcheng'},
 81 |           {value: '官方微信', url: 'javascript:void(0);'},
 82 |           {value: '联系我们', url: 'https://www.mi.com/about/contact/'}
 83 |         ]},
 84 |         {value: '特色服务', subLinks: [
 85 |           {value: 'F 码通道', url: 'https://www.mi.com/order/fcode'},
 86 |           {value: '礼物码', url: 'https://www.mi.com/order/giftcode'},
 87 |           {value: '防伪查询', url: 'https://order.mi.com/service/imei'}
 88 |         ]}
 89 |       ]
 90 |     }
 91 |   },
 92 |   methods: {
 93 |     showWindow () {
 94 |       bus.$emit('weChatWindowEvent', true);
 95 |     }
 96 |   }
 97 | }
 98 | </script>
 99 | 
100 | <style lang="less">
101 |   .site-footer {
102 |     position: relative;
103 |     width: 1226px;
104 |     height: auto;
105 |     margin: 0 auto;
106 |     .site-service {
107 |       display: flex;
108 |       padding: 27px 0;
109 |       border-bottom: 1px solid #e0e0e0;
110 |     }
111 | 
112 |     .site-link {
113 |       display: flex;
114 |       justify-content: space-between;
115 |       padding: 40px 0;
116 |       .links {
117 |         display: flex;
118 |       }
119 |     }
120 |   }
121 | 
122 |   .service-item {
123 |     width: 19.8%;
124 |     height: 25px;
125 |     border-left: 1px solid #e0e0e0;
126 |     font-size: 16px;
127 |     line-height: 25px;
128 |     text-align: center;
129 |     &:first-child {
130 |       border-left: none;
131 |     }
132 | 
133 |     a {
134 |       color: #616161;
135 |       transition: color .2s;
136 |       &:hover {
137 |         color: #ff6709;
138 |       }
139 |       i {
140 |         margin-right: 6px;
141 |         font-size: 24px;
142 |         line-height: 24px;
143 |         vertical-align: -4px;
144 |       }
145 | 
146 |       span {
147 |         font-size: 16px;
148 |         line-height: 25px;
149 |       }
150 |     }
151 |   }
152 | 
153 |   .link-container {
154 |     width: 160px;
155 |     height: 112px;
156 |     margin: 0;
157 |     text-align: left;
158 |     .link-title {
159 |       display: block;
160 |       margin: -1px 0 26px;
161 |       font-size: 14px;
162 |       line-height: 1.25;
163 |       color: #424242;
164 |     }
165 | 
166 |     .link-list, .link-item {
167 |       margin: 10px 0 0;
168 |       font-size: 12px;
169 |       a {
170 |         color: #757575;
171 |         transition: color .2s;
172 |         &:hover {
173 |           color: #ff6709;
174 |         }
175 |       }
176 |     }
177 |   }
178 | 
179 |   .link-contact {
180 |     width: 256px;
181 |     height: 112px;
182 |     border-left: 1px solid #e0e0e0;
183 |     text-align: center;
184 |     color: #616161;
185 |     .phone {
186 |       margin: 0 0 5px;
187 |       font-size: 22px;
188 |       line-height: 1;
189 |       color: #ff6700;
190 |     }
191 | 
192 |     .desc {
193 |       margin: 0 0 16px;
194 |       font-size: 12px;
195 |     }
196 | 
197 |     a {
198 |       display: inline-flex;
199 |       justify-content: center;
200 |       width: 118px;
201 |       height: 28px;
202 |       font-size: 12px;
203 |       line-height: 28px;
204 |       border: 1px solid #ff6700;
205 |       background: #fff;
206 |       color: #ff6700;
207 |       transition: all .4s;
208 |       &:hover {
209 |         color: #fff;
210 |         background-color: #f25807;
211 |         border-color: #f25807;
212 |       }
213 |     }
214 |   }
215 | </style>


--------------------------------------------------------------------------------
/src/components/SiteInfo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="site-info">
  3 |     <div class="info-container">
  4 |       <div class="logo-footer">
  5 |         <img src="../assets/image/logo-footer.png">
  6 |       </div>
  7 |       <div class="info-footer">
  8 |         <ul class="info-link">
  9 |           <li class="info-item" v-for="(item, index) in footerNavs" :key="index">
 10 |             <template v-if="item.value === 'Select Location'">
 11 |               <a :href="item.url" @click="showLocationWindow">{{item.value}}</a>
 12 |             </template>
 13 |             <template v-else>
 14 |               <a :href="item.url" target="_blank">{{item.value}}</a>
 15 |               <span class="nav-span">|</span>
 16 |             </template>
 17 |           </li>
 18 |         </ul>
 19 |         <div class="info-license">
 20 |           <template v-for="(item, index) in licenseInfo">
 21 |             <template v-if="item.url">
 22 |               <a :key="index" :href="item.url">{{item.value}}</a>
 23 |             </template>
 24 |             <template v-else>
 25 |               <span :key="index">{{item.value}}</span>
 26 |             </template>
 27 |             <br :key="item.id" v-if="item.br">
 28 |           </template>
 29 |         </div>
 30 |         <div class="info-logo">
 31 |           <a target="_blank"
 32 |           v-for="(item, index) in logoInfo"
 33 |           :key="index"
 34 |           :href="item.url">
 35 |             <img :src="item.src" :alt="item.value">
 36 |           </a>
 37 |         </div>
 38 |       </div>
 39 |     </div>
 40 |     <div class="slogan-container"></div>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import bus from '@/bus.js'
 46 | 
 47 | export default {
 48 |   data () {
 49 |     return {
 50 |       footerNavs: [
 51 |         {value: '小米商城', url: 'https://www.mi.com/index.html'},
 52 |         {value: 'MIUI', url: 'https://www.miui.com/'},
 53 |         {value: '米家', url: 'https://home.mi.com/index.html'},
 54 |         {value: '米聊', url: 'http://www.miliao.com/'},
 55 |         {value: '多看', url: 'https://www.duokan.com/'},
 56 |         {value: '游戏', url: 'http://game.xiaomi.com/'},
 57 |         {value: '路由器', url: 'http://www.miwifi.com/'},
 58 |         {value: '米粉卡', url: 'https://www.mi.com/micard/'},
 59 |         {value: '政企服务', url: 'https://b.mi.com/?client_id=180100031058&masid=17409.0358'},
 60 |         {value: '小米天猫店', url: 'https://xiaomi.tmall.com/'},
 61 |         {value: '小米集团隐私政策', url: 'https://privacy.mi.com/all/zh_CN/'},
 62 |         {value: '小米商城隐私政策', url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded8d0e4a77d.html'},
 63 |         {value: '小米商城用户协议', url: 'https://www.mi.com/about/user-agreement/'},
 64 |         {value: '问题反馈', url: 'https://static.mi.com/feedback/'},
 65 |         {value: '廉正举报', url: 'https://www.mi.com/jiancha/'},
 66 |         {value: '诚信合规', url: 'https://integrity.mi.com/'},
 67 |         {value: 'Select Location', url: 'javascript:void(0);'},
 68 |       ],
 69 |       licenseInfo: [
 70 |         {id: 'rwvge', value: '©', url: '', br: false},
 71 |         {id: 'jmyum', value: 'mi.com', url: '#', br: false},
 72 |         {id: 'agesr', value: '京ICP证110507号', url: '', br: false},
 73 |         {id: 'th345', value: '京ICP备10046444号', url: 'http://beian.miit.gov.cn/', br: false},
 74 |         {id: '24rtw', value: '京公网安备11010802020134号', url: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134', br: false},
 75 |         {id: '6k7i6', value: '京网文[2017]1530-131号', url: 'https://www.mi.com/culture-license/', br: true},
 76 |         {id: 'mjk6u', value: '（京）网械平台备字（2018）第00005号', url: 'https://www.mi.com/medical/record/', br: false},
 77 |         {id: 'l88o9', value: '互联网药品信息服务资格证 (京) -非经营性-2014-0090', url: 'https://www.mi.com/medical/qualification/', br: false},
 78 |         {id: 'qgi42', value: '营业执照', url: 'https://www.mi.com/business-license/', br: false},
 79 |         {id: 'nvshe', value: '医疗器械公告', url: 'https://www.mi.com/medical/list/', br: true},
 80 |         {id: 'jqioe', value: '增值电信业务许可证', url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/af5b8ef38e7d57c5ee7fa4289ccf4df8.png', br: false},
 81 |         {id: 'mvqio', value: '网络食品经营备案（京）【2018】WLSPJYBAHF-12', url: '', br: false},
 82 |         {id: '9340f', value: '食品经营许可证', url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe7383e11127caea371f17156f429a1e.png', br: true},
 83 |         {id: 'jiuie', value: '违法和不良信息举报电话：185-0130-1238 ', url: '', br: false},
 84 |         {id: '9203j', value: '知识产权侵权投诉', url: 'https://www.mi.com/static/intellectual/index.html', br: false},
 85 |         {id: 'ijdqo', value: ' 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试', url: '', br: false}
 86 |       ],
 87 |       logoInfo: [
 88 |         {value: 'TRUSTe Privacy Certification', src: 'https://i1.mifile.cn/f/i/17/site/truste.png', url: 'https://privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&lang=zh-cn'},
 89 |         {value: '诚信网站', src: 'https://s01.mifile.cn/i/v-logo-2.png', url: 'https://search.szfw.org/cert/l/CX20120926001783002010'},
 90 |         {value: '可信网站', src: 'https://s01.mifile.cn/i/v-logo-1.png', url: 'https://ss.knet.cn/verifyseal.dll?sn=e12033011010015771301369&ct=df&pa=461082'},
 91 |         {value: '网上交易保障中心', src: 'https://s01.mifile.cn/i/v-logo-3.png', url: 'http://www.315online.com.cn/member/315140007.html'},
 92 |         {value: '诚信经营 放心消费', src: 'https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png', url: 'https://www.mi.com/service/buy/commitment/'},
 93 |       ]
 94 |     }
 95 |   },
 96 |   methods: {
 97 |     showLocationWindow () {
 98 |       bus.$emit('locationWindowEvent', true);
 99 |     }
100 |   }
101 | }
102 | </script>
103 | 
104 | <style lang="less">
105 |   .site-info {
106 |     position: relative;
107 |     width: 1226px;
108 |     height: auto;
109 |     margin: 0 auto;
110 |     padding: 30px 0;
111 |     font-size: 12px;
112 |     .info-container {
113 |       display: flex;
114 |     }
115 | 
116 |     .slogan-container {
117 |       margin: 30px auto 0;
118 |       width: 267px;
119 |       height: 19px;
120 |       background: url('../assets/image/slogan2016.png') no-repeat center 0;
121 |     }
122 |   }
123 | 
124 |   .logo-footer {
125 |     height: 57px;
126 |     img {
127 |       width: 57px;
128 |       height: 57px;
129 |       margin-right: 10px;
130 |     }
131 |   }
132 | 
133 |   .info-footer .info-link {
134 |     display: flex;
135 |     .info-item {
136 |       height: 18px;
137 |       line-height: 18px;
138 |       display: inline-block;
139 |       a {
140 |         display: inline-block;
141 |         color: #757575;
142 |         &:hover {
143 |           color: #ff6709;
144 |         }
145 |       }
146 | 
147 |       .nav-span {
148 |         line-height: 18px;
149 |       }
150 |     }
151 |   }
152 | 
153 |   .info-footer .info-license {
154 |     text-align: left;
155 |     a, span {
156 |       margin-right: 4px;
157 |       line-height: 18px;
158 |       color: #b0b0b0;
159 |     }
160 | 
161 |     a:hover {
162 |       color: #ff6709;
163 |     }
164 |   }
165 | 
166 |   .info-footer .info-logo {
167 |     display: flex;
168 |     text-align: left;
169 |     margin-top: 4px;
170 |     a {
171 |       display: block;
172 |       img{
173 |         width: auto;
174 |         height: 28px;
175 |       }
176 |     }
177 |   }
178 | </style>


--------------------------------------------------------------------------------
/src/components/SubChannel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sub-channel">
  3 |     <div class="channel-list-container">
  4 |       <ul class="channel-list">
  5 |         <li class="list-item" v-for="(item, index) in channelList" :key="index">
  6 |           <a :href="item.url" target="_blank">
  7 |             <img :src="item.src" :alt="item.value">
  8 |             <span>{{item.value}}</span>
  9 |           </a>
 10 |         </li>
 11 |       </ul>
 12 |     </div>
 13 |     <div class="promo-list-container">
 14 |       <ul class="promo-list">
 15 |         <li class="promo-item" v-for="(item, index) in promoList" :key="index">
 16 |           <a :href="item.url" target="_blank">
 17 |             <img :src="item.src" alt="item.value">
 18 |           </a>
 19 |         </li>
 20 |       </ul>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | export default {
 27 |   data () {
 28 |     return {
 29 |       channelList: [
 30 |         {value: '小米秒杀', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48', url: 'https://www.mi.com/seckill/'},
 31 |         {value: '企业团购', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48', url: 'https://qiye.mi.com/'},
 32 |         {value: 'F码通道', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48', url: 'https://order.mi.com/f'},
 33 |         {value: '米粉卡', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48', url: 'https://www.mi.com/mimobile/'},
 34 |         {value: '以旧换新', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48', url: 'https://huanxin.mi.com/'},
 35 |         {value: '话费充值', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48', url: 'https://recharge.10046.mi.com/'}
 36 |       ],
 37 |       promoList: [
 38 |         {value: 'Redmi 7A', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c745ff5931a1894e51c34b64888c5fca.jpg?w=632&h=340', url: 'https://www.mi.com/redmi7a/'},
 39 |         {value: '小米MIX3', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7b51b721c3319e9c2916cc41cd9c695.jpg?w=632&h=340', url: 'https://www.mi.com/mix3/'},
 40 |         {value: '小米手环4', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340', url: 'https://www.mi.com/shouhuan4/'}
 41 |       ]
 42 |     }
 43 |   }
 44 | }
 45 | </script>
 46 | 
 47 | <style lang="less">
 48 |   .sub-channel {
 49 |     position: relative;
 50 |     width: 1226px;
 51 |     height: auto;
 52 |     margin: 14px auto 26px;
 53 |     display: flex;
 54 |     .channel-list-container {
 55 |       width: 234px;
 56 |       height: 170px;
 57 |       background: #5f5750;
 58 |       .channel-list {
 59 |         display: flex;
 60 |         flex-wrap: wrap;
 61 |         margin: 0;
 62 |         padding: 3px;
 63 |         font-size: 12px;
 64 |         text-align: center;
 65 |         .list-item {
 66 |           width: 76px;
 67 |           height: 82px;
 68 |           padding: 0 3px;
 69 |           position: relative;
 70 |           &:before {
 71 |             top: -1px;
 72 |             left: 6px;
 73 |             width: 64px;
 74 |             height: 1px;
 75 |           }
 76 | 
 77 |           &:after {
 78 |             top: 6px;
 79 |             left: 0;
 80 |             width: 1px;
 81 |             height: 70px;
 82 |           }
 83 | 
 84 |           &:after, &:before {
 85 |             content: "";
 86 |             position: absolute;
 87 |             background: #665e57;
 88 |           }
 89 | 
 90 |           a {
 91 |             display: block;
 92 |             padding-top: 18px;
 93 |             opacity: .7;
 94 |             color: #fff;
 95 |             img {
 96 |               display: block;
 97 |               width: 24px;
 98 |               height: 24px;
 99 |               margin: 0 auto 4px;
100 |             }
101 | 
102 |             &:hover {
103 |               opacity: 1;
104 |             }
105 |           }
106 |         }
107 |       }
108 |     }
109 | 
110 |     .promo-list-container {
111 |       margin-left: 14px;
112 |       width: calc(100% - 248px);
113 |       .promo-list {
114 |         display: flex;
115 |         justify-content: space-between;
116 |         .promo-item {
117 |           height: 170px;
118 |           &:hover {
119 |             box-shadow: 0 5px 30px #ccc;
120 |           }
121 | 
122 |           a {
123 |             display: inline-block;
124 |             height: 100%;
125 |             img {
126 |               width: 316px;
127 |               height: 100%;
128 |             }
129 |           }
130 |         }
131 |       }
132 |     }
133 |   }
134 | </style>


--------------------------------------------------------------------------------
/src/components/ToolBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="tool-bar">
  3 |     <template v-for="(item, index) in barData">
  4 |       <a href="#" :key="index"
  5 |       @mouseenter="iconHover(item)"
  6 |       @mouseleave="iconRecovery(item)"
  7 |       v-if="index === 0">
  8 |         <div class="tool-icon">
  9 |           <img :src="item.src" v-show="!item.hover">
 10 |           <img :src="item.hsrc" v-show="item.hover">
 11 |         </div>
 12 |         <div class="tool-qrcode" v-show="item.hover">
 13 |           <img src="https://i8.mifile.cn/b2c-mimall-media/93650133310ec1c385487417a472a26c.png">
 14 |           <span>手机扫一扫一分赢好礼</span>
 15 |         </div>
 16 |       </a>
 17 |       <a :href="item.url"
 18 |       :key="index"
 19 |       @mouseenter="iconHover(item)"
 20 |       @mouseleave="iconRecovery(item)"
 21 |       v-show="scrollTop > windowHeight"
 22 |       v-if="index === barData.length - 1">
 23 |         <div class="tool-icon">
 24 |           <img :src="item.src" v-show="!item.hover">
 25 |           <img :src="item.hsrc" v-show="item.hover">
 26 |         </div>
 27 |         <span class="tool-tip" v-show="item.hover">{{item.value}}</span>
 28 |       </a>
 29 |       <a :href="item.url" target="_blank"
 30 |       :key="index"
 31 |       @mouseenter="iconHover(item)"
 32 |       @mouseleave="iconRecovery(item)"
 33 |       v-if="index !== 0 && index !== barData.length - 1">
 34 |         <div class="tool-icon">
 35 |           <img :src="item.src" v-show="!item.hover">
 36 |           <img :src="item.hsrc" v-show="item.hover">
 37 |         </div>
 38 |         <span class="tool-tip" v-show="item.hover">{{item.value}}</span>
 39 |       </a>
 40 |     </template>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | export default {
 46 |   data () {
 47 |     return {
 48 |       toolStatus: false,
 49 |       windowHeight: 0,
 50 |       scrollTop: 0,
 51 |       barData: [
 52 |         {value: '手机App', hover: false, url: '#', src: 'https://i8.mifile.cn/b2c-mimall-media/98a23aae70f25798192693f21c4d4039.png', hsrc: 'https://i8.mifile.cn/b2c-mimall-media/74c4fcb4475af8308e9a670db9c01fdf.png'},
 53 |         {value: '个人中心', hover: false, url: 'https://order.mi.com/portal', src: 'https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png', hsrc: 'https://i8.mifile.cn/b2c-mimall-media/41f858550f42eb1770b97faf219ae215.png'},
 54 |         {value: '售后服务', hover: false, url: 'https://service.order.mi.com/apply/front', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12eb0965ab33dc8e05870911b90f3f13.png', hsrc: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/95fbf0081a06eec7be4d35e277faeca0.png'},
 55 |         {value: '人工客服', hover: false, url: 'https://support.kefu.mi.com/', src: 'https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png', hsrc: 'https://i8.mifile.cn/b2c-mimall-media/5e9f2b1b0da09ac3b3961378284ef2d4.png'},
 56 |         {value: '购物车（0）', hover: false, url: 'https://static.mi.com/cart/', src: 'https://i8.mifile.cn/b2c-mimall-media/d7db56d1d850113f016c95e289e36efa.png', hsrc: 'https://i8.mifile.cn/b2c-mimall-media/692a6c3b0a93a24f74a29c0f9d68ec71.png'},
 57 |         {value: '回顶部', hover: false, url: '#', src: 'https://i1.mifile.cn/f/i/2018/home/totop.png', hsrc: 'https://i1.mifile.cn/f/i/2018/home/totop_hover.png'}
 58 |       ]
 59 |     }
 60 |   },
 61 |   methods: {
 62 |     // 滚动出去部分的高度
 63 |     getScrollTop () {
 64 |       let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
 65 |       if (document.body) {
 66 |         bodyScrollTop = document.body.scrollTop;
 67 |       }
 68 |       if (document.documentElement) {
 69 |         documentScrollTop = document.documentElement.scrollTop;
 70 |       }
 71 |       scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
 72 |       return scrollTop;
 73 |     },
 74 |     // 页面总高度
 75 |     getScrollHeight () {
 76 |       let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
 77 |       if (document.body) {
 78 |         bodyScrollHeight = document.body.scrollHeight;
 79 |       }
 80 |       if (document.documentElement) {
 81 |         documentScrollHeight = document.documentElement.scrollHeight;
 82 |       }
 83 |       scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
 84 |       return scrollHeight;
 85 |     },
 86 |     // 窗口高度
 87 |     getWindowHeight () {
 88 |       let windowHeight = 0;
 89 |       if (document.compatMode === "CSS1Compat") {
 90 |         windowHeight = document.documentElement.clientHeight;
 91 |       } else {
 92 |         windowHeight = document.body.clientHeight;
 93 |       }
 94 |       return windowHeight;
 95 |     },
 96 |     iconHover (item) {
 97 |       item.hover = true;
 98 |     },
 99 |     iconRecovery (item) {
100 |       item.hover = false;
101 |     }
102 |   },
103 |   mounted () {
104 |     this.windowHeight = this.getWindowHeight();
105 |     window.onresize = () => {
106 |       this.windowHeight = this.getWindowHeight();
107 |     };
108 |     window.onscroll = () => {
109 |       this.scrollTop = this.getScrollTop();
110 |     }
111 |   }
112 | }
113 | </script>
114 | 
115 | <style lang="less">
116 |   .tool-bar {
117 |     position: fixed;
118 |     height: 266px;
119 |     left: 50%;
120 |     right: auto;
121 |     margin-left: 613px;
122 |     bottom: 40px;
123 |     z-index: 99;
124 |     a {
125 |       display: block;
126 |       position: relative;
127 |       width: 27px;
128 |       height: 42px;
129 |       background-color: #fff;
130 |       border: 1px solid #f5f5f5;
131 |       text-align: center;
132 |     }
133 | 
134 |     a:last-child {
135 |       margin-top: 14px;
136 |     }
137 |   }
138 | 
139 |   .tool-icon {
140 |     width: 20px;
141 |     height: 20px;
142 |     padding-top: 10px;
143 |     margin: 0 auto 8px;
144 |     img {
145 |       width: 20px;
146 |       height: 20px;
147 |       opacity: 1;
148 |       transition: opacity .3s;
149 |     }
150 |   }
151 | 
152 |   .tool-tip {
153 |     display: block;
154 |     position: absolute;
155 |     transform: translate3d(-115%,-50%,0);
156 |     color: #757575;
157 |     left: 0;
158 |     top: 50%;
159 |     height: 28px;
160 |     line-height: 28px;
161 |     padding: 0 8px;
162 |     background-color: #fff;
163 |     border: 1px solid #f5f5f5;
164 |     text-align: center;
165 |     white-space: nowrap;
166 |     transition: color .3s;
167 |     &:after {
168 |       border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff;
169 |       right: -12px;
170 |       z-index: 2;
171 |     }
172 | 
173 |     &:before {
174 |       border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #f5f5f5;
175 |       right: -13px;
176 |       z-index: 1;
177 |     }
178 |   }
179 | 
180 |   .tool-qrcode {
181 |     position: absolute;
182 |     text-align: center;
183 |     left: 0;
184 |     top: 0;
185 |     padding: 14px;
186 |     background: #fff;
187 |     border: 1px solid #f5f5f5;
188 |     transition: opacity .3s;
189 |     transform: translate3d(-110%,0,0);
190 |     opacity: 1;
191 |     img {
192 |       display: block;
193 |       width: 100px;
194 |       height: 100px;
195 |       margin: 6px auto;
196 |     }
197 | 
198 |     span {
199 |       display: block;
200 |       width: 82px;
201 |       margin: 14px auto 0;
202 |       font-size: 14px;
203 |       color: #757575;
204 |       text-align: center;
205 |     }
206 | 
207 |     &:after {
208 |       right: -12px;
209 |       border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #fff;
210 |       z-index: 2;
211 |       top: 10px;
212 |       border-width: 6px;
213 |     }
214 | 
215 |     &:before {
216 |       right: -13px;
217 |       border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #f5f5f5;
218 |       z-index: 1;
219 |       top: 10px;
220 |       border-width: 6px;
221 |     }
222 |   }
223 | 
224 |   .tool-tip:after, .tool-tip:before {
225 |     content: "";
226 |     position: absolute;
227 |     top: 50%;
228 |     width: 0;
229 |     height: 0;
230 |     margin-top: -6px;
231 |     border-width: 6px;
232 |     border-style: solid;
233 |     overflow: hidden;
234 |   }
235 | 
236 |   .tool-qrcode:after, .tool-qrcode:before {
237 |     content: "";
238 |     position: absolute;
239 |     width: 0;
240 |     height: 0;
241 |     border-style: solid;
242 |     overflow: hidden;
243 |   }
244 | </style>


--------------------------------------------------------------------------------
/src/components/TopBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <header class="top-bar">
  3 |     <div class="bar-container">
  4 |       <!-- 内容栏 -->
  5 |       <div class="nav-container">
  6 |         <ul class="nav">
  7 |           <li class="nav-item" v-for="(item, index) in navsData" :key="index">
  8 |             <div class="item-style" v-if="item.value === '小米商城'">
  9 |               <a :href="item.url">{{item.value}}</a>
 10 |             </div>
 11 |             <div class="item-style" @click="showWindow" v-if="item.value === 'Select Location'">
 12 |               <a :href="item.url">{{item.value}}</a>
 13 |             </div>
 14 |             <div class="item-style" v-if="item.value === '下载app'"
 15 |             @mouseenter="downloadQRCodeShow"
 16 |             @mouseleave="downloadQRCodeHide">
 17 |               <a target="_blank"
 18 |               :href="item.url">
 19 |                 {{item.value}}
 20 |               </a>
 21 |               <span class="triangle" v-show="dowmloadFlag"></span>
 22 |               <div class="app-qrcode-container">
 23 |                 <transition name="qrcode-trans">
 24 |                   <div class="app-qrcode" v-show="dowmloadFlag">
 25 |                     <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="小米商城">
 26 |                     <span>小米商城APP</span>
 27 |                   </div>
 28 |                 </transition>
 29 |               </div>
 30 |             </div>
 31 |             <div class="item-style" v-if="item.value !== '小米商城' && item.value !== '下载app' && item.value !== 'Select Location'">
 32 |               <a :href="item.url" target="_blank">{{item.value}}</a>
 33 |             </div>
 34 |             <span class="nav-span" v-show="index !== navsData.length - 1">|</span>
 35 |           </li>
 36 |         </ul>
 37 |       </div>
 38 |       <!-- 注册栏 -->
 39 |       <div class="nav-login">
 40 |         <ul class="nav-login-item">
 41 |           <li class="nav-item" v-for="(item, index) in loginData" :key="index">
 42 |             <template v-if="item.value === '消息通知'">
 43 |               <a :href="item.url" style="margin-left: 5px;" target="_blank">{{item.value}}</a>
 44 |             </template>
 45 |             <template v-else>
 46 |               <a :href="item.url" target="_blank">{{item.value}}</a>
 47 |             </template>
 48 |             <span class="nav-span" v-show="index !== loginData.length - 1">|</span>
 49 |           </li>
 50 |         </ul>
 51 |         <div class="nav-cart fa"
 52 |         @mouseenter="cartListShow"
 53 |         @mouseleave="cartListHide">
 54 |           <div class="nav-cart-container" :class="{'active': showFlag}">
 55 |             <i class="fa fa-shopping-cart icon-cart"></i>
 56 |             <a href="http://static.mi.com/cart/">
 57 |               购物车(
 58 |               <span>0</span>
 59 |                 )
 60 |             </a>
 61 |           </div>
 62 |           <!-- <transition
 63 |             name="fade"
 64 |             enter-class="fade-enter"
 65 |             enter-to-class="fade-enter-to"
 66 |             leave-class="fade-leave"
 67 |             leave-to-class="fade-leave-to"
 68 |             enter-active-class="fade-enter-active"
 69 |             leave-active-class="fade-leave-active"
 70 |           > -->
 71 |           <transition name="fade-in">
 72 |             <div class="nav-cart-list" v-show="showFlag">
 73 |               <div class="cart-list-word">购物车中还没有商品，赶快选购吧！</div>
 74 |             </div>
 75 |           </transition>
 76 | 			  </div>
 77 |       </div>
 78 |     </div>
 79 |   </header>
 80 | </template>
 81 | 
 82 | <script>
 83 | import bus from '@/bus.js'
 84 | import { clearInterval } from 'timers';
 85 | 
 86 | export default {
 87 |   data () {
 88 |     return {
 89 |       navsData: [
 90 |         {value: '小米商城', url: 'https://www.mi.com/index.html'},
 91 |         {value: 'MIUI', url: 'https://www.miui.com/'},
 92 |         {value: 'loT', url: 'https://iot.mi.com/index.html'},
 93 |         {value: '云服务', url: 'https://i.mi.com/'},
 94 |         {value: '金融', url: 'https://jr.mi.com?from=micom'},
 95 |         {value: '有品', url: 'https://youpin.mi.com/'},
 96 |         {value: '小爱开放平台', url: 'https://xiaoai.mi.com/'},
 97 |         {value: '企业团购', url: 'https://qiye.mi.com/'},
 98 |         {value: '资质证照', url: 'https://www.mi.com/aptitude/list/?id=41'},
 99 |         {value: '协议规则', url: 'https://www.mi.com/aptitude/list/'},
100 |         {value: '下载app', url: 'https://www.mi.com/appdownload/'},
101 |         {value: 'Select Location', url: 'javascript:void(0);'}
102 |       ],
103 |       loginData: [
104 |         {value: '登陆', url: 'http://order.mi.com/site/login?redirectUrl=http://www.mi.com/index.html'},
105 |         {value: '注册', url: 'https://account.xiaomi.com/pass/register'},
106 |         {value: '消息通知', url: 'http://order.mi.com/message/list'}
107 |       ],
108 |       timer: '',
109 |       codeTimer: '',
110 |       showFlag: false,
111 |       dowmloadFlag: false
112 |     }
113 |   },
114 |   methods: {
115 |     cartListShow ()  {
116 |       this.showFlag = true;
117 |       clearInterval(this.timer);
118 |     },
119 |     cartListHide () {
120 |       // this.showFlag = false
121 | 
122 |       this.timer = setTimeout(() => {
123 |         this.showFlag = false;
124 |       }, 300);
125 |     },
126 |     downloadQRCodeShow () {
127 |       this.dowmloadFlag = true;
128 |       clearInterval(this.codeTimer);
129 |     },
130 |     downloadQRCodeHide () {
131 |       // this.dowmloadFlag = false;
132 | 
133 |       this.codeTimer = setTimeout(() => {
134 |         this.dowmloadFlag = false;
135 |       }, 300);
136 |     },
137 |     showWindow () {
138 |       bus.$emit('locationWindowEvent', true);
139 |     }
140 |   }
141 | }
142 | </script>
143 | 
144 | <style lang="less">
145 | .top-bar {
146 |   width: 100%;
147 |   height: 40px;
148 |   background-color: #333;
149 |   .bar-container {
150 |     width: 1226px;
151 |     font-size: 12px;
152 |     font-weight: 500;
153 |     margin: 0 auto;
154 |     display: flex;
155 |     justify-content: space-between;
156 |     .nav-container {
157 |       display: inline-block;
158 |       .nav-item {
159 |         .item-style {
160 |           a {
161 |             display: inline-block;
162 |             font-size: 12px;
163 |             color: #b0b0b0;
164 |             line-height: 40px;
165 |             text-decoration: none;
166 |           }
167 |           a:hover {
168 |             color: #ffffff;
169 |           }
170 |         }
171 |       }
172 |     }
173 |   }
174 | }
175 | 
176 | .nav-login {
177 |   display: flex;
178 |   .nav-login-item {
179 |     a {
180 |       font-size: 12px;
181 |       color: #b0b0b0;
182 |       line-height: 40px;
183 |       text-decoration: none;
184 |     }
185 |     a:hover {
186 |       color: #ffffff;
187 |     }
188 |   }
189 |   .nav-cart {
190 |     width: 120px;
191 |     background: #424242;
192 |     height: 40px;
193 |     line-height: 40px;
194 |     margin-left: 25px;
195 |     cursor: pointer;
196 |     position: relative;
197 |     .nav-cart-container {
198 |       line-height: 40px;
199 |       i {
200 |         font-size: 20px;
201 |         color: #b0b0b0;
202 |       }
203 |       a {
204 |         color: #b0b0b0;
205 |         text-decoration: none;
206 |         line-height: 40px;
207 |         margin-left: 5px;
208 |       }
209 |       span {
210 |         color: #b0b0b0;
211 |       }
212 |       &:hover {
213 |         background: #fff;
214 |         a, .icon-cart, span {
215 |           color: #ff6700;
216 |         }
217 |       }
218 |       .active {
219 |         background: #fff;
220 |         a {
221 |           color: #ff6700;
222 |         }
223 |         span {
224 |           color: #ff6700;
225 |         }
226 |       }
227 |     }
228 |     .nav-cart-list {
229 |       position: absolute;
230 |       right: 0;
231 |       top: 40px;
232 |       width: 316px;
233 |       background: #fff;
234 |       box-shadow: 0 0 5px -1px #ccc;
235 |       z-index: 10;
236 |       overflow: hidden;
237 |       .cart-list-word {
238 |         height: 96px;
239 |         line-height: 96px;
240 |         text-align: center;
241 |         color: black;
242 |       }
243 |     }
244 |   }
245 | }
246 | 
247 | .nav-span {
248 |   color: #424242;
249 |   font-family: sans-serif;
250 |   line-height: 40px;
251 |   margin: 0 5px;
252 | }
253 | 
254 | .nav-item {
255 |   height: 40px;
256 |   line-height: 40px;
257 |   display: inline-block;
258 |   position: relative;
259 |   .item-style {
260 |     display: inline-block;
261 |     .triangle {
262 |       position: absolute;
263 |       bottom: 0;
264 |       left: 50%;
265 |       width: 0;
266 |       height: 0;
267 |       margin-left: -8px;
268 |       border-width: 0 8px 8px;
269 |       border-style: solid;
270 |       border-color: transparent transparent #fff;
271 |     }
272 | 
273 |     .app-qrcode-container {
274 |       position: relative;
275 |       display: inline-block;
276 |       .app-qrcode {
277 |         position: absolute;
278 |         display: inline-block;
279 |         top: 16px;
280 |         left: 50%;
281 |         width: 124px;
282 |         background: #fff;
283 |         margin-left: -75px;
284 |         box-shadow: 0 3px 3px #aaa;
285 |         overflow: hidden;
286 |         z-index: 16;
287 |         cursor: pointer;
288 | 
289 |         img {
290 |           display: block;
291 |           margin: 18px auto 12px;
292 |           width: 90px;
293 |           height: 90px;
294 |         }
295 | 
296 |         span {
297 |           display: block;
298 |           text-align: center;
299 |           font-size: 14px;
300 |           color: #333;
301 |           line-height: 1;
302 |           margin-bottom: 12px;
303 |         }
304 |       }
305 |     }
306 |   }
307 | }
308 | 
309 | // 购物车
310 | .fade-in-enter-active, .fade-in-leave-active {
311 |   transition: all .20s ease;
312 |   height: 96px;
313 | }
314 | 
315 | .fade-in-enter, .fade-in-leave-to {
316 |   height: 0;
317 | }
318 | 
319 | .fade-in-enter-to, .fade-in-leave {
320 |   height: 96px;
321 | }
322 | 
323 | // app二维码
324 | .qrcode-trans-enter-active, .qrcode-trans-leave-active {
325 |   transition: all .3s ease;
326 |   height: 146px;
327 | }
328 | 
329 | .qrcode-trans-enter, .qrcode-trans-leave-to {
330 |   height: 0;
331 | }
332 | 
333 | .qrcode-trans-enter-to, .qrcode-trans-leave {
334 |   height: 146px;
335 | }
336 | </style>


--------------------------------------------------------------------------------
/src/components/TopHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="top-header">
  3 |     <div class="top-container">
  4 |       <a class="mi-icon" href="#"></a>
  5 |       <div class="header-navs-container">
  6 |         <div class="divider"></div>
  7 |         <ul class="navs">
  8 |           <li class="navs-item" v-for="(item, index) in navs" :key="index">
  9 |             <a v-if="item.type"
 10 |             :data-type="item.type"
 11 |             @mouseenter="menusListShow(item.type)"
 12 |             @mouseleave="menusListHide()"
 13 |             >{{item.value}}</a>
 14 |             <a v-else :href="item.url"  target="_blank">{{item.value}}</a>
 15 |           </li>
 16 |         </ul>
 17 |       </div>
 18 |       <div class="header-search-container">
 19 |         <input
 20 |           @focus="searchListShow"
 21 | 					@blur="searchListHide"
 22 | 					class="search-input"
 23 |           :class="{'active': focusFlag}"
 24 |           type="search"
 25 |           value="">
 26 | 				<label class="search-btn" :class="{'active': focusFlag}" style="border-left: 0;">
 27 | 					<i class="fa fa-search" aria-hidden="true"></i>
 28 | 				</label>
 29 |         <transition name="list-trans">
 30 |           <ul class="search-hots" v-show="hotsListFlag">
 31 |             <li class="hots-item" v-for="(item, index) in hots" :key="index">{{item}}</li>
 32 |           </ul>
 33 |         </transition>
 34 |         <ul class="search-list" v-show="!hotsListFlag">
 35 |           <li class="list-item" v-for="(item, index) in searchHot" :key="index">{{item}}</li>
 36 |         </ul>
 37 |       </div>
 38 |     </div>
 39 |     <transition name="menu-trans">
 40 |       <div class="menus-list"
 41 |       @mouseenter="menusListShow()"
 42 |       @mouseleave="menusListHide()"
 43 |       v-show="menusListFlag">
 44 |         <ul class="menus">
 45 |           <li class="menus-item" v-for="(item, index) in menusItemData" :key="index">
 46 |             <a :href="item.src">
 47 |               <img class="item-img" :src="item.url">
 48 |             </a>
 49 |             <div class="item-value">{{item.value}}</div>
 50 |             <div class="item-type" v-if="item.type">{{item.type}}</div>
 51 |             <div class="item-price" v-if="item.price && item.sub">{{item.price}}元起</div>
 52 |             <div class="item-price" v-if="item.price && !item.sub">{{item.price}}元</div>
 53 |           </li>
 54 |         </ul>
 55 |       </div>
 56 |     </transition>
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | export default {
 62 |   data () {
 63 |     return {
 64 |       menusListFlag: false,
 65 |       timer: '',
 66 |       menusItemData: this.xiaomi,
 67 |       hotsListFlag: true,
 68 |       focusFlag: false,
 69 |       hots: ['小米9', '小米9 SE'],
 70 |       navs: [
 71 |         {value: '小米手机', type: 'xiaomi'},
 72 | 				{value: 'Redmi 红米', type: 'redmi'},
 73 | 				{value: '电视', type: 'tv'},
 74 | 				{value: '笔记本', type: 'laptop'},
 75 | 				{value: '家电', type: 'household'},
 76 | 				{value: '路由器', type: 'router'},
 77 | 				{value: '智能硬件', type: 'hardware'},
 78 | 				{value: '服务', url: '//www.mi.com/service/'},
 79 | 				{value: '社区', url: 'http://www.xiaomi.cn'}
 80 |       ],
 81 |       xiaomi: [
 82 |         {value: '小米CC9', price: '1799', sub: true, src: 'https://www.mi.com/micc9/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f515ab05232ed14ccd78ec67e024495a.png'},
 83 |         {value: '小米CC9e', price: '1299', sub: true, src: 'https://www.mi.com/micc9e/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/df9b3e7a562e02a33eb069b3f0119815.png'},
 84 |         {value: '小米CC9 美图定制版', price: '2599', sub: false, src: 'https://www.mi.com/xiaomicc9mt/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b02f50c9dd2e01c139a06a12502755ef.png'},
 85 |         {value: '小米9', price: '2599', sub: true, src: 'https://www.mi.com/mi9/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2c9307e9690dfbca39d8de770a7a8664.png'},
 86 |         {value: '小米MIX 3', price: '2599', sub: false, src: 'https://item.mi.com/10000123.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3b5e5829fdf92d54c167f4681531b535.png'},
 87 |         {value: '小米MIX 2s', price: '1799', sub: true, src: 'https://www.mi.com/mix2s/', url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ae81fdc9f2ed286d135e16c2a5f6db33.png'}
 88 |       ],
 89 |       redmi: [
 90 |         {value: 'Redmi K20 Pro', price: '2299', sub: true, src: 'https://www.mi.com/redmik20pro/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f69828396fcd1e05b932778f4fca4409.jpg'},
 91 |         {value: 'Redmi K20', price: '1999', sub: true, src: 'https://www.mi.com/redmik20/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d4fbf37c6b51e510a3bac5e738f2f681.jpg'},
 92 |         {value: 'Redmi Note7 Pro', price: '1399', sub: false, src: 'https://www.mi.com/redminote7pro/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b0e0c0fda4adf267012815127302f6de.jpg'},
 93 |         {value: 'Redmi 7A', price: '579', sub: true, src: 'https://www.mi.com/redmi7a/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/031af981e77b41770cade39353021e33.jpg'},
 94 |         {value: 'Redmi Note 7', price: '999', sub: true, src: 'https://www.mi.com/redminote7/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5352bd79f5304484f529da8a53145a20.png'},
 95 |         {value: 'Redmi 7', price: '699', sub: true, src: 'https://www.mi.com/redmi7/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/536b98c95ecd4375bae21599e53aae53.png'}
 96 |       ],
 97 |       tv: [
 98 |         {value: '小米壁画电视 65英寸', price: '6999', sub: false, src: 'https://www.mi.com/arttv/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/00f597a8725eee9245e383c35cd4f7b6.jpg'},
 99 |         {value: '小米全面屏电视E55A', price: '1999', sub: false, src: 'https://www.mi.com/mitvall-screen/e55a/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a40904b6a053b73b631a152334388d0e.jpg'},
100 |         {value: '小米电视4A 32英寸', price: '699', sub: false, src: 'https://www.mi.com/mitv4A/32/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e8f4e22f6d591825f8f150b3309c750b.png'},
101 |         {value: '小米电视4A 55英寸', price: '1799', sub: false, src: 'https://www.mi.com/mitv4A/55/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bf72a3e9a6e799cb71ecfa7d80465351.jpg'},
102 |         {value: '小米电视4A 65英寸', price: '2699', sub: false, src: 'https://www.mi.com/mitv4A/65', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bd922870295a97a0972eaba5af92129e.jpg'},
103 |         {value: '查看全部', type: '小米电视', sub: false, src: 'https://www.mi.com/a/h/9819.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/cd4dafd1461a006f161d00924bf692e9.png'},
104 |       ],
105 |       laptop: [
106 |         {value: 'RedmiBook 14 独显版', price: '3999', sub: true, src: 'https://item.mi.com/10000153.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/be5ddca319f92a508a6e3b3bac4d5fb2.png'},
107 |         {value: '小米笔记本Air 12.5"', price: '3599', sub: true, src: 'https://item.mi.com/10000145.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/95c4329ce2c454e2a5fa1e0931528a46.png'},
108 |         {value: '小米笔记本 Air 13.3"', price: '4999', sub: true, src: 'https://item.mi.com/10000142.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/96108a8feee8e790389b09b8b949fa7d.png'},
109 |         {value: '小米笔记本 15.6"', price: '3799', sub: true, src: 'https://item.mi.com/10000141.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bb159dbe860ee434b52d8eed9e9fd424.png'},
110 |         {value: '小米笔记本Pro 15.6"', price: '4999', sub: true, src: 'https://item.mi.com/10000144.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d712f71b3c4a3b562601c2b956a660ad.png'},
111 |         {value: '小米游戏本', price: '5999', sub: true, src: 'https://item.mi.com/10000113.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/60b99f44108d4cf5967bb614cf1e8690.png'}
112 |       ],
113 |       household: [
114 |         {value: '米家互联网空调C1（一级能效）', price: '2299', sub: false, src: 'https://www.mi.com/airconditionc1/v1c1/', url: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/03dc85cd792904ddc8027b2d781beed8.png'},
115 |         {value: '米家互联网空调（一级能效）', price: '2199', sub: false, src: 'https://www.mi.com/airenergy/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e06b219c5bced9256467b17738a943c6.png'},
116 |         {value: 'Redmi全自动波轮洗衣机1A', price: '699', sub: false, src: 'https://item.mi.com/9509.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c5d772b7c2a159c3ed7d4e31bd293f18.jpg'},
117 |         {value: '米家互联网洗烘一体机10kg', price: '1899', sub: false, src: 'https://www.mi.com/washer-dryer-10/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/11b8bca444aba2994fe852993eac9203.png'},
118 |         {value: '小米净水器', price: '1999', sub: false, src: 'https://www.mi.com/water2', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/486a2a7359b6bda95b3dbd4e45b9c50a.jpg'},
119 |         {value: '米家扫地机器人', price: '1499', sub: false, src: 'https://www.mi.com/roomrobot/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4ae019eebf10a55f8df2fee8d19b4e1f.jpg'}
120 |       ],
121 |       router: [
122 |         {value: '小米路由器 Mesh', price: '999', sub: false, src: 'https://www.mi.com/mesh/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ec5be5f93ac0118aeec27b8df4337fc9.jpg'},
123 |         {value: '小米路由器4A 千兆版', price: '149', sub: false, src: 'https://www.mi.com/miwifi4ac/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/026a28fc18eff2cfa4d26a799a2da9cc.jpg'},
124 |         {value: '小米路由器 4C', price: '59', sub: false, src: 'https://item.mi.com/8645.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/28efac56ef4c4942077dac7e30e8c624.jpg'},
125 |         {value: '小米路由器 4A', price: '99', sub: false, src: 'https://www.mi.com/miwifi4a/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3c3e9f61cc72ccd2a37fc90fed215b66.jpg'},
126 |         {value: '小米路由器 HD/Pro', price: '399', sub: false, src: 'https://www.mi.com/miwifihd/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5fc5ee374e5306aa5513be4f3b560531.png'},
127 |         {value: '查看全部', type: '小米路由器', sub: false, src: 'https://www.mi.com/a/h/8363.html', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2ddc6a2789c5f5ff78fa4ca1402417c8.png'}
128 |       ],
129 |       hardware: [
130 |         {value: '小米米家智能摄像机云台版', price: '189', sub: false, src: 'https://www.mi.com/camera-360/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2a500be4264c692899b25d86c16403f7.jpg'},
131 |         {value: '小米小爱老师', price: '489', sub: true, src: 'https://www.mi.com/aiteacher-wifi/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e3fb0886fdb13e5ae784b9713b9a0038.jpg'},
132 |         {value: '小米米家智能门锁', price: '1299', sub: false, src: 'https://www.mi.com/mj-smartlock/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5630aa997c82409ee33b2814c7eb2244.jpg'},
133 |         {value: '小米小爱触屏音箱', price: '299', sub: false, src: 'https://www.mi.com/aispeaker-touch/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f6e585a4bf5c0f744ca60f19ecd6fadf.jpg'},
134 |         {value: '小爱万能遥控版', price: '179', sub: false, src: 'https://www.mi.com/aispeaker-control/', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/df136199221a23299bc5348f37230a86.jpg'},
135 |         {value: '查看全部', type: '智能硬件', sub: false, src: 'https://www.mi.com/p/3469.html?client_id=180100041086&masid=17409.0245', url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c1016ddffd2ac5808c4bebcdbefd413a.jpg'}
136 |       ],
137 |       searchHot: ['小米 9','Redmi K20 pro', 'Redmi K20', 'Redmi Note 7 Pro', 'Redmi note 7', '小米电视4c', '电视32英寸', '笔记本pro', '小爱音箱', '净水器']
138 |     }
139 |   },
140 |   methods: {
141 |     // 菜单显示区域
142 |     menusListShow (type) {
143 |       if (type) {
144 |         this.menusItemData = this[type];
145 |       }
146 | 
147 |       this.menusListFlag = true;
148 |       clearTimeout(this.timer);
149 |     },
150 |     menusListHide () {
151 |       this.timer = setTimeout(() => {
152 | 				this.menusListFlag = false;
153 | 			}, 300);
154 |     },
155 |     // 搜索框下拉列表
156 |     searchListShow () {
157 |       this.hotsListFlag = false;
158 |       this.focusFlag = true;
159 |     },
160 |     searchListHide () {
161 |       this.hotsListFlag = true;
162 |       this.focusFlag = false;
163 |     }
164 |   }
165 | }
166 | </script>
167 | 
168 | <style lang="less">
169 |   .top-header {
170 |     width: 100%;
171 |     height: 100px;
172 |     .top-container {
173 |       width: 1226px;
174 |       height: 100%;
175 |       margin: 0 auto;
176 |       display: flex;
177 |       align-items: center;
178 |       justify-content: space-between;
179 |       .mi-icon {
180 |         display: block;
181 |         width: 55px;
182 |         height: 55px;
183 |         cursor: pointer;
184 |         background: #ff6700 url('../assets/image/home-logo.png') no-repeat;
185 |         background-position: -55px 0;
186 |         transition: all .20s ease;
187 |       }
188 | 
189 |       .mi-icon:hover {
190 |           background-position: 0 0;
191 |         }
192 | 
193 |       .header-navs-container {
194 |         width: 820px;
195 |         display: flex;
196 |         height: 100%;
197 |         .divider {
198 |           width: 142px;
199 |           height: 100px;
200 |         }
201 | 
202 |         .navs {
203 |           display: flex;
204 |           line-height: 100px;
205 |           .navs-item > a {
206 |             cursor: pointer;
207 |             padding: 26px 10px 38px;
208 |             &:hover {
209 |               color: #ff6700;
210 |             }
211 |           }
212 |         }
213 |       }
214 | 
215 |       .header-search-container {
216 |         height: 50px;
217 |         position: relative;
218 |         display: flex;
219 |         .search-input {
220 |           width: 240px;
221 |           height: 100%;
222 |           outline: none;
223 |           font-size: 15px;
224 |           border: 1px solid #e0e0e0;
225 |         }
226 | 
227 |         .search-btn {
228 |           border: 1px solid #e0e0e0;
229 |           cursor: pointer;
230 |           i {
231 |             font-size: 19px;
232 |             width: 48px;
233 |             background: #fff;
234 |             color: #616161;
235 |             line-height: 48px;
236 | 
237 |             &:hover {
238 |               background:#ff6700;
239 |               color: #fff;
240 |               transition: all .20s ease;
241 |             }
242 |           }
243 | 
244 |           &:hover {
245 |             border: 1px solid #ff6700;
246 |             transition: all .20s ease;
247 |           }
248 |         }
249 | 
250 |         .active {
251 |           transition: all .20s ease;
252 |           border: 1px solid #ff6700;
253 |         }
254 | 
255 |         .search-hots {
256 |           position: absolute;
257 |           display: flex;
258 |           top: 14px;
259 |           right: 55px;
260 |           z-index: 2;
261 |           .hots-item {
262 |             width: auto;
263 |             height: 18px;
264 |             line-height: 18px;
265 |             padding: 0 5px;
266 |             font-size: 12px;
267 |             background: #eee;
268 |             color: #757575;
269 |             margin-right: 5px;
270 |             cursor: pointer;
271 |             &:hover {
272 |               color: #fff;
273 |               background: #ff6300;
274 |             }
275 |           }
276 |         }
277 | 
278 |         .search-list {
279 |           position: absolute;
280 |           width: 240px;
281 |           top: 50px;
282 |           height: auto;
283 |           border: 1px solid #ff6700;
284 |           border-top: 0;
285 |           text-align: left;
286 |           z-index: 16;
287 |           .list-item {
288 |             cursor: pointer;
289 |             padding: 6px 15px;
290 |             font-size: 12px;
291 |             background: #fff;
292 |             color: #424242;
293 |             &:hover {
294 |               background: #fafafa;
295 |             }
296 |           }
297 |         }
298 |       }
299 |     }
300 | 
301 |     .menus-list {
302 |       position: absolute;
303 |       left: 0;
304 |       top: 140px;
305 |       width: 100%;
306 |       // height: 230px;
307 |       background: #fff;
308 |       border-top: 1px solid #e0e0e0;
309 |       box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
310 |       overflow: hidden;
311 |       z-index: 15;
312 |       .menus {
313 |         padding: 30px 0 30px 110px;
314 |         min-width: 1500px;
315 |         display: flex;
316 |         .menus-item {
317 |           a {
318 |             display: block;
319 | 				    padding: 0 20px;
320 | 				    border-right: 1px solid #ccc;
321 |           }
322 | 
323 |           &:nth-last-child(1) {
324 |             a {
325 |               border: 0;
326 |             }
327 |           }
328 | 
329 |           .item-img {
330 |             width: 100%;
331 |             width: 160px;
332 |             height: 110px;
333 |           }
334 | 
335 |           .item-value {
336 |             width: 100%;
337 |             height: 16px;
338 |             margin-top: 16px;
339 |             font-size: 12px;
340 |             text-align: center;
341 |           }
342 | 
343 |           .item-type {
344 |             width: 100%;
345 |             height: 16px;
346 |             margin: 4px 0 4px;
347 |             font-size: 12px;
348 |             text-align: center;
349 |           }
350 | 
351 |           .item-price {
352 |             width: 100%;
353 |             height: 14px;
354 |             line-height: 14px;
355 |             margin: 5px 0 5px;
356 |             font-size: 10px;
357 |             text-align: center;
358 |             color: #ff6700;
359 |           }
360 |         }
361 |       }
362 |     }
363 |   }
364 | 
365 |   // 菜单选项
366 |   .menu-trans-enter-active, .menu-trans-leave-active {
367 |     transition: all .30s ease-in;
368 |     height: 230px;
369 |   }
370 | 
371 |   .menu-trans-enter, .menu-trans-leave-to {
372 |     height: 0;
373 |   }
374 | 
375 |   .menu-trans-enter-to, .menu-trans-leave {
376 |     height: 230px;
377 |   }
378 | 
379 |   // 搜索热点
380 |   .list-trans-enter-active, .list-trans-leave-active {
381 |     transition: all .10s ease-in;
382 |     opacity: 1;
383 |   }
384 | 
385 |   .list-trans-enter, .list-trans-leave-to {
386 |       opacity: 0;
387 |     }
388 | 
389 |   .list-trans-enter-to, .list-trans-leave {
390 |     opacity: 1;
391 |   }
392 | </style>


--------------------------------------------------------------------------------
/src/components/VideoBox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="video-box">
  3 |     <div class="box-header">
  4 |       <h2 class="box-title">视频</h2>
  5 |       <div class="type-more">
  6 |         <a href="https://www.mi.com/video/" target="_blank">
  7 |           <span>查看全部</span>
  8 |           <i class="fa fa-angle-right"></i>
  9 |         </a>
 10 |       </div>
 11 |     </div>
 12 |     <ul class="box-content">
 13 |       <li class="video-item brick-item"
 14 |       v-for="(item, index) in videoData"
 15 |       :key="index">
 16 |         <a href="javascript: void(0);" title="点击播放视频" @click="playVideo(item)">
 17 |           <img :src="item.src" :alt="item.value">
 18 |           <span class="play">
 19 |             <i class="fa fa-play"></i>
 20 |           </span>
 21 |           <h3 class="name ellipsis">{{item.value}}</h3>
 22 |           <span class="desc ellipsis">{{item.desc}}</span>
 23 |         </a>
 24 |       </li>
 25 |     </ul>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import bus from '@/bus.js'
 31 | 
 32 | export default {
 33 |   data () {
 34 |     return {
 35 |       videoData: [
 36 |         {value: 'Redmi Note 8 系列发布会', desc: '', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3a134c9f8fffb85a47ac397e7eeba7e8.jpg', videourl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/df3dc1da003b7db992e902f653326476.mp4'},
 37 |         {value: '小米CC9', desc: '深蓝星球', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1541da85ac8b204056374641eee24726.jpg', videourl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7a2e31bf18e8fb5abd2a32ea93f0d46b.mp4'},
 38 |         {value: 'Redmi Note 7系列', desc: '镜花水月', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/af835147320dafa808331f156222223e.jpg', videourl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bfbd7781fc7531592994b82f2716006.mp4'},
 39 |         {value: '黑鲨游戏手机2 Pro', desc: '指尖主宰 发布会', src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c2e9a7fc809f7aeac30bf538baf8f156.jpg', videourl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5f51a274a73db915a9623ccdfd35f678.mp4'},
 40 |       ]
 41 |     }
 42 |   },
 43 |   methods: {
 44 |     playVideo (item) {
 45 |       // 发送数据
 46 |       bus.$emit('videoWindowEvent', item);
 47 |     }
 48 |   }
 49 | }
 50 | </script>
 51 | 
 52 | <style lang="less">
 53 |   .video-box {
 54 |     position: relative;
 55 |     width: 1226px;
 56 |     height: auto;
 57 |     margin: 0 auto;
 58 |     .box-content {
 59 |       margin-bottom: 12px;
 60 |     }
 61 |   }
 62 | 
 63 |   .video-item {
 64 |     width: 296px;
 65 |     height: 285px;
 66 |     margin-left: 14px;
 67 |     margin-bottom: 14px;
 68 |     text-align: center;
 69 |     background: #fff;
 70 |     transition: all .2s linear;
 71 |     &:first-child {
 72 |       margin-left: 0;
 73 |     }
 74 | 
 75 |     a {
 76 |       display: inline-block;
 77 |       height: 100%;
 78 |       position: relative;
 79 |       .play {
 80 |         position: absolute;
 81 |         left: 20px;
 82 |         top: 146px;
 83 |         width: 36px;
 84 |         height: 24px;
 85 |         border: 2px solid #fff;
 86 |         border-radius: 12px;
 87 |         background-color: #424242;
 88 |         background-color: rgba(0,0,0,.6);
 89 |         color: #fff;
 90 |         text-align: center;
 91 |         transition: all .2s;
 92 |         overflow: hidden;
 93 |         i {
 94 |           vertical-align: middle;
 95 |           font-size: 10px;
 96 |         }
 97 |       }
 98 | 
 99 |       img {
100 |         width: 296px;
101 |         height: 180px;
102 |         margin-bottom: 28px;
103 |       }
104 | 
105 |       .name {
106 |         margin: 0 14px 6px;
107 |         font-size: 14px;
108 |         font-weight: 400;
109 |         text-align: center;
110 |         color: #333;
111 |       }
112 | 
113 |       .desc {
114 |         height: 18px;
115 |         margin: 0 14px;
116 |         font-size: 12px;
117 |         color: #b0b0b0;
118 |       }
119 | 
120 |       &:hover .play {
121 |         background-color: #ff6700;
122 |         border-color: #ff6700;
123 |       }
124 |     }
125 |   }
126 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | import './assets/css/style.css'
 6 | import './assets/css/font.css'
 7 | // npm install --save font-awesome
 8 | import 'font-awesome/css/font-awesome.min.css'
 9 | 
10 | Vue.config.productionTip = false
11 | 
12 | new Vue({
13 |   router,
14 |   render: h => h(App),
15 |   data: {
16 |     // 中央事件总线 二
17 |     // bus: new Vue(),
18 |   }
19 | }).$mount('#app')
20 | 


--------------------------------------------------------------------------------
/src/parts/Banner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="banner">
  3 |     <div class="banner-prev" @click="prev"></div>
  4 |     <div class="banner-next" @click="next"></div>
  5 |     <transition-group tag="ul" name="banner-trans" class="banner-container">
  6 |       <li class="image-container"
  7 |       v-for="(item, index) in banners"
  8 |       v-show="index === imgIndex"
  9 |       :key="index">
 10 |         <a :href="item.url" target="_blank">
 11 |           <img :src="item.src" />
 12 |         </a>
 13 |       </li>
 14 |     </transition-group>
 15 |     <div class="banner-points">
 16 |       <a class="banner-point" @click="jump(index)" :class="{'active': index === imgIndex}" v-for="(item, index) in banners.length" :key="index"></a>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | export default {
 23 |   data () {
 24 |     return {
 25 |       imgIndex: 0,
 26 |       timer: '',
 27 |     }
 28 |   },
 29 |   props: ['banners'],
 30 |   methods: {
 31 |     next () {
 32 |       const lastPage = this.banners.length - 1;
 33 | 			if (this.imgIndex < lastPage) {
 34 | 				this.imgIndex += 1;
 35 | 			} else {
 36 | 				this.imgIndex = 0;
 37 | 			}
 38 |     },
 39 |     prev () {
 40 |       const lastPage = this.banners.length - 1;
 41 | 			if (this.imgIndex > 0) {
 42 | 				this.imgIndex -= 1;
 43 | 			} else {
 44 | 				this.imgIndex = lastPage;
 45 | 			}
 46 |     },
 47 |     play () {
 48 | 			clearInterval(this.timer);
 49 | 			this.timer = setInterval(() => {
 50 | 				this.next();
 51 | 			}, 5000);
 52 |     },
 53 |     jump (index) {
 54 |       this.imgIndex = index;
 55 |     }
 56 |   },
 57 |   mounted () {
 58 |     this.play();
 59 |   }
 60 | }
 61 | </script>
 62 | 
 63 | <style lang="less">
 64 |   .banner {
 65 |     position: relative;
 66 |     .banner-prev {
 67 |       position: absolute;
 68 |       top: 50%;
 69 |       width: 41px;
 70 |       height: 69px;
 71 |       margin-top: -35px;
 72 |       z-index: 5;
 73 |       cursor: pointer;
 74 |       outline: none;
 75 |       background: url(../assets/image/icon-slides.png) no-repeat -84px 50%;
 76 |       left: 234px;
 77 |       right: auto;
 78 |       &:hover {
 79 |         background: url(../assets/image/icon-slides.png) no-repeat 0px 50%;
 80 |       }
 81 |     }
 82 | 
 83 |     .banner-next {
 84 |       position: absolute;
 85 |       top: 50%;
 86 |       width: 41px;
 87 |       height: 69px;
 88 |       margin-top: -35px;
 89 |       z-index: 5;
 90 |       cursor: pointer;
 91 |       outline: none;
 92 |       background: url(../assets/image/icon-slides.png) no-repeat -125px 50%;
 93 |       right: 0;
 94 |       left: auto;
 95 |       &:hover {
 96 |         background: url(../assets/image/icon-slides.png) no-repeat -43px 50%;
 97 |       }
 98 |     }
 99 | 
100 |     .banner-points {
101 |       position: absolute;
102 |       display: inline-block;
103 |       width: 400px;
104 |       left: auto;
105 |       right: 30px;
106 |       bottom: 20px;
107 |       text-align: right;
108 |       transform: translateZ(0);
109 |       z-index: 10;
110 |       .banner-point {
111 |         display: inline-block;
112 |         width: 10px;
113 |         height: 10px;
114 |         border: 2px solid #fff;
115 |         border-color: hsla(0, 0%, 100%, .3);
116 |         border-radius: 10px;
117 |         overflow: hidden;
118 |         background: rgba(0, 0, 0, .4);
119 |         opacity: 1;
120 |         margin: 0 4px;
121 |         cursor: pointer;
122 |         &:hover {
123 |           background: hsla(0,0%,100%,.4);
124 |           border-color: rgba(0,0,0,.4);
125 |         }
126 |       }
127 | 
128 |       .active {
129 |         background: hsla(0,0%,100%,.4);
130 |         border-color: rgba(0,0,0,.4);
131 |       }
132 |     }
133 | 
134 |     .banner-container {
135 |       width: 100%;
136 |       height: 460px;
137 |       overflow: hidden;
138 |       .image-container {
139 |         width: 100%;
140 |         height: auto;
141 |         a {
142 |           display: block;
143 |           img {
144 |             width: 100%;
145 |           }
146 |         }
147 |       }
148 |     }
149 |   }
150 | 
151 |   // 轮播图
152 |   .banner-trans-enter-active {
153 |     transition: all .10s ease-in-out;
154 |     opacity: 1;
155 |   }
156 | 
157 |   .banner-trans-leave-active {
158 |     opacity: 0;
159 |   }
160 | 
161 |   .banner-trans-enter, .banner-trans-leave-to {
162 |       opacity: 0;
163 |     }
164 | 
165 |   .banner-trans-enter-to, .banner-trans-leave {
166 |     opacity: 1;
167 |   }
168 | </style>


--------------------------------------------------------------------------------
/src/parts/GoodsBox.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="good-box">
  3 |     <div class="box-header">
  4 |       <h2 class="box-title">{{goodsItem.boxTitle}}</h2>
  5 |       <div class="type-select" v-if="goodsItem.isHot">
  6 |         <ul class="tab-list">
  7 |           <li class="tab-item"
  8 |           v-for="(item, index) in goodsItem.tabList"
  9 |           :key="index"
 10 |           :class="{'active': item.type === selectItem.type}"
 11 |           @mouseenter="selectType(item)">{{item.value}}</li>
 12 |         </ul>
 13 |       </div>
 14 |       <div class="type-more" v-else>
 15 |         <a :href="goodsItem.url" target="_blank">
 16 |           <span>查看全部</span>
 17 |           <i class="fa fa-angle-right"></i>
 18 |         </a>
 19 |       </div>
 20 |     </div>
 21 |     <div class="box-content">
 22 |       <div class="promo-content">
 23 |         <div class="promo-one" v-if="goodsItem.listData.promo.length === 1">
 24 |           <a class="brick-item" target="_blank" :href="goodsItem.listData.promo[0].url">
 25 |             <img :src="goodsItem.listData.promo[0].src">
 26 |           </a>
 27 |         </div>
 28 |         <div class="promo-two" v-if="goodsItem.listData.promo.length === 2">
 29 |           <a class="brick-item" target="_blank"
 30 |           :href="item.url"
 31 |           v-for="(item, index) in goodsItem.listData.promo"
 32 |           :key="index">
 33 |             <img :src="item.src">
 34 |           </a>
 35 |         </div>
 36 |       </div>
 37 |       <div class="goods-content">
 38 |         <div class="goods-one" v-if="!goodsItem.isHot">
 39 |           <div class="goods-item brick-item"
 40 |           v-for="(item, index) in goodsItem.listData.goods"
 41 |           :key="index">
 42 |             <a :href="item.url" target="_blank">
 43 |               <img :src="item.src" :alt="item.value">
 44 |               <h3 class="name ellipsis">{{item.value}}</h3>
 45 |               <span class="desc ellipsis">{{item.desc}}</span>
 46 |               <div class="price">
 47 |                 <span>{{item.newPrice}}元</span>
 48 |                 <span v-if="item.sub">起</span>
 49 |                 <del v-if="item.oldPrice">{{item.oldPrice}}元</del>
 50 |               </div>
 51 |             </a>
 52 |           </div>
 53 |         </div>
 54 |         <div class="goods-two" v-else>
 55 |           <template v-for="(item, index) in goodsData">
 56 |             <div class="goods-item-sm" :key="index" v-if="index === goodsData.length - 1 && goodsData.length % 2 === 0">
 57 |               <a class="brick-item" :href="item.url" target="_blank">
 58 |                 <div class="text-container">
 59 |                   <h3 class="name">{{item.value}}</h3>
 60 |                   <div class="price">
 61 |                     <span>{{item.newPrice}}元</span>
 62 |                     <span v-if="item.sub">起</span>
 63 |                   </div>
 64 |                 </div>
 65 |                 <img :src="item.src" :alt="item.value">
 66 |               </a>
 67 |               <a class="brick-item" :href="selectItem.url" target="_blank">
 68 |                 <div class="text-container look-more">
 69 |                   <h3 class="name">浏览更多</h3>
 70 |                   <span class="desc">{{selectItem.value}}</span>
 71 |                 </div>
 72 |                 <img src="../assets/image/right.png">
 73 |               </a>
 74 |             </div>
 75 |             <div class="goods-item-bg" :key="index" v-if="index === goodsData.length - 1 && goodsData.length % 2 !== 0">
 76 |               <a class="brick-item" :href="item.url" target="_blank">
 77 |                 <img :src="item.src" :alt="item.value">
 78 |                 <h3 class="name ellipsis">{{item.value}}</h3>
 79 |                 <span class="desc ellipsis">{{item.desc}}</span>
 80 |                 <div class="price">
 81 |                   <span>{{item.newPrice}}元</span>
 82 |                   <span v-if="item.sub">起</span>
 83 |                   <del v-if="item.oldPrice">{{item.oldPrice}}元</del>
 84 |                 </div>
 85 |               </a>
 86 |               <a class="brick-more brick-item" :href="selectItem.url" target="_blank">
 87 |                 <div class="text-container look-more">
 88 |                   <h3 class="name">浏览更多</h3>
 89 |                   <span class="desc">{{selectItem.value}}</span>
 90 |                 </div>
 91 |                 <img src="../assets/image/right.png">
 92 |               </a>
 93 |             </div>
 94 |             <div class="goods-item brick-item" :key="index" v-if="index < goodsData.length - 1">
 95 |               <a :href="item.url" target="_blank">
 96 |                 <img :src="item.src" :alt="item.value">
 97 |                 <h3 class="name ellipsis">{{item.value}}</h3>
 98 |                 <span class="desc ellipsis">{{item.desc}}</span>
 99 |                 <div class="price">
100 |                   <span>{{item.newPrice}}元</span>
101 |                   <span v-if="item.sub">起</span>
102 |                   <del v-if="item.oldPrice">{{item.oldPrice}}元</del>
103 |                 </div>
104 |               </a>
105 |             </div>
106 |           </template>
107 |         </div>
108 |       </div>
109 |     </div>
110 |   </div>
111 | </template>
112 | 
113 | <script>
114 | export default {
115 |   data () {
116 |     return {
117 |       selectItem: '',
118 |       goodsData: ''
119 |     }
120 |   },
121 |   props: ['goodsItem'],
122 |   methods: {
123 |     selectType (item) {
124 |       this.selectItem = item;
125 |       this.goodsData = this.goodsItem.listData[item.type];
126 |     },
127 |     init () {
128 |       if (this.goodsItem.tabList) {
129 |         this.selectItem = this.goodsItem.tabList[0];
130 |         this.goodsData = this.goodsItem.listData.hots;
131 |       } else {
132 |         this.selectItem = '';
133 |         this.goodsData = '';
134 |       }
135 |     }
136 |   },
137 |   mounted() {
138 |     this.init();
139 |   }
140 | }
141 | </script>
142 | 
143 | <style lang="less">
144 |   .good-box {
145 |     position: relative;
146 |     width: 1226px;
147 |     height: auto;
148 |     margin: 0 auto;
149 |   }
150 | 
151 |   .box-header {
152 |     .type-select {
153 |       display: inline-block;
154 |       .tab-list {
155 |         display: flex;
156 |         .tab-item {
157 |           display: inline-block;
158 |           margin-left: 30px;
159 |           color: #424242;
160 |           border-bottom: 2px solid transparent;
161 |           transition: all .3s;
162 |           cursor: pointer;
163 |         }
164 | 
165 |         .active {
166 |           border-bottom: 2px solid #ff6709;
167 |           color: #ff6709;
168 |         }
169 |       }
170 |     }
171 | 
172 |     .type-more {
173 |       display: inline-block;
174 |       a {
175 |         font-size: 16px;
176 |         display: flex;
177 |         align-items: center;
178 |         span {
179 |           color: #424242;
180 |           transition: all .4s;
181 |         }
182 | 
183 |         i {
184 |           width: 20px;
185 |           height: 20px;
186 |           margin-left: 8px;
187 |           border-radius: 16px;
188 |           font-size: 15px;
189 |           line-height: 20px;
190 |           background: #b0b0b0;
191 |           color: #fff;
192 |           text-align: center;
193 |           vertical-align: 2px;
194 |           transition: all .4s;
195 |         }
196 | 
197 |         &:hover {
198 |           span {
199 |             color: #ff6709;
200 |           }
201 | 
202 |           i {
203 |             background: #ff6709;
204 |           }
205 |         }
206 |       }
207 |     }
208 |   }
209 | 
210 |   .box-content {
211 |     display: flex;
212 |     .promo-content .promo-one {
213 |       a {
214 |         display: block;
215 |         height: 614px;
216 |         img {
217 |           height: 100%;
218 |           width: 234px;
219 |         }
220 |       }
221 |     }
222 | 
223 |     .promo-two {
224 |       a {
225 |         display: block;
226 |         height: 300px;
227 |         img {
228 |           width: 234px;
229 |           height: 100%;
230 |         }
231 |       }
232 | 
233 |       a:first-child {
234 |         margin-bottom: 14px;
235 |       }
236 |     }
237 | 
238 |     .goods-content .goods-one,
239 |     .goods-content .goods-two {
240 |       width: 992px;
241 |       display: flex;
242 |       flex-wrap: wrap;
243 |       .goods-item {
244 |         background: #fff;
245 |         height: 300px;
246 |         padding: 20px 0;
247 |         width: 234px;
248 |         margin-left: 14px;
249 |         margin-bottom: 14px;
250 |       }
251 |     }
252 | 
253 |     .goods-two .goods-item-sm {
254 |       height: 300px;
255 |       width: 234px;
256 |       margin-left: 14px;
257 |       a {
258 |         display: flex;
259 |         justify-content: space-between;
260 |         height: 143px;
261 |         background: #fff;
262 |         padding: 30px 20px 30px 30px;
263 |         margin-bottom: 14px;
264 |         img {
265 |           width: 80px;
266 |           height: 80px;
267 |           margin: 0;
268 |         }
269 |       }
270 |     }
271 | 
272 |     .goods-two .goods-item-bg {
273 |       height: 300px;
274 |       width: 496px;
275 |       display: flex;
276 |       a {
277 |         display: block;
278 |         width: 234px;
279 |         background: #fff;
280 |         margin-left: 14px;
281 |         padding: 20px 0;
282 |       }
283 | 
284 |       .brick-more {
285 |         display: flex;
286 |         justify-content: space-between;
287 |         height: 143px;
288 |         padding: 30px 20px 30px 30px;
289 |         img {
290 |           width: 80px;
291 |           height: 80px;
292 |           margin: 0;
293 |         }
294 |       }
295 |     }
296 | 
297 |     .goods-content {
298 |       a {
299 |         display: block;
300 |         img {
301 |           width: 160px;
302 |           height: 160px;
303 |           margin: 0 auto 18px;
304 |         }
305 | 
306 |         .name {
307 |           font-size: 14px;
308 |           font-weight: 400;
309 |           color: #333;
310 |           margin: 0 10px 2px;
311 |         }
312 | 
313 |         .desc {
314 |           display: block;
315 |           margin: 0 10px 10px;
316 |           height: 18px;
317 |           font-size: 12px;
318 |           color: #b0b0b0;
319 |         }
320 | 
321 |         .price {
322 |           margin: 0 10px 14px;
323 |           font-size: 14px;
324 |           color: #ff6700;
325 |           del {
326 |             color: #b0b0b0;
327 |             margin-left: 8px;
328 |           }
329 |         }
330 |       }
331 |     }
332 |   }
333 | 
334 |   .brick-item {
335 |     transition: all .2s linear;
336 |     &:hover {
337 |       transform: translate3d(0, -2px, 0);
338 |       box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
339 |     }
340 |   }
341 | 
342 |   .goods-two .goods-item-sm,
343 |   .goods-two .goods-item-bg {
344 |     .look-more {
345 |       padding-top: 0 !important;
346 |       display: flex;
347 |       flex-direction: column;
348 |       align-self: center;
349 |       .name {
350 |         font-size: 18px;
351 |         color: #333;
352 |         margin: 0;
353 |       }
354 | 
355 |       .desc {
356 |         font-size: 12px;
357 |         color: #757575;
358 |         margin: 0;
359 |       }
360 |     }
361 | 
362 |     .text-container {
363 |       width: 94px;
364 |       padding-top: 10px;
365 |       text-align: left;
366 |       .name {
367 |         margin: 0 0 5px;
368 |       }
369 | 
370 |       .price {
371 |         margin: 0;
372 |       }
373 |     }
374 |   }
375 | </style>


--------------------------------------------------------------------------------
/src/parts/LocationWindow.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="window-trans">
  3 |     <div class="location-window window-container" v-show="windowFlag">
  4 |       <transition name="content-trans">
  5 |         <div class="window-content" v-show="contentFlag">
  6 |           <div class="window-header">
  7 |             <span class="name">Select location or language</span>
  8 |             <span class="close" @click="close">×</span>
  9 |           </div>
 10 |           <div class="window-body">
 11 |             <h3>Welcome to Mi.com</h3>
 12 |             <p>Please select location or language</p>
 13 |             <ul class="language-boxs">
 14 |               <li class="lang-item" v-for="(item, index) in languageData" :key="index">
 15 |                 <a :href="item.url" target="_blank">{{item.value}}</a>
 16 |               </li>
 17 |             </ul>
 18 |           </div>
 19 |         </div>
 20 |       </transition>
 21 |     </div>
 22 |   </transition>
 23 | </template>
 24 | 
 25 | <script>
 26 | import bus from '@/bus.js'
 27 | 
 28 | export default {
 29 |   data () {
 30 |     return {
 31 |       windowFlag: false,
 32 |       contentFlag: false,
 33 |       languageData: [
 34 |         {value: '繁体中文(HK)', url: 'https://www.mi.com/hk/'},
 35 |         {value: '繁体中文(TW)', url: 'https://www.mi.com/tw/'},
 36 |         {value: 'Singapore', url: 'https://www.mi.com/sg/'},
 37 |         {value: 'Malaysia', url: 'https://www.mi.com/my/'},
 38 |         {value: 'Philippines', url: 'https://www.mi.com/ph/'},
 39 |         {value: 'India', url: 'https://www.mi.com/in/'},
 40 |         {value: 'Indonesia', url: 'https://www.mi.com/id/'},
 41 |         {value: 'GlobalHome', url: 'https://www.mi.com/global/'},
 42 |         {value: 'MENA', url: 'https://www.mi.com/mena/'},
 43 |         {value: 'Poland', url: 'https://www.mi.com/pl/'},
 44 |         {value: 'Ukraine', url: 'https://www.mi.com/ua/'},
 45 |         {value: 'Russia', url: 'https://www.mi.com/ru/'},
 46 |         {value: 'Vietnam', url: 'https://www.mi.com/vn/'},
 47 |         {value: 'Mexico', url: 'https://www.mi.com/mx/'},
 48 |         {value: 'Korea', url: 'https://www.mi.com/kr/'},
 49 |         {value: 'Egypt', url: 'https://www.mi.com/eg/'},
 50 |         {value: 'Thailand', url: 'https://www.mi.com/th/'},
 51 |         {value: 'Spain', url: 'https://www.mi.com/es/'},
 52 |         {value: 'UnitedStates', url: 'https://www.mi.com/us/'},
 53 |         {value: 'Italy', url: 'https://www.mi.com/it/'},
 54 |         {value: 'France', url: 'https://www.mi.com/fr/'},
 55 |         {value: 'Bangladesh', url: 'https://www.mi.com/bd/'},
 56 |         {value: 'UnitedKingdom', url: 'https://www.mi.com/uk/'},
 57 |         {value: 'Chile', url: 'https://www.mi.com/cl/'},
 58 |         {value: 'Nepal', url: 'https://www.mi.com/np/'},
 59 |         {value: 'SriLanka', url: 'https://www.mi.com/lk/'},
 60 |         {value: 'Turkey', url: 'https://www.mi.com/tr/'},
 61 |         {value: 'Netherlands', url: 'https://www.mi.com/nl/'},
 62 |         {value: 'Brazil', url: 'https://www.mi.com/br/'}
 63 |       ]
 64 |     }
 65 |   },
 66 |   methods: {
 67 |     receive () {
 68 |       bus.$on('locationWindowEvent', (flag) => {
 69 |         this.windowFlag = true;
 70 |         this.contentFlag = true;
 71 |       })
 72 |     },
 73 |     close () {
 74 |       this.contentFlag = false;
 75 |     }
 76 |   },
 77 |   watch: {
 78 |     contentFlag (newvalue, oldvalue) {
 79 |       if (!newvalue) {
 80 |         setTimeout(() => {
 81 |           this.windowFlag = false;
 82 |         }, 300);
 83 |       }
 84 |     }
 85 |   },
 86 |   mounted () {
 87 |     this.receive();
 88 |   }
 89 | }
 90 | </script>
 91 | 
 92 | <style lang="less">
 93 |   .location-window .window-content {
 94 |     position: absolute;
 95 |     width: 840px;
 96 |     height: 566px;
 97 |     left: calc(50% - 420px);
 98 |     top: calc(50% - 283px);
 99 |     border-radius: 2px;
100 |     box-shadow: 0 1px 3px rgba(0,0,0,.3);
101 |     overflow: hidden;
102 |     .window-body {
103 |       width: 100%;
104 |       height: calc(100% - 60px);
105 |       background-color: #fff;
106 |       padding: 20px;
107 |     }
108 |   }
109 | 
110 |   .window-body {
111 |     h3 {
112 |       color: #424242;
113 |       font-size: 32px;
114 |       line-height: 48px;
115 |     }
116 | 
117 |     p {
118 |       color: #424242;
119 |       font-size: 18px;
120 |       line-height: 27px;
121 |     }
122 | 
123 |     .language-boxs {
124 |       width: 100%;
125 |       margin: 30px auto 0;
126 |       display: flex;
127 |       flex-flow: wrap;
128 |       overflow: hidden;
129 |       .lang-item {
130 |         margin: 0 10px 20px;
131 |         width: 140px;
132 |         height: 40px;
133 |         font-size: 14px;
134 |         font-weight: 600;
135 |         line-height: 40px;
136 |         background-color: #eee;
137 |         a {
138 |           display: inline-block;
139 |           color: #757575;
140 |         }
141 | 
142 |         &:hover {
143 |           background-color: #ff6700;
144 |           a {
145 |             color: #fff;
146 |           }
147 |         }
148 |       }
149 |     }
150 |   }
151 | </style>


--------------------------------------------------------------------------------
/src/parts/Poster.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="sale-poster">
 3 |     <a :href="postItem.url" target="_blank">
 4 |       <img :src="postItem.src">
 5 |     </a>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   data () {
12 |     return {}
13 |   },
14 |   props: ['postItem']
15 | }
16 | </script>
17 | 
18 | <style lang="less">
19 |   .sale-poster {
20 |     width: 100%;
21 |     height: 120px;
22 |     margin: 22px 0;
23 |     overflow: hidden;
24 |     a {
25 |       display: block;
26 |       width: 100%;
27 |       height: 100%;
28 |       img {
29 |         width: 100%;
30 |       }
31 |     }
32 |   }
33 | </style>


--------------------------------------------------------------------------------
/src/parts/Slide.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="sale-slide">
  3 |     <ul class="slide-container"
  4 |     :style="transformStyle">
  5 |       <li class="slide-item"
  6 |       v-for="(item, index) in slideItems"
  7 |       :key="index"
  8 |       :style="{'border-top-color': item.topColor}">
  9 |         <a :href="item.url">
 10 |           <img :src="item.src" :alt="item.value">
 11 |           <h3 class="name ellipsis">{{item.value}}</h3>
 12 |           <span class="desc ellipsis">{{item.desc}}</span>
 13 |           <div class="price">
 14 |             <span>{{item.newPrice}}元</span>
 15 |             <del>{{item.oldPrice}}元</del>
 16 |           </div>
 17 |         </a>
 18 |       </li>
 19 |     </ul>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | export default {
 25 |   data () {
 26 |     return {
 27 |       slideIndex: 0,
 28 |       slideTimer: '',
 29 |       Xvalue: 0
 30 |     }
 31 |   },
 32 |   props: ['slideItems'],
 33 |   methods: {
 34 |     next () {
 35 |       const lastIndex = parseInt(this.slideItems.length / 4);
 36 | 			if (this.slideIndex < lastIndex) {
 37 |         if (this.slideIndex === lastIndex - 1 && this.slideItems.length % 4 !== 0) {
 38 |           this.slideIndex += 1;
 39 |           this.Xvalue = - ((this.slideIndex - 1) * 992 + (this.slideItems.length % 4) * 248);
 40 |         } else {
 41 |           this.slideIndex += 1;
 42 |           this.Xvalue = - (this.slideIndex * 992);
 43 |         }
 44 | 			} else {
 45 |         this.slideIndex = 0;
 46 |         this.Xvalue = 0;
 47 | 			}
 48 |     },
 49 |     prev () {
 50 |       const lastIndex = parseInt(this.slideItems.length / 4);
 51 | 			if (this.slideIndex > 0) {
 52 |         this.slideIndex -= 1;
 53 |         this.Xvalue = - (this.slideIndex * 992);
 54 | 			} else {
 55 |         this.slideIndex = lastIndex;
 56 |         this.Xvalue =  - (lastIndex * 992);
 57 | 			}
 58 |     },
 59 |     play () {
 60 | 			clearInterval(this.slideTimer);
 61 | 			this.slideTimer = setInterval(() => {
 62 | 				this.next();
 63 | 			}, 5000);
 64 |     }
 65 |   },
 66 |   computed: {
 67 |     transformStyle () {
 68 |       return {
 69 |         'transform': `translate3d(${this.Xvalue}px, 0, 0)`
 70 |       }
 71 |     }
 72 |   },
 73 |   mounted () {
 74 |     this.play();
 75 |   }
 76 | }
 77 | </script>
 78 | 
 79 | <style lang="less">
 80 |   .sale-slide {
 81 |     width: 978px;
 82 |     height: 340px;
 83 |     margin-left: 14px;
 84 |     overflow: hidden;
 85 |     position: relative;
 86 |     display: flex;
 87 |     .slide-container {
 88 |       height: 340px;
 89 |       display: flex;
 90 |       transition: all 1s ease-in-out;
 91 |       .slide-item {
 92 |         display: block;
 93 |         width: 234px;
 94 |         margin-right: 14px;
 95 |         border-top-width: 1px;
 96 |         border-top-style: solid;
 97 |         text-align: center;
 98 |         background: #fff;
 99 |         a {
100 |           display: block;
101 |           height: 300px;
102 |           padding-top: 39px;
103 |         }
104 | 
105 |         img {
106 |           display: block;
107 |           width: 160px;
108 |           height: 160px;
109 |           margin: 0 37px 22px;
110 |         }
111 | 
112 |         .name {
113 |           display: block;
114 |           margin: 0 20px 3px;
115 |           font-size: 14px;
116 |           font-weight: 400;
117 |           color: #212121;
118 |         }
119 | 
120 |         .desc {
121 |           display: block;
122 |           height: 18px;
123 |           margin: 0 20px 12px;
124 |           font-size: 12px;
125 |           color: #b0b0b0;
126 |         }
127 | 
128 |         .price {
129 |           margin: 0 10px 14px;
130 |           font-size: 14px;
131 |           color: #ff6709;
132 |           del {
133 |             color: #b0b0b0;
134 |             margin-left: 4px;
135 |           }
136 |         }
137 |       }
138 |     }
139 |   }
140 | 
141 |   .ellipsis {
142 |     text-align: center;
143 |     text-overflow: ellipsis;
144 |     overflow: hidden;
145 |     white-space: nowrap;
146 |   }
147 | </style>


--------------------------------------------------------------------------------
/src/parts/VideoWindow.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="window-trans">
  3 |     <div class="video-window window-container" v-show="windowFlag">
  4 |       <transition name="content-trans">
  5 |         <div class="video-window" v-show="videoFlag">
  6 |           <div class="window-header">
  7 |             <span class="name">{{videoItem.value}}</span>
  8 |             <span class="close" @click="close">×</span>
  9 |           </div>
 10 |           <video :src="videoItem.videourl" ref="video" preload="auto" controls></video>
 11 |         </div>
 12 |       </transition>
 13 |     </div>
 14 |   </transition>
 15 | </template>
 16 | 
 17 | <script>
 18 | import bus from '@/bus.js'
 19 | 
 20 | export default {
 21 |   data () {
 22 |     return {
 23 |       videoItem: '',
 24 |       videoFlag: false,
 25 |       windowFlag: false,
 26 |     }
 27 |   },
 28 |   methods: {
 29 |     receive() {
 30 |       bus.$on('videoWindowEvent', (data) => {
 31 |         this.windowFlag = true;
 32 |         this.videoFlag = true;
 33 |         this.videoItem = data;
 34 |       })
 35 |     },
 36 |     close () {
 37 |       this.$refs.video.pause();// vue操作DOM
 38 |       // this.windowFlag = false;
 39 |       this.videoFlag = false;
 40 |     }
 41 |   },
 42 |   watch: {
 43 |     videoFlag (newvalue, oldvalue) {
 44 |       if (!newvalue) {
 45 |         setTimeout(() => {
 46 |           this.windowFlag = false;
 47 |         }, 300);
 48 |       }
 49 |     }
 50 |   },
 51 |   mounted () {
 52 |     this.receive();
 53 |   }
 54 | }
 55 | </script>
 56 | 
 57 | <style lang="less">
 58 |   .window-container {
 59 |     position: fixed;
 60 |     width: 100%;
 61 |     height: 100%;
 62 |     left: 0;
 63 |     top: 0;
 64 |     z-index: 999;
 65 |     background-color: rgba(0, 0, 0, 0.3);
 66 |     transition: opacity .2s;
 67 |     .video-window {
 68 |       position: absolute;
 69 |       width: 880px;
 70 |       height: 492px;
 71 |       left: calc(50% - 440px);
 72 |       top: calc(50% - 231px);
 73 |       border-radius: 2px;
 74 |       box-shadow: 0 1px 3px rgba(0,0,0,.3);
 75 |       overflow: hidden;
 76 | 
 77 |       video {
 78 |         width: 100%;
 79 |         height: 432px;
 80 |         background-color: #000;
 81 |       }
 82 |     }
 83 |   }
 84 | 
 85 |   .window-header {
 86 |     height: 60px;
 87 |     padding: 14px 20px;
 88 |     line-height: 32px;
 89 |     background-color: #f5f5f5;
 90 |     display: flex;
 91 |     justify-content: space-between;
 92 |     .name {
 93 |       font-size: 18px;
 94 |       font-weight: 400;
 95 |       color: #424242;
 96 |     }
 97 | 
 98 |     .close {
 99 |       vertical-align: middle;
100 |       width: 32px;
101 |       line-height: 32px;
102 |       font-size: 24px;
103 |       font-weight: 400;
104 |       border-radius: 30px;
105 |       color: #757575;
106 |       background-color: #f5f5f5;
107 |       transition: all .2s;
108 |       cursor: pointer;
109 |       &:hover {
110 |         color: #fff;
111 |         background: #e53935;
112 |       }
113 |     }
114 |   }
115 | 
116 |   // 窗口
117 |   .window-trans-enter-active, .window-trans-leave-active {
118 |     transition: all .3s ease-out;
119 |     opacity: 1;
120 |   }
121 | 
122 |   .window-trans-enter, .window-trans-leave-to {
123 |       opacity: 0;
124 |     }
125 | 
126 |   .window-trans-enter-to, .window-trans-leave {
127 |     opacity: 1;
128 |   }
129 | 
130 |   // 视频
131 |   .content-trans-enter-active, .content-trans-leave-active {
132 |     transition: all .3s ease-out;
133 |     transform: translateY(0%);
134 |     opacity: 1;
135 |   }
136 | 
137 |   .content-trans-enter, .content-trans-leave-to {
138 |       transform: translateY(-10%);
139 |       opacity: 0;
140 |     }
141 | 
142 |   .content-trans-enter-to, .content-trans-leave {
143 |     transform: translateY(0%);
144 |     opacity: 1;
145 |   }
146 | </style>


--------------------------------------------------------------------------------
/src/parts/WeChatWindow.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <transition name="window-trans">
 3 |     <div class="wechat-window window-container" v-show="windowFlag">
 4 |       <transition name="content-trans">
 5 |         <div class="window-content" v-show="contentFlag">
 6 |           <div class="window-header">
 7 |             <span class="name">小米手机官方微信二维码</span>
 8 |             <span class="close" @click="close">×</span>
 9 |           </div>
10 |           <div class="window-body">
11 |             <img src="https://i1.mifile.cn/f/i/17/site/weixin.jpg">
12 |           </div>
13 |         </div>
14 |       </transition>
15 |     </div>
16 |   </transition>
17 | </template>
18 | 
19 | <script>
20 | import bus from '@/bus.js'
21 | 
22 | export default {
23 |   data () {
24 |     return {
25 |       windowFlag: false,
26 |       contentFlag: false,
27 |     }
28 |   },
29 |   methods: {
30 |     receive () {
31 |       bus.$on('weChatWindowEvent', (flag) => {
32 |         this.windowFlag = true;
33 |         this.contentFlag = true;
34 |       })
35 |     },
36 |     close () {
37 |       this.contentFlag = false;
38 |     }
39 |   },
40 |   watch: {
41 |     contentFlag (newvalue, oldvalue) {
42 |       if (!newvalue) {
43 |         setTimeout(() => {
44 |           this.windowFlag = false;
45 |         }, 300);
46 |       }
47 |     }
48 |   },
49 |   mounted () {
50 |     this.receive();
51 |   }
52 | }
53 | </script>
54 | 
55 | <style lang="less">
56 |   .wechat-window .window-content {
57 |     position: absolute;
58 |       width: 720px;
59 |       height: 446px;
60 |       left: calc(50% - 360px);
61 |       top: calc(50% - 223px);
62 |       border-radius: 2px;
63 |       box-shadow: 0 1px 3px rgba(0,0,0,.3);
64 |       overflow: hidden;
65 |       .window-body {
66 |         width: 100%;
67 |         height: calc(100% - 60px);
68 |         background-color: #fff;
69 |         padding: 20px;
70 |         img {
71 |           width: 680;
72 |           height: 340px;
73 |         }
74 |       }
75 |   }
76 | </style>


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Mi from './views/mi.vue'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'mi',
12 |       component: Mi
13 |     }
14 |   ]
15 | })
16 | 


--------------------------------------------------------------------------------
/src/views/mi.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="index-page">
 3 |     <top-bar></top-bar>
 4 |     <top-header></top-header>
 5 |     <menu-banner></menu-banner>
 6 |     <sub-channel></sub-channel>
 7 |     <div class="gray-page">
 8 |       <flash-sale></flash-sale>
 9 |       <goods-sale></goods-sale>
10 |       <video-box></video-box>
11 |     </div>
12 |     <site-footer></site-footer>
13 |     <div class="gray-page">
14 |       <site-info></site-info>
15 |     </div>
16 |     <tool-bar></tool-bar>
17 |     <!-- 弹窗 -->
18 |     <video-window></video-window>
19 |     <we-chat-window></we-chat-window>
20 |     <location-window></location-window>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | import TopBar from '../components/TopBar'
26 | import TopHeader from '../components/TopHeader'
27 | import MenuBanner from '../components/MenuBanner'
28 | import SubChannel from '../components/SubChannel'
29 | import FlashSale from '../components/FlashSale'
30 | import GoodsSale from '../components/GoodsSale'
31 | import VideoBox from '../components/VideoBox'
32 | import SiteFooter from '../components/SiteFooter'
33 | import SiteInfo from '../components/SiteInfo'
34 | import ToolBar from '../components/ToolBar'
35 | 
36 | // 弹窗
37 | import VideoWindow from '../parts/VideoWindow'
38 | import WeChatWindow from '../parts/WeChatWindow'
39 | import LocationWindow from '../parts/LocationWindow'
40 | 
41 | export default {
42 |   data () {
43 |     return {}
44 |   },
45 |   components: {
46 |     'TopBar': TopBar,
47 |     'TopHeader': TopHeader,
48 |     'MenuBanner': MenuBanner,
49 |     'SubChannel': SubChannel,
50 |     'FlashSale': FlashSale,
51 |     'GoodsSale': GoodsSale,
52 |     'VideoBox': VideoBox,
53 |     'SiteFooter': SiteFooter,
54 |     'SiteInfo': SiteInfo,
55 |     'ToolBar': ToolBar,
56 |     'VideoWindow': VideoWindow,
57 |     'WeChatWindow': WeChatWindow,
58 |     'LocationWindow': LocationWindow,
59 |   }
60 | }
61 | </script>
62 | 
63 | <style lang="less">
64 |   .index-page {
65 |     .gray-page {
66 |       display: flex;
67 |       flex-direction: column;
68 |       width: 100%;
69 |       height: auto;
70 |       background-color: #f5f5f5;
71 |     }
72 |   }
73 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // 基本路径
 3 |   publicPath: './',
 4 |   // 输出文件目录
 5 |   outputDir: 'dist',
 6 |   devServer: {
 7 |     port: 8081, //端口
 8 |   },
 9 |   lintOnSave: false //取消eslint验证
10 | }


--------------------------------------------------------------------------------