xiangcunwang_web/components/shop/pageHead.vue

<template>
    <header>
        <nav class="headerNav">
            <div class="inner">
                <div class="left">
                    <span class="znxy">
                        <a href="http://znxyw.org.cn/" target="_blank">中农兴业网团</a>
                    </span>

                    <span>
                        旗下网站 · 政府类农业百强网站!
                        <NuxtLink class="shop_nav_head_a phone_shop_nav_head_a" to="/" title="中国乡村网首页">
                            中国乡村网首页
                        </NuxtLink>
                    </span>

                    <div class="phone_head_btn" @click="togglePanel"></div>

                </div>
                <div class="right">
                    <div class="menu">
                        <button class="reg" @click="goTopic">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon1.png" alt="商圈">商圈
                        </button>
                        <button class="reg" @click="goAdvertising">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon2.png" alt="广告服务">广告服务
                        </button>
                    <!-- </div>
                    <div class="right-top-menu"> -->
                        <button class="reg" @click="goLogin" v-show="!showToken">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="登录">登录
                        </button>
                        <button class="reg" @click="goRegister" v-show="!showToken">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon4.png" alt="注册">注册
                        </button>
                        <button class="reg" @click="userCenter" v-show="showToken">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="用户信息">{{
                                username }}
                        </button>
                        <button class="reg" @click="goSearch">
                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/searchicon.png" alt="搜索">搜索
                        </button>
                    </div>
                    <ul class="userInfo11" v-if="isShow">
                        <li @click="gotosystem">个人中心</li>
                        <li @click="exit">退出</li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--商城header-->
        <div class="shop_head clearfix_2">
            <div class="shop_head_left">
                <NuxtLink class="shop_head_left_a" to="/" :title="webSiteName">
                    <!-- <img class="shop_head_img" src="@/public/img/2.png" alt="乡村商城"> -->
                    <img class="shop_head_img" :src="logo" :alt="webSiteName">
                </NuxtLink>
            </div>
            <div class="shop_head_form_out clearfix">
                <form class="shop_head_form" action="" method="">
                    <input class="shop_head_btn hand" type="button" @click="goShopSearch">
                    <input class="shop_head_inp hand" type="search" v-model="shopKeyword" placeholder="请输入要搜索的商品名称..">
                </form>
            </div>
            <div class="shop_head_right clearfix_2">
                <div :class="['shop_head_right_btn', alert_1_num == 2 ? 'shop_head_right_btn_active' : '']"
                    @mouseenter="qhTabs(2)" @mouseleave="qhTabs(0)">
                    我要卖
                </div>
                <div :class="['shop_head_right_btn', alert_1_num == 1 ? 'shop_head_right_btn_active' : '']"
                    @mouseenter="qhTabs(1)" @mouseleave="qhTabs(0)">
                    我要买
                </div>
                <!-- 我要卖  -->
                <section class="shop_alert_out" v-if="alert_1_num == 2" @mouseenter="qhTabs(2)" @mouseleave="qhTabs(0)">
                    <div class="shop_alert_box">
                        <div class="shop_alert_head_box clearfix">
                            <div class="shop_alert_head_name_1">全部信息分类</div>
                            <div class="shop_alert_head_name_2">求购信息</div>
                            <span class="shop_alert_head_btn_a" @click="goLogin">
                                发布求购信息
                            </span>
                        </div>
                        <div class="shop_alert_ul clearfix">
                            <div class="shop_alert_li clearfix" v-for="item in shopMenu" :key="per_obj">
                                <label class="shop_alert_li_label">{{ item.alias }}</label>
                                <div class="shop_alert_li_panel clearfix">
                                    <NuxtLink class="shop_alert_li_panel_a" v-for="i in item.children"
                                        :to="`/xiangcunshangcheng/${item.aLIas_pinyin}/${i.aLIas_pinyin}/gongying/list-1.html`"
                                        :title="item.name">
                                        {{ i.alias }}
                                    </NuxtLink>
                                </div>
                            </div>
                        </div>
                        <div class="shop_alert_1_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="shop_alert_img_ul clearfix">
                                <div class="shop_alert_img_li clearfix" v-for="item in shopMenuGoods">
                                    <NuxtLink :to="getShopLinkPath(item)" class="shop_alert_img_li_a"
                                        :title="item.name">
                                        <img class="shop_alert_img_li_img" :src="item.imgurl" :title="item.name"
                                            :alt="item.name">
                                        <div class="shop_alert_img_li_right">
                                            <!--产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台产品展台-->
                                            <h4 class="shop_alert_img_li_h4 dot1">{{ item.name }}</h4>
                                            <div class="shop_alert_img_li_dot3 dot3">{{ item.description }}</div>
                                            <time class="shop_alert_img_li_time">{{ item.updated_at }}</time>
                                        </div>
                                    </NuxtLink>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 我要卖  -->
                <!-- 我要买  -->
                <section class="shop_alert_out" v-if="alert_1_num == 1" @mouseenter="qhTabs(1)" @mouseleave="qhTabs(0)">
                    <div class="shop_alert_box">
                        <div class="shop_alert_head_box clearfix">
                            <div class="shop_alert_head_name_1">全部信息分类</div>
                            <div class="shop_alert_head_name_2">供应信息</div>
                            <span class="shop_alert_head_btn_a" @click="goLogin">
                                发布供应信息
                            </span>
                        </div>
                        <div class="shop_alert_ul clearfix">
                            <div class="shop_alert_li clearfix" v-for="item in shopMenu" :key="item.id">
                                <label class="shop_alert_li_label">{{ item.alias }}</label>
                                <div class="shop_alert_li_panel clearfix">
                                    <NuxtLink class="shop_alert_li_panel_a" v-for="i in item.children"
                                        :to="`/xiangcunshangcheng/${item.aLIas_pinyin}/${i.aLIas_pinyin}/qiugou/list-1.html`"
                                        :title="item.name">
                                        {{ i.alias }}
                                    </NuxtLink>
                                </div>
                            </div>
                        </div>
                        <div class="shop_alert_1_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="shop_alert_img_ul clearfix">
                                <div class="shop_alert_img_li clearfix" v-for="item in shopMenuGoods">
                                    <NuxtLink :to="getShopLinkPath(item)" class="shop_alert_img_li_a"
                                        :title="item.name">
                                        <img class="shop_alert_img_li_img" :src="item.imgurl" :title="item.name"
                                            :alt="item.name">
                                        <div class="shop_alert_img_li_right">
                                            <h4 class="shop_alert_img_li_h4 dot1">{{ item.name }}</h4>
                                            <div class="shop_alert_img_li_dot3 dot3">{{ item.description }}</div>
                                            <time class="shop_alert_img_li_time">{{ item.updated_at }}</time>
                                        </div>
                                    </NuxtLink>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 我要买  -->
            </div>
        </div>
        <!--商城header-->
        <el-dialog v-model="dialogTableVisible" width="800">
            <div class="tips">
                <p>
                    <img src="@/public/topic/tips.png"> 提示:注册请联系管理员操作!
                </p>
                <p>联系电话:010-56019387</p>
                <p>QQ ： 2909421493 、213552413</p>
            </div>
        </el-dialog>
         
        <section class="HomePanel_out" v-show="panelVisible">
            <!-- <section class="HomePanel_out pc_none" v-show="true">  -->
            <HomePanel></HomePanel> 
        </section>
         

    </header>
