This commit is contained in:
王创世 2025-07-23 18:27:42 +08:00
parent 311cf487d1
commit 87b389570f
14 changed files with 1360 additions and 524 deletions

65
components/PhoneAbout.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="w-full h-full" style="padding: 20px;">
<div style="display: flex;justify-content: center;align-items: center;text-align: center;">
<div><img class="re_top_img" :src="`/img/index/zzjg.png`" style="width: 80%;margin: 0 auto;"></img></div>
</div>
<div style="background-color: #ffffff;padding: 10px;margin-top: 20px;">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div v-for="(item, index) in newsListtyp" @click="getMesList(item.id)" style="position: relative;">
<div :class="['lef_boxitem2', { 'active': cateid == item.id }]">{{ item.tabtitle }}</div>
<div v-if="cateid == item.id"
style="height: 3px;background-color: #2C8AE0;width: 30px;margin: 0 auto;">
</div>
</div>
</div>
<div>
<div
style="color: #999999;font-weight: 400;font-size: 16px;line-height: 25px;white-space: pre-line;margin-top: 30px;">
<div v-html="info.content"></div>
</div>
</div>
</div>
<div style="height: 1px;width: 100%;background-color: #F8F8F8;"></div>
</div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
import { NPagination } from 'naive-ui'
import $api from '@/service/webRequest'
const newsListtyp = ref([]);
const cateid = ref(0);
//
onMounted(() => {
//getMesList();
getNewstypeList(1);
})
const info = ref({});
const getMesList = async (id: number) => {
cateid.value = id;
info.value = newsListtyp.value.find(item => item.id == id);
}
const getNewstypeList = async () => {
const res = await $api.get(`/api/index/about_us`)
newsListtyp.value = res.data.data.list;
cateid.value = res.data.data.list[0].id;
info.value = res.data.data.list[0];
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.lef_boxitem2 {
color: #323232;
font-size: 16px;
}
.active {
color: #2C8AE0;
font-weight: 600;
}
</style>

View File

@ -0,0 +1,110 @@
<template>
<!-- PC端布局 -->
<div class="w-full h-full" style="padding: 20px;">
<div>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
import $api from '@/service/webRequest'
const inputSearch = ref('');
//
const formData = reactive({
name: '',
mobile: '',
question: '',
message: ''
})
const total = ref(0);
const liuyanList = ref([]);
const getLiuyanList = async () => {
const res = await $api.post('/api/home.leave_word/index',
{
limit: 4,
page: 1,
status: 2,
show: 1
}
)
total.value = res.data.data.count;
liuyanList.value = res.data.data.list;
}
onMounted(() => {
getLiuyanList();
})
const toSearch = () => {
// emit('toSwpe',9);
// emitter.emit('inputSea', {
// keywords:inputSearch.value,
// type: 1,
// });
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
}
const emit = defineEmits(['toSwpe'])
const toMore = (index:number) => {
emit('toSwpe', index);
}
const hmScroll = () => {
let home = document.getElementById('contid');
console.log(home.scrollTop);
if (home.scrollTop == 0) {
emit('toSwpe', 6);
}
}
//
const submitForm = () => {
console.log(formData);
//
if (!formData.name) {
alert('请输入您的姓名')
return
}
if (!formData.mobile) {
alert('请输入您的手机号码')
return
}
if (!formData.question) {
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.question = '';
formData.message = '';
})
.catch((err) => {
console.dir(err)
})
//
// formData.name = ''
// formData.mobile = ''
// formData.content = ''
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
</style>

View File

@ -12,45 +12,45 @@
<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=""
<img :src="crrentNum == 1 ? '/img/index/home1.png' : '/img/index/home.png'" alt=""></img>
<span :class="['span', { 'active': crrentNum == 1 }]">官网首页</span>
<img v-if="crrentNum == 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=""
<img :src="crrentNum == 2 ? '/img/index/aboutus1.png' : '/img/index/aboutus.png'" alt=""></img>
<span :class="['span', { 'active': crrentNum == 2 }]">组织机构</span>
<img v-if="crrentNum == 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=""
<img :src="crrentNum == 3 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
<span :class="['span', { 'active': crrentNum == 3 }]">新闻动态</span>
<img v-if="crrentNum == 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/ly1.png' : '/img/index/ly.png'" alt=""></img>
<span :class="['span', { 'active': crrent == 4 }]">青春洛阳</span>
<img v-if="crrent == 4" src="/img/index/arrow.png" alt=""
<img :src="crrentNum == 4 ? '/img/index/ly1.png' : '/img/index/ly.png'" alt=""></img>
<span :class="['span', { 'active': crrentNum == 4 }]">青春洛阳</span>
<img v-if="crrentNum == 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/news1.png' : '/img/index/news.png'" alt=""></img>
<span :class="['span', { 'active': crrent == 5 }]">服务青年</span>
<img v-if="crrent == 5" src="/img/index/arrow.png" alt=""
<img :src="crrentNum == 5 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
<span :class="['span', { 'active': crrentNum == 5 }]">服务青年</span>
<img v-if="crrentNum == 5" src="/img/index/arrow.png" alt=""
style="width: 9px;height: 12px;margin-left: 10px;">
</div>
<div class="pc-nav-item" @click="gotoList(6)">
<img :src="crrent == 6 ? '/img/index/message1.png' : '/img/index/message.png'" alt=""></img>
<span :class="['span', { 'active': crrent == 6 }]">信息公开</span>
<img v-if="crrent == 6" src="/img/index/arrow.png" alt=""
<img :src="crrentNum == 6 ? '/img/index/message1.png' : '/img/index/message.png'" alt=""></img>
<span :class="['span', { 'active': crrentNum == 6 }]">信息公开</span>
<img v-if="crrentNum == 6" src="/img/index/arrow.png" alt=""
style="width: 9px;height: 12px;margin-left: 10px;">
</div>
<div class="pc-nav-item" @click="gotoList(7)">
<img :src="crrent == 7 ? '/img/index/tt1.png' : '/img/index/tt.png'" alt=""></img>
<span :class="['span', { 'active': crrent == 7 }]">团团留言板</span>
<img v-if="crrent == 7" src="/img/index/arrow.png" alt=""
<img :src="crrentNum == 7 ? '/img/index/tt1.png' : '/img/index/tt.png'" alt=""></img>
<span :class="['span', { 'active': crrentNum == 7 }]">团团留言板</span>
<img v-if="crrentNum == 7" src="/img/index/arrow.png" alt=""
style="width: 9px;height: 12px;margin-left: 10px;">
</div>
<!-- <div class="pc-nav-item" @click="gotoList(8)">
@ -91,13 +91,14 @@ const openOldMode = () => {
}
const gotoList = (index: number) => {
console.log(router.currentRoute);
if (router.currentRoute.value.path != '/') {
window.open(`/`, '_blank');
localStorage.setItem('index_detail', index)
}
crrent.value = index
emit('crrentTop', index)
// console.log(router.currentRoute);
// if (router.currentRoute.value.path != '/') {
// window.open(`/`, '_blank');
// localStorage.setItem('index_detail', index)
// }
// crrent.value = index
show.value=false;
emit('phoneCrrent', index)
}
//

549
components/PhoneHome.vue Normal file
View File

@ -0,0 +1,549 @@
<template>
<div class="w-full h-full" style="padding: 20px;">
<!-- 右边内容栏 -->
<div class="rightcon" id="homeid">
<div class="h-auto home_con">
<div class="fly">
<div class="re_box re_box_left">
<div style="display: flex;justify-content: center;align-items: center;">
<div style="color: #41B2FE;"></div>
<div><img class="re_top_img" :src="`/img/index/wzjx.png`"></img></div>
<div style="color: #41B2FE;"></div>
</div>
<div class="swiper">
<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: 235px;object-fit: cover;">
</swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="fly1">
<div class="re_box">
<div class="re_box_item" v-for="(item, index) in zmList" :key="index"
@click="openUrl(item.id)">
<div class="re_title">
<div class="flex align-center">
<span class="one-line-ellipsis lx-span">{{ item.title }}</span>
</div>
</div>
<div v-if="zmList.length != index + 1"
style="width: 100%;height: 1px;background-color: #EEEEEE;margin: 15px 0px;"></div>
</div>
<div
style="margin: 20px 10px;text-align: center;background-color: #EEEEEE;height: 50px;width: 100%;line-height: 50px;">
查看更多 ></div>
</div>
</div>
</div>
</div>
<div class="h-auto home_con1">
<div class="fly1s">
<div style="">
<div class="tab-scroll-container" style="padding: 15px 0px 5px 0px;">
<div class="dddccc">
<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>
</div>
</div>
</div>
<div v-for="(item, index) in jcList" :key="index">
<div class="re_box_item">
<div class="re_title">
<div class="flex align-center">
<div class="dian"></div>
<span class="one-line-ellipsis jc-span">{{ item.title }}</span>
</div>
</div>
</div>
<div v-if="index != 6"
style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 15px 0;"></div>
</div>
<div
style="margin: 20px 10px;text-align: center;background-color: #EEEEEE;height: 50px;line-height: 50px;">
查看更多 ></div>
</div>
</div>
</div>
<div class="fly1s" style="margin-top: 10px;">
<div style="display: flex;justify-content: center;align-items: center;padding-top: 15px;">
<div>
<img :src="`/img/index/r.png`" alt=""></img>
</div>
</div>
<div class="qn" style="">
<div v-for="item in fwImg" @click="openWeb(item)">
<img :src="item.image" alt=""></img>
</div>
</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 xsImg = ref([]);
const listType = ref([]);
const listIndex = ref(0);
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 toSearch = () => {
// emit('toSwpe',9);
// emitter.emit('inputSea', {
// keywords:inputSearch.value,
// type: 1,
// });
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
}
const openWeb = (item) => {
//out in
if (item.type == 'out') {
window.open(item.url);
} else {
window.open(`/phone_info/${item.url}?type=1`)
}
console.log(item)
}
const openUrl = (id: number) => {
window.open(`/phone_info/${id}?type=1`)
}
//
// 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 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')
var list = res.data.data.list;
listIndex.value = list[0].id;
listType.value = list;
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;
// }
});
//
listType.value = listType.value.filter((item: any) => item.name != '平台公告');
console.log(listType.value);
changeListIndex(listIndex.value);
// 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;
}
//
const getxsImg = async () => {
const res = await $api.get('/api/index/images?page=1&limit=9&status=1')
xsImg.value = res.data.data.list;
}
const fwImg = ref([]);
//
const getFwImg = async () => {
const res = await $api.get('/api/index/images?page=1&limit=9&status=2')
fwImg.value = res.data.data.list;
}
onMounted(() => {
//window.addEventListener('scroll', hmScroll);
getxsImg();
getFwImg();
getNewstypeList();
})
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;
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
/* pc端样式 */
.swiper {
.swiper-pagination {
text-align: right;
padding-right: 10px;
bottom: 0;
height: 38px;
line-height: 38px;
--swiper-pagination-color: #ffffff;
--swiper-pagination-bullet-inactive-color: rgb(255, 255, 255, 0.5);
--swiper-pagination-bullet-inactive-opacity: 1
/* 两种都可以 */
}
.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;
}
}
.rightcon {
width: 100%;
height: 100%;
background-color: #ffffff;
}
.home_con {
.fly {
width: 100%;
// padding-left: 80px;
.swiper_s {
width: 100%;
}
}
.fly1 {
width: 100%;
margin-top: 20px;
}
.re_box {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
// gap: 10px;
position: relative;
.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: 100%;
height: 2px;
background: #EEEEEE;
margin-left: 20px;
}
}
.re_box_left {
border-radius: 12px 0px 0px 12px;
}
}
.re_box_item {
width: 100%;
box-sizing: border-box;
padding: 0px 10px;
margin-top: 15px;
.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;
}
// &: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: 100%;
box-sizing: border-box;
background-color: #FFFEFE;
// margin: 0 auto;
margin-top: 10px;
padding-bottom: 1px;
}
.fly1s {
background-color: #ffffff;
width: 100%;
}
.home_con2 {
width: 100%;
box-sizing: border-box;
// margin: 0 auto;
// margin-top: 10px;
flex-wrap: wrap;
.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: 20px 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;
}
// &: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;
// }
// }
}
}
}
.dian {
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
.t1 {
font-weight: bold;
font-family: PingFang SC;
color: #999999;
font-size: 14px;
cursor: pointer;
position: relative;
white-space: nowrap;
min-width: max-content;
padding: 8px 12px;
flex-shrink: 0;
}
.t1:hover {
color: #2C8AE0;
}
.t2 {
font-weight: bold;
font-family: PingFang SC;
color: #2C8AE0;
font-size: 14px;
cursor: pointer;
position: relative;
white-space: nowrap;
min-width: max-content;
padding: 8px 12px;
flex-shrink: 0;
}
.t_line {
width: 40%;
height: 3px;
background-color: #3E92DE;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: -5px;
}
.qn {
padding: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 20px;
}
.qn div {
cursor: pointer;
}
.tz-span {}
.jc-span {
width: 100%;
}
.lx-span {}
/* 滚动容器样式 */
.tab-scroll-container {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
/* 隐藏滚动条但保持滚动功能 */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
}
.tab-scroll-container::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
}
.dddccc {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: max-content;
}
</style>

