增加查询登录状态

assets/css/index.less

@@ -440,6 +440,7 @@
 
             .part1_content {
                 width: 720px;
+                height: 438px;
                 margin-top: 10px;
 
                 .context_left {

components/home/BigSwiper.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 首页大的轮播图 -->
-    <div class="swiper">
+    <div class="swiper"v-if="imagelist">
         <el-carousel height="400px" v-if="imagelist">
             <el-carousel-item v-for="(item, index) in imagelist" :key="index">
                 <NuxtLink :to="`/newsDetail/${item.id}`" target="_blank">

components/home/pageHead.vue

@@ -3,8 +3,10 @@
         <nav class="headerNav">
             <div class="inner">
                 <div class="left">
-                    <span>中农兴业网团</span>
-                    <span>旗下网站： 政府类农业百强网站!</span>
+                    <span>
+                        <a href="http://znxyw.org.cn/" target="_blank">中农兴业网团</a>
+                    </span>
+                    <span>旗下网站：<span>农业百强网站（政府类30强）</span></span>
                 </div>
                 <div class="right">
                     <div class="menu">
@@ -23,7 +25,8 @@
                             <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 }}
+                            <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="搜索">搜索
@@ -37,14 +40,15 @@
             </div>
         </nav>
         <div class="headerLogo">
-            <div class="inner" v-if="logo">
+            <div class="inner">
                 <img :src="logo" :alt="webSiteName" class="left" @click="backHome">
                 <div class="titlead" v-if="adImg">
-                    <a href="http://sannongdy.org.cn/" v-if="adImg.image_url==null" target="_blank">
-                        <img :src="adImg.thumb" :title="adImg.place_name">
-                    </a>     
-                    <a :href="adImg.image_url" v-else>
-                        <img :src="adImg.image_src" :title="adImg.ad_name">
+                    <a href="http://sannongdy.org.cn/" v-if="adImg.image_url == null" target="_blank"
+                        :title="adImg.introduce">
+                        <img :src="adImg.thumb" :alt="adImg.introduce" data-tag="imgurl.ad_tag" :id="adImg.ad_tag">
+                    </a>
+                    <a :href="adImg.image_url" v-else :title="adImg.introduce">
+                        <img :src="adImg.image_src" :alt="adImg.introduce" data-tag="imgurl.ad_tag" :id="adImg.ad_tag">
                     </a>
                 </div>
             </div>
@@ -63,29 +67,30 @@
 
 <script setup>
 //1.加载基本依赖 start ---------------------------------------->
-import { ref, watch } from 'vue'
+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} = useNuxtApp()
+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)
 }
-definePageMeta({
-    middleware: 'auth'
-});
 
 //搜索框
 let keyword = useState('keyword', () => '')
@@ -100,14 +105,15 @@ let token1 = useState("token1", () => '')
 let showToken = useState("showToken", () => '')
 token1.value = getToken()
 
+
 //检测登录状态
 let tokenStatus = ref('');
 tokenStatus.value = getToken()