</template>

<script setup>


// 引入全局状态-HomePanel_out
const panelVisible = useState('panelVisible')



//1.加载基本依赖 start ---------------------------------------->
import { ref, watch, onMounted } from 'vue'
import { ElDialog } from 'element-plus'
import { getToken, setToken, removeToken } from '@/store/useCookieStore'
import { setTicket, removeTicket } from '@/store/useticketStore'
//网站地址
const { $webUrl, $CwebUrl, $BwebUrl, $LoginWebUrl } = useNuxtApp()
//1.加载基本依赖 end ---------------------------------------->

//1.登录逻辑 start ---------------------------------------->
let ticket = ref('')
let token = ref('')
let route = useRoute()

//页面每次刷新先判断一下用户状态是否已经过期了
//如果没有过期再储存token
ticket.value = route.query.ticket
token.value = route.query.admintoken

if (ticket.value) {
    setTicket(ticket.value)
}
if (token.value) {
    setToken(token.value)
}

//搜索框
let keyword = useState('keyword', () => '')
//用户名
let username = useState('username', () => '用户中心')
//是否删除
let isDel = useState('isDel', () => 1)
//是否显示用户中心
let isShow = useState('isShow', () => false)

let token1 = useState("token1", () => '')
let showToken = useState("showToken", () => '')
token1.value = getToken()


