zizhujianzhan_web/components/template/component/list/270x450/7.vue

<template>
    <div class="list_right_box_1" v-if="componentStyle == 1">
        <h4 class="list_right_head">
            <span>最新资讯</span>
        </h4>
        <div class="list_right_img_ul">
            <div class="list_right_img_ul_li" v-for="item in component_style1_News1Array">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img class="list_right_img_ul_li_img" :src="item.imgurl" />
                    <div class="list_right_img_ul_li_dot3">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
        <div class="list_right_ul">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" 
                class="list_right_ul_a"
                v-for="item in component_style1_News2Array"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
    <div class="list_right_box_2" v-if="componentStyle == 2">
        <h4 class="list_right_head">
            <span>最新资讯</span>
        </h4>
        <div class="list_right_ul">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" 
                class="list_right_ul_a"
                v-for="item in component_style1_News2Array"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
        <div class="list_right_img_ul">
            <div class="list_right_img_ul_li" v-for="item in component_style1_News1Array">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img class="list_right_img_ul_li_img" :src="item.imgurl" />
                    <div class="list_right_img_ul_li_dot3">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
    </div>
    <div class="list_right_box_3" v-if="componentStyle == 3">
        <h4 class="list_right_head">
            <span>最新资讯</span>
        </h4>
        <div class="list_right_img_ul">
            <div class="list_right_img_ul_li" v-for="item in component_style1_News1Array_1">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img class="list_right_img_ul_li_img" :src="item.imgurl" />
                    <div class="list_right_img_ul_li_dot3">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
        <div class="list_right_ul">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" 
                class="list_right_ul_a"
                v-for="item in component_style1_News2Array"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
        <div class="list_right_img_ul">
            <div class="list_right_img_ul_li" v-for="item in component_style1_News1Array_2">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img class="list_right_img_ul_li_img" :src="item.imgurl" />
                    <div class="list_right_img_ul_li_dot3">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
    </div>
    <div class="list_right_box_4" v-if="componentStyle == 4">
        <h4 class="list_right_head">
            <span>最新资讯</span>
        </h4>
        <div class="list_right_img_ul">
            <div class="list_right_img_ul_li" v-for="item in component_style1_News1Array">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img class="list_right_img_ul_li_img" :src="item.imgurl" />
                    <div class="list_right_img_ul_li_dot3">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
        <div class="list_right_ul">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" 
                class="list_right_ul_a"
                v-for="item in component_style1_News2Array"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
    </div>
    <div class="list_right_box_5" v-if="componentStyle == 5">
        <h4 class="list_right_head">
            <span>最新资讯</span>
        </h4>
        <div class="list_right_ul">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" 
                class="list_right_ul_a"
                v-for="item in component_style1_News2Array"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
        <div class="list_right_img_ul">
            <div class="list_right_img_ul_li" v-for="item in component_style1_News1Array">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img class="list_right_img_ul_li_img" :src="item.imgurl" />
                    <div class="list_right_img_ul_li_dot3">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
    </div>
    <div class="list_right_box_6" v-if="componentStyle == 6">
        <h4 class="list_right_head">
            <span>最新资讯</span>
        </h4>
        <div class="list_right_img_ul">
            <div class="list_right_img_ul_li" v-for="item in component_style1_News1Array_1">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img class="list_right_img_ul_li_img" :src="item.imgurl" />
                    <div class="list_right_img_ul_li_dot3">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
        <div class="list_right_ul">
            <NuxtLink 
                :href="getLinkPathDetail(item)" 
                :title="item.title"
                :target="item.islink == 1 ? '_blank' : '_self'" 
                class="list_right_ul_a"
                v-for="item in component_style1_News2Array"
            >
                {{ item.title }}
            </NuxtLink>
        </div>
        <div class="list_right_img_ul">
            <div class="list_right_img_ul_li" v-for="item in component_style1_News1Array_2">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title"
                    :target="item.islink == 1 ? '_blank' : '_self'">
                    <img class="list_right_img_ul_li_img" :src="item.imgurl" />
                    <div class="list_right_img_ul_li_dot3">{{ item.title }}</div>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import { ref } from 'vue';
//获得新闻数据
const props = defineProps({
    componentStyle: Number,//样式编号
});
const component_style1_News1Array = ref([]);
const component_style1_News1Array_1 = ref([]);
const component_style1_News1Array_2 = ref([]);
const component_style1_News2Array = ref([]);
const component_style1_News2Array_1 = ref([]);
const component_style1_News2Array_2 = ref([]);
// component_style1_News1Array.value = props.templateData.img.slice(0,2);
// component_style1_News2Array.value = props.templateData.text.slice(0,4);

