cbsl-app/pages/videoPage/itemBox.vue

<template>
    <div class="itemBox">
        <div class="itemBoxHead">
            <u-icon name="file-text"></u-icon>
            <div class="text" :class="{ danger: this.data.danger }">
                {{ this.data.name + (this.data.danger?'「汛」':'')}}
            </div>
            <image v-if="this.data.isStar" src="../../static/images/star.svg" class="starImg"></image>
            <image v-else src="../../static/images/star2.svg" class="starImg"></image>
            <div class="rl" @click="myNavigateTo">
                更多
                <u-icon name="arrow-right-double" size="16"></u-icon>
            </div>
        </div>
        <div class="itemBoxBody">
            <view class="image-wrapper">
                <image src="../../static/images/skImg.png" class="skImg"></image>
            </view>
            <view class="image-wrapper-rl">
                <div class="videoList">
                    <div v-for="item in this.data.videoList" class="videoListItem">
                        <image src="../../static/images/video.svg" class="videoImg"></image>
                        <div style="flex:1">{{ item.name }}</div>
                        <image src="../../static/images/videoPlay.svg" class="videoPlayImg"></image>
                    </div>
                </div>
            </view>
        </div>
    </div>
</template>

<script>
import moment from "moment";

export default {
    components: {
    },
    props:{
        data:Object,
    },
    data() {
        return {
            
        };
    },
    computed: {
        
    },
    methods: {
        myNavigateTo() {
            uni.navigateTo({
                url: '/pages/simpleResviror/index', // 跳转到对应路径的页面
            });
        },
    },
    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
    created() {
    },
};
</script>

<style lang="scss" scoped>
.itemBox{
    padding: 5px;
    .itemBoxHead{
        display: flex;
        align-items: center;
        position: relative;
        font-size: 14px;
        height: 30px;
        // padding: 10px 0;
        .text{
            margin: 0 5px;
        }
        .danger{
            color: #F59823;
        }
        .starImg{
            width: 14px;
            height: 14px;
        }
        .rl{
            position: absolute;
            font-size: 12px;
            padding: 0 5px;
            right: 0px;
            top: 3px;
            display: flex;
            align-items: center;
        }
        .rl:active {
            background-color: #eee;  /* 变深色 */
            transform: scale(0.97);     /* 轻微缩小 */
            opacity: 0.8;
        }
        
    }
    .itemBoxBody{
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        padding: 5px 10px;
        .image-wrapper{
            width: 35%;               /* 父元素宽度的30% */
            position: relative;
            /* 关键：padding-top 百分比相对于父元素宽度，100% 表示高度 = 宽度 */
            padding-top: 35%;
            .skImg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;   
            }
        }
        .image-wrapper-rl{
            display: flex;
            flex: 1;
            position: relative;
            padding-top: 35%;
            margin-right: 10px;

            .videoList{
                position: absolute;
                top: 0;
                left: 10px;
                width: 100%;
                height: 100%;   
                overflow-y: auto;
                // display: flex;
                // flex-direction: column;
                // justify-content: start;

                .videoListItem{
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #eee;
                    height: 28px;

                    .videoImg{
                        width: 16px;
                        height: 12px;
                        margin-right: 5px;
                    }
                    .videoPlayImg{
                        width: 12px;
                        height: 12px;
                        margin-right: 5px;
                    }
                    .videoPlayImg:active {
                        background-color: #eee;  /* 变深色 */
                        transform: scale(0.97);     /* 轻微缩小 */
                        opacity: 0.8;
                    }
                }
            }
        }
    }
}

</style>