路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'Home',
component: Home
},
]
const router = new VueRouter({
routes
})
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
APP.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss">
* {
margin: 0;
padding: 0;
list-style: none;
outline: none;
text-decoration: none;
}
.flex {
display: flex;
}
.j-c {
justify-content: center;
}
.j-s {
justify-content: space-between;
}
.a-c {
align-items: center;
}
#app {
width: 1200px;
margin: 0 auto;
}
</style>
Banner.vue
<template>
<div class="banner">
<div class="box">
<ul>
<li v-for="(item, index) in list" :key="index" class="flex j-s a-c">
{ { item }}<span>></span>
</li>
</ul>
<img src="image/T1vWdTBKDv1RXrhCrK.jpg" alt="" />
</div>
</div>
</template>
<script>
export default {
name: "Banner",
data() {
return {
list: [
"手机 平板",
"电视 盒子",
"路由器 智能配件",
"移动电源 插线板",
"耳机 音箱",
"电池 存储卡",
"保护套 后盖",
"贴膜 其它配件",
"米兔 服装",
"背包 其它周边",
],
};
},
};
</script>
<style scoped lang='scss'>
.banner {
width: 1100px;
height: 500px;
padding: 0 30px;
box-sizing: border-box;
margin: 0 auto;
.box {
position: relative;
img {
width: 1040px;
height: 500px;
}
ul {
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 220px;
height: 500px;
box-sizing: border-box;
background-color: rgba(61, 60, 60, 0.8);
color: #fff;
cursor: pointer;
font-size: 13px;
padding: 15px 0;
li {
padding: 10px;
padding-left: 20px;
span {
display: block;
font-size: 20px;
}
}
li:hover {
background-color: rgba(168, 51, 2, 0.2);
}
}
}
}
</style>
Bootentry.vue
<template>
<div class="bootentry flex j-s">
<ul class="list flex a-c">
<li v-for="(item, index) in list" :key="index" class="item flex">
{ { item.title }}
<span>{ { item.content }}</span>
</li>
</ul>
<div><img src="/image/T184E_BQWT1RXrhCrK.jpg" alt="" /></div>
<div><img src="/image/T1yvd_BQDT1RXrhCrK.jpg" alt&#