|
|
@@ -0,0 +1,3350 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!--logo-->
|
|
|
+ <HomePageHead></HomePageHead>
|
|
|
+ <!--导航-->
|
|
|
+ <HomePageNavigation></HomePageNavigation>
|
|
|
+ <!--首页顶部滚动新闻-->
|
|
|
+ <div class="swiper-container">
|
|
|
+ <Swiper :slides-per-view="5" :space-between="20" :loop="true" :autoplay="{
|
|
|
+ delay: 3000,
|
|
|
+ disableOnInteraction: false,
|
|
|
+ pauseOnMouseEnter: true,
|
|
|
+ stopOnLastSlide: false,
|
|
|
+ waitForTransition: true
|
|
|
+ }" :speed="600" :modules="modules" @slide-change="swiperHandleSlideChange" @swiper="onSwiper"
|
|
|
+ class="custom-swiper" :navigation="true">
|
|
|
+ <SwiperSlide v-for="(item, index) in 15" :key="index">
|
|
|
+ <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" :title="item.title" class="slide-link"
|
|
|
+ :data-index="index">
|
|
|
+ <div class="image-container">
|
|
|
+ <!-- <img
|
|
|
+ :src="item.imgurl || '/index/news.png'"
|
|
|
+ :alt="item.title"
|
|
|
+ class="slide-image"
|
|
|
+ loading="lazy"
|
|
|
+ /> -->
|
|
|
+ <img src="/public/index/news.png" :alt="item.title" class="slide-image" loading="lazy" />
|
|
|
+ <span class="image-title">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ </NuxtLink>
|
|
|
+ </SwiperSlide>
|
|
|
+ </Swiper>
|
|
|
+ </div>
|
|
|
+ <!--首页顶部新闻-->
|
|
|
+ <div class="index—layer-1">
|
|
|
+ <!--左侧焦点图新闻-->
|
|
|
+ <div class="index—layer-1-left">
|
|
|
+ <div class="nuxt-swiper" v-if="imagelist">
|
|
|
+ <el-carousel :interval="663000" :touchable="true" arrow="never" indicator-class="custom-indicator"
|
|
|
+ class="custom-carousel roll_in" @change="handleIndicatorChange">
|
|
|
+ <el-carousel-item v-for="(item, index) in imagelist" :key="index">
|
|
|
+ <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" :title="item.title">
|
|
|
+ <!-- <img :src="item.imgurl" :alt="item.title"> -->
|
|
|
+ <img src="/public/index/news.png" :alt="item.title">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </el-carousel-item>
|
|
|
+ <template #indicator="{ index }">
|
|
|
+ <button :class="{ 'active-indicator': currentIndex === index }">{{ index + 1 }}</button>
|
|
|
+ </template>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--中央选项卡-->
|
|
|
+ <div class="index-layer-1-middle">
|
|
|
+ <div class="index-tabs">
|
|
|
+ <div class="tabtlt">
|
|
|
+ <div @mouseenter="indexTabs = 1" :class="indexTabs == 1 ? 'intabtltbg' : ''">
|
|
|
+ <NuxtLink
|
|
|
+ v-if="pageData[0].cid"
|
|
|
+ :href="getLinkPath(pageData[0])"
|
|
|
+ :title="pageData[0].alias"
|
|
|
+ >
|
|
|
+ {{pageData[0].title}}
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div @mouseenter="indexTabs = 2" :class="indexTabs == 2 ? 'intabtltbg' : ''">
|
|
|
+ <NuxtLink v-if="pageData[1].cid"
|
|
|
+ :href="getLinkPath(pageData[1])"
|
|
|
+ :title="pageData[1].alias" >
|
|
|
+
|
|
|
+ {{pageData[1].title}}
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div v-if="indexTabs == 1" class="coninfoitem">
|
|
|
+
|
|
|
+ <div class="coninfoitem_img">
|
|
|
+ <NuxtLink
|
|
|
+ :href="getLinkPathDetail(boxData1[0])"
|
|
|
+ :title="boxData1[0].title"
|
|
|
+ :target="boxData1[0].islink == 1 ? '_blank' : '_self'"
|
|
|
+ class="coninfoitem_title"
|
|
|
+ >
|
|
|
+ <img src="/public/index/news.png" />
|
|
|
+
|
|
|
+ <div class="coninfoitem_img_text">
|
|
|
+ <h3>
|
|
|
+ <!-- {{boxData1[0].title}} -->
|
|
|
+ {{boxData1[0].imgurl}}
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ {{boxData1[0].introduce}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </NuxtLink>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <NuxtLink
|
|
|
+ v-for="(item, index) in boxData1data2" :key="index"
|
|
|
+ :href="getLinkPathDetail(item)"
|
|
|
+ :title="item.title"
|
|
|
+ :target="item.islink == 1 ? '_blank' : '_self'"
|
|
|
+ class="coninfoitem_title">
|
|
|
+
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <!-- <span>{{getTime(item.updated_at,'month',1)}}</span> -->
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div v-if="indexTabs == 2" class="coninfoitem">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--右侧新闻列表-->
|
|
|
+ <div class="index-layer-1-right">
|
|
|
+ <div class="imgtlt">
|
|
|
+
|
|
|
+
|
|
|
+ <NuxtLink v-if="pageData[2].cid" class="coninfoitem_title"
|
|
|
+ :href="getLinkPath(pageData[2])"
|
|
|
+ :title="pageData[2].alias" >
|
|
|
+ {{pageData[2].title}}
|
|
|
+ </NuxtLink>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="con_img_list">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" />
|
|
|
+ <div class="con_img_list_rgba">青山梦：一位古稀企业...</div>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" />
|
|
|
+ <div class="con_img_list_rgba">安全入校园 应急护童行 | 济宁市惠民社会救助服务中心“135最小应急单元” 走进南张中心幼儿园（第一期）</div>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" />
|
|
|
+ <div class="con_img_list_rgba">吉林长春经济技术开发区：检察服务窗口嵌入综治中心</div>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" />
|
|
|
+ <div class="con_img_list_rgba">天津高院与北辰法院联合举办全市法院司法警察“活力警营·逐梦青春”越野接力活动</div>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--首页中央新闻2-->
|
|
|
+ <div class="index—layer-2">
|
|
|
+ <div class="index—layer-2-left">
|
|
|
+ <div class="index—layer-2-title">
|
|
|
+ <div :class="indexTabs2 == 1 ? 'active' : ''" @mouseenter="indexTabs2 = 1">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 选项1
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div :class="indexTabs2 == 2 ? 'active' : ''" @mouseenter="indexTabs2 = 2">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 选项2
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="indexTabs2 == 1">
|
|
|
+ <div class="index-tabs2-top">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" />
|
|
|
+ </NuxtLink>
|
|
|
+ <div>
|
|
|
+ <h3>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 京津冀对在三地拟执业的司法鉴定人进行职业能力评估联考
|
|
|
+ </NuxtLink>
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ “2026年1月1日起，跟朋友私信发带颜色的信息就违法？”最近这条消息刷爆社交平台，不少网友慌了神：“跟伴侣私聊也不行吗？”“不小心发错给文件传输助手算不算违法？”一时间焦虑情绪蔓延。其实，这是对新修...
|
|
|
+ </NuxtLink>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index-tabs2-bottom">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>盐池：观庭审知敬畏 守底线践清廉</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>吴忠：“组地”监督赋能优化营商环境</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>海原：整治骗取套取社保基金行为 守住民生资金安全防线</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>大武口：持续拧紧责任链条 深化全面从严治党</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>利通区：以“监督一点通”为抓手 推动基层权力在阳光下运行</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-2-right">
|
|
|
+ <div class="index—layer-2-title">
|
|
|
+ <div :class="indexTabs3 == 1 ? 'active' : ''" @mouseenter="indexTabs3 = 1">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 选项1
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div :class="indexTabs3 == 2 ? 'active' : ''" @mouseenter="indexTabs3 = 2">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 选项2
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="indexTabs3 == 1">
|
|
|
+ <div class="index-tabs2-top">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" />
|
|
|
+ </NuxtLink>
|
|
|
+ <div>
|
|
|
+ <h3>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 京津冀对在三地拟执业的司法鉴定人进行职业能力评估联考
|
|
|
+ </NuxtLink>
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ “2026年1月1日起，跟朋友私信发带颜色的信息就违法？”最近这条消息刷爆社交平台，不少网友慌了神：“跟伴侣私聊也不行吗？”“不小心发错给文件传输助手算不算违法？”一时间焦虑情绪蔓延。其实，这是对新修...
|
|
|
+ </NuxtLink>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index-tabs2-bottom">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>盐池：观庭审知敬畏 守底线践清廉</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>吴忠：“组地”监督赋能优化营商环境</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>海原：整治骗取套取社保基金行为 守住民生资金安全防线</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>大武口：持续拧紧责任链条 深化全面从严治党</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>利通区：以“监督一点通”为抓手 推动基层权力在阳光下运行</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--首页中央新闻3-->
|
|
|
+ <div class="index—layer-3">
|
|
|
+ <div class="index—layer-3-line">
|
|
|
+ <!--选项卡类型-->
|
|
|
+ <div class="index—layer-3-tabs-box">
|
|
|
+ <div class="index—layer-3-tabs-box-title">
|
|
|
+ <div @mouseenter="indexTabs4 = 1" :class="indexTabs4 == 1 ? 'active' : ''">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 选项1
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div @mouseenter="indexTabs4 = 2" :class="indexTabs4 == 2 ? 'active' : ''">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 选项2
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="indexTabs4 == 1" class="index—layer-3-news-body">
|
|
|
+ <div class="index—layer-3-news-body-title">
|
|
|
+ <div class="news-body-left">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" alt="">
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="news-body-right">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 政讯通·全国法制调研中心：专注法治服务，践行责任担当
|
|
|
+ </NuxtLink>
|
|
|
+ <p>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法治建设的推进，需要专业力量的深耕与赋能。政讯通·全国法制调研中心作为法治领域的重要参与主体，始终聚焦核心使命，以多元服务助力法治进程，为社会各界提供专业、可靠的法治相关支撑，也为心怀法治热忱的普...
|
|
|
+ </NuxtLink>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body-main">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>公证人员“三个特别”助力群众办好心头事</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>花都：漫步古村学宪法 徒步普法润民心</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>天河法治赋能 高质量发展成色更足</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="indexTabs4 == 2">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--常规类型-->
|
|
|
+ <div class="index—layer-3-news-box">
|
|
|
+ <div class="index—layer-3-news-box-title">
|
|
|
+ <div>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 典型案例
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body">
|
|
|
+ <div class="index—layer-3-news-body-title">
|
|
|
+ <div class="news-body-left">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" alt="">
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="news-body-right">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 政讯通·全国法制调研中心：专注法治服务，践行责任担当
|
|
|
+ </NuxtLink>
|
|
|
+ <p>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法治建设的推进，需要专业力量的深耕与赋能。政讯通·全国法制调研中心作为法治领域的重要参与主体，始终聚焦核心使命，以多元服务助力法治进程，为社会各界提供专业、可靠的法治相关支撑，也为心怀法治热忱的普...
|
|
|
+ </NuxtLink>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body-main">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>公证人员“三个特别”助力群众办好心头事</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>花都：漫步古村学宪法 徒步普法润民心</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>天河法治赋能 高质量发展成色更足</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-box">
|
|
|
+ <div class="index—layer-3-news-box-title">
|
|
|
+ <div>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法制文化
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body">
|
|
|
+ <div class="index—layer-3-news-body-title">
|
|
|
+ <div class="news-body-left">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" alt="">
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="news-body-right">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 政讯通·全国法制调研中心：专注法治服务，践行责任担当
|
|
|
+ </NuxtLink>
|
|
|
+ <p>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法治建设的推进，需要专业力量的深耕与赋能。政讯通·全国法制调研中心作为法治领域的重要参与主体，始终聚焦核心使命，以多元服务助力法治进程，为社会各界提供专业、可靠的法治相关支撑，也为心怀法治热忱的普...
|
|
|
+ </NuxtLink>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body-main">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>公证人员“三个特别”助力群众办好心头事</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>花都：漫步古村学宪法 徒步普法润民心</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>天河法治赋能 高质量发展成色更足</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-line">
|
|
|
+ <div class="index—layer-3-news-box">
|
|
|
+ <div class="index—layer-3-news-box-title">
|
|
|
+ <div>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法制文化
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body">
|
|
|
+ <div class="index—layer-3-news-body-title">
|
|
|
+ <div class="news-body-left">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" alt="">
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="news-body-right">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 政讯通·全国法制调研中心：专注法治服务，践行责任担当
|
|
|
+ </NuxtLink>
|
|
|
+ <p>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法治建设的推进，需要专业力量的深耕与赋能。政讯通·全国法制调研中心作为法治领域的重要参与主体，始终聚焦核心使命，以多元服务助力法治进程，为社会各界提供专业、可靠的法治相关支撑，也为心怀法治热忱的普...
|
|
|
+ </NuxtLink>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body-main">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>公证人员“三个特别”助力群众办好心头事</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>花都：漫步古村学宪法 徒步普法润民心</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>天河法治赋能 高质量发展成色更足</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-box">
|
|
|
+ <div class="index—layer-3-news-box-title">
|
|
|
+ <div>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法制文化
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body">
|
|
|
+ <div class="index—layer-3-news-body-title">
|
|
|
+ <div class="news-body-left">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" alt="">
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="news-body-right">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 政讯通·全国法制调研中心：专注法治服务，践行责任担当
|
|
|
+ </NuxtLink>
|
|
|
+ <p>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法治建设的推进，需要专业力量的深耕与赋能。政讯通·全国法制调研中心作为法治领域的重要参与主体，始终聚焦核心使命，以多元服务助力法治进程，为社会各界提供专业、可靠的法治相关支撑，也为心怀法治热忱的普...
|
|
|
+ </NuxtLink>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body-main">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>公证人员“三个特别”助力群众办好心头事</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>花都：漫步古村学宪法 徒步普法润民心</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>天河法治赋能 高质量发展成色更足</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-box">
|
|
|
+ <div class="index—layer-3-news-box-title">
|
|
|
+ <div>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法制文化
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body">
|
|
|
+ <div class="index—layer-3-news-body-title">
|
|
|
+ <div class="news-body-left">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <img src="/public/index/news.png" alt="">
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="news-body-right">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 政讯通·全国法制调研中心：专注法治服务，践行责任担当
|
|
|
+ </NuxtLink>
|
|
|
+ <p>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 法治建设的推进，需要专业力量的深耕与赋能。政讯通·全国法制调研中心作为法治领域的重要参与主体，始终聚焦核心使命，以多元服务助力法治进程，为社会各界提供专业、可靠的法治相关支撑，也为心怀法治热忱的普...
|
|
|
+ </NuxtLink>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="index—layer-3-news-body-main">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>公证人员“三个特别”助力群众办好心头事</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>花都：漫步古村学宪法 徒步普法润民心</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ <span>天河法治赋能 高质量发展成色更足</span>
|
|
|
+ <span>2026-01-06</span>
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--网友留言-->
|
|
|
+ <div class="index-layer-4">
|
|
|
+ <div class="index-layer-4-title">
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 网友留言
|
|
|
+ </NuxtLink>
|
|
|
+ <NuxtLink to="/">
|
|
|
+ 在线留言
|
|
|
+ </NuxtLink>
|
|
|
+ </div>
|
|
|
+ <div class="index-layer-4-body">
|
|
|
+ <ul class="post_nr liuyan">
|
|
|
+ <li>
|
|
|
+ <span class="name">熊先生:<b>网站名称问题</b> 2025-12-29 16:18:48</span>
|
|
|
+ <p class="nr">内容:看你们的介绍，政讯通•全国法制调研中心，网站名称不让用全国，你们怎么可以用啊？</p>
|
|
|
+ <p class="hfnr">
|
|
|
+ <span style="color:#f00;">回复:</span>
|
|
|
+ 工信部不审批带全国的网站。我们所有带全国字样的名称前都加了“政讯通”，意思是北京政讯通法律咨询有限公司在全国范围内开展的法制调研工作。网站显示没有全国字样，在文字资料或者口头表述时会有加全国，使用名称都是政讯通·全国法制资讯发布中心、政讯通•全国法制调研中心、政讯通•全国法制舆情监测中心和政讯通•全国法制发展促进中心。
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="name">zhang:<b>我从网上搜搜到你们这个网站，我看了下网站没看明白你们主要是做什么的？能简单介绍下吗？</b> 2025-12-26
|
|
|
+ 17:43:46</span>
|
|
|
+ <p class="nr">内容:我从网上搜搜到你们这个网站，我看了下网站没看明白你们主要是做什么的？能简单介绍下吗？</p>
|
|
|
+ <p class="hfnr">
|
|
|
+ <span style="color:#f00;">回复:</span>
|
|
|
+ 不知道您看到的是我们的哪个网站，我们法制调研项目有200多个网站。主要业务分四大部分：
|
|
|
+ 资讯与信息化业务：面向全国党政机关、企事业单位及相关经济组织发展法制信息化会员为主的网络资讯信息服务，提供200个网站资讯发布平台。同步为法制领域提供信息交流与沟通的平台，可以实现一对一、一对多和多对多的沟通交流。
|
|
|
+ 法制与调研业务：依法开展法制领域的课题调研、法制宣传、法律援助、法律咨询和公益活动等服务。
|
|
|
+ 舆情服务业务：面向全国法制党政机关、企事业单位等法人单位或组织依法提供网络舆情方面的监测、处理、公关等服务。
|
|
|
+ 行业与发展业务：综合管理与辅助各地市级中心的运营、面向社会提供法制领域的活动策划与企业发展定制服务。
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--底部-->
|
|
|
+ <HomeFoot></HomeFoot>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+//页面是否已经加载完毕
|
|
|
+const pageLoading = ref(false)
|
|
|
+//1.加载页面必备组件 start---------------------------------------->
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import { ElRadio, ElRadioGroup, ElCheckbox, ElCheckboxGroup, ElMessage, ElInput } from 'element-plus';
|
|
|
+import { useSeoMeta } from '#imports';
|
|
|
+//格式化跳转路径 - 标题
|
|
|
+//首页分类栏目标题，不需要考虑外链
|
|
|
+const getLinkPath = (item) => {
|
|
|
+ if (item.children_count == 0) {
|
|
|
+ //return `/newsList/${item.cid}?page=1`;
|
|
|
+ return `/${item.aLIas_pinyin}/list-1.html`;
|
|
|
+ } else {
|
|
|
+ //return `/primaryNavigation/${item.cid}`;
|
|
|
+ return `/${item.aLIas_pinyin}/index.html`;
|
|
|
+ }
|
|
|
+}
|
|
|
+//首页跳转到详情，这里需要考虑外链
|
|
|
+const getLinkPathDetail = (item) => {
|
|
|
+ if (item.islink == 1) {
|
|
|
+ return `${item.linkurl}`;
|
|
|
+ } else {
|
|
|
+ return `/${item.pinyin}/${item.id}.html`;
|
|
|
+ }
|
|
|
+}
|
|
|
+//1.加载页面必备组件 end---------------------------------------->
|
|
|
+//2.交互方法 start---------------------------------------->
|
|
|
+//2.1 新闻图片切换
|
|
|
+const hoverStatus = ref(1)
|
|
|
+const qhPic = function (num) {
|
|
|
+ hoverStatus.value = num;
|
|
|
+}
|
|
|
+//2.交互方法 end---------------------------------------->
|
|
|
+
|
|
|
+//3.页面基本信息 start---------------------------------------->
|
|
|
+//3.1 导航信息
|
|
|
+const pageData = ref([]);
|
|
|
+//3.2 模块数据
|
|
|
+//模块1
|
|
|
+const boxData1 = ref([])//图片新闻
|
|
|
+const boxData1data2 = ref([]);//文字新闻
|
|
|
+//模块2
|
|
|
+const boxData2 = ref([]);//图片新闻
|
|
|
+const boxData2data2 = ref([]);//文字新闻
|
|
|
+//模块3
|
|
|
+const boxData3 = ref([]);
|
|
|
+const boxData3data2 = ref([]);
|
|
|
+//模块4
|
|
|
+const boxData4 = ref([]);
|
|
|
+const boxData4data2 = ref([]);
|
|
|
+//模块5
|
|
|
+const boxData5 = ref([]);
|
|
|
+const boxData5data2 = ref([]);
|
|
|
+//模块6
|
|
|
+const boxData6 = ref([]);
|
|
|
+const boxData6data2 = ref([]);
|
|
|
+//模块7
|
|
|
+const boxData7 = ref([]);
|
|
|
+const boxData7data2 = ref([]);
|
|
|
+
|
|
|
+//3.3获得导航数据
|
|
|
+try {
|
|
|
+ const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
|
|
|
+ method: 'GET',
|
|
|
+ query: {
|
|
|
+ 'placeid': 1,
|
|
|
+ 'pid': 0,
|
|
|
+ 'num': 30
|
|
|
+ },
|
|
|
+ });
|
|
|
+ if (navigateData.code == 200) {
|
|
|
+ // 遍历可用的导航池放到页面中
|
|
|
+ for (let index in navigateData.data) {
|
|
|
+ let data = {
|
|
|
+ title: navigateData.data[index].name,
|
|
|
+ cid: navigateData.data[index].category_id,
|
|
|
+ children_count: navigateData.data[index].children_count,
|
|
|
+ alias: navigateData.data[index].alias,
|
|
|
+ aLIas_pinyin: navigateData.data[index].aLIas_pinyin
|
|
|
+ };
|
|
|
+ //1法制资讯
|
|
|
+ if (navigateData.data[index].category_id == 1) { pageData.value[0] = data }
|
|
|
+ //2各地动态
|
|
|
+ if (navigateData.data[index].category_id == 2) { pageData.value[1] = data }
|
|
|
+ //3特别关注
|
|
|
+ if (navigateData.data[index].category_id == 3) { pageData.value[2] = data }
|
|
|
+ //4媒体视点
|
|
|
+ if (navigateData.data[index].category_id == 4) { pageData.value[3] = data }
|
|
|
+ //5法纪通报
|
|
|
+ if (navigateData.data[index].category_id == 5) { pageData.value[4] = data }
|
|
|
+ //6今日说法
|
|
|
+ if (navigateData.data[index].category_id == 6) { pageData.value[5] = data }
|
|
|
+ //7政策法规
|
|
|
+ if (navigateData.data[index].category_id == 7) { pageData.value[6] = data }
|
|
|
+ }
|
|
|
+ }
|
|
|
+} catch (error) {
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+let getJson = [
|
|
|
+ { "parent": "1,1,1", "child": "" },//模块1法制资讯
|
|
|
+ { "parent": "2,1,1", "child": "" },//模块2各地动态
|
|
|
+ { "parent": "3,1,1", "child": "" },//模块3特别关注
|
|
|
+ { "parent": "4,1,1", "child": "" },//模块4媒体视点
|
|
|
+ { "parent": "7,1,1", "child": "" },//模块7政策法规
|
|
|
+
|
|
|
+ { "parent": "9,1,1", "child": "" },//模块9政策解读
|
|
|
+ { "parent": "12,1,1", "child": "" },//模块12执法在线
|
|
|
+ { "parent": "14,1,1", "child": "" },//模块14社会调硏
|
|
|
+ { "parent": "19,1,1", "child": "" },//模块19百家争鸣
|
|
|
+
|
|
|
+]
|
|
|
+let jsonString = JSON.stringify(getJson);
|
|
|
+async function getPageAllData() {
|
|
|
+ const mkdata = await requestDataPromise('/web/getWebsiteAllArticle', {
|
|
|
+ method: 'GET',
|
|
|
+ query: {
|
|
|
+ 'id': jsonString
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log("makdata:", mkdata);
|
|
|
+ if (mkdata.code == 200) {
|
|
|
+ //模块1法制资讯
|
|
|
+ boxData1.value = mkdata.data[0].imgnum;
|
|
|
+ boxData1data2.value = mkdata.data[0].textnum;
|
|
|
+ //模块2各地动态
|
|
|
+ boxData2.value = mkdata.data[1].imgnum;
|
|
|
+ boxData2data2.value = mkdata.data[1].textnum;
|
|
|
+ //模块3特别关注
|
|
|
+ boxData3.value = mkdata.data[2].imgnum;
|
|
|
+ boxData3data2.value = mkdata.data[2].textnum;
|
|
|
+ //模块4媒体视点
|
|
|
+ boxData4.value = mkdata.data[3].imgnum;
|
|
|
+ boxData4data2.value = mkdata.data[3].textnum;
|
|
|
+ //模块5法纪通报
|
|
|
+ boxData5.value = mkdata.data[4].imgnum;
|
|
|
+ boxData5data2.value = mkdata.data[4].textnum;
|
|
|
+ //模块6今日说法
|
|
|
+ boxData6.value = mkdata.data[5].imgnum;
|
|
|
+ boxData6data2.value = mkdata.data[5].textnum;
|
|
|
+ //模块7政策法规
|
|
|
+ boxData7.value = mkdata.data[5].imgnum;
|
|
|
+ boxData7data2.value = mkdata.data[5].textnum;
|
|
|
+ } else {
|
|
|
+ ElMessage.error(mkdata.message)
|
|
|
+ }
|
|
|
+}
|
|
|
+getPageAllData();
|
|
|
+//5.页面基本信息 end---------------------------------------->
|
|
|
+//6.设置seo数据 start---------------------------------------->
|
|
|
+//获取seo数据
|
|
|
+const setData = await requestDataPromise('/web/getWebsiteFootInfo', {
|
|
|
+ method: 'GET',
|
|
|
+ query: {},
|
|
|
+});
|
|
|
+if (setData.code == 200) {
|
|
|
+ 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: [
|
|
|
+ { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
|
|
|
+ { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
|
|
|
+ { name: 'viewport', content: "width=device-width,initial-scale=1,user-scalable=no" }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+}
|
|
|
+//6.设置seo数据 start---------------------------------------->
|
|
|
+//7.官网新增 start---------------------------------------->
|
|
|
+//swiper焦点图start---------------------------------------->
|
|
|
+const imagelist = ref("")
|
|
|
+async function getModelData1() {
|
|
|
+ const mkdata = await requestDataPromise('/web/getWebsiteArticlett', {
|
|
|
+ method: 'GET',
|
|
|
+ query: {
|
|
|
+ 'imgnum': 10,
|
|
|
+ 'textnum': 0,
|
|
|
+ 'level': 2,
|
|
|
+ 'placeid': 0,
|
|
|
+ 'id': ''
|
|
|
+ },
|
|
|
+ });
|
|
|
+ if (mkdata.code == 200) {
|
|
|
+ imagelist.value = mkdata.data.img;
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+getModelData1()
|
|
|
+
|
|
|
+//使用swiper
|
|
|
+import { computed } from 'vue'
|
|
|
+import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
|
+import { Autoplay, Navigation } from 'swiper/modules' // 增加 Navigation
|
|
|
+// 导入 Swiper 样式
|
|
|
+import 'swiper/css'
|
|
|
+import 'swiper/css/navigation' // 增加导航样式
|
|
|
+const props = defineProps({
|
|
|
+ imagelist: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+})
|
|
|
+const emit = defineEmits(['slide-change'])
|
|
|
+const swiperCurrentIndex = ref(0)
|
|
|
+const swiperInstance = ref(null)
|
|
|
+// 使用哪些模块
|
|
|
+const modules = [Autoplay, Navigation] // 添加 Navigation
|
|
|
+// 响应式断点设置（可选）
|
|
|
+const breakpoints = computed(() => ({
|
|
|
+ // 当屏幕宽度 >= 320px
|
|
|
+ 320: {
|
|
|
+ slidesPerView: 1,
|
|
|
+ spaceBetween: 10
|
|
|
+ },
|
|
|
+ // 当屏幕宽度 >= 768px
|
|
|
+ 768: {
|
|
|
+ slidesPerView: 3,
|
|
|
+ spaceBetween: 15
|
|
|
+ },
|
|
|
+ // 当屏幕宽度 >= 1024px
|
|
|
+ 1024: {
|
|
|
+ slidesPerView: 5,
|
|
|
+ spaceBetween: 20
|
|
|
+ },
|
|
|
+ // 当屏幕宽度 >= 1440px
|
|
|
+ 1440: {
|
|
|
+ slidesPerView: 6,
|
|
|
+ spaceBetween: 25
|
|
|
+ }
|
|
|
+}))
|
|
|
+const swiperHandleSlideChange = (swiper) => {
|
|
|
+ swiperCurrentIndex.value = swiper.activeIndex
|
|
|
+ emit('swiperSlideChange', swiper.activeIndex)
|
|
|
+}
|
|
|
+const goToSlide = (index) => {
|
|
|
+ console.log(index)
|
|
|
+ if (swiperInstance.value) {
|
|
|
+ swiperInstance.value.slideTo(index, 500) // 500ms 动画时间
|
|
|
+ }
|
|
|
+}
|
|
|
+const onSwiper = (swiper) => {
|
|
|
+ swiperInstance.value = swiper
|
|
|
+ console.log('Swiper实例已初始化:', swiper)
|
|
|
+}
|
|
|
+// 如果需要手动控制自动播放
|
|
|
+const pauseAutoplay = () => {
|
|
|
+ if (swiperInstance.value && swiperInstance.value.autoplay) {
|
|
|
+ swiperInstance.value.autoplay.pause()
|
|
|
+ }
|
|
|
+}
|
|
|
+const startAutoplay = () => {
|
|
|
+ if (swiperInstance.value && swiperInstance.value.autoplay) {
|
|
|
+ swiperInstance.value.autoplay.resume()
|
|
|
+ }
|
|
|
+}
|
|
|
+//swiper焦点图 end---------------------------------------->
|
|
|
+//轮播图 start---------------------------------------->
|
|
|
+import { ElCarousel, ElCarouselItem } from 'element-plus'
|
|
|
+let currentIndex = ref(0)
|
|
|
+let handleIndicatorChange = (val) => {
|
|
|
+ currentIndex.value = val
|
|
|
+}
|
|
|
+//轮播图 end---------------------------------------->
|
|
|
+//选项卡 start---------------------------------------->
|
|
|
+//1.首页顶部新闻-中央选项卡
|
|
|
+const indexTabs = ref(1)
|
|
|
+//2.首页中央新闻2-左侧选项卡
|
|
|
+const indexTabs2 = ref(1)
|
|
|
+//3.首页中央新闻2-右侧选项卡
|
|
|
+const indexTabs3 = ref(1)
|
|
|
+//3.首页中央新闻3-左侧选项卡
|
|
|
+const indexTabs4 = ref(1)
|
|
|
+//选项卡 end---------------------------------------->
|
|
|
+//7.官网新增 end---------------------------------------->
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+
|
|
|
+@media screen and (min-width: 1401px) {
|
|
|
+ //swiper轮播图 start---------------------------------------->
|
|
|
+ .swiper-container {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20PX 0;
|
|
|
+ position: relative;
|
|
|
+ max-width: 1400PX;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .custom-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10PX 5PX; //给两侧留出空间
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-wrapper) {
|
|
|
+ align-items: stretch; //使所有幻灯片高度一致
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-slide) {
|
|
|
+ height: auto;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+ //悬停效果
|
|
|
+ .custom-swiper :deep(.swiper-slide:hover) {
|
|
|
+ transform: translateY(-5PX);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .slide-link {
|
|
|
+ display: block;
|
|
|
+ text-decoration: none;
|
|
|
+ color: inherit;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .image-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 118PX; //根据需求调整
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4PX 12PX rgba(0, 0, 0, 0.1);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ background: #f5f5f5; //加载时的背景色
|
|
|
+ }
|
|
|
+ .image-container:hover {
|
|
|
+ box-shadow: 0 8PX 24PX rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+ .slide-image {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ width: 264PX;
|
|
|
+ height: 118PX;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.5s ease;
|
|
|
+ }
|
|
|
+ .image-container:hover .slide-image {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+ .image-title {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ color: white;
|
|
|
+ padding: 12PX 15PX;
|
|
|
+ font-size: 14PX;
|
|
|
+ line-height: 1.4;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ background: rgba(0, 0, 0, .6)
|
|
|
+ }
|
|
|
+ .custom-indicators {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8PX;
|
|
|
+ margin-top: 25PX;
|
|
|
+ padding: 15PX 10PX;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ border-radius: 50PX;
|
|
|
+ max-width: 90%;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+ .indicator-btn {
|
|
|
+ width: 36PX;
|
|
|
+ height: 36PX;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2PX solid #e0e0e0;
|
|
|
+ background: white;
|
|
|
+ color: #333;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ font-size: 14PX;
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ .indicator-btn:hover {
|
|
|
+ background: #f0f9ff;
|
|
|
+ border-color: #409eff;
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ .indicator-btn.active-indicator {
|
|
|
+ background: #409eff;
|
|
|
+ color: white;
|
|
|
+ border-color: #409eff;
|
|
|
+ box-shadow: 0 4PX 12PX rgba(64, 158, 255, 0.3);
|
|
|
+ }
|
|
|
+ //swiper加载动画
|
|
|
+ .image-container:empty::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
|
+ background-size: 200% 100%;
|
|
|
+ animation: loading 1.5s infinite;
|
|
|
+ border-radius: 12PX;
|
|
|
+ }
|
|
|
+ @keyframes loading {
|
|
|
+ 0% {
|
|
|
+ background-position: 200% 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-position: -200% 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //swiper箭头颜色
|
|
|
+ .custom-swiper :deep(.swiper-button-prev),
|
|
|
+ .custom-swiper :deep(.swiper-button-next) {
|
|
|
+ color: white !important; //箭头颜色改为白色
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-button-prev):after,
|
|
|
+ .custom-swiper :deep(.swiper-button-next):after {
|
|
|
+ color: white !important; //确保箭头图标也是白色
|
|
|
+ }
|
|
|
+ //swiper轮播图 end---------------------------------------->
|
|
|
+ //轮播图 start---------------------------------------->
|
|
|
+ .nuxt-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 300PX;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 300PX;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ padding-left: 20PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ font-family: Source Han Sans, Source Han Sans;
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #FFFFFF;
|
|
|
+ //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
|
|
|
+ background: rgba(0, 0, 0, .6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-carousel {
|
|
|
+ // 左右箭头按钮
|
|
|
+ .el-carousel__arrow--right :deep(.class-name),
|
|
|
+ .el-carousel__arrow--left :deep(.class-name) {
|
|
|
+ width: 68PX;
|
|
|
+ height: 68PX;
|
|
|
+ }
|
|
|
+ //左右箭头图片
|
|
|
+ /deep/.el-icon svg {
|
|
|
+ height: 1em;
|
|
|
+ width: 1em;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.el-carousel__arrow {
|
|
|
+ border-radius: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.el-carousel__arrow i {
|
|
|
+ font-size: 68PX !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__indicators {
|
|
|
+ // 指示器
|
|
|
+ left: unset;
|
|
|
+ transform: unset;
|
|
|
+ right: 41%;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__button {
|
|
|
+ // 指示器按钮
|
|
|
+ width: 15PX;
|
|
|
+ height: 15PX;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: none;
|
|
|
+ opacity: 1;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ bottom: 30PX;
|
|
|
+ }
|
|
|
+ /deep/ .is-active .el-carousel__button {
|
|
|
+ // 指示器激活按钮
|
|
|
+ background: #158d91;
|
|
|
+ }
|
|
|
+ /deep/.custom-indicators {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10PX;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__indicators {
|
|
|
+ right: 3%;
|
|
|
+ bottom: 10%;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__arrow {
|
|
|
+ top: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //轮播图 end---------------------------------------->
|
|
|
+ //第一层 start---------------------------------------->
|
|
|
+ .index—layer-1 {
|
|
|
+ width: 1400PX;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20PX auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ .index—layer-1-left {
|
|
|
+ width: 31%;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ }
|
|
|
+ .index-layer-1-middle {
|
|
|
+ width: 31%;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10PX;
|
|
|
+ padding-bottom: 5PX;
|
|
|
+ .tabtlt {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ outline: hidden;
|
|
|
+ border-bottom: 1PX solid #f0f0f0;
|
|
|
+ margin: 7PX 0 18PX;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-self: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ a {
|
|
|
+ color: #337ab7;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 50PX;
|
|
|
+ line-height: 50PX;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #000;
|
|
|
+ background: #f3f3f3;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ div.intabtltbg {
|
|
|
+ background: url(public/index/current.gif) no-repeat center bottom !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coninfoitem {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0PX auto;
|
|
|
+ >div {
|
|
|
+ &.coninfoitem_img {
|
|
|
+ height: 86PX;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 5PX;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ &.coninfoitem_img {
|
|
|
+ a{
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ line-height: 0;
|
|
|
+ a {
|
|
|
+ font-size: 13PX;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ height: 26PX;
|
|
|
+ line-height: 26PX;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 120PX;
|
|
|
+ height: 86PX;
|
|
|
+ float: left;
|
|
|
+ margin-right: 11PX;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ line-height: 0;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ font-size: 13PX;
|
|
|
+ line-height: 20PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coninfoitem_title {
|
|
|
+ width: 100%;
|
|
|
+ height: 28PX;
|
|
|
+ line-height: 28PX;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ list-style-position: inside;
|
|
|
+ color: #000;
|
|
|
+ display: block;
|
|
|
+ font-size: 13PX;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 14PX;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 12PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-layer-1-right {
|
|
|
+ width: 31%;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10PX;
|
|
|
+ padding-bottom: 16PX;
|
|
|
+ .imgtlt {
|
|
|
+ width: 100%;
|
|
|
+ height: 43PX;
|
|
|
+ border-bottom: 1PX solid #e7e7e7;
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ width: 92PX;
|
|
|
+ height: 42PX;
|
|
|
+ line-height: 42PX;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #333;
|
|
|
+ border-bottom: 2PX solid #158d91;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con_img_list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ a {
|
|
|
+ width: 48%;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100PX;
|
|
|
+ margin: 20PX auto 0;
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .con_img_list_rgba {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 22PX;
|
|
|
+ line-height: 21PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0PX 10PX;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 0PX;
|
|
|
+ left: 0PX;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16PX;
|
|
|
+ z-index: 11;
|
|
|
+ background: rgba(0, 0, 0, .6);
|
|
|
+ display: block;
|
|
|
+ word-break: keep-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第一层 end---------------------------------------->
|
|
|
+ //第二层 start---------------------------------------->
|
|
|
+ .index—layer-2 {
|
|
|
+ width: 1400PX;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20PX auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ .index—layer-2-left,
|
|
|
+ .index—layer-2-right {
|
|
|
+ width: 49%;
|
|
|
+ border: 1PX solid #ddd;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ .index—layer-2-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ background: #fff;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: #158d91;
|
|
|
+ color: #fff;
|
|
|
+ a {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ width: 118PX;
|
|
|
+ height: 44PX;
|
|
|
+ line-height: 44PX;
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ color: #808080;
|
|
|
+ font-size: 16PX;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 2PX solid #158d91;
|
|
|
+ a {
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-tabs2-top {
|
|
|
+ background: #f8f8f8;
|
|
|
+ padding: 20PX 20PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1PX dashed #ddd;
|
|
|
+ >a {
|
|
|
+ margin-right: 11PX;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 120PX;
|
|
|
+ height: 86PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ width: 100%;
|
|
|
+ height: 26PX;
|
|
|
+ line-height: 26PX;
|
|
|
+ overflow: hidden;
|
|
|
+ a {
|
|
|
+ font-size: 13PX;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ height: 60PX;
|
|
|
+ line-height: 20PX;
|
|
|
+ overflow: hidden;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ font-size: 13PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-tabs2-bottom {
|
|
|
+ padding: 20PX;
|
|
|
+ margin: 0;
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ list-style-position: inside;
|
|
|
+ color: #333;
|
|
|
+ line-height: 28PX;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 14PX;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 12PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第二层 end---------------------------------------->
|
|
|
+ //第三层 start---------------------------------------->
|
|
|
+ .index—layer-3 {
|
|
|
+ .index—layer-3-line {
|
|
|
+ width: 1400PX;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ //选项卡类型
|
|
|
+ .index—layer-3-tabs-box {
|
|
|
+ width: 31%;
|
|
|
+ height: auto;
|
|
|
+ border: 1PX solid #ddd;
|
|
|
+ border-top: 2PX solid #158d91;
|
|
|
+ margin: 1%;
|
|
|
+ padding: 0 10PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .index—layer-3-tabs-box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1PX solid #f0f0f0;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: url(../public/index/current2.png) no-repeat center bottom;
|
|
|
+ }
|
|
|
+ width: 87PX;
|
|
|
+ height: 54PX;
|
|
|
+ line-height: 55PX;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10PX;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-main {
|
|
|
+ margin-bottom: 20PX;
|
|
|
+ a {
|
|
|
+ width: 100%;
|
|
|
+ height: 26PX;
|
|
|
+ line-height: 26PX;
|
|
|
+ list-style-position: inside;
|
|
|
+ font-size: 13PX;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 14PX;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 12PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //常规类型
|
|
|
+ .index—layer-3-news-box {
|
|
|
+ width: 31%;
|
|
|
+ height: auto;
|
|
|
+ border: 1PX solid #ddd;
|
|
|
+ border-top: 2PX solid #158d91;
|
|
|
+ margin: 1%;
|
|
|
+ padding: 0 10PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .index—layer-3-news-box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1PX solid #f0f0f0;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: url(../public/index/current2.png) no-repeat center bottom;
|
|
|
+ }
|
|
|
+ width: 87PX;
|
|
|
+ height: 54PX;
|
|
|
+ line-height: 55PX;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10PX;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-main {
|
|
|
+ margin-bottom: 20PX;
|
|
|
+ a {
|
|
|
+ width: 100%;
|
|
|
+ height: 26PX;
|
|
|
+ line-height: 26PX;
|
|
|
+ list-style-position: inside;
|
|
|
+ font-size: 13PX;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 14PX;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 12PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 20PX 0 14PX;
|
|
|
+ padding-bottom: 20PX;
|
|
|
+ border-bottom: 1PX dashed #e1e1e1;
|
|
|
+ >div {
|
|
|
+ &.news-body-left {
|
|
|
+ margin-right: 11PX;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 120PX;
|
|
|
+ height: 86PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.news-body-right {
|
|
|
+ >a {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ font-size: 16PX;
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #000;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ height: 46PX;
|
|
|
+ line-height: 23PX;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14PX;
|
|
|
+ color: #333;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第三层 end---------------------------------------->
|
|
|
+ //第四层 start---------------------------------------->
|
|
|
+ .index-layer-4 {
|
|
|
+ width: 1400PX;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ border-radius: 20PX;
|
|
|
+ padding: 10PX 20PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 20PX auto;
|
|
|
+ .index-layer-4-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ border-bottom: 1PX solid #ccc;
|
|
|
+ a {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 22PX;
|
|
|
+ color: #1476bd;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #f00;
|
|
|
+ border: none;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-layer-4-body {
|
|
|
+ .post_nr {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin: 20PX auto;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ border-radius: 10PX;
|
|
|
+ padding: 20PX !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .name {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ line-height: 40PX;
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ b {
|
|
|
+ font-size: 17PX;
|
|
|
+ margin: 0 10PX;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ border-bottom: 1PX solid #ccc;
|
|
|
+ padding-bottom: 15PX;
|
|
|
+ margin-bottom: 10PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ height: auto;
|
|
|
+ line-height: 25PX;
|
|
|
+ font-size: 15PX;
|
|
|
+ color: #000;
|
|
|
+ &.hfnr {
|
|
|
+ font-weight: bold;
|
|
|
+ span {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第四层 end---------------------------------------->
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.index—layer-1 .index-layer-1-middle .coninfoitem > div.coninfoitem_img{display:block!important;}
|
|
|
+.index—layer-1 .index-layer-1-middle .coninfoitem .coninfoitem_title{
|
|
|
+ display:block!important;width:100%!important;overflow:hidden!important;height:auto!important;}
|
|
|
+// .index—layer-1 .index-layer-1-middle .coninfoitem > div img{height:85PX!important;}
|
|
|
+
|
|
|
+.index—layer-1 .index-layer-1-middle .coninfoitem > div h3{display:block;height: 26PX;line-height: 26PX;overflow: hidden;font-size: 14PX;color: #333;font-weight: bold;
|
|
|
+ display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
|
+ }
|
|
|
+.index—layer-1 .index-layer-1-middle .coninfoitem > div p{display:block;color: #333;font-size: 14PX;height: 60PX;line-height: 20PX;overflow: hidden;
|
|
|
+ overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+.index—layer-1 .index-layer-1-middle .coninfoitem .coninfoitem_title .coninfoitem_img_text{}
|
|
|
+
|
|
|
+@media screen and (min-width: 801px) and (max-width: 1400px) {
|
|
|
+ //swiper轮播图 start---------------------------------------->
|
|
|
+ .swiper-container {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20PX 0;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .custom-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 5px; //给两侧留出空间
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-wrapper) {
|
|
|
+ align-items: stretch; //使所有幻灯片高度一致
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-slide) {
|
|
|
+ height: auto;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+ //悬停效果
|
|
|
+ .custom-swiper :deep(.swiper-slide:hover) {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .slide-link {
|
|
|
+ display: block;
|
|
|
+ text-decoration: none;
|
|
|
+ color: inherit;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .image-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 120PX; //根据需求调整
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4PX 12PX rgba(0, 0, 0, 0.1);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ background: #f5f5f5; //加载时的背景色
|
|
|
+ }
|
|
|
+ .image-container:hover {
|
|
|
+ box-shadow: 0 8PX 24PX rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+ .slide-image {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ width: 264PX;
|
|
|
+ height: 118PX;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.5s ease;
|
|
|
+ }
|
|
|
+ .image-container:hover .slide-image {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+ .image-title {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ color: white;
|
|
|
+ padding: 12PX 15PX;
|
|
|
+ font-size: 14PX;
|
|
|
+ line-height: 1.4;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ background: rgba(0, 0, 0, .6)
|
|
|
+ }
|
|
|
+ .custom-indicators {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8PX;
|
|
|
+ margin-top: 25PX;
|
|
|
+ padding: 15PX 10PX;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ border-radius: 50PX;
|
|
|
+ max-width: 90%;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+ .indicator-btn {
|
|
|
+ width: 36PX;
|
|
|
+ height: 36PX;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2PX solid #e0e0e0;
|
|
|
+ background: white;
|
|
|
+ color: #333;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ font-size: 14PX;
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ .indicator-btn:hover {
|
|
|
+ background: #f0f9ff;
|
|
|
+ border-color: #409eff;
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ .indicator-btn.active-indicator {
|
|
|
+ background: #409eff;
|
|
|
+ color: white;
|
|
|
+ border-color: #409eff;
|
|
|
+ box-shadow: 0 4PX 12PX rgba(64, 158, 255, 0.3);
|
|
|
+ }
|
|
|
+ //swiper加载动画
|
|
|
+ .image-container:empty::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
|
+ background-size: 200% 100%;
|
|
|
+ animation: loading 1.5s infinite;
|
|
|
+ border-radius: 12PX;
|
|
|
+ }
|
|
|
+ @keyframes loading {
|
|
|
+ 0% {
|
|
|
+ background-position: 200% 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-position: -200% 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //swiper箭头颜色
|
|
|
+ .custom-swiper :deep(.swiper-button-prev),
|
|
|
+ .custom-swiper :deep(.swiper-button-next) {
|
|
|
+ color: white !important; //箭头颜色改为白色
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-button-prev):after,
|
|
|
+ .custom-swiper :deep(.swiper-button-next):after {
|
|
|
+ color: white !important; //确保箭头图标也是白色
|
|
|
+ }
|
|
|
+ //swiper轮播图 end---------------------------------------->
|
|
|
+ //轮播图 start---------------------------------------->
|
|
|
+ .nuxt-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 300PX;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ padding: 0 10PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ font-family: Source Han Sans, Source Han Sans;
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #FFFFFF;
|
|
|
+ //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
|
|
|
+ background: rgba(0, 0, 0, .6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-carousel {
|
|
|
+ // 左右箭头按钮
|
|
|
+ .el-carousel__arrow--right :deep(.class-name),
|
|
|
+ .el-carousel__arrow--left :deep(.class-name) {
|
|
|
+ width: 68PX;
|
|
|
+ height: 68PX;
|
|
|
+ }
|
|
|
+ //左右箭头图片
|
|
|
+ /deep/.el-icon svg {
|
|
|
+ height: 1em;
|
|
|
+ width: 1em;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.el-carousel__arrow {
|
|
|
+ border-radius: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.el-carousel__arrow i {
|
|
|
+ font-size: 68PX !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__indicators {
|
|
|
+ // 指示器
|
|
|
+ left: unset;
|
|
|
+ transform: unset;
|
|
|
+ right: 41%;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__button {
|
|
|
+ // 指示器按钮
|
|
|
+ width: 15PX;
|
|
|
+ height: 15PX;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: none;
|
|
|
+ opacity: 1;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ bottom: 30PX;
|
|
|
+ }
|
|
|
+ /deep/ .is-active .el-carousel__button {
|
|
|
+ // 指示器激活按钮
|
|
|
+ background: #158d91;
|
|
|
+ }
|
|
|
+ /deep/.custom-indicators {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10PX;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__indicators {
|
|
|
+ right: 3%;
|
|
|
+ bottom: 10%;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__arrow {
|
|
|
+ top: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //轮播图 end---------------------------------------->
|
|
|
+ //第一层 start---------------------------------------->
|
|
|
+ .index—layer-1 {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20PX auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ .index—layer-1-left {
|
|
|
+ width: 31%;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ }
|
|
|
+ .index-layer-1-middle {
|
|
|
+ width: 31%;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10PX;
|
|
|
+ padding-bottom: 5PX;
|
|
|
+ .tabtlt {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ outline: hidden;
|
|
|
+ border-bottom: 1PX solid #f0f0f0;
|
|
|
+ margin: 7PX 0 18PX;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-self: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ a {
|
|
|
+ color: #337ab7;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 50PX;
|
|
|
+ line-height: 50PX;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #000;
|
|
|
+ background: #f3f3f3;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ div.intabtltbg {
|
|
|
+ background: url(public/index/current.gif) no-repeat center bottom !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coninfoitem {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0PX auto;
|
|
|
+ >div {
|
|
|
+ &.coninfoitem_img {
|
|
|
+ height: 86PX;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 5PX;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ line-height: 26PX;
|
|
|
+ a {
|
|
|
+ font-size: 13PX;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ height: 26PX;
|
|
|
+ line-height: 26PX;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 120PX;
|
|
|
+ height: 86PX;
|
|
|
+ float: left;
|
|
|
+ margin-right: 11PX;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ line-height: 0;
|
|
|
+ a {
|
|
|
+ line-height: 20PX;
|
|
|
+ color: #333;
|
|
|
+ font-size: 13PX;
|
|
|
+ text-indent: 2em;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coninfoitem_title {
|
|
|
+ width: 100%;
|
|
|
+ height: 28PX;
|
|
|
+ line-height: 28PX;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ list-style-position: inside;
|
|
|
+ color: #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 14PX;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 12PX;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-layer-1-right {
|
|
|
+ width: 31%;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10PX;
|
|
|
+ padding-bottom: 16PX;
|
|
|
+ .imgtlt {
|
|
|
+ width: 100%;
|
|
|
+ height: 43PX;
|
|
|
+ border-bottom: 1PX solid #e7e7e7;
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ width: 92PX;
|
|
|
+ height: 42PX;
|
|
|
+ line-height: 42PX;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #333;
|
|
|
+ border-bottom: 2PX solid #158d91;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con_img_list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ a {
|
|
|
+ width: 48%;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100PX;
|
|
|
+ margin: 20PX auto 0;
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .con_img_list_rgba {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 22PX;
|
|
|
+ line-height: 21PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0PX 10PX;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 0PX;
|
|
|
+ left: 0PX;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16PX;
|
|
|
+ z-index: 11;
|
|
|
+ background: rgba(0, 0, 0, .6);
|
|
|
+ display: block;
|
|
|
+ word-break: keep-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第一层 end---------------------------------------->
|
|
|
+ //第二层 start---------------------------------------->
|
|
|
+ .index—layer-2 {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20PX auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ .index—layer-2-left,
|
|
|
+ .index—layer-2-right {
|
|
|
+ width: 49%;
|
|
|
+ border: 1PX solid #ddd;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ .index—layer-2-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ background: #fff;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: #158d91;
|
|
|
+ color: #fff;
|
|
|
+ a {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ width: 118PX;
|
|
|
+ height: 44PX;
|
|
|
+ line-height: 44PX;
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ color: #808080;
|
|
|
+ font-size: 16PX;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 2PX solid #158d91;
|
|
|
+ a {
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-tabs2-top {
|
|
|
+ background: #f8f8f8;
|
|
|
+ padding: 20PX 20PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1PX dashed #ddd;
|
|
|
+ >a {
|
|
|
+ margin-right: 11PX;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 120PX;
|
|
|
+ height: 86PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ width: 100%;
|
|
|
+ height: 26PX;
|
|
|
+ line-height: 26PX;
|
|
|
+ overflow: hidden;
|
|
|
+ a {
|
|
|
+ font-size: 13PX;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ height: 60PX;
|
|
|
+ line-height: 20PX;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box !important;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ font-size: 13PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-tabs2-bottom {
|
|
|
+ padding: 20PX;
|
|
|
+ margin: 0;
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 28PX;
|
|
|
+ line-height: 28PX;
|
|
|
+ color: #333;
|
|
|
+ font-size: 13PX;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 14PX;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 12PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第二层 end---------------------------------------->
|
|
|
+ //第三层 start---------------------------------------->
|
|
|
+ .index—layer-3 {
|
|
|
+ .index—layer-3-line {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ //选项卡类型
|
|
|
+ .index—layer-3-tabs-box {
|
|
|
+ width: 31%;
|
|
|
+ height: auto;
|
|
|
+ border: 1PX solid #ddd;
|
|
|
+ border-top: 2PX solid #158d91;
|
|
|
+ margin: 1%;
|
|
|
+ padding: 0 10PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .index—layer-3-tabs-box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1PX solid #f0f0f0;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: url(../public/index/current2.png) no-repeat center bottom;
|
|
|
+ }
|
|
|
+ width: 87PX;
|
|
|
+ height: 54PX;
|
|
|
+ line-height: 55PX;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10PX;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-main {
|
|
|
+ margin-bottom: 20PX;
|
|
|
+ a {
|
|
|
+ width: 100%;
|
|
|
+ height: 26PX;
|
|
|
+ line-height: 26PX;
|
|
|
+ list-style-position: inside;
|
|
|
+ font-size: 13PX;
|
|
|
+ color: #333;
|
|
|
+ display: block;
|
|
|
+ word-break: keep-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 66%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //常规类型
|
|
|
+ .index—layer-3-news-box {
|
|
|
+ width: 31%;
|
|
|
+ height: auto;
|
|
|
+ border: 1PX solid #ddd;
|
|
|
+ border-top: 2PX solid #158d91;
|
|
|
+ margin: 1%;
|
|
|
+ padding: 0 10PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .index—layer-3-news-box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1PX solid #f0f0f0;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: url(../public/index/current2.png) no-repeat center bottom;
|
|
|
+ }
|
|
|
+ width: 87PX;
|
|
|
+ height: 54PX;
|
|
|
+ line-height: 55PX;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10PX;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20PX;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-main {
|
|
|
+ margin-bottom: 20PX;
|
|
|
+ a {
|
|
|
+ width: 100%;
|
|
|
+ height: 26PX;
|
|
|
+ line-height: 26PX;
|
|
|
+ list-style-position: inside;
|
|
|
+ font-size: 13PX;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 14PX;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 28PX;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 12PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 20PX 0 14PX;
|
|
|
+ padding-bottom: 20PX;
|
|
|
+ border-bottom: 1PX dashed #e1e1e1;
|
|
|
+ >div {
|
|
|
+ &.news-body-left {
|
|
|
+ margin-right: 11PX;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 120PX;
|
|
|
+ height: 86PX;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.news-body-right {
|
|
|
+ >a {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ font-size: 16PX;
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #000;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ height: 46PX;
|
|
|
+ line-height: 23PX;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14PX;
|
|
|
+ color: #333;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第三层 end---------------------------------------->
|
|
|
+ //第四层 start---------------------------------------->
|
|
|
+ .index-layer-4 {
|
|
|
+ width: 100%;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ border-radius: 20PX;
|
|
|
+ padding: 10PX 20PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 20PX auto;
|
|
|
+ .index-layer-4-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 40PX;
|
|
|
+ line-height: 40PX;
|
|
|
+ border-bottom: 1PX solid #ccc;
|
|
|
+ a {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 22PX;
|
|
|
+ color: #1476bd;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #f00;
|
|
|
+ border: none;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-layer-4-body {
|
|
|
+ .post_nr {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin: 20PX auto;
|
|
|
+ border: 1PX solid #ccc;
|
|
|
+ border-radius: 10PX;
|
|
|
+ padding: 20PX !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .name {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ line-height: 40PX;
|
|
|
+ font-size: 16PX;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ b {
|
|
|
+ font-size: 17PX;
|
|
|
+ margin: 0 10PX;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ border-bottom: 1PX solid #ccc;
|
|
|
+ padding-bottom: 15PX;
|
|
|
+ margin-bottom: 10PX;
|
|
|
+ box-sizing: border-box;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ height: auto;
|
|
|
+ line-height: 25PX;
|
|
|
+ font-size: 15PX;
|
|
|
+ color: #000;
|
|
|
+ &.hfnr {
|
|
|
+ font-weight: bold;
|
|
|
+ span {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第四层 end---------------------------------------->
|
|
|
+ .index—layer-2 {
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .index-layer-4 {
|
|
|
+ margin: 0px auto;
|
|
|
+ width: 98%;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media screen and (max-width: 800px) {
|
|
|
+ //swiper轮播图 start---------------------------------------->
|
|
|
+ .swiper-container {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 0;
|
|
|
+ position: relative;
|
|
|
+ max-width: 1400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .custom-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 5px; //给两侧留出空间
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-wrapper) {
|
|
|
+ align-items: stretch; //使所有幻灯片高度一致
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-slide) {
|
|
|
+ height: auto;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ }
|
|
|
+ //悬停效果
|
|
|
+ .custom-swiper :deep(.swiper-slide:hover) {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .slide-link {
|
|
|
+ display: block;
|
|
|
+ text-decoration: none;
|
|
|
+ color: inherit;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .image-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 118px; //根据需求调整
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ background: #f5f5f5; //加载时的背景色
|
|
|
+ }
|
|
|
+ .image-container:hover {
|
|
|
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+ .slide-image {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ width: 264px;
|
|
|
+ height: 118px;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.5s ease;
|
|
|
+ }
|
|
|
+ .image-container:hover .slide-image {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+ .image-title {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ color: white;
|
|
|
+ padding: 12px 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.4;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ background: rgba(0, 0, 0, .6)
|
|
|
+ }
|
|
|
+ .custom-indicators {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 25px;
|
|
|
+ padding: 15px 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ border-radius: 50px;
|
|
|
+ max-width: 90%;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+ .indicator-btn {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #e0e0e0;
|
|
|
+ background: white;
|
|
|
+ color: #333;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ .indicator-btn:hover {
|
|
|
+ background: #f0f9ff;
|
|
|
+ border-color: #409eff;
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ .indicator-btn.active-indicator {
|
|
|
+ background: #409eff;
|
|
|
+ color: white;
|
|
|
+ border-color: #409eff;
|
|
|
+ box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
|
|
+ }
|
|
|
+ //swiper加载动画
|
|
|
+ .image-container:empty::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
|
+ background-size: 200% 100%;
|
|
|
+ animation: loading 1.5s infinite;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+ @keyframes loading {
|
|
|
+ 0% {
|
|
|
+ background-position: 200% 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-position: -200% 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //swiper箭头颜色
|
|
|
+ .custom-swiper :deep(.swiper-button-prev),
|
|
|
+ .custom-swiper :deep(.swiper-button-next) {
|
|
|
+ color: white !important; //箭头颜色改为白色
|
|
|
+ }
|
|
|
+ .custom-swiper :deep(.swiper-button-prev):after,
|
|
|
+ .custom-swiper :deep(.swiper-button-next):after {
|
|
|
+ color: white !important; //确保箭头图标也是白色
|
|
|
+ }
|
|
|
+ //swiper轮播图 end---------------------------------------->
|
|
|
+ //轮播图 start---------------------------------------->
|
|
|
+ .nuxt-swiper {
|
|
|
+ width: 100%;
|
|
|
+ height: 330px;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
+ padding-left: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ font-family: Source Han Sans, Source Han Sans;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
|
|
|
+ background: rgba(0, 0, 0, .6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-carousel {
|
|
|
+ // 左右箭头按钮
|
|
|
+ .el-carousel__arrow--right :deep(.class-name),
|
|
|
+ .el-carousel__arrow--left :deep(.class-name) {
|
|
|
+ width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ }
|
|
|
+ //左右箭头图片
|
|
|
+ /deep/.el-icon svg {
|
|
|
+ height: 1em;
|
|
|
+ width: 1em;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.el-carousel__arrow {
|
|
|
+ border-radius: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.el-carousel__arrow i {
|
|
|
+ font-size: 68px !important;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__indicators {
|
|
|
+ // 指示器
|
|
|
+ left: unset;
|
|
|
+ transform: unset;
|
|
|
+ right: 41%;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__button {
|
|
|
+ // 指示器按钮
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: none;
|
|
|
+ opacity: 1;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ bottom: 30px;
|
|
|
+ }
|
|
|
+ /deep/ .is-active .el-carousel__button {
|
|
|
+ // 指示器激活按钮
|
|
|
+ background: #158d91;
|
|
|
+ }
|
|
|
+ /deep/.custom-indicators {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__indicators {
|
|
|
+ right: 3%;
|
|
|
+ bottom: 14%;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__arrow {
|
|
|
+ top: 50%;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__container {
|
|
|
+ height: 330px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //轮播图 end---------------------------------------->
|
|
|
+ //第一层 start---------------------------------------->
|
|
|
+ .index—layer-1 {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20px auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ .index—layer-1-left {
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px 0;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ .index-layer-1-middle {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ margin: 10px 0;
|
|
|
+ .tabtlt {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ outline: hidden;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ margin: 7px 0 18px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-self: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ a {
|
|
|
+ color: #337ab7;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #000;
|
|
|
+ background: #f3f3f3;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ div.intabtltbg {
|
|
|
+ background: url(public/index/current.gif) no-repeat center bottom !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coninfoitem {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0px auto;
|
|
|
+ >div {
|
|
|
+ &.coninfoitem_img {
|
|
|
+ height: 220px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ line-height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ a {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 440px;
|
|
|
+ height: 220px;
|
|
|
+ float: left;
|
|
|
+ margin-right: 11px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ font-size: 26px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top: 11px;
|
|
|
+ display: block;
|
|
|
+ text-indent: 2em;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box !important;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coninfoitem_title {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ color: #333;
|
|
|
+ display: block;
|
|
|
+ font-weight: normal;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-layer-1-right {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ padding: 10px;
|
|
|
+ .imgtlt {
|
|
|
+ width: 100%;
|
|
|
+ height: 43px;
|
|
|
+ border-bottom: 1px solid #e7e7e7;
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ width: auto;
|
|
|
+ float: left;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #333;
|
|
|
+ border-bottom: 2px solid #158d91;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con_img_list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ a {
|
|
|
+ width: 48%;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 200px;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .con_img_list_rgba {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 33px;
|
|
|
+ line-height: 33px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ z-index: 11;
|
|
|
+ background: rgba(0, 0, 0, .6);
|
|
|
+ display: block;
|
|
|
+ word-break: keep-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第一层 end---------------------------------------->
|
|
|
+ //第二层 start---------------------------------------->
|
|
|
+ .index—layer-2 {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20px auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .index—layer-2-left,
|
|
|
+ .index—layer-2-right {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 10px 0;
|
|
|
+ .index—layer-2-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ background: #fff;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: #158d91;
|
|
|
+ color: #fff;
|
|
|
+ a {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ width:auto;
|
|
|
+ float:left;
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ color: #808080;
|
|
|
+ font-size: 26px;
|
|
|
+ padding:0px 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 2px solid #158d91;
|
|
|
+ a {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-tabs2-top {
|
|
|
+ background: #f8f8f8;
|
|
|
+ padding: 20px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px dashed #ddd;
|
|
|
+ >a {
|
|
|
+ margin-right: 11px;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 330px;
|
|
|
+ height: 220px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ line-height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ a {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ font-size: 26px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top: 11px;
|
|
|
+ display: block;
|
|
|
+ text-indent: 2em;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box !important;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-tabs2-bottom {
|
|
|
+ padding: 20px;
|
|
|
+ margin: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ list-style-position: inside;
|
|
|
+ color: #333;
|
|
|
+ font-size: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第二层 end---------------------------------------->
|
|
|
+ //第三层 start---------------------------------------->
|
|
|
+ .index—layer-3 {
|
|
|
+ .index—layer-3-line {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 10px;
|
|
|
+ //选项卡类型
|
|
|
+ .index—layer-3-tabs-box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-top: 2px solid #158d91;
|
|
|
+ margin: 1%;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 10px 0;
|
|
|
+ .index—layer-3-tabs-box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: url(../public/index/current2.png) no-repeat center bottom;
|
|
|
+ }
|
|
|
+ width: 87px;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 55px;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-main {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ a {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //常规类型
|
|
|
+ .index—layer-3-news-box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-top: 2px solid #158d91;
|
|
|
+ margin: 1%;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 10px 0;
|
|
|
+ .index—layer-3-news-box-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ >div {
|
|
|
+ &.active {
|
|
|
+ background: url(../public/index/current2.png) no-repeat center bottom;
|
|
|
+ }
|
|
|
+ width:auto;
|
|
|
+ float:left;
|
|
|
+ height: 54px;
|
|
|
+ line-height: 55px;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-main {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ a {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span:nth-child(1) {
|
|
|
+ width: 70%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: right;
|
|
|
+ display: block;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index—layer-3-news-body-title {
|
|
|
+ overflow: hidden;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 20px 0 14px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px dashed #e1e1e1;
|
|
|
+ >div {
|
|
|
+ &.news-body-left {
|
|
|
+ float: left;
|
|
|
+ margin-right: 11px;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 330px;
|
|
|
+ height: 220px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.news-body-right {
|
|
|
+ width: 350px;
|
|
|
+ float: right;
|
|
|
+ >a {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ line-height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ a {
|
|
|
+ color: #333;
|
|
|
+ font-size: 26px;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top: 11px;
|
|
|
+ display: block;
|
|
|
+ text-indent: 2em;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box !important;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第三层 end---------------------------------------->
|
|
|
+ //第四层 start---------------------------------------->
|
|
|
+ .index-layer-4 {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: none;
|
|
|
+ .index-layer-4-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ a {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #1476bd;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #f00;
|
|
|
+ border: none;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .index-layer-4-body {
|
|
|
+ .post_nr {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin: 20px auto;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .name {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ b {
|
|
|
+ font-size: 17px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ height: auto;
|
|
|
+ line-height: 25px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000;
|
|
|
+ &.hfnr {
|
|
|
+ font-weight: bold;
|
|
|
+ span {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第四层 end---------------------------------------->
|
|
|
+}
|
|
|
+</style>
|
CaoGQ123