//最新资讯数据 start ---------------------------------------->
async function getPageData() {
    const mkdata = await requestDataPromise('/web/getWebsiteArticlett', {
        method: 'GET',
        query: {
            'imgnum': 4,
            'textnum': 4,
            'level': 4,
            'id': 0,
            'placeid': 0,
        },
    });
    if (mkdata.code == 200) {
        component_style1_News1Array.value = mkdata.data.img.slice(0, 2);
        component_style1_News1Array_1.value = mkdata.data.img.slice(0, 1);
        component_style1_News1Array_2.value = mkdata.data.img.slice(1, 2);
        component_style1_News2Array.value = mkdata.data.text.slice(0, 4);
        component_style1_News2Array_1.value = mkdata.data.text.slice(0, 2);
        component_style1_News2Array_2.value = mkdata.data.text.slice(2, 4);
    }
}
getPageData();
</script>

<style lang="less" scoped>
//基本样式 start ---------------------------------------->
.list_right_box_1 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_img_ul {
        margin-top: 20px;
        .list_right_img_ul_li {
            height: 80px;
            overflow: hidden;
            width: 100%;
            margin-bottom: 20px;
        }
        .list_right_img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .list_right_img_ul_li_img {
            float: left;
            width: 120px;
            height: 80px;
            margin-right: 10px;
        }
        .list_right_img_ul_li_dot3 {
            height: 72px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    }
    .list_right_ul {
        margin-top: 20px;
        .list_right_ul_a {
            height: 24px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            margin-bottom: 20px;
            display: block;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
.list_right_box_2 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_img_ul {
        margin-top: 20px;
        .list_right_img_ul_li {
            height: 80px;
            overflow: hidden;
            width: 100%;
            margin-bottom: 20px;
        }
        .list_right_img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .list_right_img_ul_li_img {
            float: left;
            width: 120px;
            height: 80px;
            margin-right: 10px;
        }
        .list_right_img_ul_li_dot3 {
            height: 72px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    }
    .list_right_ul {
        margin-top: 20px;
        .list_right_ul_a {
            height: 24px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            margin-bottom: 20px;
            display: block;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.list_right_box_3 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_img_ul {
        margin-top: 20px;
        .list_right_img_ul_li {
            height: 80px;
            overflow: hidden;
            width: 100%;
            margin-bottom: 20px;
        }
        .list_right_img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .list_right_img_ul_li_img {
            float: left;
            width: 120px;
            height: 80px;
            margin-right: 10px;
        }
        .list_right_img_ul_li_dot3 {
            height: 72px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    }
    .list_right_ul {
        margin-top: 20px;
        .list_right_ul_a {
            height: 24px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            margin-bottom: 20px;
            display: block;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
.list_right_box_4 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_img_ul {
        margin-top: 20px;
        .list_right_img_ul_li {
            height: 80px;
            overflow: hidden;
            width: 100%;
            margin-bottom: 20px;
        }
        .list_right_img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .list_right_img_ul_li_img {
            float: left;
            width: 120px;
            height: 80px;
            margin-right: 10px;
        }
        .list_right_img_ul_li_dot3 {
            height: 72px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    }
    .list_right_ul {
        margin-top: 20px;
        .list_right_ul_a {
            height: 24px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            margin-bottom: 20px;
            display: block;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .list_right_ul_a:nth-of-type(1) {
            font-weight: bold;
        }
    }
}
.list_right_box_5 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_img_ul {
        margin-top: 20px;
        .list_right_img_ul_li {
            height: 80px;
            overflow: hidden;
            width: 100%;
            margin-bottom: 20px;
        }
        .list_right_img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .list_right_img_ul_li_img {
            float: left;
            width: 120px;
            height: 80px;
            margin-right: 10px;
        }
        .list_right_img_ul_li_dot3 {
            height: 72px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    }
    .list_right_ul {
        margin-top: 20px;
        .list_right_ul_a {
            height: 24px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            margin-bottom: 20px;
            display: block;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .list_right_ul_a:nth-of-type(1) {
            font-weight: bold;
        }
    }
}
.list_right_box_6 {
    width: 100%;
    overflow: hidden;
    .list_right_head {
        height: 47px;
        border-top: solid 2px #A72213;
        border-bottom: solid 1px #DCDDDF;
        margin: 0px;
        box-sizing: border-box;
    }
    .list_right_head * {
        float: left;
        height: 100%;
        line-height: 47px;
        box-sizing: border-box;
        font-weight: bold;
        color: #A72213;
        font-size: 20px;
    }
    .list_right_img_ul {
        margin-top: 20px;
        .list_right_img_ul_li {
            height: 80px;
            overflow: hidden;
            width: 100%;
            margin-bottom: 20px;
        }
        .list_right_img_ul_li_a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .list_right_img_ul_li_img {
            float: left;
            width: 120px;
            height: 80px;
            margin-right: 10px;
        }
        .list_right_img_ul_li_dot3 {
            height: 72px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    }
    .list_right_ul {
        margin-top: 20px;
        .list_right_ul_a {
            height: 24px;
            line-height: 24px;
            color: #333;
            font-size: 18px;
            margin-bottom: 20px;
            display: block;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .list_right_ul_a:nth-of-type(1) {
            font-weight: bold;
        }
    }
}
//基本样式 end ---------------------------------------->
</style>