//检测登录状态
let tokenStatus = ref('');
tokenStatus.value = getToken()
if (tokenStatus.value == undefined) {
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    // console.log('错误：未获取到用户token,如果在本地测试请忽略！');
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
} else {
    console.log(tokenStatus.value);
}

//点击登录按钮
let goLogin = () => {
    //开启线上登录模式 start---------------------------------------->
    isDel.value = 0
    token1.value = getToken()
    //王鹏
    //window.open($BwebUrl + "/auth/login.php?backurl=" + $CwebUrl, '_blank');
    //刘佳伟
    //window.open($LoginWebUrl + "/api/goLogin?backurl=" + $CwebUrl, '_blank');
    //党云龙
    window.open($BwebUrl + "/#/login?backurl=" + $CwebUrl, '_blank');
    //开启线上登录模式 end---------------------------------------->

    //开启本地登录模式 start---------------------------------------->
    // window.location.href = $BwebUrl + "/auth/login.php?backurl=" + $CwebUrl;
    //"http://adminpre.bjzxtw.org.cn/auth/login.php?backurl=http://nwpre.bjzxtw.org.cn";
    //开启本地登录模式 end---------------------------------------->
}
let dialogTableVisible = ref(false)

//点击注册按钮
let goRegister = () => {
    dialogTableVisible.value = true
}

//点击用户中心
let userCenter = () => {
    if (isShow.value) {
        isShow.value = false
        return
    } else {
        isShow.value = true
        return
    }
}

// 添加点击事件处理函数
const handleClickOutside = (event) => {
    // 获取用户信息菜单元素
    const userInfoMenu = document.querySelector('.userInfo11');
    // 获取用户按钮元素
    const userButton = document.querySelector('.reg img[alt="用户信息"]')?.parentElement;

    // 如果点击的不是菜单本身且不是用户按钮，则隐藏菜单
    if (userInfoMenu &&
        !userInfoMenu.contains(event.target) &&
        !userButton?.contains(event.target)) {
        isShow.value = false;
    }
}
//2.登录逻辑 end ---------------------------------------->

//3.跳转菜单逻辑 start ---------------------------------------->
let gotosystem = () => {
    let url = $BwebUrl + '/#/login?userurl=' + $CwebUrl;
    isShow.value = false
    //window.location.href = url; 
    window.open(url, '_blank');
}

//点击退出按钮
let exit = () => {
    window.location.href = $CwebUrl;
    isShow.value = false
    isDel.value = 1
    token1.value = getToken()

    let tokendata = getToken()

    //王鹏
    // let url = $BwebUrl + '/auth/logout.php?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
    //   console.log("用户退出登录======token为：", tokendata,url)
    //刘佳伟
    let url = $LoginWebUrl + '/api/logout?backurl=' + $CwebUrl + '&admintoken=' + tokendata;
    window.location.href = url;
    removeToken()
    removeTicket()
}

//点击返回首页
let backHome = () => {
    window.location.href = $CwebUrl;
}

