871 lines
30 KiB
Vue
Raw Normal View History

2025-05-24 09:12:30 +08:00
<template>
2025-07-01 18:31:19 +08:00
<!-- PC端布局 -->
<div class="flex justify-between w-full h-full">
2025-07-01 18:31:19 +08:00
<!-- 右边内容栏 -->
<div class="rightcon" id="homeid" @scroll="hmScroll">
<div class="flex top_search ">
<div style="width: 350px;">
<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" @click="toSearch">
<img src="/img/index/hmsearch.png" alt="">
2025-05-27 18:33:40 +08:00
</div>
</div>
</div>
2025-07-01 18:31:19 +08:00
<div class="flex h-auto home_con">
<div class="fly">
<div class="re_box re_box_left">
<div class="swiper" style="border-radius: 12px 0 0 12px;">
<swiper class="swiper_s" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
<swiper-slide v-for="(item, index) in xsImg" :key="index" @click="openUrl(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>
2025-07-01 18:31:19 +08:00
</div>
<div class="fly1">
<div class="re_box">
<div class="flex justify-between align-center w-full ">
<img class="re_top_img" :src="`/img/index/wzjx.png`"></img>
2025-07-02 17:47:19 +08:00
<div class="pr-[20px] more_j" @click="toMore(3)">
2025-07-01 18:31:19 +08:00
<span>更多</span>
<img src="/img/index/more_j.png" alt=""
style="width: 8px;height: 13px;margin-left: 10px;"></img>
</div>
2025-05-27 18:33:40 +08:00
</div>
2025-07-01 18:31:19 +08:00
<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="openUrl(item.id)">
<div class="re_title">
<div class="flex align-center">
<div class="dian"></div>
2025-07-02 17:33:47 +08:00
<span class="one-line-ellipsis lx-span">{{ item.title }}</span>
2025-07-01 18:31:19 +08:00
</div>
<span class="one-line-ellipsis" style="color: #999999;">{{
item.release_time_text.slice(5, 10) }}</span>
</div>
2025-07-01 18:31:19 +08:00
<!-- <div class="slices_rol"></div> -->
</div>
</div>
</div>
2025-07-01 18:31:19 +08:00
</div>
<div class="h-auto home_con1" style="margin-top: 30px;">
<div class="fly1s" style="display: flex;gap: 20px;">
<div style="width: 65%;background-color: #ffffff;">
2025-07-02 17:33:47 +08:00
<div class="no-wrap"
style="padding: 15px;display: flex;justify-content: space-between;align-items: center;">
<div style="display: flex;align-items: center;gap: 55px;">
<div v-for="(item, index) in listType" :key="index"
:class="listIndex == item.id ? 't2' : 't1'" @click="changeListIndex(item.id)">
<div>{{ item.name }}</div>
<div v-if="listIndex == item.id" class="t_line"></div>
2025-07-01 18:31:19 +08:00
</div>
</div>
2025-07-02 17:47:19 +08:00
<div class="pr-[20px]" @click="toMore(3)" style="display: flex;align-items: center;cursor: pointer;">
2025-07-01 18:31:19 +08:00
<span style="color: #999999;">更多</span>
<img src="/img/index/more_j.png" alt=""
style="width: 8px;height: 13px;margin-left: 5px;"></img>
</div>
</div>
2025-07-01 18:31:19 +08:00
<div style="width: 100%;height: 1px;background-color: #EEEEEE;"></div>
2025-07-02 17:33:47 +08:00
<div v-for="(item, index) in jcList" :key="index">
<div class="re_box_item">
2025-07-01 18:31:19 +08:00
<div class="re_title">
<div class="flex align-center">
<div class="dian"></div>
2025-07-02 17:33:47 +08:00
<span class="one-line-ellipsis jc-span">{{ item.title }}</span>
2025-07-01 18:31:19 +08:00
</div>
2025-07-02 17:33:47 +08:00
<span class="one-line-ellipsis" style="color: #999999;">{{
item.release_time_text.slice(5, 10) }}</span>
2025-07-01 18:31:19 +08:00
</div>
</div>
<div v-if="index != 6"
style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 0 auto;"></div>
</div>
</div>
2025-07-01 18:31:19 +08:00
<div style="width: 35%;background-color: #ffffff;">
<div style="width: 100%;height: 5px;background-color: #338CDE;"></div>
<div style="display: flex;justify-content: space-between;align-items: center;">
2025-07-02 17:33:47 +08:00
<div style="display: flex;align-items: center;gap: 10px;padding:5px 15px;">
2025-07-01 18:31:19 +08:00
<div>
<img src="/img/index/gg.png" alt="" style="width: 40px;"></img>
</div>
2025-07-02 17:33:47 +08:00
<div class="t1">
2025-07-01 18:31:19 +08:00
通知公告
</div>
</div>
2025-07-02 17:47:19 +08:00
<div class="pr-[20px]" @click="toMore(3)" style="display: flex;align-items: center;cursor: pointer;">
2025-07-01 18:31:19 +08:00
<span style="color: #999999;">更多</span>
<img src="/img/index/more_j.png" alt=""
style="width: 8px;height: 13px;margin-left: 5px;"></img>
</div>
</div>
<div v-for="(item, index) in ptList" :key="index">
2025-07-02 17:33:47 +08:00
<div class="re_box_item">
2025-07-01 18:31:19 +08:00
<div class="re_title">
<div class="flex align-center">
<div class="dian"></div>
2025-07-02 17:33:47 +08:00
<span class="one-line-ellipsis tz-span">{{ item.title }}</span>
2025-07-01 18:31:19 +08:00
</div>
<span class="one-line-ellipsis" style="color: #999999;">
{{ item.release_time_text.slice(5, 10) }}
</span>
</div>
</div>
2025-07-01 18:31:19 +08:00
<div v-if="index != 6"
style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 0 auto;"></div>
</div>
2025-05-27 18:33:40 +08:00
</div>
</div>
2025-07-01 18:31:19 +08:00
<div class="fly1s" style="margin-top: 40px;">
<div style="display: flex;justify-content: center;align-items: center;padding-bottom: 15px;">
<div>
<img :src="`/img/index/r.png`" alt=""></img>
</div>
</div>
2025-07-02 17:33:47 +08:00
<div class="qn"
style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px;">
2025-07-01 18:31:19 +08:00
<div>
2025-07-02 17:33:47 +08:00
<img :src="`/img/home/1.png`" alt=""></img>
2025-07-01 18:31:19 +08:00
</div>
<div>
2025-07-02 17:33:47 +08:00
<img :src="`/img/home/2.png`" alt=""></img>
2025-07-01 18:31:19 +08:00
</div>
<div>
2025-07-02 17:33:47 +08:00
<img :src="`/img/home/3.png`" alt=""></img>
2025-07-01 18:31:19 +08:00
</div>
<div>
2025-07-02 17:33:47 +08:00
<img :src="`/img/home/4.png`" alt=""></img>
</div>
2025-07-01 18:31:19 +08:00
<div>
2025-07-02 17:33:47 +08:00
<img :src="`/img/home/5.png`" alt=""></img>
2025-07-01 18:31:19 +08:00
</div>
<div>
2025-07-02 17:33:47 +08:00
<img :src="`/img/home/6.png`" alt=""></img>
</div>
</div>
2025-07-01 18:31:19 +08:00
</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;">
<div class="bstbg" v-for="item, i in bstList" :key="i" @click="openUrl(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>
2025-05-27 18:33:40 +08:00
</div>
2025-07-01 18:31:19 +08:00
</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>
2025-07-01 18:31:19 +08:00
<div class="re_box_item" v-for="(item, index) in ptList" :key="index" style="margin-top: 10px;"
@click="openUrl(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>
</div>
2025-07-01 18:31:19 +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/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_box_item" v-for="(item, index) in jcList" :key="index" style="margin-top: 10px;"
@click="openUrl(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>
</div>
</div>
2025-07-01 18:31:19 +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/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>
2025-07-01 18:31:19 +08:00
<div class="re_box_item" v-for="(item, index) in qcList" :key="index" style="margin-top: 10px;"
@click="openUrl(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>
</div>
2025-07-01 18:31:19 +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/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_box_item" v-for="(item, index) in mtList" :key="index" style="margin-top: 10px;"
@click="openUrl(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>
2025-05-27 18:33:40 +08:00
</div>
</div>
</div>
2025-07-01 18:31:19 +08:00
</div> -->
<AppFooter></AppFooter>
2025-05-24 09:12:30 +08:00
2025-07-01 18:31:19 +08:00
<!-- 底部鼠标 -->
2025-07-02 17:33:47 +08:00
<div class="mouse_img">
2025-07-01 18:31:19 +08:00
<img :src="`/img/index/hmouse.png`" alt="">
</div>
2025-05-24 09:12:30 +08:00
</div>
2025-07-01 18:31:19 +08:00
</div>
2025-05-24 09:12:30 +08:00
</template>
<script lang="ts" setup>
2025-05-27 18:33:40 +08:00
import $api from '@/service/webRequest'
2025-07-01 18:31:19 +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";
2025-07-01 18:31:19 +08:00
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-07-02 17:33:47 +08:00
const listIndex = ref(0);
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 = {
2025-07-01 18:31:19 +08:00
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
// effect: 'fade',
loop: true,
modules: [Autoplay, Pagination],
pagination: {
el: '.swiper-pagination'
},
2025-05-27 18:33:40 +08:00
}
const hmScroll = () => {
2025-07-01 18:31:19 +08:00
// let home = document.getElementById('homeid');
// if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
// setTimeout(function () {
// emit('toSwpe', 2);
// }, 500);
// }
// if (home.scrollTop == 0) {
// setTimeout(function () {
// emit('toSwpe', 0);
// }, 500);
// }
}
2025-07-01 18:31:19 +08:00
const toSearch = () => {
// 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-07-02 17:47:19 +08:00
const toMore = (index:number) => {
emit('toSwpe', index);
}
const bstList = ref([
2025-07-01 18:31:19 +08:00
{ 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 openUrl = (id: number) => {
2025-07-01 18:31:19 +08:00
window.open(`/info/${id}?type=1`)
2025-05-29 14:42:01 +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) => {
2025-07-01 18:31:19 +08:00
newsSwiper = swiper
// swiper.on('slideChange', () => {
// // 更新当前活动幻灯片索引
// })
2025-05-27 18:33:40 +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-07-01 18:31:19 +08:00
let ptggid = null, jcdtid = null, qclyid = null, mtjjid = null; // 分类id
const res = await $api.get('/api/home.news/cate?home=1')
var list = res.data.data.list;
2025-07-02 17:33:47 +08:00
listIndex.value = list[0].id;
2025-07-01 18:31:19 +08:00
listType.value = list;
list.map((item: any) => {
if (item.name == '平台公告') {
ptggid = item.id;
}
2025-07-02 17:33:47 +08:00
// if (item.name == '基层动态') {
// jcdtid = item.id;
// }
// if (item.name == '青春洛阳') {
// qclyid = item.id;
// }
// if (item.name == '媒体聚焦') {
// mtjjid = item.id;
// }
});
2025-07-02 17:33:47 +08:00
//去除平台公告
listType.value = listType.value.filter((item: any) => item.name != '平台公告');
2025-07-01 18:31:19 +08:00
console.log(listType.value);
2025-07-02 17:33:47 +08:00
changeListIndex(listIndex.value);
// xsId.value = listType.value[0].id;
//逐梦新声列表 //万众瞩目列表
2025-07-01 18:31:19 +08:00
// 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-07-01 18:31:19 +08:00
zmList.value = ress1.data.data.list;
2025-05-27 18:33:40 +08:00
2025-07-01 18:31:19 +08:00
// //平台公告
const ress2 = await $api.get(`/api/home.news/index?cate_id=${ptggid}&page=1&limit=5`)
2025-07-01 18:31:19 +08:00
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 () => {
2025-07-01 18:31:19 +08:00
const res = await $api.get('/api/index/images?page=1&limit=3')
xsImg.value = res.data.data.list;
2025-05-27 18:33:40 +08:00
}
onMounted(() => {
window.addEventListener('scroll', hmScroll);
2025-05-27 18:33:40 +08:00
getxsImg();
getNewstypeList();
})
2025-07-02 17:33:47 +08:00
const changeListIndex = async (id: number) => {
listIndex.value = id;
const ress2 = await $api.get(`/api/home.news/index?cate_id=${id}&page=1&limit=7`)
jcList.value = ress2.data.data.list;
}
2025-05-24 09:12:30 +08:00
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
/* pc端样式 */
2025-07-01 18:31:19 +08:00
.swiper {
2025-05-24 09:12:30 +08:00
2025-07-01 18:31:19 +08:00
.swiper-pagination {
text-align: right;
padding-right: 10px;
bottom: 0;
height: 38px;
line-height: 38px;
2025-07-02 17:33:47 +08:00
--swiper-pagination-color: #ffffff;
--swiper-pagination-bullet-inactive-color: rgb(255, 255, 255, 0.5);
--swiper-pagination-bullet-inactive-opacity: 1
/* 两种都可以 */
2025-05-27 18:33:40 +08:00
}
2025-07-01 18:31:19 +08:00
.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, 0.44);
width: 100%;
height: 38px;
line-height: 38px;
padding-left: 10px;
2025-05-24 09:12:30 +08:00
}
2025-07-01 18:31:19 +08:00
}
.rightcon {
width: 100%;
height: 100%;
background-image: url('/img/index/rightcons.png');
background-size: 100% 100%;
overflow-y: auto;
2025-07-02 17:33:47 +08:00
overflow-x: hidden;
2025-07-01 18:31:19 +08:00
}
.top_search {
width: 1200px;
margin-left: 400px;
margin-top: 50px;
height: 70px;
align-items: center;
justify-content: space-between;
}
.inputform {
position: relative;
// margin-right: 319px;
}
.contactInput {
width: 337px;
height: 50px;
background: #ffffff73;
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: #338CDE;
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: 50px;
margin-left: 400px;
.fly {
width: 50%;
// padding-left: 80px;
.swiper_s {
width: 100%;
height: 418px;
}
2025-05-24 09:12:30 +08:00
}
2025-07-01 18:31:19 +08:00
.fly1 {
width: 50%;
// margin-left: 30px;
2025-05-24 09:12:30 +08:00
}
2025-07-01 18:31:19 +08:00
.re_box {
border-width: 1px;
border-style: solid;
border-color: transparent;
width: 100%;
height: 418px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
// gap: 10px;
background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
linear-gradient(0deg, #338CDE, #ACD7FF) border-box;
position: relative;
border-radius: 0px 12px 12px 0px;
.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;
}
2025-05-24 09:12:30 +08:00
}
2025-07-01 18:31:19 +08:00
.re_box_left {
border-radius: 12px 0px 0px 12px;
2025-05-24 09:12:30 +08:00
}
2025-07-01 18:31:19 +08:00
}
.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;
2025-05-24 09:12:30 +08:00
display: flex;
align-items: center;
2025-07-01 18:31:19 +08:00
justify-content: space-between;
cursor: pointer;
.dian {
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
2025-05-24 09:12:30 +08:00
}
2025-07-01 18:31:19 +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;
}
2025-07-01 18:31:19 +08:00
&:hover {
.bsttitle {
color: #FFE7B8;
}
2025-07-01 18:31:19 +08:00
}
}
}
}
.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;
}
2025-07-01 18:31:19 +08:00
.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;
2025-07-01 18:31:19 +08:00
}
.re_box_item {
width: 100%;
2025-07-02 17:33:47 +08:00
padding: 20px 20px;
2025-07-01 18:31:19 +08:00
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.re_title {
width: 100%;
2025-07-01 18:31:19 +08:00
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #323232;
display: flex;
align-items: center;
2025-07-01 18:31:19 +08:00
justify-content: space-between;
cursor: pointer;
.dian {
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
}
2025-07-01 18:31:19 +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-07-01 18:31:19 +08:00
}
.t1 {
font-weight: bold;
font-family: PingFang SC;
color: #323232;
font-size: 22px;
cursor: pointer;
position: relative;
}
.t1:hover {
color: #2C8AE0;
}
.t2 {
font-weight: bold;
font-family: PingFang SC;
color: #2C8AE0;
font-size: 22px;
cursor: pointer;
position: relative;
}
.t_line {
width: 60%;
height: 5px;
background-color: #3E92DE;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: -15px;
}
2025-07-02 17:33:47 +08:00
.qn div {
cursor: pointer;
}
.tz-span {
width: 270px;
}
.jc-span {
width: 550px;
}
.lx-span {
width: 400px;
}
@media (max-width: 1440px) {
.home_con2,
.home_con1,
.home_con {
width: 920px;
}
.top_search {
width: 920px;
}
.fly1s {
width: 900px;
}
.tz-span {
width: 180px;
}
.jc-span {
width: 400px;
}
.t1 {
font-size: 18px;
}
.t2 {
font-size: 18px;
}
.lx-span {
width: 310px;
}
}
2025-05-24 09:12:30 +08:00
</style>