409 lines
13 KiB
Vue
409 lines
13 KiB
Vue
<template>
|
|
<!-- PC端布局 -->
|
|
<div class="flex justify-between w-full h-full">
|
|
<!-- 左边导航栏 -->
|
|
|
|
|
|
<!-- 右边内容栏 -->
|
|
<div class="rightcon">
|
|
<div class="flex top_search ">
|
|
<div style="width: 350px;">
|
|
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
|
|
</div>
|
|
<div class="inputform">
|
|
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
|
|
placeholder="请输入搜索关键字" />
|
|
<div class="search_rinput" @click="toSearch">
|
|
<img src="/img/index/hmsearch.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="News_box">
|
|
<div class="lef_box" style="margin-top: 50px;">
|
|
<div>
|
|
<img src="/img/fuwu.png" style="width: 100%;">
|
|
</div>
|
|
<div style="margin-top: 25px;">
|
|
<div class="qn"
|
|
style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px;">
|
|
<div>
|
|
<img :src="`/img/home/1.png`" alt=""></img>
|
|
</div>
|
|
<div>
|
|
<img :src="`/img/home/2.png`" alt=""></img>
|
|
</div>
|
|
<div>
|
|
<img :src="`/img/home/3.png`" alt=""></img>
|
|
</div>
|
|
<div>
|
|
<img :src="`/img/home/4.png`" alt=""></img>
|
|
</div>
|
|
<div>
|
|
<img :src="`/img/home/5.png`" alt=""></img>
|
|
</div>
|
|
<div>
|
|
<img :src="`/img/home/6.png`" alt=""></img>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 50px;">
|
|
<img src="/img/tuan.png" style="width: 400px;margin: 0 auto;">
|
|
</div>
|
|
<div class="home_con1" style="margin-top: 50px;">
|
|
<div class="fly1s" style="display: flex;gap: 20px;">
|
|
<div style="width: 65%;background-color: #ffffff;">
|
|
<div class="no-wrap"
|
|
style="padding: 15px;display: flex;justify-content: space-between;align-items: center;">
|
|
<div style="display: flex;align-items: center;gap: 10px;">
|
|
<div>
|
|
<img src="/img/f1.png" alt="" style="width: 35px;"></img>
|
|
</div>
|
|
<div
|
|
style="padding-left: 10px;font-family: PingFang SC;font-weight: bold;font-size: 22px;color: #323232;">
|
|
热门百科
|
|
</div>
|
|
</div>
|
|
<div class="pr-[5px]" style="display: flex;align-items: center;">
|
|
<span style="color: #999999;">更多</span>
|
|
<img src="/img/index/more_j.png" alt=""
|
|
style="width: 8px;height: 13px;margin-left: 5px;"></img>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 1px;background-color: #EEEEEE;"></div>
|
|
<div v-for="(item, index) in 7" :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 rm-span">习近平：推进中习近平：推进中国式现代化要继续把制造业搞好国式现代化要继续把制造业搞好</span>
|
|
</div>
|
|
<span class="one-line-ellipsis" style="color: #999999;">05-26</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="index != 6"
|
|
style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 0 auto;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 35%;background-color: #ffffff;">
|
|
<div style="width: 100%;height: 4px;background-color: #338CDE;"></div>
|
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
|
<div style="display: flex;align-items: center;gap: 10px;padding: 13px;">
|
|
<div>
|
|
<img src="/img/f2.png" alt="" style="width: 35px;"></img>
|
|
</div>
|
|
<div
|
|
style="padding-left: 10px;font-family: PingFang SC;font-weight: bold;font-size: 22px;color: #323232;">
|
|
国务院百事通
|
|
</div>
|
|
</div>
|
|
<div class="pr-[20px]" style="display: flex;align-items: center;">
|
|
<span style="color: #999999;">更多</span>
|
|
<img src="/img/index/more_j.png" alt=""
|
|
style="width: 8px;height: 13px;margin-left: 5px;"></img>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 1px;background-color: #EEEEEE;"></div>
|
|
<div v-for="(item, index) in 7" :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 gw-span">中国共产主义青年团的性质是什么中国共产主义青年团的性质是什么?</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="index != 6"
|
|
style="width: 95%;height: 1px;background-color: #EEEEEE;margin: 0 auto;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<AppFooter></AppFooter>
|
|
<!-- 右分享 -->
|
|
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
|
|
<img :src="`/img/index/douyin.png`" alt="">
|
|
<img :src="`/img/index/wb.png`" alt="">
|
|
<img :src="`/img/index/wx.png`" alt="">
|
|
<img :src="`/img/index/blbl.png`" alt="">
|
|
</div> -->
|
|
<!-- 底部鼠标 -->
|
|
<div class="mouse_img">
|
|
<img :src="`/img/index/hmouse.png`" alt="">
|
|
</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([{ id: 1, name: '市本级' }, { id: 2, name: '各县（区）' }, { id: 3, name: '市属高校' }, { id: 4, name: '市属企业' }, { id: 5, name: '其它' },]);
|
|
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(() => {
|
|
//getMesList();
|
|
//getNewstypeList();
|
|
})
|
|
const emit = defineEmits(['toSwpe'])
|
|
|
|
//跳转详情
|
|
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);
|
|
// }
|
|
//搜索
|
|
const toSearch = () => {
|
|
// emit('toSwpe',9);
|
|
// emitter.emit('inputSea', {
|
|
// keywords:inputSearch.value,
|
|
// type: 1,
|
|
// });
|
|
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
|
|
}
|
|
const getPageList = async () => {
|
|
page.value = page.value;
|
|
getMesList();
|
|
}
|
|
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.news/index',
|
|
// {
|
|
// cate_id: cateid.value,
|
|
// limit: 9,
|
|
// page: page.value,
|
|
// isnews: 1
|
|
// }
|
|
// )
|
|
// 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;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/index.scss';
|
|
|
|
|
|
/* pc端样式 */
|
|
|
|
.rightcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('/img/index/rightcons.png');
|
|
background-size: 100% 100%;
|
|
overflow-y: auto;
|
|
|
|
.fiximg {
|
|
img {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top_search {
|
|
margin-top: 50px;
|
|
height: 70px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-left: 415px;
|
|
width: 1200px;
|
|
}
|
|
|
|
.inputform {
|
|
position: relative;
|
|
width: 340px;
|
|
}
|
|
|
|
.contactInput {
|
|
width: 337px;
|
|
height: 50px;
|
|
background: #FFFFFF;
|
|
border-radius: 8px;
|
|
border: 1px solid #DEE4E8;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.contactInput::placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
.contactInput:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.search_rinput {
|
|
width: 68px;
|
|
height: 50px;
|
|
background: #338CDE;
|
|
border-radius: 0px 8px 8px 0px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.News_box {
|
|
width: 1300px;
|
|
margin: 0 auto;
|
|
|
|
.lef_box {
|
|
height: 100%;
|
|
margin-top: 40px;
|
|
margin-left: 100px;
|
|
|
|
}
|
|
}
|
|
|
|
.le1 {
|
|
color: #338CDE;
|
|
font-family: PingFang SC;
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
width: 261px;
|
|
height: 65px;
|
|
line-height: 65px;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
border: 1px solid #338CDE;
|
|
background-image: url('/img/ly_listbg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.le2 {
|
|
color: #323232;
|
|
font-family: PingFang SC;
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
width: 261px;
|
|
height: 65px;
|
|
background-color: #ffffff;
|
|
line-height: 65px;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.le2:hover {
|
|
border: 1px solid #338CDE;
|
|
}
|
|
|
|
.ly_list {
|
|
width: 298px;
|
|
height: 298px;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.re_box_item {
|
|
width: 100%;
|
|
padding: 15px;
|
|
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;
|
|
|
|
.dian {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #3B90DF;
|
|
border-radius: 50%;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
// &:hover{
|
|
// background-image: url('/img/index/listhmbg.png');
|
|
// background-size: 100% 100%;
|
|
// cursor: pointer;
|
|
// .slices_rol{
|
|
// width: 10px;
|
|
// height: 88px;
|
|
// background: #FAA828;
|
|
// position: absolute;
|
|
// right: 0;
|
|
// }
|
|
// }
|
|
|
|
}
|
|
|
|
.rm-span {
|
|
width: 550px;
|
|
}
|
|
.gw-span{
|
|
width: 350px;
|
|
}
|
|
@media (max-width: 1440px) {
|
|
.top_search {
|
|
width: 920px;
|
|
margin-left: 373px;
|
|
|
|
}
|
|
|
|
.News_box {
|
|
width: 1032px;
|
|
margin-left: 270px;
|
|
}
|
|
|
|
.rig_box {
|
|
width: 700px;
|
|
}
|
|
|
|
.rm-span {
|
|
width: 450px;
|
|
}
|
|
.gw-span{
|
|
width:280px;
|
|
}
|
|
}
|
|
</style>
|