1.首页修改
							
								
								
									
										6
									
								
								app.vue
									
									
									
									
									
								
							
							
						
						@ -69,5 +69,11 @@ body {
 | 
			
		||||
  background: linear-gradient(180deg, #e52e71, #ff8a00);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
select{
 | 
			
		||||
  -webkit-appearance:none;
 | 
			
		||||
  box-shadow: none;
 | 
			
		||||
-moz-appearance:none;
 | 
			
		||||
 | 
			
		||||
appearance:none;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,64 @@
 | 
			
		||||
  <!-- PC端布局 -->
 | 
			
		||||
  <div class="group_30 flex-col pc-footer">
 | 
			
		||||
    <div class="text-wrapper_13 flex-row">
 | 
			
		||||
      <span class="text_66">友情链接:</span>
 | 
			
		||||
      <div class="fly1s" style="margin-top: 40px;">
 | 
			
		||||
        <div style="display: flex;justify-content: space-between;align-items: center;gap: 30px;">
 | 
			
		||||
          <div class="b1">中央人民政府</div>
 | 
			
		||||
          <div style="display: flex;">
 | 
			
		||||
            <div class="b1" style="padding: 0;">
 | 
			
		||||
              <select style="width: 100%;height: 41px;padding-left:15px;">
 | 
			
		||||
                <option value="1">省级共青团网站</option>
 | 
			
		||||
                <option value="2">省级共青团网站</option>
 | 
			
		||||
                <option value="3">省级共青团网站</option>
 | 
			
		||||
                <option value="4">省级共青团网站</option>
 | 
			
		||||
              </select>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div>
 | 
			
		||||
              <img :src="`/img/index/bi.png`" style="height: 45px;width: 45px;cursor: pointer;"></img>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div style="display: flex;">
 | 
			
		||||
            <div class="b1" style="padding: 0;">
 | 
			
		||||
              <select style="width: 100%;height: 41px;padding-left:15px;">
 | 
			
		||||
                <option value="1">各地共青团网站</option>
 | 
			
		||||
                <option value="2">各地共青团网站</option>
 | 
			
		||||
                <option value="3">各地共青团网站</option>
 | 
			
		||||
                <option value="4">各地共青团网站</option>
 | 
			
		||||
              </select>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div>
 | 
			
		||||
              <img :src="`/img/index/bi.png`" style="height: 45px;width: 45px;cursor: pointer;"></img>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div style="display: flex;">
 | 
			
		||||
            <div class="b1" style="padding: 0;">
 | 
			
		||||
              <select style="width: 100%;height: 41px;padding-left:15px;">
 | 
			
		||||
                <option value="1">其他</option>
 | 
			
		||||
                <option value="2">其他</option>
 | 
			
		||||
                <option value="3">其他</option>
 | 
			
		||||
                <option value="4">其他</option>
 | 
			
		||||
              </select>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div>
 | 
			
		||||
              <img :src="`/img/index/bi.png`" style="height: 45px;width: 45px;cursor: pointer;"></img>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
          <div style="display: flex;">
 | 
			
		||||
            <div class="b1" style="padding: 0;">
 | 
			
		||||
              <select style="width: 100%;height: 41px;padding-left:15px;">
 | 
			
		||||
                <option value="1">办公入口</option>
 | 
			
		||||
                <option value="2">办公入口</option>
 | 
			
		||||
                <option value="3">办公入口</option>
 | 
			
		||||
                <option value="4">办公入口</option>
 | 
			
		||||
              </select>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div>
 | 
			
		||||
              <img :src="`/img/index/bi.png`" style="height: 45px;width: 45px;cursor: pointer;"></img>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <!-- <span class="text_66">友情链接:</span>
 | 
			
		||||
      <NuxtLink to="https://www.gov.cn/" target="_blank">
 | 
			
		||||
        <span class="text_67">中央人民政府门户网站</span>
 | 
			
		||||
      </NuxtLink>
 | 
			
		||||
@ -17,7 +74,7 @@
 | 
			
		||||
      </NuxtLink>
 | 
			
		||||
      <NuxtLink to="https://www.ly.gov.cn/" target="_blank">
 | 
			
		||||
        <span class="text_67">洛阳市人民政府网站</span>
 | 
			
		||||
      </NuxtLink>
 | 
			
		||||
      </NuxtLink> -->
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="group_31 flex-col"></div>
 | 
			
		||||
    <div class="group_32 flex-row justify-between">
 | 
			
		||||
@ -34,27 +91,22 @@
 | 
			
		||||
        </span>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="flex-row align-center text-center">
 | 
			
		||||
        <img class="image_29" referrerpolicy="no-referrer"
 | 
			
		||||
        :src="`/img/index/dzjg.png`" />
 | 
			
		||||
        <img class="image_29" referrerpolicy="no-referrer" :src="`/img/index/dzjg.png`" />
 | 
			
		||||
        <div class="ml-[20px]">
 | 
			
		||||
          <img class="image_30" referrerpolicy="no-referrer"
 | 
			
		||||
        :src="`/img/wxcode.jpg`" />
 | 
			
		||||
          <img class="image_30" referrerpolicy="no-referrer" :src="`/img/wxcode.jpg`" />
 | 
			
		||||
          <p class="mt-[10px]">官方微信</p>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="ml-[20px]">
 | 
			
		||||
          <img class="image_30" referrerpolicy="no-referrer"
 | 
			
		||||
        :src="`/img/dycode.jpg`" />
 | 
			
		||||
          <img class="image_30" referrerpolicy="no-referrer" :src="`/img/dycode.jpg`" />
 | 
			
		||||
          <p class="mt-[10px]">官方抖音</p>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="ml-[20px]">
 | 
			
		||||
        <img class="image_30" referrerpolicy="no-referrer"
 | 
			
		||||
        :src="`/img/wbcode.jpg`" />
 | 
			
		||||
          <img class="image_30" referrerpolicy="no-referrer" :src="`/img/wbcode.jpg`" />
 | 
			
		||||
          <p class="mt-[10px]">官方微博</p>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
        <div class="ml-[20px]">
 | 
			
		||||
        <img class="image_30" referrerpolicy="no-referrer"
 | 
			
		||||
        :src="`/img/bilicode.jpg`" />
 | 
			
		||||
          <img class="image_30" referrerpolicy="no-referrer" :src="`/img/bilicode.jpg`" />
 | 
			
		||||
          <p class="mt-[10px]">bilibili官方账号</p>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
@ -91,6 +143,7 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
const selectValue = ref(false);
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
@ -160,4 +213,16 @@
 | 
			
		||||
    height: 150px;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.b1 {
 | 
			
		||||
  padding-left: 15px;
 | 
			
		||||
  font-size: 18px;
 | 
			
		||||
  color: #323232;
 | 
			
		||||
  height: 45px;
 | 
			
		||||
  line-height: 45px;
 | 
			
		||||
  width: 200px;
 | 
			
		||||
  background: #FFFFFF;
 | 
			
		||||
  border: 1px solid #EEEEEE;
 | 
			
		||||
  cursor: pointer;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
@ -19,20 +19,35 @@
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="pc-nav-item" @click="gotoList(4)">
 | 
			
		||||
                <img :src="crrent==4?'/img/index/message1.png':'/img/index/message.png'" alt=""></img>
 | 
			
		||||
                <span :class="['span',{'active': crrent==4}]">信息公开</span>
 | 
			
		||||
                <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/baike1.png':'/img/index/baike.png'" alt=""></img>
 | 
			
		||||
                <span :class="['span',{'active': crrent==5}]">团务百科</span>
 | 
			
		||||
                <img :src="crrent==5?'/img/index/ly1.png':'/img/index/ly.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="line_h"></div>
 | 
			
		||||
        <div class="goback" @click="goBack">返回首页</div>
 | 
			
		||||
        <!-- <div class="goback" @click="goBack">返回首页</div> -->
 | 
			
		||||
        <div style="margin-top: 50px;margin-left: 40px;">
 | 
			
		||||
            <div class="box_1" id='assist-open'>无障碍阅读</div>
 | 
			
		||||
            <div class="box_2" @click="openOldMode">{{ isOld ? '退出适老模式' : '进入适老模式' }}</div>
 | 
			
		||||
            <!-- <div class="box_2" @click="openOldMode">{{ isOld ? '退出适老模式' : '进入适老模式' }}</div> -->
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
@ -89,7 +104,7 @@ onMounted(() => {
 | 
			
		||||
    z-index: 1000;
 | 
			
		||||
    .pc-nav {
 | 
			
		||||
        margin-left: 60px;
 | 
			
		||||
        margin-top: 250px;
 | 
			
		||||
        margin-top: 115px;
 | 
			
		||||
        text-align: center;
 | 
			
		||||
    }
 | 
			
		||||
    .pc-nav-item {
 | 
			
		||||
 | 
			
		||||
@ -6,12 +6,12 @@
 | 
			
		||||
        <!-- 右边内容栏 -->
 | 
			
		||||
        <div class="rightcon" id="homeid" @scroll="hmScroll">
 | 
			
		||||
            <div class="flex top_search ">
 | 
			
		||||
            <div style="width: 572px;margin-left: 415px;">
 | 
			
		||||
                <div style="width: 350px;">
 | 
			
		||||
                    <img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="inputform">
 | 
			
		||||
                <input v-model="inputSearch" class="contactInput w-full md:w-[337px]"
 | 
			
		||||
							type="text" placeholder="请输入搜索关键字" />
 | 
			
		||||
                    <input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
 | 
			
		||||
                        placeholder="请输入搜索关键字" />
 | 
			
		||||
                    <div class="search_rinput" @click="toSearch">
 | 
			
		||||
                        <img src="/img/index/hmsearch.png" alt="">
 | 
			
		||||
                    </div>
 | 
			
		||||
@ -20,10 +20,10 @@
 | 
			
		||||
 | 
			
		||||
            <div class="flex h-auto home_con">
 | 
			
		||||
                <div class="fly">
 | 
			
		||||
                <div class="re_box" >
 | 
			
		||||
                    <div class="re_box re_box_left">
 | 
			
		||||
                        <div class="swiper" style="border-radius: 12px 0  0 12px;">
 | 
			
		||||
                            <swiper class="swiper_s" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
 | 
			
		||||
                            <swiper-slide v-for="(item,index) in xsImg" :key="index" @click="openUrl(item.url)">
 | 
			
		||||
                                <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: 100%;object-fit: cover;">
 | 
			
		||||
                                </swiper-slide>
 | 
			
		||||
@ -33,22 +33,25 @@
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="fly1">
 | 
			
		||||
                <div class="re_box" style="border-width: 1px;border-style: solid; border-image: linear-gradient(270deg, #CC131A, #FFFFFF) 10 10;border-radius:0;">
 | 
			
		||||
                    <div class="re_box">
 | 
			
		||||
                        <div class="flex justify-between align-center w-full ">
 | 
			
		||||
                            <img class="re_top_img" :src="`/img/index/wzjx.png`"></img>
 | 
			
		||||
                            <div class="pr-[20px] more_j" @click="toMore">
 | 
			
		||||
                            <span>查看更多</span>
 | 
			
		||||
                            <img src="/img/index/more_j.png" alt="" style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                                <span>更多</span>
 | 
			
		||||
                                <img src="/img/index/more_j.png" alt=""
 | 
			
		||||
                                    style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div class="re_top_img_line"></div>
 | 
			
		||||
                    <div class="re_box_item" v-for="(item,index) in zmList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
 | 
			
		||||
                        <div class="re_box_item" v-for="(item, index) in zmList" :key="index" style="margin-top: 10px;"
 | 
			
		||||
                            @click="openUrl(item.id)">
 | 
			
		||||
                            <div class="re_title">
 | 
			
		||||
                                <div class="flex align-center">
 | 
			
		||||
                                    <div class="dian"></div>
 | 
			
		||||
                                    <span class="one-line-ellipsis" style="width:400px;">{{ item.title }}</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            <span class="one-line-ellipsis" style="color: #999999;">{{ item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                                <span class="one-line-ellipsis" style="color: #999999;">{{
 | 
			
		||||
                                    item.release_time_text.slice(5, 10) }}</span>
 | 
			
		||||
                            </div>
 | 
			
		||||
 | 
			
		||||
                            <!-- <div class="slices_rol"></div> -->
 | 
			
		||||
@ -56,22 +59,121 @@
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="h-auto home_con1" style="margin-top: 30px;">
 | 
			
		||||
                <div class="fly1s" style="display: flex;gap: 20px;">
 | 
			
		||||
                    <div style="width: 65%;background-color: #ffffff;">
 | 
			
		||||
                        <div style="padding: 15px;display: flex;justify-content: space-between;align-items: center;">
 | 
			
		||||
                            <div style=" overflow-x: auto; ">
 | 
			
		||||
                                <div
 | 
			
		||||
                                    style="display: flex;align-items: center;gap: 55px;padding-bottom: 10px;">
 | 
			
		||||
                                    <div v-for="(item, index) in listType" :key="index" class="t2">
 | 
			
		||||
                                        <div>{{ item.name }}</div>
 | 
			
		||||
                                        <!-- <div class="t_line"></div> -->
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div class="pr-[20px]" style="display: flex;align-items: center;">
 | 
			
		||||
                                <span style="color: #999999;">更多</span>
 | 
			
		||||
                                <img src="/img/index/more_j.png" alt=""
 | 
			
		||||
                                    style="width: 8px;height: 13px;margin-left: 5px;"></img>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div style="width: 100%;height: 1px;background-color: #EEEEEE;"></div>
 | 
			
		||||
                        <div v-for="(item, index) in 7" :key="index">
 | 
			
		||||
                            <div class="re_box_item" style="margin-top: 10px;">
 | 
			
		||||
                                <div class="re_title">
 | 
			
		||||
                                    <div class="flex align-center">
 | 
			
		||||
                                        <div class="dian"></div>
 | 
			
		||||
                                        <span class="one-line-ellipsis"
 | 
			
		||||
                                            style="width:400px;">习近平:推进中国式现代化要继续把制造业搞好</span>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                    <span class="one-line-ellipsis" style="color: #999999;">06-25</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div v-if="index != 6"
 | 
			
		||||
                                style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 0 auto;"></div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div style="width: 35%;background-color: #ffffff;">
 | 
			
		||||
                        <div style="width: 100%;height: 5px;background-color: #338CDE;"></div>
 | 
			
		||||
                        <div style="display: flex;justify-content: space-between;align-items: center;">
 | 
			
		||||
                            <div style="display: flex;align-items: center;gap: 10px;padding: 15px;">
 | 
			
		||||
                                <div>
 | 
			
		||||
                                    <img src="/img/index/gg.png" alt="" style="width: 40px;"></img>
 | 
			
		||||
                                </div>
 | 
			
		||||
                                <div style="font-family: PingFang SC;font-weight: bold;font-size: 22px;color: #323232;">
 | 
			
		||||
                                    通知公告
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div class="pr-[20px]" style="display: flex;align-items: center;">
 | 
			
		||||
                                <span style="color: #999999;">更多</span>
 | 
			
		||||
                                <img src="/img/index/more_j.png" alt=""
 | 
			
		||||
                                    style="width: 8px;height: 13px;margin-left: 5px;"></img>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div v-for="(item, index) in ptList" :key="index">
 | 
			
		||||
                            <div class="re_box_item" style="margin-top: 10px;">
 | 
			
		||||
                                <div class="re_title">
 | 
			
		||||
                                    <div class="flex align-center">
 | 
			
		||||
                                        <div class="dian"></div>
 | 
			
		||||
                                        <span class="one-line-ellipsis" style="width:270px;">{{ item.title }}</span>
 | 
			
		||||
                                    </div>
 | 
			
		||||
                                    <span class="one-line-ellipsis" style="color: #999999;">
 | 
			
		||||
                                        {{ item.release_time_text.slice(5, 10) }}
 | 
			
		||||
                                    </span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div v-if="index != 6"
 | 
			
		||||
                                style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 0 auto;"></div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div class="fly1s" style="margin-top: 40px;">
 | 
			
		||||
                    <div style="display: flex;justify-content: center;align-items: center;padding-bottom: 15px;">
 | 
			
		||||
                        <div>
 | 
			
		||||
                            <img :src="`/img/index/r.png`" alt=""></img>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px;">
 | 
			
		||||
                        <div>
 | 
			
		||||
                            <img :src="`/img/code.png`" alt=""></img>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div>
 | 
			
		||||
                            <img :src="`/img/code.png`" alt=""></img>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div>
 | 
			
		||||
                            <img :src="`/img/code.png`" alt=""></img>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div>
 | 
			
		||||
                            <img :src="`/img/code.png`" alt=""></img>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div>
 | 
			
		||||
                            <img :src="`/img/code.png`" alt=""></img>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        <div>
 | 
			
		||||
                            <img :src="`/img/code.png`" alt=""></img>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
 | 
			
		||||
        <div class="h-auto home_con1"> 
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <!-- <div class="h-auto home_con1">
 | 
			
		||||
                <img :src="`/img/index/gwybst.png`" style="margin: 0 auto;" alt=""></img>
 | 
			
		||||
                <div class="flex flex-wrap" style="margin-top: 30px;">
 | 
			
		||||
                <div class="bstbg" v-for="item,i in bstList" :key="i" @click="openUrl(item.id)">
 | 
			
		||||
                    <div class="bst_con" >
 | 
			
		||||
                        <img :src="`/img/index/bst${i+1}.png`" alt="" style="width: 34px;height: 34px;margin-top: 25px;margin-bottom: 15px;">
 | 
			
		||||
                    <div class="bstbg" v-for="item, i in bstList" :key="i" @click="openUrl(item.id)">
 | 
			
		||||
                        <div class="bst_con">
 | 
			
		||||
                            <img :src="`/img/index/bst${i + 1}.png`" alt=""
 | 
			
		||||
                                style="width: 34px;height: 34px;margin-top: 25px;margin-bottom: 15px;">
 | 
			
		||||
                            <div class="bsttitle">
 | 
			
		||||
                                {{ item.title }}
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
        </div>
 | 
			
		||||
            </div> -->
 | 
			
		||||
 | 
			
		||||
        <div class="flex h-auto home_con2">
 | 
			
		||||
            <!-- <div class="flex h-auto home_con2">
 | 
			
		||||
                <div class="fly1s">
 | 
			
		||||
                    <div class="re_boxs">
 | 
			
		||||
                        <div class="flex justify-between align-center w-full ">
 | 
			
		||||
@ -81,20 +183,20 @@
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div class="pr-[20px] more_j" @click="toMore">
 | 
			
		||||
                                <span>查看更多</span>
 | 
			
		||||
                            <img src="/img/index/more_j.png" alt="" style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                                <img src="/img/index/more_j.png" alt=""
 | 
			
		||||
                                    style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    <!-- <div class="re_top_img_line"></div> -->
 | 
			
		||||
                    <div class="re_box_item" v-for="(item,index) in ptList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
 | 
			
		||||
                        <div class="re_box_item" v-for="(item, index) in ptList" :key="index" style="margin-top: 10px;"
 | 
			
		||||
                            @click="openUrl(item.id)">
 | 
			
		||||
                            <div class="re_title">
 | 
			
		||||
                                <div class="flex align-center">
 | 
			
		||||
                                    <div class="dian"></div>
 | 
			
		||||
                                    <span class="one-line-ellipsis" style="width:400px;">{{ item.title }}</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            <span class="one-line-ellipsis" style="color: #999999;">{{ item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                                <span class="one-line-ellipsis" style="color: #999999;">{{
 | 
			
		||||
                                    item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        
 | 
			
		||||
                        <!-- <div class="slices_rol"></div> -->
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
@ -107,20 +209,20 @@
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div class="pr-[20px] more_j" @click="toMore">
 | 
			
		||||
                                <span>查看更多</span>
 | 
			
		||||
                            <img src="/img/index/more_j.png" alt="" style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                                <img src="/img/index/more_j.png" alt=""
 | 
			
		||||
                                    style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    <!-- <div class="re_top_img_line"></div> -->
 | 
			
		||||
                    <div class="re_box_item" v-for="(item,index) in jcList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
 | 
			
		||||
                        <div class="re_box_item" v-for="(item, index) in jcList" :key="index" style="margin-top: 10px;"
 | 
			
		||||
                            @click="openUrl(item.id)">
 | 
			
		||||
                            <div class="re_title">
 | 
			
		||||
                                <div class="flex align-center">
 | 
			
		||||
                                    <div class="dian"></div>
 | 
			
		||||
                                    <span class="one-line-ellipsis" style="width:400px;">{{ item.title }}</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            <span class="one-line-ellipsis" style="color: #999999;">{{ item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                                <span class="one-line-ellipsis" style="color: #999999;">{{
 | 
			
		||||
                                    item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        
 | 
			
		||||
                        <!-- <div class="slices_rol"></div> -->
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
@ -133,20 +235,21 @@
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div class="pr-[20px] more_j" @click="toMore">
 | 
			
		||||
                                <span>查看更多</span>
 | 
			
		||||
                            <img src="/img/index/more_j.png" alt="" style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                                <img src="/img/index/more_j.png" alt=""
 | 
			
		||||
                                    style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    <!-- <div class="re_top_img_line"></div> -->
 | 
			
		||||
                    <div class="re_box_item" v-for="(item,index) in qcList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
 | 
			
		||||
                        <div class="re_box_item" v-for="(item, index) in qcList" :key="index" style="margin-top: 10px;"
 | 
			
		||||
                            @click="openUrl(item.id)">
 | 
			
		||||
                            <div class="re_title">
 | 
			
		||||
                                <div class="flex align-center">
 | 
			
		||||
                                    <div class="dian"></div>
 | 
			
		||||
                                    <span class="one-line-ellipsis" style="width:400px;">{{ item.title }}</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            <span class="one-line-ellipsis" style="color: #999999;">{{ item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                                <span class="one-line-ellipsis" style="color: #999999;">{{
 | 
			
		||||
                                    item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                            </div>
 | 
			
		||||
 | 
			
		||||
                        <!-- <div class="slices_rol"></div> -->
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
@ -159,24 +262,24 @@
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <div class="pr-[20px] more_j" @click="toMore">
 | 
			
		||||
                                <span>查看更多</span>
 | 
			
		||||
                            <img src="/img/index/more_j.png" alt="" style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                                <img src="/img/index/more_j.png" alt=""
 | 
			
		||||
                                    style="width: 8px;height: 13px;margin-left: 10px;"></img>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    <!-- <div class="re_top_img_line"></div> -->
 | 
			
		||||
                    <div class="re_box_item" v-for="(item,index) in mtList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
 | 
			
		||||
                        <div class="re_box_item" v-for="(item, index) in mtList" :key="index" style="margin-top: 10px;"
 | 
			
		||||
                            @click="openUrl(item.id)">
 | 
			
		||||
                            <div class="re_title">
 | 
			
		||||
                                <div class="flex align-center">
 | 
			
		||||
                                    <div class="dian"></div>
 | 
			
		||||
                                    <span class="one-line-ellipsis" style="width:400px;">{{ item.title }}</span>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            <span class="one-line-ellipsis" style="color: #999999;">{{ item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                        </div>
 | 
			
		||||
                        
 | 
			
		||||
                        <!-- <div class="slices_rol"></div> -->
 | 
			
		||||
                                <span class="one-line-ellipsis" style="color: #999999;">{{
 | 
			
		||||
                                    item.release_time_text.slice(5,10) }}</span>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div> -->
 | 
			
		||||
 | 
			
		||||
            <AppFooter></AppFooter>
 | 
			
		||||
 | 
			
		||||
@ -191,13 +294,13 @@
 | 
			
		||||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import $api from '@/service/webRequest'
 | 
			
		||||
import { defineEmits} from 'vue'
 | 
			
		||||
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";
 | 
			
		||||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade, Mousewheel } from "swiper/modules";
 | 
			
		||||
const inputSearch = ref('');
 | 
			
		||||
 | 
			
		||||
const xsImg = ref([]);
 | 
			
		||||
@ -215,25 +318,25 @@ 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){
 | 
			
		||||
        setTimeout(function() {
 | 
			
		||||
            emit('toSwpe',2);
 | 
			
		||||
        }, 500);
 | 
			
		||||
    }
 | 
			
		||||
    if (home.scrollTop == 0) {
 | 
			
		||||
        setTimeout(function() {
 | 
			
		||||
            emit('toSwpe',0);
 | 
			
		||||
        }, 500);
 | 
			
		||||
    }
 | 
			
		||||
    // let home = document.getElementById('homeid');
 | 
			
		||||
    // if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
 | 
			
		||||
    //     setTimeout(function () {
 | 
			
		||||
    //         emit('toSwpe', 2);
 | 
			
		||||
    //     }, 500);
 | 
			
		||||
    // }
 | 
			
		||||
    // if (home.scrollTop == 0) {
 | 
			
		||||
    //     setTimeout(function () {
 | 
			
		||||
    //         emit('toSwpe', 0);
 | 
			
		||||
    //     }, 500);
 | 
			
		||||
    // }
 | 
			
		||||
}
 | 
			
		||||
const toSearch =() => {
 | 
			
		||||
const toSearch = () => {
 | 
			
		||||
    // emit('toSwpe',9);
 | 
			
		||||
    // emitter.emit('inputSea', {
 | 
			
		||||
    //     keywords:inputSearch.value,
 | 
			
		||||
@ -243,17 +346,17 @@ const toSearch =() => {
 | 
			
		||||
}
 | 
			
		||||
// 查看更多
 | 
			
		||||
const toMore = () => {
 | 
			
		||||
    emit('toSwpe',3);
 | 
			
		||||
    emit('toSwpe', 3);
 | 
			
		||||
}
 | 
			
		||||
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}
 | 
			
		||||
    { 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 openUrl = (id: number) => {
 | 
			
		||||
@ -288,9 +391,11 @@ const mtList = ref([]);
 | 
			
		||||
 | 
			
		||||
//新闻分类
 | 
			
		||||
const getNewstypeList = async () => {
 | 
			
		||||
    let ptggid = null,jcdtid = null,qclyid = null,mtjjid = null;    // 分类id 
 | 
			
		||||
    let ptggid = null, jcdtid = null, qclyid = null, mtjjid = null;    // 分类id 
 | 
			
		||||
    const res = await $api.get('/api/home.news/cate?home=1')
 | 
			
		||||
	listType.value = res.data.data.list.map((item: any) => {
 | 
			
		||||
    var list = res.data.data.list;
 | 
			
		||||
    listType.value = list;
 | 
			
		||||
    list.map((item: any) => {
 | 
			
		||||
        if (item.name == '平台公告') {
 | 
			
		||||
            ptggid = item.id;
 | 
			
		||||
        }
 | 
			
		||||
@ -305,6 +410,7 @@ const getNewstypeList = async () => {
 | 
			
		||||
            mtjjid = item.id;
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
    console.log(listType.value);
 | 
			
		||||
 | 
			
		||||
    // xsId.value = listType.value[0].id;
 | 
			
		||||
    //逐梦新声列表 //万众瞩目列表
 | 
			
		||||
@ -315,18 +421,18 @@ const getNewstypeList = async () => {
 | 
			
		||||
    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 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;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//逐梦新声轮播图
 | 
			
		||||
@ -348,17 +454,19 @@ onMounted(() => {
 | 
			
		||||
 | 
			
		||||
/* pc端样式 */
 | 
			
		||||
 | 
			
		||||
    .swiper{
 | 
			
		||||
.swiper {
 | 
			
		||||
 | 
			
		||||
        .swiper-pagination{
 | 
			
		||||
    .swiper-pagination {
 | 
			
		||||
        text-align: right;
 | 
			
		||||
        padding-right: 10px;
 | 
			
		||||
        bottom: 0;
 | 
			
		||||
        height: 38px;
 | 
			
		||||
        line-height: 38px;
 | 
			
		||||
            --swiper-pagination-color: #FFCD52;/* 两种都可以 */
 | 
			
		||||
        --swiper-pagination-color: #FFCD52;
 | 
			
		||||
        /* 两种都可以 */
 | 
			
		||||
    }
 | 
			
		||||
        .img_tits{
 | 
			
		||||
 | 
			
		||||
    .img_tits {
 | 
			
		||||
        font-family: Microsoft YaHei UI;
 | 
			
		||||
        font-weight: bold;
 | 
			
		||||
        font-size: 18px;
 | 
			
		||||
@ -372,49 +480,54 @@ onMounted(() => {
 | 
			
		||||
        line-height: 38px;
 | 
			
		||||
        padding-left: 10px;
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    .rightcon{
 | 
			
		||||
        width:100%;
 | 
			
		||||
        height:100%;
 | 
			
		||||
.rightcon {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    background-image: url('/img/index/rightcons.png');
 | 
			
		||||
    background-size: 100% 100%;
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
    .top_search{
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.top_search {
 | 
			
		||||
    width: 1200px;
 | 
			
		||||
    margin-left: 400px;
 | 
			
		||||
    margin-top: 50px;
 | 
			
		||||
    height: 70px;
 | 
			
		||||
        justify-content: space-between;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    }
 | 
			
		||||
    .inputform {
 | 
			
		||||
    justify-content: space-between;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.inputform {
 | 
			
		||||
    position: relative;
 | 
			
		||||
		width: 340px;
 | 
			
		||||
    // margin-right: 319px;
 | 
			
		||||
	}
 | 
			
		||||
    .contactInput {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.contactInput {
 | 
			
		||||
    width: 337px;
 | 
			
		||||
    height: 50px;
 | 
			
		||||
        background: #FFFFFF;
 | 
			
		||||
    background: #ffffff73;
 | 
			
		||||
    border-radius: 8px;
 | 
			
		||||
    border: 1px solid #DEE4E8;
 | 
			
		||||
    padding-left: 15px;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
    .contactInput::placeholder {
 | 
			
		||||
.contactInput::placeholder {
 | 
			
		||||
    color: #999999;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
    .contactInput:focus {
 | 
			
		||||
.contactInput:focus {
 | 
			
		||||
    outline: none;
 | 
			
		||||
    }
 | 
			
		||||
    .search_rinput{
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.search_rinput {
 | 
			
		||||
    width: 68px;
 | 
			
		||||
    height: 50px;
 | 
			
		||||
        background: #E6E6E6;
 | 
			
		||||
    background: #338CDE;
 | 
			
		||||
    border-radius: 0px 8px 8px 0px;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 0;
 | 
			
		||||
@ -422,27 +535,34 @@ onMounted(() => {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    }
 | 
			
		||||
    .home_con{
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.home_con {
 | 
			
		||||
    width: 1200px;
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
    // margin: 0 auto;
 | 
			
		||||
    margin-top: 50px;
 | 
			
		||||
    margin-left: 400px;
 | 
			
		||||
 | 
			
		||||
        .fly{
 | 
			
		||||
    .fly {
 | 
			
		||||
        width: 50%;
 | 
			
		||||
 | 
			
		||||
        // padding-left: 80px;
 | 
			
		||||
            .swiper_s{
 | 
			
		||||
        .swiper_s {
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            height: 418px;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
        .fly1{
 | 
			
		||||
 | 
			
		||||
    .fly1 {
 | 
			
		||||
        width: 50%;
 | 
			
		||||
        // margin-left: 30px;
 | 
			
		||||
    }
 | 
			
		||||
        .re_box{
 | 
			
		||||
 | 
			
		||||
    .re_box {
 | 
			
		||||
        border-width: 1px;
 | 
			
		||||
        border-style: solid;
 | 
			
		||||
        border-color: transparent;
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        height: 418px;
 | 
			
		||||
        display: flex;
 | 
			
		||||
@ -450,13 +570,16 @@ onMounted(() => {
 | 
			
		||||
        justify-content: flex-start;
 | 
			
		||||
        align-content: flex-start;
 | 
			
		||||
        // gap: 10px;
 | 
			
		||||
                background: #FFFFFF;
 | 
			
		||||
        background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
 | 
			
		||||
            linear-gradient(0deg, #338CDE, #ACD7FF) border-box;
 | 
			
		||||
        position: relative;
 | 
			
		||||
                border-radius: 12px 0 0 12px;
 | 
			
		||||
                .re_top_img{
 | 
			
		||||
                    padding:20px;
 | 
			
		||||
        border-radius: 0px 12px 12px 0px;
 | 
			
		||||
 | 
			
		||||
        .re_top_img {
 | 
			
		||||
            padding: 20px;
 | 
			
		||||
        }
 | 
			
		||||
                .more_j{
 | 
			
		||||
 | 
			
		||||
        .more_j {
 | 
			
		||||
            font-family: Microsoft YaHei UI;
 | 
			
		||||
            font-weight: 400;
 | 
			
		||||
            font-size: 16px;
 | 
			
		||||
@ -465,20 +588,30 @@ onMounted(() => {
 | 
			
		||||
            align-items: center;
 | 
			
		||||
            cursor: pointer;
 | 
			
		||||
        }
 | 
			
		||||
                .re_top_img_line{
 | 
			
		||||
 | 
			
		||||
        .re_top_img_line {
 | 
			
		||||
            width: 559px;
 | 
			
		||||
            height: 2px;
 | 
			
		||||
            background: #EEEEEE;
 | 
			
		||||
            margin-left: 20px;
 | 
			
		||||
        }
 | 
			
		||||
                .re_box_item{
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .re_box_left {
 | 
			
		||||
        border-radius: 12px 0px 0px 12px;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.re_box_item {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
                    padding:15px 20px;
 | 
			
		||||
    padding: 15px 20px;
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    justify-content: space-between;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
                    .re_title{
 | 
			
		||||
 | 
			
		||||
    .re_title {
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        font-family: Microsoft YaHei;
 | 
			
		||||
        font-weight: 400;
 | 
			
		||||
@ -488,7 +621,8 @@ onMounted(() => {
 | 
			
		||||
        align-items: center;
 | 
			
		||||
        justify-content: space-between;
 | 
			
		||||
        cursor: pointer;
 | 
			
		||||
                        .dian{
 | 
			
		||||
 | 
			
		||||
        .dian {
 | 
			
		||||
            width: 10px;
 | 
			
		||||
            height: 10px;
 | 
			
		||||
            background: #3B90DF;
 | 
			
		||||
@ -496,6 +630,7 @@ onMounted(() => {
 | 
			
		||||
            margin-right: 15px;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // &:hover{
 | 
			
		||||
    //     background-image: url('/img/index/listhmbg.png');
 | 
			
		||||
    //     background-size: 100% 100%;
 | 
			
		||||
@ -508,17 +643,16 @@ onMounted(() => {
 | 
			
		||||
    //         right: 0;
 | 
			
		||||
    //     }
 | 
			
		||||
    // }
 | 
			
		||||
                }
 | 
			
		||||
            } 
 | 
			
		||||
    }
 | 
			
		||||
    .home_con1{
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.home_con1 {
 | 
			
		||||
    width: 1200px;
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
    // margin: 0 auto;
 | 
			
		||||
    margin-top: 50px;
 | 
			
		||||
    margin-left: 400px;
 | 
			
		||||
 | 
			
		||||
        .bstbg{
 | 
			
		||||
    .bstbg {
 | 
			
		||||
        width: 280px;
 | 
			
		||||
        height: 150px;
 | 
			
		||||
        background-image: url('/img/index/bstbg.png');
 | 
			
		||||
@ -527,13 +661,15 @@ onMounted(() => {
 | 
			
		||||
        margin-right: 20px;
 | 
			
		||||
        margin-bottom: 20px;
 | 
			
		||||
        cursor: pointer;
 | 
			
		||||
            .bst_con{
 | 
			
		||||
 | 
			
		||||
        .bst_con {
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            display: flex;
 | 
			
		||||
            justify-content: center;
 | 
			
		||||
            align-items: center;
 | 
			
		||||
            flex-direction: column;
 | 
			
		||||
                .bsttitle{
 | 
			
		||||
 | 
			
		||||
            .bsttitle {
 | 
			
		||||
                width: 210px;
 | 
			
		||||
                font-family: Microsoft YaHei UI;
 | 
			
		||||
                font-weight: bold;
 | 
			
		||||
@ -542,28 +678,32 @@ onMounted(() => {
 | 
			
		||||
                line-height: 26px;
 | 
			
		||||
                text-align: center;
 | 
			
		||||
            }
 | 
			
		||||
                &:hover{
 | 
			
		||||
                    .bsttitle{
 | 
			
		||||
 | 
			
		||||
            &:hover {
 | 
			
		||||
                .bsttitle {
 | 
			
		||||
                    color: #FFE7B8;
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
    .home_con2{
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.home_con2 {
 | 
			
		||||
    width: 1200px;
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
    // margin: 0 auto;
 | 
			
		||||
    // margin-top: 10px;
 | 
			
		||||
    margin-left: 400px;
 | 
			
		||||
    flex-wrap: wrap;
 | 
			
		||||
        .fly1s{
 | 
			
		||||
 | 
			
		||||
    .fly1s {
 | 
			
		||||
        width: 580px;
 | 
			
		||||
        margin-right: 20px;
 | 
			
		||||
        margin-bottom: 20px;
 | 
			
		||||
    }
 | 
			
		||||
        .re_boxs{
 | 
			
		||||
 | 
			
		||||
    .re_boxs {
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        height: 406px;
 | 
			
		||||
        display: flex;
 | 
			
		||||
@ -574,10 +714,12 @@ onMounted(() => {
 | 
			
		||||
        background: #FFFFFF;
 | 
			
		||||
        position: relative;
 | 
			
		||||
        border-radius: 12px;
 | 
			
		||||
                .re_top_img{
 | 
			
		||||
                    padding:20px;
 | 
			
		||||
 | 
			
		||||
        .re_top_img {
 | 
			
		||||
            padding: 20px;
 | 
			
		||||
        }
 | 
			
		||||
                .more_j{
 | 
			
		||||
 | 
			
		||||
        .more_j {
 | 
			
		||||
            font-family: Microsoft YaHei UI;
 | 
			
		||||
            font-weight: 400;
 | 
			
		||||
            font-size: 16px;
 | 
			
		||||
@ -587,14 +729,15 @@ onMounted(() => {
 | 
			
		||||
            cursor: pointer;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
                .re_box_item{
 | 
			
		||||
        .re_box_item {
 | 
			
		||||
            width: 100%;
 | 
			
		||||
                    padding:15px 20px;
 | 
			
		||||
            padding: 15px 20px;
 | 
			
		||||
            box-sizing: border-box;
 | 
			
		||||
            display: flex;
 | 
			
		||||
            justify-content: space-between;
 | 
			
		||||
            align-items: center;
 | 
			
		||||
                    .re_title{
 | 
			
		||||
 | 
			
		||||
            .re_title {
 | 
			
		||||
                width: 100%;
 | 
			
		||||
                font-family: Microsoft YaHei;
 | 
			
		||||
                font-weight: 400;
 | 
			
		||||
@ -604,7 +747,8 @@ onMounted(() => {
 | 
			
		||||
                align-items: center;
 | 
			
		||||
                justify-content: space-between;
 | 
			
		||||
                cursor: pointer;
 | 
			
		||||
                        .dian{
 | 
			
		||||
 | 
			
		||||
                .dian {
 | 
			
		||||
                    width: 10px;
 | 
			
		||||
                    height: 10px;
 | 
			
		||||
                    background: #3B90DF;
 | 
			
		||||
@ -612,6 +756,7 @@ onMounted(() => {
 | 
			
		||||
                    margin-right: 15px;
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            // &:hover{
 | 
			
		||||
            //     background-image: url('/img/index/listhmbg.png');
 | 
			
		||||
            //     background-size: 100% 100%;
 | 
			
		||||
@ -626,13 +771,51 @@ onMounted(() => {
 | 
			
		||||
            // }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
    @media (max-width: 1440px) {
 | 
			
		||||
        .home_con2,.home_con1,.home_con{
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@media (max-width: 1440px) {
 | 
			
		||||
 | 
			
		||||
    .home_con2,
 | 
			
		||||
    .home_con1,
 | 
			
		||||
    .home_con {
 | 
			
		||||
        width: 900px;
 | 
			
		||||
    }
 | 
			
		||||
        .fly1s{
 | 
			
		||||
 | 
			
		||||
    .fly1s {
 | 
			
		||||
        width: 500px;
 | 
			
		||||
    }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.t1 {
 | 
			
		||||
    font-weight: bold;
 | 
			
		||||
    font-family: PingFang SC;
 | 
			
		||||
    color: #323232;
 | 
			
		||||
    font-size: 22px;
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
    position: relative;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.t1:hover {
 | 
			
		||||
    color: #2C8AE0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.t2 {
 | 
			
		||||
    font-weight: bold;
 | 
			
		||||
    font-family: PingFang SC;
 | 
			
		||||
    color: #2C8AE0;
 | 
			
		||||
    font-size: 22px;
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
    position: relative;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.t_line {
 | 
			
		||||
    width: 60%;
 | 
			
		||||
    height: 5px;
 | 
			
		||||
    background-color: #3E92DE;
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    right: 0;
 | 
			
		||||
    bottom: -15px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										7
									
								
								components/AppLuoYang.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@ -0,0 +1,7 @@
 | 
			
		||||
<template>
 | 
			
		||||
    <div>
 | 
			
		||||
        青春洛阳
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -7,23 +7,35 @@
 | 
			
		||||
			<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 style="position: absolute;top:15%;left:0px;right: 0px;">
 | 
			
		||||
						<img :src="`/img/index/dlogo1.png`" style="width: 300px;margin: 0 auto;" alt="">
 | 
			
		||||
					</div>
 | 
			
		||||
					<div style="position: absolute;top: 53%;left:0px;right: 0px;">
 | 
			
		||||
						<img :src="`/img/index/hmouse1.png`" style="width: 180px;margin: 0 auto;" alt="">
 | 
			
		||||
					</div>
 | 
			
		||||
				</swiper-slide>
 | 
			
		||||
 | 
			
		||||
				<!-- 首页 -->
 | 
			
		||||
				<swiper-slide>
 | 
			
		||||
					<AppHome @toSwpe="toswiper"></AppHome>
 | 
			
		||||
				</swiper-slide>
 | 
			
		||||
 | 
			
		||||
				<!-- 关于我们 -->
 | 
			
		||||
				<swiper-slide>
 | 
			
		||||
					<AppAbout @toSwpe="toswiper"></AppAbout>
 | 
			
		||||
				</swiper-slide>
 | 
			
		||||
 | 
			
		||||
				<!-- 新闻动态 -->
 | 
			
		||||
				<swiper-slide>
 | 
			
		||||
					<AppNews @toSwpe="toswiper"></AppNews>
 | 
			
		||||
				</swiper-slide>
 | 
			
		||||
				<!-- 信息公开 -->
 | 
			
		||||
 | 
			
		||||
				<!-- 青春洛阳 -->
 | 
			
		||||
				<swiper-slide>
 | 
			
		||||
					<AppLuoYang @toSwpe="toswiper"></AppLuoYang>
 | 
			
		||||
				</swiper-slide>
 | 
			
		||||
 | 
			
		||||
				<!-- 服务青年 -->
 | 
			
		||||
				<swiper-slide>
 | 
			
		||||
					<AppMessage @toSwpe="toswiper"></AppMessage>
 | 
			
		||||
				</swiper-slide>
 | 
			
		||||
@ -40,9 +52,9 @@
 | 
			
		||||
					<AppAboutdel></AppAboutdel>
 | 
			
		||||
				</swiper-slide> -->
 | 
			
		||||
				<!-- 留言板 -->
 | 
			
		||||
				<!-- <swiper-slide :show="isMeassage" id="messageid">
 | 
			
		||||
				<swiper-slide @toSwpe="toswiper">
 | 
			
		||||
					<AppContactUs></AppContactUs>
 | 
			
		||||
				</swiper-slide> -->
 | 
			
		||||
				</swiper-slide>
 | 
			
		||||
				<!-- 搜索详情 -->
 | 
			
		||||
				<!-- <swiper-slide :show="isSearch" id="searchid">
 | 
			
		||||
					<AppSearchdel @toSwpe="toswiper"></AppSearchdel>
 | 
			
		||||
@ -60,7 +72,7 @@
 | 
			
		||||
			</div> -->
 | 
			
		||||
			<!-- 右分享 -->
 | 
			
		||||
			<div v-if="swiper_exp > 0" ref="targetElement" class="flex flex-col fiximg" :style="{ right: rightValue }">
 | 
			
		||||
				<img src="/img/qiqiu.png" class="qqt" @click="updateRight" alt=""></img>
 | 
			
		||||
				<!-- <img src="/img/qiqiu.png" class="qqt" @click="updateRight" alt=""></img> -->
 | 
			
		||||
				<div style="position: absolute;top: 200px;">
 | 
			
		||||
					<div class="divcode">
 | 
			
		||||
						<img class="imgs" :src="`/img/index/douyin.png`" alt="">
 | 
			
		||||
@ -86,13 +98,13 @@
 | 
			
		||||
							<img :src="`/img/bilicode.jpg`" alt="">
 | 
			
		||||
						</p>
 | 
			
		||||
					</div>
 | 
			
		||||
					<div class="tuanguanxi">
 | 
			
		||||
					<!-- <div class="tuanguanxi">
 | 
			
		||||
						<a href="https://mp.weixin.qq.com/s/N-qAWMJNGb7WjkXp3Xqrhg" rel="nofollow" target="_blank"
 | 
			
		||||
							style="display: block;"><img src="/img/tgxzj.jpg"></a>
 | 
			
		||||
						<a href="http://qnyz.lyd.com.cn/" rel="nofollow" target="_blank" style="display: block;"><img
 | 
			
		||||
								src="/img/qnyz.jpg"></a>
 | 
			
		||||
						<img src="/img/lyb.jpg" @click="openUrl" />
 | 
			
		||||
					</div>
 | 
			
		||||
					</div> -->
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
@ -103,7 +115,7 @@
 | 
			
		||||
import { Swiper, SwiperSlide } from 'swiper/vue'
 | 
			
		||||
import { nextTick, ref } from 'vue'
 | 
			
		||||
import 'swiper/css'
 | 
			
		||||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade, Mousewheel} from "swiper/modules";
 | 
			
		||||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade, Mousewheel } from "swiper/modules";
 | 
			
		||||
import ScrollReveal from 'scrollreveal';
 | 
			
		||||
import { NNumberAnimation } from 'naive-ui'
 | 
			
		||||
 | 
			
		||||
@ -144,11 +156,10 @@ const onSwiperNews = (swiper: any) => {
 | 
			
		||||
		// 更新当前活动幻灯片索引
 | 
			
		||||
		// isMeassage.value = false;
 | 
			
		||||
		// console.log(newsSwiper);
 | 
			
		||||
		// console.log(window);
 | 
			
		||||
		swiper_exp.value = swiper.realIndex;
 | 
			
		||||
		 if(swiper.realIndex == 1 || swiper.realIndex == 5){
 | 
			
		||||
		if (swiper.realIndex == 1 || swiper.realIndex == 5) {
 | 
			
		||||
			newsSwiper.mousewheel.disable();
 | 
			
		||||
			newsSwiper.allowTouchMove= true;// 开启拖动 
 | 
			
		||||
			newsSwiper.allowTouchMove = true;// 开启拖动 
 | 
			
		||||
		}
 | 
			
		||||
		// else if (swiper.realIndex == 6 || swiper.realIndex == 9 || swiper.realIndex == 7 || swiper.realIndex == 8) {
 | 
			
		||||
		// 	newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
 | 
			
		||||
@ -156,7 +167,7 @@ const onSwiperNews = (swiper: any) => {
 | 
			
		||||
		// }
 | 
			
		||||
		else {
 | 
			
		||||
			newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
 | 
			
		||||
			newsSwiper.allowTouchMove= true;// 开启拖动 
 | 
			
		||||
			newsSwiper.allowTouchMove = true;// 开启拖动 
 | 
			
		||||
		}
 | 
			
		||||
	})
 | 
			
		||||
}
 | 
			
		||||
@ -170,7 +181,7 @@ const toswiper = (index: number) => {
 | 
			
		||||
	// if (index == 7) isAbout.value = true;
 | 
			
		||||
	// if (index == 8) isMeassage.value = true;
 | 
			
		||||
	// if (index == 9) isSearch.value = true;
 | 
			
		||||
	newsSwiper.slideTo(index,1000,true)
 | 
			
		||||
	newsSwiper.slideTo(index, 1000, true)
 | 
			
		||||
}
 | 
			
		||||
const swiper_exp = ref(0);
 | 
			
		||||
 | 
			
		||||
@ -497,6 +508,8 @@ onMounted(() => {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.fiximg {
 | 
			
		||||
    width: 80px;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
	transition: right 0.5s ease-in-out;
 | 
			
		||||
	position: fixed;
 | 
			
		||||
	top: 40px;
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										
											BIN
										
									
								
								public/img/code.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 579 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/bi.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.6 KiB  | 
| 
		 Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 37 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/dlogo1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 237 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/gg.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 8.0 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/gx.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 2.3 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/gx1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 3.1 KiB  | 
| 
		 Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 7.7 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/hmouse1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 7.6 KiB  | 
| 
		 Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 3.4 KiB  | 
| 
		 Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.5 MiB  | 
| 
		 Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 300 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/ly.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.4 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/ly1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 3.8 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/r.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 3.8 KiB  | 
| 
		 Before Width: | Height: | Size: 652 KiB After Width: | Height: | Size: 1.5 MiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/tt.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.5 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								public/img/index/tt1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.9 KiB  | 
| 
		 Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 6.5 KiB  |