1.首页修改
This commit is contained in:
parent
81ca4297d8
commit
4095e8afcb
6
app.vue
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,7 +20,7 @@
|
||||
|
||||
<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)">
|
||||
@ -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;">
|
||||
<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>
|
||||
|
||||
@ -221,17 +324,17 @@ const swiperOptionsimgs = {
|
||||
},
|
||||
}
|
||||
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 = () => {
|
||||
// emit('toSwpe',9);
|
||||
@ -290,7 +393,9 @@ 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')
|
||||
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;
|
||||
}
|
||||
|
||||
//逐梦新声轮播图
|
||||
@ -356,8 +462,10 @@ onMounted(() => {
|
||||
bottom: 0;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
--swiper-pagination-color: #FFCD52;/* 两种都可以 */
|
||||
--swiper-pagination-color: #FFCD52;
|
||||
/* 两种都可以 */
|
||||
}
|
||||
|
||||
.img_tits {
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: bold;
|
||||
@ -384,21 +492,25 @@ onMounted(() => {
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.top_search {
|
||||
width: 1200px;
|
||||
margin-left: 400px;
|
||||
margin-top: 50px;
|
||||
height: 70px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.inputform {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
// margin-right: 319px;
|
||||
}
|
||||
|
||||
.contactInput {
|
||||
width: 337px;
|
||||
height: 50px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff73;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #DEE4E8;
|
||||
padding-left: 15px;
|
||||
@ -411,10 +523,11 @@ onMounted(() => {
|
||||
.contactInput:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_rinput {
|
||||
width: 68px;
|
||||
height: 50px;
|
||||
background: #E6E6E6;
|
||||
background: #338CDE;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -423,6 +536,7 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home_con {
|
||||
width: 1200px;
|
||||
box-sizing: border-box;
|
||||
@ -432,17 +546,23 @@ onMounted(() => {
|
||||
|
||||
.fly {
|
||||
width: 50%;
|
||||
|
||||
// padding-left: 80px;
|
||||
.swiper_s {
|
||||
width: 100%;
|
||||
height: 418px;
|
||||
}
|
||||
}
|
||||
|
||||
.fly1 {
|
||||
width: 50%;
|
||||
// margin-left: 30px;
|
||||
}
|
||||
|
||||
.re_box {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
width: 100%;
|
||||
height: 418px;
|
||||
display: flex;
|
||||
@ -450,12 +570,15 @@ 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;
|
||||
border-radius: 0px 12px 12px 0px;
|
||||
|
||||
.re_top_img {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.more_j {
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
@ -465,12 +588,21 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.re_top_img_line {
|
||||
width: 559px;
|
||||
height: 2px;
|
||||
background: #EEEEEE;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.re_box_left {
|
||||
border-radius: 12px 0px 0px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.re_box_item {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
@ -478,6 +610,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.re_title {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
@ -488,6 +621,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
.dian {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@ -496,6 +630,7 @@ onMounted(() => {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// &:hover{
|
||||
// background-image: url('/img/index/listhmbg.png');
|
||||
// background-size: 100% 100%;
|
||||
@ -509,8 +644,7 @@ onMounted(() => {
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home_con1 {
|
||||
width: 1200px;
|
||||
box-sizing: border-box;
|
||||
@ -527,12 +661,14 @@ onMounted(() => {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
.bst_con {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.bsttitle {
|
||||
width: 210px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
@ -542,6 +678,7 @@ onMounted(() => {
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bsttitle {
|
||||
color: #FFE7B8;
|
||||
@ -551,6 +688,7 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home_con2 {
|
||||
width: 1200px;
|
||||
box-sizing: border-box;
|
||||
@ -558,11 +696,13 @@ onMounted(() => {
|
||||
// margin-top: 10px;
|
||||
margin-left: 400px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.fly1s {
|
||||
width: 580px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.re_boxs {
|
||||
width: 100%;
|
||||
height: 406px;
|
||||
@ -574,9 +714,11 @@ onMounted(() => {
|
||||
background: #FFFFFF;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
|
||||
.re_top_img {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.more_j {
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
@ -594,6 +736,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.re_title {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
@ -604,6 +747,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
|
||||
.dian {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@ -612,6 +756,7 @@ onMounted(() => {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// &:hover{
|
||||
// background-image: url('/img/index/listhmbg.png');
|
||||
// background-size: 100% 100%;
|
||||
@ -627,12 +772,50 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.home_con2,.home_con1,.home_con{
|
||||
|
||||
.home_con2,
|
||||
.home_con1,
|
||||
.home_con {
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.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
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>
|
||||
@ -144,7 +156,6 @@ 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) {
|
||||
newsSwiper.mousewheel.disable();
|
||||
@ -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
BIN
public/img/code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 579 KiB |
BIN
public/img/index/bi.png
Normal file
BIN
public/img/index/bi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 37 KiB |
BIN
public/img/index/dlogo1.png
Normal file
BIN
public/img/index/dlogo1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
BIN
public/img/index/gg.png
Normal file
BIN
public/img/index/gg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
public/img/index/gx.png
Normal file
BIN
public/img/index/gx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
public/img/index/gx1.png
Normal file
BIN
public/img/index/gx1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 7.7 KiB |
BIN
public/img/index/hmouse1.png
Normal file
BIN
public/img/index/hmouse1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 300 KiB |
BIN
public/img/index/ly.png
Normal file
BIN
public/img/index/ly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/img/index/ly1.png
Normal file
BIN
public/img/index/ly1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/img/index/r.png
Normal file
BIN
public/img/index/r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 652 KiB After Width: | Height: | Size: 1.5 MiB |
BIN
public/img/index/tt.png
Normal file
BIN
public/img/index/tt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/img/index/tt1.png
Normal file
BIN
public/img/index/tt1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 6.5 KiB |
Loading…
x
Reference in New Issue
Block a user