修改团市委修改版1.0
1，首页修改。 2，页面卡通元素替换。
This commit is contained in:
parent
692eaad26c
commit
1baad2504b
@ -1500,17 +1500,11 @@
|
||||
}
|
||||
|
||||
.text_66 {
|
||||
width: 74px;
|
||||
height: 19px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(34, 34, 34, 1);
|
||||
font-size: 18px;
|
||||
font-family: Microsoft YaHei UI-Bold;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 18px;
|
||||
margin: 27px 70px 0 -144px;
|
||||
color: #323232;
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.group_29 {
|
||||
@ -1650,31 +1644,28 @@
|
||||
}
|
||||
|
||||
.group_30 {
|
||||
background-color: rgba(34, 34, 34, 1);
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin-top: -1px;
|
||||
background-color: transparent;
|
||||
width: 1200px;
|
||||
margin-left: 400px;
|
||||
// height: 300px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.text-wrapper_13 {
|
||||
width: 100%;
|
||||
height: 17px;
|
||||
margin-top: 52px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
// height: 17px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.text_67 {
|
||||
width: 64px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: #323232;
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
margin-right: 40px;
|
||||
&:hover {
|
||||
color: #EC0A0A;
|
||||
}
|
||||
}
|
||||
|
||||
.text_68 {
|
||||
@ -1762,11 +1753,11 @@
|
||||
}
|
||||
|
||||
.group_31 {
|
||||
background-color: rgba(216, 216, 216, 0.2);
|
||||
width: 63%;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
margin-top: 32px;
|
||||
width: 1200px;
|
||||
height: 1px;
|
||||
background: #D2D2D2;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
@ -1778,26 +1769,24 @@
|
||||
.group_32 {
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
margin: 29px 0 44px 0px;
|
||||
justify-content: center;
|
||||
// margin: 29px 0 44px 0px;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.text-wrapper_14 {
|
||||
width: 545px;
|
||||
height: 108px;
|
||||
// width: 545px;
|
||||
// height: 108px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text_74 {
|
||||
width: 545px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 12px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
// width: 545px;
|
||||
color: #323232;
|
||||
font-size: 16px;
|
||||
font-family: Source Han Serif CN;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.text_75 {
|
||||
@ -1843,17 +1832,15 @@
|
||||
}
|
||||
|
||||
.image_29 {
|
||||
width: 124px;
|
||||
height: 124px;
|
||||
margin: 1px 0 0 406px;
|
||||
border-radius: 8px;
|
||||
width: 56px;
|
||||
height: 68px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.image_30 {
|
||||
width: 124px;
|
||||
height: 124px;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
margin-top: 1px;
|
||||
margin-left: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
@ -157,7 +157,7 @@ onMounted(() => {
|
||||
height:100%;
|
||||
background-image: url('/img/aboutxq.png');
|
||||
background-size: 100% 100%;
|
||||
overflow: scroll;
|
||||
overflow-y: auto;
|
||||
|
||||
.fiximg {
|
||||
img {
|
||||
|
||||
@ -2,44 +2,64 @@
|
||||
<!-- PC端布局 -->
|
||||
<div class="group_30 flex-col pc-footer">
|
||||
<div class="text-wrapper_13 flex-row">
|
||||
<NuxtLink to="/">
|
||||
<span class="text_67">企业首页</span>
|
||||
<span class="text_66">友情链接:</span>
|
||||
<NuxtLink to="https://www.gov.cn/" target="_blank">
|
||||
<span class="text_67">中央人民政府门户网站</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/proServices/">
|
||||
<span class="text_68">产品&服务</span>
|
||||
<NuxtLink to="https://www.gqt.org.cn/" target="_blank">
|
||||
<span class="text_67">共青团中央</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/aboutUs/">
|
||||
<span class="text_69">灵睿&我们</span>
|
||||
<NuxtLink to="https://www.henan.gov.cn/" target="_blank">
|
||||
<span class="text_67">河南省人民政府网站</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/customerReviews/">
|
||||
<span class="text_70">客户&评价</span>
|
||||
<NuxtLink to="https://www.hnyouth.org.cn/" target="_blank">
|
||||
<span class="text_67">共青团河南省委</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/societyDuty/">
|
||||
<span class="text_71">社会&责任</span>
|
||||
<NuxtLink to="https://www.ly.gov.cn/" target="_blank">
|
||||
<span class="text_67">洛阳市人民政府网站</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/concatUs/">
|
||||
<span class="text_72">加入我们</span>
|
||||
</NuxtLink>
|
||||
<span class="text_73">联系电话：400-080-0379</span>
|
||||
</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">
|
||||
<span class="text_74">
|
||||
洛阳灵睿网络技术有限公司|洛阳网络公司|洛阳网络推广|洛阳易站通总代理|洛阳本地自媒体|洛阳短视频
|
||||
©2021 备案号：中国共产主义青年团洛阳市委员会 版权所有
|
||||
</span>
|
||||
<span class="text_75">法律顾问：河南森合律师事务机构</span>
|
||||
<span class="text_76">
|
||||
©2021 洛阳灵睿网络技术有限公司 All rights reserved.豫ICP备15023627号-3
|
||||
<span class="text_74">
|
||||
备案号：豫ICP备2021030615号-1 Email：lytswbgs@163.com
|
||||
</span>
|
||||
<span class="text_77">
|
||||
洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室
|
||||
<span class="text_74">电话：0379-63225071</span>
|
||||
<span class="text_74">
|
||||
地址：河南省洛阳市洛龙区展览路20号（市总工会大楼）3楼 邮编：471000
|
||||
</span>
|
||||
</div>
|
||||
<img class="image_29" referrerpolicy="no-referrer"
|
||||
src="public/img/wb.png" />
|
||||
<img class="image_30" referrerpolicy="no-referrer"
|
||||
src="public/img/wx.png" />
|
||||
<div class="flex-row align-center text-center">
|
||||
<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`" />
|
||||
<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>
|
||||
|
||||
@ -62,8 +82,10 @@
|
||||
<span class="mobile-address">洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室</span>
|
||||
</div>
|
||||
<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="public/img/wx.png" />
|
||||
<img class="mobile-social-icon" referrerpolicy="no-referrer" :src="`/img/dycode.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>
|
||||
</template>
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
<template>
|
||||
<!-- 左边导航栏 -->
|
||||
<div class="bgimg">
|
||||
<div class="pc-nav">
|
||||
<div class="pc-nav-item" @click="gotoList(1)">
|
||||
<img :src="crrent==1?'/img/index/home1.png':'/img/index/home.png'" alt=""></img>
|
||||
<span :class="['span',{'active': crrent==1}]">官网首页</span>
|
||||
<img v-if="crrent==1" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(2)">
|
||||
<img :src="crrent==2?'/img/index/aboutus1.png':'/img/index/aboutus.png'" alt=""></img>
|
||||
<span :class="['span',{'active': crrent==2}]">关于我们</span>
|
||||
<img v-if="crrent==2" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(3)">
|
||||
<img :src="crrent==3?'/img/index/news1.png':'/img/index/news.png'" alt=""></img>
|
||||
<span :class="['span',{'active': crrent==3}]">新闻动态</span>
|
||||
<img v-if="crrent==3" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(4)">
|
||||
<img :src="crrent==4?'/img/index/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 class="bgimg">
|
||||
<div class="pc-nav">
|
||||
<div class="pc-nav-item" @click="gotoList(1)">
|
||||
<img :src="crrent==1?'/img/index/home1.png':'/img/index/home.png'" alt=""></img>
|
||||
<span :class="['span',{'active': crrent==1}]">官网首页</span>
|
||||
<img v-if="crrent==1" src="/img/index/arrow.png" alt="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="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 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 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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -1,41 +1,10 @@
|
||||
<template>
|
||||
<!-- PC端布局 -->
|
||||
<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="flex justify-between w-full h-full">
|
||||
|
||||
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon">
|
||||
<div class="rightcon" id="homeid" @scroll="hmScroll">
|
||||
<div class="flex top_search ">
|
||||
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
||||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
|
||||
@ -48,59 +17,173 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex h-auto home_con">
|
||||
<div class="fly">
|
||||
<div class="fly_text">
|
||||
<!-- <div class="fly_text">
|
||||
<span>逐梦<b style="color: #FFFFFF;">新声</b></span>
|
||||
<img :src="`/img/index/fly.png`" alt=""></img>
|
||||
</div>
|
||||
<div class="re_box" style="box-shadow: 0px 2px 24px 0px rgba(0,0,0,0.21);border-radius: 12px;">
|
||||
<div class="swiper" style="border-radius: 12px 12px 0 0;">
|
||||
<swiper class="w-[585px] h-[228px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
||||
<swiper-slide v-for="(item,index) in xsImg" :key="index">
|
||||
</div> -->
|
||||
<div class="re_box" >
|
||||
<div class="swiper" style="border-radius: 12px 0 0 12px;">
|
||||
<swiper class="w-[600px] h-[418px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
||||
<swiper-slide v-for="(item,index) in xsImg" :key="index" @click="gotoDetail(item.url)">
|
||||
<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="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 class="fly1">
|
||||
<div class="fly_text">
|
||||
<span>万众<b style="color: #FFFFFF;">瞩目</b></span>
|
||||
<img :src="`/img/index/fly.png`" alt=""></img>
|
||||
</div>
|
||||
<div class="re_box">
|
||||
<img class="re_top_img" :src="`/img/index/booksty.png`"></img>
|
||||
<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="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>
|
||||
</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_title">
|
||||
<div class="dian"></div>
|
||||
<span class="two-line-ellipsis" style="width:400px;">{{ item.title }}</span>
|
||||
<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 class="slices_rol"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右分享 -->
|
||||
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
|
||||
<img :src="`/img/index/douyin.png`" alt="">
|
||||
<img :src="`/img/index/wb.png`" alt="">
|
||||
<img :src="`/img/index/wx.png`" alt="">
|
||||
<img :src="`/img/index/blbl.png`" alt="">
|
||||
</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="gotoDetail(item.id)">
|
||||
<div class="bst_con" >
|
||||
<img :src="`/img/index/bst${i+1}.png`" alt="" style="width: 34px;height: 34px;margin-top: 25px;margin-bottom: 15px;">
|
||||
<div class="bsttitle">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div 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;">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
@ -111,7 +194,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import $api from '@/service/webRequest'
|
||||
import { defineEmits } from 'vue'
|
||||
import { defineEmits} from 'vue'
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import emitter from '@/plugins/emitter'
|
||||
import 'swiper/css'
|
||||
@ -119,17 +202,12 @@ import 'swiper/css/autoplay'
|
||||
import "swiper/css/pagination";
|
||||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade,Mousewheel } from "swiper/modules";
|
||||
const inputSearch = ref('');
|
||||
const xsList = ref([]);
|
||||
const xsId = ref(null);
|
||||
|
||||
const zmList = ref([]);
|
||||
const zmId = ref(null);
|
||||
const xsImg = ref([]);
|
||||
const listType = ref([]);
|
||||
const detailId = ref(null);
|
||||
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
|
||||
const swiperOptionsimgs = {
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
@ -145,7 +223,15 @@ const swiperOptionsimgs = {
|
||||
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 =() => {
|
||||
emit('toSwpe',9);
|
||||
emitter.emit('inputSea', {
|
||||
@ -153,6 +239,20 @@ const toSearch =() => {
|
||||
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) => {
|
||||
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 () => {
|
||||
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;
|
||||
xsId.value = listType.value[0].id;
|
||||
zmId.value = listType.value[1].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?cate_id=${zmId.value}&page=1&limit=6`)
|
||||
listType.value = res.data.data.list.map((item: any) => {
|
||||
if (item.name == '平台公告') {
|
||||
ptggid = item.id;
|
||||
}
|
||||
if (item.name == '基层动态') {
|
||||
jcdtid = item.id;
|
||||
}
|
||||
|
||||
if (item.name == '青春洛阳') {
|
||||
qclyid = item.id;
|
||||
}
|
||||
if (item.name == '媒体聚焦') {
|
||||
mtjjid = item.id;
|
||||
}
|
||||
});
|
||||
|
||||
// xsId.value = listType.value[0].id;
|
||||
//逐梦新声列表 //万众瞩目列表
|
||||
// const ress = await $api.get(`/api/home.news/index?cate_id=${xsId.value}&page=1&limit=4`)
|
||||
// xsList.value = ress.data.data.list;
|
||||
|
||||
//精选文章
|
||||
const ress1 = await $api.get(`/api/home.news/index?page=1&limit=5&fine=1`)
|
||||
zmList.value = ress1.data.data.list;
|
||||
|
||||
//平台公告
|
||||
const ress2 = await $api.get(`/api/home.news/index?cate_id=${ptggid}&page=1&limit=5`)
|
||||
ptList.value = ress2.data.data.list;
|
||||
//基层动态
|
||||
const ress3 = await $api.get(`/api/home.news/index?cate_id=${jcdtid}&page=1&limit=5`)
|
||||
jcList.value = ress3.data.data.list;
|
||||
//青春洛阳
|
||||
const ress4 = await $api.get(`/api/home.news/index?cate_id=${qclyid}&page=1&limit=5`)
|
||||
qcList.value = ress4.data.data.list;
|
||||
//媒体聚焦
|
||||
const ress5 = await $api.get(`/api/home.news/index?cate_id=${mtjjid}&page=1&limit=5`)
|
||||
mtList.value = ress5.data.data.list;
|
||||
}
|
||||
|
||||
//逐梦新声轮播图
|
||||
@ -193,6 +330,7 @@ const getxsImg = async () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', hmScroll);
|
||||
getxsImg();
|
||||
getNewstypeList();
|
||||
})
|
||||
@ -203,79 +341,7 @@ onMounted(() => {
|
||||
|
||||
|
||||
/* 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-pagination{
|
||||
@ -294,7 +360,7 @@ onMounted(() => {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #237FDD;
|
||||
background: rgba(0, 0, 0, 0.44);
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
@ -307,13 +373,10 @@ onMounted(() => {
|
||||
.rightcon{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/index/rightcon.png');
|
||||
background-size: 100% 100%;
|
||||
.fiximg{
|
||||
img{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
background-image: url('/img/index/rightcons.png');
|
||||
// background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
.top_search{
|
||||
margin-top: 50px;
|
||||
@ -358,7 +421,7 @@ onMounted(() => {
|
||||
width: 1200px;
|
||||
box-sizing: border-box;
|
||||
// margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
margin-top: 50px;
|
||||
margin-left: 400px;
|
||||
.fly_text{
|
||||
position: relative;
|
||||
@ -383,18 +446,137 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
.fly{
|
||||
width: 585px;
|
||||
width: 600px;
|
||||
// padding-left: 80px;
|
||||
}
|
||||
.fly1{
|
||||
width: 585px;
|
||||
margin-left: 30px;
|
||||
width: 600px;
|
||||
// margin-left: 30px;
|
||||
}
|
||||
.re_box{
|
||||
width: 100%;
|
||||
// height: 680px;
|
||||
margin-top:40px;
|
||||
// padding-left: 60px;
|
||||
height: 418px;
|
||||
display: flex;
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
@ -404,27 +586,35 @@ onMounted(() => {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
.re_top_img{
|
||||
position: absolute;
|
||||
top: -66px;
|
||||
right: -26px;
|
||||
padding:20px;
|
||||
}
|
||||
.more_j{
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.re_box_item{
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
// border: 1px solid #EEF7FF;
|
||||
padding: 20px;
|
||||
padding:15px 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.re_title{
|
||||
// width: 640px;
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.dian{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@ -433,18 +623,18 @@ onMounted(() => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
// &: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;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -253,7 +253,7 @@ const gotoDetail = (id: number) => {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
font-size: 22px;
|
||||
color: #378EDF;
|
||||
}
|
||||
.span2{
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
<div class="lef_boxitem1_shu"></div>
|
||||
<div class="lef_boxitem1_title">新闻动态</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>
|
||||
</div>
|
||||
@ -119,20 +119,22 @@ const getPageList = async () => {
|
||||
page.value = page.value;
|
||||
getMesList();
|
||||
}
|
||||
const getMesList = async (id: number) => {
|
||||
cateid.value = id ? id :null;
|
||||
const getMesList = async (id: number,pagecru: number) => {
|
||||
cateid.value = id ? id :cateid.value;
|
||||
page.value = pagecru ? pagecru : page.value;
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
{
|
||||
cate_id: id ? id :null,
|
||||
cate_id: cateid.value,
|
||||
limit:7,
|
||||
page:page.value
|
||||
page:page.value,
|
||||
isnews:1
|
||||
}
|
||||
)
|
||||
total.value = res.data.data.count;
|
||||
MesList.value = res.data.data.list;
|
||||
}
|
||||
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;
|
||||
}
|
||||
</script>
|
||||
@ -317,7 +319,7 @@ const getNewstypeList = async () => {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 36px;
|
||||
font-size: 22px;
|
||||
color: #378EDF;
|
||||
}
|
||||
.span2{
|
||||
|
||||
@ -311,7 +311,7 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
font-size: 28px;
|
||||
color: #393939;
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -340,7 +340,8 @@ onMounted(() => {
|
||||
.number_t{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background: #FFA234;
|
||||
// background: #FFA234;
|
||||
background: #E40106;
|
||||
border-radius: 17px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
</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"
|
||||
@update:page="getPageList" show-quick-jumper>
|
||||
<template #goto>
|
||||
@ -108,7 +108,7 @@ const getPageList = async () => {
|
||||
const getBksList = async () => {
|
||||
const res = await $api.post('/api/home.encyclopedia/index',
|
||||
{
|
||||
limit:9,
|
||||
limit:12,
|
||||
page:page.value
|
||||
}
|
||||
)
|
||||
@ -126,8 +126,9 @@ const getBksList = async () => {
|
||||
.rightcon{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/twbk.jpg');
|
||||
background-image: url('/img/twbk.png');
|
||||
background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
.fiximg{
|
||||
.imgs{
|
||||
width: 63px;
|
||||
|
||||
@ -68,10 +68,20 @@ export default defineNuxtConfig({
|
||||
target: "https://tsw.hschool.com.cn/api",
|
||||
changeOrigin: true,
|
||||
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'
|
||||
})
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<div style="width: 100%;height: 100%;">
|
||||
<!-- Swiper 容器 -->
|
||||
<div :class="['group_666', { 'isOldfont': isOldfont }]" style="position: relative;height: 100vh;">
|
||||
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" @openOldMode="openOldMode" :is-old="isOldfont"
|
||||
@ -103,7 +103,7 @@
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { nextTick, ref } from 'vue'
|
||||
import 'swiper/css'
|
||||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade, Mousewheel } from "swiper/modules";
|
||||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade, Mousewheel} from "swiper/modules";
|
||||
import ScrollReveal from 'scrollreveal';
|
||||
import { NNumberAnimation } from 'naive-ui'
|
||||
|
||||
@ -123,14 +123,12 @@ const cdnUrl = useCdn()
|
||||
const isOldfont = ref(false);
|
||||
const { locale } = useI18n();
|
||||
|
||||
const rightValue = ref('-94px');
|
||||
const isheight = ref(false);
|
||||
const isScrollBottom = ref(false);
|
||||
const rightValue = ref('34px');
|
||||
const updateRight = () => {
|
||||
if (rightValue.value == '-94px') {
|
||||
rightValue.value = '34px';
|
||||
} else {
|
||||
if (rightValue.value == '34px') {
|
||||
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) {
|
||||
newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
|
||||
newsSwiper.allowTouchMove= false;//关闭拖动
|
||||
} else {
|
||||
} else if(swiper.realIndex == 1 || swiper.realIndex == 5){
|
||||
newsSwiper.mousewheel.disable();
|
||||
newsSwiper.allowTouchMove= true;// 开启拖动
|
||||
}else {
|
||||
newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
|
||||
newsSwiper.allowTouchMove= true;// 开启拖动
|
||||
}
|
||||
@ -165,7 +166,7 @@ const toswiper = (index: number) => {
|
||||
if (index == 7) isAbout.value = true;
|
||||
if (index == 8) isMeassage.value = true;
|
||||
if (index == 9) isSearch.value = true;
|
||||
newsSwiper.slideTo(index)
|
||||
newsSwiper.slideTo(index,1000,true)
|
||||
}
|
||||
const swiper_exp = ref(0);
|
||||
|
||||
@ -178,7 +179,6 @@ const swiperOptionsNews = {
|
||||
direction: 'horizontal',
|
||||
mousewheel: {
|
||||
releaseOnEdges: true,
|
||||
//forceToAxis: isheight.value,
|
||||
sensitivity: 0.5
|
||||
},
|
||||
slidesPerView: 1,
|
||||
@ -210,13 +210,13 @@ const swiperOptionsNews = {
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
|
||||
if (coMobile) {
|
||||
// router.push('/phone_index/')
|
||||
// window.location.href="/web/phone_index/";
|
||||
router.push('/phone_index/')
|
||||
} else {
|
||||
// router.push('/')
|
||||
router.push('/')
|
||||
}
|
||||
nextTick(() => {
|
||||
// 初始化 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