|
|
@@ -0,0 +1,1333 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!--样式1-->
|
|
|
+ <div class="headLineStyle"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式2-->
|
|
|
+ <div class="headLineStyle"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 2">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式3-->
|
|
|
+ <div class="headLineStyle"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 3">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>npm run dev
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式4-->
|
|
|
+ <div class="headLineStyle headLineContent4"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 4">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式5-->
|
|
|
+ <div class="headLineStyle headLineContent5"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 5">
|
|
|
+ <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
|
|
|
+ :class="{ 'active': activeTab == index }" v-if="activeTab == index">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式6-->
|
|
|
+ <div class="headLineStyle headLineContent5"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 6">
|
|
|
+ <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
|
|
|
+ :class="{ 'active': activeTab == index }" v-if="activeTab == index">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574933485163.png" />
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式7-->
|
|
|
+ <div class="headLineStyle headLineContent7"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 7">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
|
|
|
+
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式8-->
|
|
|
+ <div class="headLineStyle headLineContent7"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 8">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
|
|
|
+
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式9-->
|
|
|
+ <div class="headLineStyle headLineContent7"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 9">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式10-->
|
|
|
+ <div class="headLineStyle headLineContent10"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 10">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式11-->
|
|
|
+ <div class="headLineStyle headLineContent11"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 11">
|
|
|
+ <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
|
|
|
+ :class="{ 'active': activeTab == index }" v-if="activeTab == index">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式12-->
|
|
|
+ <div class="headLineStyle headLineContent11"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 12">
|
|
|
+ <div class="headLineTitle" v-for="(item, index) in titleList1" :key="index"
|
|
|
+ :class="{ 'active': activeTab == index }" v-if="activeTab == index">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574881313564.png" />
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式13-->
|
|
|
+ <div class="headLineStyle headLineContent7"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 13">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式14-->
|
|
|
+ <div class="headLineStyle headLineContent7"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 14">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式15-->
|
|
|
+ <div class="headLineStyle headLineContent7"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 15">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式16-->
|
|
|
+ <div class="headLineStyle headLineContent10"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 16">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式17-->
|
|
|
+ <div class="headLineStyle headLineContent11"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 17">
|
|
|
+ <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
|
|
|
+ :class="{ 'active': activeTab == index }" v-if="activeTab == index">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式18-->
|
|
|
+ <div class="headLineStyle headLineContent11"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 18">
|
|
|
+ <div class="headLineTitle" v-for="(item, index) in titleList1" :key="index"
|
|
|
+ :class="{ 'active': activeTab == index }" v-if="activeTab == index">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式19-->
|
|
|
+ <div class="headLineStyle headLineContent19"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 19">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574830547503.png" />
|
|
|
+
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式20 -->
|
|
|
+ <div class="headLineStyle headLineContent20"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 20">
|
|
|
+
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
|
|
|
+
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式21 -->
|
|
|
+ <div class="headLineStyle headLineContent20"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 21">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式22 -->
|
|
|
+ <div class="headLineStyle headLineContent20"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 22">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式23 -->
|
|
|
+ <div class="headLineStyle headLineContent23"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 23">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式24-->
|
|
|
+ <div class="headLineStyle headLineContent24"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 24">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
|
|
|
+ <div class="headLineTitle" v-for="(item, index) in titleList" :key="index"
|
|
|
+ :class="{ 'active': activeTab == index }" v-if="activeTab == index">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 2" :class="{ 'active': activeTab == 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式25-->
|
|
|
+ <div class="headLineStyle headLineContent24"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 25">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574798253005.png" />
|
|
|
+ <div class="headLineTitle" v-for="(item, index) in titleList1" :key="index"
|
|
|
+ :class="{ 'active': activeTab == index }" v-if="activeTab == index">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div @mouseenter="activeTab = 0" :class="{ 'active': activeTab == 0 }"></div>
|
|
|
+ <div @mouseenter="activeTab = 1" :class="{ 'active': activeTab == 1 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式26-->
|
|
|
+ <div class="headLineStyle1_skin26"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 26">
|
|
|
+ <div class="headTip">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="headLineContentBox" ref="contentBox">
|
|
|
+ <div class="headLineSlider">
|
|
|
+ <div class="headLineTitleBox" v-for="i in 3" :key="index">
|
|
|
+ <div class="headLineTop">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineBottom">
|
|
|
+ <div v-for="(item, index) in titleList" :key="index">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headLineIcon">
|
|
|
+ <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
|
|
|
+ <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
|
|
|
+ <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式27-->
|
|
|
+ <div class="headLineStyle1_skin26"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 27">
|
|
|
+ <div class="headTip">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
|
|
|
+ </div>
|
|
|
+ <div class="headLineContentBox" ref="contentBox">
|
|
|
+ <div class="headLineSlider">
|
|
|
+ <div class="headLineTitleBox" v-for="i in 3" :key="index">
|
|
|
+ <div class="headLineTop">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineBottom">
|
|
|
+ <div v-for="(item, index) in titleList1" :key="index">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headLineIcon">
|
|
|
+ <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
|
|
|
+ <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
|
|
|
+ <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式28-->
|
|
|
+ <div class="headLineStyle1_skin26"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 28">
|
|
|
+ <div class="headTip">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
|
|
|
+ </div>
|
|
|
+ <div class="headLineContentBox" ref="contentBox">
|
|
|
+ <div class="headLineSlider">
|
|
|
+ <div class="headLineTitleBox" v-for="i in 3" :key="index">
|
|
|
+ <div class="headLineTop">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineBottom">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headLineIcon">
|
|
|
+ <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
|
|
|
+ <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
|
|
|
+ <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式29-->
|
|
|
+ <div class="headLineStyle1_skin26"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 29">
|
|
|
+ <div class="headTip">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
|
|
|
+ </div>
|
|
|
+ <div class="headLineContentBox" ref="contentBox">
|
|
|
+ <div class="headLineSlider">
|
|
|
+ <div class="headLineTitleBox" v-for="i in 3" :key="index">
|
|
|
+ <div class="headLineMiddle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headLineIcon">
|
|
|
+ <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
|
|
|
+ <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
|
|
|
+ <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式30-->
|
|
|
+ <div class="headLineStyle1_skin26 headLineStyle1_skin30"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 30">
|
|
|
+ <div class="headTip">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766574740690954.png">
|
|
|
+ </div>
|
|
|
+ <div class="headLineContentBox" ref="contentBox">
|
|
|
+ <div class="headLineSlider">
|
|
|
+ <div class="headLineTitleBox" v-for="i in 3" :key="index">
|
|
|
+ <div class="headLineMiddle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headLineIcon">
|
|
|
+ <div @mouseover="setActive(0)" :class="{ active: activeIndex === 0 }"></div>
|
|
|
+ <div @mouseover="setActive(1)" :class="{ active: activeIndex === 1 }"></div>
|
|
|
+ <div @mouseover="setActive(2)" :class="{ active: activeIndex === 2 }"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式31 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin31"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 31">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式32 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin32"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 32">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式33 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin33"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 33">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式34 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin34"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 34">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式35 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin35"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 35">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式36 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin36"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 36">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式37 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin37"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 37">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式38 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin38"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 38">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式39 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin39"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 39">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式40 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin40"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 40">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式41 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin41"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 41">
|
|
|
+
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766576345343133.png">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 样式42 -->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin42"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 42">
|
|
|
+
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766576345343133.png">
|
|
|
+
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式43-->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin43"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 43">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251224/1766576504667797.png" />
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式44-->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin44"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 44">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766622190772928.png"/>
|
|
|
+
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式45-->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin45"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 45">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式46-->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin46"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 46">
|
|
|
+
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766622765452955.png"/>
|
|
|
+
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式47-->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin47"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 47">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766623103788150.png" />
|
|
|
+
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式48-->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin48"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 48">
|
|
|
+ <div class="headLineTitle">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766622765452955.png" />
|
|
|
+
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--样式49-->
|
|
|
+ <div class="headLineStyle headLineStyle1_skin49"
|
|
|
+ v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 49">
|
|
|
+ <img src="http://192.168.1.234:19000/pre/image/png/20251225/1766623378213254.png" />
|
|
|
+ <div class="headLineTitle">
|
|
|
+ 深入推进周边命运共同体建设 以人工智能引领科研范式变革
|
|
|
+ </div>
|
|
|
+ <div class="headLineContent">
|
|
|
+ <div>深刻理解新形势下中国周边工作的理念与行动</div>
|
|
|
+ <div>构建周边命运共同体 携手开创亚洲新未来</div>
|
|
|
+ <div>抢抓人工智能发展的历史性机遇</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ dataSort: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeIndex: 0,//皮肤2新增
|
|
|
+ activeTab: 0,//皮肤1
|
|
|
+ titleList: [
|
|
|
+ {
|
|
|
+ title: '深入推进周边命运共同体建设 以人工智能引领科研范式变革',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '深刻理解新形势下中国周边工作的理念与行动',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '构建周边命运共同体 携手开创亚洲新未来',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ titleList1: [
|
|
|
+ {
|
|
|
+ title: '深入推进周边命运共同体建设 以人工智能引领科研范式变革',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '深刻理解新形势下中国周边工作的理念与行动',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setActive(index) {
|
|
|
+ this.activeIndex = index;
|
|
|
+ this.$refs.contentBox.scrollTo({
|
|
|
+ top: index * 100,
|
|
|
+ behavior: 'smooth'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+@themeColor1: #9C130A;
|
|
|
+
|
|
|
+//基本样式
|
|
|
+.headLineStyle {
|
|
|
+ width: 1200px;
|
|
|
+ height: 140px;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30px 100px 30px 100px;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #9C130A;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ div {
|
|
|
+ margin-right: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式4
|
|
|
+.headLineContent4 {
|
|
|
+ line-height: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+//样式5
|
|
|
+.headLineContent5 {
|
|
|
+ .headLineContent {
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: 360px;
|
|
|
+ height: 5px;
|
|
|
+ background: #ccdae0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: @themeColor1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式7
|
|
|
+.headLineContent7 {
|
|
|
+ .headLineTitle {
|
|
|
+ img {
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式10
|
|
|
+.headLineContent10 {
|
|
|
+ line-height: 80px;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ img {
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式11
|
|
|
+.headLineContent11 {
|
|
|
+ .headLineTitle {
|
|
|
+ img {
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: 360px;
|
|
|
+ height: 5px;
|
|
|
+ background: #ccdae0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: @themeColor1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式19
|
|
|
+.headLineContent19 {
|
|
|
+ padding: 35px 50px 35px 50px;
|
|
|
+ line-height: 140px;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ width: 1100px;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 140px;
|
|
|
+ background-color: #f6fcff;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式20
|
|
|
+.headLineContent20 {
|
|
|
+ width: 1196px;
|
|
|
+ height: 136px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ position: relative;
|
|
|
+ padding-top: 32px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 63px;
|
|
|
+ height: 32px;
|
|
|
+ position: absolute;
|
|
|
+ top: 34px;
|
|
|
+ left: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式23
|
|
|
+.headLineContent23 {
|
|
|
+ width: 1196px;
|
|
|
+ height: 136px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ position: relative;
|
|
|
+ padding: 50px 100px 50px 100px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 63px;
|
|
|
+ height: 32px;
|
|
|
+ position: absolute;
|
|
|
+ top: 53px;
|
|
|
+ left: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式24
|
|
|
+.headLineContent24 {
|
|
|
+ width: 1196px;
|
|
|
+ height: 136px;
|
|
|
+ background-color: #fafafa;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 63px;
|
|
|
+ height: 32px;
|
|
|
+ position: absolute;
|
|
|
+ top: 34px;
|
|
|
+ left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: 360px;
|
|
|
+ height: 5px;
|
|
|
+ background: #ccdae0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: @themeColor1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式26 样式27
|
|
|
+.headLineStyle1_skin26 {
|
|
|
+ border: 1px solid #E4E4E4;
|
|
|
+ width: 1200px;
|
|
|
+ height: 140px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 32px 15px 32px 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .headLineContentBox {
|
|
|
+ width: 1000px;
|
|
|
+ height: 70px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ scrollbar-width: none;
|
|
|
+
|
|
|
+ .headLineSlider {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column; // 改为垂直方向
|
|
|
+ width: 100%;
|
|
|
+ height: 210px; // 3个titleBox，每个70px高
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineTitleBox {
|
|
|
+ text-align: center;
|
|
|
+ height: 70px; // 明确设置高度
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ flex-shrink: 0; // 防止收缩
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .headLineTop {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #9C130A;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineMiddle {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #9C130A;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineBottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: 32%;
|
|
|
+ margin-right: 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333333;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineIcon {
|
|
|
+ div {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background: #EDEDED;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background 0.3s ease;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #9C130A;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #9C130A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式30
|
|
|
+.headLineStyle1_skin30 {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+//样式31
|
|
|
+.headLineStyle1_skin31 {
|
|
|
+ width: 1200px;
|
|
|
+ height: 138px;
|
|
|
+ border-top: 1px solid #9C130A;
|
|
|
+ border-bottom: 1px solid #9C130A;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #9C130A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式32
|
|
|
+.headLineStyle1_skin32 {
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #9C130A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式33
|
|
|
+.headLineStyle1_skin33 {
|
|
|
+ width: 1200px;
|
|
|
+ height: 138px;
|
|
|
+ border-top: 1px solid #333333;
|
|
|
+ border-bottom: 1px solid #333333;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式34
|
|
|
+.headLineStyle1_skin34 {
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式35
|
|
|
+.headLineStyle1_skin35 {
|
|
|
+ width: 1200px;
|
|
|
+ height: 138px;
|
|
|
+ border-bottom: 1px solid #333333;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式36
|
|
|
+.headLineStyle1_skin36 {
|
|
|
+ width: 1200px;
|
|
|
+ height: 138px;
|
|
|
+ border-bottom: 1px solid #333333;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式37
|
|
|
+.headLineStyle1_skin37 {
|
|
|
+ width: 1200px;
|
|
|
+ height: 138px;
|
|
|
+ border-top: 1px solid #333333;
|
|
|
+ border-bottom: 1px solid #333333;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式38
|
|
|
+.headLineStyle1_skin38 {
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式39
|
|
|
+.headLineStyle1_skin39 {
|
|
|
+ width: 1200px;
|
|
|
+ height: 138px;
|
|
|
+ border-bottom: 1px solid #333333;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式40
|
|
|
+.headLineStyle1_skin40 {
|
|
|
+ width: 1200px;
|
|
|
+ height: 138px;
|
|
|
+ border-bottom: 1px solid #333333;
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式41
|
|
|
+.headLineStyle1_skin41 {
|
|
|
+ width: 1196px;
|
|
|
+ height: 130px;
|
|
|
+ background-color: #f9fafb;
|
|
|
+ border-top: 2px solid #9C130A;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 5px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ top: -6px;
|
|
|
+ left: -10px;
|
|
|
+ width: 100px;
|
|
|
+ height: 47px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #9C130A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//样式42
|
|
|
+.headLineStyle1_skin42 {
|
|
|
+ width: 1196px;
|
|
|
+ height: 130px;
|
|
|
+ background-color: #f9fafb;
|
|
|
+ border-top: 2px solid #333333;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 5px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ top: -6px;
|
|
|
+ left: -10px;
|
|
|
+ width: 100px;
|
|
|
+ height: 47px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//样式43
|
|
|
+.headLineStyle1_skin43 {
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ left: 93px;
|
|
|
+ width: 46px;
|
|
|
+ height: 76px;
|
|
|
+ }
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+//样式44
|
|
|
+.headLineStyle1_skin44 {
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 27px;
|
|
|
+ left: 50px;
|
|
|
+ width: 92px;
|
|
|
+ height: 82px;
|
|
|
+ }
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+//样式45
|
|
|
+.headLineStyle1_skin45 {
|
|
|
+ background-color: #fafafa;width:100%;height:100%;
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+//样式46
|
|
|
+.headLineStyle1_skin46 {
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ right: 0px;
|
|
|
+ width: 70px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #9C130A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//样式47
|
|
|
+.headLineStyle1_skin47 {
|
|
|
+ padding:30px 120px;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 36px;
|
|
|
+ left: 30px;
|
|
|
+ width: 64px;
|
|
|
+ height: 71px;
|
|
|
+ }
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #9C130A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//样式48
|
|
|
+.headLineStyle1_skin48 {
|
|
|
+
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+//样式49
|
|
|
+.headLineStyle1_skin49 {
|
|
|
+ padding:30px 130px;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 18px;
|
|
|
+ left: 90px;
|
|
|
+ width: 54px;
|
|
|
+ height: 54px;
|
|
|
+ }
|
|
|
+ .headLineTitle {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .headLineContent {
|
|
|
+ div {
|
|
|
+ color: #9C130A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
