wo123/tuanshiwei-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改对接首页，部分详情

Browse Source
This commit is contained in:
张凯 2025-05-27 18:33:40 +08:00
parent 8c8523dca4
commit 1e045775a7
9 changed files with 805 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
components/AppAbout.vue
View File

@ -17,7 +17,18 @@
<img src="/img/about/cpc.png" alt="">
</div>
<div style="margin-left: 100px;">
<img src="/img/about/cpcrit.png" alt="">
<swiper class="w-[667px] h-[340px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
<swiper-slide v-for="(item,index) in listImg" :key="index">
<div class="img_tits">
<p>{{item.title1 }}</p>
<p>{{item.title2 }}</p>
<p>{{item.title3 }}</p>
<p>{{item.title4 }}</p>
<p v-if="item.title5">{{item.title5 }}</p>
</div>
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
</div>
@ -55,7 +66,11 @@
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/autoplay'
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow,EffectCube,Mousewheel } from "swiper/modules";
const bmList = ref([
{ abshow:false,title: '办公室', telnum: '63225071', content: '协调处理机关日常事务；负责团市委重要会议的会务工作；负责机关文秘、信访、保密、网络工作；负责编发内部信息、简报工作；指导全市共青团的调查研究工作；负责对外联系、机关财务、资产、行政后勤等管理工作。' },
{ abshow:false,title: '组织部', telnum: '63225070', content: '研究制定全市共青团组织、团干部和团员队伍建设的政策措施；指导推动全市团的基层组织、团员队伍和团干部队伍建设；负责团费收缴、管理和全市团的基层组织统计工作；组织开展全市性先进基层团组织和优秀团员、优秀团干部的评选表彰工作；指导推动团的基层阵地建设和基层组织信息化工作；协助党委管理县级团委的领导班子成员；协助管理在洛的团中央委员、候补委员和团省委委员、候补委员；指导全市团干部的教育培训；负责团市委机关和直属单位的人事管理、机构编制等工作；负责离退休人员的管理服务工作。' },
@ -67,12 +82,67 @@ const bmList = ref([
{ abshow:false,title: '机关党总支', telnum: '63235856', content: '负责机关和直属单位的党群工作。' }
]);
const listImg = ref([
{
title1: '一、领导全市的共青团工作。',
title2: '二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。',
title3: '三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。',
title4: '四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。',
image: '/img/about/cpcrit.png'
},
{
title1: '五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。',
title2: '六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。',
title3: '七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。',
title4: '八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。',
image: '/img/about/cpcrit1.png'
},
{
title1: '九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。',
title2: '十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。',
title3: '十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。',
title4: '十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。',
title5: '十三、承担市委交办的其他事项。',
image: '/img/about/cpcrit2.png'
}
])
const mouseenters = (index: number) => {
bmList.value.forEach((item, index) => {
item.abshow = false;
})
bmList.value[index].abshow = true;
}
const swiperOptionsimgs = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
// effect: 'coverflow',
loop: true,
modules: [Autoplay,EffectCoverflow],
// centeredSlides: false,
// coverflowEffect: {
// rotate: 30,
// stretch: 10,
// depth: 60,
// modifier: 2,
// slideShadows : true
// },
// pagination: {
// el:'.swiper-pagination'
// },
}
let newsSwiper: any = null
const onSwiperImgs = (swiper: any) => {
newsSwiper = swiper
// swiper.on('slideChange', () => {
// // 更新当前活动幻灯片索引
// })
}
onMounted(() => {
// 挂载方法
@ -205,5 +275,20 @@ onMounted(() => {
}
}
.swiper{
.img_tits{
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 16px;
color: #FFFFFF;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-left: 10px;
p{
margin: 30px 20px;
}
}
}
</style>

8
components/AppContactUs.vue
View File

@ -40,13 +40,13 @@
<div style="width: 572px;height: 69px;margin-left: 415px;">
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
</div>
<div class="inputform">
<!-- <div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
placeholder="请输入搜索关键字" />
<div class="search_rinput">
<img src="/img/index/hmsearch.png" alt="">
</div>
</div>
</div> -->
</div>
<div class="flex flex-col w-full h-full" style="width: 1300px;margin: 0 auto;">
<div
@ -387,8 +387,8 @@ const submitForm = () => {
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
opacity: 0.8;
padding-left: 20px;
padding-top: 20px;
padding-left: 10px;
padding-top: 10px;
resize: none;
border: 1px solid #999999;
}

55
components/AppHeader.vue
View File

@ -2,26 +2,30 @@
<!-- 左边导航栏 -->
<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 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">
<img src="/img/index/aboutus.png" alt=""></img>
<span class="span">关于我们</span>
<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">
<img src="/img/index/news.png" alt=""></img>
<span class="span">新闻动态</span>
<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">
<img src="/img/index/message.png" alt=""></img>
<span class="span">信息公开</span>
<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">
<img src="/img/index/baike.png" alt=""></img>
<span class="span">团务百科</span>
<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>
@ -34,16 +38,26 @@
</template>
<script lang="ts" setup>
import { ref,defineEmits } from 'vue'
const crrent = ref(0)
const emit = defineEmits(['crrentTop']);
import { ref,defineEmits,defineProps} from 'vue'
const props = defineProps({
crrentNum:Number
});
const crrent = ref(1);
const emit = defineEmits(['crrentTop'])
const goBack = () => {
emit('crrentTop',0)
}
const gotoList = (index:number) => {
crrent.value = index
emit('crrentTop',index)
}
//更新当前索引值
onUpdated(() => {
crrent.value = props.crrentNum;
})
</script>
<style lang="scss" scoped>
@ -77,6 +91,9 @@ const gotoList = (index:number) => {
}
.span{
margin-left: 20px;
&.active{
color: #FFA234;
}
}
}
.line_h{

228
components/AppHome.vue
View File

@ -48,9 +48,50 @@
</div>
</div>
</div>
<div class="flex justify-between w-full h-full">
<div class="fly"></div>
<div class="fly1"></div>
<div class="flex h-auto home_con">
<div class="fly">
<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 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">
<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_item" v-for="(item,index) in zmList" :key="index" style="margin-top: 10px;">
<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>
<!-- 右分享 -->
@ -69,8 +110,69 @@
</template>
<script lang="ts" setup>
import $api from '@/service/webRequest'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/autoplay'
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade,Mousewheel } from "swiper/modules";
const inputSearch = ref('');
const xsList = ref([]);
const xsId = ref(null);
const zmList = ref([]);
const zmId = ref(null);
const xsImg = ref([]);
const listType = ref([]);
const swiperOptionsimgs = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
// effect: 'fade',
loop: true,
modules: [Autoplay,Pagination],
pagination: {
el:'.swiper-pagination'
},
}
let newsSwiper: any = null
const onSwiperImgs = (swiper: any) => {
newsSwiper = swiper
// swiper.on('slideChange', () => {
// // 更新当前活动幻灯片索引
// })
}
//新闻分类
const getNewstypeList = async () => {
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`)
zmList.value = ress1.data.data.list;
}
//逐梦新声轮播图
const getxsImg = async () => {
const res = await $api.get('/api/index/images?page=1&limit=3')
xsImg.value = res.data.data.list;
}
onMounted(() => {
getxsImg();
getNewstypeList();
})
</script>
<style lang="scss" scoped>
@ -151,8 +253,32 @@ const inputSearch = ref('');
// cursor: pointer;
// }
// }
.swiper{
.swiper-pagination{
text-align: right;
padding-right: 10px;
bottom: 0;
height: 38px;
line-height: 38px;
--swiper-pagination-color: #FFCD52;/* 两种都可以 */
}
.img_tits{
font-family: Microsoft YaHei UI;
font-weight: bold;
font-size: 18px;
color: #FFFEFE;
position: absolute;
bottom: 0;
left: 0;
background: #237FDD;
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 10px;
}
}
.rightcon{
@ -205,4 +331,98 @@ const inputSearch = ref('');
justify-content: center;
align-items: center;
}
.home_con{
width: 1200px;
box-sizing: border-box;
// margin: 0 auto;
margin-top: 30px;
margin-left: 400px;
.fly_text{
position: relative;
width: 305px;
height: 101px;
img{
position: absolute;
top: 0;
right: 0;
width: 305px;
height: 101px;
}
span{
position: absolute;
top: 40px;
left: 100px;
font-family: Microsoft YaHei UI;
font-weight: bolder;
font-size: 36px;
color: #FFA234;
z-index: 1;
}
}
.fly{
width: 585px;
// padding-left: 80px;
}
.fly1{
width: 585px;
margin-left: 30px;
}
.re_box{
width: 100%;
// height: 680px;
margin-top:40px;
// padding-left: 60px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
// gap: 10px;
background: #FFFFFF;
position: relative;
border-radius: 12px;
.re_top_img{
position: absolute;
top: -66px;
right: -26px;
}
.re_box_item{
width: 100%;
height: 90px;
// border: 1px solid #EEF7FF;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.re_title{
// width: 640px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #323232;
display: flex;
align-items: center;
.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;
}
}
}
}
}
</style>

142
components/AppNews.vue
View File

@ -39,8 +39,8 @@
<div class="re_date">
<div class="shu"></div>
<div class="right_tex">
<span class="span1">{{item.release_time_text.slice(8,10)}}</span>
<span class="span2">{{item.release_time_text.slice(0,7)}}</span>
<span class="span1">{{ item.release_time_text.slice(8,10)}}</span>
<span class="span2">{{ item.release_time_text.slice(0,7)}}</span>
</div>
</div>
</div>
@ -227,88 +227,88 @@ const getNewstypeList = async () => {
.rig_box{
width: 921px;
.re_box{
width: 100%;
height: 680px;
margin: 0 auto;
margin-top:40px;
// padding-left: 60px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
gap: 10px;
.re_box_item{
width: 100%;
height: 90px;
background: #FFFFFF;
border: 1px solid #EEF7FF;
padding: 20px;
box-sizing: border-box;
height: 680px;
margin: 0 auto;
margin-top:40px;
// padding-left: 60px;
display: flex;
justify-content: space-between;
align-items: center;
.re_title{
// width: 640px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #323232;
display: flex;
align-items: center;
.dian{
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
}
.re_date{
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #368BDB;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
gap: 10px;
.re_box_item{
width: 100%;
height: 90px;
background: #FFFFFF;
border: 1px solid #EEF7FF;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.shu{
background: #EEEEEE;
width: 1px;height: 50px;
margin-right: 20px;
}
.right_tex{
.re_title{
// width: 640px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 18px;
color: #323232;
display: flex;
flex-direction: column;
width: 80px;
text-align: center;
.span1{
width: 100%;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 36px;
color: #378EDF;
}
.span2{
width: 100%;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #378EDF;
align-items: center;
.dian{
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
}
}
&:hover{
background-image: url('/img/message/listbg.png');
background-size: 100% 100%;
cursor: pointer;
.re_date{
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #368BDB;
display: flex;
justify-content: space-between;
align-items: center;
.shu{
background: #FFFFFF;
background: #EEEEEE;
width: 1px;height: 50px;
margin-right: 20px;
}
.right_tex{
display: flex;
flex-direction: column;
width: 80px;
text-align: center;
.span1{
width: 100%;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 36px;
color: #378EDF;
}
.span2{
width: 100%;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #378EDF;
}
}
}
&:hover{
background-image: url('/img/message/listbg.png');
background-size: 100% 100%;
cursor: pointer;
.re_date{
.shu{
background: #FFFFFF;
}
}
}
}
}
}
}
.pages_tsw{
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
color: #ffffff;

362
components/AppSearchdel.vue Normal file
View File

@ -0,0 +1,362 @@
<template>
<!-- PC端布局 -->
<div class="flex justify-between w-full h-full">
<!-- 左边导航栏 -->
<!-- 右边内容栏 -->
<div class="rightcon">
<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" />
</div>
<div class="inputform">
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
placeholder="请输入搜索关键字" />
<div class="search_rinput">
<img src="/img/index/hmsearch.png" alt="" />
</div>
</div>
</div>
<div class="News_box">
<div class="lef_box">
<div class="re_box">
<div class="re_box_item">
<div class='re_mian'>找到结果198条</div>
<div class="re_title">团市委的主要职责</div>
<div class="re_content">
<span>一、领导全市的共青团工作。</span>
<span>二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。</span>
<span>三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。</span>
</div>
<div class="re_date">发布时间：2024-07-23 10:52:00</div>
<div class="re_slice"></div>
</div>
</div>
</div>
<div class="rig_box">
<n-tabs :bar-width="0" type="line"
class="custom-tabs" pane-style="background-color: #ffffff;">
<n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;">
<div class="flex flex-row" v-for="item,index in remList" :key="index" style="padding-bottom:30px;">
<div class="number_t" v-if="index == 0 || index == 1 || index == 2">
{{index+1 > 10 ? index + 1 : '0'+(index+1) }}
</div>
<div class="number_t1" v-else>
<span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
<span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
</div>
<div class="content_t2">
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
<p class="p2 flex justify-between items-center">
<span>{{ item.source }}</span>
<span class="flex items-center">
<img src="/img/views.png" alt="" style="padding-right: 10px;">
{{ item.views }}
</span>
</p>
</div>
</div>
</n-tab-pane>
<n-tab-pane name="jay chou" tab="精选文章" style="padding: 30px;">
<div class="flex flex-row" v-for="item,index in jinxList" :key="index" style="padding-bottom:30px;">
<div class="number_t" v-if="index == 0 || index == 1 || index == 2">
{{index+1 > 10 ? index + 1 : '0'+(index+1) }}
</div>
<div class="number_t1" v-else>
<span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
<span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
</div>
<div class="content_t2">
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
<p class="p2 flex justify-between items-center">
<span>{{ item.source }}</span>
<span class="flex items-center">
<img src="/img/views.png" alt="" style="padding-right: 10px;">
{{ item.views }}
</span>
</p>
</div>
</div>
</n-tab-pane>
</n-tabs>
</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 style="position: absolute; bottom: 30px; right: 30px">
<img :src="`/img/index/hmouse.png`" alt="" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { NTabs,NTabPane } from 'naive-ui'
import $api from '@/service/webRequest'
const inputSearch = ref('')
const page = ref(1);
const jinxList = ref([]);
const remList = ref([]);
const getjinxList = async () => {
const res = await $api.post('/api/home.news/index',
{
limit:6,
page:page.value,
fine:1
}
)
jinxList.value = res.data.data.list;
}
const getremList = async () => {
const res = await $api.post('/api/home.news/index',
{
limit:6,
page:page.value,
hot:1
}
)
remList.value = res.data.data.list;
}
//加载中
onMounted(() => {
getjinxList();
getremList();
})
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
/* pc端样式 */
.rightcon {
width: 1920px;
height: 100%;
background-image: url('/img/xwdt.png');
background-size: 100% 100%;
.fiximg {
img {
margin-bottom: 20px;
}
}
}
.top_search {
margin-top: 50px;
height: 70px;
justify-content: space-between;
align-items: center;
}
.inputform {
position: relative;
width: 340px;
margin-right: 319px;
}
.contactInput {
width: 337px;
height: 50px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #dee4e8;
padding-left: 15px;
}
.contactInput::placeholder {
color: #999999;
}
.contactInput:focus {
outline: none;
}
.search_rinput {
width: 68px;
height: 50px;
background: #e6e6e6;
border-radius: 0px 8px 8px 0px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
.News_box {
display: flex;
justify-content: space-between;
width: 1300px;
margin: 0 auto;
.lef_box {
width: 835px;
.re_box {
width: 100%;
height: 680px;
margin: 0 auto;
margin-top: 40px;
padding-left: 100px;
.re_box_item {
width: 100%;
background: #ffffff;
border: 1px solid #eef7ff;
padding: 30px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
/* 允许换行 */
justify-content: flex-start;
/* 项目左对齐 */
.re_slice {
width: 841px;
border-bottom: 1px dashed #bbbbbb;
margin-top: 20px;
margin-bottom: 30px;
}
.re_date{
width: 100%;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #338CDE;
}
.re_mian {
width: 248px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #666666;
margin-bottom: 15px;
}
.re_rouse{
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #999999;
width: 100%;
margin-top: 10px;
}
.re_title {
width: 100%;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
color: #393939;
margin-bottom: 10px;
}
.re_content {
width: 100%;
height: 100%;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 16px;
color: #999999;
margin-bottom: 20px;
}
}
}
}
.rig_box {
width: 439px;
height: 100%;
margin-top: 40px;
margin-left: 40px;
.custom-tabs {
.number_t{
width: 34px;
height: 34px;
background: #FFA234;
border-radius: 17px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.number_t1{
width: 34px;
height: 34px;
background: #FFFFFF;
border-radius: 17px;
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
color: #323232;
display: flex;
justify-content: center;
align-items: end;
margin-right: 20px;
}
.content_t2{
font-family: Microsoft YaHei UI;
font-weight: 400;
width: 80%;
.p1{
margin-top: 7px;
font-size: 18px;
color: #393939;
}
.p2{
margin-top: 15px;
font-size: 16px;
color: #999999;
}
}
}
:deep(.n-tabs .n-tabs-tab-wrapper){
width: 215px;
height: 72px;
background: #ffffff;
font-size: 18px;
justify-content: center;
}
:deep(.n-tabs .n-tabs-tab .n-tabs-tab__label){
font-family: Microsoft YaHei UI;
font-weight: 400;
font-size: 18px;
}
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab:hover, .n-tabs.n-tabs--bar-type .n-tabs-tab:hover){
color: #348CDE;
}
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active){
color: #348CDE;
background: #F1F8FF;
width: 100%;
display: flex;
justify-content: center;
border-top:solid 2px #378FDF;
}
:deep(.n-tabs .n-tabs-tab-pad){
width: 0;
}
}
}
</style>

34
pages/index.vue
View File

@ -2,7 +2,7 @@
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 100vh;overflow: hidden;">
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" ref="AppHeader" />
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" ref="AppHeader" :crrent-num="swiper_exp" />
<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;">
@ -42,7 +42,10 @@
<swiper-slide>
<AppContactUs></AppContactUs>
</swiper-slide>
<!-- 搜索详情 -->
<swiper-slide>
<AppSearchdel></AppSearchdel>
</swiper-slide>
</swiper>
<!-- <div style="position: absolute;width: 100%;z-index: 100;">
@ -75,7 +78,6 @@ import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade,Mousewheel } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade,Mousewheel];
import "swiper/css";
import "swiper/css/navigation";
@ -108,7 +110,8 @@ const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
swiper.on('slideChange', () => {
// 更新当前活动幻灯片索引
swiper_exp.value = swiper.realIndex
swiper_exp.value = swiper.realIndex;
})
}
//跳转每页swiper的方法
@ -128,6 +131,9 @@ const swiperOptionsNews = {
},
slidesPerView: 1,
speed: 500,
lazy: {
loadPrevNext: true,
},
// effect: 'fade',
// loop: true,
modules: [Mousewheel],
@ -137,17 +143,17 @@ const swiperOptionsNews = {
// },
}
let vesSwiper: any = null
const onSwiperExp = (swiper: any) => {
vesSwiper = swiper
// 监听幻灯片变化事件
swiper.on('slideChange', () => {
// 更新当前活动幻灯片索引
activeSlideIndex.value = swiper.realIndex % 3
})
}
// let vesSwiper: any = null
// const onSwiperExp = (swiper: any) => {
// vesSwiper = swiper
// // 监听幻灯片变化事件
// swiper.on('slideChange', () => {
// // 更新当前活动幻灯片索引
// activeSlideIndex.value = swiper.realIndex % 3
// })
// }
const activeSlideIndex = ref(0);
// const activeSlideIndex = ref(0);
const router = useRouter()

0
public/img/index/9cdcc6d0d2f7b347573ad8ee71fc15dcd318f5e4133a0-kjdJgz_fw1200.png → public/img/index/booksty.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

0
public/img/index/组 25.png → public/img/index/listhmbg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB