fix:修改样式; #413
|
@ -18,12 +18,15 @@
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-content">
|
<div class="list-content">
|
||||||
<div class="list-container">
|
<div class="list-container" v-loading="loading">
|
||||||
<div class="content-list" v-for="(item, index) in experimentList" :key="index">
|
<div v-for="(item, index) in experimentList" :key="index" class="content">
|
||||||
|
<div class="content-list">
|
||||||
<!-- 封面 -->
|
<!-- 封面 -->
|
||||||
<el-image style="width: 100%;border-radius: 8px;" :src="item.coverPic" fit="contain" @click="chooseVedio(item)"/>
|
<el-image style="width: 100%;border-radius: 8px;" :src="item.coverPic" fit="contain" @click="chooseVedio(item)"/>
|
||||||
<!-- 标题 -->
|
|
||||||
<div style="text-align: left;">
|
</div>
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div style="text-align: left;">
|
||||||
<el-text>{{ item.fileShowName }}</el-text>
|
<el-text>{{ item.fileShowName }}</el-text>
|
||||||
</div>
|
</div>
|
||||||
<!-- 观看人数 -->
|
<!-- 观看人数 -->
|
||||||
|
@ -71,6 +74,8 @@ const resultTotal = ref(0)
|
||||||
// 弹出视频
|
// 弹出视频
|
||||||
const isShow = ref(false)
|
const isShow = ref(false)
|
||||||
const curRow = ref({})
|
const curRow = ref({})
|
||||||
|
// loading框
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
// 实验图片结构
|
// 实验图片结构
|
||||||
const experimentList = ref([])
|
const experimentList = ref([])
|
||||||
|
@ -94,8 +99,13 @@ const query = ref({
|
||||||
|
|
||||||
const getData = (data) => {
|
const getData = (data) => {
|
||||||
const { textBook, node } = data
|
const { textBook, node } = data
|
||||||
query.value.levelFirstId = node.parentNode.id
|
if (node.parentNode) {
|
||||||
query.value.levelSecondId = node.id
|
query.value.levelFirstId = node.parentNode.id
|
||||||
|
query.value.levelSecondId = node.id
|
||||||
|
} else {
|
||||||
|
query.value.levelFirstId = node.id
|
||||||
|
query.value.levelSecondId = ''
|
||||||
|
}
|
||||||
query.value.textbookId = node.rootid
|
query.value.textbookId = node.rootid
|
||||||
getVideoList()
|
getVideoList()
|
||||||
}
|
}
|
||||||
|
@ -106,7 +116,9 @@ const chooseItem = (item) => {
|
||||||
|
|
||||||
// 获取视频资源
|
// 获取视频资源
|
||||||
const getVideoList = async () => {
|
const getVideoList = async () => {
|
||||||
|
loading.value = true
|
||||||
const res = await getSmarttalkPage(query.value)
|
const res = await getSmarttalkPage(query.value)
|
||||||
|
loading.value = false
|
||||||
experimentList.value = [...res.rows]
|
experimentList.value = [...res.rows]
|
||||||
resultTotal.value = res.total
|
resultTotal.value = res.total
|
||||||
}
|
}
|
||||||
|
@ -153,7 +165,7 @@ const chooseVedio = (item) => {
|
||||||
}
|
}
|
||||||
.list-content {
|
.list-content {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
height: 100%;
|
height: 90%;
|
||||||
}
|
}
|
||||||
.list-container {
|
.list-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -162,7 +174,7 @@ const chooseVedio = (item) => {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-list {
|
.content {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
width: calc(20%);
|
width: calc(20%);
|
||||||
|
@ -171,10 +183,13 @@ const chooseVedio = (item) => {
|
||||||
padding: 5px
|
padding: 5px
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-list:hover {
|
.content:hover {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
// box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
// box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
.content-list{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.item-content {
|
.item-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue