dy_qgsnfzzx_org_cn/components/home/pageHead.vue

<template>
    <header>
        <div class="headerContainer">
            <!-- 欢迎导航 -->
            <div class="headerBox">
                <div class="headerMain">
                    <div class="headerBox_left">欢迎来到三农调研中心官网!</div>
                    <div class="headerBox_right">
                        <NuxtLink to="#">收藏</NuxtLink>
                        <span>|</span>
                        <NuxtLink to="/">人员查询</NuxtLink>
                        <span>|</span>
                        <NuxtLink to="/">车辆查询</NuxtLink>
                        <span>|</span>
                        <NuxtLink to="/" @click="phone_close_fun">用户登录</NuxtLink>
                    </div>
                </div>
            </div>
            <!-- banner部分 -->
            <div class="logoBox">
                <!-- logo -->
                <div class="logoBox_left">
                    <NuxtLink to="/">
                        <img src="../../public/header/logo.png" alt="logo">
                    </NuxtLink>
                </div>
                <!-- 轮播文字 -->
                <div class="logoBox_right">
                    <div class="logoBox_right_top"></div>

                    <div class="scroll-rotate-container">
                        <div class="gdbox">
                            <div class="gundong item1">
                                <h2 class="topText">
                                    <NuxtLink to="/" >三农调研中心</NuxtLink>
                                    <span>官网</span>
                                </h2>
                                <div class="bottomText">
                                    <h4 class="g_text">
                                        <!--<NuxtLink to="#">全国三农信息一体化应用平台</NuxtLink>-->
                                    </h4>
                                    <h2 class="a_text">
                                        <span>
                                            <NuxtLink to="/">sannongdy.org.cn</NuxtLink>
                                        </span>
                                    </h2>
                                </div>  
                            </div>
                            <div class="gundong item2">
                                <h2 class="topText">
                                    <NuxtLink to="/" >全国三农问题调研</NuxtLink>
                                    <!--<span>官网</span>-->
                                </h2>
                                <div class="bottomText">
                                    <h4 class="g_text">
                                        <NuxtLink to="#">全国三农信息一体化应用平台</NuxtLink>
                                    </h4>
                                    <h2 class="a_text">
                                        <span>
                                            <NuxtLink to="/">sannongdy.org.cn</NuxtLink>
                                        </span>
                                    </h2>
                                </div>  
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </header>

</template>

<script setup>
// 引入全局状态-HomePanel_out
const panelVisible = useState('panelVisible')
//1.加载基本依赖 start ---------------------------------------->
import { ref, watch, onMounted } from 'vue'
import { ElDialog, ElMessage } 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("-------------------------------------未获取到用户token")
} else {
    console.log("--------------------------------已获取到用户token")
}
//点击登录按钮
let goLogin = () => {
    //开启线上登录模式 start---------------------------------------->
    isDel.value = 0
    token1.value = getToken()
    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 dialogTableVisible_phone = 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;
    isDel.value = 1
    token1.value = getToken()
    isShow.value = false;
    let tokendata = getToken()
    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 = () => {
    if (getToken()) {
        window.open($CwebUrl + '/topic', '_blank');
    } else {
        goLogin()
    }
}
//点击用户==手机版11
let user_fun = () => {
    if (getToken()) {
        //已经登录
        goLogin()
    } else {
        //没有登录
        dialogTableVisible_phone.value = true
        return
    }
}
// 添加关闭对话框处理函数
const phone_close_fun = () => {
    // 在这里可以添加关闭对话框前需要执行的逻辑
    dialogTableVisible_phone.value = false;
    // 确保对话框关闭
    goLogin()
}
// 监听token状态
watch(token1, (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: {},
    });
    if (responseStatus.code == 200) {
        logo.value = responseStatus.data.logo;
        webSiteName.value = responseStatus.data.website_name;
    } else if (responseStatus.code == 0) {
        window.location.href = $CwebUrl + '/404';
    }
}
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=snzxw_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 ---------------------------------------->
//点击手机
// 添加全局状态
// const panelVisible = useState('panelVisible', () => false)
const togglePanel = () => {
  panelVisible.value = true
}
</script>