-if(tokenStatus.value == undefined){
+if (tokenStatus.value == undefined) {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log('错误：未获取到用户token,如果在本地测试请忽略！');
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-}else{
+} else {
     console.log(tokenStatus.value);
 }
 
@@ -116,7 +122,11 @@ 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');
     //开启线上登录模式 end---------------------------------------->
 
     //开启本地登录模式 start---------------------------------------->
@@ -133,53 +143,29 @@ let goRegister = () => {
 
 //点击用户中心
 let userCenter = () => {
-    if(isShow.value){
+    if (isShow.value) {
         isShow.value = false
         return
-    }else{
+    } else {
         isShow.value = true
         return
     }
 }
 
-// //获取用户登录信息
-// let getUserInfo = async () => {
-//     const responseStatus =  await requestDataPromise('/user/getUserInfo', {
-//         method: 'GET',
-//         query: {},
-//     });
-//     //console.log('用户信息：', responseStatus);
-//     //如果能拿到信息，就赋值给username
-//     if(responseStatus.code==200){
-//         username.value = responseStatus.data.nickname
-//     }
-// }
-// getUserInfo();
-
-// //获取登录状态
-// let getLoginStatus = async () => {
-//     //let url = $BwebUrl + '/auth/loginstatus.php' //王鹏
-//     let url = $webUrl + '/api/loginStatus' //刘佳伟
-//     const responseStatus =  await requestDataWebUrl( url, {
-//         method: 'GET',
-//         query: {
-//             'token': tokenStatus
-//         },
-//     });
-//     console.log('登录状态', responseStatus);
-//     if(responseStatus.data.code == 200){
-//         if(responseStatus.data.data.islogin == true){
-//             showToken.value = true 
-//         }else{
-//             showToken.value = false
-//             exit()
-//         }
-//     }else if(responseStatus.data.code == 0){
-//         //退出登录
-//         exit();
-//     }
-// }
-// getLoginStatus();
+// 添加点击事件处理函数
+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 ---------------------------------------->
@@ -196,7 +182,13 @@ let exit = () => {
     isDel.value = 1
     token1.value = getToken()
 
-    let url = $BwebUrl + '/auth/logout.php?backurl=' + $CwebUrl + '&admintoken=' + token1;
+    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()
@@ -216,7 +208,7 @@ let goSearch = () => {
 // 点击广告服务
 let goAdvertising = () => {
     //本地启动广告服务
-    // window.open('/advertising?activeName=1', '_blank');
+    //window.open('/advertising?activeName=1', '_blank');
     //线上启动
     if (getToken()) {
         window.open($CwebUrl + '/advertising?activeName=1', '_blank');
@@ -227,7 +219,6 @@ let goAdvertising = () => {
 
 //点击商圈
 let goTopic = () => {
-    // window.open('/topic', '_blank');
     if (getToken()) {
         window.open($CwebUrl + '/topic', '_blank');
     } else {
@@ -248,37 +239,105 @@ watch(token1, (newval, oldval) => {
 const logo = ref("")
 const webSiteName = ref("")
 let getLogo = async () => {
-    const responseStatus =  await requestDataPromise('/web/getWebsiteFootInfo', {
+    const responseStatus = await requestDataPromise('/web/getWebsiteHead', {
         method: 'GET',
         query: {},
     });
-    console.log('网站logo：', responseStatus);
-    logo.value = responseStatus.data.website_head.logo;
-    webSiteName.value = responseStatus.data.website_head.website_name;
+    logo.value = responseStatus.data.logo;
+    webSiteName.value = responseStatus.data.website_name;
 }
 getLogo();
 //3.跳转菜单逻辑 end ---------------------------------------->
 
 //4.获取广告 start ---------------------------------------->
-//let adList = ref([]);
 let adImg = ref({})
-async function getAdData(){
-    const adData = await requestDataPromise('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'xcw_top'}});
-    if(adData.code == 200){
-        for(let item of adData.data){
-            if(item.ad_tag == 'xcw_top'){
-                adImg.value = item;
+//4.获取广告 end ---------------------------------------->
+
+//5.获取登录状态 start ---------------------------------------->
+// 在组件卸载时移除事件监听
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+})
+
+onMounted(async () => {
+    //添加监听关闭个人中心菜单
+    document.addEventListener('click', handleClickOutside);
+
+    //从客户端获取登录状态
+    //从客户端阶段开始 持续查询登录状态
+    let getLoginStatus = async () => {
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+        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) {
+            if (result.data.isLogin == true) {
+                console.log("用户已经登录！");
+                showToken.value = true;
+
+            } else {
+                console.log("用户未登录！");
+                showToken.value = false;
+                //退出登录
+                isShow.value = false;
+                removeToken();
+                removeTicket();
+            }
+        } else {
+            console.log("用户已退出登录！");
+            //退出登录
+            isShow.value = false;
+            showToken.value = false;
+            removeToken();
+            removeTicket();
         }
-    }else{
-        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-        console.log("错误位置：设置logo旁广告")
-        console.log("后端错误反馈：",adData.message)
-        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     }
-}
-getAdData();
-//4.获取广告 end ---------------------------------------->
+    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 ---------------------------------------->
 </script>
 
 <style lang="less" scoped>
@@ -337,7 +396,7 @@ getAdData();
 /* 页面头部 */
 header {
     width: 100%;
-    height: 180px;
+    // height: 201px;
     font-size: 12px;
     font-family: PingFang SC-Regular;
     color: #666666;
@@ -352,6 +411,9 @@ header {
 
 .headerNav .left>span {
     margin-right: 20px;
+    a{
+        color: #666666;
+    }
 }
 
 .headerNav .right {
@@ -432,33 +494,37 @@ header {
 .headerLogo {
     height: 145px;
     position: relative;
+
     //background: url("../../public/head/topBg.png") no-repeat center;
     .titlead {
         position: absolute;
-        bottom: 14px;
-        right: 26px;
+        bottom: 5px;
+        right: 0;
         width: 830px;
-        height: 110px;
+        height: 120px;
         overflow: hidden;
+
         a {
             display: block;
-            width: 830px;
             height: 110px;
             overflow: hidden;
         }
+
         img {
             width: 100%;
-            height:110px;
+            height: 110px;
         }
     }
+
     .inner {
         position: relative;
         height: 145px;
     }
+
     .inner>img {
-        width: 297px;
-        height: 110px;
-        margin-top: 20px;
+        // width: 342px;
+        //height: 120px;
+        margin-top: 22px;
         cursor: pointer;
     }
 

components/home/pageNavigation.vue

@@ -226,7 +226,7 @@ let goToSearch = () => {
             color: #F8ECD2;
 
             div:nth-child(2) {
-                padding-top: 20px;
+                padding-top: 17px;
             }
         }
     }

pages/[dir]/[dir]/[id].vue

@@ -133,7 +133,7 @@
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem ,ElRadio, ElRadioGroup} from 'element-plus'
+import { ElBreadcrumb, ElBreadcrumbItem, ElRadio, ElRadioGroup, ElCheckbox,ElCheckboxGroup, ElMessage ,ElInput} from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
 
 

pages/[dir]/[id].vue

@@ -52,60 +52,69 @@
                     <div class="index_3_box_vote" v-if="articleChoice">
                         <div class="voteTitle">投票区</div>
                         <div class="inquire">
-                            <p v-if="voteList.length > 0">{{ voteList[0].survey_name }}</p>
+                            <p v-if="voteList.length>0">{{voteList[0].survey_name}}</p>
                             <div class="radioBox">
-                                <!--投票选项-->
-                                <div v-if="!isDisabled">
-                                    <div class="radio" v-if="isRadio">
-                                        <el-radio-group v-model="radio1" @change="handleRadioChange">
-                                            <el-radio v-for="item in voteList" :key="item.id" :value="item.id"
-                                                size="large">
-                                                <span v-if="item.is_other == 0">{{ item.choice_name }}</span>
-                                                <span v-else>其他</span>
-                                            </el-radio>
-                                        </el-radio-group>
-                                        <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea"
-                                            resize="none" placeholder="请输入.." />
-                                    </div>
-                                    <div class="checkInputBox" v-else>
-                                        <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
-                                            <span v-for="item in voteList" :key="item.id">
-                                                <span v-if="item.is_other == 0">
-                                                    <el-checkbox size="large" :label="item.choice_name"
-                                                        :value="item.id" />
-                                                </span>
-                                                <span v-else>
-                                                    <el-checkbox size="large" label="其他" :value="item.id" />
-                                                </span>
+                            <!--投票选项-->
+                            <div v-if="!isDisabled">
+                                <div class="radio" v-if="isRadio">
+                                    <el-radio-group v-model="radio1" @change="handleRadioChange">
+                                        <el-radio v-for="item in voteList" :key="item.id" :value="item.id" size="large">
+                                            <span v-if="item.is_other == 0">{{item.choice_name}}</span>
+                                            <span v-else>其他</span>
+                                        </el-radio>
+                                    </el-radio-group>
+                                    <el-input
+                                        v-if="showUserChoice"
+                                        v-model="userChoice"
+                                        :rows="2"
+                                        type="textarea"
+                                        resize="none"
+                                        placeholder="请输入.."
+                                    />
+                                </div>
+                                <div class="checkInputBox" v-else>
+                                    <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
+                                        <span v-for="item in voteList" :key="item.id">
+                                            <span v-if="item.is_other == 0">
+                                                <el-checkbox size="large" :label="item.choice_name" :value="item.id"/>
                                             </span>
-                                        </el-checkbox-group>
-                                        <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea"
-                                            resize="none" placeholder="请输入.." />
-                                    </div>
+                                            <span v-else>
+                                                <el-checkbox size="large" label="其他" :value="item.id"/>
+                                            </span>
+                                        </span>
+                                    </el-checkbox-group>
+                                    <el-input
+                                        v-if="showUserChoice"
+                                        v-model="userChoice"
+                                        :rows="2"
+                                        type="textarea"
+                                        resize="none"
+                                        placeholder="请输入.."
+                                    />
                                 </div>
-                                <!--投票结果-->
-                                <div class="inquireData" v-else>
-                                    <div v-for="item in websiteSurveyData.data" :key="item.id">
-                                        <div class="inquireDataItem active" v-if="item.status == 1">
-                                            <div class="inquireDataItemTitle">
-                                                <span v-if="item.choice_name == ''">其他</span>
-                                                <span v-else>{{ item.choice_name }}</span>
-                                            </div>
-                                            <div class="inquireDataItemNum">{{ item.results }}票</div>
+                            </div>
+                            <!--投票结果-->
+                            <div class="inquireData" v-else>
+                                <div v-for="item in websiteSurveyData.data" :key="item.id">
+                                    <div class="inquireDataItem active" v-if="item.status == 1">
+                                        <div class="inquireDataItemTitle">
+                                            <span v-if="item.choice_name == ''">其他</span>
+                                            <span v-else>{{item.choice_name}}</span>
                                         </div>
-                                        <div class="inquireDataItem" v-else>
-                                            <div class="inquireDataItemTitle">
-                                                <span v-if="item.choice_name == ''">其他</span>
-                                                <span v-else>{{ item.choice_name }}</span>
-                                            </div>
-                                            <div class="inquireDataItemNum">{{ item.results }}票</div>
+                                        <div class="inquireDataItemNum">{{item.results}}票</div>
+                                    </div>
+                                    <div class="inquireDataItem" v-else>
+                                        <div class="inquireDataItemTitle">
+                                            <span v-if="item.choice_name == ''">其他</span>
+                                            <span v-else>{{item.choice_name}}</span>
                                         </div>
+                                        <div class="inquireDataItemNum">{{item.results}}票</div>
                                     </div>
                                 </div>
                             </div>
+                            </div>
                             <div class="btn">
-                                <button class="voting" @click="addWebsiteSurvey" :disabled="isDisabled"
-                                    v-if="!isDisabled">投票</button>
+                                <button class="voting" @click="addWebsiteSurvey" :disabled="isDisabled" v-if="!isDisabled">投票</button>
                             </div>
                         </div>
                     </div>
@@ -124,7 +133,6 @@
             </div>
         </div>
     </div>
-
     <!-- 页面底部 -->
     <HomeFoot1></HomeFoot1>
 </template>
@@ -132,7 +140,7 @@
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem ,ElRadio, ElRadioGroup,ElMessage} from 'element-plus'
+import { ElBreadcrumb, ElBreadcrumbItem, ElRadio, ElRadioGroup ,ElMessage,ElCheckboxGroup,ElCheckbox,ElInput} from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
 
 //1.1 获得跳转过来的id
@@ -313,7 +321,7 @@ let voteList = ref([]);
 async function getVoteList() {
     const voteData = await requestHome('/web/getWebsiteSurvey', { method: 'GET', query: { 'art_id': articleId } });
     console.log(778899)
-    console.log(voteData)
+    console.log('778899',voteData)
     if (voteData.code == 200) {
         voteList.value = voteData.data;
         console.log(voteList.value)
@@ -418,7 +426,7 @@ async function addWebsiteSurvey() {
                 } else {
                     ElMessage.error('请输入选项内容！')
                 }
-            } else {
+            } else {                
                 //如果没选择其他，直接提交选择的内容
                 const mkData = await requestHome('/web/addWebsiteSurveyVote', {
                     method: 'GET',

pages/index.vue

@@ -10,14 +10,14 @@
         <div class="topNewsPart">
             <div class="inner">
                 <div class="toutiao" v-if="tabsData == 1">
-                    <div class="xwtt">
+                    <div class="xwtt" v-if="headlinelist">
                         <span class="ttlogo">新闻头条</span>
                         <NuxtLink :href="getLinkPathDetail(headlinelist[0])" :title="headlinelist[0].title"
                             :target="headlinelist[0].islink == 1 ? '_blank' : '_self'">
                             <span class="tttitle">{{ headlinelist[0].title }}</span>
                         </NuxtLink>
                     </div>
-                    <div class="toutiao1">
+                    <div class="toutiao1" v-if="headlinelist">
                         <NuxtLink :href="getLinkPathDetail(headlinelist[1])" :title="headlinelist[1].title"
                             :target="headlinelist[1].islink == 1 ? '_blank' : '_self'">
                             <span class="tttitle">{{ headlinelist[1].title }}</span>
@@ -25,14 +25,14 @@
                     </div>
                 </div>
                 <div class="toutiao" v-if="tabsData == 2">
-                    <div class="xwtt">
+                    <div class="xwtt" v-if="headlinelist">
                         <span class="ttlogo">新闻头条</span>
                         <NuxtLink :href="getLinkPathDetail(headlinelist[2])" :title="headlinelist[2].title"
                             :target="headlinelist[2].islink == 1 ? '_blank' : '_self'">
                             <span class="tttitle">{{ headlinelist[2].title }}</span>
                         </NuxtLink>
                     </div>
-                    <div class="toutiao1">
+                    <div class="toutiao1" v-if="headlinelist">
                         <NuxtLink :href="getLinkPathDetail(headlinelist[3])" :title="headlinelist[3].title"
                             :target="headlinelist[3].islink == 1 ? '_blank' : '_self'">
                             <span class="tttitle">{{ headlinelist[3].title }}</span>
@@ -40,14 +40,14 @@
                     </div>
                 </div>
                 <div class="toutiao" v-if="tabsData == 3">
-                    <div class="xwtt">
+                    <div class="xwtt" v-if="headlinelist">
                         <span class="ttlogo">新闻头条</span>
                         <NuxtLink :href="getLinkPathDetail(headlinelist[4])" :title="headlinelist[4].title"
                             :target="headlinelist[4].islink == 1 ? '_blank' : '_self'">
                             <span class="tttitle">{{ headlinelist[4].title }}</span>
                         </NuxtLink>
                     </div>
-                    <div class="toutiao1">
+                    <div class="toutiao1" v-if="headlinelist">
                         <NuxtLink :href="getLinkPathDetail(headlinelist[5])" :title="headlinelist[5].title"
                             :target="headlinelist[5].islink == 1 ? '_blank' : '_self'">
                             <span class="tttitle">{{ headlinelist[5].title }}</span>
@@ -55,7 +55,7 @@
                     </div>
                 </div>
                 <!-- 三个横线样式 start-->
-                <ul class="vibrant">
+                <ul class="vibrant" v-if="headlinelist">
                     <li @mouseenter="tabsData = 1" :class="{ active: tabsData == 1 }"></li>
                     <li @mouseenter="tabsData = 2" :class="{ active: tabsData == 2 }"></li>
                     <li @mouseenter="tabsData = 3" :class="{ active: tabsData == 3 }"></li>