This commit is contained in:
2025-01-10 18:25:27 +08:00
2 changed files with 145 additions and 139 deletions

View File

@@ -25,11 +25,9 @@
}) })
function seVideo(item) { function seVideo(item) {
// uni.navigateTo({ uni.navigateTo({
// url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId + url:"/pages/video/detail?courseId="+item.courseId+"&courseDetailsId="+item.courseDetailsId
// '&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item })
// .dyEpisodeId
// })
} }
</script> </script>

View File

@@ -54,166 +54,174 @@
</template> </template>
<script setup> <script setup>
import { import {
reactive, reactive,
watch watch
} from "vue"; } from "vue";
import { import {
onShow, onReachBottom onShow,
} from '@dcloudio/uni-app' onReachBottom
const props = defineProps({ } from '@dcloudio/uni-app'
list: { const props = defineProps({
type: Array, list: {
default: [] type: Array,
}, default: []
}) },
let datas = reactive({
arrListLeft: [], //左边数据
arrListRight: [], //右边数据
})
onShow(() => {
spliceArrayListr()
})
watch(() => props.list, () => {
spliceArrayListr()
})
function spliceArrayListr() {
datas.arrListRight = []
datas.arrListLeft = []
props.list.map((item, index) => {
if (index % 2 === 0) {
datas.arrListLeft.push(item)
} else {
datas.arrListRight.push(item)
}
}) })
} let datas = reactive({
arrListLeft: [], //左边数据
arrListRight: [], //右边数据
})
onShow(() => {
spliceArrayListr()
})
watch(() => props.list, () => {
spliceArrayListr()
})
function clickItem(item) {
uni.navigateTo({
url: "/pages/video/detail?courseId=" + item.courseId + "&courseDetailsId=" + item.courseDetailsId
})
}
function spliceArrayListr() {
datas.arrListRight = []
datas.arrListLeft = []
props.list.map((item, index) => {
if (index % 2 === 0) {
datas.arrListLeft.push(item)
} else {
datas.arrListRight.push(item)
}
})
}
</script> </script>
<style lang="scss"> <style lang="scss">
.list { .list {
width: 100%; width: 100%;
height: auto; height: auto;
display: flex;
align-items: center;
justify-content: center;
.list-box {
width: 686rpx;
height: 100%;
display: flex; display: flex;
justify-content: space-between; align-items: center;
flex-wrap: wrap; justify-content: center;
}
.list-box-ite { .list-box {
width: calc((100% - 20rpx) / 2); width: 686rpx;
height: auto; height: 100%;
} display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list-box-ite-item { .list-box-ite {
width: 100%; width: calc((100% - 20rpx) / 2);
height: auto; height: auto;
margin-bottom: 20rpx; }
.list-box-ite-item-img { .list-box-ite-item {
width: 100%; width: 100%;
border-radius: 24rpx 24rpx 0 0; height: auto;
min-height: 300rpx; margin-bottom: 20rpx;
position: relative;
image { .list-box-ite-item-img {
width: 100%; width: 100%;
min-height: 300rpx;
border-radius: 24rpx 24rpx 0 0; border-radius: 24rpx 24rpx 0 0;
min-height: 300rpx;
position: relative;
image {
width: 100%;
min-height: 300rpx;
border-radius: 24rpx 24rpx 0 0;
}
.list-box-ite-item-img-t {
position: absolute;
bottom: 10rpx;
right: 0;
max-width: 80%;
border-radius: 10rpx;
background-color: rgba(51, 51, 51, 0.7);
color: #FFFFFF;
font-size: 22rpx;
padding: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
.list-box-ite-item-img-t { .list-box-ite-item-txt {
position: absolute; padding: 10rpx 20rpx;
bottom: 10rpx; background-color: #ffffff;
right: 0; border-radius: 0 0 24rpx 24rpx;
max-width: 80%; }
border-radius: 10rpx;
background-color: rgba(51, 51, 51, 0.7); .list-box-ite-item-txt-t {
color: #FFFFFF; color: #333333;
font-size: 30rpx;
font-weight: bold;
}
.list-box-ite-item-txt-l {
color: #999999;
font-size: 22rpx; font-size: 22rpx;
padding: 10rpx; margin-top: 10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }
.list-box-ite-item-txt {
padding: 10rpx 20rpx;
.list-box-item {
width: calc((100% - 20rpx) / 2);
// height: 100%;
min-height: 320rpx;
border-radius: 24rpx;
background-color: #ffffff; background-color: #ffffff;
border-radius: 0 0 24rpx 24rpx; margin-bottom: 20rpx;
} }
.list-box-ite-item-txt-t { .list-box-item-img {
color: #333333;
font-size: 30rpx;
font-weight: bold;
}
.list-box-ite-item-txt-l {
color: #999999;
font-size: 22rpx;
margin-top: 10rpx;
}
}
.list-box-item {
width: calc((100% - 20rpx) / 2);
// height: 100%;
min-height: 320rpx;
border-radius: 24rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
}
.list-box-item-img {
width: 100%;
height: 200rpx;
border-radius: 24rpx 24rpx 0 0;
image {
width: 100%; width: 100%;
height: 200rpx; height: 200rpx;
border-radius: 24rpx 24rpx 0 0; border-radius: 24rpx 24rpx 0 0;
image {
width: 100%;
height: 200rpx;
border-radius: 24rpx 24rpx 0 0;
}
} }
} .list-box-item-txt {
width: 100%;
// height: 120rpx;
padding: 20rpx 0;
border-radius: 0 0 24rpx 24rpx;
}
.list-box-item-txt { .list-box-item-txt-t {
width: 100%; width: 100%;
// height: 120rpx; padding: 0 20rpx;
padding: 20rpx 0; color: #333333;
border-radius: 0 0 24rpx 24rpx; font-size: 30rpx;
} font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-box-item-txt-t { .list-box-item-txt-l {
width: 100%; color: #999999;
padding: 0 20rpx; font-size: 22rpx;
color: #333333; margin-top: 10rpx;
font-size: 30rpx; padding: 0 20rpx;
font-weight: bold; }
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.list-box-item-txt-l {
color: #999999;
font-size: 22rpx;
margin-top: 10rpx;
padding: 0 20rpx;
}
}
</style> </style>