zizhujianzhan_web/components/shop/HotNews.vue

<template>
    <!-- 点击排行 -->
    <div class="categ_3_index clearfix">
        <div class="shop_name_box">
            <div class="shop_name">
                <span class="shop_name_box_a">点击排行</span>
            </div>
            <div class="shop_name_right"></div>
        </div>
        <div class="categ_ul_img_1">
            <div class="categ_li_img_1" v-for="item in pageData1">
                <NuxtLink
                    :to="getShopPathDetail1(item)"
                    class="categ_li_img_1_a"
                    :title="item.name"
                >
                    <img class="categ_li_img_1_img" :src="item.imgurl" alt="item.name">
                    <div class="categ_li_img_1_dot2 dot2">
                        {{ item.name }}
                    </div>
                </NuxtLink>
            </div>
        </div>
    </div>
    <!-- 点击排行 -->
    <!-- 最新商机 -->
    <div class="categ_5_index clearfix">
        <div class="shop_name_box">
            <div class="shop_name">
                <span class="shop_name_box_a">最新商机</span>
            </div>
            <div class="shop_name_right"></div>
        </div>
        <div class="categ_ul_img_2">
            <div class="categ_li_img_2" v-for="item in pageData2">
                <NuxtLink
                    :to="getShopPathDetail1(item)"
                    class="categ_li_img_2_a"
                    :title="item.name"
                >
                    <img class="categ_li_img_2_img" :src="item.imgurl" alt="item.name">
                    <div class="categ_li_img_2_dot2 dot2">
                        {{ item.name }}
                    </div>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup>
//1.获得模块数据 start ---------------------------------------->
const pageData1 = ref([])//点击排行
const pageData2 = ref([])//最新商机
//创建请求数据json
let getJson = [
    {"level":"3,0,6"},//点击排行
    {"level":"4,0,6"},//最新商机
]
let jsonString = JSON.stringify(getJson)
//获取所有数据
async function getPageAllData() {
    const mkdata = await requestDataPromise('/web/getWebsiteshop', {
        method: 'GET',
        query: {
            'catid': 346,
            'id': jsonString,
        },
    });
    if (mkdata.code == 200) {
        //最新数据2
        pageData1.value = mkdata.data.goods[0];
        //供应商品
        pageData2.value = mkdata.data.goods[1];
    } else {
        ElMessage.error(mkdata.message)
    }
}
getPageAllData();
</script>

<style lang="less" scoped>
.dot2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.categ_3_index {
    margin-top: 28px;
}
.clearfix {
    overflow: hidden;
}
.shop_name {
    float: left;
    height: 44px;
    line-height: 44px;
    color: #fff;
    font-weight: bold;
    position: relative;
    z-index: 11;
    text-align: center;
    font-size: 20px;
    background: #A01C0E;
    padding: 0px 14px;
}
.shop_name_box {
    border-top: solid 1px #fff;
}
.shop_name_box_a {
    height: 44px;
    line-height: 44px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}
.shop_name_right {
    height: 40px;
    border-bottom: 1px solid #E8E9EC;
    margin-top: 4px;
    background: #F8F8F8;
    position: relative;
    z-index: 2;
}
.categ_li_img_1 {
    float: left;
    margin: 0px 24px 20px 0px;
    width: 180px;
    position: relative;
}

.categ_li_img_1_a {}

.categ_li_img_1_img {
    display: block;
    width: 180px;
    height: 180px;
}

.categ_li_img_1_dot2 {
    width: 168px;
    margin: 10px auto 0px;
    height: 32px;
    line-height: 16px;
    color: #333;
    font-size: 14px;
}

.categ_li_img_1:nth-of-type(6n) {
    margin-right: 0px;
}

.categ_li_img_1_hover_dot1 {
    width: 152px;
    position: absolute;
    left: 50%;
    margin-left: -76px;
    bottom: 13px;
    font-size: 14px;
    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
    -webkit-background-clip: text;
    color: transparent;
}

.categ_li_img_1:hover .categ_li_img_1_dot2 {
    color: #A01C0E;
}

.categ_li_img_1:nth-of-type(1) .categ_li_img_1_dot2::after {
    content: '';
    display: block;
    position: absolute;
    background: url(@/public/img/18.png) no-repeat left 0px;
    background-size: 100% 100%;
    width: 32px;
    height: 32px;
    left: 10px;
    top: 0px;
    z-index: 11;
}

.categ_li_img_1:nth-of-type(2) .categ_li_img_1_dot2::after {
    content: '';
    display: block;
    position: absolute;
    background: url(@/public/img/19.png) no-repeat left 0px;
    background-size: 100% 100%;
    width: 32px;
    height: 32px;
    left: 10px;
    top: 0px;
    z-index: 11;
}

.categ_li_img_1:nth-of-type(3) .categ_li_img_1_dot2::after {
    content: '';
    display: block;
    position: absolute;
    background: url(@/public/img/20.png) no-repeat left 0px;
    background-size: 100% 100%;
    width: 32px;
    height: 32px;
    left: 10px;
    top: 0px;
    z-index: 11;
}

.categ_ul_img_1 {
    margin-top: 20px;
}

.categ_ul_img_2 {
    margin-top: 20px;
}

.categ_li_img_2 {
    float: left;
    margin: 0px 24px 20px 0px;
    width: 180px;
    position: relative;
}

.categ_li_img_2_a {}

.categ_li_img_2_img {
    display: block;
    width: 180px;
    height: 180px;
}

.categ_li_img_2_dot2 {
    width: 168px;
    margin: 10px auto 0px;
    height: 32px;
    line-height: 16px;
    color: #333;
    font-size: 14px;
}

.categ_li_img_2:nth-of-type(6n) {
    margin-right: 0px;
}

.categ_li_img_2_hover_dot1 {
    width: 152px;
    position: absolute;
    left: 50%;
    margin-left: -76px;
    bottom: 13px;
    font-size: 14px;
    background: linear-gradient(to right, #FFE1AA, #F9F4E3, #FFE1AA);
    -webkit-background-clip: text;
    color: transparent;
}

.categ_li_img_2:hover .categ_li_img_2_dot2 {
    color: #A01C0E;
}
</style>