zizhujianzhan_web/components/template/component/list/1200x480/7/1.vue

<template>
    <!-- 样式1 -->
    <div class="scrollTextSectorBox" v-if="componentStyle == 1">
        <div class="scrollTextSectorLeft">
            <div class="bannerSwiperStyle5">
                <el-carousel :interval="3333" height="480px" arrow="always" @change="change_fun"
                    indicator-position="bottom">
                    <el-carousel-item v-for="item in component_style1_News1Array" :key="item.id">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <img :src="item.imgurl" />
                            <span class="swiper_dot1 dot1">
                                {{ item.title }}
                            </span>
                        </NuxtLink>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="scrollTextSectorRight">
            <div class="BannerListBox BannerListBoxStyle4">
                <div class="listNewsTitle">
                    <span>{{ titleLink.alias }}</span>
                </div>
                <p class="listNewsText_img_li" v-for="item in component_style1_News1Array">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <span class="listNewsText_li_img_box">
                            <img :src="item.imgurl">
                        </span>
                        <span class="listNewsText_li_img_dot4">{{ item.title }}</span>
                    </NuxtLink>
                </p>
                <div class="listNewsText" v-for="item in component_style1_News2Array">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <span class="text">{{ item.title }}</span>
                        <span class="time">{{ item.update_time }}</span>
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
    <!-- 样式2 -->
    <div class="scrollTextSectorBox" v-if="componentStyle == 2">
        <div class="scrollTextSectorRight">
            <div class="BannerListBox BannerListBoxStyle2">
                <div class="listNewsTitle">
                    <span>{{ titleLink.alias }}</span>
                </div>
                <p class="listNewsText_img_li" v-for="item in component_style1_News1Array">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <span class="listNewsText_li_img_box">
                            <img :src="item.imgurl">
                        </span>
                        <span class="listNewsText_li_img_dot4">{{ item.title }}</span>
                    </NuxtLink>
                </p>
                <div class="listNewsText" v-for="item in component_style1_News2Array">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <span class="text">{{ item.title }}</span>
                        <span class="time">{{ item.update_time }}</span>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="scrollTextSectorLeft">
            <div class="bannerSwiperStyle5">
                <el-carousel :interval="3333" height="480px" arrow="always" @change="change_fun"
                    indicator-position="bottom">
                    <el-carousel-item v-for="item in component_style1_News1Array" :key="item.id">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <img :src="item.imgurl" />
                            <span class="swiper_dot1 dot1">
                                {{ item.title }}
                            </span>
                        </NuxtLink>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
    <!-- 样式3 -->
    <div class="scrollTextSectorBox" v-if="componentStyle == 3">
        <div class="scrollTextSectorLeft">
            <div class="bannerSwiperStyle5">
                <el-carousel :interval="3333" height="480px" arrow="always" @change="change_fun"
                    indicator-position="bottom">
                    <el-carousel-item v-for="item in component_style1_News1Array" :key="item.id">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <img :src="item.imgurl" />
                            <span class="swiper_dot1 dot1">
                                {{ item.title }}
                            </span>
                        </NuxtLink>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="scrollTextSectorRight">
            <div class="BannerListBox BannerListBoxStyle1">
                <div class="listNewsTitle">
                    <span>{{ titleLink.alias }}</span>
                </div>
                <div class="listNewsText" v-for="item in component_style1_News3Array">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <span class="text">{{ item.title }}</span>
                        <span class="time">{{ item.update_time }}</span>
                    </NuxtLink>
                </div>
            </div>
        </div>
    </div>
    <!-- 样式4 -->
    <div class="scrollTextSectorBox" v-if="componentStyle == 4">
        <div class="scrollTextSectorRight">
            <div class="BannerListBox BannerListBoxStyle1">
                <div class="listNewsTitle">
                    <span>{{ titleLink.alias }}</span>
                </div>
                <div class="listNewsText" v-for="item in component_style1_News3Array">
                    <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                        :target="item.islink == 1 ? '_blank' : '_self'">
                        <span class="text">{{ item.title }}</span>
                        <span class="time">{{ item.update_time }}</span>
                    </NuxtLink>
                </div>
            </div>
        </div>
        <div class="scrollTextSectorLeft">
            <div class="bannerSwiperStyle5">
                <el-carousel :interval="3333" height="480px" arrow="always" @change="change_fun"
                    indicator-position="bottom">
                    <el-carousel-item v-for="item in component_style1_News1Array" :key="item.id">
                        <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                            :target="item.islink == 1 ? '_blank' : '_self'">
                            <img :src="item.imgurl" />
                            <span class="swiper_dot1 dot1">
                                {{ item.title }}
                            </span>
                        </NuxtLink>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus'
