发表于: 2019-11-05 22:43:10
1 1074
今天完成的事情:
1.今天进行了项目页面的重构和组件的模块化,使用import来引用重复的组件:
<template>
<!-- 视频缩略图 -->
<div class="thumbnail">
<div v-for="source in resource" :key="source.id" class="source">
<router-link to="/headVideo">
<div class="sourceStyle">
<img :src="source.img" alt />
<div class="sourceName">
<p>{{source.name}}</p>
</div>
<div class="sourcePrice">
<p>{{source.price}}</p>
<p class="oldPrice">{{source.oldPrice}}</p>
</div>
</div>
</router-link>
</div>
</div>
</template>
<script>
export default {
name: "thumbnail",
data() {
return {
resource: [
{
id: 1,
img:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
name: "《气体摩尔体积》",
price: "¥10",
oldPrice: "¥30"
},
{
id: 2,
img:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
name: "《商品的含义和气体基本属性(第一课)》",
price: "¥15",
oldPrice: "¥40"
},
{
id: 3,
img:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
name: "《商品的含义和气体基本属性(第二课)》",
price: "免费"
},
{
id: 4,
img:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
name: "《商品的含义和气体基本属性(第二课)》",
price: "免费"
}
]
}
},
};
</script>
<style lang="scss" scope>
.thumbnail {
width: 100%;
display: flex;
flex-flow: row wrap;
padding-top: 15px;
.source {
width: 50%;
.sourceStyle {
display: flex;
flex-flow: column nowrap;
align-items: center;
padding-bottom: 5px;
img {
width: 153px;
height: 84px;
}
p {
margin: 0;
}
.sourceName {
min-height: 31px;
font-size: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.sourcePrice {
font-size: 12px;
display: flex;
.oldPrice {
text-decoration: line-through;
color: #7f7f7f;
}
}
}
}
a {
-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: #000;
}
}
</style>
引用:
<template>
<!-- 搜索视频 -->
<div class="courseVideo">
<div class="sort">
<p :class="{'sortClick':sortClick==1}" @click="sortClick=1">全部</p>
<p :class="{'sortClick':sortClick==2}" @click="sortClick=2">最热</p>
<p :class="{'sortClick':sortClick==3}" @click="sortClick=3">销量</p>
<p :class="{'sortClick':sortClick==4}" @click="sortClick=4">免费</p>
</div>
<p class="sourceNum">共12条相关内容</p>
<thumbnail></thumbnail>
</div>
</template>
<script>
import thumbnail from '../components/Thumbnail.vue';
export default {
name: "courseVideo",
components: {
thumbnail
},
data() {
return {
sortClick: 1,
};
}
};
</script>
<style lang="scss" scope>
.courseVideo {
.sort {
display: flex;
justify-content: space-around;
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
p {
font-size: 12px;
margin: 10px 5px;
border-radius: 5px;
padding: 0 3px;
}
.sortClick {
background-color: #000;
color: #fff;
}
}
.sourceNum {
font-size: 8px;
color: #555;
}
}
</style>
引用2:
<template>
<div class="recommend">
<thumbnail></thumbnail>
</div>
</template>
<script>
import thumbnail from '../../components/Thumbnail.vue';
export default {
name: "recommend",
components: {
thumbnail
},
data() {
return {
};
}
};
</script>
<style lang="scss" scope>
</style>
明天计划:
1.把组件模块化弄完
2.然后进行vuex的学习
3.还需要学习axios的封装,为了在组件中更好的复用axios
评论