//点击搜索按钮
let goSearch = () => {
    const route = `/search/search?keyword=${keyword.value}`;
    window.location.href = route;
}

// 点击广告服务
let goAdvertising = () => {
    //本地启动广告服务
    //window.open('/advertising?activeName=1', '_blank');
    //线上启动
    if (getToken()) {
        window.open($CwebUrl + '/advertising?activeName=1', '_blank');
    } else {
        goLogin()
    }
}

//点击商圈
let goTopic = () => {

    //本地启动
    // window.open('/topic', '_blank'); 

    //线上启动 
    if (getToken()) {
        window.open($CwebUrl + '/topic', '_blank');
    } else {
        goLogin()
    }
}

//监听token状态
watch(token1, (newval, oldval) => {
    //console.log(newval, oldval);
    showToken.value = newval
}, {
    deep: true,
    immediate: true,
})

//获得网站logo
const logo = ref("")
const webSiteName = ref("")
let getLogo = async () => {
    const responseStatus = await requestDataPromise('/web/getWebsiteHead', {
        method: 'GET',
        query: {},
    });
    logo.value = responseStatus.data.logo;
    webSiteName.value = responseStatus.data.website_name;
}
getLogo();
//3.跳转菜单逻辑 end ---------------------------------------->

//4.获取广告 start ---------------------------------------->
let adImg = ref({})
//4.获取广告 end ---------------------------------------->

//5.获取登录状态 start ---------------------------------------->
// 在组件卸载时移除事件监听
onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside);
})

