admin_home/src/views/template/style/components/headLine/1200x140/6.vue

<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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766019286582583.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766019286582583.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766019286582583.png" />
                深入推进周边命运共同体建设 以人工智能引领科研范式变革
            </div>
            <div class="headLineContent">
                <div>深刻理解新形势下中国周边工作的理念与行动</div>
            </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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766019286582583.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766019286582583.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766019286582583.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766026791458071.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766026791458071.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766026791458071.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766026791458071.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766026791458071.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766026791458071.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027258906505.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027282851131.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027282851131.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027282851131.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027282851131.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027282851131.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027282851131.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027294575187.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027294575187.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027294575187.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027294575187.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027294575187.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027320372637.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027320372637.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027333360652.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027343341830.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027670138761.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027686415326.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="https://img.bjzxtw.org.cn/master/image/png/20251218/176602771556896.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="https://img.bjzxtw.org.cn/master/image/png/20251218/1766027730101829.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: #16407a;

//基本样式
.headLineStyle {
    width: 1196px;
    height: 136px;
    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: #16407a;
        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: #16407a;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .headLineMiddle {
            font-size: 30px;
            color: #16407a;
            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: #16407a;
            }

            &:hover {
                background: #16407a;
            }
        }
    }
}

//样式30
.headLineStyle1_skin30 {
    border: none;
}

//样式31
.headLineStyle1_skin31 {
    width: 1200px;
    height: 138px;
    border-top: 1px solid #16407a;
    border-bottom: 1px solid #16407a;

    .headLineTitle {
        margin-bottom: 15px;
    }

    .headLineContent {
        div {
            color: #16407a;
        }
    }
}

//样式32
.headLineStyle1_skin32 {
    .headLineTitle {
        margin-bottom: 15px;
    }

    .headLineContent {
        div {
            color: #16407a;
        }
    }
}

//样式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 #16407a;
    position: relative;
    margin-top: 5px;

    img {
        position: absolute;
        top: -6px;
        left: -10px;
        width: 100px;
        height: 47px;
    }

    .headLineTitle {
        margin-bottom: 20px;
    }

    .headLineContent {
        div {
            color: #16407a;
        }
    }
}

//样式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;
    .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: #16407a;
        }
    }
}
//样式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: #16407a;
        }
    }
}
//样式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: #16407a;
        }
    }
}
</style>