发表于： 2019-10-23 22:21:43
1 932
今天完成的事情：
做了两个页面，第三个做了个开头：
<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>
<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">
<router-link to="/headVideo">
<p>{{source.name}}</p>
</router-link>
<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">{{source.oldPrice}}</p>
</div>
</div>
<p class="mainMore">没有更多了~</p>
</div>
</template>
<script>
export default {
name: "courseVideo",
data() {
return {
sortClick: 1,
resource: [
{
id: 1,
img: "",
name: "《气体摩尔体积》",
label: {
one: "1",
two: "2",
thr: "3"
},
price: "￥10",
oldPrice: "￥30"
},
{
id: 2,
img: "",
name: "《商品的含义和气体基本属性（第一课）》",
label: {
one: "1",
two: "2",
thr: "3"
},
price: "￥15",
oldPrice: "￥40"
},
{
id: 3,
img: "",
name: "《商品的含义和气体基本属性（第二课）》",
label: {
one: "1",
two: "2",
thr: "3"
},
price: "免费"
}
],
searchRecord: [
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优",
"名师提优"
]
};
}
};
</script>
<style lang="scss" scope>
a{
text-decoration: none;
color: #000;
}
</style>
第二个：
<template>
<div class="introduce">
<img src="../../assets/images/视频-介绍/u754.svg" alt class="topImg" />
<img src="../../assets/images/视频-介绍/u755.svg" alt class="playImg" />
<el-carousel
indicator-position="outside"
trigger="click"
:height="changeHeight+'px'"
:interval="5000"
arrow="always"
>
<el-carousel-item v-for="item in imgUrls" :key="item.id">
<img :src="item.url" width="100%" ref="changeHeight" @load="imgLoad" />
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "introduce",
data() {
return {
changeHeight: "",
imgUrls: [
{ id: 0, url: require("../../assets/images/视频-介绍/u754.svg") },
{ id: 1, url: require("../../assets/images/视频-介绍/u754.svg") },
{ id: 2, url: require("../../assets/images/视频-介绍/u754.svg") },
{ id: 3, url: require("../../assets/images/视频-介绍/u754.svg") }
]
};
},
methods: {
imgLoad() {
this.$nextTick(() => {
this.changeHeight = this.$refs.changeHeight[0].height;
window.console.log(this.$refs.changeHeight[0].height);
});
}
},
mounted() {
window.addEventListener(
"resize",
() => {
this.imgLoad();
},
false
);
}
};
</script>
<style lang="scss" scoped>
.introduce {
padding-top: 73px;
position: relative;
.topImg {
width: 100%;
}
.playImg {
position: absolute;
top: 130px;
left: 50%;
margin-left: -25px;
}
.el-carousel__item img {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
}
</style>
明天计划：
把前台页面赶快做
返回列表
评论