H5制作
This commit is contained in:
parent
311cf487d1
commit
87b389570f
65
components/PhoneAbout.vue
Normal file
65
components/PhoneAbout.vue
Normal 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>
|
||||||
110
components/PhoneContactUs.vue
Normal file
110
components/PhoneContactUs.vue
Normal 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>
|
||||||
@ -12,45 +12,45 @@
|
|||||||
<div class="pc-nav">
|
<div class="pc-nav">
|
||||||
|
|
||||||
<div class="pc-nav-item" @click="gotoList(1)">
|
<div class="pc-nav-item" @click="gotoList(1)">
|
||||||
<img :src="crrent == 1 ? '/img/index/home1.png' : '/img/index/home.png'" alt=""></img>
|
<img :src="crrentNum == 1 ? '/img/index/home1.png' : '/img/index/home.png'" alt=""></img>
|
||||||
<span :class="['span', { 'active': crrent == 1 }]">官网首页</span>
|
<span :class="['span', { 'active': crrentNum == 1 }]">官网首页</span>
|
||||||
<img v-if="crrent == 1" src="/img/index/arrow.png" alt=""
|
<img v-if="crrentNum == 1" src="/img/index/arrow.png" alt=""
|
||||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<div class="pc-nav-item" @click="gotoList(2)">
|
<div class="pc-nav-item" @click="gotoList(2)">
|
||||||
<img :src="crrent == 2 ? '/img/index/aboutus1.png' : '/img/index/aboutus.png'" alt=""></img>
|
<img :src="crrentNum == 2 ? '/img/index/aboutus1.png' : '/img/index/aboutus.png'" alt=""></img>
|
||||||
<span :class="['span', { 'active': crrent == 2 }]">组织机构</span>
|
<span :class="['span', { 'active': crrentNum == 2 }]">组织机构</span>
|
||||||
<img v-if="crrent == 2" src="/img/index/arrow.png" alt=""
|
<img v-if="crrentNum == 2" src="/img/index/arrow.png" alt=""
|
||||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<div class="pc-nav-item" @click="gotoList(3)">
|
<div class="pc-nav-item" @click="gotoList(3)">
|
||||||
<img :src="crrent == 3 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
|
<img :src="crrentNum == 3 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
|
||||||
<span :class="['span', { 'active': crrent == 3 }]">新闻动态</span>
|
<span :class="['span', { 'active': crrentNum == 3 }]">新闻动态</span>
|
||||||
<img v-if="crrent == 3" src="/img/index/arrow.png" alt=""
|
<img v-if="crrentNum == 3" src="/img/index/arrow.png" alt=""
|
||||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<div class="pc-nav-item" @click="gotoList(4)">
|
<div class="pc-nav-item" @click="gotoList(4)">
|
||||||
<img :src="crrent == 4 ? '/img/index/ly1.png' : '/img/index/ly.png'" alt=""></img>
|
<img :src="crrentNum == 4 ? '/img/index/ly1.png' : '/img/index/ly.png'" alt=""></img>
|
||||||
<span :class="['span', { 'active': crrent == 4 }]">青春洛阳</span>
|
<span :class="['span', { 'active': crrentNum == 4 }]">青春洛阳</span>
|
||||||
<img v-if="crrent == 4" src="/img/index/arrow.png" alt=""
|
<img v-if="crrentNum == 4" src="/img/index/arrow.png" alt=""
|
||||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<div class="pc-nav-item" @click="gotoList(5)">
|
<div class="pc-nav-item" @click="gotoList(5)">
|
||||||
<img :src="crrent == 5 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
|
<img :src="crrentNum == 5 ? '/img/index/news1.png' : '/img/index/news.png'" alt=""></img>
|
||||||
<span :class="['span', { 'active': crrent == 5 }]">服务青年</span>
|
<span :class="['span', { 'active': crrentNum == 5 }]">服务青年</span>
|
||||||
<img v-if="crrent == 5" src="/img/index/arrow.png" alt=""
|
<img v-if="crrentNum == 5" src="/img/index/arrow.png" alt=""
|
||||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<div class="pc-nav-item" @click="gotoList(6)">
|
<div class="pc-nav-item" @click="gotoList(6)">
|
||||||
<img :src="crrent == 6 ? '/img/index/message1.png' : '/img/index/message.png'" alt=""></img>
|
<img :src="crrentNum == 6 ? '/img/index/message1.png' : '/img/index/message.png'" alt=""></img>
|
||||||
<span :class="['span', { 'active': crrent == 6 }]">信息公开</span>
|
<span :class="['span', { 'active': crrentNum == 6 }]">信息公开</span>
|
||||||
<img v-if="crrent == 6" src="/img/index/arrow.png" alt=""
|
<img v-if="crrentNum == 6" src="/img/index/arrow.png" alt=""
|
||||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<div class="pc-nav-item" @click="gotoList(7)">
|
<div class="pc-nav-item" @click="gotoList(7)">
|
||||||
<img :src="crrent == 7 ? '/img/index/tt1.png' : '/img/index/tt.png'" alt=""></img>
|
<img :src="crrentNum == 7 ? '/img/index/tt1.png' : '/img/index/tt.png'" alt=""></img>
|
||||||
<span :class="['span', { 'active': crrent == 7 }]">团团留言板</span>
|
<span :class="['span', { 'active': crrentNum == 7 }]">团团留言板</span>
|
||||||
<img v-if="crrent == 7" src="/img/index/arrow.png" alt=""
|
<img v-if="crrentNum == 7" src="/img/index/arrow.png" alt=""
|
||||||
style="width: 9px;height: 12px;margin-left: 10px;">
|
style="width: 9px;height: 12px;margin-left: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="pc-nav-item" @click="gotoList(8)">
|
<!-- <div class="pc-nav-item" @click="gotoList(8)">
|
||||||
@ -91,13 +91,14 @@ const openOldMode = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const gotoList = (index: number) => {
|
const gotoList = (index: number) => {
|
||||||
console.log(router.currentRoute);
|
// console.log(router.currentRoute);
|
||||||
if (router.currentRoute.value.path != '/') {
|
// if (router.currentRoute.value.path != '/') {
|
||||||
window.open(`/`, '_blank');
|
// window.open(`/`, '_blank');
|
||||||
localStorage.setItem('index_detail', index)
|
// localStorage.setItem('index_detail', index)
|
||||||
}
|
// }
|
||||||
crrent.value = index
|
// crrent.value = index
|
||||||
emit('crrentTop', index)
|
show.value=false;
|
||||||
|
emit('phoneCrrent', index)
|
||||||
|
|
||||||
}
|
}
|
||||||
//更新当前索引值
|
//更新当前索引值
|
||||||
|
|||||||
549
components/PhoneHome.vue
Normal file
549
components/PhoneHome.vue
Normal 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
118
components/PhoneLuoYang.vue
Normal 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
157
components/PhoneMessage.vue
Normal 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
176
components/PhoneNews.vue
Normal 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>
|
||||||
141
components/PhoneRegiment.vue
Normal file
141
components/PhoneRegiment.vue
Normal 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>
|
||||||
@ -1,189 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="width: 100%;background-color: #F0F9FF;">
|
<div style="width: 100%;background-color: #F0F9FF;">
|
||||||
<PhoneHeader :crrentNum="1"></PhoneHeader>
|
<PhoneHeader :crrentNum="phone_index" @phoneCrrent="toswiper"></PhoneHeader>
|
||||||
<div class="w-full h-full" style="padding: 20px;">
|
<PhoneHome v-if="phone_index == 1"></PhoneHome>
|
||||||
<!-- 右边内容栏 -->
|
<PhoneAbout v-if="phone_index == 2"></PhoneAbout>
|
||||||
<div class="rightcon" id="homeid" @scroll="hmScroll">
|
<PhoneNews v-if="phone_index == 3"></PhoneNews>
|
||||||
<div class="h-auto home_con">
|
<PhoneLuoYang v-if="phone_index == 4"></PhoneLuoYang>
|
||||||
<div class="fly">
|
<PhoneRegiment v-if="phone_index == 5"></PhoneRegiment>
|
||||||
<div class="re_box re_box_left">
|
<PhoneMessage v-if="phone_index == 6"></PhoneMessage>
|
||||||
<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>
|
|
||||||
<PhoneFooter></PhoneFooter>
|
<PhoneFooter></PhoneFooter>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import $api from '@/service/webRequest'
|
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 xsImg = ref([]);
|
||||||
const listType = ref([]);
|
const listType = ref([]);
|
||||||
const listIndex = ref(0);
|
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 zmList = ref([]);
|
||||||
|
|
||||||
//国务院百事通
|
//国务院百事通
|
||||||
const ptList = ref([]);
|
const ptList = ref([]);
|
||||||
const jcList = ref([]);
|
const jcList = ref([]);
|
||||||
const qcList = ref([]);
|
|
||||||
const mtList = ref([]);
|
|
||||||
|
|
||||||
//新闻分类
|
//新闻分类
|
||||||
const getNewstypeList = async () => {
|
const getNewstypeList = async () => {
|
||||||
@ -196,42 +44,17 @@ const getNewstypeList = async () => {
|
|||||||
if (item.name == '通知公告') {
|
if (item.name == '通知公告') {
|
||||||
ptggid = item.id;
|
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 != '平台公告');
|
listType.value = listType.value.filter((item: any) => item.name != '平台公告');
|
||||||
console.log(listType.value);
|
console.log(listType.value);
|
||||||
changeListIndex(listIndex.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`)
|
const ress1 = await $api.get(`/api/home.news/index?page=1&limit=5&fine=1`)
|
||||||
zmList.value = ress1.data.data.list;
|
zmList.value = ress1.data.data.list;
|
||||||
|
|
||||||
// //平台公告
|
// //平台公告
|
||||||
const ress2 = await $api.get(`/api/home.news/index?cate_id=${ptggid}&page=1&limit=5`)
|
const ress2 = await $api.get(`/api/home.news/index?cate_id=${ptggid}&page=1&limit=5`)
|
||||||
ptList.value = ress2.data.data.list;
|
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;
|
fwImg.value = res.data.data.list;
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('scroll', hmScroll);
|
//window.addEventListener('scroll', hmScroll);
|
||||||
getxsImg();
|
getxsImg();
|
||||||
getFwImg();
|
getFwImg();
|
||||||
getNewstypeList();
|
getNewstypeList();
|
||||||
@ -260,308 +83,4 @@ const changeListIndex = async (id: number) => {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/assets/index.scss';
|
@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>
|
</style>
|
||||||
|
|||||||
BIN
public/img/fuwu1.png
Normal file
BIN
public/img/fuwu1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
public/img/fuwu2.png
Normal file
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
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
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
BIN
public/img/index/zzjg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Loading…
x
Reference in New Issue
Block a user