2025-05-24 09:12:30 +08:00
|
|
|
<template>
|
|
|
|
|
<!-- PC端布局 -->
|
2025-06-07 15:52:33 +08:00
|
|
|
<div class="flex justify-between w-full h-full">
|
|
|
|
|
|
2025-05-24 09:12:30 +08:00
|
|
|
|
|
|
|
|
<!-- 右边内容栏 -->
|
2025-06-07 15:52:33 +08:00
|
|
|
<div class="rightcon" id="homeid" @scroll="hmScroll">
|
2025-05-24 09:12:30 +08:00
|
|
|
<div class="flex top_search ">
|
2025-06-11 18:23:32 +08:00
|
|
|
<div style="width: 572px;margin-left: 415px;">
|
2025-05-24 09:12:30 +08:00
|
|
|
<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="请输入搜索关键字" />
|
2025-05-30 16:36:00 +08:00
|
|
|
<div class="search_rinput" @click="toSearch">
|
2025-05-24 09:12:30 +08:00
|
|
|
<img src="/img/index/hmsearch.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-06-07 15:52:33 +08:00
|
|
|
|
2025-05-27 18:33:40 +08:00
|
|
|
<div class="flex h-auto home_con">
|
|
|
|
|
<div class="fly">
|
2025-06-07 15:52:33 +08:00
|
|
|
<div class="re_box" >
|
|
|
|
|
<div class="swiper" style="border-radius: 12px 0 0 12px;">
|
2025-06-11 18:23:32 +08:00
|
|
|
<swiper class="swiper_s" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
2025-06-10 10:13:39 +08:00
|
|
|
<swiper-slide v-for="(item,index) in xsImg" :key="index" @click="openUrl(item.url)">
|
2025-05-27 18:33:40 +08:00
|
|
|
<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>
|
2025-06-07 15:52:33 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fly1">
|
|
|
|
|
<div class="re_box" style="border-width: 1px;border-style: solid; border-image: linear-gradient(270deg, #CC131A, #FFFFFF) 10 10;border-radius:0;">
|
|
|
|
|
<div class="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>
|
2025-06-10 10:13:39 +08:00
|
|
|
<div class="re_box_item" v-for="(item,index) in zmList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
2025-05-27 18:33:40 +08:00
|
|
|
<div class="re_title">
|
2025-06-07 15:52:33 +08:00
|
|
|
<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>
|
2025-05-27 18:33:40 +08:00
|
|
|
</div>
|
2025-06-07 15:52:33 +08:00
|
|
|
|
|
|
|
|
<!-- <div class="slices_rol"></div> -->
|
2025-05-27 18:33:40 +08:00
|
|
|
</div>
|
2025-06-07 15:52:33 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</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;">
|
2025-06-10 10:13:39 +08:00
|
|
|
<div class="bstbg" v-for="item,i in bstList" :key="i" @click="openUrl(item.id)">
|
2025-06-07 15:52:33 +08:00
|
|
|
<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>
|
2025-06-11 18:23:32 +08:00
|
|
|
|
2025-06-07 15:52:33 +08:00
|
|
|
<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> -->
|
2025-06-10 10:13:39 +08:00
|
|
|
<div class="re_box_item" v-for="(item,index) in ptList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
2025-06-07 15:52:33 +08:00
|
|
|
<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> -->
|
2025-05-27 18:33:40 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-06-07 15:52:33 +08:00
|
|
|
<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> -->
|
2025-06-10 10:13:39 +08:00
|
|
|
<div class="re_box_item" v-for="(item,index) in jcList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
2025-06-07 15:52:33 +08:00
|
|
|
<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>
|
2025-05-27 18:33:40 +08:00
|
|
|
</div>
|
2025-06-07 15:52:33 +08:00
|
|
|
</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> -->
|
2025-06-10 10:13:39 +08:00
|
|
|
<div class="re_box_item" v-for="(item,index) in qcList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
2025-06-07 15:52:33 +08:00
|
|
|
<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> -->
|
2025-06-10 10:13:39 +08:00
|
|
|
<div class="re_box_item" v-for="(item,index) in mtList" :key="index" style="margin-top: 10px;" @click="openUrl(item.id)">
|
2025-05-27 18:33:40 +08:00
|
|
|
<div class="re_title">
|
2025-06-07 15:52:33 +08:00
|
|
|
<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>
|
2025-05-27 18:33:40 +08:00
|
|
|
</div>
|
|
|
|
|
|
2025-06-07 15:52:33 +08:00
|
|
|
<!-- <div class="slices_rol"></div> -->
|
2025-05-27 18:33:40 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-05-27 09:02:43 +08:00
|
|
|
</div>
|
2025-05-24 09:12:30 +08:00
|
|
|
|
2025-06-07 15:52:33 +08:00
|
|
|
<AppFooter></AppFooter>
|
|
|
|
|
|
|
|
|
|
|
2025-05-24 09:12:30 +08:00
|
|
|
<!-- 底部鼠标 -->
|
|
|
|
|
<div style="position: absolute;bottom: 30px;right:30px;">
|
|
|
|
|
<img :src="`/img/index/hmouse.png`" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2025-05-27 18:33:40 +08:00
|
|
|
import $api from '@/service/webRequest'
|
2025-06-07 15:52:33 +08:00
|
|
|
import { defineEmits} from 'vue'
|
2025-05-27 18:33:40 +08:00
|
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
2025-05-29 14:42:01 +08:00
|
|
|
import emitter from '@/plugins/emitter'
|
2025-05-27 18:33:40 +08:00
|
|
|
import 'swiper/css'
|
|
|
|
|
import 'swiper/css/autoplay'
|
|
|
|
|
import "swiper/css/pagination";
|
|
|
|
|
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade,Mousewheel } from "swiper/modules";
|
2025-05-24 09:12:30 +08:00
|
|
|
const inputSearch = ref('');
|
|
|
|
|
|
2025-05-27 18:33:40 +08:00
|
|
|
const xsImg = ref([]);
|
|
|
|
|
const listType = ref([]);
|
2025-05-29 14:42:01 +08:00
|
|
|
const detailId = ref(null);
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['toSwpe'])
|
2025-05-27 18:33:40 +08:00
|
|
|
const swiperOptionsimgs = {
|
|
|
|
|
autoplay: {
|
|
|
|
|
delay: 5000,
|
|
|
|
|
disableOnInteraction: false,
|
|
|
|
|
},
|
|
|
|
|
direction: 'horizontal',
|
|
|
|
|
slidesPerView: 1,
|
|
|
|
|
speed: 500,
|
|
|
|
|
// effect: 'fade',
|
|
|
|
|
loop: true,
|
|
|
|
|
modules: [Autoplay,Pagination],
|
|
|
|
|
pagination: {
|
|
|
|
|
el:'.swiper-pagination'
|
|
|
|
|
},
|
|
|
|
|
}
|
2025-06-07 15:52:33 +08:00
|
|
|
const hmScroll = () => {
|
2025-06-10 10:13:39 +08:00
|
|
|
let home = document.getElementById('homeid');
|
2025-06-07 15:52:33 +08:00
|
|
|
if( home.scrollTop + home.clientHeight >= home.scrollHeight){
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
emit('toSwpe',2);
|
|
|
|
|
}, 500);
|
|
|
|
|
}
|
2025-06-10 10:13:39 +08:00
|
|
|
if (home.scrollTop == 0) {
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
emit('toSwpe',0);
|
|
|
|
|
}, 500);
|
|
|
|
|
}
|
2025-06-07 15:52:33 +08:00
|
|
|
}
|
2025-05-30 16:36:00 +08:00
|
|
|
const toSearch =() => {
|
2025-06-10 10:13:39 +08:00
|
|
|
// emit('toSwpe',9);
|
|
|
|
|
// emitter.emit('inputSea', {
|
|
|
|
|
// keywords:inputSearch.value,
|
|
|
|
|
// type: 1,
|
|
|
|
|
// });
|
|
|
|
|
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
|
2025-05-30 16:36:00 +08:00
|
|
|
}
|
2025-06-07 15:52:33 +08:00
|
|
|
// 查看更多
|
|
|
|
|
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}
|
|
|
|
|
])
|
2025-06-10 10:13:39 +08:00
|
|
|
|
|
|
|
|
const openUrl = (id: number) => {
|
|
|
|
|
window.open(`/info/${id}?type=1`)
|
2025-05-29 14:42:01 +08:00
|
|
|
}
|
2025-06-10 10:13:39 +08:00
|
|
|
//跳转详情
|
|
|
|
|
// 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);
|
|
|
|
|
// }
|
2025-05-27 18:33:40 +08:00
|
|
|
let newsSwiper: any = null
|
|
|
|
|
const onSwiperImgs = (swiper: any) => {
|
|
|
|
|
newsSwiper = swiper
|
|
|
|
|
// swiper.on('slideChange', () => {
|
|
|
|
|
// // 更新当前活动幻灯片索引
|
|
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
}
|
2025-06-07 15:52:33 +08:00
|
|
|
//文章精选
|
|
|
|
|
const zmList = ref([]);
|
|
|
|
|
|
|
|
|
|
//国务院百事通
|
|
|
|
|
const ptList = ref([]);
|
|
|
|
|
const jcList = ref([]);
|
|
|
|
|
const qcList = ref([]);
|
|
|
|
|
const mtList = ref([]);
|
|
|
|
|
|
2025-05-27 18:33:40 +08:00
|
|
|
//新闻分类
|
|
|
|
|
const getNewstypeList = async () => {
|
2025-06-07 15:52:33 +08:00
|
|
|
let ptggid = null,jcdtid = null,qclyid = null,mtjjid = null; // 分类id
|
2025-05-27 18:33:40 +08:00
|
|
|
const res = await $api.get('/api/home.news/cate?home=1')
|
2025-06-07 15:52:33 +08:00
|
|
|
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`)
|
2025-05-27 18:33:40 +08:00
|
|
|
zmList.value = ress1.data.data.list;
|
|
|
|
|
|
2025-06-07 15:52:33 +08:00
|
|
|
//平台公告
|
|
|
|
|
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;
|
2025-05-27 18:33:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//逐梦新声轮播图
|
|
|
|
|
const getxsImg = async () => {
|
|
|
|
|
const res = await $api.get('/api/index/images?page=1&limit=3')
|
|
|
|
|
xsImg.value = res.data.data.list;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
2025-06-07 15:52:33 +08:00
|
|
|
window.addEventListener('scroll', hmScroll);
|
2025-05-27 18:33:40 +08:00
|
|
|
getxsImg();
|
|
|
|
|
getNewstypeList();
|
|
|
|
|
})
|
2025-05-24 09:12:30 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import '@/assets/index.scss';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* pc端样式 */
|
2025-06-07 15:52:33 +08:00
|
|
|
|
2025-05-27 18:33:40 +08:00
|
|
|
.swiper{
|
2025-05-24 09:12:30 +08:00
|
|
|
|
2025-05-27 18:33:40 +08:00
|
|
|
.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;
|
2025-06-07 15:52:33 +08:00
|
|
|
background: rgba(0, 0, 0, 0.44);
|
2025-05-27 18:33:40 +08:00
|
|
|
width: 100%;
|
|
|
|
|
height: 38px;
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2025-05-24 09:12:30 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
.rightcon{
|
2025-05-30 14:30:11 +08:00
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
2025-06-07 15:52:33 +08:00
|
|
|
background-image: url('/img/index/rightcons.png');
|
2025-06-10 10:13:39 +08:00
|
|
|
background-size: 100% 100%;
|
2025-06-07 15:52:33 +08:00
|
|
|
overflow-y: auto;
|
|
|
|
|
|
2025-05-24 09:12:30 +08:00
|
|
|
}
|
|
|
|
|
.top_search{
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
height: 70px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.inputform {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 340px;
|
2025-06-11 18:23:32 +08:00
|
|
|
// margin-right: 319px;
|
2025-05-24 09:12:30 +08:00
|
|
|
}
|
|
|
|
|
.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;
|
|
|
|
|
}
|
2025-05-27 18:33:40 +08:00
|
|
|
.home_con{
|
|
|
|
|
width: 1200px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
// margin: 0 auto;
|
2025-06-07 15:52:33 +08:00
|
|
|
margin-top: 50px;
|
2025-05-27 18:33:40 +08:00
|
|
|
margin-left: 400px;
|
2025-06-11 18:23:32 +08:00
|
|
|
|
2025-05-27 18:33:40 +08:00
|
|
|
.fly{
|
2025-06-11 18:23:32 +08:00
|
|
|
width: 50%;
|
2025-05-27 18:33:40 +08:00
|
|
|
// padding-left: 80px;
|
2025-06-11 18:23:32 +08:00
|
|
|
.swiper_s{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 418px;
|
|
|
|
|
}
|
2025-05-27 18:33:40 +08:00
|
|
|
}
|
|
|
|
|
.fly1{
|
2025-06-11 18:23:32 +08:00
|
|
|
width: 50%;
|
2025-06-07 15:52:33 +08:00
|
|
|
// margin-left: 30px;
|
2025-05-27 18:33:40 +08:00
|
|
|
}
|
|
|
|
|
.re_box{
|
|
|
|
|
width: 100%;
|
2025-06-07 15:52:33 +08:00
|
|
|
height: 418px;
|
2025-05-27 18:33:40 +08:00
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-content: flex-start;
|
|
|
|
|
// gap: 10px;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
position: relative;
|
2025-06-07 15:52:33 +08:00
|
|
|
border-radius: 12px 0 0 12px;
|
2025-05-27 18:33:40 +08:00
|
|
|
.re_top_img{
|
2025-06-07 15:52:33 +08:00
|
|
|
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;
|
2025-05-27 18:33:40 +08:00
|
|
|
}
|
|
|
|
|
.re_box_item{
|
|
|
|
|
width: 100%;
|
2025-06-07 15:52:33 +08:00
|
|
|
padding:15px 20px;
|
2025-05-27 18:33:40 +08:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.re_title{
|
2025-06-07 15:52:33 +08:00
|
|
|
width: 100%;
|
2025-05-27 18:33:40 +08:00
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
font-weight: 400;
|
2025-06-07 15:52:33 +08:00
|
|
|
font-size: 16px;
|
2025-05-27 18:33:40 +08:00
|
|
|
color: #323232;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
2025-06-07 15:52:33 +08:00
|
|
|
justify-content: space-between;
|
|
|
|
|
cursor: pointer;
|
2025-05-27 18:33:40 +08:00
|
|
|
.dian{
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
background: #3B90DF;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-06-07 15:52:33 +08:00
|
|
|
// &: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;
|
|
|
|
|
align-content: flex-start;
|
|
|
|
|
// gap: 10px;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-radius: 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_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;
|
2025-05-27 18:33:40 +08:00
|
|
|
cursor: pointer;
|
2025-06-07 15:52:33 +08:00
|
|
|
.dian{
|
2025-05-27 18:33:40 +08:00
|
|
|
width: 10px;
|
2025-06-07 15:52:33 +08:00
|
|
|
height: 10px;
|
|
|
|
|
background: #3B90DF;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin-right: 15px;
|
2025-05-27 18:33:40 +08:00
|
|
|
}
|
|
|
|
|
}
|
2025-06-07 15:52:33 +08:00
|
|
|
// &: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;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
2025-05-27 18:33:40 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-06-11 18:23:32 +08:00
|
|
|
@media (max-width: 1440px) {
|
|
|
|
|
.home_con2,.home_con1,.home_con{
|
|
|
|
|
width: 900px;
|
|
|
|
|
}
|
|
|
|
|
.fly1s{
|
|
|
|
|
width: 500px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-05-24 09:12:30 +08:00
|
|
|
</style>
|
