发表于： 2019-10-21 23:13:25
1 845
今天完成的事情：
1.写了一个半页面（其实就是一个）：
<template>
<div class="search">
<nav>
<img src="../assets/images/热门推荐/u538.svg" alt class="navImgLeft" />
<p class="navWord">搜索</p>
<img src="../assets/images/首页-视频1/u10.svg" alt class="navImgRight" />
</nav>
<div class="keyWord">
<img src="../assets/images/首页-视频1/u42.svg" alt />
<input type="text" placeholder="请输入关键词" />
<span>取消</span>
</div>
<main>
<div class="sorry" v-if="sorry">
<p>抱歉，没有发现的相关内容</p>
<p>换个关键词试试吧</p>
</div>
<div class="record">
<p>搜索记录</p>
<p>清空</p>
</div>
<div class="recordWord">
<span v-for="(record, index) in searchRecord" :key="index">{{record}}</span>
</div>
</main>
<footer>
<div class="foot">
<img src="../assets/images/首页-视频1/u15.svg" alt />
<p>首页</p>
</div>
<div class="foot">
<img src="../assets/images/首页-视频1/u20.svg" alt />
<p>学习</p>
</div>
<div class="foot">
<img src="../assets/images/首页-视频1/u19.svg" alt />
<p>论坛</p>
</div>
<div class="foot">
<img src="../assets/images/首页-视频1/u18.svg" alt />
<p>我的</p>
</div>
</footer>
</div>
</template>
<script>
export default {
name: "search",
data() {
return {
sorry: true,
searchRecord: [
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优"
]
};
}
};
</script>
<style lang="scss" scope>
.search {
nav {
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
top: 50px;
width: 100%;
height: 44px;
background-color: #e9e516;
.navImgLeft {
margin-left: 10px;
}
.navImgRight {
margin-right: 10px;
}
}
.keyWord {
position: relative;
margin-top: 80px;
padding: 0 10px;
img {
position: absolute;
left: 12px;
top: 50%;
width: 20px;
height: 14px;
margin-top: -7px;
}
input {
width: 75%;
height: 25px;
padding-left: 22px;
margin-right: 10px;
font-size: 14px;
border: 1px solid #aaa5a5;
border-radius: 5px;
outline: none;
}
}
main {
.sorry {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding-top: 20px;
}
.record {
display: flex;
justify-content: space-between;
padding: 0 20px;
}
.recordWord {
display: flex;
flex-flow: row wrap;
padding: 0 15px;
span {
font-size: 12px;
margin: 5px;
padding: 0 5px;
color: #7f7f7f;
background-color: #e3e3e3;
border: 1px solid #7f7f7f;
border-radius: 5px;
}
}
}
footer {
position: fixed;
bottom: 0;
height: 49px;
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
padding: 0 5%;
background-color: #e3e3e3;
.foot {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
p {
margin: 0;
font-size: 12px;
}
}
}
}
</style>
明天计划：
写两个页面（逐渐加速）
返回列表
评论