views下新建Search.vue页 并配置路由
components下新建search 下新建header.vue组件
<template>
<header>
<div class="search-return" @click="goBack">
<i class="iconfont icon-fanhui"></i>
</div>
<div class="search-main">
<i class="iconfont icon-RectangleCopy"></i>
<form action="" onsubmit="return false">
<input type="search" placeholder="搜索您喜欢的产品。。。" />
</form>
</div>
<div class="search-btn">搜索</div>
</header>
</template>
<script>
export default {
methods: {
goBack() {
this.$router.back();
},
},
};
</script>
<style scoped>
header {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 1.1733rem;
background-color: #4ac23f;
color: #fff;
}
.search-return .search-btn {
padding: 0 0.26rem;
}
.search-return i {
font-size: 0.6rem;
}
.search-main {
display: flex;
width: 6.9rem;
height: 0.8rem;
align-items: center;
background-color: #fff;
border-radius: 0.32rem;
}
.search-main form {
display: flex;
justify-content: center;
align-items: center;
}
.search-main i {
padding: 0 0.16rem;
color: black;
font-size: 0.68rem;
}
.search-btn {
font-size: 0.4267rem;
}
</style>
在search页面中引用
<template>
<div class="search">
<Header />
<section>
<div class="search-history">
<h2>
<i class="iconfont icon-shijian"></i>
<span>历史搜索</span>
<span>清空历史搜索</span>
</h2>
<ul>
<li>茶叶</li>
<li>茶叶</li>
<li>茶叶</li>
<li>茶叶</li>
<li>茶叶</li>
<li>茶叶</li>
<li>茶叶</li>
</ul>
</div>
</section>
<Tabbar />
</div>
</template>
<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/search/Header.vue";
export default {
components: {
Tabbar,
Header,
},
};
</script>
<style scoped>
.search {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
overflow: hidden;
}
section {
flex: 1;
overflow: hidden;
background-color: #f5f5f5;
overflow: hidden;
}
.search-history h2 {
position: relative;
padding: 20px;
font-weight: 400;
font-size: 0.48rem;
}
.search-history h2 i {
color: red;
padding-right: 0.08rem;
font-size: 0.48rem;
}
.search-history h2 span:last-child{
position: absolute;
top: .7333rem;
right: .32rem;
font-size: .32rem;
}
.search-history ul {
display: flex;
flex-wrap: wrap;
padding: 0.53333rem 0;
}
.search-history ul li {
border: 1px solid #ccc;
font-size: 0.3733rem;
margin: 0.2667rem;
padding: 0.08rem 0.16rem;
}
</style>
效果如下