//获得新闻数据
const props = defineProps({
    titleLink: Object,//板块名称
    templateData: Array,//新闻数据
    componentStyle: Number,//样式编号
    templateAdData: Object,//广告
});
//轮播图
const roll_num_this = ref(0)
const roll_num_lang = ref(props.templateData.imgnum.length - 1);
const change_fun = (the_1) => {
    roll_num_this.value = the_1
}
//样式1与样式2共用 start ---------------------------------------->
const component_style1_News1Array = ref([]);
component_style1_News1Array.value = props.templateData.imgnum.slice(0, 1);
const component_style1_News2Array = ref([]);
component_style1_News2Array.value = props.templateData.textnum.slice(1, 7);
const component_style1_News3Array = ref([]);
component_style1_News3Array.value = props.templateData.textnum.slice(0, 9);
//样式1与样式2共用 end ---------------------------------------->
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.scrollTextSectorBox {
    width: 1200px;
    height: 480px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
        width: 720px;
        height: 480px;
        display: block;
    }

    .scrollTextSectorLeft {
        width: 720px;
        height: 480px;

        .bannerSwiperStyle5 {
            position: relative;

            img {
                width: 100%;
                height: 100%;
                display: block;
            }

            .roll_num_box {
                position: absolute;
                z-index: 2;
                right: 35px;
                bottom: 5px;
                height: 60px;
                line-height: 60px;
                color: #fff;
                font-size: 20px;

                .roll_num_box_new {
                    font-size: 20px;
                }
            }

            .dot1 {
                display: block;
                word-break: keep-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .swiper_dot1 {
                display: block;
                width: 100%;
                line-height: 60px;
                height: 60px;
                color: #fff;
                font-size: 18px;
                font-weight: bold;
                text-indent: 20px;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 10;
                box-sizing: border-box;
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
                box-sizing: border-box;
                padding-right: 40%;

            }

            .el-carousel {
                /deep/.el-carousel__arrow i {
                    font-size: 33px !important;
                }

                .roll_1_box {
                    position: relative;
                }

                /deep/.el-carousel__arrow--left {
                    display: none;
                    left: 20px;
                    width: 34px;
                    height: 80px;
                    color: #eee;
                    background: rgba(0, 0, 0, 0.5);
                    border-radius: 50%;
                    position: absolute;
                    border: none;
                    border-radius: 0px;
                }

                /deep/.el-icon-arrow-left:before {
                    font-size: 24px;
                    line-height: 56px;
                }

                /deep/.el-carousel__arrow--right {
                    display: none;
                    right: 20px;
                    width: 34px;
                    height: 80px;
                    color: #eee;
                    background: #00000080;
                    position: absolute;
                    border: none;
                    border-radius: 0px;
                }

                /deep/.el-icon-arrow-right:before {
                    font-size: 24px;
                    line-height: 56px;
                }

                /deep/ .el-carousel__indicators {
                    // 指示器
                    left: unset;
                    transform: unset;
                    right: 10px;
                    bottom: 11px;
                }

                /deep/ .el-carousel__button {
                    // 指示器按钮
                    width: 12px;
                    height: 12px;
                    border: none;
                    background: #ccc;
                    opacity: 1;
                }

                /deep/ .is-active .el-carousel__button {
                    // 指示器激活按钮
                    background: #fff;
                    width: 12px;
                    height: 12px;
                    opacity: 1;
                    border-radius: 0px;

                }

                /deep/ .el-carousel__container {
                    height: 100%;
                }
            }

            .custom-indicator button {
                background-color: #fff;
                opacity: 1;
                width: 8px;
                height: 8px;
            }

            .custom-indicator button.is-active {
                background-color: #c82200;
                width: 58px;
                opacity: 1;
            }

            /deep/ .el-carousel__indicator--horizontal {
                padding: 12px 5px;
            }
        }
    }

    .scrollTextSectorRight {
        width: 450px;
        height: 480px;

        .listNewsTitle {
            font-size: 22px;
            font-weight: bold;
            color: #004564;
            margin-bottom: 20px;
            box-sizing: border-box;

            a {
                color: #004564;
                display: block;
                height: 25px;
                line-height: 25px;
            }
        }

        .scrollTextSectorList {
            div {
                font-size: 18px;
                height: 24px;
                line-height: 24px;
                margin-bottom: 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                span {
                    margin-right: 5px;
                    color: #004564;
                }

                a {
                    color: #333333;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

//基本样式 end ---------------------------------------->


//右侧新闻列表 end ---------------------------------------->
//基本样式
.BannerListBox {
    div {
        cursor: pointer;
        font-size: 18px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 24px;
        line-height: 24px;
        margin-bottom: 24px;
        &:last-child {
            margin-bottom: 0;
        }
    }

    .listNewsTitle {
        font-size: 22px;
        font-weight: bold;
        height: 47px;
        line-height: 47px;
        border-top: 2px solid #A72213;
        border-bottom: 1px solid #DCDDDF;
        color: #A72213;
        margin-bottom: 20px;
        box-sizing: border-box;

        span {
            display: inline-block;
            color: #A72213;
            height: 47px;
            line-height: 47px;
            // border-bottom: 6px solid #3848a0;
            font-weight: bold;
            /* 可选：为了避免内容紧贴边框，添加内边距 */
        }
    }

    .listNewsText {
        position: relative;

        a {
            color: #333;
        }

        .text {
            display: block;
            width: 100%;
            padding-right: 13px;
            overflow: hidden;
            box-sizing: border-box;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 24px;
            text-indent: 16px;
            line-height: 24px;
        }

        .time {
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 51px;
            color: #999999;
            display: none;
        }
    }
}

//样式1
.BannerListBoxStyle1 {
    .listNewsText::before {
        content: '';
        display: block;
        position: absolute;
        top: 9px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式2
.BannerListBoxStyle2 {
    .listNewsText::before {
        content: '';
        display: block;
        position: absolute;
        top: 9px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }

    .listNewsText_img_li {
        width: 100%;
        display: flex;
        height: 130px;
        margin: 0px 0px 21px 0px;

        a {
            display: flex;
            align-items: center;

            img {
                width: 185px;
                height: 130px;
            }
        }
    }

    .listNewsText_li_img_box {
        margin-right: 20px;
        height: 100%;
        width: 185px;
        height: 130px;
    }

    .listNewsText_li_img_box img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .listNewsText_li_img_dot4 {
        display: block;
        flex: 1;
        width: 100%;
        color: #333;
        font-size: 18px;
        overflow: hidden;
        margin-top: 17px;
        height: 96px;
        box-sizing: border-box;
        padding-right: 13px;
        line-height: 24px;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        word-break: break-all;
    }
}

//样式2
.BannerListBoxStyle3 {
    .listNewsText::before {
        content: '';
        display: block;
        position: absolute;
        top: 9px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式2
.BannerListBoxStyle4 {
    .listNewsText::before {
        content: '';
        display: block;
        position: absolute;
        top: 9px;
        left: 0px;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }

    .listNewsText_img_li {
        width: 100%;
        display: flex;
        height: 130px;
        margin: 0px 0px 21px 0px;

        a {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .listNewsText_li_img_box {
        margin-right: 20px;
        height: 100%;
        width: 185px;
        height: 130px;
    }

    .listNewsText_li_img_box img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .listNewsText_li_img_dot4 {
        display: block;
        flex: 1;
        width: 100%;
        color: #333;
        font-size: 18px;
        overflow: hidden;
        margin-top: 17px;
        height: 96px;
        box-sizing: border-box;
        padding-right: 13px;
        line-height: 24px;
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        word-break: break-all;

    }
}

//样式5
.BannerListBoxStyle5 {
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #3848a0;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式6
.BannerListBoxStyle6 {
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #3848a0;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式7
.BannerListBoxStyle7 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }

    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式8
.BannerListBoxStyle8 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }

    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #d7daec;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式9
.BannerListBoxStyle9 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }
}

//样式10
.BannerListBoxStyle10 {
    .listNewsTitle {
        border-bottom: 1px dashed #999999;
    }
}

//样式11
.BannerListBoxStyle11 {
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #3848a0;
        margin-right: 10px;
        vertical-align: 10px;
    }
}

//样式12
.BannerListBoxStyle12 {
    .listNewsText::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #3848a0;
        margin-right: 10px;
        vertical-align: 10px;
    }
}
</style>