diff --git a/components/PhoneFooter.vue b/components/PhoneFooter.vue
new file mode 100644
index 0000000..7b9302f
--- /dev/null
+++ b/components/PhoneFooter.vue
@@ -0,0 +1,136 @@
+<template>
+    <!-- PC端布局 -->
+    <div>
+        <div class="flex-row">
+            <div class="fly1s" style="width: 100%;padding: 0px 20px;">
+                <div style="display: flex;justify-content: center;align-items: center;gap: 10px;">
+                    <div class="b1" @click="openT()">中央人民政府</div>
+                    <div class="b1">
+                        <select @change="getSelect" style="width: 100%;height: 41px;">
+                            <option value="0">省级共青团网站</option>
+                            <option v-for="item in s_list" :value="item.url">{{ item.title }}</option>
+                        </select>
+                        <img :src="`/img/index/bi.png`"
+                            style="position: absolute;top: 7px;right: 5px;height: 30px;width: 30px;cursor: pointer;"></img>
+                    </div>
+                </div>
+                <div style="display: flex;justify-content: center;align-items: center;gap: 10px;margin-top: 10px;">
+                    <div class="b1">
+                        <select @change="getSelect" style="width: 100%;height: 41px;">
+                            <option value="0">各地共青团网站</option>
+                            <option v-for="item in d_list" :value="item.url">{{ item.title }}</option>
+                        </select>
+                        <img :src="`/img/index/bi.png`"
+                            style="position: absolute;top: 7px;right: 5px;height: 30px;width: 30px;cursor: pointer;"></img>
+                    </div>
+                    <div class="b1">
+                        <select @change="getSelect" style="width: 100%;height: 41px;">
+                            <option value="0">其他</option>
+                            <option v-for="item in q_list" :value="item.url">{{ item.title }}</option>
+                        </select>
+                        <img :src="`/img/index/bi.png`"
+                            style="position: absolute;top: 7px;right: 5px;height: 30px;width: 30px;cursor: pointer;"></img>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div style="height: 1px;background-color:#EEEEEE;width: 100%;margin-top: 20px;"></div>
+        <div class="buttom_bg" style="padding:30px;">
+            <div>
+                <div>
+                    ©2021&nbsp;备案号：中国共产主义青年团洛阳市委员会　版权所有
+                </div>
+                <div style="display: flex;justify-content: space-between;align-items: center;margin: 15px 0px;">
+                    <div>
+                        <div>
+                            备案号：豫ICP备2021030615号-1
+                        </div>
+                        <div>
+                            Email：lytswbgs@163.com　
+                        </div>
+                        <div class="">电话：0379-63225071</div>
+                    </div>
+                    <div>
+                        <img :src="`/img/index/dzjg.png`" style="width: 50px;"/>
+                    </div>
+                </div>
+                <div class="">
+                    地址：河南省洛阳市洛龙区展览路20号（市总工会大楼）3楼　邮编：471000
+                </div>
+            </div>
+            <div style="display: flex;justify-content: space-between;align-items: center;gap: 15px;text-align: center;padding-top: 20px;">
+                
+                <div>
+                    <img class="" referrerpolicy="no-referrer" :src="`/img/wxcode.jpg`" />
+                    <p class="mt-[10px]">官方微信</p>
+                </div>
+                <div>
+                    <img class="" referrerpolicy="no-referrer" :src="`/img/dycode.jpg`" />
+                    <p class="mt-[10px]">官方抖音</p>
+                </div>
+                <div>
+                    <img class="" referrerpolicy="no-referrer" :src="`/img/wbcode.jpg`" />
+                    <p class="mt-[10px]">官方微博</p>
+                </div>
+
+                <div>
+                    <img class="" referrerpolicy="no-referrer" :src="`/img/bilicode.jpg`" />
+                    <p class="mt-[10px]">bilibili官方</p>
+                </div>
+
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from '~/store'
+
+const store = useStore();
+
+const getSelect = (event: Event) => {
+    const target = event.target as HTMLSelectElement;
+    var url = target.value;
+    if (url == '0') {
+        return;
+    } else {
+        window.open(url);
+    }
+}
+
+// 使用store中的分类数据
+const s_list = computed(() => store.s_list);
+const d_list = computed(() => store.d_list);
+const q_list = computed(() => store.q_list);
+const b_list = computed(() => store.b_list);
+
+onMounted(() => {
+    // 调用store中的方法获取友情链接数据
+    store.getFriendshipLinks();
+})
+
+const openT = () => {
+    window.open('https://www.gov.cn/');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/index.scss';
+.buttom_bg{
+    background-image: url('/img/index/rightcons.png');
+    background-size: 100% 100%;
+}
+.b1 {
+    width: 100%;
+    padding-left: 15px;
+    font-size: 14px;
+    color: #323232;
+    height: 45px;
+    line-height: 45px;
+    background: #FFFFFF;
+    border: 1px solid #EEEEEE;
+    cursor: pointer;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/components/PhoneHeader.vue b/components/PhoneHeader.vue
new file mode 100644
index 0000000..6a1f3da
--- /dev/null
+++ b/components/PhoneHeader.vue
@@ -0,0 +1,205 @@
+<template>
+    <div>
+        <div class="group_666" style="position: relative;height: 219px;">
+            <img :src="`/img/index/phone_top.png`" style="width: 100%;height: 100%;object-fit: cover;">
+            <img :src="`/img/index/dlogo1.png`"
+                style="width: 100px;height: 100px;position: absolute;left: 0;right: 0;top: 40px;margin: 0 auto;">
+            <img :src="`/img/xuan.png`" @click="show = true" style="width: 25px;height: 25px;position: absolute;right: 20px;top: 30px;">
+        </div>
+        <div v-if="show" style="z-index: 999;;background-color: rgba(0, 0, 0, 0.5);height: 100%;width: 100%;top: 0;position: fixed;"></div>
+        <div class="bgimg" v-if="show">
+            <img :src="`/img/guan.png`" @click="show = false" style="width: 25px;height: 25px;position: absolute;right: 20px;top: 30px;">
+            <div class="pc-nav">
+
+                <div class="pc-nav-item" @click="gotoList(1)">
+                    <img :src="crrent == 1 ? '/img/index/home1.png' : '/img/index/home.png'" alt=""></img>
+                    <span :class="['span', { 'active': crrent == 1 }]">官网首页</span>
+                    <img v-if="crrent == 1" src="/img/index/arrow.png" alt=""
+                        style="width: 9px;height: 12px;margin-left: 10px;">
+                </div>
+                <div class="pc-nav-item" @click="gotoList(2)">
+                    <img :src="crrent == 2 ? '/img/index/aboutus1.png' : '/img/index/aboutus.png'" alt=""></img>
+                    <span :class="['span', { 'active': crrent == 2 }]">组织机构</span>
+                    <img v-if="crrent == 2" src="/img/index/arrow.png" alt=""
+                        style="width: 9px;height: 12px;margin-left: 10px;">
+                </div>
+                <div class="pc-nav-item" @click="gotoList(3)">
+                    <img :src="crrent == 3 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
+                    <span :class="['span', { 'active': crrent == 3 }]">新闻动态</span>
+                    <img v-if="crrent == 3" src="/img/index/arrow.png" alt=""
+                        style="width: 9px;height: 12px;margin-left: 10px;">
+                </div>
+                <div class="pc-nav-item" @click="gotoList(4)">
+                    <img :src="crrent == 4 ? '/img/index/ly1.png' : '/img/index/ly.png'" alt=""></img>
+                    <span :class="['span', { 'active': crrent == 4 }]">青春洛阳</span>
+                    <img v-if="crrent == 4" src="/img/index/arrow.png" alt=""
+                        style="width: 9px;height: 12px;margin-left: 10px;">
+                </div>
+                <div class="pc-nav-item" @click="gotoList(5)">
+                    <img :src="crrent == 5 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
+                    <span :class="['span', { 'active': crrent == 5 }]">服务青年</span>
+                    <img v-if="crrent == 5" src="/img/index/arrow.png" alt=""
+                        style="width: 9px;height: 12px;margin-left: 10px;">
+                </div>
+                <div class="pc-nav-item" @click="gotoList(6)">
+                    <img :src="crrent == 6 ? '/img/index/message1.png' : '/img/index/message.png'" alt=""></img>
+                    <span :class="['span', { 'active': crrent == 6 }]">信息公开</span>
+                    <img v-if="crrent == 6" src="/img/index/arrow.png" alt=""
+                        style="width: 9px;height: 12px;margin-left: 10px;">
+                </div>
+                <div class="pc-nav-item" @click="gotoList(7)">
+                    <img :src="crrent == 7 ? '/img/index/tt1.png' : '/img/index/tt.png'" alt=""></img>
+                    <span :class="['span', { 'active': crrent == 7 }]">团团留言板</span>
+                    <img v-if="crrent == 7" src="/img/index/arrow.png" alt=""
+                        style="width: 9px;height: 12px;margin-left: 10px;">
+                </div>
+                <!-- <div class="pc-nav-item" @click="gotoList(8)">
+                <img :src="crrent==8?'/img/index/gx1.png':'/img/index/gx.png'" alt=""></img>
+                <span :class="['span',{'active': crrent==8}]">团关系转接</span>
+                <img v-if="crrent==8" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
+            </div> -->
+            </div>
+            <!-- <div class="goback" @click="goBack">返回首页</div> -->
+            <div style="margin-top: 80px;margin-left: 80px;">
+                <div class="box_1" id='assist-open'>无障碍阅读</div>
+                <!-- <div class="box_2" @click="openOldMode">{{ isOld ? '退出适老模式' : '进入适老模式' }}</div> -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineEmits, defineProps } from 'vue'
+import '@/assets/assist/assist-entry.js'
+const router = useRouter();
+const props = defineProps({
+    crrentNum: Number,
+    isOld: Boolean
+});
+const crrent = ref(0);
+const show=ref(false);
+const emit = defineEmits(['crrentTop'])
+const goBack = () => {
+    if (router.currentRoute.value.path != '/') {
+        window.open(`/`, '_blank');
+    }
+    emit('crrentTop', 0)
+}
+
+const openOldMode = () => {
+    emit('openOldMode')
+}
+
+const gotoList = (index: number) => {
+    console.log(router.currentRoute);
+    if (router.currentRoute.value.path != '/') {
+        window.open(`/`, '_blank');
+        localStorage.setItem('index_detail', index)
+    }
+    crrent.value = index
+    emit('crrentTop', index)
+
+}
+//更新当前索引值
+onUpdated(() => {
+    crrent.value = props.crrentNum;
+})
+
+onMounted(() => {
+    crrent.value = props.crrentNum;
+})
+</script>
+<style lang="scss" scoped>
+@import '@/assets/index.scss';
+
+.bgimg {
+    width: 270px;
+    height: 100vh;
+    background-image: url('/img/right.png');
+    background-size: 100% 100%;
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+
+    .line_h {
+        width: 220px;
+        height: 1px;
+        background: #FFFFFF;
+        opacity: 0.2;
+        margin-left: 40px;
+    }
+
+    .goback {
+        width: 72px;
+        height: 17px;
+        font-family: Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 18px;
+        color: #FFFFFF;
+        margin-left: 114px;
+        margin-top: 20px;
+        cursor: pointer;
+    }
+
+    .box_1 {
+        width: 150px;
+        height: 45px;
+        line-height: 45px;
+        background: #FFA234;
+        font-family: Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 18px;
+        text-align: center;
+        color: #FFFFFF;
+        cursor: pointer;
+    }
+
+    .box_2 {
+        width: 200px;
+        height: 58px;
+        line-height: 58px;
+        background: #4EB64B;
+        margin-top: 16px;
+        font-family: Microsoft YaHei UI;
+        font-weight: 400;
+        font-size: 18px;
+        color: #FFFFFF;
+        text-align: center;
+        cursor: pointer;
+    }
+}
+.pc-nav{
+    margin-left: 83px;
+    padding-top: 80px;
+}
+.pc-nav-item {
+    width: 100%;
+    // height: 18px;
+    font-family: Microsoft YaHei UI;
+    font-weight: bold;
+    font-size: 18px;
+    color: #FFFFFF;
+    text-shadow: 0px 1px 0px rgba(0, 0, 64, 0.4);
+    display: flex;
+    align-items: center;
+    margin-bottom: 50px;
+
+    &:hover {
+        cursor: pointer;
+        color: #FFA234;
+    }
+    img{
+        width: 40px;
+        height: 40px;
+    }
+    .span {
+        margin-left: 20px;
+        font-size: 15px;
+
+        &.active {
+            color: #FFA234;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 82b204e..ad2c893 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -252,11 +252,11 @@ const router = useRouter()
 onMounted(() => {
 	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
-	// if (coMobile) {
-	// 	router.push('/phone_index/')
-	// } else {
-	// 	router.push('/')
-	// }
+	if (coMobile) {
+		router.push('/phone_index/')
+	} else {
+		router.push('/')
+	}
 	// let indexs_to = localStorage.getItem('index_detail')
 	// if (indexs_to) {
 	// 	toswiper(Number(indexs_to));
diff --git a/pages/phone_index.vue b/pages/phone_index.vue
index bf787cc..6b1b8b2 100644
--- a/pages/phone_index.vue
+++ b/pages/phone_index.vue
@@ -1,414 +1,113 @@
 <template>
-	<div style="width: 100%;">
-		<!-- Swiper 容器 -->
-		<div class="group_666" style="position: relative;height: 219px;">
-			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
-				<swiper-slide>
-					<img :src="`/img/index/homebg.png`" style="width: 100%;height: 100%;object-fit: cover;">
-					<!-- <div style="position: absolute;bottom: 30px;right:30px;">
-						<img :src="`/img/index/hmouse.png`" alt="">
-					</div> -->
-				</swiper-slide>
-			</swiper>
-		</div>
-		<div class="group_2 flex-col">
-			<div class="box_2 flex-col">
-				<div class="group_3" >
-					<div class="group_4 flex-col">
-						<div class="fly" >
-							<div class="re_box">
-								<span class="w-[100%] text_14" style="margin-top: 0;">文章精选</span>
-								<div class="swiper">
-									<swiper class="w-[100%] h-[228px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
-										<swiper-slide v-for="(item,index) in xsImg" :key="index">
-											<div class="img_tits">{{ item.title }}</div>
-											<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
-										</swiper-slide>
-									</swiper>
-									<div class="swiper-pagination"></div>
-								</div>
-								<div style="width: 100%;">
-									<div class="re_box_item" v-for="(item,index) in xsList" :key="index" @click="gotoDetail(item.id)">
-										<div class="re_title">
-											<div class="dian"></div>
-											<span class="one-line-ellipsis" style="width:100%;">{{ item.title }}</span>
-										</div>
-										<div class="slices_rol"></div>
-									</div>
-								</div>
+	<div style="width: 100%;background-color: #F0F9FF;">
+		<PhoneHeader :crrentNum="1"></PhoneHeader>
+		<div class="w-full h-full" style="padding: 20px;">
+			<!-- 右边内容栏 -->
+			<div class="rightcon" id="homeid" @scroll="hmScroll">
+				<div class="h-auto home_con">
+					<div class="fly">
+						<div class="re_box re_box_left">
+							<div style="display: flex;justify-content: center;align-items: center;">
+								<div style="color: #41B2FE;">——</div>
+								<div><img class="re_top_img" :src="`/img/index/wzjx.png`"></img></div>
+								<div style="color: #41B2FE;">——</div>
+							</div>
+							<div class="swiper">
+								<swiper class="swiper_s" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
+									<swiper-slide v-for="(item, index) in xsImg" :key="index"
+										@click="openUrl(item.url)">
+										<!-- <div class="img_tits">{{ item.title }}</div> -->
+										<img :src="item.image" style="width: 100%;height: 235px;object-fit: cover;">
+									</swiper-slide>
+								</swiper>
+								<div class="swiper-pagination"></div>
 							</div>
 						</div>
 					</div>
-
+					<div class="fly1">
+						<div class="re_box">
+							<div class="re_box_item" v-for="(item, index) in zmList" :key="index"
+								@click="openUrl(item.id)">
+								<div class="re_title">
+									<div class="flex align-center">
+										<span class="one-line-ellipsis lx-span">{{ item.title }}</span>
+									</div>
+								</div>
+								<div v-if="zmList.length != index + 1"
+									style="width: 100%;height: 1px;background-color: #EEEEEE;margin: 15px 0px;"></div>
+							</div>
+							<div
+								style="margin: 20px 10px;text-align: center;background-color: #EEEEEE;height: 50px;width: 100%;line-height: 50px;">
+								查看更多 ></div>
+						</div>
+					</div>
 				</div>
-			</div>
-		</div>
 
-		<div style="background-color: #ffffff;">
-			<div class="box_7 flex-col">
-				<span class="text_24">国务院百事通</span>
-				<div class="dswper">
-					<swiper ref="swiper_exp" 
-						:slidesPerView="isMobile ? 1 : 2" 
-						loop 
-						:autoplay="false" 
-						:modules="modules"
-						:watchSlidesProgress="true" 
-						@swiper="onSwiperExp">
-						<swiper-slide v-for="(item, index) in bstList" :key="index" @click="openUrl(item.id)">
-							<div style="padding: 20px;">
-								<!-- <img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`"> -->
-								<div class="hy_my_home">
-									<div class="bst_con">
-										<img :src="`/img/index/bst${index+1}.png`" alt="" style="width: 34px;height: 34px;margin-top: 25px;margin-bottom: 15px;">
-										<div class="bsttitle">
-											{{ item.title }}
-										</div>
+			</div>
+			<div class="h-auto home_con1">
+				<div class="fly1s">
+					<div style="">
+						<div class="tab-scroll-container" style="padding: 15px 0px 5px 0px;">
+							<div class="dddccc">
+								<div v-for="(item, index) in listType" :key="index"
+									:class="listIndex == item.id ? 't2' : 't1'" @click="changeListIndex(item.id)">
+									<div>{{ item.name }}</div>
+									<div v-if="listIndex == item.id" class="t_line"></div>
+								</div>
+							</div>
+						</div>
+						<div v-for="(item, index) in jcList" :key="index">
+							<div class="re_box_item">
+								<div class="re_title">
+									<div class="flex align-center">
+										<div class="dian"></div>
+										<span class="one-line-ellipsis jc-span">{{ item.title }}</span>
 									</div>
 								</div>
 							</div>
-						</swiper-slide>
-					</swiper>
-					<div class="flex-row justify-center align-center w-full" style="gap: 10px;height:40px;">
-						<div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
-							:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
+							<div v-if="index != 6"
+								style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 15px 0;"></div>
 						</div>
+						<div
+							style="margin: 20px 10px;text-align: center;background-color: #EEEEEE;height: 50px;line-height: 50px;">
+							查看更多 ></div>
+					</div>
+				</div>
+			</div>
+			<div class="fly1s" style="margin-top: 10px;">
+				<div style="display: flex;justify-content: center;align-items: center;padding-top: 15px;">
+					<div>
+						<img :src="`/img/index/r.png`" alt=""></img>
+					</div>
+				</div>
+				<div class="qn" style="">
+					<div v-for="item in fwImg" @click="openWeb(item)">
+						<img :src="item.image" alt=""></img>
 					</div>
 				</div>
 			</div>
 		</div>
-		<div class="box_11 flex-col">
-			<div class="text-wrapper_10">
-				<span class="text_41">新闻动态</span>
-			</div>
-			<div v-for="item in newsList">
-				<div class="box_12 flex-row justify-center">
-				<!-- <img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
-					:src="item.image" style="cursor: pointer;;object-fit: cover;" /> -->
-				<div class="box_13 flex-col" @click="openUrl(item.id)">
-					<div class="text-group_6">
-						<div class="one-line-ellipsis news_title_home">
-							{{ item.title }}
-						</div>
-						<div class="two-line-ellipsis"
-							style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
-							{{ item.subtitle }}
-						</div>
-					</div>
-					<div class="group_22 flex-row">
-						<div class="section_6 flex-col"></div>
-						<span class="text_44">{{ item.cate.name }}</span>
-						<span class="text_45">{{ retTime(item.release_time_text) }}</span>
-					</div>
-				</div>
-			</div>
-			</div>
-			<!-- <div class="box_16 flex-row">
-				<div class="text-wrapper_12 flex-col">
-					<nuxt-link to="/phone_societyDutyNew/" class="text_52">
-						<span>查看更多</span>
-					</nuxt-link>
-				</div>
-			</div> -->
-		</div>
-		<div class="box_18 flex-col" style="overflow: hidden;">
-			<span class="text_53" >团团留言版</span>
-
-			<div class="numberTopBox" style="margin:0 auto;padding-bottom: 30px;">
-				<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
-					<div class="inputform">
-						<input v-model="formData.name" class="contactInput  mt-[15px] md:mt-[30px] w-full md:w-[700px]"
-							type="text" placeholder="输入您的姓名" />
-						<input v-model="formData.mobile"
-							class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
-							placeholder="请输入您的联系电话" />
-						<input v-model="formData.emil"
-							class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
-							placeholder="请输入您的邮箱" />
-					</div>
-					<div class="relative w-full" style="padding:0px 20px;">
-						<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息" rows="5"
-							maxlength="100" class="w-full"></textarea>
-						<button type="submit" class="contactBut">
-							{{ '提交' }}
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
-		
+		<PhoneFooter></PhoneFooter>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { nextTick, ref, onMounted, onUnmounted } from 'vue'
-import 'swiper/css'
-import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
-import ScrollReveal from 'scrollreveal';
-import { NNumberAnimation } from 'naive-ui'
-let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
-
-import "swiper/css";
-import "swiper/css/navigation";
-import "swiper/css/pagination";
-import 'swiper/css/effect-coverflow';
-import 'swiper/css/mousewheel'
-import 'swiper/css/grid'
-import 'swiper/css/effect-fade'
-import 'swiper/css/autoplay'
-import * as swiperAni from '@/assets/animate/animate.js'
 import $api from '@/service/webRequest'
-import { useI18n } from 'vue-i18n'
-import { useStore } from '~/store'
-const cdnUrl = useCdn()
-
-const { locale } = useI18n()
-
-const typeId = ref(1);
-
-interface NewsItem {
-	id: number;
-	title: string;
-	subtitle: string;
-	image: string;
-	cate: {
-		name: string;
-	};
-	release_time_text: string;
-}
-
-const newsList = ref<NewsItem[]>([])
-
-const openType = (type: number) => {
-	console.log(type);
-	typeId.value = type;
-}
-const bstList = ref([
-    {title:"中国共产主义青年团的性质是什么?",id:5969},
-    {title:"中国共产主义青年团的行动指南是什么?",id:5970},
-    {title:"为什么说共青团是中国共产党的助手和后备军?",id:5971},
-    {title:"中国共产主义青年团在新时代的基本任务是什么?",id:5972},
-    {title:"怎样加入中国共产主义青年团?",id:5973},
-    {title:"团员必须履行哪些义务?",id:5974},
-    {title:"团员享有哪些权利?",id:5975},
-    {title:"团旗、团徽和团歌分别是什么?",id:5976}
-])
-const videoShow = ref(false)
-
-let newsSwiper: any = null
-const onSwiperNews = (swiper: any) => {
-	newsSwiper = swiper
-}
-const swiperOptionsNews = {
-	autoplay: {
-		delay: 5000,
-		disableOnInteraction: false,
-	},
-	direction: 'horizontal' as const,
-	slidesPerView: 1,
-	speed: 500,
-	effect: 'fade',
-	loop: true,
-	modules: [EffectFade, Autoplay],
-}
-
-let vesSwiper: any = null
-const onSwiperExp = (swiper: any) => {
-	vesSwiper = swiper
-	// 监听幻灯片变化事件
-	swiper.on('slideChange', () => {
-		// 更新当前活动幻灯片索引
-		activeSlideIndex.value = swiper.realIndex % 3
-	})
-}
-const swiper_exp = ref();
-const activeSlideIndex = ref(0);
-// 表单数据
-const formData = reactive({
-	name: '',
-	mobile: '',
-	emil: '',
-	message: ''
-})
-const router = useRouter()
-// 新闻数据
-const isMobile = ref(false)
-
-const checkMobile = () => {
-	isMobile.value = window.innerWidth <= 768
-}
-
-onMounted(() => {
-	checkMobile()
-	window.addEventListener('resize', checkMobile)
-	getIndexNews();
-	nextTick(() => {
-		// 初始化 ScrollReveal
-		setTimeout(() => {
-			animate()
-		}, 500)
-	})
-	getxsImg();
-})
-
-onUnmounted(() => {
-	window.removeEventListener('resize', checkMobile)
-})
-
-const animate = () => {
-
-	const sr = ScrollReveal();
-	sr.reveal('.leftBoxTop', {
-		origin: "left",
-		distance: "1000px",
-		duration: 1300,
-		delay: 100,
-		opacity: 0,
-		scale: 0.9,
-		reset: true,
-		mobile: true,
-	})
-	sr.reveal('.leftBox', {
-		origin: "left",
-		distance: "1000px",
-		duration: 1300,
-		delay: 100,
-		opacity: 0,
-		scale: 0.9,
-		reset: true,
-		mobile: true,
-	})
-	sr.reveal('.rightBox', {
-		origin: "right",
-		distance: "1000px",
-		duration: 1300,
-		delay: 100,
-		opacity: 0,
-		scale: 0.9,
-		reset: true,
-		mobile: true,
-	})
-	sr.reveal('.topBox', {
-		origin: "top",
-		distance: "1000px",
-		duration: 1300,
-		delay: 100,
-		opacity: 0,
-		scale: 0.9,
-		reset: true,
-		mobile: true,
-	})
-	sr.reveal('.bottomBox', {
-		origin: "bottom",
-		distance: "1000px",
-		duration: 1300,
-		delay: 100,
-		opacity: 0,
-		scale: 0.9,
-		reset: true,
-		mobile: true,
-	})
-	sr.reveal('.numberTopBox', {
-		origin: "top",
-		distance: "1000px",
-		duration: 1300,
-		delay: 100,
-		opacity: 0,
-		scale: 0.9,
-		reset: false,
-		mobile: true,
-		beforeReveal: function (el: any) {
-			// numberAnimationInstRef.value.play()
-			// numberAnimationInstRefKH.value.play()
-			// numberAnimationInstRefJS.value.play()
-			// numberAnimationInstRefHY.value.play()
-		},
-	})
-	sr.reveal('.group_29 ', {
-		origin: "bottom",
-		distance: "500px",
-		opacity: 0,
-		scale: 0.9,
-		reset: false,
-		mobile: true,
-	})
-}
-// 表单提交方法
-const submitForm = () => {
-	console.log(formData);
-
-	// 这里可以添加表单验证逻辑
-	if (!formData.name) {
-		alert('请输入您的姓名')
-		return
-	}
-
-	if (!formData.mobile) {
-		alert('请输入您的手机号码')
-		return
-	}
-
-	if (!formData.message) {
-		alert('请输入您的留言内容')
-		return
-	}
-	$api.post("/api/home.leave_word/add", formData)
-		.then((res: any) => {
-			console.log(res)
-			if (res.status == 200) {
-				alert('留言成功')
-			} else {
-				alert('失败')
-			}
-			formData.name = '';
-			formData.mobile = '';
-			formData.emil = '';
-			formData.message = '';
-		})
-		.catch((err) => {
-			console.dir(err)
-		})
-	// 重置表单
-	// formData.name = ''
-	// formData.mobile = ''
-	// formData.content = ''
-}
-const getIndexNews = () => {
-	$api.get("/api/home.news/index?page=1&limit=3")
-		.then((res: any) => {
-			console.log(res)
-			newsList.value = res.data.data.list
-		})
-		.catch((err) => {
-			console.dir(err)
-		})
-}
-
-const retTime = (dateTimeStr: string) => {
-	return dateTimeStr.split(' ')[0]; // 分割后取日期部分 
-}
-const openUrl = (id: number) => {
-	window.open(`/phone_info/${id}`)
-}
-
-const gotoDetail = (id: number) => {
-	window.open(`/phone_info/${id}`)
-}
+import { defineEmits } from 'vue'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import emitter from '@/plugins/emitter'
+import 'swiper/css'
+import 'swiper/css/autoplay'
+import "swiper/css/pagination";
+import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade, Mousewheel } from "swiper/modules";
+const inputSearch = ref('');
 
 const xsImg = ref([]);
-const xsList = ref([]);
-//逐梦新声轮播图
-const getxsImg = async () => {
-	const res = await $api.get('/api/index/images?page=1&limit=3')
-	xsImg.value = res.data.data.list;
-	const ress = await $api.get(`/api/home.news/index?cate_id=99&page=1&limit=4`)
-	xsList.value = ress.data.data.list;
-}
-let ImgsSwiper: any = null
-const onSwiperImgs = (swiper: any) => {
-	ImgsSwiper = swiper
-}
+const listType = ref([]);
+const listIndex = ref(0);
+const detailId = ref(null);
+
+const emit = defineEmits(['toSwpe'])
 const swiperOptionsimgs = {
 	autoplay: {
 		delay: 5000,
@@ -419,395 +118,450 @@ const swiperOptionsimgs = {
 	speed: 500,
 	// effect: 'fade',
 	loop: true,
-	modules: [Autoplay,Pagination],
+	modules: [Autoplay, Pagination],
 	pagination: {
-		el:'.swiper-pagination'
+		el: '.swiper-pagination'
 	},
 }
+const hmScroll = () => {
+	let home = document.getElementById('homeid');
+	if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
+		emit('toSwpe', 2);
+	}
+	if (home.scrollTop == 0) {
+		emit('toSwpe', 0);
+	}
+}
+const toSearch = () => {
+	// emit('toSwpe',9);
+	// emitter.emit('inputSea', {
+	//     keywords:inputSearch.value,
+	//     type: 1,
+	// });
+	window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
+}
+
+const openWeb = (item) => {
+	//out 外链   in内部
+	if (item.type == 'out') {
+		window.open(item.url);
+	} else {
+		window.open(`/info/${item.url}?type=1`)
+	}
+	console.log(item)
+}
+
+// 查看更多
+const toMore = (index: number) => {
+	emit('toSwpe', index);
+}
+const openUrl = (id: number) => {
+	window.open(`/info/${id}?type=1`)
+}
+//跳转详情
+// const gotoDetail = (id: number) => {
+//      detailId.value = {
+//         id: id,
+//         type: '1'
+//     };
+//     localStorage.setItem('detailId', JSON.stringify(detailId.value));
+//     emit('toSwpe',6)
+//     emitter.emit('detailId', detailId.value);
+// }
+let newsSwiper: any = null
+const onSwiperImgs = (swiper: any) => {
+	newsSwiper = swiper
+	// swiper.on('slideChange', () => {
+	// 	// 更新当前活动幻灯片索引
+
+	// })
+}
+//文章精选
+const zmList = ref([]);
+
+//国务院百事通
+const ptList = ref([]);
+const jcList = ref([]);
+const qcList = ref([]);
+const mtList = ref([]);
+
+//新闻分类
+const getNewstypeList = async () => {
+	let ptggid = null, jcdtid = null, qclyid = null, mtjjid = null;    // 分类id 
+	const res = await $api.get('/api/home.news/cate?home=1')
+	var list = res.data.data.list;
+	listIndex.value = list[0].id;
+	listType.value = list;
+	list.map((item: any) => {
+		if (item.name == '通知公告') {
+			ptggid = item.id;
+		}
+		// if (item.name == '基层动态') {
+		//     jcdtid = item.id;
+		// }
+
+		// if (item.name == '青春洛阳') {
+		//     qclyid = item.id;
+		// }
+		// if (item.name == '媒体聚焦') {
+		//     mtjjid = item.id;
+		// }
+	});
+	//去除平台公告
+	listType.value = listType.value.filter((item: any) => item.name != '平台公告');
+	console.log(listType.value);
+	changeListIndex(listIndex.value);
+	// xsId.value = listType.value[0].id;
+	//逐梦新声列表 //万众瞩目列表
+	// const ress = await $api.get(`/api/home.news/index?cate_id=${xsId.value}&page=1&limit=4`)
+	// xsList.value = ress.data.data.list;
+
+	//精选文章
+	const ress1 = await $api.get(`/api/home.news/index?page=1&limit=5&fine=1`)
+	zmList.value = ress1.data.data.list;
+
+	// //平台公告
+	const ress2 = await $api.get(`/api/home.news/index?cate_id=${ptggid}&page=1&limit=5`)
+	ptList.value = ress2.data.data.list;
+	// //基层动态
+	// const ress3 = await $api.get(`/api/home.news/index?cate_id=${jcdtid}&page=1&limit=5`)
+	// jcList.value = ress3.data.data.list;
+	// //青春洛阳
+	// const ress4 = await $api.get(`/api/home.news/index?cate_id=${qclyid}&page=1&limit=5`)
+	// qcList.value = ress4.data.data.list;
+	// //媒体聚焦
+	// const ress5 = await $api.get(`/api/home.news/index?cate_id=${mtjjid}&page=1&limit=5`)
+	// mtList.value = ress5.data.data.list;
+}
+
+//逐梦新声轮播图
+const getxsImg = async () => {
+	const res = await $api.get('/api/index/images?page=1&limit=9&status=1')
+	xsImg.value = res.data.data.list;
+}
+const fwImg = ref([]);
+//服务青年轮播图
+const getFwImg = async () => {
+	const res = await $api.get('/api/index/images?page=1&limit=9&status=2')
+	fwImg.value = res.data.data.list;
+}
+onMounted(() => {
+	window.addEventListener('scroll', hmScroll);
+	getxsImg();
+	getFwImg();
+	getNewstypeList();
+})
+const changeListIndex = async (id: number) => {
+	listIndex.value = id;
+	const ress2 = await $api.get(`/api/home.news/index?cate_id=${id}&page=1&limit=7`)
+	jcList.value = ress2.data.data.list;
+}
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/animate/animate.min.css";
-@import "@/assets/index.scss";
+@import '@/assets/index.scss';
 
-.text_7, .text_8 {
-	text-align: center;
-	width: 100%;
-}
 
-.text_9, .text_11 {
-	font-size: 16px !important;
-	text-align: center;
-	padding-right:0px
-}
+/* pc端样式 */
 
-.text_12 {
-	font-size: 14px !important;
-	line-height: 1.6;
-	padding: 0 15px;
-	width: 100%;
-}
-.text-wrapper_2{
-	margin: 0 auto;
-}
-.leftBox, .rightBox {
-	width: 100% !important;
-	margin: 10px 0 !important;
-}
+.swiper {
 
-.content_box {
-	width: 100% !important;
-	height: 300px !important;
-	position: relative !important;
-	right: 0 !important;
-	bottom: 0 !important;
-}
+	.swiper-pagination {
+		text-align: right;
+		padding-right: 10px;
+		bottom: 0;
+		height: 38px;
+		line-height: 38px;
+		--swiper-pagination-color: #ffffff;
+		--swiper-pagination-bullet-inactive-color: rgb(255, 255, 255, 0.5);
+		--swiper-pagination-bullet-inactive-opacity: 1
+			/* 两种都可以 */
+	}
 
-.hy_my_home {
-	width: 100% !important;
-	// height: auto !important;
-	height: 150px;
-	background-image: url('/img/index/bstbg.png');
-	background-size: 100% 100%;
-	background-repeat: no-repeat;
-	.bst_con{
+	.img_tits {
+		font-family: Microsoft YaHei UI;
+		font-weight: bold;
+		font-size: 18px;
+		color: #FFFEFE;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		background: rgba(0, 0, 0, 0.44);
 		width: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		flex-direction: column;
-		.bsttitle{
-			width: 80%;
-			font-family: Microsoft YaHei UI;
-			font-weight: bold;
-			font-size: 18px;
-			color: #FFFFFF;
-			text-align: center;
-		}
-		&:hover{
-			.bsttitle{
-				color: #FFE7B8;
-			}
-				
-		}
-	}
-}
-.section_1{
-	height: 323px;
-    width: 100%;
-}
-.image-wrapper_2{
-	border-radius: 10px;
-}
-.contactForm {
-	.inputform {
-		flex-direction: column !important;
-		width: 100% !important;
-		padding:20px 20px 10px 20px;
-	}
-
-	.contactInput {
-		width: 100% !important;
-		margin: 10px 0 !important;
-		height: 40px !important;
-		font-size: 14px !important;
-		border-radius: 6px!important;
-		background: #FFFFFF;
+		height: 38px;
+		line-height: 38px;
 		padding-left: 10px;
 	}
-
-	#myTextarea {
-		width: 100% !important;
-		height: 120px !important;
-		font-size: 14px !important;
-		border-radius: 6px!important;
-		padding: 10px;
-	}
 }
 
-.box_12, .box_14 {
-	flex-direction: column !important;
-}
-.box_3{
-	width: 100%;
-}
-.box_7,.box_13,.box_18{
-	height: 100%;
-}
 
-.image_7, .image_8, .image_9 {
-	width: 100% !important;
-}
-.text_24{
-	margin-top: 30px;
-}
-.group_22{
-	width: 100%;
-	margin: 27px 0 23px 15px;
-}
-.news_my_home {
-	width: 100% !important;
-	margin: 10px 0 !important;
-	padding: 15px !important;
-}
-.contactBut {
-	width: 108px;
-	border-radius: 4px 4px 4px 4px;
-	position: absolute;
-	bottom: 20px;
-	right: 30px;
-	height: 36px;
-	background-color: #3B90DF;
-	border: none;
-	font-weight: 400;
-	font-size: 16px;
-	line-height: 28px;
-	color: #FFFFFF;
-}
-.group_29 {
-	grid-template-columns: repeat(2, 1fr) !important;
-	gap: 10px !important;
-	padding: 0 15px !important;
-}
 
-.bottom_imgs {
-	width: 100% !important;
-	height: auto !important;
-}
-
-.pop {
-	position: fixed;
-	top: 0;
-	left: 0;
+.rightcon {
 	width: 100%;
 	height: 100%;
-	background: rgba(0, 0, 0, .8);
-	z-index: 200;
-	display: none;
+	background-color: #ffffff;
 }
 
-.popCont {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
+.home_con {
+	.fly {
+		width: 100%;
 
-.pop_video_close {
-	border-radius: 50%;
-	position: absolute;
-	top: -73px;
-	right: 0px;
-	width: 40px;
-	height: 40px;
-	background: var(--close) no-repeat 0 0;
-	background-size: 100% auto;
-	border: 6px solid #979797;
-}
-
-.pop_video_cont {
-	width: 600px;
-	border: 6px solid #979797;
-	background: #000;
-}
-
-.pop_video_cont video {
-	display: block;
-	width: 100%;
-	height: 100%;
-}
-.text_16 {
-	font-size: 14px;
-	line-height: 24px;
-}
-.group_10{
-	width: 91%;
-	margin-left:15px;
-	margin-top: 0px;
-}
-.text_18 {
-	font-size: 15px !important;
-}
-
-.text_19 {
-	font-size: 13px !important;
-}
-
-.group_7 {
-	padding: 10px !important;
-	margin: 0px 0 !important;
-	height: 100%!important;
-}
-.text-group_3{
-	height: auto;
-}
-.section_2sa{
-	height: 700px;
-}
-.image-wrapper_5 {
-	width: 40px !important;
-	height: 40px !important;
-	margin-top: 0px;
-	margin-right: 20px !important;
-}
-.text-group_3_3{
-	height: auto;
-}
-.text-group_3, .text-group_3_3 {
-	flex: 1 !important;
-}
-
-.contactBut {
-	width: 100% !important;
-	height: 40px !important;
-	font-size: 16px !important;
-	margin-top: 10px !important;
-	position: relative !important;
-	right: 0 !important;
-	bottom: 0 !important;
-}
-
-// 移除所有hover效果
-.hy_my_home:hover,
-.news_my_home:hover .news_title_home {
-	transform: none !important;
-	color: inherit !important;
-}
-.text-group_1,.group_7,.group_6s{
-	width: 100%;
-}
-.text_19{
-	width: 100%;
-	line-height: 25px;
-	height: auto;
-}
-.box_12{
-	height: 100%;
-	margin-top: 0px;
-}
-.group_6 {
-	width: 100%;
-}
-.box_13{
-	width: 100%;
-	margin:0px;
-}
-.section_2s{
-	height: 710px;
-}
-.box_5{
-	height: auto;
-}
-.text-group_2{
-	width: 55%;
-	height: auto;
-}
-.text_17,.text_16{
-	width: auto;
-}
-.box_6{
-	padding:0px 15px 15px 15px;
-	height: 100%;
-}
-.image-wrapper_5{
-	width: 30%;
-}
-.text-group_3{
-	width: 70%;
-}
-.group_10s {
-	width: 100%;
-	margin: 0px;
-}
-.dswper{
-	margin-top: 10px;
-}
-.text-wrapper_10{
-	margin-top: 30px;
-}
-@media (max-width: 768px) {
-	.group_3 {
-		height: auto;
-		padding: 20px;
-		background-size:auto;
-	}
-	
-}
-.fly{
-	.re_box{
+		// padding-left: 80px;
+		.swiper_s {
 			width: 100%;
+		}
+	}
+
+	.fly1 {
+		width: 100%;
+		margin-top: 20px;
+	}
+
+	.re_box {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		// gap: 10px;
+		position: relative;
+
+		.re_top_img {
+			padding: 20px;
+		}
+
+		.more_j {
+			font-family: Microsoft YaHei UI;
+			font-weight: 400;
+			font-size: 16px;
+			color: #999999;
 			display: flex;
-			flex-wrap: wrap;
-			justify-content: flex-start;
-			align-content: flex-start;
-			// gap: 10px;
-			background: #FFFFFF;
-			position: relative;
-			border-radius: 12px;
-			.re_box_item{
-			    width: 100%;
-			    height: 40px;
-				padding-bottom: 5px;
-			    border-bottom: 1px dashed #dedede; 
-			    box-sizing: border-box;
-			    display: flex;
-			    justify-content: space-between;
-			    align-items: center;
-			    .re_title{
-			        width: 100%;
-			        font-family: Microsoft YaHei;
-			        font-weight: 400;
-			        font-size: 16px;
-			        color: #323232;
-			        display: flex;
-			        align-items: center;
-			        .dian{
-			            width: 5px;
-			            height: 5px;
-			            background: #3B90DF;
-			            border-radius: 50%;
-			            margin-right: 10px;
-			        }
-			    }
-			    // &:hover{
-			    //     background-image: url('/img/index/listhmbg.png');
-			    //     background-size: 100% 100%;
-			    //     cursor: pointer;
-			    //     .slices_rol{
-			    //         width: 10px;
-			    //         height: 88px;
-			    //         background: #FAA828;
-			    //         position: absolute;
-			    //         right: 0;
-			    //     }
-			    // }
-			}
-			.swiper{
+			align-items: center;
+			cursor: pointer;
+		}
+
+		.re_top_img_line {
+			width: 100%;
+			height: 2px;
+			background: #EEEEEE;
+			margin-left: 20px;
+		}
+
+	}
+
+	.re_box_left {
+		border-radius: 12px 0px 0px 12px;
+	}
+}
+
+.re_box_item {
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0px 10px;
+	margin-top: 15px;
+
+	.re_title {
+		width: 100%;
+		font-family: Microsoft YaHei;
+		font-weight: 400;
+		font-size: 16px;
+		color: #323232;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		cursor: pointer;
+	}
+
+	// &:hover{
+	//     background-image: url('/img/index/listhmbg.png');
+	//     background-size: 100% 100%;
+	//     cursor: pointer;
+	//     .slices_rol{
+	//         width: 10px;
+	//         height: 88px;
+	//         background: #FAA828;
+	//         position: absolute;
+	//         right: 0;
+	//     }
+	// }
+}
+
+.home_con1 {
+	width: 100%;
+	box-sizing: border-box;
+	background-color: #FFFEFE;
+	// margin: 0 auto;
+	margin-top: 10px;
+	padding-bottom: 1px;
+}
+
+.fly1s {
+	background-color: #ffffff;
+	width: 100%;
+}
+
+.home_con2 {
+	width: 100%;
+	box-sizing: border-box;
+	// margin: 0 auto;
+	// margin-top: 10px;
+	flex-wrap: wrap;
+
+
+
+	.re_boxs {
+		width: 100%;
+		height: 406px;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		align-content: flex-start;
+		// gap: 10px;
+		background: #FFFFFF;
+		position: relative;
+		border-radius: 12px;
+
+		.re_top_img {
+			padding: 20px;
+		}
+
+		.more_j {
+			font-family: Microsoft YaHei UI;
+			font-weight: 400;
+			font-size: 16px;
+			color: #999999;
+			display: flex;
+			align-items: center;
+			cursor: pointer;
+		}
+
+		.re_box_item {
+			width: 100%;
+			padding: 20px 20px;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.re_title {
 				width: 100%;
-				border-radius: 10px;
-				.swiper-pagination{
-					text-align: right;
-					padding-right: 10px;
-					bottom: 0;
-					height: 38px;
-					line-height: 38px;
-					--swiper-pagination-color: #bf1712;/* 两种都可以 */
-				}
-				.img_tits{
-					font-family: Microsoft YaHei UI;
-					font-weight: bold;
-					font-size: 18px;
-					color: #FFFEFE;
-					position: absolute;
-					bottom: 0;
-					left: 0;
-					background: rgba(0, 0, 0, .2);
-					width: 100%;
-					height: 38px;
-					line-height: 38px;
-					padding-left: 10px;
-				}
+				font-family: Microsoft YaHei;
+				font-weight: 400;
+				font-size: 16px;
+				color: #323232;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				cursor: pointer;
+
+
 			}
-		} 
+
+			// &:hover{
+			//     background-image: url('/img/index/listhmbg.png');
+			//     background-size: 100% 100%;
+			//     cursor: pointer;
+			//     .slices_rol{
+			//         width: 10px;
+			//         height: 88px;
+			//         background: #FAA828;
+			//         position: absolute;
+			//         right: 0;
+			//     }
+			// }
+		}
+	}
+}
+
+.dian {
+	width: 10px;
+	height: 10px;
+	background: #3B90DF;
+	border-radius: 50%;
+	margin-right: 15px;
+}
+
+.t1 {
+	font-weight: bold;
+	font-family: PingFang SC;
+	color: #999999;
+	font-size: 14px;
+	cursor: pointer;
+	position: relative;
+	white-space: nowrap;
+	min-width: max-content;
+	padding: 8px 12px;
+	flex-shrink: 0;
+}
+
+.t1:hover {
+	color: #2C8AE0;
+}
+
+.t2 {
+	font-weight: bold;
+	font-family: PingFang SC;
+	color: #2C8AE0;
+	font-size: 14px;
+	cursor: pointer;
+	position: relative;
+	white-space: nowrap;
+	min-width: max-content;
+	padding: 8px 12px;
+	flex-shrink: 0;
+}
+
+.t_line {
+	width: 40%;
+	height: 3px;
+	background-color: #3E92DE;
+	margin: 0 auto;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -5px;
+}
+
+.qn {
+	padding: 10px;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 10px;
+	margin-top: 20px;
+}
+
+.qn div {
+	cursor: pointer;
+}
+
+.tz-span {}
+
+.jc-span {
+	width: 100%;
+}
+
+.lx-span {}
+
+/* 滚动容器样式 */
+.tab-scroll-container {
+	width: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+	/* 隐藏滚动条但保持滚动功能 */
+	scrollbar-width: none;
+	/* Firefox */
+	-ms-overflow-style: none;
+	/* IE and Edge */
+}
+
+.tab-scroll-container::-webkit-scrollbar {
+	display: none;
+	/* Chrome, Safari and Opera */
+}
+
+.dddccc {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	min-width: max-content;
 }
 </style>
diff --git a/public/img/guan.png b/public/img/guan.png
new file mode 100644
index 0000000..5a53da4
Binary files /dev/null and b/public/img/guan.png differ
diff --git a/public/img/index/phone_top.png b/public/img/index/phone_top.png
new file mode 100644
index 0000000..9ef4b42
Binary files /dev/null and b/public/img/index/phone_top.png differ
diff --git a/public/img/right.png b/public/img/right.png
new file mode 100644
index 0000000..3ad12ed
Binary files /dev/null and b/public/img/right.png differ
diff --git a/public/img/xuan.png b/public/img/xuan.png
new file mode 100644
index 0000000..1e17c5c
Binary files /dev/null and b/public/img/xuan.png differ