<style lang="less" scoped>
//自适应 start ---------------------------------------->
//大于1400px
@media screen and (min-width: 1401px) {
    .headerContainer {
        width: 100%;
    }
    .headerBox {
        width: 100%;
        height: 40PX !important;
        margin-bottom: 20PX !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .6);
        .headerMain {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 1401PX !important;
            .headerBox_left {
                font-size: 18PX !important;
                color:#000;
                text-shadow:-1PX 0 #fff, 0PX 1PX #fff, 1PX 0 #fff, 0 -1PX #fff;
            }
            .headerBox_right {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                a {
                    font-size: 15PX !important;
                    color:#000;
                    text-shadow:-1PX 0 #fff, 0px 1PX #fff, 1PX 0 #fff, 0 -1PX #fff;
                    margin-left: 6PX !important;
                }
                span {
                    font-size: 12PX !important;
                    // margin-left: 6PX !important;
                    padding: 0 20PX;
                    
                }
            }
        }
    }
    .logoBox {
        width: 1401PX !important;
        height: 220PX !important;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logoBox_left {
            width: 200PX !important;
            img {
                width: 200PX !important;
                height: 161.5PX !important;
                margin-top: -40PX !important;
            }
        }
        .logoBox_right {
            width: 1100PX !important;
            height: 160PX !important;
            //background:blue;
            .logoBox_right_top {
                text-align: right;
                a {
                    font-size: 22PX !important;
                    color: #0828bb;
                    font-weight: bold;
                    padding-left: 2%;
                    -webkit-text-stroke: 1PX #FFF !important;
                }
            }
            .scroll-rotate-container {
                position: relative;
                width: 1100PX !important;       /* 容器宽度 */
                height: 160PX !important;      /* 固定高度，和单个 item 高度一致 */
                //border: 1px solid #eee;
                overflow: hidden;    /* 隐藏超出视口的内容 */

                .gdbox{
                    width: 100%;
                    height: 200%;        /* 2倍视口高度（两个 item 各占1倍） */
                    animation: scroll-up 8s linear infinite; /* 8秒一轮，匀速循环 */
                    // background:red;
                    .gundong{
                        width: 100%;
                        height: 50%;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        background:block;
                        .topText{
                            width:1100PX !important;
                            height: 120PX !important;
                            
                            letter-spacing:46PX;
                            font-size:75PX;
                            text-shadow:-2PX 0 4PX #fff,0PX 2PX 4PX #fff,2PX 0 4PX #fff,0 -2PX 4PX #fff;
                            color:#a01c00;
                            line_height:120PX;
                            font-weight:normal;
                            
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            a{
                                height: 90PX !important;
                                color: #a01c00; /* 自定义颜色 */
                                
                            }
                            .topText:deep(a) {
                                color: inherit;
                                text-decoration: none;
                            }
                            span{
                            //background:blue;
                            width: 242PX !important;
                            height: 100PX !important;
                            //padding-top:10px;
                            }

                        }
                        .bottomText{
                            height: 40PX !important;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .g_text {
                                width: 500PX !important;
                                height: 40PX !important;
                                display: block;
                                //background:blue;
                                margin-block-start: 1.33em;
                                margin-block-end: 1.33em;
                                margin-inline-start: 0PX;
                                margin-inline-end: 0PX;
                                font-weight: normal;
                                unicode-bidi: isolate;
                                font-size: 22PX;
                                text-shadow: -2PX 0 2PX #fff, 0PX 2PX 2PX #fff, 2PX 0 2PX #fff, 0 -2PX 2PX #fff;
                            
                                a{
                                    color: #a01c00;
                                }
                                .g_text:deep(a) {
                                    color: inherit;
                                    text-decoration: none;
                                }
                            }
                            .a_text{
                                width: 500PX !important;
                                height: 40PX !important;
                                display: block;
                                // background:blue;
                                font-size: 22PX;
                                font-weight: normal;
                                text-shadow: -2PX 0 2PX #fff, 0PX 2PX 2PX #fff, 2PX 0 2PX #fff, 0 -2PX 2PX #fff;
                                color: #a01c00;
                                text-align:right;
                                line_height:40PX;
                            }
                            .a_text:deep(a) {
                                color: inherit;
                                text-decoration: none;
                            }
                        }
                    }
                }
            }


            /* 核心动画：向上滚动 */
            @keyframes scroll-up {
                0% {
                    transform: translateY(0); /* 初始位置：显示第一个 item */
                }
                40% {
                    transform: translateY(0); /* 停留：第一个 item 显示40%时长 */
                }
                50% {
                    transform: translateY(-50%); /* 滚动：向上移动50%（显示第二个 item） */
                }
                90% {
                    transform: translateY(-50%); /* 停留：第二个 item 显示40%时长 */
                }
                100% {
                    transform: translateY(0); /* 回到初始位置，循环 */
                }
            }

        }
    }
}

