将四个路由组件的静态页面写出,对于最上方的一栏,四个组件具有相同的样式,因此将具有相同样式的部分提取出来设计成一个新的组件,方便复用。
公共组件HeaderTop.vue代码如下:
<template>
<header class="header">
<!-- 定义一个插槽(等着组件的使用者进行填充) 这个是具名插槽-->
<slot name="left"></slot>
<span class="header_title">
<span class="header_title_text ellipsis">{{title}}</span>
</span>
<slot name="right"></slot>
</header>
</template>
<script>
export default {
name: "HeaderTop",
//组件接收外部传过来的数据
props:{
//限制类型
title:String
}
}
</script>
<style scoped>
.header{
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 45px;
/*padding-top: 10px;*/
/*padding-bottom: 10px;*/
/*padding-bottom: 10px;*/
background-color: #02a774;
}
.header_search i {
width: 20%;
margin-left: 20px;
font-size: 30px;
color: white;
}
.header_title{
flex: 1;
height: 30px;
margin-top: 10px;
border-radius: 20px;
color: white;
font-size: 20px;
text-align: center;
}
.header_login{
width:20%;
height: 40%;
margin-right: 20px;
text-align: right;
font-size: 20px;
color: white;
}
</style>
四个路由组件代码如下:
Msite.vue
<template>
<div class="msite">
<!-- 首页头部-->
<HeaderTop title="临潼区西安工程大学计算机科学学院">
<span class="header_search" slot="left">
<i class="iconfont icon-sousuo"></i>
</span>
<span class="header_login" slot="right">
<span class="header_login_text">登陆注册</span>
</span>
</HeaderTop>
<!-- 首页导航-->
<nav class="msite_nav">
<div class="nav_items">
<a class="nav_item">
<img src="./images/nav/1.jpg" alt="">
<span class="nav_title">甜品饮品</span>
</a>
<a class="nav_item">
<img src="./images/nav/2.jpg" alt="">
<span class="nav_title">甜品饮品</span>
</a>
<a class="nav_item">
<img src="./images/nav/3.jpg" alt="">
<span class="nav_title">甜品饮品</span>
</a>
<a class="nav_item">
<img src="./images/nav/4.jpg" alt="">
<span class="nav_title">甜品饮品</span>
</a>
<a class="nav_item">
<img src="./images/nav/5.jpg" alt="">
<span class="nav_title">甜品饮品</span>
</a>
<a class="nav_item">
<img src="./images/nav/6.jpg" alt="">
<span class="nav_title">甜品饮品</span>
</a>
<a class="nav_item">
<img src="./images/nav/7.jpg" alt="">
<span class="nav_title">甜品饮品</span>
</a>
<a class="nav_item">
<img src="./images/nav/8.jpg" alt="">
<span class="nav_title">甜品饮品</span>
</a>
</div>
<a href="#" class="nav_spot">
<span></span>
<span></span>
</a>
</nav>
<!-- 首页附近商家-->
<div class="msite_shop_list">
<div class="shop_header">
<a href="#" class="iconfont icon-Order"></a>
<span>附近商家</span>
</div>
<div class="shop_contents">
<div class="shop_item">
<img src="./images/shop/1.jpg" alt="">
</div>
<div class="shop_item">
<img src="./images/shop/2.jpg" alt="">
</div>
<div class="shop_item">
<img src="./images/shop/3.jpg" alt="">
</div>
<div class="shop_item">
<img src="./images/shop/4.jpg" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop";
export default {
name: "MSite",
components:{
HeaderTop
}
}
</script>
<style scoped>
*{
box-sizing: border-box;
}
/*msite_header模块*/
.header{
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 45px;
/*padding-top: 10px;*/
/*padding-bottom: 10px;*/
/*padding-bottom: 10px;*/
background-color: #02a774;
}
.header_search i {
width: 20%;
margin-left: 20px;
font-size: 30px;
color: white;
}
.header_title{
flex: 1;
height: 30px;
margin-top: 10px;
border-radius: 20px;
color: white;
font-size: 20px;
text-align: center;
}
.header_login{
width:20%;
height: 40%;
margin-right: 20px;
text-align: right;
font-size: 20px;
color: white;
}
/* msite_nav模块*/
.msite_nav{
background-color: white;
width: 100%;
/*不需要设置高,让里面内容把盒子撑开*/
margin-top: 70px;/*msite_header是固定定位 脱标不占位置,所以要设个上边距才能把此盒子完全显示出来*/
}
.nav_items{
display: flex;
flex-wrap: wrap;
}
.nav_item{
width: 25%;
text-align: center;
}
/*重新设定图片尺寸*/
.nav_item img{
width: 150px;
height: 150px;
}
.nav_title{
display: block;
text-align: center;
font-size: 20px;
}
.nav_spot{
display: flex;
justify-content: center;
width: 100%;
text-align: center;
}
.nav_spot span{
width: 10px;
height: 10px;
margin: 10px;
border-radius: 20px;
background-color: #a5a4a4;
}
/*msite_shop_list模块*/
.msite_shop_list{
margin-top: 20px;
width: 100%;
background-color: #fff;
}
.shop_header{
padding-top: 20px;
margin-bottom: 20px;
}
.shop_header a{
color: #a5a4a4;
font-size: 25px;
}
.shop_header span{
font-size: 25px;
color: #a5a4a4;
}
.shop_item{
/*这里如果设外边距 会出现外边距合并问题*/
padding: 20px 10px;
border-top: 1px solid #e0dede;
}
.shop_item img{
width: 200px;
height: 200px;
}
</style>
Order.vue
<template>
<div class="order">
<HeaderTop title="订单列表"></HeaderTop>
<div class="order_no_login">
<img src="./images/person.png" alt="">
<h3>登录后查看外卖订单</h3>
<button>立即登录</button>
</div>
</div>
</template>
<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop";
export default {
name: "Order",
components:{
HeaderTop
}
}
</script>
<style scoped>
/*.header{*/
/* position: fixed;*/
/* top: 0;*/
/* left: 0;*/
/* width: 100%;*/
/* height: 45px;*/
/* color: white; !*这个属性不起作用 因为在reset.css默认样式文件中给a设置了灰色 优先级比这里高 所以在下面重新设置了一下*!*/
/* font-size: 20px;*/
/* text-align: center;*/
/* line-height: 45px;*/
/* !*padding-top: 10px;*!*/
/* !*padding-bottom: 10px;*!*/
/* !*padding-bottom: 10px;*!*/
/* background-color: #02a774;*/
/*}*/
/*.header_title_text{*/
/* color: white;*/
/*}*/
.order_no_login{
padding-top: 140px;
width: 60%;
margin: 0 auto;
text-align: center;
}
.order_no_login img{
display: block;
width: 100%;
height: 30%;
}
.order_no_login h3{
width: 100%;
height: 20%;
color: #999898;
font-size: 20px;
}
.order_no_login button{
margin-top: 10px;
color: white;
font-size: 20px;
background-color: #02a774;
/*去除button默认颜色样式*/
border: none;
outline: none;
padding: 10px 20px;
border-radius: 10px;
}
</style>
Search.vue
<template>
<div class="search">
<HeaderTop title="搜索"></HeaderTop>
<form class="search_form" action="#">
<input class="search_input" type="search" placeholder="请输入商家或美食名称">
<button class="search_button">提交</button>
</form>
</div>
</template>
<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop";
export default {
name: "Search",
//映射成标签
components:{
HeaderTop
}
}
</script>
<style scoped>
.search{
width: 100%;
}
/*.header{*/
/* position: fixed;*/
/* top: 0;*/
/* left: 0;*/
/* width: 100%;*/
/* height: 45px;*/
/* color: white;*/
/* font-size: 20px;*/
/* text-align: center;*/
/* line-height: 45px;*/
/* !*padding-top: 10px;*!*/
/* !*padding-bottom: 10px;*!*/
/* !*padding-bottom: 10px;*!*/
/* background-color: #02a774;*/
/*}*/
.search_form{
display: flex;
margin-top: 45px;
height: 45px;
width: 100%;
}
.search_input{
flex: 60%;
margin: 5px 10px;
background-color: #e0dfdf;
}
.search_button{
width: 15%;
margin: 5px 10px 5px 5px;
color: white;
font-size: 20px;
background-color: #02a774;
border: none;
}
</style>
Profile.vue
<template>
<div class="profile">
<HeaderTop title="我的"></HeaderTop>
<div class="profile_number">
<div class="profile_image">
<i class="iconfont icon-wode-tianchong"></i>
</div>
<div class="user-info">
<p class="user-info-top">登录/注册</p>
<p>
<span class="user-icon">
<i class="iconfont icon-shouji1"></i>
</span>
<span class="icon-mobile-number">暂无绑定手机号</span>
</p>
</div>
<span class="arrow">
<i class="iconfont icon-jiantouyou"></i>
</span>
</div>
<div class="profile_data">
<div class="data_count">
<span><i>0.00</i>元</span>
<span>我的余额</span>
</div>
<div class="data_count">
<span><i>0</i>个</span>
<span>我的优惠</span>
</div>
<div class="data_count">
<span><i>0</i>分</span>
<span>我的积分</span>
</div>
</div>
<div class="profile_items">
<div class="items_list">
<div class="list_image">
<i class="iconfont icon-tongxunlu"></i>
</div>
<div class="list-info">
<p>我的订单</p>
</div>
<span class="list_jiantou">
<i class="iconfont icon-jiantouyou"></i>
</span>
</div>
<div class="items_list">
<div class="list_image">
<i class="iconfont icon-shoucang-weixuanzhong"></i>
</div>
<div class="list-info">
<p>积分商城</p>
</div>
<span class="list_jiantou">
<i class="iconfont icon-jiantouyou"></i>
</span>
</div>
<div class="items_list">
<div class="list_image">
<i class="iconfont icon-a-xihuandianzan"></i>
</div>
<div class="list-info">
<p>硅谷外卖会员卡</p>
</div>
<span class="list_jiantou">
<i class="iconfont icon-jiantouyou"></i>
</span>
</div>
<div class="items_list">
<div class="list_image">
<i class="iconfont icon-dianzan"></i>
</div>
<div class="list-info">
<p>服务中心</p>
</div>
<span class="list_jiantou">
<i class="iconfont icon-jiantouyou"></i>
</span>
</div>
</div>
</div>
</template>
<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop";
export default {
name: "Profile",
components:{
HeaderTop
}
}
</script>
<style scoped>
/*header模块*/
/* .header{*/
/* position: fixed;*/
/* top: 0;*/
/* left: 0;*/
/* width: 100%;*/
/* height: 45px;*/
/* color: white;*/
/* font-size: 20px;*/
/* text-align: center;*/
/* line-height: 45px;*/
/* !*padding-top: 10px;*!*/
/* !*padding-bottom: 10px;*!*/
/* !*padding-bottom: 10px;*!*/
/* background-color: #02a774;*/
/* }*/
/*登录注册模块*/
.profile_number{
margin-top: 45.5px;
}
.profile_number{
display: flex;
width: 100%;
height: 120px;
background-color: #02a774;
}
.profile_image{
width: 15%;
line-height: 120px;
text-align: center;
}
.profile_image i{
font-size: 80px;
color: white;
}
.user-info{
width: 80%;
margin: 35px 0;
}
.user-info-top{
color: white;
font-size: 20px;
padding-bottom: 10px;
}
.icon-mobile-number{
color: white;
font-size: 20px;
}
.user-icon i{
color: white;
font-size: 20px;
}
.arrow{
text-align: center;
line-height: 120px;
color: white;
}
.arrow i{
font-size: 25px;
}
/* 账户余额模块*/
.profile_data{
display: flex;
width: 100%;
height: 150px;
border-bottom: 1px solid #a5a4a4;
}
.data_count{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20px;
color: #a5a4a4;
}
.data_count span{
padding: 5px 0;
}
.data_count span i{
padding-right: 5px;
font-size: 40px;
color: #F5A100;
}
.data_count:nth-child(-n+2){
border-right: 1px solid #a5a4a4;
}
.profile_items{
display: flex;
flex-direction: column;
}
.items_list{
display: flex;
height: 80px;
border-bottom: 1px solid #a5a4a4;
}
.list_image{
width: 10%;
color: #02a774;
text-align: center;
line-height: 80px;
}
.list_image i{
font-size: 30px;
}
.list-info{
width: 90%;
color: black;
font-size: 20px;
line-height: 80px;
}
.list_jiantou{
right: 0;
color: #a5a4a4;
text-align: center;
line-height: 80px;
}
</style>