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