445 lines
14 KiB
Vue
445 lines
14 KiB
Vue
<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="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="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" @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_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>
|
|
|
|
<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 style="position: absolute;bottom: 30px;right:30px;">
|
|
<img :src="`/img/index/hmouse.png`" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import $api from '@/service/webRequest'
|
|
import { defineEmits } from 'vue'
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import emitter from '@/plugins/emitter'
|
|
import 'swiper/css'
|
|
import 'swiper/css/autoplay'
|
|
import "swiper/css/pagination";
|
|
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade,Mousewheel } from "swiper/modules";
|
|
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,
|
|
disableOnInteraction: false,
|
|
},
|
|
direction: 'horizontal',
|
|
slidesPerView: 1,
|
|
speed: 500,
|
|
// effect: 'fade',
|
|
loop: true,
|
|
modules: [Autoplay,Pagination],
|
|
pagination: {
|
|
el:'.swiper-pagination'
|
|
},
|
|
}
|
|
|
|
//跳转详情
|
|
const gotoDetail = (id: number) => {
|
|
detailId.value = {
|
|
id: id,
|
|
type: '1'
|
|
};
|
|
localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
|
emit('toSwpe',6)
|
|
emitter.emit('detailId', detailId.value);
|
|
}
|
|
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>
|
|
@import '@/assets/index.scss';
|
|
|
|
|
|
/* 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{
|
|
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{
|
|
width:100%;
|
|
height:100%;
|
|
background-image: url('/img/index/rightcon.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;
|
|
}
|
|
.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>
|