|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
- <nav class="channel_nav back100">
|
|
|
- <a class="channel_nav_a" href="javascript:(void)" title="title">{{ title }}</a>
|
|
|
- <span v-for="(item,index) in titleData">
|
|
|
- <NuxtLink :to="{ path: `/${item.aLIas_pinyin}/list-1.html`}" class="channel_nav_a" v-if="index<=7">{{ item.alias }}</NuxtLink>
|
|
|
- </span>
|
|
|
+ <nav class="channel_nav_box">
|
|
|
+ <a class="channel_nav_head" href="javascript:(void)" title="title">{{ title }}</a>
|
|
|
+ <div class="channel_nav_a_box clearfix">
|
|
|
+ <NuxtLink :to="{ path: `/${item.aLIas_pinyin}/list-1.html`}" class="channel_nav_a" v-for="item in titleData">{{ item.alias }}</NuxtLink>
|
|
|
+ </div>
|
|
|
</nav>
|
|
|
</template>
|
|
|
|
|
@@ -46,34 +46,37 @@ getPageData();
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.channel_nav {
|
|
|
- height: 60px;
|
|
|
+.channel_nav_box {
|
|
|
+ display:flex;
|
|
|
width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
- background-image: url(http://img.bjzxtw.org.cn/master/www/snscw/5.png);
|
|
|
+ background: url(http://img.bjzxtw.org.cn/master/www/snscw/5.png) no-repeat bottom;
|
|
|
+ background-size:100% auto;
|
|
|
margin-top: 40px;
|
|
|
-
|
|
|
+ .channel_nav_head {
|
|
|
+ width: 100px;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0px 70px 0px 31px;
|
|
|
+ box-sizing:border-box;
|
|
|
+ margin-top:auto;
|
|
|
+ font-size:20px;
|
|
|
+ font-weight:bold;
|
|
|
+ }
|
|
|
+ .channel_nav_a_box{
|
|
|
+ flex:1;
|
|
|
+ padding:12px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
.channel_nav_a {
|
|
|
float: left;
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
color: #255590;
|
|
|
font-size: 20px;
|
|
|
- margin: 0px 19px;
|
|
|
+ margin: 5px 19px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
- >.channel_nav_a:nth-of-type(1) {
|
|
|
- color: #fff;
|
|
|
- width: 230px;
|
|
|
- padding-left: 50px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-left:0;
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-}
|
|
|
-.back100 {
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
}
|
|
|
</style>
|