(src/components/Header.vue)
<template>
<div class="header flex j-s a-c">
<div class="left flex a-c j-s">
<div>
<img src="/images/logo.png">
</div>
<div class="flex a-c">
<a class="sy" href="javascript:;">首页</a>
<a href="javascript:;">下载App</a>
<div class="txt flex a-c">
<input type="text" placeholder="搜索">
<i class="iconfont"></i>
</div>
</div>
</div>
<div class="right flex j-s a-c">
<div class="flex j-s a-c">
<a href="javascript:;">登录</a>
<a href="javascript:;"><i class="iconfont"></i></a>
</div>
<div class="flex j-s a-c">
<div class="zc">注册</div>
<div class="xwz flex a-c j-c">
<i class="iconfont"></i>写文章
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'Header'
}
</script>
<style scoped>
.header{ border-bottom: 1px solid #eee;}
.left{ width: 500px;}
.left img{height: 50px;}
.left a{padding: 0 10px;}
.left .sy{color: red;}
.left .txt{
height: 30px;
padding:0 10px;
border-radius: 15px;
background: #eee;
}
.left .txt input{
border: none;
background: transparent;
}
.right{width: 350px;}
.right a{
color: #666;
margin: 0 10px;
}
.right .zc{
height: 30px;
border: 1px solid rgb(255, 112, 55);
padding: 0 20px;
line-height: 30px;
font-size: 13px;
border-radius: 15px;
margin-right: 20px;
}
.right .xwz{
height: 30px;
padding: 0 20px;
background: rgb(255, 112, 55);
font-size: 13px;
border-radius: 15px;
color: white;
}
</style>
(src/App.vue)
<template>
<div id="app">
<Header/>
<router-view></router-view>
</div>
</template>
<script>
import Header from './components/Header.vue'
export default {
name: 'App',
components: { Header }
}
</script>
<style>
@import url('/iconfont/iconfont.css');
*{
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
outline: none;
}
a{color: black;}
.flex{display: flex;}
.j-c{ justify-content: center;}
.j-s{ justify-content: space-between;}
.a-c{align-items: center;}
#app {
width: 1200px;
margin: 0px auto;
}
</style>
(src/components/List.vue)
<template>
<div class="list">
<div v-for="(item,index) in list" :key="index" class="item flex j-s">
<div>
<div class="title">{{item.title}}</div>
<div class="desc">{{item.desc}}</div>
</div>
<div class="img">
<img :src="item.imgUrl">
</div>
</div>
</div>
</template>
<script>
export default {
name: "List",
props:['list'],
};
</script>
<style scoped>
.list{ width: 600px;}
.item{
padding: 10px 5px;
box-sizing: border-box;
border-bottom: 1px solid #eee;
}
.item .title{
font-weight: bold;
margin-bottom: 10px;
}
.item .desc{
font-size: 13px;
color: #666;
}
.item .img{ margin-left: 5px;}
.item img{width: 140px;}
</style>
(src/pages/Home.vue)
<template>
<div class="home flex j-s">
<div>
<img class="top" src="/images/home.png" />
<List :list="listInfo" />
</div>
<div><Recommend /></div>
</div>
</template>
<script>
import List from "@c/List.vue";
import Recommend from "@c/Recommend.vue";
import axios from "axios";
export default {
name: "Home",
components: {
List,
Recommend,
},
data() {
return {listInfo: [],};
},
mounted() {
axios.get("/api/home.json").then(({data: {data: { listInfo }}}) => {
this.listInfo = listInfo;
}
);
},
};
</script>
<style scoped>
.home {
width: 900px;
margin: 10px auto;
}
.home .top {width: 600px;}
</style>
(src/router/index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '@p/Home.vue'
export default new VueRouter({
routes:[
{
path:'/',
component:Home
}
]
})
(src/components/Recommend.vue)
<template>
<div class="rec">
<img src="/images/recom01.png">
<img src="/images/recom02.png">
<img src="/images/recom03.png">
<img src="/images/recom04.png">
</div>
</template>
<script>
export default {name:'Recommend'}
</script>
<style scoped>
.rec{ width: 260px;}
img{ width: 260px;}
</style>