onMounted(async () => {
    //添加监听关闭个人中心菜单
    document.addEventListener('click', handleClickOutside);

    //从客户端获取登录状态
    //从客户端阶段开始 持续查询登录状态
    let getLoginStatus = async () => {
        //获得token
        const token = getToken();
        const { $webUrl, $CwebUrl } = useNuxtApp();

        if (token == undefined) {
            //如果没有获取到token 不访问后端获取在线状态
            console.log("没有获取到token！无需查询登录状态！")
            showToken.value = false;

        } else {
            //如果获取到了token 访问后端查询状态
            console.log("已获取到用户token,开始查询登录状态！")
            const queryParams = new URLSearchParams({
                token: getToken()
            });
            let url = `${$webUrl}/api/loginStatus?${queryParams.toString()}`
            const responseStatus = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Userurl': $CwebUrl,
                    //'token': getToken(),
                    'Origin': $CwebUrl
                }
            });
            const result = await responseStatus.json();
            console.log(result)

            if (result.code == 200) {
                console.log("用户已经登录！");
                showToken.value = true;
            }
            if (result.code == -1) {
                isShow.value = false;
                showToken.value = false;
                removeToken();
                removeTicket();
                ElMessage.error('您没有权限登录该网站！')
            }
            if (result.code == -2) {
                isShow.value = false;
                showToken.value = false;
                removeToken();
                removeTicket();
                ElMessage.error('您已退出登录！')
            }
        }
    }
    getLoginStatus();
    setInterval(getLoginStatus, 3000);

    //从客户端获取广告
    //从客户端获取行政职能部门 加快打开速度
    const { $webUrl, $CwebUrl } = useNuxtApp();
    //广告1
    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_top`
    const responseAd1 = await fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd1 = await responseAd1.json();
    adImg.value = resultAd1.data[0];

    //从客户端获取用户名
    let userInfoUrl = `${$webUrl}/user/getUserInfo`
    const userInfoResponse = await fetch(userInfoUrl, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const userInfo = await userInfoResponse.json();
    if (userInfo.code == 200) {
        username.value = userInfo.data.nickname
    }

})
//5.获取登录状态 end ---------------------------------------->

//6.商城 start ---------------------------------------->
//6.1 商城搜索
const shopKeyword = ref('')
let goShopSearch = () => {
    const route = `/xiangcunshangcheng/search/search?keyword=${shopKeyword.value}`;
    window.location.href = route;
}
//6.2 商城菜单
//我要卖
const alert_1_num = ref(0)
const qhTabs = function (number) {
    alert_1_num.value = number
}
//6.3 获得商城菜单
const shopMenu = ref([]) //获得商城菜单
const shopMenuGoods = ref([]) //获得产品站台里面的商品

let getShopMenu = async () => {
    const responseStatus = await requestDataPromise('/web/getWebsiteshopCat', {
        method: 'GET',
        query: {
            id: 346,
            page: 1,
            pageSize: 10,//请求所有菜单
        },
    });

    if (responseStatus.data.category) {
        shopMenu.value = responseStatus.data.category[0].children;
    }
    //shopMenuGoods.value = responseStatus.data.goods;
    //只展示6个商品
    for (let index in responseStatus.data.goods) {
        if (index <= 5) {
            shopMenuGoods.value.push(responseStatus.data.goods[index])
        }
    }
}
getShopMenu();
//6.商城 end ---------------------------------------->



const togglePanel = () => {
  panelVisible.value = true
}

</script>

<style lang="less" scoped>
//常规 header start ---------------------------------------->
.userInfo11 {
    width: 100px;
    height: 80px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    position: absolute;
    top: 40px;
    right: 35px;
    font-size: 14px;
    z-index: 999;

    li {
        height: 40px;
        line-height: 40px;
        color: #333333;
        padding-left: 10px;
    }

    >li:hover {
        color: #028E21;
    }
}

.tips {
    padding: 20px 0;
    text-align: center;
    font-size: 20px;
    color: #333333;
    font-weight: bold;

    img {
        width: 78px;
        height: 78px;
        vertical-align: middle;
        margin-right: 20px;

        p {
            line-height: 30px;
        }
    }

    p {
        line-height: 40px;
    }

    >p:first-child {
        margin-bottom: 30px;
    }

}

/* 页面头部 */
header {
    width: 100%;
    font-size: 12px;
    font-family: PingFang SC-Regular;
    color: #666666;
    background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/head/headtopbg.png") repeat-x;
}

.headerNav {
    width: 100%;
    height: 33px;
    line-height: 33px;
}

.headerNav .left span {
    margin-right: 20px;

    a {
        color: #666666;
    }
}

.headerNav .right {
    display: flex;
    margin-right: 10px;
    position: relative;

    button {
        font-size: 12px;
        color: #666666;
        border: none;
        background: none;
        cursor: pointer;
    }

    .login {
        width: 36px;
        height: 19px;
        color: #fff;
        border-radius: 4px;
        background-color: #028E21;
        margin-right: 15px;
        cursor: pointer;
    }

    .menu,
    .right-top-menu {
        display: flex;
    }

    .reg {
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 33px;

        img {
            margin-right: 5px;
        }
    }
}

.headerNav .right {
    float: right;
    font-size: 12px;

    span {
        margin-right: 20px;
    }

    .home,
    .collection {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: -3px;
    }

    .home {
        background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
    }

    .collection {
        background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
    }

    .exit {
        line-height: 30px;
    }

    // .exit:hover{
    //     color: #028E21;
    // }
}

/* // 头部logo */
.headerLogo {
    height: 145px;
    position: relative;

    //background: url("../../public/head/topBg.png") no-repeat center;
    .titlead {
        position: absolute;
        bottom: 14px;
        right: 26px;
        width: 830px;
        height: 110px;
        overflow: hidden;

        a {
            display: block;
            width: 830px;
            height: 110px;
            overflow: hidden;
        }

        img {
            width: 100%;
            height: 110px;
        }
    }

    .inner {
        position: relative;
        height: 145px;
    }

    .inner>img {
        width: 297px;
        height: 110px;
        margin-top: 20px;
        cursor: pointer;
    }

    /* // 搜索框部分 */
    .search {
        float: left;
        width: 440px;
        height: 40px;
        background-color: #fff;
        line-height: 40px;
        margin-left: 39px;
        margin: 71px 39px 48px;
        position: relative;

        em {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png") no-repeat;
            position: absolute;
            top: 5px;
            left: 15px;
        }

        input {
            float: left;
            width: 351px;
            height: 40px;
            border: none;
            outline: none;
            padding-left: 65px;
            box-sizing: border-box;
            border: 1px solid #028E21;
            border-right: none;
            border-radius: 4px 0px 0px 4px;
        }

        button {
            float: right;
            width: 89px;
            height: 40px;
            background-color: #028E21;
            border-radius: 0px 4px 4px 0px;
            border: none;
            font-size: 14px;
            color: #fff;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
        }

    }

    /* // 右侧小图标 */
    .serve {
        float: right;
        height: 60px;
        margin-top: 60px;
        margin-right: 60px;

        >li {
            float: left;
            height: 64px;
            margin-left: 48px;
        }

        >li>a {
            display: inline-block;
            height: 64px;
        }

        >li img {
            width: 29px;
            height: 29px;
            padding: 8px 14px;
        }

        >li p {
            height: 28px;
            text-align: center;
            color: #666666;
        }
    }
}

//常规 header end ---------------------------------------->

//商城 header start ---------------------------------------->
.clearfix_2::after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.shop_head {
    width: 1200px;
    margin: 30px auto;
}

.shop_head_left {
    float: left;
    width: 322px;
    margin-right: 33px;

    .shop_head_left_a {
        width: 322px;
        display: block;
    }
}

.shop_head_img {
    width: 297px;
    height: 110px;
    display: block;
}

.shop_head_form_out {
    width: 550px;
    float: left;
}

.shop_head_form {
    margin-top: 37px;
    display: block;
    width: 547px;
    border: solid 1px #A01C0E;
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;

    .shop_head_btn {
        float: right;
        width: 52px;
        height: 100%;
        border: solid 1px #fff;
        box-sizing: border-box;
        background: url(@/public/img/3.png) no-repeat center center #A01C0E;
        background-size: 22px 22px;
        cursor: pointer;
    }

    .shop_head_inp {
        display: block;
        text-indent: 11px;
        height: 40px;
        line-height: 40px;
        width: 490px;
        border: none;
        outline: none;
    }
}

.shop_head_form_foot {
    width: 550px;
    margin-top: 10px;

    .shop_head_form_foot_a {
        float: left;
        height: 18px;
        line-height: 18px;
        color: #999;
        font-size: 14px;
        margin-right: 10px;
    }
}

.shop_head_form_foot_a:nth-of-type(1) {
    color: #A01C0E;
}

.shop_head_form_foot_a:hover {
    color: #A01C0E;
}

.shop_head_right {
    float: right;
    margin-top: 37px;
    position: relative;

    .shop_head_right_btn {
        float: right;
        width: 120px;
        height: 40px;
        line-height: 40px;
        color: #666;
        font-size: 14px;
        margin-left: 10px;
        text-indent: 52px;
        border: 1px solid #E9E9E9;
        background: no-repeat 20px center #F4F4F4;
        background-size: 24px 24px !important;
        cursor: pointer;
    }
}

.shop_head_right_btn:nth-of-type(1) {
    background-image: url(@/public/img/4.png);
}

.shop_head_right_btn:nth-of-type(2) {
    background-image: url(@/public/img/5.png);
}

// .shop_head_right_btn:hover {
//     color: #fff;
//     background: no-repeat 20px center #A01C0E;
//     background-size: 24px 24px;
// }

.shop_head_right_btn_active {
    color: #fff !important;
    background-size: 24px 24px !important;
    background: url(@/public/img/4a.png) no-repeat 20px center #A01C0E !important;
}

.shop_head_right_btn:nth-of-type(1):hover {
    background-image: url(@/public/img/4a.png);
}

.shop_head_right_btn:nth-of-type(2):hover {
    background-image: url(@/public/img/5a.png);
}

.shop_head_right_btn_1_only {
    color: #fff;
    background: no-repeat 20px center #A01C0E;
    background-size: 24px 24px;
    background-image: url(@/public/img/4a.png);
}

.shop_head_right_btn_2_only {
    color: #fff;
    background: no-repeat 20px center #A01C0E;
    background-size: 24px 24px;
    background-image: url(@/public/img/5a.png);
}

.shop_head_right_btn:hover .shop_head_right_out {
    display: block;
}

.shop_head_right_box {
    background: #fff;
    height: 1111px;
    margin-top: 20px;
}

.shop_alert_out {
    position: absolute;
    width: 1036px;
    right: 0px;
    top: 99%;
    z-index: 111;
}

.shop_alert_box {
    background: #fff;
    box-sizing: border-box;
    padding: 0px 20px;
    border: solid 1px #A01C0E;
    width: 100%;
    margin-top: 20px;

    .shop_alert_head_box {}

    .shop_alert_head_name_1 {
        float: left;
        font-weight: bold;
        color: #A01C0E;
        font-size: 20px;
        margin-top: 30px;
        letter-spacing: 1px;
    }

    .shop_alert_head_name_2 {
        float: left;
        color: #333;
        font-size: 16px;
        margin: 35px 0px 0px 10px;
        position: relative;
        padding-left: 22px;
        font-weight: bold;
    }
}

.shop_alert_head_name_2::after {
    content: '';
    display: block;
    width: 14px;
    height: 10px;
    position: absolute;
    left: 0px;
    bottom: 3px;
    background: url(@/public/img/16.png) no-repeat left 0px;
    background-size: 100% 100%;
}

.shop_alert_head_btn_a {
    float: right;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    padding: 0px 20px 0px 36px;
    margin-top: 23px;
    background: url(@/public/img/14.png) no-repeat 18px center #A01C0E;
    background-size: 14px auto;
    cursor: pointer;
}

.shop_alert_ul {
    margin: 28px auto 0px;
    width: 980px;
}

.shop_alert_li {
    margin-bottom: 11px;
    // display: flex;

    .shop_alert_li_label {
        float: left;
        width: 120px;
        line-height: 21px;
        color: #333;
        font-size: 16px;
        padding-right: 24px;
        font-weight: bold;
        position: relative;
        box-sizing: border-box;
        margin-right: 20px;
    }

    .shop_alert_li_label::after {
        content: '';
        display: block;
        position: absolute;
        right: 0px;
        top: 0px;
        width: 22px;
        height: 22px;
        background: url(@/public/img/15.png) no-repeat right 0px;
        background-size: 100% 100%;
    }

    .shop_alert_li_panel {
        float: left;
        width: 840px;
    }

    .shop_alert_li_panel_a {
        float: left;
        height: 21px;
        line-height: 21px;
        color: #666;
        font-size: 16px;
        margin: 0px 25px 0 0;
    }
}

.shop_alert_li_panel_a:hover {
    color: #A01C0E;
}

.shop_alert_1_index {
    margin-top: 20px;
}

.shop_alert_img_ul {
    margin-top: 30px;
}

.shop_alert_img_li {
    float: left;
    width: 314px;
    margin: 0px 26px 30px 0px;
    box-sizing: border-box;

    .shop_alert_img_li_a {
        display: block;
        width: 100%;
    }

    .shop_alert_img_li_img {
        width: 130px;
        height: 130px;
        margin-right: 10px;
        float: left;
    }

    .shop_alert_img_li_right {
        width: 173px;
        float: right;
    }

    .shop_alert_img_li_h4 {
        height: 18px;
        line-height: 18px;
        color: #333;
        font-size: 14px;
        font-weight: bold;
        margin-top: 7px;
    }

    .shop_alert_img_li_dot3 {
        height: 48px;
        line-height: 16px;
        color: #666;
        font-size: 12px;
        margin-top: 13px;
    }

    .shop_alert_img_li_time {
        float: left;
        height: 26px;
        line-height: 26px;
        color: rgba(51, 51, 51, 0.4);
        font-size: 12px;
        margin-top: 18px;
        background: #f7f7f7;
        padding: 0px 4px;
    }
}

.shop_alert_img_li:nth-of-type(3n) {
    margin-right: 0;
}

.shop_alert_img_li_a:hover * {
    color: #A01C0E;
}

.clearfix {
    overflow: hidden;
}

.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 {
        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_right {
        height: 40px;
        border-bottom: 1px solid #E8E9EC;
        margin-top: 4px;
        background: #F8F8F8;
        position: relative;
        z-index: 2;
    }

    .shop_name_right::after {
        content: '';
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
        height: 100%;
        width: 16px;
        background: url(@/public/img/9.png) no-repeat 0px bottom #fff;
        background-size: 100% auto;
    }

    .shop_name_btn {
        width: 24px;
        height: 24px;
        float: right;
        margin: 10px 22px 0px 0px;
        background: url(@/public/img/8.png) no-repeat center center;
        border-radius: 50%;
        background-size: 100% 100%;
    }
}

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

.dot3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

a.shop_nav_head_a {
    color: #A01C0E !important;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 17px;
    background: url(@/public/img/home.png) no-repeat left center;
    background-size: 12px 12px;
    margin-left: 10px;
}

//商城 header end ---------------------------------------->
</style>


<style lang="less" scoped>

 

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

            .headerNav{
                    height:auto;padding:5px 0;overflow:hidden;box-sizing:border-box;
                    background:#f7f7f7; 
                }
             .headerNav .left>span{margin:0px 0px 0px 8px;}   
             .headerNav .left>span:nth-of-type(1){margin:0px;}   


            .phone_head_btn {
                background: url(../../public/image/8.png) no-repeat 0 0;
                background-size: 100% 100%;
                float: right;
                height: 26px;
                margin-top: 4px;
                width: 26px; 
            }

            .headerLogo{margin-top:8px;overflow:hidden;height:auto;}
            .headerLogo .inner{height:auto;display:block;}
            .headerLogo .inner > img{float:left;width:auto;height:40px;margin:0px 10px 0px 0px;}


            .logo_right_box{ 
                float:right;
                
                .logo_right_btn{float:left; width:10vw;margin-left:7vw;text-align:center;}    
                .logo_right_btn:nth-of-type(1){margin-left:0px;}    
                .logo_right_btn_img{width:6vw; display:inline-block; }    
                .logo_right_btn_text{display:block;width:100%;height:16px;color:#333;
                                    text-align:center;line-height:16px;font-size:3vw;}    

            }   
             header{height:auto;}    
            .headerNav .inner .left{float:none;width:100%;position:relative;}

            .shop_head{width:92%;margin:8px auto 0;overflow:hidden;}
            .shop_head_left{
                width: auto;
                height: 40px;
                margin: 0px 20px 0px 0px;
            }
            .shop_head_left *{
                width:auto!important;;height:100%;
             }

             .shop_head_form_out{
                 width:auto;float:none;margin-top:5px;
             }
             .shop_head_form{ 
                margin-top:0px;width:auto;height:30px;
             }

             .shop_head_form .shop_head_inp{ height:30px;width:46vw;float:left;}
             .shop_head_form .shop_head_btn{width:11vw;
             } 
 
            .phone_shop_nav_head_a {
                font-size: 0;
                color: transparent;
                position:absolute;
                top:6px;
                right:40px;
                background-size:100% 100%!important;

                padding:0px!important;width:22px;height:22px;line-height:111px;
                overflow:hidden;margin:0!important;
            }
            .shop_head_right{display:none;}
            .headerNav .right{display:none;}
            .titlead{display:none;}
            .phone_none{display:none;}
    }


</style>