114 lines
1.9 KiB
Vue
114 lines
1.9 KiB
Vue
<template>
|
|
<view class="richDetail">
|
|
<view scroll-x="true" class="detail_title video_box" style="background-color: #fff">
|
|
|
|
<view v-for="(v, i) in dataList" :class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
|
|
@click="handleClick(v,i)">
|
|
|
|
【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
|
|
</view>
|
|
</view>
|
|
|
|
<slot name="richHeadImg"></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import $http from "@/config/requestConfig.js";
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
export default {
|
|
props: ["detailInfo", "dataList", "currentVideo"],
|
|
components: {},
|
|
data() {
|
|
return {};
|
|
},
|
|
onLoad(options) {},
|
|
onHide() {},
|
|
computed: {
|
|
...mapState(["userInfo"]),
|
|
},
|
|
methods: {
|
|
getNumber(num) {
|
|
if (num >= 10) {
|
|
return num;
|
|
} else {
|
|
return `0${num}`;
|
|
}
|
|
},
|
|
handleClick(data) {
|
|
this.$emit("open", data);
|
|
},
|
|
},
|
|
onBackPress() {
|
|
// #ifdef APP-PLUS
|
|
plus.key.hideSoftKeybord();
|
|
// #endif
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.commonPageBox {
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.contentBox {
|
|
.headImage {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.detail_title {
|
|
padding: 0 20rpx 0;
|
|
font-size: 26rpx;
|
|
line-height: 65rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rich_box {
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
|
|
p {
|
|
display: block;
|
|
text-indent: 2em;
|
|
letter-spacing: 2px !important;
|
|
line-height: 46rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.richDetail {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.video_box {
|
|
width: 100%;
|
|
.video_item {
|
|
width: 23%;
|
|
margin-right: 10rpx;
|
|
float: left;
|
|
border: 2rpx solid #7dc1f0;
|
|
background: #fff;
|
|
color: #7dc1f0;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.video_item:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.hot {
|
|
background-color: #7dc1f0 !important;
|
|
color: #fff !important;
|
|
}
|
|
</style> |