修改团市委修改版1.0
1，首页修改。 2，页面卡通元素替换。
This commit is contained in:
parent
692eaad26c
commit
1baad2504b
@ -1500,17 +1500,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.text_66 {
|
.text_66 {
|
||||||
width: 74px;
|
color: #323232;
|
||||||
height: 19px;
|
font-size: 16px;
|
||||||
overflow-wrap: break-word;
|
font-family: Microsoft YaHei UI;
|
||||||
color: rgba(34, 34, 34, 1);
|
font-weight: 400;
|
||||||
font-size: 18px;
|
margin-right: 40px;
|
||||||
font-family: Microsoft YaHei UI-Bold;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
line-height: 18px;
|
|
||||||
margin: 27px 70px 0 -144px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group_29 {
|
.group_29 {
|
||||||
@ -1650,31 +1644,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.group_30 {
|
.group_30 {
|
||||||
background-color: rgba(34, 34, 34, 1);
|
background-color: transparent;
|
||||||
width: 100%;
|
width: 1200px;
|
||||||
height: 300px;
|
margin-left: 400px;
|
||||||
margin-top: -1px;
|
// height: 300px;
|
||||||
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-wrapper_13 {
|
.text-wrapper_13 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 17px;
|
// height: 17px;
|
||||||
margin-top: 52px;
|
margin-top: 20px;
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text_67 {
|
.text_67 {
|
||||||
width: 64px;
|
color: #323232;
|
||||||
height: 16px;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: Microsoft YaHei UI-Regular;
|
font-family: Microsoft YaHei UI;
|
||||||
font-weight: NaN;
|
font-weight: 400;
|
||||||
text-align: left;
|
margin-right: 40px;
|
||||||
white-space: nowrap;
|
&:hover {
|
||||||
line-height: 16px;
|
color: #EC0A0A;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.text_68 {
|
.text_68 {
|
||||||
@ -1762,11 +1753,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.group_31 {
|
.group_31 {
|
||||||
background-color: rgba(216, 216, 216, 0.2);
|
|
||||||
width: 63%;
|
|
||||||
height: 1px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 32px;
|
margin-top: 32px;
|
||||||
|
width: 1200px;
|
||||||
|
height: 1px;
|
||||||
|
background: #D2D2D2;
|
||||||
|
border-radius: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1440px) {
|
@media screen and (max-width: 1440px) {
|
||||||
@ -1778,26 +1769,24 @@
|
|||||||
.group_32 {
|
.group_32 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 125px;
|
height: 125px;
|
||||||
margin: 29px 0 44px 0px;
|
// margin: 29px 0 44px 0px;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-wrapper_14 {
|
.text-wrapper_14 {
|
||||||
width: 545px;
|
// width: 545px;
|
||||||
height: 108px;
|
// height: 108px;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text_74 {
|
.text_74 {
|
||||||
width: 545px;
|
// width: 545px;
|
||||||
height: 16px;
|
color: #323232;
|
||||||
overflow-wrap: break-word;
|
font-size: 16px;
|
||||||
color: rgba(255, 255, 255, 0.5);
|
font-family: Source Han Serif CN;
|
||||||
font-size: 12px;
|
font-weight: 400;
|
||||||
font-family: Microsoft YaHei UI-Regular;
|
margin-bottom: 10px;
|
||||||
font-weight: NaN;
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text_75 {
|
.text_75 {
|
||||||
@ -1843,17 +1832,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.image_29 {
|
.image_29 {
|
||||||
width: 124px;
|
width: 56px;
|
||||||
height: 124px;
|
height: 68px;
|
||||||
margin: 1px 0 0 406px;
|
margin-right: 50px;
|
||||||
border-radius: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image_30 {
|
.image_30 {
|
||||||
width: 124px;
|
width: 92px;
|
||||||
height: 124px;
|
height: 92px;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
margin-left: 20px;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -157,7 +157,7 @@ onMounted(() => {
|
|||||||
height:100%;
|
height:100%;
|
||||||
background-image: url('/img/aboutxq.png');
|
background-image: url('/img/aboutxq.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
overflow: scroll;
|
overflow-y: auto;
|
||||||
|
|
||||||
.fiximg {
|
.fiximg {
|
||||||
img {
|
img {
|
||||||
|
|||||||
@ -2,44 +2,64 @@
|
|||||||
<!-- PC端布局 -->
|
<!-- PC端布局 -->
|
||||||
<div class="group_30 flex-col pc-footer">
|
<div class="group_30 flex-col pc-footer">
|
||||||
<div class="text-wrapper_13 flex-row">
|
<div class="text-wrapper_13 flex-row">
|
||||||
<NuxtLink to="/">
|
<span class="text_66">友情链接:</span>
|
||||||
<span class="text_67">企业首页</span>
|
<NuxtLink to="https://www.gov.cn/" target="_blank">
|
||||||
|
<span class="text_67">中央人民政府门户网站</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink to="/proServices/">
|
<NuxtLink to="https://www.gqt.org.cn/" target="_blank">
|
||||||
<span class="text_68">产品&服务</span>
|
<span class="text_67">共青团中央</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink to="/aboutUs/">
|
<NuxtLink to="https://www.henan.gov.cn/" target="_blank">
|
||||||
<span class="text_69">灵睿&我们</span>
|
<span class="text_67">河南省人民政府网站</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink to="/customerReviews/">
|
<NuxtLink to="https://www.hnyouth.org.cn/" target="_blank">
|
||||||
<span class="text_70">客户&评价</span>
|
<span class="text_67">共青团河南省委</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink to="/societyDuty/">
|
<NuxtLink to="https://www.ly.gov.cn/" target="_blank">
|
||||||
<span class="text_71">社会&责任</span>
|
<span class="text_67">洛阳市人民政府网站</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<NuxtLink to="/concatUs/">
|
|
||||||
<span class="text_72">加入我们</span>
|
|
||||||
</NuxtLink>
|
|
||||||
<span class="text_73">联系电话：400-080-0379</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="group_31 flex-col"></div>
|
<div class="group_31 flex-col"></div>
|
||||||
<div class="group_32 flex-row">
|
<div class="group_32 flex-row justify-between">
|
||||||
<div class="text-wrapper_14 flex-col">
|
<div class="text-wrapper_14 flex-col">
|
||||||
<span class="text_74">
|
<span class="text_74">
|
||||||
洛阳灵睿网络技术有限公司|洛阳网络公司|洛阳网络推广|洛阳易站通总代理|洛阳本地自媒体|洛阳短视频
|
©2021 备案号：中国共产主义青年团洛阳市委员会 版权所有
|
||||||
</span>
|
</span>
|
||||||
<span class="text_75">法律顾问：河南森合律师事务机构</span>
|
<span class="text_74">
|
||||||
<span class="text_76">
|
备案号：豫ICP备2021030615号-1 Email：lytswbgs@163.com
|
||||||
©2021 洛阳灵睿网络技术有限公司 All rights reserved.豫ICP备15023627号-3
|
|
||||||
</span>
|
</span>
|
||||||
<span class="text_77">
|
<span class="text_74">电话：0379-63225071</span>
|
||||||
洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室
|
<span class="text_74">
|
||||||
|
地址：河南省洛阳市洛龙区展览路20号（市总工会大楼）3楼 邮编：471000
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<img class="image_29" referrerpolicy="no-referrer"
|
<div class="flex-row align-center text-center">
|
||||||
src="public/img/wb.png" />
|
<img class="image_29" referrerpolicy="no-referrer"
|
||||||
<img class="image_30" referrerpolicy="no-referrer"
|
:src="`/img/index/dzjg.png`" />
|
||||||
src="public/img/wx.png" />
|
<div class="ml-[20px]">
|
||||||
|
<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`" />
|
||||||
|
<p class="mt-[10px]">官方抖音</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-[20px]">
|
||||||
|
<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`" />
|
||||||
|
<p class="mt-[10px]">bilibili官方账号</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -62,8 +82,10 @@
|
|||||||
<span class="mobile-address">洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室</span>
|
<span class="mobile-address">洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mobile-social flex-row">
|
<div class="mobile-social flex-row">
|
||||||
<img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/img/wb.png" />
|
<img class="mobile-social-icon" referrerpolicy="no-referrer" :src="`/img/dycode.png`" />
|
||||||
<img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/img/wx.png" />
|
<img class="mobile-social-icon" referrerpolicy="no-referrer" :src="`/img/wbcode.png`" />
|
||||||
|
<img class="mobile-social-icon" referrerpolicy="no-referrer" :src="`/img/wxcode.png`" />
|
||||||
|
<img class="mobile-social-icon" referrerpolicy="no-referrer" :src="`/img/bilicode.png`" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,40 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 左边导航栏 -->
|
<!-- 左边导航栏 -->
|
||||||
<div class="bgimg">
|
<div class="bgimg">
|
||||||
<div class="pc-nav">
|
<div class="pc-nav">
|
||||||
<div class="pc-nav-item" @click="gotoList(1)">
|
<div class="pc-nav-item" @click="gotoList(1)">
|
||||||
<img :src="crrent==1?'/img/index/home1.png':'/img/index/home.png'" alt=""></img>
|
<img :src="crrent==1?'/img/index/home1.png':'/img/index/home.png'" alt=""></img>
|
||||||
<span :class="['span',{'active': crrent==1}]">官网首页</span>
|
<span :class="['span',{'active': crrent==1}]">官网首页</span>
|
||||||
<img v-if="crrent==1" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
<img v-if="crrent==1" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
</div>
|
|
||||||
<div class="pc-nav-item" @click="gotoList(2)">
|
|
||||||
<img :src="crrent==2?'/img/index/aboutus1.png':'/img/index/aboutus.png'" alt=""></img>
|
|
||||||
<span :class="['span',{'active': crrent==2}]">关于我们</span>
|
|
||||||
<img v-if="crrent==2" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
|
||||||
</div>
|
|
||||||
<div class="pc-nav-item" @click="gotoList(3)">
|
|
||||||
<img :src="crrent==3?'/img/index/news1.png':'/img/index/news.png'" alt=""></img>
|
|
||||||
<span :class="['span',{'active': crrent==3}]">新闻动态</span>
|
|
||||||
<img v-if="crrent==3" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
|
||||||
</div>
|
|
||||||
<div class="pc-nav-item" @click="gotoList(4)">
|
|
||||||
<img :src="crrent==4?'/img/index/message1.png':'/img/index/message.png'" alt=""></img>
|
|
||||||
<span :class="['span',{'active': crrent==4}]">信息公开</span>
|
|
||||||
<img v-if="crrent==4" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
|
||||||
</div>
|
|
||||||
<div class="pc-nav-item" @click="gotoList(5)">
|
|
||||||
<img :src="crrent==5?'/img/index/baike1.png':'/img/index/baike.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>
|
</div>
|
||||||
<div class="line_h"></div>
|
<div class="pc-nav-item" @click="gotoList(2)">
|
||||||
<div class="goback" @click="goBack">返回首页</div>
|
<img :src="crrent==2?'/img/index/aboutus1.png':'/img/index/aboutus.png'" alt=""></img>
|
||||||
<div style="margin-top: 50px;margin-left: 40px;">
|
<span :class="['span',{'active': crrent==2}]">关于我们</span>
|
||||||
<div class="box_1" id='assist-open'>无障碍阅读</div>
|
<img v-if="crrent==2" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
<div class="box_2" @click="openOldMode">{{ isOld ? '退出适老模式' : '进入适老模式' }}</div>
|
</div>
|
||||||
|
<div class="pc-nav-item" @click="gotoList(3)">
|
||||||
|
<img :src="crrent==3?'/img/index/news1.png':'/img/index/news.png'" alt=""></img>
|
||||||
|
<span :class="['span',{'active': crrent==3}]">新闻动态</span>
|
||||||
|
<img v-if="crrent==3" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
|
</div>
|
||||||
|
<div class="pc-nav-item" @click="gotoList(4)">
|
||||||
|
<img :src="crrent==4?'/img/index/message1.png':'/img/index/message.png'" alt=""></img>
|
||||||
|
<span :class="['span',{'active': crrent==4}]">信息公开</span>
|
||||||
|
<img v-if="crrent==4" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
|
</div>
|
||||||
|
<div class="pc-nav-item" @click="gotoList(5)">
|
||||||
|
<img :src="crrent==5?'/img/index/baike1.png':'/img/index/baike.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>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="line_h"></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>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|||||||
@ -1,41 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- PC端布局 -->
|
<!-- PC端布局 -->
|
||||||
<div class="flex justify-between w-full h-full" >
|
<div class="flex justify-between w-full h-full">
|
||||||
<!-- 左边导航栏 -->
|
|
||||||
<!-- <div class="bgimg">
|
|
||||||
<div class="pc-nav">
|
|
||||||
<div class="pc-nav-item">
|
|
||||||
<img src="/img/index/home1.png" alt=""></img>
|
|
||||||
<span class="span" style="color: #FFA234;">官网首页</span>
|
|
||||||
<img src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
|
||||||
</div>
|
|
||||||
<div class="pc-nav-item">
|
|
||||||
<img src="/img/index/aboutus.png" alt=""></img>
|
|
||||||
<span class="span">关于我们</span>
|
|
||||||
</div>
|
|
||||||
<div class="pc-nav-item">
|
|
||||||
<img src="/img/index/news.png" alt=""></img>
|
|
||||||
<span class="span">新闻动态</span>
|
|
||||||
</div>
|
|
||||||
<div class="pc-nav-item">
|
|
||||||
<img src="/img/index/message.png" alt=""></img>
|
|
||||||
<span class="span">信息公开</span>
|
|
||||||
</div>
|
|
||||||
<div class="pc-nav-item">
|
|
||||||
<img src="/img/index/baike.png" alt=""></img>
|
|
||||||
<span class="span">团务百科</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="line_h"></div>
|
|
||||||
<div class="goback">返回首页</div>
|
|
||||||
<div style="margin-top: 50px;margin-left: 40px;">
|
|
||||||
<div class="box_1">无障碍阅读</div>
|
|
||||||
<div class="box_2">进入适老模式</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- 右边内容栏 -->
|
<!-- 右边内容栏 -->
|
||||||
<div class="rightcon">
|
<div class="rightcon" id="homeid" @scroll="hmScroll">
|
||||||
<div class="flex top_search ">
|
<div class="flex top_search ">
|
||||||
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
||||||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
|
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
|
||||||
@ -48,59 +17,173 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex h-auto home_con">
|
<div class="flex h-auto home_con">
|
||||||
<div class="fly">
|
<div class="fly">
|
||||||
<div class="fly_text">
|
<!-- <div class="fly_text">
|
||||||
<span>逐梦<b style="color: #FFFFFF;">新声</b></span>
|
<span>逐梦<b style="color: #FFFFFF;">新声</b></span>
|
||||||
<img :src="`/img/index/fly.png`" alt=""></img>
|
<img :src="`/img/index/fly.png`" alt=""></img>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="re_box" style="box-shadow: 0px 2px 24px 0px rgba(0,0,0,0.21);border-radius: 12px;">
|
<div class="re_box" >
|
||||||
<div class="swiper" style="border-radius: 12px 12px 0 0;">
|
<div class="swiper" style="border-radius: 12px 0 0 12px;">
|
||||||
<swiper class="w-[585px] h-[228px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
<swiper class="w-[600px] h-[418px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
||||||
<swiper-slide v-for="(item,index) in xsImg" :key="index">
|
<swiper-slide v-for="(item,index) in xsImg" :key="index" @click="gotoDetail(item.url)">
|
||||||
<div class="img_tits">{{ item.title }}</div>
|
<div class="img_tits">{{ item.title }}</div>
|
||||||
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
|
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
</swiper>
|
</swiper>
|
||||||
<div class="swiper-pagination"></div>
|
<div class="swiper-pagination"></div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 10px;">
|
|
||||||
<div class="re_box_item" v-for="(item,index) in xsList" :key="index" @click="gotoDetail(item.id)">
|
|
||||||
<div class="re_title">
|
|
||||||
<div class="dian"></div>
|
|
||||||
<span class="two-line-ellipsis" style="width:400px;">{{ item.title }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="slices_rol"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fly1">
|
<div class="fly1">
|
||||||
<div class="fly_text">
|
<div class="re_box" style="border-width: 1px;border-style: solid; border-image: linear-gradient(270deg, #CC131A, #FFFFFF) 10 10;border-radius:0;">
|
||||||
<span>万众<b style="color: #FFFFFF;">瞩目</b></span>
|
<div class="flex justify-between align-center w-full ">
|
||||||
<img :src="`/img/index/fly.png`" alt=""></img>
|
<img class="re_top_img" :src="`/img/index/wzjx.png`"></img>
|
||||||
</div>
|
<div class="pr-[20px] more_j" @click="toMore">
|
||||||
<div class="re_box">
|
<span>查看更多</span>
|
||||||
<img class="re_top_img" :src="`/img/index/booksty.png`"></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 zmList" :key="index" style="margin-top: 10px;" @click="gotoDetail(item.id)">
|
<div class="re_box_item" v-for="(item,index) in zmList" :key="index" style="margin-top: 10px;" @click="gotoDetail(item.id)">
|
||||||
<div class="re_title">
|
<div class="re_title">
|
||||||
<div class="dian"></div>
|
<div class="flex align-center">
|
||||||
<span class="two-line-ellipsis" style="width:400px;">{{ item.title }}</span>
|
<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>
|
||||||
|
|
||||||
<div class="slices_rol"></div>
|
<!-- <div class="slices_rol"></div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右分享 -->
|
<div class="h-auto home_con1">
|
||||||
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
|
<img :src="`/img/index/gwybst.png`" style="margin: 0 auto;" alt=""></img>
|
||||||
<img :src="`/img/index/douyin.png`" alt="">
|
<div class="flex flex-wrap" style="margin-top: 30px;">
|
||||||
<img :src="`/img/index/wb.png`" alt="">
|
<div class="bstbg" v-for="item,i in bstList" :key="i" @click="gotoDetail(item.id)">
|
||||||
<img :src="`/img/index/wx.png`" alt="">
|
<div class="bst_con" >
|
||||||
<img :src="`/img/index/blbl.png`" alt="">
|
<img :src="`/img/index/bst${i+1}.png`" alt="" style="width: 34px;height: 34px;margin-top: 25px;margin-bottom: 15px;">
|
||||||
</div> -->
|
<div class="bsttitle">
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex h-auto home_con2">
|
||||||
|
<div class="fly1s">
|
||||||
|
<div class="re_boxs">
|
||||||
|
<div class="flex justify-between align-center w-full ">
|
||||||
|
<div class="flex align-center justify-start">
|
||||||
|
<img class="re_top_img" :src="`/img/index/ptgg.png`"></img>
|
||||||
|
<img class="re_top_img" style="padding: 20px 0;" :src="`/img/index/hlines.png`"></img>
|
||||||
|
</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>
|
||||||
|
</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="gotoDetail(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> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fly1s">
|
||||||
|
<div class="re_boxs">
|
||||||
|
<div class="flex justify-between align-center w-full ">
|
||||||
|
<div class="flex align-center justify-start">
|
||||||
|
<img class="re_top_img" :src="`/img/index/jcdt.png`"></img>
|
||||||
|
<img class="re_top_img" style="padding: 20px 0;" :src="`/img/index/hlines.png`"></img>
|
||||||
|
</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>
|
||||||
|
</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="gotoDetail(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> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fly1s">
|
||||||
|
<div class="re_boxs">
|
||||||
|
<div class="flex justify-between align-center w-full ">
|
||||||
|
<div class="flex align-center justify-start">
|
||||||
|
<img class="re_top_img" :src="`/img/index/qcly.png`"></img>
|
||||||
|
<img class="re_top_img" style="padding: 20px 0;" :src="`/img/index/hlines.png`"></img>
|
||||||
|
</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>
|
||||||
|
</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="gotoDetail(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> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fly1s">
|
||||||
|
<div class="re_boxs">
|
||||||
|
<div class="flex justify-between align-center w-full ">
|
||||||
|
<div class="flex align-center justify-start">
|
||||||
|
<img class="re_top_img" :src="`/img/index/mtjj.png`"></img>
|
||||||
|
<img class="re_top_img" style="padding: 20px 0;" :src="`/img/index/hlines.png`"></img>
|
||||||
|
</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>
|
||||||
|
</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="gotoDetail(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> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AppFooter></AppFooter>
|
||||||
|
|
||||||
|
|
||||||
<!-- 底部鼠标 -->
|
<!-- 底部鼠标 -->
|
||||||
<div style="position: absolute;bottom: 30px;right:30px;">
|
<div style="position: absolute;bottom: 30px;right:30px;">
|
||||||
<img :src="`/img/index/hmouse.png`" alt="">
|
<img :src="`/img/index/hmouse.png`" alt="">
|
||||||
@ -111,7 +194,7 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import $api from '@/service/webRequest'
|
import $api from '@/service/webRequest'
|
||||||
import { defineEmits } from 'vue'
|
import { defineEmits} from 'vue'
|
||||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||||
import emitter from '@/plugins/emitter'
|
import emitter from '@/plugins/emitter'
|
||||||
import 'swiper/css'
|
import 'swiper/css'
|
||||||
@ -119,17 +202,12 @@ import 'swiper/css/autoplay'
|
|||||||
import "swiper/css/pagination";
|
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 inputSearch = ref('');
|
||||||
const xsList = ref([]);
|
|
||||||
const xsId = ref(null);
|
|
||||||
|
|
||||||
const zmList = ref([]);
|
|
||||||
const zmId = ref(null);
|
|
||||||
const xsImg = ref([]);
|
const xsImg = ref([]);
|
||||||
const listType = ref([]);
|
const listType = ref([]);
|
||||||
const detailId = ref(null);
|
const detailId = ref(null);
|
||||||
|
|
||||||
const emit = defineEmits(['toSwpe'])
|
const emit = defineEmits(['toSwpe'])
|
||||||
|
|
||||||
const swiperOptionsimgs = {
|
const swiperOptionsimgs = {
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 5000,
|
delay: 5000,
|
||||||
@ -145,7 +223,15 @@ const swiperOptionsimgs = {
|
|||||||
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
const toSearch =() => {
|
const toSearch =() => {
|
||||||
emit('toSwpe',9);
|
emit('toSwpe',9);
|
||||||
emitter.emit('inputSea', {
|
emitter.emit('inputSea', {
|
||||||
@ -153,6 +239,20 @@ const toSearch =() => {
|
|||||||
type: 1,
|
type: 1,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
// 查看更多
|
||||||
|
const toMore = () => {
|
||||||
|
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}
|
||||||
|
])
|
||||||
//跳转详情
|
//跳转详情
|
||||||
const gotoDetail = (id: number) => {
|
const gotoDetail = (id: number) => {
|
||||||
detailId.value = {
|
detailId.value = {
|
||||||
@ -171,19 +271,56 @@ const onSwiperImgs = (swiper: any) => {
|
|||||||
|
|
||||||
// })
|
// })
|
||||||
}
|
}
|
||||||
|
//文章精选
|
||||||
|
const zmList = ref([]);
|
||||||
|
|
||||||
|
//国务院百事通
|
||||||
|
const ptList = ref([]);
|
||||||
|
const jcList = ref([]);
|
||||||
|
const qcList = ref([]);
|
||||||
|
const mtList = ref([]);
|
||||||
|
|
||||||
//新闻分类
|
//新闻分类
|
||||||
const getNewstypeList = async () => {
|
const getNewstypeList = async () => {
|
||||||
|
let ptggid = null,jcdtid = null,qclyid = null,mtjjid = null; // 分类id
|
||||||
const res = await $api.get('/api/home.news/cate?home=1')
|
const res = await $api.get('/api/home.news/cate?home=1')
|
||||||
listType.value = res.data.data.list;
|
listType.value = res.data.data.list.map((item: any) => {
|
||||||
xsId.value = listType.value[0].id;
|
if (item.name == '平台公告') {
|
||||||
zmId.value = listType.value[1].id
|
ptggid = item.id;
|
||||||
//逐梦新声列表
|
}
|
||||||
const ress = await $api.get(`/api/home.news/index?cate_id=${xsId.value}&page=1&limit=4`)
|
if (item.name == '基层动态') {
|
||||||
xsList.value = ress.data.data.list;
|
jcdtid = item.id;
|
||||||
//万众瞩目列表
|
}
|
||||||
const ress1 = await $api.get(`/api/home.news/index?cate_id=${zmId.value}&page=1&limit=6`)
|
|
||||||
|
if (item.name == '青春洛阳') {
|
||||||
|
qclyid = item.id;
|
||||||
|
}
|
||||||
|
if (item.name == '媒体聚焦') {
|
||||||
|
mtjjid = item.id;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// xsId.value = listType.value[0].id;
|
||||||
|
//逐梦新声列表 //万众瞩目列表
|
||||||
|
// const ress = await $api.get(`/api/home.news/index?cate_id=${xsId.value}&page=1&limit=4`)
|
||||||
|
// xsList.value = ress.data.data.list;
|
||||||
|
|
||||||
|
//精选文章
|
||||||
|
const ress1 = await $api.get(`/api/home.news/index?page=1&limit=5&fine=1`)
|
||||||
zmList.value = ress1.data.data.list;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
//逐梦新声轮播图
|
//逐梦新声轮播图
|
||||||
@ -193,6 +330,7 @@ const getxsImg = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
window.addEventListener('scroll', hmScroll);
|
||||||
getxsImg();
|
getxsImg();
|
||||||
getNewstypeList();
|
getNewstypeList();
|
||||||
})
|
})
|
||||||
@ -203,79 +341,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
|
|
||||||
/* pc端样式 */
|
/* pc端样式 */
|
||||||
// .bgimg{
|
|
||||||
// width: 350px;
|
|
||||||
// height: 100vh;
|
|
||||||
// background-image: url('/img/index/leftHead.png');
|
|
||||||
// background-size: 100% 100%;
|
|
||||||
// position: absolute;
|
|
||||||
// .pc-nav {
|
|
||||||
// margin-left: 70px;
|
|
||||||
// margin-top: 250px;
|
|
||||||
// text-align: center;
|
|
||||||
// }
|
|
||||||
// .pc-nav-item {
|
|
||||||
// width: 100%;
|
|
||||||
// // height: 18px;
|
|
||||||
// font-family: Microsoft YaHei UI;
|
|
||||||
// font-weight: bold;
|
|
||||||
// font-size: 18px;
|
|
||||||
// color: #FFFFFF;
|
|
||||||
// text-shadow: 0px 1px 0px rgba(0,0,64,0.4);
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// margin-bottom: 25px;
|
|
||||||
// &:hover{
|
|
||||||
// cursor: pointer;
|
|
||||||
// color: #FFA234;
|
|
||||||
// }
|
|
||||||
// .span{
|
|
||||||
// margin-left: 20px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .line_h{
|
|
||||||
// width: 220px;
|
|
||||||
// height: 1px;
|
|
||||||
// background: #FFFFFF;
|
|
||||||
// opacity: 0.2;
|
|
||||||
// margin-left: 40px;
|
|
||||||
// }
|
|
||||||
// .goback{
|
|
||||||
// width: 72px;
|
|
||||||
// height: 17px;
|
|
||||||
// font-family: Microsoft YaHei UI;
|
|
||||||
// font-weight: 400;
|
|
||||||
// font-size: 18px;
|
|
||||||
// color: #FFFFFF;
|
|
||||||
// margin-left:114px ;
|
|
||||||
// margin-top: 20px;
|
|
||||||
// }
|
|
||||||
// .box_1{
|
|
||||||
// width: 200px;
|
|
||||||
// height: 58px;
|
|
||||||
// line-height: 58px;
|
|
||||||
// background: #FFA234;
|
|
||||||
// font-family: Microsoft YaHei UI;
|
|
||||||
// font-weight: 400;
|
|
||||||
// font-size: 18px;
|
|
||||||
// text-align: center;
|
|
||||||
// color: #FFFFFF;
|
|
||||||
// cursor: pointer;
|
|
||||||
// }
|
|
||||||
// .box_2{
|
|
||||||
// width: 200px;
|
|
||||||
// height: 58px;
|
|
||||||
// line-height: 58px;
|
|
||||||
// background: #4EB64B;
|
|
||||||
// margin-top: 16px;
|
|
||||||
// font-family: Microsoft YaHei UI;
|
|
||||||
// font-weight: 400;
|
|
||||||
// font-size: 18px;
|
|
||||||
// color: #FFFFFF;
|
|
||||||
// text-align: center;
|
|
||||||
// cursor: pointer;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
.swiper{
|
.swiper{
|
||||||
|
|
||||||
.swiper-pagination{
|
.swiper-pagination{
|
||||||
@ -294,7 +360,7 @@ onMounted(() => {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: #237FDD;
|
background: rgba(0, 0, 0, 0.44);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
line-height: 38px;
|
line-height: 38px;
|
||||||
@ -307,13 +373,10 @@ onMounted(() => {
|
|||||||
.rightcon{
|
.rightcon{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
background-image: url('/img/index/rightcon.png');
|
background-image: url('/img/index/rightcons.png');
|
||||||
background-size: 100% 100%;
|
// background-size: 100% 100%;
|
||||||
.fiximg{
|
overflow-y: auto;
|
||||||
img{
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.top_search{
|
.top_search{
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
@ -358,7 +421,7 @@ onMounted(() => {
|
|||||||
width: 1200px;
|
width: 1200px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
// margin: 0 auto;
|
// margin: 0 auto;
|
||||||
margin-top: 30px;
|
margin-top: 50px;
|
||||||
margin-left: 400px;
|
margin-left: 400px;
|
||||||
.fly_text{
|
.fly_text{
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -383,18 +446,137 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fly{
|
.fly{
|
||||||
width: 585px;
|
width: 600px;
|
||||||
// padding-left: 80px;
|
// padding-left: 80px;
|
||||||
}
|
}
|
||||||
.fly1{
|
.fly1{
|
||||||
width: 585px;
|
width: 600px;
|
||||||
margin-left: 30px;
|
// margin-left: 30px;
|
||||||
}
|
}
|
||||||
.re_box{
|
.re_box{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: 680px;
|
height: 418px;
|
||||||
margin-top:40px;
|
display: flex;
|
||||||
// padding-left: 60px;
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
// gap: 10px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 12px 0 0 12px;
|
||||||
|
.re_top_img{
|
||||||
|
padding:20px;
|
||||||
|
}
|
||||||
|
.more_j{
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.re_top_img_line{
|
||||||
|
width: 559px;
|
||||||
|
height: 2px;
|
||||||
|
background: #EEEEEE;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.re_box_item{
|
||||||
|
width: 100%;
|
||||||
|
padding:15px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.re_title{
|
||||||
|
width: 100%;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #323232;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
.dian{
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #3B90DF;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// &:hover{
|
||||||
|
// background-image: url('/img/index/listhmbg.png');
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
// cursor: pointer;
|
||||||
|
// .slices_rol{
|
||||||
|
// width: 10px;
|
||||||
|
// height: 88px;
|
||||||
|
// background: #FAA828;
|
||||||
|
// position: absolute;
|
||||||
|
// right: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.home_con1{
|
||||||
|
width: 1200px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// margin: 0 auto;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: 400px;
|
||||||
|
|
||||||
|
.bstbg{
|
||||||
|
width: 280px;
|
||||||
|
height: 150px;
|
||||||
|
background-image: url('/img/index/bstbg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
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;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
.bsttitle{
|
||||||
|
color: #FFE7B8;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.home_con2{
|
||||||
|
width: 1200px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// margin: 0 auto;
|
||||||
|
// margin-top: 10px;
|
||||||
|
margin-left: 400px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.fly1s{
|
||||||
|
width: 580px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.re_boxs{
|
||||||
|
width: 100%;
|
||||||
|
height: 406px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -404,27 +586,35 @@ onMounted(() => {
|
|||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
.re_top_img{
|
.re_top_img{
|
||||||
position: absolute;
|
padding:20px;
|
||||||
top: -66px;
|
|
||||||
right: -26px;
|
|
||||||
}
|
}
|
||||||
|
.more_j{
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.re_box_item{
|
.re_box_item{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 90px;
|
padding:15px 20px;
|
||||||
// border: 1px solid #EEF7FF;
|
|
||||||
padding: 20px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.re_title{
|
.re_title{
|
||||||
// width: 640px;
|
width: 100%;
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
color: #323232;
|
color: #323232;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
.dian{
|
.dian{
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
@ -433,18 +623,18 @@ onMounted(() => {
|
|||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover{
|
// &:hover{
|
||||||
background-image: url('/img/index/listhmbg.png');
|
// background-image: url('/img/index/listhmbg.png');
|
||||||
background-size: 100% 100%;
|
// background-size: 100% 100%;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
.slices_rol{
|
// .slices_rol{
|
||||||
width: 10px;
|
// width: 10px;
|
||||||
height: 88px;
|
// height: 88px;
|
||||||
background: #FAA828;
|
// background: #FAA828;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
right: 0;
|
// right: 0;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -253,7 +253,7 @@ const gotoDetail = (id: number) => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 36px;
|
font-size: 22px;
|
||||||
color: #378EDF;
|
color: #378EDF;
|
||||||
}
|
}
|
||||||
.span2{
|
.span2{
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
<div class="lef_boxitem1_shu"></div>
|
<div class="lef_boxitem1_shu"></div>
|
||||||
<div class="lef_boxitem1_title">新闻动态</div>
|
<div class="lef_boxitem1_title">新闻动态</div>
|
||||||
</div>
|
</div>
|
||||||
<div :class="['lef_boxitem2',{'active': cateid == item.id }]" v-for="(item, index) in newsListtyp" :key="index" @click="getMesList(item.id)">
|
<div :class="['lef_boxitem2',{'active': cateid == item.id }]" v-for="(item, index) in newsListtyp" :key="index" @click="getMesList(item.id,1)">
|
||||||
<div class="lef_boxitem2_title">{{ item.name }}</div>
|
<div class="lef_boxitem2_title">{{ item.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -119,20 +119,22 @@ const getPageList = async () => {
|
|||||||
page.value = page.value;
|
page.value = page.value;
|
||||||
getMesList();
|
getMesList();
|
||||||
}
|
}
|
||||||
const getMesList = async (id: number) => {
|
const getMesList = async (id: number,pagecru: number) => {
|
||||||
cateid.value = id ? id :null;
|
cateid.value = id ? id :cateid.value;
|
||||||
|
page.value = pagecru ? pagecru : page.value;
|
||||||
const res = await $api.post('/api/home.news/index',
|
const res = await $api.post('/api/home.news/index',
|
||||||
{
|
{
|
||||||
cate_id: id ? id :null,
|
cate_id: cateid.value,
|
||||||
limit:7,
|
limit:7,
|
||||||
page:page.value
|
page:page.value,
|
||||||
|
isnews:1
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
total.value = res.data.data.count;
|
total.value = res.data.data.count;
|
||||||
MesList.value = res.data.data.list;
|
MesList.value = res.data.data.list;
|
||||||
}
|
}
|
||||||
const getNewstypeList = async () => {
|
const getNewstypeList = async () => {
|
||||||
const res = await $api.get('/api/home.news/cate')
|
const res = await $api.get('/api/home.news/cate?isnews=1')
|
||||||
newsListtyp.value = res.data.data.list;
|
newsListtyp.value = res.data.data.list;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -317,7 +319,7 @@ const getNewstypeList = async () => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: Microsoft YaHei;
|
font-family: Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 36px;
|
font-size: 22px;
|
||||||
color: #378EDF;
|
color: #378EDF;
|
||||||
}
|
}
|
||||||
.span2{
|
.span2{
|
||||||
|
|||||||
@ -311,7 +311,7 @@ onMounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: Microsoft YaHei UI;
|
font-family: Microsoft YaHei UI;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 36px;
|
font-size: 28px;
|
||||||
color: #393939;
|
color: #393939;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
@ -340,7 +340,8 @@ onMounted(() => {
|
|||||||
.number_t{
|
.number_t{
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
background: #FFA234;
|
// background: #FFA234;
|
||||||
|
background: #E40106;
|
||||||
border-radius: 17px;
|
border-radius: 17px;
|
||||||
font-family: Microsoft YaHei UI;
|
font-family: Microsoft YaHei UI;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|||||||
@ -42,7 +42,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;">
|
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;margin-bottom: 50px;">
|
||||||
<n-pagination v-model:page="page" :page-sizes="[9]" :item-count="total" size="medium"
|
<n-pagination v-model:page="page" :page-sizes="[9]" :item-count="total" size="medium"
|
||||||
@update:page="getPageList" show-quick-jumper>
|
@update:page="getPageList" show-quick-jumper>
|
||||||
<template #goto>
|
<template #goto>
|
||||||
@ -108,7 +108,7 @@ const getPageList = async () => {
|
|||||||
const getBksList = async () => {
|
const getBksList = async () => {
|
||||||
const res = await $api.post('/api/home.encyclopedia/index',
|
const res = await $api.post('/api/home.encyclopedia/index',
|
||||||
{
|
{
|
||||||
limit:9,
|
limit:12,
|
||||||
page:page.value
|
page:page.value
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
@ -126,8 +126,9 @@ const getBksList = async () => {
|
|||||||
.rightcon{
|
.rightcon{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
background-image: url('/img/twbk.jpg');
|
background-image: url('/img/twbk.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
overflow-y: auto;
|
||||||
.fiximg{
|
.fiximg{
|
||||||
.imgs{
|
.imgs{
|
||||||
width: 63px;
|
width: 63px;
|
||||||
|
|||||||
@ -68,10 +68,20 @@ export default defineNuxtConfig({
|
|||||||
target: "https://tsw.hschool.com.cn/api",
|
target: "https://tsw.hschool.com.cn/api",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||||
|
},
|
||||||
|
'http://192.168.10.221/api': {
|
||||||
|
target: "http://tsw.hschool.com.cn/api",
|
||||||
|
changeOrigin: true,
|
||||||
|
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
devServer: {
|
||||||
|
host: '0.0.0.0', // 允许任何IP地址访问
|
||||||
|
port: 3000 // 设置端口号
|
||||||
|
},
|
||||||
|
|
||||||
compatibilityDate: '2025-05-29'
|
compatibilityDate: '2025-05-29'
|
||||||
})
|
})
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="width: 100%;">
|
<div style="width: 100%;height: 100%;">
|
||||||
<!-- Swiper 容器 -->
|
<!-- Swiper 容器 -->
|
||||||
<div :class="['group_666', { 'isOldfont': isOldfont }]" style="position: relative;height: 100vh;">
|
<div :class="['group_666', { 'isOldfont': isOldfont }]" style="position: relative;height: 100vh;">
|
||||||
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" @openOldMode="openOldMode" :is-old="isOldfont"
|
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" @openOldMode="openOldMode" :is-old="isOldfont"
|
||||||
@ -103,7 +103,7 @@
|
|||||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||||
import { nextTick, ref } from 'vue'
|
import { nextTick, ref } from 'vue'
|
||||||
import 'swiper/css'
|
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 ScrollReveal from 'scrollreveal';
|
||||||
import { NNumberAnimation } from 'naive-ui'
|
import { NNumberAnimation } from 'naive-ui'
|
||||||
|
|
||||||
@ -123,14 +123,12 @@ const cdnUrl = useCdn()
|
|||||||
const isOldfont = ref(false);
|
const isOldfont = ref(false);
|
||||||
const { locale } = useI18n();
|
const { locale } = useI18n();
|
||||||
|
|
||||||
const rightValue = ref('-94px');
|
const rightValue = ref('34px');
|
||||||
const isheight = ref(false);
|
|
||||||
const isScrollBottom = ref(false);
|
|
||||||
const updateRight = () => {
|
const updateRight = () => {
|
||||||
if (rightValue.value == '-94px') {
|
if (rightValue.value == '34px') {
|
||||||
rightValue.value = '34px';
|
|
||||||
} else {
|
|
||||||
rightValue.value = '-94px';
|
rightValue.value = '-94px';
|
||||||
|
} else {
|
||||||
|
rightValue.value = '34px';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -149,7 +147,10 @@ const onSwiperNews = (swiper: any) => {
|
|||||||
if (swiper.realIndex == 6 || swiper.realIndex == 9 || swiper.realIndex == 7 || swiper.realIndex == 8) {
|
if (swiper.realIndex == 6 || swiper.realIndex == 9 || swiper.realIndex == 7 || swiper.realIndex == 8) {
|
||||||
newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
|
newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
|
||||||
newsSwiper.allowTouchMove= false;//关闭拖动
|
newsSwiper.allowTouchMove= false;//关闭拖动
|
||||||
} else {
|
} else if(swiper.realIndex == 1 || swiper.realIndex == 5){
|
||||||
|
newsSwiper.mousewheel.disable();
|
||||||
|
newsSwiper.allowTouchMove= true;// 开启拖动
|
||||||
|
}else {
|
||||||
newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
|
newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
|
||||||
newsSwiper.allowTouchMove= true;// 开启拖动
|
newsSwiper.allowTouchMove= true;// 开启拖动
|
||||||
}
|
}
|
||||||
@ -165,7 +166,7 @@ const toswiper = (index: number) => {
|
|||||||
if (index == 7) isAbout.value = true;
|
if (index == 7) isAbout.value = true;
|
||||||
if (index == 8) isMeassage.value = true;
|
if (index == 8) isMeassage.value = true;
|
||||||
if (index == 9) isSearch.value = true;
|
if (index == 9) isSearch.value = true;
|
||||||
newsSwiper.slideTo(index)
|
newsSwiper.slideTo(index,1000,true)
|
||||||
}
|
}
|
||||||
const swiper_exp = ref(0);
|
const swiper_exp = ref(0);
|
||||||
|
|
||||||
@ -178,7 +179,6 @@ const swiperOptionsNews = {
|
|||||||
direction: 'horizontal',
|
direction: 'horizontal',
|
||||||
mousewheel: {
|
mousewheel: {
|
||||||
releaseOnEdges: true,
|
releaseOnEdges: true,
|
||||||
//forceToAxis: isheight.value,
|
|
||||||
sensitivity: 0.5
|
sensitivity: 0.5
|
||||||
},
|
},
|
||||||
slidesPerView: 1,
|
slidesPerView: 1,
|
||||||
@ -210,13 +210,13 @@ const swiperOptionsNews = {
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||||
|
|
||||||
if (coMobile) {
|
if (coMobile) {
|
||||||
// router.push('/phone_index/')
|
// window.location.href="/web/phone_index/";
|
||||||
|
router.push('/phone_index/')
|
||||||
} else {
|
} else {
|
||||||
// router.push('/')
|
router.push('/')
|
||||||
}
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
// 初始化 ScrollReveal
|
// 初始化 ScrollReveal
|
||||||
|
|||||||
769
pages/phone_index.vue
Normal file
769
pages/phone_index.vue
Normal file
@ -0,0 +1,769 @@
|
|||||||
|
<template>
|
||||||
|
<div style="width: 100%;">
|
||||||
|
<!-- Swiper 容器 -->
|
||||||
|
<div class="group_666" style="position: relative;height: 219px;">
|
||||||
|
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||||
|
<swiper-slide>
|
||||||
|
<img :src="`/img/index/homebg.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||||||
|
<!-- <div style="position: absolute;bottom: 30px;right:30px;">
|
||||||
|
<img :src="`/img/index/hmouse.png`" alt="">
|
||||||
|
</div> -->
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
</div>
|
||||||
|
<div class="group_2 flex-col">
|
||||||
|
<div class="box_2 flex-col">
|
||||||
|
<div class="group_3" >
|
||||||
|
<div class="group_4 flex-col">
|
||||||
|
<div class="fly" >
|
||||||
|
<div class="re_box">
|
||||||
|
<span class="w-[100%] text_14" style="margin-top: 0;">文章精选</span>
|
||||||
|
<div class="swiper" style="border-radius: 12px 12px 0 0;">
|
||||||
|
<swiper class="w-[100%] h-[228px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
||||||
|
<swiper-slide v-for="(item,index) in xsImg" :key="index">
|
||||||
|
<div class="img_tits">{{ item.title }}</div>
|
||||||
|
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%;">
|
||||||
|
<div class="re_box_item" v-for="(item,index) in xsList" :key="index" @click="gotoDetail(item.id)">
|
||||||
|
<div class="re_title">
|
||||||
|
<div class="dian"></div>
|
||||||
|
<span class="one-line-ellipsis" style="width:100%;">{{ item.title }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="slices_rol"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background-color: #ffffff;">
|
||||||
|
<div class="box_7 flex-col">
|
||||||
|
<span class="text_24">国务院百事通</span>
|
||||||
|
<div class="dswper">
|
||||||
|
<swiper ref="swiper_exp"
|
||||||
|
:slidesPerView="isMobile ? 1 : 2"
|
||||||
|
loop
|
||||||
|
:autoplay="false"
|
||||||
|
:modules="modules"
|
||||||
|
:watchSlidesProgress="true"
|
||||||
|
@swiper="onSwiperExp">
|
||||||
|
<swiper-slide v-for="(item, index) in 14" :key="index">
|
||||||
|
<div style="padding: 20px;">
|
||||||
|
<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`">
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
<div class="flex-row justify-center align-center w-full" style="gap: 10px;height:40px;">
|
||||||
|
<div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
|
||||||
|
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box_11 flex-col">
|
||||||
|
<div class="text-wrapper_10">
|
||||||
|
<span class="text_41">新闻动态</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-wrapper_11" style="margin-bottom: 20px;">
|
||||||
|
<span class="text_42">news information</span>
|
||||||
|
</div>
|
||||||
|
<div v-for="item in newsList">
|
||||||
|
<div class="box_12 flex-row justify-center">
|
||||||
|
<img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
|
||||||
|
:src="item.image" style="cursor: pointer;;object-fit: cover;" />
|
||||||
|
<div class="box_13 flex-col" @click="openUrl(item.id)">
|
||||||
|
<div class="text-group_6">
|
||||||
|
<div class="one-line-ellipsis news_title_home">
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
<div class="two-line-ellipsis"
|
||||||
|
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
|
||||||
|
{{ item.subtitle }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="group_22 flex-row">
|
||||||
|
<div class="section_6 flex-col"></div>
|
||||||
|
<span class="text_44">{{ item.cate.name }}</span>
|
||||||
|
<span class="text_45">{{ retTime(item.release_time_text) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box_16 flex-row">
|
||||||
|
<div class="text-wrapper_12 flex-col">
|
||||||
|
<nuxt-link to="/phone_societyDutyNew/" class="text_52">
|
||||||
|
<span>查看更多</span>
|
||||||
|
</nuxt-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box_18 flex-col" style="overflow: hidden;">
|
||||||
|
<span class="text_53" style="color: #fff;">留言版</span>
|
||||||
|
|
||||||
|
<div class="numberTopBox" style="margin:0 auto;padding-bottom: 30px;">
|
||||||
|
<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
|
||||||
|
<div class="inputform">
|
||||||
|
<input v-model="formData.name" class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
|
||||||
|
type="text" placeholder="输入您的姓名" />
|
||||||
|
<input v-model="formData.mobile"
|
||||||
|
class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
|
||||||
|
placeholder="请输入您的联系电话" />
|
||||||
|
<input v-model="formData.emil"
|
||||||
|
class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
|
||||||
|
placeholder="请输入您的邮箱" />
|
||||||
|
</div>
|
||||||
|
<div class="relative w-full" style="padding:0px 20px;">
|
||||||
|
<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息" rows="5"
|
||||||
|
maxlength="100" class="w-full"></textarea>
|
||||||
|
<button type="submit" class="contactBut">
|
||||||
|
{{ '提交' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||||
|
import { nextTick, ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import 'swiper/css'
|
||||||
|
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
|
||||||
|
import ScrollReveal from 'scrollreveal';
|
||||||
|
import { NNumberAnimation } from 'naive-ui'
|
||||||
|
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
|
||||||
|
|
||||||
|
import "swiper/css";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import "swiper/css/pagination";
|
||||||
|
import 'swiper/css/effect-coverflow';
|
||||||
|
import 'swiper/css/mousewheel'
|
||||||
|
import 'swiper/css/grid'
|
||||||
|
import 'swiper/css/effect-fade'
|
||||||
|
import 'swiper/css/autoplay'
|
||||||
|
import * as swiperAni from '@/assets/animate/animate.js'
|
||||||
|
import $api from '@/service/webRequest'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useStore } from '~/store'
|
||||||
|
const cdnUrl = useCdn()
|
||||||
|
|
||||||
|
const { locale } = useI18n()
|
||||||
|
|
||||||
|
const typeId = ref(1);
|
||||||
|
|
||||||
|
interface NewsItem {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
image: string;
|
||||||
|
cate: {
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
release_time_text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newsList = ref<NewsItem[]>([])
|
||||||
|
|
||||||
|
const openType = (type: number) => {
|
||||||
|
console.log(type);
|
||||||
|
typeId.value = type;
|
||||||
|
}
|
||||||
|
|
||||||
|
const videoShow = ref(false)
|
||||||
|
|
||||||
|
let newsSwiper: any = null
|
||||||
|
const onSwiperNews = (swiper: any) => {
|
||||||
|
newsSwiper = swiper
|
||||||
|
}
|
||||||
|
const swiperOptionsNews = {
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
|
direction: 'horizontal' as const,
|
||||||
|
slidesPerView: 1,
|
||||||
|
speed: 500,
|
||||||
|
effect: 'fade',
|
||||||
|
loop: true,
|
||||||
|
modules: [EffectFade, Autoplay],
|
||||||
|
}
|
||||||
|
|
||||||
|
let vesSwiper: any = null
|
||||||
|
const onSwiperExp = (swiper: any) => {
|
||||||
|
vesSwiper = swiper
|
||||||
|
// 监听幻灯片变化事件
|
||||||
|
swiper.on('slideChange', () => {
|
||||||
|
// 更新当前活动幻灯片索引
|
||||||
|
activeSlideIndex.value = swiper.realIndex % 3
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const swiper_exp = ref();
|
||||||
|
const activeSlideIndex = ref(0);
|
||||||
|
// 表单数据
|
||||||
|
const formData = reactive({
|
||||||
|
name: '',
|
||||||
|
mobile: '',
|
||||||
|
emil: '',
|
||||||
|
message: ''
|
||||||
|
})
|
||||||
|
const router = useRouter()
|
||||||
|
// 新闻数据
|
||||||
|
const isMobile = ref(false)
|
||||||
|
|
||||||
|
const checkMobile = () => {
|
||||||
|
isMobile.value = window.innerWidth <= 768
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
checkMobile()
|
||||||
|
window.addEventListener('resize', checkMobile)
|
||||||
|
getIndexNews();
|
||||||
|
nextTick(() => {
|
||||||
|
// 初始化 ScrollReveal
|
||||||
|
setTimeout(() => {
|
||||||
|
animate()
|
||||||
|
}, 500)
|
||||||
|
})
|
||||||
|
getxsImg();
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', checkMobile)
|
||||||
|
})
|
||||||
|
|
||||||
|
const animate = () => {
|
||||||
|
|
||||||
|
const sr = ScrollReveal();
|
||||||
|
sr.reveal('.leftBoxTop', {
|
||||||
|
origin: "left",
|
||||||
|
distance: "1000px",
|
||||||
|
duration: 1300,
|
||||||
|
delay: 100,
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.9,
|
||||||
|
reset: true,
|
||||||
|
mobile: true,
|
||||||
|
})
|
||||||
|
sr.reveal('.leftBox', {
|
||||||
|
origin: "left",
|
||||||
|
distance: "1000px",
|
||||||
|
duration: 1300,
|
||||||
|
delay: 100,
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.9,
|
||||||
|
reset: true,
|
||||||
|
mobile: true,
|
||||||
|
})
|
||||||
|
sr.reveal('.rightBox', {
|
||||||
|
origin: "right",
|
||||||
|
distance: "1000px",
|
||||||
|
duration: 1300,
|
||||||
|
delay: 100,
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.9,
|
||||||
|
reset: true,
|
||||||
|
mobile: true,
|
||||||
|
})
|
||||||
|
sr.reveal('.topBox', {
|
||||||
|
origin: "top",
|
||||||
|
distance: "1000px",
|
||||||
|
duration: 1300,
|
||||||
|
delay: 100,
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.9,
|
||||||
|
reset: true,
|
||||||
|
mobile: true,
|
||||||
|
})
|
||||||
|
sr.reveal('.bottomBox', {
|
||||||
|
origin: "bottom",
|
||||||
|
distance: "1000px",
|
||||||
|
duration: 1300,
|
||||||
|
delay: 100,
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.9,
|
||||||
|
reset: true,
|
||||||
|
mobile: true,
|
||||||
|
})
|
||||||
|
sr.reveal('.numberTopBox', {
|
||||||
|
origin: "top",
|
||||||
|
distance: "1000px",
|
||||||
|
duration: 1300,
|
||||||
|
delay: 100,
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.9,
|
||||||
|
reset: false,
|
||||||
|
mobile: true,
|
||||||
|
beforeReveal: function (el: any) {
|
||||||
|
// numberAnimationInstRef.value.play()
|
||||||
|
// numberAnimationInstRefKH.value.play()
|
||||||
|
// numberAnimationInstRefJS.value.play()
|
||||||
|
// numberAnimationInstRefHY.value.play()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
sr.reveal('.group_29 ', {
|
||||||
|
origin: "bottom",
|
||||||
|
distance: "500px",
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.9,
|
||||||
|
reset: false,
|
||||||
|
mobile: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 表单提交方法
|
||||||
|
const submitForm = () => {
|
||||||
|
console.log(formData);
|
||||||
|
|
||||||
|
// 这里可以添加表单验证逻辑
|
||||||
|
if (!formData.name) {
|
||||||
|
alert('请输入您的姓名')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.mobile) {
|
||||||
|
alert('请输入您的手机号码')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.message) {
|
||||||
|
alert('请输入您的留言内容')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
$api.post("/api/home.leave_word/add", formData)
|
||||||
|
.then((res: any) => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.status == 200) {
|
||||||
|
alert('留言成功')
|
||||||
|
} else {
|
||||||
|
alert('失败')
|
||||||
|
}
|
||||||
|
formData.name = '';
|
||||||
|
formData.mobile = '';
|
||||||
|
formData.emil = '';
|
||||||
|
formData.message = '';
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.dir(err)
|
||||||
|
})
|
||||||
|
// 重置表单
|
||||||
|
// formData.name = ''
|
||||||
|
// formData.mobile = ''
|
||||||
|
// formData.content = ''
|
||||||
|
}
|
||||||
|
const getIndexNews = () => {
|
||||||
|
$api.get("/api/home.news/index?page=1&limit=3")
|
||||||
|
.then((res: any) => {
|
||||||
|
console.log(res)
|
||||||
|
newsList.value = res.data.data.list
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.dir(err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const retTime = (dateTimeStr: string) => {
|
||||||
|
return dateTimeStr.split(' ')[0]; // 分割后取日期部分
|
||||||
|
}
|
||||||
|
const openUrl = (id: number) => {
|
||||||
|
window.open(`/phone_info/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const xsImg = ref([]);
|
||||||
|
const xsList = ref([]);
|
||||||
|
//逐梦新声轮播图
|
||||||
|
const getxsImg = async () => {
|
||||||
|
const res = await $api.get('/api/index/images?page=1&limit=3')
|
||||||
|
xsImg.value = res.data.data.list;
|
||||||
|
const ress = await $api.get(`/api/home.news/index?cate_id=99&page=1&limit=4`)
|
||||||
|
xsList.value = ress.data.data.list;
|
||||||
|
}
|
||||||
|
let ImgsSwiper: any = null
|
||||||
|
const onSwiperImgs = (swiper: any) => {
|
||||||
|
ImgsSwiper = swiper
|
||||||
|
}
|
||||||
|
const swiperOptionsimgs = {
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
|
direction: 'horizontal',
|
||||||
|
slidesPerView: 1,
|
||||||
|
speed: 500,
|
||||||
|
// effect: 'fade',
|
||||||
|
loop: true,
|
||||||
|
modules: [Autoplay,Pagination],
|
||||||
|
pagination: {
|
||||||
|
el:'.swiper-pagination'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/animate/animate.min.css";
|
||||||
|
@import "@/assets/index.scss";
|
||||||
|
|
||||||
|
.text_7, .text_8 {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_9, .text_11 {
|
||||||
|
font-size: 16px !important;
|
||||||
|
text-align: center;
|
||||||
|
padding-right:0px
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
font-size: 14px !important;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 0 15px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.text-wrapper_2{
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.leftBox, .rightBox {
|
||||||
|
width: 100% !important;
|
||||||
|
margin: 10px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content_box {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 300px !important;
|
||||||
|
position: relative !important;
|
||||||
|
right: 0 !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hy_my_home {
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
.section_1{
|
||||||
|
height: 323px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.image-wrapper_2{
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.contactForm {
|
||||||
|
.inputform {
|
||||||
|
flex-direction: column !important;
|
||||||
|
width: 100% !important;
|
||||||
|
padding:20px 20px 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactInput {
|
||||||
|
width: 100% !important;
|
||||||
|
margin: 10px 0 !important;
|
||||||
|
height: 40px !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
border-radius: 6px!important;
|
||||||
|
background: #FFFFFF;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#myTextarea {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 120px !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
border-radius: 6px!important;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_12, .box_14 {
|
||||||
|
flex-direction: column !important;
|
||||||
|
}
|
||||||
|
.box_3{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.box_7,.box_13,.box_18{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_7, .image_8, .image_9 {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.text_24{
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.group_22{
|
||||||
|
width: 100%;
|
||||||
|
margin: 27px 0 23px 15px;
|
||||||
|
}
|
||||||
|
.news_my_home {
|
||||||
|
width: 100% !important;
|
||||||
|
margin: 10px 0 !important;
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
|
.contactBut {
|
||||||
|
width: 108px;
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 30px;
|
||||||
|
height: 36px;
|
||||||
|
background-color: #222222;
|
||||||
|
border: none;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 28px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.group_29 {
|
||||||
|
grid-template-columns: repeat(2, 1fr) !important;
|
||||||
|
gap: 10px !important;
|
||||||
|
padding: 0 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom_imgs {
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, .8);
|
||||||
|
z-index: 200;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popCont {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop_video_close {
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: -73px;
|
||||||
|
right: 0px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: var(--close) no-repeat 0 0;
|
||||||
|
background-size: 100% auto;
|
||||||
|
border: 6px solid #979797;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop_video_cont {
|
||||||
|
width: 600px;
|
||||||
|
border: 6px solid #979797;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop_video_cont video {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.text_16 {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.group_10{
|
||||||
|
width: 91%;
|
||||||
|
margin-left:15px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
.text_18 {
|
||||||
|
font-size: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_19 {
|
||||||
|
font-size: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_7 {
|
||||||
|
padding: 10px !important;
|
||||||
|
margin: 0px 0 !important;
|
||||||
|
height: 100%!important;
|
||||||
|
}
|
||||||
|
.text-group_3{
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.section_2sa{
|
||||||
|
height: 700px;
|
||||||
|
}
|
||||||
|
.image-wrapper_5 {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-right: 20px !important;
|
||||||
|
}
|
||||||
|
.text-group_3_3{
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.text-group_3, .text-group_3_3 {
|
||||||
|
flex: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactBut {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 40px !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
margin-top: 10px !important;
|
||||||
|
position: relative !important;
|
||||||
|
right: 0 !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除所有hover效果
|
||||||
|
.hy_my_home:hover,
|
||||||
|
.news_my_home:hover .news_title_home {
|
||||||
|
transform: none !important;
|
||||||
|
color: inherit !important;
|
||||||
|
}
|
||||||
|
.text-group_1,.group_7,.group_6s{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.text_19{
|
||||||
|
width: 100%;
|
||||||
|
line-height: 25px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.box_12{
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
.group_6 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.box_13{
|
||||||
|
width: 100%;
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
.section_2s{
|
||||||
|
height: 710px;
|
||||||
|
}
|
||||||
|
.box_5{
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.text-group_2{
|
||||||
|
width: 55%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.text_17,.text_16{
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.box_6{
|
||||||
|
padding:0px 15px 15px 15px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.image-wrapper_5{
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
.text-group_3{
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.group_10s {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.dswper{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.text-wrapper_10{
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.group_3 {
|
||||||
|
height: auto;
|
||||||
|
padding: 20px;
|
||||||
|
background-size:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.fly{
|
||||||
|
.re_box{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
// gap: 10px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 12px;
|
||||||
|
.re_box_item{
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
border-bottom: 1px dashed #dedede;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.re_title{
|
||||||
|
width: 100%;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #323232;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.dian{
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
background: #3B90DF;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// &:hover{
|
||||||
|
// background-image: url('/img/index/listhmbg.png');
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
// cursor: pointer;
|
||||||
|
// .slices_rol{
|
||||||
|
// width: 10px;
|
||||||
|
// height: 88px;
|
||||||
|
// background: #FAA828;
|
||||||
|
// position: absolute;
|
||||||
|
// right: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.swiper{
|
||||||
|
|
||||||
|
.swiper-pagination{
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 10px;
|
||||||
|
bottom: 0;
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
--swiper-pagination-color: #bf1712;/* 两种都可以 */
|
||||||
|
}
|
||||||
|
.img_tits{
|
||||||
|
font-family: Microsoft YaHei UI;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #FFFEFE;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, .2);
|
||||||
|
width: 100%;
|
||||||
|
height: 38px;
|
||||||
|
line-height: 38px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
pages/phone_info/[id].vue
Normal file
79
pages/phone_info/[id].vue
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div style="width: 100%;">
|
||||||
|
<div style="height:60px;background-color: #ffffff;"></div>
|
||||||
|
<div style="background-color: #eeeeee;width:100%;height: 0.5px;"></div>
|
||||||
|
<div style="background-color: #F8F8F8;">
|
||||||
|
<div class="content_class" style="">
|
||||||
|
<div style="font-size: 20px;font-weight: 700;color: #323232;">{{ info.title }}</div>
|
||||||
|
<div style="font-size: 14px;font-weight: 400;margin-top: 15px;color: #768597;">
|
||||||
|
<div>发 布 人：{{ info.author }}</div>
|
||||||
|
<div style="margin-top: 5px;">发布时间：{{ info.release_time_text }} </div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%;margin:20px 0px 0px 0px;height: 1px;background-color: #EEEEEE;"></div>
|
||||||
|
<div class="info_content" v-html="info.content"></div>
|
||||||
|
<div style="width: 100%;margin: 20px auto;height: 1px;background-color: #EEEEEE;"></div>
|
||||||
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||||
|
<div style="width: 100%;">
|
||||||
|
<div @click="openNews(1)" style="cursor: pointer;">上一篇：{{ info.prev != null ? info.prev.title : '暂无' }}
|
||||||
|
</div>
|
||||||
|
<div @click="openNews(2)" style="margin-top: 20px;cursor: pointer;">
|
||||||
|
下一篇：{{ info.next != null ? info.next.title : '暂无' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { nextTick, ref } from 'vue'
|
||||||
|
const route = useRoute()
|
||||||
|
import $api from '@/service/webRequest'
|
||||||
|
import { Item } from 'ant-design-vue/es/menu'
|
||||||
|
const id = ref(route.params.id)
|
||||||
|
const openNews = (type) => {
|
||||||
|
if (type == 1 && info.value.prev != null) {
|
||||||
|
window.open('/phone_info/' + info.value.prev.id, '_self');
|
||||||
|
}
|
||||||
|
if (type == 2 && info.value.next != null) {
|
||||||
|
window.open('/phone_info/' + info.value.next.id, '_self');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 新闻数据
|
||||||
|
onMounted(() => {
|
||||||
|
getInfo();
|
||||||
|
})
|
||||||
|
const info = ref({});
|
||||||
|
const getInfo = async () => {
|
||||||
|
const res = await $api.get('/api/home.news/detail?id=' + id.value)
|
||||||
|
console.log(res);
|
||||||
|
info.value = res.data.data;
|
||||||
|
}
|
||||||
|
const delWeb = () => {
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "@/assets/animate/animate.min.css";
|
||||||
|
@import "@/assets/index.scss";
|
||||||
|
|
||||||
|
.info_content img {
|
||||||
|
width: 100% !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info_content {
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: justify!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content_class {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
public/img/1c950a7b02087bf4a6441898ec30882310dfcf0e.jpeg
Normal file
BIN
public/img/1c950a7b02087bf4a6441898ec30882310dfcf0e.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
public/img/77c6a7efce1b9d168473b709ed3d6b808d546410.jpeg
Normal file
BIN
public/img/77c6a7efce1b9d168473b709ed3d6b808d546410.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 757 KiB After Width: | Height: | Size: 920 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.6 MiB |
BIN
public/img/b58f8c5494eef01f27df510ffd1d462abe317d27.jpeg
Normal file
BIN
public/img/b58f8c5494eef01f27df510ffd1d462abe317d27.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
public/img/d6ca7bcb0a46f21fd684b47ee8c7b46f0d33ae5a.jpeg
Normal file
BIN
public/img/d6ca7bcb0a46f21fd684b47ee8c7b46f0d33ae5a.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
public/img/index/bst1.png
Normal file
BIN
public/img/index/bst1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public/img/index/bst2.png
Normal file
BIN
public/img/index/bst2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/img/index/bst3.png
Normal file
BIN
public/img/index/bst3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/img/index/bst4.png
Normal file
BIN
public/img/index/bst4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/img/index/bst5.png
Normal file
BIN
public/img/index/bst5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/img/index/bst6.png
Normal file
BIN
public/img/index/bst6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/img/index/bst7.png
Normal file
BIN
public/img/index/bst7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
public/img/index/bst8.png
Normal file
BIN
public/img/index/bst8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
public/img/index/bstbg.png
Normal file
BIN
public/img/index/bstbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
public/img/index/dzjg.png
Normal file
BIN
public/img/index/dzjg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
public/img/index/gwybst.png
Normal file
BIN
public/img/index/gwybst.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/img/index/hlines.png
Normal file
BIN
public/img/index/hlines.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 477 B |
BIN
public/img/index/jcdt.png
Normal file
BIN
public/img/index/jcdt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
public/img/index/more_j.png
Normal file
BIN
public/img/index/more_j.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 B |
BIN
public/img/index/mtjj.png
Normal file
BIN
public/img/index/mtjj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
public/img/index/ptgg.png
Normal file
BIN
public/img/index/ptgg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/img/index/qcly.png
Normal file
BIN
public/img/index/qcly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
public/img/index/rightcons.png
Normal file
BIN
public/img/index/rightcons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 652 KiB |
BIN
public/img/index/rightcons1.png
Normal file
BIN
public/img/index/rightcons1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
public/img/index/wzjx.png
Normal file
BIN
public/img/index/wzjx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
BIN
public/img/twbk.png
Normal file
BIN
public/img/twbk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.3 MiB |
Loading…
x
Reference in New Issue
Block a user