118
components/PhoneLuoYang.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div class="w-full h-full" style="padding: 20px;">
<div style="display: flex;justify-content: center;align-items: center;text-align: center;">
<div><img class="re_top_img" :src="`/img/fuwu1.png`" style="margin: 0 auto;"></img></div>
</div>
<div style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;margin-top: 20px;">
<div v-for="(item, index) in newsListtyp" :key="index" :class="cateid == item.id ? 'le1' : 'le2'"
@click="getMesList(item.id)">{{ item.name }}
</div>
</div>
<div style="margin-top: 20px;">
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
<div v-for="item in MesList" class="ly_list" @click="showCodeDo(item)">
<div>
<img class="ly_list_img" :src="item.image">
<div class="ly_list_text">{{ item.title }}</div>
</div>
<div v-if="showCode == item"
style="display: flex;justify-content: center;align-items: center;position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height:100%;background: rgba(0,0,0,0.5);">
<img class="ly_list_img_act" :src="item.qrimage">
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
import { NPagination } from 'naive-ui'
import $api from '@/service/webRequest'
import emitter from '@/plugins/emitter'
const inputSearch = ref('');
const MesList = ref([]);
const newsListtyp = ref([]);
const page = ref(1);
const total = ref(0);
const cateid = ref(1);
const detailId = ref(null);
const showCode = ref(0);
const showCodeDo = (id: number) => {
showCode.value = id;
}
const getPageList = async () => {
page.value = page.value;
getMesList(cateid.value);
}
//
onMounted(() => {
//getMesList();
getNewstypeList();
})
const getMesList = async (id: number) => {
cateid.value = id;
//cateid.value = id ? id : cateid.value;
// page.value = pagecru ? pagecru : page.value;
const res = await $api.post('/api/home.media_matrix/index',
{
cate_id: cateid.value,
page: page.value,
limit: 9
}
)
total.value = res.data.data.count;
MesList.value = res.data.data.list;
}
const getNewstypeList = async () => {
const res = await $api.get('/api/home.media_matrix/cate')
newsListtyp.value = res.data.data.list;
getMesList(res.data.data.list[0].id);
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.le2 {
background: #ffffff;
height: 35px;
line-height: 35px;
text-align: center;
}
.le1 {
border: 1px solid #338CDE;
background-image: url('/img/ly_listbg.png');
background-size: 100% 100%;
height: 35px;
line-height: 35px;
text-align: center;
}
.ly_list {
width: 168px;
height: 168px;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
}
.ly_list_img {
width:60px;
height: 60px;
margin: 0 auto;
}
.ly_list_text {
font-size: 15px;
color: #323232;
font-weight: 400;
text-align: center;
margin-top: 15px;
}
</style>

157
components/PhoneMessage.vue Normal file
View File

@ -0,0 +1,157 @@
<template>
<div class="w-full h-full" style="padding: 20px;">
<div style="display: flex;justify-content: center;align-items: center;text-align: center;">
<div><img class="re_top_img" :src="`/img/index/xxgk.png`" style="width: 80%;margin: 0 auto;"></img></div>
</div>
<div style="background-color: #ffffff;padding: 10px;margin-top: 20px;">
<div style="padding-bottom: 10px;">
<div class="dddccc">
<div v-for="(item, index) in newsListtyp" :key="index"
:class="['lef_boxitem2', { 'active': detailId == item.id }]" @click="getMesList(item.id,1)">
<div>{{ item.name }}</div>
<div v-if="detailId == item.id"
style="height: 3px;background-color: #2C8AE0;width: 30px;margin: 0 auto;">
</div>
</div>
</div>
</div>
<div v-for="(item, index) in MesList" :key="index">
<div class="re_box_item">
<div class="re_title">
<div class="flex align-center">
<div class="dian"></div>
<span class="one-line-ellipsis jc-span">{{ item.title }}</span>
</div>
</div>
</div>
<div v-if="index != 8" style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 15px 0;"></div>
</div>
<div style="display: flex;justify-content:center;align-items: center;border: 1px solid #2C8AE0;height: 40px;margin-top: 20px;text-align: center;">
<div @click="getPageList(0)" style="width: 34%;height: 40px;line-height: 40px;border-right: 1px solid #2C8AE0;background-color: #2C8AE0;color: #ffffff;">上一页</div>
<div style="width: 33%;height: 40px;line-height: 40px;border-right: 1px solid #2C8AE0;">{{ page }} / {{ total }}</div>
<div @click="getPageList(1)" style="width: 34%;height: 40px;line-height: 40px;background-color: #2C8AE0;color: #ffffff;">下一页</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
import { NPagination } from 'naive-ui'
import $api from '@/service/webRequest'
import emitter from '@/plugins/emitter'
const inputSearch = ref('');
const MesList = ref([]);
const newsListtyp = ref([]);
const page = ref(1);
const total = ref(0);
const cateid = ref(0);
const detailId = ref(0);
//
onMounted(() => {
// getMesList();
getNewstypeList();
})
//
const openUrl = (id: number) => {
window.open(`/info/${id}?type=2`)
}
const getPageList = async (type: number) => {
page.value = type == 0 ? page.value - 1 : page.value + 1;
if(page.value < 1){
page.value = 1;
}
if(page.value > total.value){
page.value = total.value;
}
getMesList(detailId.value);
}
const getMesList = async (id: number) => {
detailId.value = id;
const res = await $api.post('/api/home.information/index',
{
cate_id: detailId.value,
limit: 7,
page: page.value,
isnews: 1
}
)
//
total.value = Math.ceil(res.data.data.count / 7);
MesList.value = res.data.data.list;
}
const getNewstypeList = async () => {
const res = await $api.get('/api/home.information/cate')
newsListtyp.value = res.data.data.list;
getMesList(res.data.data.list[0].id);
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.re_box_item {
width: 100%;
box-sizing: border-box;
padding: 0px 10px;
margin-top: 15px;
.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;
}
// &: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;
// }
// }
}
.dian {
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
.dddccc {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
min-width: max-content;
gap: 20px;
}
.jc-span{
width: 100%;
}
.lef_boxitem2 {
color: #323232;
font-size: 16px;
position: relative;
}
.active {
color: #2C8AE0;
font-weight: 600;
}
</style>

176
components/PhoneNews.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div class="w-full h-full" style="padding: 20px;">
<div style="display: flex;justify-content: center;align-items: center;text-align: center;">
<div><img class="re_top_img" :src="`/img/index/xwdt.png`" style="width: 80%;margin: 0 auto;"></img></div>
</div>
<div style="background-color: #ffffff;padding: 10px;margin-top: 20px;">
<div class="tab-scroll-container" style="padding-bottom: 10px;">
<div class="dddccc">
<div v-for="(item, index) in newsListtyp" :key="index"
:class="['lef_boxitem2', { 'active': detailId == item.id }]" @click="getMesList(item.id,1)">
<div>{{ item.name }}</div>
<div v-if="detailId == item.id"
style="height: 3px;background-color: #2C8AE0;width: 30px;margin: 0 auto;">
</div>
</div>
</div>
</div>
<div v-for="(item, index) in MesList" :key="index">
<div class="re_box_item">
<div class="re_title">
<div class="flex align-center">
<div class="dian"></div>
<span class="one-line-ellipsis jc-span">{{ item.title }}</span>
</div>
</div>
</div>
<div v-if="index != 8" style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 15px 0;"></div>
</div>
<div style="display: flex;justify-content:center;align-items: center;border: 1px solid #2C8AE0;height: 40px;margin-top: 20px;text-align: center;">
<div @click="getPageList(0)" style="width: 34%;height: 40px;line-height: 40px;border-right: 1px solid #2C8AE0;background-color: #2C8AE0;color: #ffffff;">上一页</div>
<div style="width: 33%;height: 40px;line-height: 40px;border-right: 1px solid #2C8AE0;">{{ page }} / {{ total }}</div>
<div @click="getPageList(1)" style="width: 34%;height: 40px;line-height: 40px;background-color: #2C8AE0;color: #ffffff;">下一页</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
import { NPagination } from 'naive-ui'
import $api from '@/service/webRequest'
import emitter from '@/plugins/emitter'
const inputSearch = ref('');
const MesList = ref([]);
const newsListtyp = ref([]);
const page = ref(1);
const total = ref(0);
const cateid = ref(null);
const detailId = ref(0);
//
onMounted(() => {
//getMesList();
getNewstypeList();
})
//
const openUrl = (id: number) => {
window.open(`/info/${id}?type=1`)
}
const getPageList = async (type: number) => {
page.value = type == 0 ? page.value - 1 : page.value + 1;
if(page.value < 1){
page.value = 1;
}
if(page.value > total.value){
page.value = total.value;
}
getMesList(detailId.value,page.value);
}
const getMesList = async (id: number, pagecru: number) => {
detailId.value = id;
page.value = pagecru ? pagecru : page.value;
const res = await $api.post('/api/home.news/index',
{
cate_id: detailId.value,
limit: 9,
page: page.value,
isnews: 1
}
)
//
total.value = Math.ceil(res.data.data.count / 9);
//total.value = res.data.data.count;
MesList.value = res.data.data.list;
}
const getNewstypeList = async () => {
const res = await $api.get('/api/home.news/cate?isnews=1')
newsListtyp.value = res.data.data.list;
getMesList(res.data.data.list[0].id,1);
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.re_box_item {
width: 100%;
box-sizing: border-box;
padding: 0px 10px;
margin-top: 15px;
.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;
}
// &: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;
// }
// }
}
.dian {
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
/* 滚动容器样式 */
.tab-scroll-container {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
/* 隐藏滚动条但保持滚动功能 */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
}
.tab-scroll-container::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
}
.dddccc {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: max-content;
gap: 20px;
}
.jc-span{
width: 100%;
}
.lef_boxitem2 {
color: #323232;
font-size: 16px;
position: relative;
}
.active {
color: #2C8AE0;
font-weight: 600;
}
</style>

View File

@ -0,0 +1,141 @@
<template>
<!-- PC端布局 -->
<div class="w-full h-full" style="padding: 20px;">
<div style="background-color: #ffffff;padding: 10px;">
<div style="display: flex;justify-content: center;align-items: center;text-align: center;">
<div><img class="re_top_img" :src="`/img/fuwu2.png`" style="width: 100%;margin: 0 auto;"></img></div>
</div>
<div class="qn" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px;">
<div style="cursor: pointer;" v-for="item in fwImg" @click="openWeb(item)">
<img :src="item.image" alt=""></img>
</div>
</div>
</div>
<div style="background-color: #ffffff;margin-top: 10px;padding:20px 10px 1px 10px;">
<div style="padding-bottom: 20px;">
<img src="/img/tuan.png" style="width: 200px;margin: 0 auto;">
</div>
<div v-for="(item, index) in MesList" :key="index">
<div class="re_box_item">
<div class="re_title">
<div class="flex align-center">
<div class="dian"></div>
<span class="one-line-ellipsis jc-span">{{ item.title }}</span>
</div>
</div>
</div>
<div v-if="index != 6" style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 15px 0;"></div>
</div>
<div style="margin: 20px 10px 10px 10px;text-align: center;background-color: #EEEEEE;height: 50px;line-height: 50px;">
查看更多 ></div>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'
import { NPagination } from 'naive-ui'
import $api from '@/service/webRequest'
import emitter from '@/plugins/emitter'
const inputSearch = ref('');
const MesList = ref([]);
const newsListtyp = ref([]);
const page = ref(1);
const total = ref(0);
const cateid = ref(1);
const detailId = ref(null);
const showCode = ref(0);
const showCodeDo = (id: number) => {
showCode.value = id;
}
//
onMounted(() => {
getFwImg();
getMesList();
getYwList();
//getNewstypeList();
})
const fwImg = ref([]);
//
const getFwImg = async () => {
const res = await $api.get('/api/index/images?page=1&limit=9&status=2')
fwImg.value = res.data.data.list;
}
const openWeb = (item) => {
//out in
if (item.type == 'out') {
window.open(item.url);
} else {
window.open(`/info/${item.url}?type=1`)
}
console.log(item)
}
const toMore = () => {
window.open(`/messageBoard`)
}
//
const openUrl = (id: number) => {
window.open(`/info/${id}?type=3`)
}
//
// 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);
// }
//
const toSearch = () => {
// emit('toSwpe',9);
// emitter.emit('inputSea', {
// keywords:inputSearch.value,
// type: 1,
// });
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
}
const getMesList = async () => {
const res = await $api.post('/api/home.encyclopedia/index',
{
cate_id: '102',
limit: 7,
page: 1,
}
)
MesList.value = res.data.data.list;
}
const YwList = ref([]);
const getYwList = async () => {
const res = await $api.post('/api/home.encyclopedia/index',
{
cate_id: '103',
limit: 7,
page: 1,
}
)
YwList.value = res.data.data.list;
}
const getNewstypeList = async () => {
const res = await $api.get('/api/home.news/cate?isnews=1')
newsListtyp.value = res.data.data.list;
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.dian {
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
.jc-span {
width: 100%;
}
</style>

View File

@ -1,189 +1,37 @@
<template>
<div style="width: 100%;background-color: #F0F9FF;">
<PhoneHeader :crrentNum="1"></PhoneHeader>
<div class="w-full h-full" style="padding: 20px;">
<!-- 右边内容栏 -->
<div class="rightcon" id="homeid" @scroll="hmScroll">
<div class="h-auto home_con">
<div class="fly">
<div class="re_box re_box_left">
<div style="display: flex;justify-content: center;align-items: center;">
<div style="color: #41B2FE;"></div>
<div><img class="re_top_img" :src="`/img/index/wzjx.png`"></img></div>
<div style="color: #41B2FE;"></div>
</div>
<div class="swiper">
<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: 235px;object-fit: cover;">
</swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="fly1">
<div class="re_box">
<div class="re_box_item" v-for="(item, index) in zmList" :key="index"
@click="openUrl(item.id)">
<div class="re_title">
<div class="flex align-center">
<span class="one-line-ellipsis lx-span">{{ item.title }}</span>
</div>
</div>
<div v-if="zmList.length != index + 1"
style="width: 100%;height: 1px;background-color: #EEEEEE;margin: 15px 0px;"></div>
</div>
<div
style="margin: 20px 10px;text-align: center;background-color: #EEEEEE;height: 50px;width: 100%;line-height: 50px;">
查看更多 ></div>
</div>
</div>
</div>
</div>
<div class="h-auto home_con1">
<div class="fly1s">
<div style="">
<div class="tab-scroll-container" style="padding: 15px 0px 5px 0px;">
<div class="dddccc">
<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>
</div>
</div>
</div>
<div v-for="(item, index) in jcList" :key="index">
<div class="re_box_item">
<div class="re_title">
<div class="flex align-center">
<div class="dian"></div>
<span class="one-line-ellipsis jc-span">{{ item.title }}</span>
</div>
</div>
</div>
<div v-if="index != 6"
style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 15px 0;"></div>
</div>
<div
style="margin: 20px 10px;text-align: center;background-color: #EEEEEE;height: 50px;line-height: 50px;">
查看更多 ></div>
</div>
</div>
</div>
<div class="fly1s" style="margin-top: 10px;">
<div style="display: flex;justify-content: center;align-items: center;padding-top: 15px;">
<div>
<img :src="`/img/index/r.png`" alt=""></img>
</div>
</div>
<div class="qn" style="">
<div v-for="item in fwImg" @click="openWeb(item)">
<img :src="item.image" alt=""></img>
</div>
</div>
</div>
</div>
<PhoneHeader :crrentNum="phone_index" @phoneCrrent="toswiper"></PhoneHeader>
<PhoneHome v-if="phone_index == 1"></PhoneHome>
<PhoneAbout v-if="phone_index == 2"></PhoneAbout>
<PhoneNews v-if="phone_index == 3"></PhoneNews>
<PhoneLuoYang v-if="phone_index == 4"></PhoneLuoYang>
<PhoneRegiment v-if="phone_index == 5"></PhoneRegiment>
<PhoneMessage v-if="phone_index == 6"></PhoneMessage>
<PhoneFooter></PhoneFooter>
</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 phone_index = ref(1);
const toswiper = (index: number) => {
console.log(index);
phone_index.value = index;
}
const xsImg = ref([]);
const listType = ref([]);
const listIndex = ref(0);
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 hmScroll = () => {
let home = document.getElementById('homeid');
if (home.scrollTop + home.clientHeight >= home.scrollHeight) {
emit('toSwpe', 2);
}
if (home.scrollTop == 0) {
emit('toSwpe', 0);
}
}
const toSearch = () => {
// emit('toSwpe',9);
// emitter.emit('inputSea', {
// keywords:inputSearch.value,
// type: 1,
// });
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
}
const openWeb = (item) => {
//out in
if (item.type == 'out') {
window.open(item.url);
} else {
window.open(`/info/${item.url}?type=1`)
}
console.log(item)
}
//
const toMore = (index: number) => {
emit('toSwpe', index);
}
const openUrl = (id: number) => {
window.open(`/info/${id}?type=1`)
}
//
// 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 zmList = ref([]);
//
const ptList = ref([]);
const jcList = ref([]);
const qcList = ref([]);
const mtList = ref([]);
//
const getNewstypeList = async () => {
@ -196,42 +44,17 @@ const getNewstypeList = async () => {
if (item.name == '通知公告') {
ptggid = item.id;
}
// if (item.name == '') {
// jcdtid = item.id;
// }
// if (item.name == '') {
// qclyid = item.id;
// }
// if (item.name == '') {
// mtjjid = item.id;
// }
});
//
listType.value = listType.value.filter((item: any) => item.name != '平台公告');
console.log(listType.value);
changeListIndex(listIndex.value);
// 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;
}
//
@ -246,7 +69,7 @@ const getFwImg = async () => {
fwImg.value = res.data.data.list;
}
onMounted(() => {
window.addEventListener('scroll', hmScroll);
//window.addEventListener('scroll', hmScroll);
getxsImg();
getFwImg();
getNewstypeList();
@ -260,308 +83,4 @@ const changeListIndex = async (id: number) => {
<style lang="scss" scoped>
@import '@/assets/index.scss';
/* pc端样式 */
.swiper {
.swiper-pagination {
text-align: right;
padding-right: 10px;
bottom: 0;
height: 38px;
line-height: 38px;
--swiper-pagination-color: #ffffff;
--swiper-pagination-bullet-inactive-color: rgb(255, 255, 255, 0.5);
--swiper-pagination-bullet-inactive-opacity: 1
/* 两种都可以 */
}
.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;
}
}
.rightcon {
width: 100%;
height: 100%;
background-color: #ffffff;
}
.home_con {
.fly {
width: 100%;
// padding-left: 80px;
.swiper_s {
width: 100%;
}
}
.fly1 {
width: 100%;
margin-top: 20px;
}
.re_box {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
// gap: 10px;
position: relative;
.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: 100%;
height: 2px;
background: #EEEEEE;
margin-left: 20px;
}
}
.re_box_left {
border-radius: 12px 0px 0px 12px;
}
}
.re_box_item {
width: 100%;
box-sizing: border-box;
padding: 0px 10px;
margin-top: 15px;
.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;
}
// &: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: 100%;
box-sizing: border-box;
background-color: #FFFEFE;
// margin: 0 auto;
margin-top: 10px;
padding-bottom: 1px;
}
.fly1s {
background-color: #ffffff;
width: 100%;
}
.home_con2 {
width: 100%;
box-sizing: border-box;
// margin: 0 auto;
// margin-top: 10px;
flex-wrap: wrap;
.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: 20px 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;
}
// &: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;
// }
// }
}
}
}
.dian {
width: 10px;
height: 10px;
background: #3B90DF;
border-radius: 50%;
margin-right: 15px;
}
.t1 {
font-weight: bold;
font-family: PingFang SC;
color: #999999;
font-size: 14px;
cursor: pointer;
position: relative;
white-space: nowrap;
min-width: max-content;
padding: 8px 12px;
flex-shrink: 0;
}
.t1:hover {
color: #2C8AE0;
}
.t2 {
font-weight: bold;
font-family: PingFang SC;
color: #2C8AE0;
font-size: 14px;
cursor: pointer;
position: relative;
white-space: nowrap;
min-width: max-content;
padding: 8px 12px;
flex-shrink: 0;
}
.t_line {
width: 40%;
height: 3px;
background-color: #3E92DE;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: -5px;
}
.qn {
padding: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 20px;
}
.qn div {
cursor: pointer;
}
.tz-span {}
.jc-span {
width: 100%;
}
.lx-span {}
/* 滚动容器样式 */
.tab-scroll-container {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
/* 隐藏滚动条但保持滚动功能 */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
}
.tab-scroll-container::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
}
.dddccc {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: max-content;
}
</style>

BIN
public/img/fuwu1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
public/img/fuwu2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/img/index/xwdt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
public/img/index/xxgk.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
public/img/index/zzjg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB