|
|
@@ -20,20 +20,6 @@
|
|
|
<!-- 资讯列表 -->
|
|
|
<div class="newsDetail">
|
|
|
<div class="inner">
|
|
|
- <div class="innerRight">
|
|
|
- <ul>
|
|
|
- <li v-for="(item, index) in bottomMenu" :key="index">
|
|
|
- <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name"
|
|
|
- :class="item.id == pageId ? 'active' : ''">
|
|
|
- {{ item.name }}
|
|
|
- </NuxtLink>
|
|
|
- <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`"
|
|
|
- :title="item.name" :class="item.id == pageId ? 'active' : ''">
|
|
|
- {{ item.name }}
|
|
|
- </NuxtLink>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
<div class="innerLeft">
|
|
|
<div class="leftBottomImg" v-if="newsDetail.con_title == '会员服务'">
|
|
|
<img src="../../../public/index/hyfw.jpg" alt="">
|
|
|
@@ -49,17 +35,33 @@
|
|
|
</div>
|
|
|
<div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div>
|
|
|
</div>
|
|
|
+ <div class="innerRight">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in bottomMenu" :key="index">
|
|
|
+ <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name"
|
|
|
+ :class="item.id == pageId ? 'active' : ''">
|
|
|
+ {{ item.name }}
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`"
|
|
|
+ :title="item.name" :class="item.id == pageId ? 'active' : ''">
|
|
|
+ {{ item.name }}
|
|
|
+ </NuxtLink>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
<div style="clear: both;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 页面底部 -->
|
|
|
<HomeFoot></HomeFoot>
|
|
|
</template>
|
|
|
+
|
|
|
<script setup>
|
|
|
//1.页面依赖 start ---------------------------------------->
|
|
|
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
|
|
|
import { ArrowRight } from '@element-plus/icons-vue'
|
|
|
import { ref, onMounted } from 'vue';
|
|
|
+
|
|
|
//获得跳转过来的id
|
|
|
const route = useRoute();
|
|
|
//获得当前的完整路径
|
|
|
@@ -68,6 +70,7 @@ const fullPath = route.path;
|
|
|
const segments = fullPath.split('/');
|
|
|
const targetSegment = segments[2];
|
|
|
//const numberPart = targetSegment.match(/\d+$/)?.[0];
|
|
|
+
|
|
|
let articleId;
|
|
|
let pageId;
|
|
|
//通过导航路径反向查询导航id
|
|
|
@@ -86,7 +89,9 @@ if (getRouteId.code == 200) {
|
|
|
// console.log("后端错误反馈：",getRouteId.message)
|
|
|
// console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
|
|
|
}
|
|
|
+
|
|
|
//1.页面依赖 end ---------------------------------------->
|
|
|
+
|
|
|
//2.页面数据 start ---------------------------------------->
|
|
|
//广告列表
|
|
|
const adList = ref([]);
|
|
|
@@ -112,8 +117,10 @@ async function getAdData() {
|
|
|
}
|
|
|
}
|
|
|
getAdData();
|
|
|
+
|
|
|
const newsDetail = ref({})
|
|
|
const bottomMenu = ref([]);
|
|
|
+
|
|
|
async function getPageData() {
|
|
|
const mkdata = await requestDataPromise('/web/getWebsiteFooterCategoryInfo', {
|
|
|
method: 'GET',
|
|
|
@@ -124,6 +131,7 @@ async function getPageData() {
|
|
|
newsDetail.value = mkdata.data;
|
|
|
}
|
|
|
getPageData();
|
|
|
+
|
|
|
async function getPageMenu() {
|
|
|
const mkdata = await requestDataPromise('/web/getWebsiteFooterCategory', {
|
|
|
method: 'GET',
|
|
|
@@ -133,17 +141,21 @@ async function getPageMenu() {
|
|
|
}
|
|
|
getPageMenu();
|
|
|
//2.页面数据 end ---------------------------------------->
|
|
|
+
|
|
|
+
|
|
|
//4.设置seo信息 start---------------------------------------->
|
|
|
//4.1 设置seo信息
|
|
|
const setData = await requestDataPromise('/web/getWebsiteFootInfo', {
|
|
|
method: 'GET',
|
|
|
query: {},
|
|
|
});
|
|
|
+
|
|
|
let seoTitle = setData.data.website_head.title;
|
|
|
let seoDescription = setData.data.website_head.description;
|
|
|
let seoKeywords = setData.data.website_head.keywords;
|
|
|
let seoSuffix = setData.data.website_head.suffix;
|
|
|
let seoName = setData.data.website_head.website_name;
|
|
|
+
|
|
|
useSeoMeta({
|
|
|
title: seoTitle + "_" + seoSuffix,
|
|
|
meta: [
|
|
|
@@ -152,6 +164,7 @@ useSeoMeta({
|
|
|
]
|
|
|
});
|
|
|
//4.设置seo信息 end---------------------------------------->
|
|
|
+
|
|
|
onMounted(async () => {
|
|
|
//从客户端获取行政职能部门 加快打开速度
|
|
|
const { $webUrl, $CwebUrl } = useNuxtApp();
|
|
|
@@ -166,6 +179,7 @@ onMounted(async () => {
|
|
|
});
|
|
|
const resultAd1 = await responseAd1.json();
|
|
|
adImg1.value = resultAd1.data[0];
|
|
|
+
|
|
|
//广告2
|
|
|
let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_page_0002`
|
|
|
const responseAd2 = await fetch(url2, {
|
|
|
@@ -179,404 +193,471 @@ onMounted(async () => {
|
|
|
adImg2.value = resultAd2.data[0];
|
|
|
})
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="less" scoped>
|
|
|
-//导航条
|
|
|
-.breadcrumb {
|
|
|
- width: 100%;
|
|
|
- .inner {
|
|
|
- width: 1200px;
|
|
|
- margin: 10px auto;
|
|
|
- border-bottom: 1px solid #E5E5E5;
|
|
|
- }
|
|
|
- .el-breadcrumb::v-deep {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: -4px;
|
|
|
- }
|
|
|
- .el-breadcrumb__inner a::v-deep,
|
|
|
- .el-breadcrumb__inner.is-link::v-deep {
|
|
|
- color: #666666;
|
|
|
- font-weight: 400;
|
|
|
- text-decoration: none;
|
|
|
- transition: var(--el-transition-color);
|
|
|
- }
|
|
|
- span {
|
|
|
- font-family: "宋体";
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- line-height: 40px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
- .location {
|
|
|
- margin-right: 10px;
|
|
|
- display: inline-block;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- font-family: "宋体";
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- vertical-align: 11px;
|
|
|
+@media screen and (min-width: 1401px) {
|
|
|
+
|
|
|
+ //导航条
|
|
|
+ .breadcrumb {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ width: 1200PX;
|
|
|
+ margin: 10PX auto;
|
|
|
+ border-bottom: 1PX solid #E5E5E5;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-breadcrumb::v-deep {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: -4PX;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-breadcrumb__inner a::v-deep,
|
|
|
+ .el-breadcrumb__inner.is-link::v-deep {
|
|
|
+ color: #666666;
|
|
|
+ font-weight: 400;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: var(--el-transition-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: "宋体";
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14PX;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 40PX;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .location {
|
|
|
+ margin-right: 10PX;
|
|
|
+ display: inline-block;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ font-family: "宋体";
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14PX;
|
|
|
+ color: #666666;
|
|
|
+ vertical-align: 11PX;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-// 资讯列表
|
|
|
-.newsDetail {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 70px;
|
|
|
- .inner {
|
|
|
- width: 1200px;
|
|
|
- font-size: 16px;
|
|
|
- .innerLeft {
|
|
|
- width: 980px;
|
|
|
- float: right;
|
|
|
- .LeftTop {
|
|
|
- margin-top: 50px;
|
|
|
- >h1 {
|
|
|
- line-height: 40px;
|
|
|
- margin-bottom: 30px;
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 30px;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- >p {
|
|
|
- height: 18px;
|
|
|
- line-height: 18px;
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #999999;
|
|
|
- span {
|
|
|
- margin-right: 40px;
|
|
|
+
|
|
|
+ // 资讯列表
|
|
|
+ .newsDetail {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 70PX;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ width: 1200PX;
|
|
|
+ font-size: 16PX;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .innerLeft {
|
|
|
+ width: 980PX;
|
|
|
+ float: right;
|
|
|
+ margin-right:0px;
|
|
|
+ .LeftTop {
|
|
|
+ margin-top: 50PX;
|
|
|
+
|
|
|
+ >h1 {
|
|
|
+
|
|
|
+ line-height: 40PX;
|
|
|
+ margin-bottom: 30PX;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30PX;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ >p {
|
|
|
+ height: 18PX;
|
|
|
+ line-height: 18PX;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14PX;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-right: 40PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >img {
|
|
|
+ width: 680PX;
|
|
|
+ height: 382PX;
|
|
|
+ padding: 50PX 0PX 60PX 55PX;
|
|
|
}
|
|
|
}
|
|
|
- >img {
|
|
|
- width: 680px;
|
|
|
- height: 382px;
|
|
|
- padding: 50px 0px 60px 55px;
|
|
|
+
|
|
|
+ .leftBottomImg {
|
|
|
+ width: 760PX;
|
|
|
+ height: 184PX;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
- }
|
|
|
- .leftBottomImg {
|
|
|
- width: 760px;
|
|
|
- height: 184px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- .leftBottom {
|
|
|
- width: 92%;
|
|
|
- font-size: 20px;
|
|
|
- padding-top: 40px;
|
|
|
- margin: 0 auto;
|
|
|
- font-family: "微软雅黑", Microsoft YaHei;
|
|
|
- line-height: 36px;
|
|
|
- >h3,
|
|
|
- >p {
|
|
|
- text-indent: 2em;
|
|
|
- width: 790px;
|
|
|
+
|
|
|
+ .leftBottom {
|
|
|
+ width: 92%;
|
|
|
+ font-size: 20PX;
|
|
|
+ padding-top: 40PX;
|
|
|
+ margin: 0 auto;
|
|
|
font-family: "微软雅黑", Microsoft YaHei;
|
|
|
- font-size: 20px;
|
|
|
- color: #333333;
|
|
|
- line-height: 23px;
|
|
|
- padding-bottom: 30px;
|
|
|
- }
|
|
|
- >h3 {
|
|
|
- font-weight: 600px;
|
|
|
- }
|
|
|
- >p {
|
|
|
- font-weight: 400;
|
|
|
+ line-height: 36PX;
|
|
|
+
|
|
|
+ >h3,
|
|
|
+ >p {
|
|
|
+ text-indent: 2em;
|
|
|
+ width: 790PX;
|
|
|
+ font-family: "微软雅黑", Microsoft YaHei;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 23PX;
|
|
|
+ padding-bottom: 30PX;
|
|
|
+ }
|
|
|
+
|
|
|
+ >h3 {
|
|
|
+ font-weight: 600PX;
|
|
|
+ }
|
|
|
+
|
|
|
+ >p {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .innerRight {
|
|
|
- width: 200px;
|
|
|
- margin-top: 20px;
|
|
|
- font-family: "微软雅黑";
|
|
|
- ul {
|
|
|
- li {
|
|
|
- a {
|
|
|
- display: block;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- color: #000;
|
|
|
- background: #f3f3f3;
|
|
|
- font-size: 18px;
|
|
|
- text-decoration: none;
|
|
|
- padding-left: 35px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 1px solid #fff;
|
|
|
+
|
|
|
+ .innerRight {
|
|
|
+ width: 200PX;
|
|
|
+ margin-top: 20PX;
|
|
|
+ margin-left:0px;
|
|
|
+ font-family: "微软雅黑";
|
|
|
+
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ height: 50PX;
|
|
|
+ line-height: 50PX;
|
|
|
+ color: #000;
|
|
|
+ background: #f3f3f3;
|
|
|
+ font-size: 18PX;
|
|
|
+ text-decoration: none;
|
|
|
+ padding-left: 35PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1PX solid #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .active {
|
|
|
- border-left: 0;
|
|
|
- background: #3395e4;
|
|
|
- color: #fff;
|
|
|
+
|
|
|
+ .active {
|
|
|
+ border-left: 0;
|
|
|
+ background: #3395e4;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
-<style lang="less" scoped>
|
|
|
-@media screen and (min-width:801px) {
|
|
|
- .pc_none {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (max-width:800px) {
|
|
|
- /*ipad_phone*/
|
|
|
+
|
|
|
+@media screen and (min-width: 801px) and (max-width: 1400px) {
|
|
|
+
|
|
|
+ //导航条
|
|
|
.breadcrumb {
|
|
|
- margin-bottom: 11px;
|
|
|
- }
|
|
|
- .breadcrumb .location {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .breadcrumb span {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .breadcrumb /deep/.el-breadcrumb {
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .newsDetail {
|
|
|
- margin: 10px auto 0px;
|
|
|
- }
|
|
|
- .newsDetail .inner {
|
|
|
- width: 92%;
|
|
|
- margin: 0px auto 11px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerRight {
|
|
|
- width: 24%;
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerRight .rightMenuTitle {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- background-size: 100% 155%;
|
|
|
- margin-bottom: 11px;
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- line-height: 33px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerRight ul {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerRight ul li {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerRight ul li a {
|
|
|
- line-height: 20px;
|
|
|
- height: auto;
|
|
|
- font-size: 12px;
|
|
|
- margin-bottom: 5px;
|
|
|
- padding: 6px 2px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-left: 2px solid #028E21;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerLeft {
|
|
|
- width: 100%;
|
|
|
- float: none;
|
|
|
- overflow: hidden;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerLeft .book_son_right {
|
|
|
- float: none;
|
|
|
width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 22px;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerLeft .leftBottomTitle {
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- font-size: 18px;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ width: 90%;
|
|
|
+ margin: 10PX auto;
|
|
|
+ border-bottom: 1PX solid #E5E5E5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-breadcrumb::v-deep {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: -4PX;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-breadcrumb__inner a::v-deep,
|
|
|
+ .el-breadcrumb__inner.is-link::v-deep {
|
|
|
+ color: #666666;
|
|
|
+ font-weight: 400;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: var(--el-transition-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: "宋体";
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14PX;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 40PX;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .location {
|
|
|
+ margin-right: 10PX;
|
|
|
+ display: inline-block;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ font-family: "宋体";
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14PX;
|
|
|
+ color: #666666;
|
|
|
+ vertical-align: 11PX;
|
|
|
+ }
|
|
|
}
|
|
|
- .newsDetail .inner .innerLeft .leftBottom {
|
|
|
+
|
|
|
+ // 资讯列表
|
|
|
+ .newsDetail {
|
|
|
width: 100%;
|
|
|
- padding-top: 11px;
|
|
|
- line-height: 22px;
|
|
|
- font-size: 16px !important;
|
|
|
- }
|
|
|
- .newsDetail .inner .innerLeft .leftBottom * {
|
|
|
- line-height: 44px;
|
|
|
- font-size: 26px !important;
|
|
|
- }
|
|
|
- .leftBottom /deep/.daohang ul {
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .leftBottom /deep/.daohang li {
|
|
|
- float: left;
|
|
|
- margin: 1%;
|
|
|
- box-sizing: border-box;
|
|
|
- border: solid 1px #ddd;
|
|
|
- padding: 1vw;
|
|
|
- width: 23%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .leftBottom /deep/.daohang li a {
|
|
|
- font-size: 14px !important;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .phone_none {
|
|
|
- display: none;
|
|
|
+ margin-bottom: 70PX;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 16PX;
|
|
|
+
|
|
|
+ .innerLeft {
|
|
|
+ width: 75%;
|
|
|
+ float: right;
|
|
|
+ margin-right:0px;
|
|
|
+ .LeftTop {
|
|
|
+ margin-top: 50PX;
|
|
|
+
|
|
|
+ >h1 {
|
|
|
+ line-height: 40PX;
|
|
|
+ margin-bottom: 30PX;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30PX;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ >p {
|
|
|
+ height: 18PX;
|
|
|
+ line-height: 18PX;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14PX;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-right: 40PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >img {
|
|
|
+ width: 680PX;
|
|
|
+ height: 382PX;
|
|
|
+ padding: 50PX 0PX 60PX 55PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftBottomImg {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftBottom {
|
|
|
+ width: 92%;
|
|
|
+ font-size: 20PX;
|
|
|
+ padding-top: 40PX;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-family: "微软雅黑", Microsoft YaHei;
|
|
|
+ line-height: 36PX;
|
|
|
+
|
|
|
+ >h3,
|
|
|
+ >p {
|
|
|
+ text-indent: 2em;
|
|
|
+ width: 100%;
|
|
|
+ font-family: "微软雅黑", Microsoft YaHei;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 23PX;
|
|
|
+ padding-bottom: 30PX;
|
|
|
+ }
|
|
|
+
|
|
|
+ >h3 {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ >p {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .innerRight {
|
|
|
+ width: 20%;
|
|
|
+ margin-top: 20PX;
|
|
|
+ margin-right: 20PX;
|
|
|
+ font-family: "微软雅黑";
|
|
|
+
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ height: 50PX;
|
|
|
+ line-height: 50PX;
|
|
|
+ color: #000;
|
|
|
+ background: #f3f3f3;
|
|
|
+ font-size: 18PX;
|
|
|
+ text-decoration: none;
|
|
|
+ padding-left: 35PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1PX solid #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ border-left: 0;
|
|
|
+ background: #3395e4;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-.breadcrumb {
|
|
|
- width: 1400PX;
|
|
|
- margin: 0px auto 0px;
|
|
|
-}
|
|
|
-.el-breadcrumb {
|
|
|
- height: 22PX;
|
|
|
- line-height: 22PX;
|
|
|
-}
|
|
|
-.breadcrumb .inner span.location {
|
|
|
- font-size: 16PX;
|
|
|
- ;
|
|
|
- height: 22PX;
|
|
|
- ;
|
|
|
- line-height: 22PX;
|
|
|
- font-weight: normal;
|
|
|
-}
|
|
|
-.breadcrumb .inner {
|
|
|
- width: 100%;
|
|
|
- word-break: keep-all;
|
|
|
- white-space: nowrap;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px 11px;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.breadcrumb .inner * {
|
|
|
- float: left;
|
|
|
-}
|
|
|
-.breadcrumb .inner a {
|
|
|
- font-size: 16PX;
|
|
|
- ;
|
|
|
- height: 22PX;
|
|
|
- line-height: 22PX;
|
|
|
- display: inline-block;
|
|
|
- font-weight: normal;
|
|
|
-}
|
|
|
-.breadcrumb .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
|
|
|
- font-size: 16PX;
|
|
|
- ;
|
|
|
- height: 22PX;
|
|
|
- line-height: 22PX;
|
|
|
- font-weight: normal;
|
|
|
-}
|
|
|
-.breadcrumb:deep(.el-icon) {
|
|
|
- width: 16PX;
|
|
|
- height: 16PX;
|
|
|
-}
|
|
|
-.breadcrumb .inner span {
|
|
|
- font-size: 16PX;
|
|
|
- ;
|
|
|
- height: 22PX;
|
|
|
- line-height: 22PX;
|
|
|
-}
|
|
|
-.newsDetail {
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- width: 1400PX;
|
|
|
- margin: 0px auto 0px;
|
|
|
-}
|
|
|
-.newsDetail .inner {
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.newsDetail .inner .innerRight {
|
|
|
- overflow: hidden;
|
|
|
- width: 222PX;
|
|
|
- float: left;
|
|
|
- margin: 0px 10px 0px 0px;
|
|
|
- height: auto;
|
|
|
-}
|
|
|
-.newsDetail .inner .innerLeft {
|
|
|
- overflow: hidden;
|
|
|
- margin: 0;
|
|
|
- flex: 1;
|
|
|
- float: right;
|
|
|
-}
|
|
|
-.newsDetail .inner .innerRight ul li a {
|
|
|
- line-height: 44PX;
|
|
|
- height: 44PX;
|
|
|
- padding-left: 22PX;
|
|
|
- font-size: 16PX;
|
|
|
-}
|
|
|
-.newsDetail .inner .innerLeft .leftBottomImg {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.newsDetail .inner .innerLeft .leftBottomImg img {
|
|
|
- display: inline-block;
|
|
|
- width: 90%;
|
|
|
- height: auto;
|
|
|
-}
|
|
|
-.newsDetail .inner .innerLeft .leftBottom {
|
|
|
- line-height: 16px;
|
|
|
-}
|
|
|
-.leftBottom :deep(.daohang) ul {
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 33px;
|
|
|
-}
|
|
|
-.leftBottom :deep(.daohang) ul li {
|
|
|
- float: left;
|
|
|
- margin: 1%;
|
|
|
- border: solid 1px #ddd;
|
|
|
-}
|
|
|
-.leftBottom :deep(.daohang) ul li a {
|
|
|
- display: block;
|
|
|
- padding: 0 6PX;
|
|
|
- text-align: center;
|
|
|
- line-height: 33PX !important;
|
|
|
- height: 33PX;
|
|
|
- font-size: 16PX;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-@media screen and (min-width: 1401px) {
|
|
|
- //你的样式
|
|
|
-}
|
|
|
-@media screen and (max-width: 1400px) {
|
|
|
+
|
|
|
+@media screen and (max-width: 800px) {
|
|
|
+
|
|
|
+ //导航条
|
|
|
.breadcrumb {
|
|
|
width: 100%;
|
|
|
- margin: 0px auto 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ border-bottom: 2px solid #E5E5E5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-breadcrumb::v-deep {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: -4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-breadcrumb__inner a::v-deep,
|
|
|
+ .el-breadcrumb__inner.is-link::v-deep {
|
|
|
+ color: #666666;
|
|
|
+ font-weight: 400;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: var(--el-transition-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: "宋体";
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .location {
|
|
|
+ margin-right: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ font-family: "宋体";
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #666666;
|
|
|
+ vertical-align: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ // 资讯列表
|
|
|
.newsDetail {
|
|
|
width: 100%;
|
|
|
- margin: 0px auto 0px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0px 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (min-width: 801px) and (max-width: 1400px) {
|
|
|
- //你的样式
|
|
|
-}
|
|
|
-@media screen and (max-width: 800px) {
|
|
|
- //你的样式
|
|
|
- .breadcrumb:deep(.el-icon) {}
|
|
|
- .breadcrumb .inner span.location,
|
|
|
- .breadcrumb .inner span {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- .breadcrumb .inner a {
|
|
|
- font-size: 24px;
|
|
|
- height: 55px;
|
|
|
- line-height: 55px;
|
|
|
- }
|
|
|
- .breadcrumb .phone_breadcrumb_text :deep(.el-breadcrumb__inner) {
|
|
|
- font-size: 24px;
|
|
|
- height: 55px;
|
|
|
- line-height: 55px;
|
|
|
+ margin-bottom: 70px;
|
|
|
+
|
|
|
+ .inner {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 32px;
|
|
|
+
|
|
|
+ .innerLeft {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .leftBottomImg {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 96%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftBottom {
|
|
|
+ width: 92%;
|
|
|
+ font-size: 40px !important;
|
|
|
+ padding-top: 40px;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-family: "微软雅黑", Microsoft YaHei;
|
|
|
+ line-height: 72px;
|
|
|
+
|
|
|
+ h3,
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ font-family: "微软雅黑", Microsoft YaHei;
|
|
|
+ font-size: 40px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 72px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 40px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .innerRight {
|
|
|
+ display: none;
|
|
|
+ width: 200px;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-family: "微软雅黑";
|
|
|
+
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ color: #000;
|
|
|
+ background: #f3f3f3;
|
|
|
+ font-size: 18px;
|
|
|
+ text-decoration: none;
|
|
|
+ padding-left: 35px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ border-left: 0;
|
|
|
+ background: #3395e4;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
CaoGQ123