|
|
|
|
@ -0,0 +1,113 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="header-top">
|
|
|
|
|
<div class="top-left">
|
|
|
|
|
<span style="font-size: 14px;margin-left: 30px">鲜花定制好花网，提供鲜花定制预定和送花上门服务！</span>
|
|
|
|
|
<span style="color: red; font-weight: bold;">123-456-7890</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="top-right">
|
|
|
|
|
<el-button class="top-button" @click="navTo('/cart')" type="text">
|
|
|
|
|
<i class="el-icon-shopping-cart-2" style="font-weight: bold;font-size: 16px"></i>
|
|
|
|
|
购物车
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button class="top-button" @click="navTo('/user')" type="text">
|
|
|
|
|
<i class="el-icon-user" style="font-weight: bold;font-size: 16px"></i>
|
|
|
|
|
个人中心
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button class="top-button" @click="navTo('/chat')" type="text">
|
|
|
|
|
<i class="el-icon-chat-dot-round" style="font-weight: bold;font-size: 16px"></i>
|
|
|
|
|
联系客服定制鲜花
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button class="top-button" @click="logout" type="text">退出</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header-bottom">
|
|
|
|
|
<div class="bottom-left">
|
|
|
|
|
<a href="/home"><img src="@/assets/homeLogo.png" style="width: 400px;height: 400px;margin-left: 50px"></a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom-center" style="display: flex">
|
|
|
|
|
<el-input placeholder="请输入搜索内容" v-model="input"></el-input>
|
|
|
|
|
<el-button @click="navTo('/search?key=' + input)" type="danger" icon="el-icon-search" round ></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom-right">
|
|
|
|
|
<img src="@/assets/phone.png" style="width: 280px;height: 70px;margin-right: 50px">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import Cookie from "js-cookie";
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
export default {
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
input:''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
navTo(url){
|
|
|
|
|
location.href = url
|
|
|
|
|
},
|
|
|
|
|
logout(){
|
|
|
|
|
this.$confirm('确认退出？', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
//登出功能，清空Cookie中的token
|
|
|
|
|
Cookie.remove('token')
|
|
|
|
|
//清空Cookie中的menu
|
|
|
|
|
Cookie.remove('menu')
|
|
|
|
|
this.$router.push('/visitor')
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
.header-top{
|
|
|
|
|
background-color: #f4f4f4;
|
|
|
|
|
height: 50px;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.header-bottom{
|
|
|
|
|
height: 130px;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-right{
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
}
|
|
|
|
|
.header-bottom .el-input__inner{
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 60px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
border: 3px solid #f66d6e;
|
|
|
|
|
}
|
|
|
|
|
.header-bottom .el-input__inner:hover{
|
|
|
|
|
border-color: #f66d6e;
|
|
|
|
|
}
|
|
|
|
|
.header-bottom .el-button{
|
|
|
|
|
height: 60px;
|
|
|
|
|
width: 70px;
|
|
|
|
|
margin: 0 0 0 -60px;
|
|
|
|
|
z-index: 999
|
|
|
|
|
}
|
|
|
|
|
.top-right .top-button{
|
|
|
|
|
color: #333;
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: bolder;
|
|
|
|
|
}
|
|
|
|
|
.top-right .top-button:hover{
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