//大于800px小于等于1400px
@media screen and (min-width: 801px) and (max-width: 1400px) {
   .headerContainer {
        width: 100%;
    }
    .headerBox {
        width: 100%;
        height: 40PX !important;
        margin-bottom: 20PX !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .6);
        .headerMain {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-width: 801px !important;
            max-width: 1400px !important;
            .headerBox_left {
                font-size: 18PX !important;
                color:#000;
                text-shadow:-1PX 0 #fff, 0PX 1PX #fff, 1PX 0 #fff, 0 -1PX #fff;
            }
            .headerBox_right {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                a {
                    font-size: 15PX !important;
                    color:#000;
                    text-shadow:-1PX 0 #fff, 0px 1PX #fff, 1PX 0 #fff, 0 -1PX #fff;
                    margin-left: 6PX !important;
                }
                a:last-child{
                    margin-right: 12PX !important;
                }
                span {
                    font-size: 12PX !important;
                    // margin-left: 6PX !important;
                    padding: 0 20PX;
                    
                }
            }
        }
    }
    .logoBox {
        min-width: 801px !important;
        max-width: 1400px !important;
        // width: 1401PX !important;
        height: 220PX !important;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logoBox_left {
            width: 16% !important;
            img {
                display: block;
                width: 100% !important;
                height: 100% !important;
                margin-top: -100PX !important;
            }
        }
        .logoBox_right {
            width: 84% !important;
            height: 160PX !important;
            // background:blue;
            
            .logoBox_right_top {
                // background: red;
                text-align: right;
                a {
                    font-size: 15PX !important;
                    color: #0828bb;
                    font-weight: bold;
                    padding-left: 2%;
                    -webkit-text-stroke: 1PX #FFF !important;
                }
            }
            .scroll-rotate-container {
                // background: #a01c00;
                position: relative;
                width: 100% !important;       /* 容器宽度 */
                height: 160PX !important;      /* 固定高度，和单个 item 高度一致 */
                //border: 1px solid #eee;
                overflow: hidden;    /* 隐藏超出视口的内容 */

                .gdbox{

                    width: 100%;
                    height: 200%;        /* 2倍视口高度（两个 item 各占1倍） */
                    animation: scroll-up 8s linear infinite; /* 8秒一轮，匀速循环 */
                    // background:red;
                    .gundong{

                        width: 100%;
                        height: 50%;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        background:block;
                        .topText{

                            width:100% !important;
                            height: 110PX !important;
                            // background: blue;
                            letter-spacing:46PX;
                            font-size:33px;
                            text-shadow:-2PX 0 4PX #fff,0PX 2PX 4PX #fff,2PX 0 4PX #fff,0 -2PX 4PX #fff;
                            color:#a01c00;
                            line-height:120PX;
                            font-weight:normal;
                            
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            a{
                                height: 90PX !important;
                                line-height: 90PX;
                                color: #a01c00; /* 自定义颜色 */
                                // background: yellow;
                            }
                            .topText:deep(a) {
                                color: inherit;
                                text-decoration: none;
                            }
                            span{
                            // background:red;
                            width: 30% !important;
                            height: 90PX !important;
                            line-height: 90PX;
                            text-align: right;
                            //padding-top:10px;
                            }

                        }
                        .bottomText{
                            height: 40PX !important;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .g_text {
                                width: 500PX !important;
                                height: 40PX !important;
                                display: block;
                                //background:blue;
                                margin-block-start: 1.33em;
                                margin-block-end: 1.33em;
                                margin-inline-start: 0PX;
                                margin-inline-end: 0PX;
                                font-weight: normal;
                                unicode-bidi: isolate;
                                font-size: 14px;
                                text-shadow: -2PX 0 2PX #fff, 0PX 2PX 2PX #fff, 2PX 0 2PX #fff, 0 -2PX 2PX #fff;
                            
                                a{
                                    color: #a01c00;
                                }
                                .g_text:deep(a) {
                                    color: inherit;
                                    text-decoration: none;
                                }
                            }
                            .a_text{
                                width: 500PX !important;
                                height: 40PX !important;
                                display: block;
                                // background:blue;
                                font-size: 14px;
                                font-weight: normal;
                                text-shadow: -2PX 0 2PX #fff, 0PX 2PX 2PX #fff, 2PX 0 2PX #fff, 0 -2PX 2PX #fff;
                                color: #a01c00;
                                text-align:right;
                                line-height:40PX;
                            }
                            .a_text:deep(a) {
                                color: inherit;
                                text-decoration: none;
                            }
                        }
                    }
                }
            }


            /* 核心动画：向上滚动 */
            @keyframes scroll-up {
            0% {
                transform: translateY(0); /* 初始位置：显示第一个 item */
            }
            40% {
                transform: translateY(0); /* 停留：第一个 item 显示40%时长 */
            }
            50% {
                transform: translateY(-50%); /* 滚动：向上移动50%（显示第二个 item） */
            }
            90% {
                transform: translateY(-50%); /* 停留：第二个 item 显示40%时长 */
            }
            100% {
                transform: translateY(0); /* 回到初始位置，循环 */
            }
            }

        }
    }
}
//小于等于800px
@media screen and (max-width: 800px) {
    .headerContainer {
        width: 100%;
        // background: RED;
    }
    
    
     .headerBox {
        width: 100%;
        height: 40px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .6);
        display: none;
        .headerMain {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .headerBox_left {
                font-size: 18px;
                color:#0f50d5;
            }
            .headerBox_right {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                a {
                    font-size: 18px;
                    color:#0f50d5;
                    margin-left: 6px;
                }
                span {
                    margin-left: 6px;
                }
            }
        }
    }

    .logoBox {
       max-width: 800PX !important;
        height: 140PX !important;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .logoBox_left {
            width: 20% !important;
            margin-left: 10PX;
            // float: left;
            // margin-top: 0;
            img {
                width: 100% !important;
                height: 100%!important;
                margin-top: 20PX !important;
            }
        }
        .logoBox_right {
            width: 72% !important;
            height: 60PX !important;
            margin-right: 10PX;
            // background: green;
            // background:blue;
            margin-top: 40PX;
            .logoBox_right_top {
                text-align: right;
                a {
                    font-size: 22PX !important;
                    color: #0828bb;
                    font-weight: bold;
                    padding-left: 2%;
                    -webkit-text-stroke: 1PX #FFF !important;
                }
            }
            .scroll-rotate-container {
                position: relative;
                width: 100% !important;       /* 容器宽度 */
                height: 60PX !important;      /* 固定高度，和单个 item 高度一致 */
                //border: 1px solid #eee;
                overflow: hidden;    /* 隐藏超出视口的内容 */
                // background: BLUE;
                .gdbox{
                    width: 100%;
                    height: 210%;        /* 2倍视口高度（两个 item 各占1倍） */
                    animation: scroll-up 8s linear infinite; /* 8秒一轮，匀速循环 */
                    // background:red;
                    .gundong{
                        width: 100%;
                        height: 50%;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        background:block;
                        .topText{
                            width:100% !important;
                            height: 30PX !important;
                            
                            // letter-spacing:46PX;
                            font-size:19PX;
                            text-shadow:-2PX 0 4PX #fff,0PX 2PX 4PX #fff,2PX 0 4PX #fff,0 -2PX 4PX #fff;
                            color:#a01c00;
                            // line_height:120PX;
                            font-weight:normal;
                            
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            a{
                                // height: 90PX !important;
                                color: #a01c00; /* 自定义颜色 */
                                
                            }
                            .topText:deep(a) {
                                color: inherit;
                                text-decoration: none;
                            }
                            span{
                            // background:blue;
                            width: 40PX !important;
                            height: 30PX !important;
                            // line-height: 68PX;
                            //padding-top:10px;
                            }

                        }
                        .bottomText{
                            height: 38PX !important;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            // background: yellow;
                            .g_text {
                                width: 60% !important;
                                height: 40PX !important;
                                display: block;
                                //background:blue;
                                margin-block-start: 1.33em;
                                margin-block-end: 1.33em;
                                margin-inline-start: 0PX;
                                margin-inline-end: 0PX;
                                font-weight: normal;
                                unicode-bidi: isolate;
                                font-size: 11PX;
                                // text-shadow: -2PX 0 2PX #fff, 0PX 2PX 2PX #fff, 2PX 0 2PX #fff, 0 -2PX 2PX #fff;
                            
                                a{
                                    color: #cc1f19;
                                }
                                .g_text:deep(a) {
                                    color: inherit;
                                    text-decoration: none;
                                }
                            }
                            .a_text{
                                width: 40% !important;
                                height: 40PX !important;
                                display: block;
                                // background:blue;
                                font-size: 11PX;
                                font-weight: normal;
                                // text-shadow: -2PX 0 2PX #fff, 0PX 2PX 2PX #fff, 2PX 0 2PX #fff, 0 -2PX 2PX #fff;
                                color: #cc1f19;
                                text-align:right;
                                line_height:40PX;
                            }
                            .a_text:deep(a) {
                                color: inherit;
                                text-decoration: none;
                            }
                        }
                    }
                }
            }


            /* 核心动画：向上滚动 */
            @keyframes scroll-up {
            0% {
                transform: translateY(0); /* 初始位置：显示第一个 item */
            }
            40% {
                transform: translateY(0); /* 停留：第一个 item 显示40%时长 */
            }
            50% {
                transform: translateY(-50%); /* 滚动：向上移动50%（显示第二个 item） */
            }
            90% {
                transform: translateY(-50%); /* 停留：第二个 item 显示40%时长 */
            }
            100% {
                transform: translateY(0); /* 回到初始位置，循环 */
            }
            }

        }
    }
}
//自适应 end ---------------------------------------->
</style>