|
@@ -1,12 +1,18 @@
|
|
<template>
|
|
<template>
|
|
<div class="index_main">
|
|
<div class="index_main">
|
|
<nav class="index_nav clearfix">
|
|
<nav class="index_nav clearfix">
|
|
- <span class="index_nav_a_one" href="javascript:(void)" title="">{{ title }}</span>
|
|
|
|
- <span v-for="(item,index) in titleData" :class="['index_nav_a', { 'index_nav_a_only': targetSegment === item.aLIas_pinyin }]">
|
|
|
|
- <span v-if="index<=7">
|
|
|
|
- <NuxtLink :to="{ path: `/${item.aLIas_pinyin}/list-1.html`}" >{{ item.alias }}</NuxtLink>
|
|
|
|
|
|
+ <div class="index_navTitle_box">
|
|
|
|
+ <span class="index_nav_a_one" href="javascript:(void)" title="">{{ title }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="index_nav_box">
|
|
|
|
+ <span v-for="(item, index) in titleData"
|
|
|
|
+ :class="['index_nav_a', { 'index_nav_a_only': targetSegment === item.aLIas_pinyin }]">
|
|
|
|
+ <span v-if="index <= 20">
|
|
|
|
+ <NuxtLink :to="{ path: `/${item.aLIas_pinyin}/list-1.html` }">{{ item.alias }}</NuxtLink>
|
|
|
|
+ </span>
|
|
</span>
|
|
</span>
|
|
- </span>
|
|
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</nav>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -15,33 +21,33 @@
|
|
//1.设置组件数据 start---------------------------------------->
|
|
//1.设置组件数据 start---------------------------------------->
|
|
//子导航
|
|
//子导航
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
- titleData:Array,
|
|
|
|
- pinyinid:Number
|
|
|
|
|
|
+ titleData: Array,
|
|
|
|
+ pinyinid: Number
|
|
});
|
|
});
|
|
|
|
|
|
//获取当前url路径
|
|
//获取当前url路径
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
//获得当前的完整路径
|
|
//获得当前的完整路径
|
|
const fullPath = route.path;
|
|
const fullPath = route.path;
|
|
-const segments = fullPath.split('/');
|
|
|
|
-const targetSegment = segments[1];
|
|
|
|
|
|
+const segments = fullPath.split('/');
|
|
|
|
+const targetSegment = segments[1];
|
|
//1.设置组件数据 end---------------------------------------->
|
|
//1.设置组件数据 end---------------------------------------->
|
|
|
|
|
|
//2.设置组件标题 start ---------------------------------------->
|
|
//2.设置组件标题 start ---------------------------------------->
|
|
const title = ref("")
|
|
const title = ref("")
|
|
async function getPageData() {
|
|
async function getPageData() {
|
|
- const mkdata = await requestDataPromise('/web/getOneWebsiteCategory', {
|
|
|
|
|
|
+ const mkdata = await requestDataPromise('/web/getOneWebsiteCategory', {
|
|
method: 'GET',
|
|
method: 'GET',
|
|
query: {
|
|
query: {
|
|
'catid': props.pinyinid,
|
|
'catid': props.pinyinid,
|
|
},
|
|
},
|
|
});
|
|
});
|
|
- if(mkdata.code == 200){
|
|
|
|
|
|
+ if (mkdata.code == 200) {
|
|
title.value = mkdata.data.alias;
|
|
title.value = mkdata.data.alias;
|
|
- }else{
|
|
|
|
|
|
+ } else {
|
|
console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
console.log("错误位置:获取二级标题")
|
|
console.log("错误位置:获取二级标题")
|
|
- console.log("后端错误反馈:",mkdata.message)
|
|
|
|
|
|
+ console.log("后端错误反馈:", mkdata.message)
|
|
console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -55,12 +61,25 @@ getPageData();
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
margin-bottom: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.index_nav {
|
|
.index_nav {
|
|
width: 1200px;
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
border-bottom: solid 1px #D9D9D9;
|
|
border-bottom: solid 1px #D9D9D9;
|
|
height: 88px;
|
|
height: 88px;
|
|
|
|
+
|
|
|
|
+ .index_navTitle_box {
|
|
|
|
+ float: left;
|
|
|
|
+ height: 88px;
|
|
|
|
+ line-height: 88px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #333;
|
|
|
|
+ width: 153px;
|
|
|
|
+ // margin: 0px 30px;
|
|
|
|
+ }
|
|
|
|
+
|
|
.index_nav_a_one {
|
|
.index_nav_a_one {
|
|
float: left;
|
|
float: left;
|
|
color: #333;
|
|
color: #333;
|
|
@@ -84,31 +103,47 @@ getPageData();
|
|
background: url(https://img.bjzxtw.org.cn/master/www/nmw/img/3.png) no-repeat left top;
|
|
background: url(https://img.bjzxtw.org.cn/master/www/nmw/img/3.png) no-repeat left top;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ .index_nav_box {
|
|
|
|
+ float: left;
|
|
|
|
+ // height: 88px;
|
|
|
|
+ // line-height: 88px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: #333;
|
|
|
|
+ width: 1009px;
|
|
|
|
+ margin-top: 15px;
|
|
|
|
+ margin-left: 25px;
|
|
|
|
+ }
|
|
|
|
+
|
|
.index_nav_a {
|
|
.index_nav_a {
|
|
float: left;
|
|
float: left;
|
|
color: #333;
|
|
color: #333;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
- margin: 0px 30px;
|
|
|
|
- height: 88px;
|
|
|
|
- line-height: 88px;
|
|
|
|
|
|
+ margin: 5px 30px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
border-bottom: solid 3px #fff;
|
|
border-bottom: solid 3px #fff;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+
|
|
a {
|
|
a {
|
|
- color:#333333
|
|
|
|
|
|
+ color: #333333
|
|
}
|
|
}
|
|
- &:hover{
|
|
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
border-bottom: solid 3px #D2600F;
|
|
border-bottom: solid 3px #D2600F;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .index_nav_a a:hover{
|
|
|
|
|
|
+
|
|
|
|
+ .index_nav_a a:hover {
|
|
color: #D2600F;
|
|
color: #D2600F;
|
|
// border-bottom: solid 3px #D2600F;
|
|
// border-bottom: solid 3px #D2600F;
|
|
}
|
|
}
|
|
|
|
+
|
|
.index_nav_a_only {
|
|
.index_nav_a_only {
|
|
border-bottom: solid 3px #D2600F;
|
|
border-bottom: solid 3px #D2600F;
|
|
}
|
|
}
|
|
|
|
+
|
|
.index_nav_a::after {
|
|
.index_nav_a::after {
|
|
content: '';
|
|
content: '';
|
|
display: block;
|
|
display: block;
|
|
@@ -116,24 +151,26 @@ getPageData();
|
|
width: 2px;
|
|
width: 2px;
|
|
height: 12px;
|
|
height: 12px;
|
|
background: #DBDBDB;
|
|
background: #DBDBDB;
|
|
- right: -38px;
|
|
|
|
- top: 39px;
|
|
|
|
- }
|
|
|
|
- .index_nav_a:nth-last-of-type(1) {
|
|
|
|
- overflow: hidden;
|
|
|
|
- }
|
|
|
|
- a.index_nav_a:nth-of-type(1) {
|
|
|
|
- overflow: hidden;
|
|
|
|
- height: 56px;
|
|
|
|
- line-height: 56px;
|
|
|
|
- color: #fff;
|
|
|
|
- font-size: 18px;
|
|
|
|
- font-weight: bold;
|
|
|
|
- width: 153px;
|
|
|
|
- margin: 14px 30px 0px 0px;
|
|
|
|
- text-indent: 46px;
|
|
|
|
- background: url(https://img.bjzxtw.org.cn/master/www/nmw/img/3.png) no-repeat left top;
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
|
+ right: -28px;
|
|
|
|
+ top: 6px;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ // .index_nav_a:nth-last-of-type(1) {
|
|
|
|
+ // overflow: hidden;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // a.index_nav_a:nth-of-type(1) {
|
|
|
|
+ // overflow: hidden;
|
|
|
|
+ // height: 56px;
|
|
|
|
+ // line-height: 56px;
|
|
|
|
+ // color: #fff;
|
|
|
|
+ // font-size: 18px;
|
|
|
|
+ // font-weight: bold;
|
|
|
|
+ // width: 153px;
|
|
|
|
+ // margin: 14px 30px 0px 0px;
|
|
|
|
+ // text-indent: 46px;
|
|
|
|
+ // background: url(https://img.bjzxtw.org.cn/master/www/nmw/img/3.png) no-repeat left top;
|
|
|
|
+ // background-size: 100% 100%;
|
|
|
|
+ // }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|