xiangcunwang_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;
    text-align: center;
}

.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;
    text-align: center;
}

.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>



<style lang="less" scoped>
 
    @media screen and (min-width:801px){/*pc*/

		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/

            .categ_3_index{width:92%;margin:30px auto 0;}
            
             .shop_name_box .shop_name{height:33px;line-height:33px;}   
             .shop_name_box .shop_name_box_a{height:33px;line-height:33px;font-size:14px;font-weight:normal;display:block;}
             .shop_name_box{overflow:hidden;border-bottom:1px solid #E6E6E6;}   
            .shop_name_right{display:none;}
            .categ_ul_img_1{overflow:hidden; height:120vw;}
            
            .categ_li_img_1{width:48%;overflow:hidden;margin:0px auto 15px;
                .categ_li_img_1_img{width:100%;height:44vw;}
                .categ_li_img_1_dot2{width:100%;margin:2vw auto 0;
                    font-size:4vw;line-height:5vw;height:10vw;}   
                }
                
                .categ_li_img_1:nth-of-type(odd){float:left;}
                .categ_li_img_1:nth-of-type(even){float:right;}
                .categ_li_img_1:nth-of-type(n+5){display:none;}
                
                .categ_5_index{width:92%;margin:10px auto 0;}
                
             .categ_ul_img_2{height:120vw;}   
            .categ_li_img_2{width:48%;overflow:hidden;margin:0px auto 15px;
                    .categ_li_img_2_img{width:100%;height:44vw;}
                    .categ_li_img_2_dot2{width:100%;margin:2vw auto 0;
                                        font-size:4vw;line-height:5vw;height:10vw;}   
            }
                
            .categ_li_img_2:nth-of-type(odd){float:left;}
            .categ_li_img_2:nth-of-type(even){float:right;}
            .categ_li_img_2:nth-of-type(n+7){display:none;}

                .phone_none{display:none;}
            }
            
            
        </style>