发表于： 2019-10-22 23:35:36
1 881
今天完成的事情：
把另一个页面写出来了：
<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="choice">
<p>课程视频</p>
<p>教辅资料</p>
</div>
<main>
<div class="sort">
<p>默认</p>
<p>最热</p>
<p>销量</p>
<p>免费</p>
</div>
<div v-for="source in resource" :key="source.id" class="source">
<div class="sourceContent">
<img src="../assets/images/首页-视频1/u57.svg" alt />
<div class="sourceName">
<p>{{source.name}}</p>
<span>{{source.label.one}}</span>
<span>{{source.label.two}}</span>
<span>{{source.label.thr}}</span>
</div>
</div>
<div class="sourcePrice">
<p>{{source.price}}</p>
<p class="oldPrice" v-if="oldPrice">{{source.oldPrice}}</p>
</div>
</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,
oldPrice: true,
resource: [
{
id: "",
img: "",
name: "《气体摩尔体积》",
label: {
one: "1",
two: "2",
thr: "3"
},
price: "￥10",
oldPrice: "￥30"
},
{
id: "",
img: "",
name: "《商品的含义和气体基本属性（第一课）》",
label: {
one: "1",
two: "2",
thr: "3"
},
price: "￥15",
oldPrice: "￥40"
}
],
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;
}
}
.choice {
margin-top: 70px;
display: flex;
justify-content: center;
align-items: center;
p {
margin: 0 10px;
border-bottom: 1px solid #fff;
&:hover {
border-bottom: 1px solid #000;
}
}
}
main {
.sort {
display: flex;
p {
font-size: 12px;
margin: 10px 5px;
border-radius: 5px;
padding: 0 2px;
&:hover {
background-color: #000;
color: #fff;
}
}
}
.source {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
.sourceContent {
display: flex;
img {
width: 91px;
height: 60px;
}
.sourceName {
padding: 0 10px;
span {
font-size: 8px;
margin: 5px;
padding: 0 5px;
color: #7f7f7f;
background-color: #e3e3e3;
border: 1px solid #7f7f7f;
border-radius: 5px;
}
}
}
p {
font-size: 10px;
}
.sourcePrice {
.oldPrice {
border-bottom: 1px solid #000;
}
}
}
}
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>
明天计划：
没有达到要求，明天要两页
返回列表
评论