改版搞定
This commit is contained in:
parent
4095e8afcb
commit
bea00be7cc
12
app.vue
12
app.vue
@ -76,4 +76,16 @@ select{
|
||||
|
||||
appearance:none;
|
||||
}
|
||||
.mouse_img {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 60px;
|
||||
width: 150px;
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
.mouse_img {
|
||||
width: 100px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,163 +1,215 @@
|
||||
<template>
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-full" >
|
||||
<!-- 左边导航栏 -->
|
||||
|
||||
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon">
|
||||
<div class="ab_top">
|
||||
<div class="ab_col"></div>
|
||||
<div class="ab_tit">团市委职责</div>
|
||||
<div class="ab_col"></div>
|
||||
</div>
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-full">
|
||||
<!-- 左边导航栏 -->
|
||||
|
||||
<div class="ab_con">
|
||||
<div>
|
||||
<img src="/img/about/cpc.png" alt="">
|
||||
</div>
|
||||
<div style="margin-left: 100px;">
|
||||
<swiper class="w-[667px] h-[340px]" @swiper="onSwiperImgs" v-bind="swiperOptionsimgs">
|
||||
<swiper-slide v-for="(item,index) in listImg" :key="index" @click="gotoDetail(7)">
|
||||
<div class="img_tits">
|
||||
<p>{{item.title1 }}</p>
|
||||
<p>{{item.title2 }}</p>
|
||||
<p>{{item.title3 }}</p>
|
||||
<p>{{item.title4 }}</p>
|
||||
<p v-if="item.title5">{{item.title5 }}</p>
|
||||
</div>
|
||||
<img :src="item.image" style="width: 100%;height: 100%;object-fit: cover;">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ab_top" style="margin-top: 30px;">
|
||||
<div class="ab_col"></div>
|
||||
<div class="ab_tit">各部门职能</div>
|
||||
<div class="ab_col"></div>
|
||||
</div>
|
||||
|
||||
<div class="ab_bot" style="margin-top: 10px;">
|
||||
<div class="ab_bot_item" v-for="(item, index) in bmList" :key="index" @mouseenter="mouseenters(index)" @click="gotoDetail(7)">
|
||||
<div class="ab_bot_item_tit">{{item.title}}</div>
|
||||
<div class="ab_bot_item_con three-line-ellipsis">{{item.content}}</div>
|
||||
<div class="ab_bot_item_tel" v-if="item.abshow">
|
||||
<img class="img_tl" src="/img/about/telp.png" alt="">
|
||||
<div class="span_tl">电话：{{item.telnum}}</div>
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon">
|
||||
<div class="flex top_search ">
|
||||
<div style="width: 350x;">
|
||||
<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">
|
||||
<!-- @click="getMesList(null)" 新闻动态总 -->
|
||||
<div class="lef_boxitem1">
|
||||
<div class="lef_boxitem1_shu"></div>
|
||||
<div class="lef_boxitem1_title">关于我们</div>
|
||||
</div>
|
||||
<div :class="['lef_boxitem2', { 'active': cateid == item.id }]" v-for="(item, index) in newsListtyp"
|
||||
:key="index" @click="getMesList(item.id, 1)">
|
||||
<div class="lef_boxitem2_title">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rig_box">
|
||||
<div class="re_box">
|
||||
<div style="background: #ffffff;width: 100%;display: flex;align-items: center;padding: 18px;">
|
||||
<div>
|
||||
<img :src="`/img/key.png`" style="width: 22px;height: 22px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #323232;margin-left: 10px;">当前位置：首页 > 关于我们 > <span
|
||||
style="color: #3B90DF;">{{newsListtyp.find(item => item.id == cateid)?.name
|
||||
}}</span></div>
|
||||
</div>
|
||||
<div style="background-color: #ffffff;width: 100%;padding: 18px;">
|
||||
<div
|
||||
style="font-weight: bold;font-size: 32px;color: #393939;text-align: center;padding: 25px 0px 25px 0;">
|
||||
团市委的主要职责</div>
|
||||
<div style="width: 100%;height: 3px;border-top: 1px dashed #BBBBBB;"></div>
|
||||
<div
|
||||
style="color: #999999;font-weight: 400;font-size: 16px;line-height: 25px;white-space: pre-line;">
|
||||
<div v-html="ldbz"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 右分享 -->
|
||||
<!-- <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 style="position: absolute;bottom: 30px;right:30px;">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
<!-- 右分享 -->
|
||||
<!-- <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> -->
|
||||
<AppFooter></AppFooter>
|
||||
<!-- 底部鼠标 -->
|
||||
<div class="mouse_img">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { ref, onMounted, defineEmits } from 'vue'
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/autoplay'
|
||||
import "swiper/css/pagination";
|
||||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectCube, Mousewheel } from "swiper/modules";
|
||||
const bmList = ref([
|
||||
{ abshow:false,title: '办公室', telnum: '63225071', content: '协调处理机关日常事务；负责团市委重要会议的会务工作；负责机关文秘、信访、保密、网络工作；负责编发内部信息、简报工作；指导全市共青团的调查研究工作；负责对外联系、机关财务、资产、行政后勤等管理工作。' },
|
||||
{ abshow:false,title: '组织部', telnum: '63225070', content: '研究制定全市共青团组织、团干部和团员队伍建设的政策措施；指导推动全市团的基层组织、团员队伍和团干部队伍建设；负责团费收缴、管理和全市团的基层组织统计工作；组织开展全市性先进基层团组织和优秀团员、优秀团干部的评选表彰工作；指导推动团的基层阵地建设和基层组织信息化工作；协助党委管理县级团委的领导班子成员；协助管理在洛的团中央委员、候补委员和团省委委员、候补委员；指导全市团干部的教育培训；负责团市委机关和直属单位的人事管理、机构编制等工作；负责离退休人员的管理服务工作。' },
|
||||
{ abshow:false,title: '宣传部', telnum: '63225062', content: '组织指导全市团员青年的思想道德教育和全市团组织的文化活动；加强青年理想信念教育,引导全市广大青少年践行社会主义核心价值观；指导全市团的宣传工作；指导团员青年理论学习；提供和编写团干部教育材料和团课教材；强化青少年网络思想引领工作,提升网络舆情分析和引导能力；指导青少年活动阵地建设和青少年开展健康有益的活动；负责团市委的新闻、宣传工作,抓好团的宣传队伍建设。' },
|
||||
{ abshow:false,title: '青年发展部', telnum: '63225069', content: '研究制订促进全市青年发展的规划和政策措施,建立和完善青年服务体系；开展促进全市青年就业、创业、创新、创优和全市青年职业文明素养培养、技能培训提升等工作；指导洛阳市青年企业家协会、洛阳市青年农民专业合作社联合会等有关社会团体工作；组织实施对团市委定点扶贫地区的帮扶工作。' },
|
||||
{ abshow:false,title: '学校部(维护青少年权益部)', telnum: '63225067', content: '组织指导全市大中专院校、中学共青团工作,了解掌握学生的思想动态,根据党的教育方针开展团的各项活动；指导青年学生开展社会实践、勤工助学和课外科技、文化活动；培养青年学生创新意识和科技创新能力,推进大学生素质教育；负责市学联的日常事务工作；指导全市少先队工作,研究少年儿童的思想品德教育,协调和配合社会有关部门调查研究,反映情况,制定政策和措施；指导少先队校外阵地建设,组织开展有利于少年儿童健康成长的文化、体育活动；负责少先队宣传工作；抓好少先队辅导员队伍建设；负责少先队洛阳市工作委员会的日常事务工作；宣传贯彻《河南省未成年人保护条例》,负责全市未成年人权益保护工作；负责预防全市青少年违法犯罪工作；研究全市有关青少年发展问题,参与制定保护青少年健康成长的法规、政策；协调处理侵害青少年权益案件；指导青少年社会化服务体系建设；指导青少年报刊工作；承担市未成年人保护委员会办公室的日常工作。' },
|
||||
{ abshow:false,title: '统战联络部', telnum: '63225102', content: '负责全市青年统战工作,在各族各界青年代表人士中开展联谊和交流工作；负责市青联的日常事务及会员团体和委员的联络工作；协助管理在洛全国青联成员、省青联委员；开展青年科技人才和青年留学人员的联系服务工作；开展对台港澳地区青年及青年侨胞的统战工作；负责全市青少年外事工作,开展同国外、境外青少年组织的联络和交流活动。' },
|
||||
{ abshow:false,title: '社会联络部', telnum: '63230538', content: '研究制订全市共青团、青年社会组织参与社会建设的总体规划和政策制度；开展对全市青年社会组织和新兴青年群体的联系服务和引导工作；研究制订全市青年志愿服务工作规划、意见,指导全市青年志愿服务工作；指导建设全市青少年事务社会工作专业人才队伍；协调、指导全市青少年生态环境保护工作；承担全市性青年社团组织的指导和管理工作。' },
|
||||
{ abshow:false,title: '机关党总支', telnum: '63235856', content: '负责机关和直属单位的党群工作。' }
|
||||
|
||||
]);
|
||||
const listImg = ref([
|
||||
{
|
||||
title1: '一、领导全市的共青团工作。',
|
||||
title2: '二、负责全市团的组织建设，积极创新基层组织制度，协助党组织管理、选拔和培训团干部，对团校、青少年活动阵地、青少年报刊等事务进行规划和管理。',
|
||||
title3: '三、积极向党和政府反映青少年的意愿和呼声，提出意见和建议，充分发挥民主参与和民主监督作用。',
|
||||
title4: '四、贯彻实施《河南省未成年人保护条例》，参与青少年事业发展规划和青少年工作政策的制定，积极实施希望工程，会同有关部门做好青少年权益保护和预防青少年犯罪工作，研究指导社区团的各项工作。',
|
||||
image: '/img/about/cpcrit.png'
|
||||
},
|
||||
{
|
||||
title1: '五、调查青年思想动态和青年工作情况，研究青少年工作理论、青少年思想教育、青少年事业发展等项工作，提出相应对策，开展各种活动。',
|
||||
title2: '六、领导全市青联、学联和少先队工作，对全市性青年社团组织实行指导和管理。',
|
||||
title3: '七、协助教育部门做好大、中、小学校的教育管理工作，维护学校稳定和社会安定团结。',
|
||||
title4: '八、会同有关部门对全市青少年外事工作实行归口管理和提供服务，负责与国外青少年团体、政府青年机构、国际地区性青年组织及其他友好团体的交流工作，负责青年对外宣传工作，负责做好青年统战对象的团结教育工作。',
|
||||
image: '/img/about/cpcrit1.png'
|
||||
},
|
||||
{
|
||||
title1: '九、围绕全市经济工作大局，组织和带领团员青年发挥生力军和突击队作用。',
|
||||
title2: '十、动员组织广大团员青年积极参与创建文明城市为主的各类创建活动。',
|
||||
title3: '十一、围绕党政工作大局，突出青年特点，完善服务内容，促进青年创业就业。',
|
||||
title4: '十二、做好党政机关团员青年效能建设工作，开展各种活动，带动机关服务质量、办事效率和执行力的进一步提高。',
|
||||
title5: '十三、承担市委交办的其他事项。',
|
||||
image: '/img/about/cpcrit2.png'
|
||||
}
|
||||
])
|
||||
const mouseenters = (index: number) => {
|
||||
bmList.value.forEach((item, index) => {
|
||||
item.abshow = false;
|
||||
})
|
||||
bmList.value[index].abshow = true;
|
||||
}
|
||||
const swiperOptionsimgs = {
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
direction: 'horizontal',
|
||||
slidesPerView: 3,
|
||||
speed: 500,
|
||||
effect: 'coverflow',
|
||||
loop: true,
|
||||
modules: [Autoplay,EffectCoverflow],
|
||||
centeredSlides: true,
|
||||
spaceBetween: "-60%",
|
||||
coverflowEffect: {
|
||||
rotate: 0,
|
||||
stretch: 100,
|
||||
depth: 800,
|
||||
modifier: 1,
|
||||
slideShadows : false
|
||||
},
|
||||
// observer: true,
|
||||
// ovserveParent: false,
|
||||
// pagination: {
|
||||
// el:'.swiper-pagination'
|
||||
// },
|
||||
}
|
||||
let newsSwiper: any = null
|
||||
const onSwiperImgs = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
// swiper.on('slideChange', () => {
|
||||
// // 更新当前活动幻灯片索引
|
||||
|
||||
// })
|
||||
}
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
//跳转详情
|
||||
const gotoDetail = (id: number) => {
|
||||
// localStorage.setItem('detailId', detailId.value);
|
||||
// emit('toSwpe',id)
|
||||
window.open('/about_info/')
|
||||
}
|
||||
onMounted(() => {
|
||||
// 挂载方法
|
||||
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 ldbz = ref(`思想引领：筑牢青年理想信念根基
|
||||
政治引领
|
||||
组织青年学习党的理论、方针政策，特别是习近平新时代中国特色社会主义思想，开展主题教育活动（如“青年大学习”“青马工程”），引导青年坚定“四个自信”，增强“两个维护”的自觉性。
|
||||
价值观培育
|
||||
弘扬社会主义核心价值观，通过榜样宣传、红色教育、网络思政等方式，引导青年树立正确的人生观、价值观。例如开展“青年五四奖章”“优秀共青团员”评选，宣传青年典型事迹。
|
||||
意识形态阵地建设
|
||||
加强青年网络舆论引导，管理团属新媒体平台（如微信公众号、微博、短视频账号），传播正能量，抵制错误思潮，维护网络空间清朗。
|
||||
二、组织建设：夯实团的基层基础
|
||||
团组织覆盖与规范化
|
||||
推动团的基层组织向新兴领域延伸（如非公企业、社会组织、互联网行业等），完善“智慧团建”系统，加强团员档案管理和组织关系转接。
|
||||
团员发展与教育
|
||||
严格团员发展程序，优化团员结构，开展团员意识教育，落实“三会两制一课”制度，增强团组织凝聚力和战斗力。
|
||||
团干部队伍建设
|
||||
选拔培养优秀团干部，组织专题培训、挂职锻炼，提升团干部的政治素养和业务能力，打造忠诚、干净、担当的骨干队伍。
|
||||
三、服务青年：解决青年急难愁盼问题
|
||||
就业创业支持
|
||||
联合人社部门、企业开展“千校万岗”招聘会、职业技能培训；搭建青年创业孵化基地，提供政策咨询、资金扶持（如“青创贷”）。
|
||||
婚恋与家庭服务
|
||||
举办青年联谊活动，搭建婚恋交友平台；关注青年育儿需求，推动普惠性托育服务。
|
||||
心理健康与法律援助
|
||||
开通12355青少年服务热线，提供心理咨询、法律咨询和权益维护服务，帮助青年缓解压力、应对困境。
|
||||
四、维护青年权益：当好青年利益代言人
|
||||
政策倡导与落实
|
||||
推动《中长期青年发展规划》在地方落地，参与制定青年发展相关政策，保障青年在教育、就业、住房等领域的合法权益。
|
||||
权益保护机制
|
||||
建立青少年权益代表制度，介入校园欺凌、劳动纠纷等案件；联合公检法司部门开展“法治进校园”“模拟法庭”等活动，提升青年法律意识。
|
||||
特殊群体关爱
|
||||
重点帮扶困境青少年（如留守儿童、残疾青年、失业青年），实施“希望工程”“阳光助学”等项目，提供物质帮扶和精神关怀。
|
||||
五、志愿服务与社会动员
|
||||
品牌志愿服务项目
|
||||
组织青年参与大型赛会服务（如马拉松、博览会）、社区治理、生态环保（“河小青”护河行动）、助老助残等志愿活动。
|
||||
应急响应与公益行动
|
||||
在自然灾害、公共卫生事件中组建青年突击队，开展物资调配、心理疏导等应急服务；发起公益募捐，支援弱势群体。
|
||||
志愿服务体系建设
|
||||
完善志愿者注册、培训、激励机制，推广“志愿汇”平台，推动志愿服务常态化、专业化。
|
||||
六、创新创业与人才培养
|
||||
青年创新创业扶持
|
||||
举办“创青春”创业大赛、青创论坛，对接风险投资和创业导师；推动高校与企业共建产学研合作平台。
|
||||
技能提升与职业发展
|
||||
开展“青年岗位能手”评选、职业技能竞赛，组织青年参与“工匠精神”培育计划，助力青年职业成长。
|
||||
青年人才引进与留用
|
||||
配合地方人才政策，吸引高校毕业生返乡就业；为高层次青年人才提供政策咨询、生活保障等配套服务。
|
||||
七、对外交流与协同合作
|
||||
青年交流项目
|
||||
组织与国内外青年团体的互访活动（如“国际青年领袖对话”），促进文化交流与经验共享。
|
||||
区域协同与资源整合
|
||||
联动工会、妇联、科协等群团组织，整合社会资源服务青年；与高校、企业共建实践基地。
|
||||
港澳台青年工作
|
||||
开展港澳台青年夏令营、实习计划，增进国家认同，推动融合发展。
|
||||
八、桥梁纽带作用：传达青年声音
|
||||
青年诉求调研与反馈
|
||||
定期开展青年发展状况调查，形成报告提交党委政府，推动青年关切问题纳入政策议程。
|
||||
参政议政渠道建设
|
||||
推荐优秀青年担任人大代表、政协委员，组织“共青团与人大代表、政协委员面对面”活动，畅通青年政治参与渠道。
|
||||
|
||||
巴黎奥运赛场上，我国体育健儿奋勇争先，取得境外参赛最好成绩，彰显了青年一代的昂扬向上、自信阳光。海军、空军喜庆75岁生日，人民子弟兵展现新风貌。面对洪涝、台风等自然灾害，广大党员干部冲锋在前，大家众志成城、守望相助。无数劳动者、建设者、创业者，都在为梦想拼搏。我为国家勋章和国家荣誉称号获得者颁奖，光荣属于他们，也属于每一个挺膺担当的奋斗者。
|
||||
|
||||
当今世界变乱交织，中国作为负责任大国，积极推动全球治理变革，深化全球南方团结合作。我们推进高质量共建“一带一路”走深走实，成功举办中非合作论坛北京峰会，在上合、金砖、亚太经合组织、二十国集团等双边多边场合，鲜明提出中国主张，为维护世界和平稳定注入更多正能量。
|
||||
|
||||
我们隆重庆祝新中国成立75周年，深情回望共和国的沧桑巨变。从五千多年中华文明的传承中一路走来，“中国”二字镌刻在“何尊”底部，更铭刻在每个华夏儿女心中。党的二十届三中全会胜利召开，吹响进一步全面深化改革的号角。我们乘着改革开放的时代大潮阔步前行，中国式现代化必将在改革开放中开辟更加广阔的前景。
|
||||
|
||||
2025年，我们将全面完成“十四五”规划。要实施更加积极有为的政策，聚精会神抓好高质量发展，推动高水平科技自立自强，保持经济社会发展良好势头。当前经济运行面临一些新情况，有外部环境不确定性的挑战，有新旧动能转换的压力，但这些经过努力是可以克服的。我们从来都是在风雨洗礼中成长、在历经考验中壮大，大家要充满信心。
|
||||
|
||||
家事国事天下事，让人民过上幸福生活是头等大事。家家户户都盼着孩子能有好的教育，老人能有好的养老服务，年轻人能有更多发展机会。这些朴实的愿望，就是对美好生活的向往。我们要一起努力，不断提升社会建设和治理水平，持续营造和谐包容的氛围，把老百姓身边的大事小情解决好，让大家笑容更多、心里更暖。
|
||||
|
||||
在澳门回归祖国25周年之际，我再到濠江之畔，新发展新变化令人欣喜。我们将坚定不移贯彻“一国两制”方针，保持香港、澳门长期繁荣稳定。两岸同胞一家亲，谁也无法割断我们的血脉亲情，谁也不能阻挡祖国统一的历史大势！
|
||||
|
||||
世界百年变局加速演进，需要以宽广胸襟超越隔阂冲突，以博大情怀关照人类命运。中国愿同各国一道，做友好合作的践行者、文明互鉴的推动者、构建人类命运共同体的参与者，共同开创世界的美好未来。
|
||||
|
||||
梦虽遥，追则能达；愿虽艰，持则可圆。中国式现代化的新征程上，每一个人都是主角，每一份付出都弥足珍贵，每一束光芒都熠熠生辉。
|
||||
|
||||
河山添锦绣，星光映万家。让我们满怀希望，迎接新的一年。祝祖国时和岁丰、繁荣昌盛！祝大家所愿皆所成，多喜乐、长安宁。`)
|
||||
|
||||
// 信息公开
|
||||
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, pagecru: number) => {
|
||||
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: 7,
|
||||
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>
|
||||
@ -166,142 +218,281 @@ onMounted(() => {
|
||||
|
||||
/* pc端样式 */
|
||||
|
||||
.rightcon{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/about/ab_bg.png');
|
||||
background-size: 100% 100%;
|
||||
.fiximg{
|
||||
img{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.rightcon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/img/index/rightcons.png');
|
||||
background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.fiximg {
|
||||
img {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ab_top{
|
||||
width: 1200px;
|
||||
height: 40px;
|
||||
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 400px;
|
||||
margin-top: 30px;
|
||||
.ab_tit{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
color: #4E3C3C;
|
||||
margin: 0 30px;
|
||||
}
|
||||
.ab_col{
|
||||
width: 78px;
|
||||
height: 3px;
|
||||
background: #348CDD;
|
||||
}
|
||||
}
|
||||
.ab_con{
|
||||
width:1200px;
|
||||
height: 350px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
gap: 20px;
|
||||
|
||||
.lef_box {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
margin-top: 40px;
|
||||
margin-left: 100px;
|
||||
|
||||
.lef_boxitem1 {
|
||||
width: 260px;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, #338CDE 0%, #3D92E0 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
margin-left: 400px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
|
||||
// cursor: pointer;
|
||||
.lef_boxitem1_title {
|
||||
width: 88px;
|
||||
// height: 22px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
color: #FFFEFE;
|
||||
}
|
||||
|
||||
.lef_boxitem1_shu {
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
background: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.ab_bot{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.lef_boxitem2 {
|
||||
width: 260px;
|
||||
height: 64px;
|
||||
background: #FFFFFF;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 400px;
|
||||
.ab_bot_item{
|
||||
width: 296px;
|
||||
height: 180px;
|
||||
margin-top: 10px;
|
||||
background-image: url('/img/about/ab_bot.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.ab_bot_item_tit{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.ab_bot_item_con{
|
||||
width: 224px;
|
||||
height: 64px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
margin:0 auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ab_bot_item_tel{
|
||||
position: absolute;
|
||||
top: 0;left: 0;
|
||||
background-image: url('/img/about/ab_bots.png');
|
||||
background-size: 100% 100%;
|
||||
width: 296px;
|
||||
height: 189px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.img_tl{
|
||||
margin-top: 40px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
.span_tl{
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #FFFEFE;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
.ab_bot_item_tit{
|
||||
color: #53A5E4;
|
||||
}
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.lef_boxitem2_title {
|
||||
width: 100%;
|
||||
// height: 19px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.swiper{
|
||||
.img_tits{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.rig_box {
|
||||
.re_box {
|
||||
width: 100%;
|
||||
padding-left: 30px;
|
||||
padding-top: 10px;
|
||||
cursor: pointer;
|
||||
p{
|
||||
margin: 10px 20px ;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
// padding-left: 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 10px;
|
||||
|
||||
.re_box_item {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EEF7FF;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.re_title {
|
||||
// width: 640px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dian {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #3B90DF;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.re_date {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #368BDB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.shu {
|
||||
background: #EEEEEE;
|
||||
width: 1px;
|
||||
height: 50px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.right_tex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
|
||||
.span1 {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #378EDF;
|
||||
}
|
||||
|
||||
.span2 {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #378EDF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: url('/img/message/listbg.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.re_date {
|
||||
.shu {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pages_tsw {
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
|
||||
color: #ffffff;
|
||||
background-color: #388FDF;
|
||||
border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
|
||||
color: #388FDF;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item--active:hover) {
|
||||
color: #ffffff !important;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item) {
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination-quick-jumper) {
|
||||
&:after {
|
||||
content: '页'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.top_search {
|
||||
width: 920px;
|
||||
margin-left: 373px;
|
||||
|
||||
}
|
||||
.News_box{
|
||||
width: 1032px;
|
||||
margin-left: 270px;
|
||||
}
|
||||
.rig_box{
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,7 +7,7 @@
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon">
|
||||
<div class="flex top_search ">
|
||||
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
||||
<div style="width: 350px;">
|
||||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
|
||||
</div>
|
||||
<!-- <div class="inputform">
|
||||
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="flex flex-col w-full h-full" style="width: 1300px;margin: 0 auto;">
|
||||
<div class="flex flex-col w-full h-full left-msg">
|
||||
<div
|
||||
style="z-index: 1;background: #ffffff;padding: 30px;border-radius: 16px;margin-top: 20px;margin-left: 100px;">
|
||||
<div class="liuyanba">团团留言板</div>
|
||||
@ -30,11 +30,11 @@
|
||||
placeholder="输入您的姓名" />
|
||||
<span>电话</span>
|
||||
<input v-model="formData.mobile"
|
||||
class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
|
||||
class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]"
|
||||
type="text" placeholder="请输入您的联系电话" />
|
||||
<span>邮箱</span>
|
||||
<input v-model="formData.emil"
|
||||
class="contactInputs mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[600px]"
|
||||
class="contactInputs mt-[15px] md:mt-[30px] w-full md:w-[600px]"
|
||||
type="text" placeholder="请输入您的邮箱" />
|
||||
</div>
|
||||
<div class="relative mt-4 md:mt-8 w-full md:w-[1100px] flex">
|
||||
@ -52,23 +52,23 @@
|
||||
<div class="re_tit">精选留言</div>
|
||||
<div class="re_col"></div>
|
||||
</div>
|
||||
<div class="flex justify-between ml-[100px]">
|
||||
<div class="flex justify-between ml-[100px]" style="gap: 20px;">
|
||||
<div class="re_list" v-for="item, index in liuyanList">
|
||||
<div style="margin: 30px;">
|
||||
<div class="re_list_tit flex" style="width: 100%;">
|
||||
<span style="width: 12%">问题：</span>
|
||||
<span style="color: #323232;width:90% ;">{{ item.question }}</span>
|
||||
<span style="width: 15%">问题：</span>
|
||||
<span style="color: #323232;width:85% ;">{{ item.question }}</span>
|
||||
</div>
|
||||
<div class="re_list_tit flex" style="margin-top: 15px;width: 100%;">
|
||||
<span style="width: 12%">描述：</span>
|
||||
<span style="width: 15%">描述：</span>
|
||||
<span :title="item.message" class="three-line-ellipsis"
|
||||
style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.message
|
||||
style="font-weight: 400;font-size: 14px;color: #999999;width:85% ;">{{ item.message
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="re_list_tit flex" style="margin-top: 15px;">
|
||||
<span style="color: #368FDF;width: 12%;">回复：</span>
|
||||
<span style="color: #368FDF;width: 15%;">回复：</span>
|
||||
<span :title="item.answer" class="two-line-ellipsis"
|
||||
style="font-weight: 400;font-size: 14px;color: #999999;width:88% ;">{{ item.answer
|
||||
style="font-weight: 400;font-size: 14px;color: #999999;width:85% ;">{{ item.answer
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -76,7 +76,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<AppFooter></AppFooter>
|
||||
<!-- 右分享 -->
|
||||
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
|
||||
<img :src="`/img/index/douyin.png`" alt="">
|
||||
@ -85,7 +85,7 @@
|
||||
<img :src="`/img/index/blbl.png`" alt="">
|
||||
</div> -->
|
||||
<!-- 底部鼠标 -->
|
||||
<div style="position: absolute;bottom: 30px;right:30px;">
|
||||
<div class="mouse_img">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
</div>
|
||||
</div>
|
||||
@ -174,11 +174,12 @@ const submitForm = () => {
|
||||
|
||||
/* pc端样式 */
|
||||
.rightcon {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/messageb.png');
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/img/index/rightcons.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
.fiximg {
|
||||
img {
|
||||
margin-bottom: 20px;
|
||||
@ -191,6 +192,8 @@ const submitForm = () => {
|
||||
height: 70px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 415px;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.inputform {
|
||||
@ -231,7 +234,6 @@ const submitForm = () => {
|
||||
|
||||
//------------------------------------------
|
||||
.liuyanba {
|
||||
width: 1200px;
|
||||
/* height: 22px; */
|
||||
margin: 0 auto;
|
||||
font-family: Microsoft YaHei UI;
|
||||
@ -319,7 +321,7 @@ const submitForm = () => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin: 50px 0px 40px 0px;
|
||||
|
||||
.re_tit {
|
||||
font-family: Microsoft YaHei;
|
||||
@ -337,12 +339,12 @@ const submitForm = () => {
|
||||
}
|
||||
|
||||
.re_list {
|
||||
width: 585px;
|
||||
width: 50%;
|
||||
height: 243px;
|
||||
margin-top: 20px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
|
||||
|
||||
.re_list_tit {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
@ -350,4 +352,31 @@ const submitForm = () => {
|
||||
color: #FFA234;
|
||||
}
|
||||
}
|
||||
|
||||
.left-msg {
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.left-msg {
|
||||
width: 1018px;
|
||||
margin: 0;
|
||||
margin-left: 270px;
|
||||
}
|
||||
#myTextarea{
|
||||
width: 752px;
|
||||
}
|
||||
.contactInputs{
|
||||
width: 210px;
|
||||
}
|
||||
.inputforms {
|
||||
display: flex;
|
||||
justify-content: start!important;
|
||||
align-items: center;
|
||||
}
|
||||
.contactForm .inputforms span{
|
||||
width: 41px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="group_30 flex-col pc-footer">
|
||||
<div class="text-wrapper_13 flex-row">
|
||||
<div class="fly1s" style="margin-top: 40px;">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;gap: 30px;">
|
||||
<div class="db-flex">
|
||||
<div class="b1">中央人民政府</div>
|
||||
<div style="display: flex;">
|
||||
<div class="b1" style="padding: 0;">
|
||||
@ -107,7 +107,7 @@
|
||||
|
||||
<div class="ml-[20px]">
|
||||
<img class="image_30" referrerpolicy="no-referrer" :src="`/img/bilicode.jpg`" />
|
||||
<p class="mt-[10px]">bilibili官方账号</p>
|
||||
<p class="mt-[10px]">bilibili官方</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -225,4 +225,27 @@ const selectValue = ref(false);
|
||||
border: 1px solid #EEEEEE;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.db-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.group_30 {
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
.db-flex {
|
||||
gap: 10px;
|
||||
}
|
||||
.b1{
|
||||
width: 180px;
|
||||
}
|
||||
.image_29{
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,12 +18,12 @@
|
||||
<img v-if="crrent==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/message1.png':'/img/index/message.png'" alt=""></img>
|
||||
<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="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
<div class="pc-nav-item" @click="gotoList(5)">
|
||||
<img :src="crrent==5?'/img/index/ly1.png':'/img/index/ly.png'" alt=""></img>
|
||||
<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="" style="width: 9px;height: 12px;margin-left: 10px;">
|
||||
</div>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
<div class="re_title">
|
||||
<div class="flex align-center">
|
||||
<div class="dian"></div>
|
||||
<span class="one-line-ellipsis" style="width:400px;">{{ item.title }}</span>
|
||||
<span class="one-line-ellipsis lx-span">{{ item.title }}</span>
|
||||
</div>
|
||||
<span class="one-line-ellipsis" style="color: #999999;">{{
|
||||
item.release_time_text.slice(5, 10) }}</span>
|
||||
@ -62,14 +62,13 @@
|
||||
<div class="h-auto home_con1" style="margin-top: 30px;">
|
||||
<div class="fly1s" style="display: flex;gap: 20px;">
|
||||
<div style="width: 65%;background-color: #ffffff;">
|
||||
<div style="padding: 15px;display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style=" overflow-x: auto; ">
|
||||
<div
|
||||
style="display: flex;align-items: center;gap: 55px;padding-bottom: 10px;">
|
||||
<div v-for="(item, index) in listType" :key="index" class="t2">
|
||||
<div>{{ item.name }}</div>
|
||||
<!-- <div class="t_line"></div> -->
|
||||
</div>
|
||||
<div class="no-wrap"
|
||||
style="padding: 15px;display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="display: flex;align-items: center;gap: 55px;">
|
||||
<div v-for="(item, index) in listType" :key="index"
|
||||
:class="listIndex == item.id ? 't2' : 't1'" @click="changeListIndex(item.id)">
|
||||
<div>{{ item.name }}</div>
|
||||
<div v-if="listIndex == item.id" class="t_line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pr-[20px]" style="display: flex;align-items: center;">
|
||||
@ -79,15 +78,15 @@
|
||||
</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" style="margin-top: 10px;">
|
||||
<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"
|
||||
style="width:400px;">习近平：推进中国式现代化要继续把制造业搞好</span>
|
||||
<span class="one-line-ellipsis jc-span">{{ item.title }}</span>
|
||||
</div>
|
||||
<span class="one-line-ellipsis" style="color: #999999;">06-25</span>
|
||||
<span class="one-line-ellipsis" style="color: #999999;">{{
|
||||
item.release_time_text.slice(5, 10) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="index != 6"
|
||||
@ -97,11 +96,11 @@
|
||||
<div style="width: 35%;background-color: #ffffff;">
|
||||
<div style="width: 100%;height: 5px;background-color: #338CDE;"></div>
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="display: flex;align-items: center;gap: 10px;padding: 15px;">
|
||||
<div style="display: flex;align-items: center;gap: 10px;padding:5px 15px;">
|
||||
<div>
|
||||
<img src="/img/index/gg.png" alt="" style="width: 40px;"></img>
|
||||
</div>
|
||||
<div style="font-family: PingFang SC;font-weight: bold;font-size: 22px;color: #323232;">
|
||||
<div class="t1">
|
||||
通知公告
|
||||
</div>
|
||||
</div>
|
||||
@ -112,11 +111,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in ptList" :key="index">
|
||||
<div class="re_box_item" style="margin-top: 10px;">
|
||||
<div class="re_box_item">
|
||||
<div class="re_title">
|
||||
<div class="flex align-center">
|
||||
<div class="dian"></div>
|
||||
<span class="one-line-ellipsis" style="width:270px;">{{ item.title }}</span>
|
||||
<span class="one-line-ellipsis tz-span">{{ item.title }}</span>
|
||||
</div>
|
||||
<span class="one-line-ellipsis" style="color: #999999;">
|
||||
{{ item.release_time_text.slice(5, 10) }}
|
||||
@ -134,24 +133,25 @@
|
||||
<img :src="`/img/index/r.png`" alt=""></img>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px;">
|
||||
<div class="qn"
|
||||
style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px;">
|
||||
<div>
|
||||
<img :src="`/img/code.png`" alt=""></img>
|
||||
<img :src="`/img/home/1.png`" alt=""></img>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="`/img/code.png`" alt=""></img>
|
||||
<img :src="`/img/home/2.png`" alt=""></img>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="`/img/code.png`" alt=""></img>
|
||||
<img :src="`/img/home/3.png`" alt=""></img>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="`/img/code.png`" alt=""></img>
|
||||
<img :src="`/img/home/4.png`" alt=""></img>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="`/img/code.png`" alt=""></img>
|
||||
<img :src="`/img/home/5.png`" alt=""></img>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="`/img/code.png`" alt=""></img>
|
||||
<img :src="`/img/home/6.png`" alt=""></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -285,7 +285,7 @@
|
||||
|
||||
|
||||
<!-- 底部鼠标 -->
|
||||
<div style="position: absolute;bottom: 30px;right:30px;">
|
||||
<div class="mouse_img">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
</div>
|
||||
</div>
|
||||
@ -305,6 +305,7 @@ const inputSearch = ref('');
|
||||
|
||||
const xsImg = ref([]);
|
||||
const listType = ref([]);
|
||||
const listIndex = ref(0);
|
||||
const detailId = ref(null);
|
||||
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
@ -394,24 +395,27 @@ 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 == '基层动态') {
|
||||
// jcdtid = item.id;
|
||||
// }
|
||||
|
||||
if (item.name == '青春洛阳') {
|
||||
qclyid = item.id;
|
||||
}
|
||||
if (item.name == '媒体聚焦') {
|
||||
mtjjid = 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`)
|
||||
@ -446,6 +450,11 @@ onMounted(() => {
|
||||
getxsImg();
|
||||
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>
|
||||
@ -462,8 +471,10 @@ onMounted(() => {
|
||||
bottom: 0;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
--swiper-pagination-color: #FFCD52;
|
||||
/* 两种都可以 */
|
||||
--swiper-pagination-color: #ffffff;
|
||||
--swiper-pagination-bullet-inactive-color: rgb(255, 255, 255, 0.5);
|
||||
--swiper-pagination-bullet-inactive-opacity: 1
|
||||
/* 两种都可以 */
|
||||
}
|
||||
|
||||
.img_tits {
|
||||
@ -490,7 +501,7 @@ onMounted(() => {
|
||||
background-image: url('/img/index/rightcons.png');
|
||||
background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.top_search {
|
||||
@ -731,7 +742,7 @@ onMounted(() => {
|
||||
|
||||
.re_box_item {
|
||||
width: 100%;
|
||||
padding: 15px 20px;
|
||||
padding: 20px 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -772,20 +783,6 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
|
||||
.home_con2,
|
||||
.home_con1,
|
||||
.home_con {
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.fly1s {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.t1 {
|
||||
font-weight: bold;
|
||||
font-family: PingFang SC;
|
||||
@ -818,4 +815,56 @@ onMounted(() => {
|
||||
right: 0;
|
||||
bottom: -15px;
|
||||
}
|
||||
|
||||
.qn div {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tz-span {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.jc-span {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.lx-span {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
|
||||
.home_con2,
|
||||
.home_con1,
|
||||
.home_con {
|
||||
width: 920px;
|
||||
}
|
||||
|
||||
.top_search {
|
||||
width: 920px;
|
||||
}
|
||||
|
||||
.fly1s {
|
||||
width: 900px;
|
||||
}
|
||||
.tz-span {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.jc-span {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.t1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.t2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.lx-span {
|
||||
width: 310px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,327 @@
|
||||
<template>
|
||||
<div>
|
||||
青春洛阳
|
||||
<!-- 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/luoyang.png" style="width: 100%;">
|
||||
</div>
|
||||
<div
|
||||
style="background: #ffffff;width: 100%;display: flex;align-items: center;padding: 15px;margin-top: 20px;">
|
||||
<div>
|
||||
<img :src="`/img/key.png`" style="width: 22px;height: 22px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #323232;margin-left: 10px;">当前位置：首页 > 青春洛阳 > <span
|
||||
style="color: #3B90DF;">{{newsListtyp.find(item => item.id == cateid)?.name
|
||||
}}</span></div>
|
||||
</div>
|
||||
<div style="display: flex;margin-top: 25px;gap: 15px;">
|
||||
<div>
|
||||
<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="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
|
||||
<div v-for="item in 9" class="ly_list" @mousemove="showCodeDo(item)"
|
||||
@click="showCodeDo(item)">
|
||||
<div>
|
||||
<img class="ly_list_img" :src="`/img/d.png`">
|
||||
<div class="ly_list_text">
|
||||
洛阳市共青团:抖音</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="`/img/dycode.jpg`">
|
||||
</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;
|
||||
}
|
||||
|
||||
.ly_list_img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ly_list_text {
|
||||
font-size: 22px;
|
||||
color: #323232;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.ly_list_img_act {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.top_search {
|
||||
width: 920px;
|
||||
margin-left: 373px;
|
||||
|
||||
}
|
||||
|
||||
.News_box {
|
||||
width: 1032px;
|
||||
margin-left: 270px;
|
||||
}
|
||||
|
||||
.rig_box {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.ly_list {
|
||||
width: 208px;
|
||||
height: 208px;
|
||||
}
|
||||
|
||||
.ly_list_img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ly_list_img_act {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ly_list_text {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,124 +1,150 @@
|
||||
<template>
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-full" >
|
||||
<!-- 左边导航栏 -->
|
||||
|
||||
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon">
|
||||
<div class="flex top_search ">
|
||||
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
||||
<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="">
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div class="me_top">
|
||||
<div class="me_col"></div>
|
||||
<div class="me_tit">信息公开</div>
|
||||
<div class="me_col"></div>
|
||||
</div>
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-for="(item,index) in MesList" :key="index" @click="openUrl(item.id)">
|
||||
<div class="re_title one-line-ellipsis">
|
||||
<div class="dian"></div>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="re_date">
|
||||
<div class="shu"></div>
|
||||
<div class="right_tex">
|
||||
<span class="span1">{{item.release_time_text.slice(8,10)}}</span>
|
||||
<span class="span2">{{item.release_time_text.slice(0,7)}}</span>
|
||||
<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>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;">
|
||||
<n-pagination v-model:page="page" :page-sizes="[6]" :item-count="total" size="medium"
|
||||
@update:page="getPageList" show-quick-jumper>
|
||||
<template #goto>
|
||||
到第
|
||||
</template>
|
||||
<template #prefix="{ itemCount}">
|
||||
共 {{ itemCount }} 条
|
||||
</template>
|
||||
</n-pagination>
|
||||
</div>
|
||||
<div class="News_box">
|
||||
<div class="lef_box">
|
||||
<!-- @click="getMesList(null)" 新闻动态总 -->
|
||||
<div class="lef_boxitem1">
|
||||
<div class="lef_boxitem1_shu"></div>
|
||||
<div class="lef_boxitem1_title">信息公开</div>
|
||||
</div>
|
||||
<div :class="['lef_boxitem2', { 'active': cateid == item.id }]" v-for="(item, index) in newsListtyp"
|
||||
:key="index" @click="getMesList(item.id, 1)">
|
||||
<div class="lef_boxitem2_title">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rig_box">
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-for="(item, index) in MesList" :key="index"
|
||||
@click="openUrl(item.id)">
|
||||
<div class="re_title">
|
||||
<div class="dian"></div>
|
||||
<span class="one-line-ellipsis">{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="re_date">
|
||||
<div class="shu"></div>
|
||||
<div class="right_tex">
|
||||
<span class="span1">{{ item.release_time_text.slice(8, 10) }}</span>
|
||||
<span class="span2">{{ item.release_time_text.slice(0, 7) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 右分享 -->
|
||||
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;">
|
||||
<n-pagination v-model:page="page" :page-sizes="[7]" :item-count="total" size="medium"
|
||||
@update:page="getPageList" show-quick-jumper>
|
||||
<template #goto>
|
||||
到第
|
||||
</template>
|
||||
<template #prefix="{ itemCount }">
|
||||
共 {{ itemCount }} 条
|
||||
</template>
|
||||
</n-pagination>
|
||||
</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 style="position: absolute;bottom: 30px;right:30px;">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
<!-- 底部鼠标 -->
|
||||
<div class="mouse_img">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineEmits } from 'vue'
|
||||
import { NPagination } from 'naive-ui'
|
||||
import {defineEmits} from 'vue'
|
||||
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(null);
|
||||
|
||||
// 信息公开
|
||||
onMounted(() => {
|
||||
getMesList();
|
||||
getMesList();
|
||||
getNewstypeList();
|
||||
})
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
const getPageList = async () => {
|
||||
page.value = page.value;
|
||||
getMesList();
|
||||
}
|
||||
const getMesList = async () => {
|
||||
const res = await $api.post('/api/home.information/index',
|
||||
{
|
||||
limit:6,
|
||||
page:page.value
|
||||
}
|
||||
)
|
||||
total.value = res.data.data.count;
|
||||
MesList.value = res.data.data.list;
|
||||
}
|
||||
const toSearch =() => {
|
||||
// emit('toSwpe',9);
|
||||
// emitter.emit('inputSea', {
|
||||
// keywords:inputSearch.value,
|
||||
// type: 2,
|
||||
// });
|
||||
window.open(`/search_info?type=2&keywords=${inputSearch.value}`)
|
||||
}
|
||||
|
||||
//跳转详情
|
||||
const openUrl = (id: number) => {
|
||||
window.open(`/info/${id}?type=2`)
|
||||
window.open(`/info/${id}?type=1`)
|
||||
}
|
||||
//跳转详情
|
||||
// const gotoDetail = (id: number) => {
|
||||
|
||||
// detailId.value = {
|
||||
// id: id,
|
||||
// type: '2'
|
||||
// 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, pagecru: number) => {
|
||||
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>
|
||||
@ -127,190 +153,285 @@ const openUrl = (id: number) => {
|
||||
|
||||
/* pc端样式 */
|
||||
|
||||
.rightcon{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/message/xxgk.png');
|
||||
background-size: 100% 100%;
|
||||
.fiximg{
|
||||
img{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.inputform {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
margin-right: 319px;
|
||||
}
|
||||
.contactInput {
|
||||
width: 337px;
|
||||
height: 50px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #DEE4E8;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.contactInput::placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
.top_search {
|
||||
margin-top: 50px;
|
||||
height: 70px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 415px;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.contactInput:focus {
|
||||
outline: none;
|
||||
}
|
||||
.search_rinput{
|
||||
width: 68px;
|
||||
height: 50px;
|
||||
background: #E6E6E6;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.me_top{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
// margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
.me_tit{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
color: #4E3C3C;
|
||||
margin: 0 30px;
|
||||
}
|
||||
.me_col{
|
||||
width: 78px;
|
||||
height: 3px;
|
||||
background: #348CDD;
|
||||
}
|
||||
}
|
||||
.re_box{
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
margin: 0 auto;
|
||||
margin-top:40px;
|
||||
padding-left: 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
.re_box_item{
|
||||
width: 1200px;
|
||||
height: 90px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EEF7FF;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
.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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
|
||||
.lef_box {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
margin-top: 40px;
|
||||
margin-left: 100px;
|
||||
|
||||
.lef_boxitem1 {
|
||||
width: 260px;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, #338CDE 0%, #3D92E0 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.re_title{
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.dian{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #3B90DF;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
justify-content: center;
|
||||
|
||||
// cursor: pointer;
|
||||
.lef_boxitem1_title {
|
||||
width: 88px;
|
||||
// height: 22px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
color: #FFFEFE;
|
||||
}
|
||||
.re_date{
|
||||
|
||||
.lef_boxitem1_shu {
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
background: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.lef_boxitem2 {
|
||||
width: 260px;
|
||||
height: 64px;
|
||||
background: #FFFFFF;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.lef_boxitem2_title {
|
||||
width: 100%;
|
||||
// height: 19px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #368BDB;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rig_box {
|
||||
width: 921px;
|
||||
|
||||
.re_box {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
// padding-left: 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 10px;
|
||||
|
||||
.re_box_item {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EEF7FF;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.shu{
|
||||
background: #EEEEEE;
|
||||
width: 1px;height: 50px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.right_tex{
|
||||
|
||||
.re_title {
|
||||
// width: 640px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
.span1{
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #378EDF;
|
||||
}
|
||||
.span2{
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #378EDF;
|
||||
align-items: center;
|
||||
|
||||
.dian {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #3B90DF;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-image: url('/img/message/listbgxx.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
.re_date{
|
||||
.shu{
|
||||
background: #FFFFFF;
|
||||
|
||||
.re_date {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #368BDB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.shu {
|
||||
background: #EEEEEE;
|
||||
width: 1px;
|
||||
height: 50px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.right_tex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
|
||||
.span1 {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #378EDF;
|
||||
}
|
||||
|
||||
.span2 {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #378EDF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: url('/img/listbg.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
|
||||
.re_date {
|
||||
.shu {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pages_tsw{
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
|
||||
color: #ffffff;
|
||||
background-color: #388FDF;
|
||||
border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
|
||||
color: #388FDF;
|
||||
// border: 1px solid #388FDF;
|
||||
.pages_tsw {
|
||||
padding: 30px 0px 0px 270px;
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
|
||||
color: #ffffff;
|
||||
background-color: #388FDF;
|
||||
border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
|
||||
color: #388FDF;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item--active:hover) {
|
||||
color: #ffffff !important;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item) {
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination-quick-jumper) {
|
||||
&:after {
|
||||
content: '页'
|
||||
}
|
||||
:deep(.n-pagination .n-pagination-item--active:hover) {
|
||||
color: #ffffff !important;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
:deep(.n-pagination .n-pagination-item) {
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
:deep(.n-pagination-quick-jumper){
|
||||
&:after {
|
||||
content: '页'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.top_search {
|
||||
width: 920px;
|
||||
margin-left: 373px;
|
||||
}
|
||||
|
||||
.News_box {
|
||||
width: 1032px;
|
||||
margin-left: 270px;
|
||||
}
|
||||
|
||||
.rig_box {
|
||||
width: 650px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,85 +1,89 @@
|
||||
<template>
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-full" >
|
||||
<!-- 左边导航栏 -->
|
||||
|
||||
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon">
|
||||
<div class="flex top_search ">
|
||||
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
||||
<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>
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-full">
|
||||
<!-- 左边导航栏 -->
|
||||
|
||||
<div class="News_box">
|
||||
<div class="lef_box">
|
||||
<!-- @click="getMesList(null)" 新闻动态总 -->
|
||||
<div class="lef_boxitem1">
|
||||
<div class="lef_boxitem1_shu"></div>
|
||||
<div class="lef_boxitem1_title">新闻动态</div>
|
||||
|
||||
<!-- 右边内容栏 -->
|
||||
<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="['lef_boxitem2',{'active': cateid == item.id }]" v-for="(item, index) in newsListtyp" :key="index" @click="getMesList(item.id,1)">
|
||||
<div class="lef_boxitem2_title">{{ item.name }}</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="rig_box">
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-for="(item,index) in MesList" :key="index" @click="openUrl(item.id)">
|
||||
<div class="re_title">
|
||||
<div class="dian"></div>
|
||||
<span class="one-line-ellipsis" style="width: 720px;">{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="re_date">
|
||||
<div class="shu"></div>
|
||||
<div class="right_tex">
|
||||
<span class="span1">{{ item.release_time_text.slice(8,10)}}</span>
|
||||
<span class="span2">{{ item.release_time_text.slice(0,7)}}</span>
|
||||
|
||||
<div class="News_box">
|
||||
<div class="lef_box">
|
||||
<!-- @click="getMesList(null)" 新闻动态总 -->
|
||||
<div class="lef_boxitem1">
|
||||
<div class="lef_boxitem1_shu"></div>
|
||||
<div class="lef_boxitem1_title">新闻动态</div>
|
||||
</div>
|
||||
<div :class="['lef_boxitem2', { 'active': cateid == item.id }]" v-for="(item, index) in newsListtyp"
|
||||
:key="index" @click="getMesList(item.id, 1)">
|
||||
<div class="lef_boxitem2_title">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rig_box">
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-for="(item, index) in MesList" :key="index"
|
||||
@click="openUrl(item.id)">
|
||||
<div class="re_title">
|
||||
<div class="dian"></div>
|
||||
<span class="one-line-ellipsis">{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="re_date">
|
||||
<div class="shu"></div>
|
||||
<div class="right_tex">
|
||||
<span class="span1">{{ item.release_time_text.slice(8, 10) }}</span>
|
||||
<span class="span2">{{ item.release_time_text.slice(0, 7) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;">
|
||||
<n-pagination v-model:page="page" :page-sizes="[7]" :item-count="total" size="medium"
|
||||
@update:page="getPageList" show-quick-jumper>
|
||||
<template #goto>
|
||||
到第
|
||||
</template>
|
||||
<template #prefix="{ itemCount}">
|
||||
共 {{ itemCount }} 条
|
||||
</template>
|
||||
</n-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;">
|
||||
<n-pagination v-model:page="page" :page-sizes="[7]" :item-count="total" size="medium"
|
||||
@update:page="getPageList" show-quick-jumper>
|
||||
<template #goto>
|
||||
到第
|
||||
</template>
|
||||
<template #prefix="{ itemCount }">
|
||||
共 {{ itemCount }} 条
|
||||
</template>
|
||||
</n-pagination>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 右分享 -->
|
||||
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
|
||||
<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 style="position: absolute;bottom: 30px;right:30px;">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
<!-- 底部鼠标 -->
|
||||
<div class="mouse_img">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {defineEmits} from 'vue'
|
||||
import { defineEmits } from 'vue'
|
||||
import { NPagination } from 'naive-ui'
|
||||
import $api from '@/service/webRequest'
|
||||
import emitter from '@/plugins/emitter'
|
||||
@ -93,14 +97,14 @@ const detailId = ref(null);
|
||||
|
||||
// 信息公开
|
||||
onMounted(() => {
|
||||
getMesList();
|
||||
getNewstypeList();
|
||||
getMesList();
|
||||
getNewstypeList();
|
||||
})
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
|
||||
//跳转详情
|
||||
const openUrl = (id: number) => {
|
||||
window.open(`/info/${id}?type=1`)
|
||||
window.open(`/info/${id}?type=1`)
|
||||
}
|
||||
//跳转详情
|
||||
// const gotoDetail = (id: number) => {
|
||||
@ -113,7 +117,7 @@ const openUrl = (id: number) => {
|
||||
// emitter.emit('detailId', detailId.value);
|
||||
// }
|
||||
//搜索
|
||||
const toSearch =() => {
|
||||
const toSearch = () => {
|
||||
// emit('toSwpe',9);
|
||||
// emitter.emit('inputSea', {
|
||||
// keywords:inputSearch.value,
|
||||
@ -122,26 +126,26 @@ const toSearch =() => {
|
||||
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
|
||||
}
|
||||
const getPageList = async () => {
|
||||
page.value = page.value;
|
||||
getMesList();
|
||||
page.value = page.value;
|
||||
getMesList();
|
||||
}
|
||||
const getMesList = async (id: number,pagecru: number) => {
|
||||
cateid.value = id ? id :cateid.value;
|
||||
const getMesList = async (id: number, pagecru: number) => {
|
||||
cateid.value = id ? id : cateid.value;
|
||||
page.value = pagecru ? pagecru : page.value;
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
{
|
||||
cate_id: cateid.value,
|
||||
limit:7,
|
||||
page:page.value,
|
||||
isnews:1
|
||||
limit: 9,
|
||||
page: page.value,
|
||||
isnews: 1
|
||||
}
|
||||
)
|
||||
total.value = res.data.data.count;
|
||||
MesList.value = res.data.data.list;
|
||||
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;
|
||||
const res = await $api.get('/api/home.news/cate?isnews=1')
|
||||
newsListtyp.value = res.data.data.list;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -151,238 +155,285 @@ const getNewstypeList = async () => {
|
||||
|
||||
/* pc端样式 */
|
||||
|
||||
.rightcon{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/xwdt.png');
|
||||
background-size: 100% 100%;
|
||||
.fiximg{
|
||||
img{
|
||||
margin-bottom: 20px;
|
||||
.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 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
|
||||
.lef_box {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
margin-top: 40px;
|
||||
margin-left: 100px;
|
||||
|
||||
.lef_boxitem1 {
|
||||
width: 260px;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, #338CDE 0%, #3D92E0 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
// cursor: pointer;
|
||||
.lef_boxitem1_title {
|
||||
width: 88px;
|
||||
// height: 22px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
color: #FFFEFE;
|
||||
}
|
||||
|
||||
.lef_boxitem1_shu {
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
background: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.lef_boxitem2 {
|
||||
width: 260px;
|
||||
height: 64px;
|
||||
background: #FFFFFF;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.lef_boxitem2_title {
|
||||
width: 100%;
|
||||
// height: 19px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top_search{
|
||||
margin-top: 50px;
|
||||
height: 70px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.inputform {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
margin-right: 319px;
|
||||
}
|
||||
.contactInput {
|
||||
width: 337px;
|
||||
height: 50px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #DEE4E8;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.contactInput::placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
.rig_box {
|
||||
width: 921px;
|
||||
|
||||
.contactInput:focus {
|
||||
outline: none;
|
||||
}
|
||||
.search_rinput{
|
||||
width: 68px;
|
||||
height: 50px;
|
||||
background: #E6E6E6;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.News_box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
.re_box {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
// padding-left: 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 10px;
|
||||
|
||||
.lef_box{
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
margin-top:40px;
|
||||
margin-left: 100px;
|
||||
.lef_boxitem1{
|
||||
width: 260px;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, #338CDE 0%, #3D92E0 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// cursor: pointer;
|
||||
.lef_boxitem1_title{
|
||||
width: 88px;
|
||||
// height: 22px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
color: #FFFEFE;
|
||||
}
|
||||
.lef_boxitem1_shu{
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
background: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.lef_boxitem2{
|
||||
width: 260px;
|
||||
height: 64px;
|
||||
.re_box_item {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background: #FFFFFF;
|
||||
color: #323232;
|
||||
border: 1px solid #EEF7FF;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top:10px ;
|
||||
cursor: pointer;
|
||||
.lef_boxitem2_title{
|
||||
width: 100%;
|
||||
// height: 19px;
|
||||
|
||||
.re_title {
|
||||
// width: 640px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover{
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
|
||||
}
|
||||
&.active{
|
||||
background: linear-gradient(0deg, rgba(51, 140, 222, 0.12) 0%, rgba(61, 146, 224, 0.12) 100%);
|
||||
color: #3A91DF;
|
||||
}
|
||||
}
|
||||
}
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.rig_box{
|
||||
width: 921px;
|
||||
.re_box{
|
||||
width: 100%;
|
||||
height: 680px;
|
||||
margin: 0 auto;
|
||||
margin-top:40px;
|
||||
// padding-left: 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 10px;
|
||||
.re_box_item{
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EEF7FF;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
.dian {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #3B90DF;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.re_date {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #368BDB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.re_title{
|
||||
// width: 640px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.dian{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #3B90DF;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.shu {
|
||||
background: #EEEEEE;
|
||||
width: 1px;
|
||||
height: 50px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.re_date{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #368BDB;
|
||||
|
||||
.right_tex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.shu{
|
||||
background: #EEEEEE;
|
||||
width: 1px;height: 50px;
|
||||
margin-right: 20px;
|
||||
flex-direction: column;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
|
||||
.span1 {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #378EDF;
|
||||
}
|
||||
.right_tex{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
.span1{
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #378EDF;
|
||||
}
|
||||
.span2{
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #378EDF;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-image: url('/img/message/listbg.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
.re_date{
|
||||
.shu{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.span2 {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #378EDF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pages_tsw{
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
|
||||
color: #ffffff;
|
||||
background-color: #388FDF;
|
||||
border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
|
||||
color: #999999;
|
||||
}
|
||||
&:hover {
|
||||
background-image: url('/img/listbg.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
|
||||
color: #388FDF;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
:deep(.n-pagination .n-pagination-item--active:hover) {
|
||||
color: #ffffff !important;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item) {
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
:deep(.n-pagination-quick-jumper){
|
||||
&:after {
|
||||
content: '页'
|
||||
.re_date {
|
||||
.shu {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.pages_tsw {
|
||||
padding:30px 0px 0px 270px;
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
|
||||
color: #ffffff;
|
||||
background-color: #388FDF;
|
||||
border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
|
||||
color: #388FDF;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item--active:hover) {
|
||||
color: #ffffff !important;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item) {
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination-quick-jumper) {
|
||||
&:after {
|
||||
content: '页'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.top_search {
|
||||
width: 920px;
|
||||
margin-left: 373px;
|
||||
|
||||
}
|
||||
|
||||
.News_box {
|
||||
width: 1032px;
|
||||
margin-left: 270px;
|
||||
}
|
||||
|
||||
.rig_box {
|
||||
width: 650px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,133 +1,213 @@
|
||||
<template>
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-full" >
|
||||
<!-- 左边导航栏 -->
|
||||
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon" id="gohome" @scroll="hmScroll" >
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-full">
|
||||
<!-- 左边导航栏 -->
|
||||
|
||||
<div class="flex top_search ">
|
||||
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
||||
<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="re_top">
|
||||
<div class="re_col"></div>
|
||||
<div class="re_tit">团务百科</div>
|
||||
<div class="re_col"></div>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-for="(item,index) in BksList" :key="index" @click="openUrl(item.id)">
|
||||
<div class="re_title one-line-ellipsis">
|
||||
{{ item.title }}
|
||||
<!-- 右边内容栏 -->
|
||||
<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="re_text three-line-ellipsis">
|
||||
{{ item.subtitle }}
|
||||
</div>
|
||||
<div class="re_date">
|
||||
<div>发布日期：{{item.release_time_text.slice(0,10)}}</div>
|
||||
<div class="re_more">
|
||||
<span>查看更多</span>
|
||||
<img class="re_more_img" src="/img/rightmore.png" alt="" srcset="">
|
||||
<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>
|
||||
<!-- 分页 -->
|
||||
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;margin-bottom: 50px;">
|
||||
<n-pagination v-model:page="page" :page-sizes="[12]" :item-count="total" size="medium"
|
||||
@update:page="getPageList" show-quick-jumper>
|
||||
<template #goto>
|
||||
到第
|
||||
</template>
|
||||
<template #prefix="{ itemCount}">
|
||||
共 {{ itemCount }} 条
|
||||
</template>
|
||||
</n-pagination>
|
||||
</div>
|
||||
<!-- 右分享 -->
|
||||
<!-- <div class="flex flex-col fiximg" style="position: absolute;top: 100px;right:36px;align-items: center;" >
|
||||
<img :src="`/img/qiqiu.png`" alt=""></img>
|
||||
<img class="imgs" :src="`/img/index/douyin.png`" alt="">
|
||||
<img class="imgs" :src="`/img/index/wb.png`" alt="">
|
||||
<img class="imgs" :src="`/img/index/wx.png`" alt="">
|
||||
<img class="imgs" :src="`/img/index/blbl.png`" alt="">
|
||||
|
||||
<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 style="position: absolute;bottom: 30px;right:30px;">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
<!-- 底部鼠标 -->
|
||||
<div class="mouse_img">
|
||||
<img :src="`/img/index/hmouse.png`" alt="">
|
||||
</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 { defineEmits } from 'vue'
|
||||
import emitter from '@/plugins/emitter'
|
||||
const inputSearch = ref('');
|
||||
const BksList = 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 emit = defineEmits(['toSwpe'])
|
||||
// 团务百科
|
||||
const showCode = ref(0);
|
||||
const showCodeDo = (id: number) => {
|
||||
showCode.value = id;
|
||||
}
|
||||
// 信息公开
|
||||
onMounted(() => {
|
||||
getBksList();
|
||||
//getMesList();
|
||||
//getNewstypeList();
|
||||
})
|
||||
const emit = defineEmits(['toSwpe'])
|
||||
|
||||
//跳转详情
|
||||
const openUrl = (id: number) => {
|
||||
window.open(`/info/${id}?type=3`)
|
||||
window.open(`/info/${id}?type=1`)
|
||||
}
|
||||
//跳转详情
|
||||
// const gotoDetail = (id: number) => {
|
||||
// detailId.value = {
|
||||
// id: id,
|
||||
// type: '3'
|
||||
// type: '1'
|
||||
// };
|
||||
// localStorage.setItem('detailId', JSON.stringify(detailId.value));
|
||||
// emit('toSwpe',6)
|
||||
// emitter.emit('detailId', detailId.value);
|
||||
// }
|
||||
const toSearch =() => {
|
||||
//搜索
|
||||
const toSearch = () => {
|
||||
// emit('toSwpe',9);
|
||||
// emitter.emit('inputSea', {
|
||||
// keywords:inputSearch.value,
|
||||
// type: 3,
|
||||
// type: 1,
|
||||
// });
|
||||
window.open(`/search_info?type=3&keywords=${inputSearch.value}`)
|
||||
window.open(`/search_info?type=1&keywords=${inputSearch.value}`)
|
||||
}
|
||||
const getPageList = async () => {
|
||||
page.value = page.value;
|
||||
getBksList();
|
||||
page.value = page.value;
|
||||
getMesList();
|
||||
}
|
||||
const getBksList = async () => {
|
||||
const res = await $api.post('/api/home.encyclopedia/index',
|
||||
{
|
||||
limit:12,
|
||||
page:page.value
|
||||
}
|
||||
)
|
||||
total.value = res.data.data.count;
|
||||
BksList.value = res.data.data.list;
|
||||
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 hmScroll = () => {
|
||||
let home = document.getElementById('gohome');
|
||||
if (home.scrollTop == 0) {
|
||||
setTimeout(function() {
|
||||
emit('toSwpe',4);
|
||||
}, 500);
|
||||
}
|
||||
const getNewstypeList = async () => {
|
||||
const res = await $api.get('/api/home.news/cate?isnews=1')
|
||||
newsListtyp.value = res.data.data.list;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -137,173 +217,192 @@ const hmScroll = () => {
|
||||
|
||||
/* pc端样式 */
|
||||
|
||||
.rightcon{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/twbk.png');
|
||||
background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
.fiximg{
|
||||
.imgs{
|
||||
width: 63px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
align-items: center;
|
||||
}
|
||||
.inputform {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
margin-right: 319px;
|
||||
}
|
||||
.contactInput {
|
||||
width: 337px;
|
||||
height: 50px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #DEE4E8;
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
.dian {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #3B90DF;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.contactInput::placeholder {
|
||||
color: #999999;
|
||||
// &: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;
|
||||
|
||||
}
|
||||
|
||||
.contactInput:focus {
|
||||
outline: none;
|
||||
.News_box {
|
||||
width: 1032px;
|
||||
margin-left: 270px;
|
||||
}
|
||||
.search_rinput{
|
||||
width: 68px;
|
||||
height: 50px;
|
||||
background: #E6E6E6;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.re_top{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
.re_tit{
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
color: #4E3C3C;
|
||||
margin: 0 30px;
|
||||
}
|
||||
.re_col{
|
||||
width: 78px;
|
||||
height: 3px;
|
||||
background: #348CDD;
|
||||
}
|
||||
}
|
||||
.re_box{
|
||||
width: 1280px;
|
||||
// height: 600px;
|
||||
margin: 0 auto;
|
||||
margin-top:40px;
|
||||
padding-left: 80px;
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
justify-content: flex-start; /* 项目左对齐 */
|
||||
// align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
gap: 20px;
|
||||
.re_box_item{
|
||||
width: 32%;
|
||||
// height: 190px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EEF7FF;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
.re_title{
|
||||
// width: 100%;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
|
||||
}
|
||||
.re_text{
|
||||
height: 62px;
|
||||
margin-top: 15px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
.re_date{
|
||||
margin-top: 15px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #368BDB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.re_more{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.re_more_img{
|
||||
padding-left: 10px;
|
||||
// width: 7px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
.pages_tsw{
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
|
||||
color: #ffffff;
|
||||
background-color: #388FDF;
|
||||
border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
|
||||
color: #388FDF;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
:deep(.n-pagination .n-pagination-item--active:hover) {
|
||||
color: #ffffff !important;
|
||||
// border: 1px solid #388FDF;
|
||||
}
|
||||
|
||||
:deep(.n-pagination .n-pagination-item) {
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
:deep(.n-pagination-quick-jumper){
|
||||
&:after {
|
||||
content: '页'
|
||||
}
|
||||
}
|
||||
.rig_box {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.rm-span {
|
||||
width: 450px;
|
||||
}
|
||||
.gw-span{
|
||||
width:280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,13 +36,14 @@
|
||||
</swiper-slide>
|
||||
|
||||
<!-- 服务青年 -->
|
||||
<swiper-slide>
|
||||
<AppMessage @toSwpe="toswiper"></AppMessage>
|
||||
</swiper-slide>
|
||||
<!-- 团务百科 -->
|
||||
<swiper-slide>
|
||||
<AppRegiment @toSwpe="toswiper"></AppRegiment>
|
||||
</swiper-slide>
|
||||
|
||||
<!--信息公开-->
|
||||
<swiper-slide>
|
||||
<AppMessage @toSwpe="toswiper"></AppMessage>
|
||||
</swiper-slide>
|
||||
<!-- 新闻动态详情 -->
|
||||
<!-- <swiper-slide :show="isNews" id="newsid">
|
||||
<AppNewsdel ></AppNewsdel>
|
||||
@ -71,7 +72,7 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 右分享 -->
|
||||
<div v-if="swiper_exp > 0" ref="targetElement" class="flex flex-col fiximg" :style="{ right: rightValue }">
|
||||
<div v-if="swiper_exp > 0" ref="targetElement" class="flex flex-col fiximg">
|
||||
<!-- <img src="/img/qiqiu.png" class="qqt" @click="updateRight" alt=""></img> -->
|
||||
<div style="position: absolute;top: 200px;">
|
||||
<div class="divcode">
|
||||
@ -137,7 +138,7 @@ const { locale } = useI18n();
|
||||
const openUrl = () => {
|
||||
window.open(`/messageBoard/`)
|
||||
}
|
||||
const rightValue = ref('34px');
|
||||
const rightValue = ref('100px');
|
||||
const updateRight = () => {
|
||||
if (rightValue.value == '34px') {
|
||||
rightValue.value = '-94px';
|
||||
@ -157,18 +158,20 @@ const onSwiperNews = (swiper: any) => {
|
||||
// isMeassage.value = false;
|
||||
// console.log(newsSwiper);
|
||||
swiper_exp.value = swiper.realIndex;
|
||||
if (swiper.realIndex == 1 || swiper.realIndex == 5) {
|
||||
newsSwiper.mousewheel.disable();
|
||||
newsSwiper.allowTouchMove = true;// 开启拖动
|
||||
}
|
||||
newsSwiper.mousewheel.disable();
|
||||
newsSwiper.allowTouchMove = true;// 开启拖动
|
||||
// if (swiper.realIndex == 1 || swiper.realIndex == 5 || swiper.realIndex == 2 || swiper.realIndex == 3 || swiper.realIndex == 4 || swiper.realIndex == 6) {
|
||||
// newsSwiper.mousewheel.disable();
|
||||
// newsSwiper.allowTouchMove = true;// 开启拖动
|
||||
// }
|
||||
// else if (swiper.realIndex == 6 || swiper.realIndex == 9 || swiper.realIndex == 7 || swiper.realIndex == 8) {
|
||||
// newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
|
||||
// newsSwiper.allowTouchMove= false;//关闭拖动
|
||||
// }
|
||||
else {
|
||||
newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
|
||||
newsSwiper.allowTouchMove = true;// 开启拖动
|
||||
}
|
||||
// else {
|
||||
// newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
|
||||
// newsSwiper.allowTouchMove = true;// 开启拖动
|
||||
// }
|
||||
})
|
||||
}
|
||||
// let isMeassage = ref(false);
|
||||
@ -181,7 +184,20 @@ const toswiper = (index: number) => {
|
||||
// if (index == 7) isAbout.value = true;
|
||||
// if (index == 8) isMeassage.value = true;
|
||||
// if (index == 9) isSearch.value = true;
|
||||
newsSwiper.slideTo(index, 1000, true)
|
||||
//如果是跨了一页就为0 否则为1000
|
||||
if (index > newsSwiper.realIndex) {
|
||||
if (newsSwiper.realIndex + 1 != index) {
|
||||
newsSwiper.slideTo(index, 0, true)
|
||||
} else {
|
||||
newsSwiper.slideTo(index, 1000, true)
|
||||
}
|
||||
} else {
|
||||
if (newsSwiper.realIndex - 1 != index) {
|
||||
newsSwiper.slideTo(index, 0, true)
|
||||
} else {
|
||||
newsSwiper.slideTo(index, 1000, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
const swiper_exp = ref(0);
|
||||
|
||||
@ -190,6 +206,7 @@ const swiperOptionsNews = {
|
||||
delay: 11000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
noSwipingSelector: '.no-wrap', // 指定不接管该区域的滑动事件
|
||||
// autoHeight : true,
|
||||
direction: 'horizontal',
|
||||
mousewheel: {
|
||||
@ -508,13 +525,14 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.fiximg {
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
transition: right 0.5s ease-in-out;
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
align-items: center;
|
||||
z-index: 111;
|
||||
right: 100px;
|
||||
|
||||
.qqt {
|
||||
cursor: pointer;
|
||||
@ -554,4 +572,10 @@ onMounted(() => {
|
||||
.isOldfont * {
|
||||
font-size: 28px !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.fiximg {
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,66 +2,83 @@
|
||||
<!-- PC端布局 -->
|
||||
<div class="flex justify-between w-full h-auto">
|
||||
<!-- 左边导航栏 -->
|
||||
<AppHeader></AppHeader>
|
||||
<AppHeader></AppHeader>
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon" @scroll="hmScroll" id="tjright">
|
||||
<div class="flex top_search">
|
||||
<div style="width: 572px; height: 69px; margin-left: 415px">
|
||||
<div style="width: 350px;">
|
||||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
|
||||
</div>
|
||||
<!-- <div class="inputform">
|
||||
<div class="inputform">
|
||||
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
|
||||
placeholder="请输入搜索关键字" />
|
||||
<div class="search_rinput">
|
||||
<img src="/img/index/hmsearch.png" alt="" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="top_bar">
|
||||
<div style="background: #ffffff;width: 100%;display: flex;align-items: center;padding: 18px;">
|
||||
<div>
|
||||
<img :src="`/img/key.png`" style="width: 22px;height: 22px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #323232;margin-left: 10px;">当前位置：首页 > 团务百科 > <span
|
||||
style="color: #3B90DF;">文章详情</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="News_box h-auto">
|
||||
|
||||
<div class="lef_box">
|
||||
|
||||
<div class="re_box">
|
||||
<div class="re_box_item" v-if="Newsdetail != null && Newsdetail.type == 1">
|
||||
<div class='re_mian' v-if="Newsdetail.cate != null">{{ title_left + ' > ' + Newsdetail.cate.name+' > ' + '正文内容'}} </div>
|
||||
<div class='re_mian' v-if="Newsdetail.cate != null">{{ title_left + ' > ' +
|
||||
Newsdetail.cate.name + ' > ' + '正文内容' }} </div>
|
||||
<div class="re_title">{{ Newsdetail.title }}</div>
|
||||
<div class='flex justify-between re_rouse'>
|
||||
<span>{{Newsdetail.release_time_text}}</span>
|
||||
<span v-if="Newsdetail.source != '' && Newsdetail.source != null" >来源：{{ Newsdetail.source }}</span>
|
||||
<span>{{ Newsdetail.release_time_text }}</span>
|
||||
<span v-if="Newsdetail.source != '' && Newsdetail.source != null">来源：{{
|
||||
Newsdetail.source }}</span>
|
||||
</div>
|
||||
<div class="re_slice"></div>
|
||||
<div class="re_file" v-if="Newsdetail.file != '' && Newsdetail.file != null">
|
||||
<div class="re_file" v-if="Newsdetail.file != '' && Newsdetail.file != null">
|
||||
附件：
|
||||
<a :href="Newsdetail.file" target="_blank" rel="noopener noreferrer" style="color: #0066cc;">
|
||||
<a :href="Newsdetail.file" target="_blank" rel="noopener noreferrer"
|
||||
style="color: #0066cc;">
|
||||
{{ Newsdetail.attachment.filename }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="re_content" v-html="Newsdetail.content"></div>
|
||||
<div class="re_content" v-html="Newsdetail.content"></div>
|
||||
</div>
|
||||
|
||||
<div class="re_box_item" v-if="Newsdetail != null && Newsdetail.type == 2">
|
||||
<div class="re_title" style="margin-top: 0;font-size: 20px;font-weight: 600;">{{ Newsdetail.title }}</div>
|
||||
<div class="re_title" style="margin-top: 0;font-size: 20px;font-weight: 600;">{{
|
||||
Newsdetail.title }}</div>
|
||||
<div class='flex justify-between re_rouse' style="margin-bottom: 20px;">
|
||||
<span>{{Newsdetail.release_time_text}}</span>
|
||||
<span v-if="Newsdetail.source != '' && Newsdetail.source != null">来源：{{ Newsdetail.source }}</span>
|
||||
<span>{{ Newsdetail.release_time_text }}</span>
|
||||
<span v-if="Newsdetail.source != '' && Newsdetail.source != null">来源：{{
|
||||
Newsdetail.source }}</span>
|
||||
</div>
|
||||
<embed type="application/pdf" :src="Newsdetail.file" width="100%" height="580px" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rig_box" :class="{'topding': topding}">
|
||||
|
||||
<n-tabs :bar-width="0" type="line"
|
||||
class="custom-tabs" pane-style="background-color: #ffffff;">
|
||||
|
||||
<div class="rig_box">
|
||||
|
||||
<n-tabs :bar-width="0" type="line" class="custom-tabs" pane-style="background-color: #ffffff;">
|
||||
<n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;">
|
||||
<div class="flex flex-row" v-for="item,index in remList" :key="index" style="padding-bottom:30px;cursor: pointer;" @click="gotodetail({id:item.id,type:'1'})">
|
||||
<div class="flex flex-row" v-for="item, index in remList" :key="index"
|
||||
style="padding-bottom:30px;cursor: pointer;"
|
||||
@click="gotodetail({ id: item.id, type: '1' })">
|
||||
<div class="number_t" v-if="index == 0 || index == 1 || index == 2">
|
||||
{{index+1 > 10 ? index + 1 : '0'+(index+1) }}
|
||||
{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}
|
||||
</div>
|
||||
<div class="number_t1" v-else>
|
||||
<span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
|
||||
<span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
|
||||
<span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 :
|
||||
'0' + (index + 1) }}</span>
|
||||
<span v-else>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span>
|
||||
</div>
|
||||
<div class="content_t2">
|
||||
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
|
||||
@ -76,13 +93,16 @@
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="jay chou" tab="精选文章" style="padding: 30px;">
|
||||
<div class="flex flex-row" v-for="item,index in jinxList" :key="index" style="padding-bottom:30px; cursor: pointer;" @click="gotodetail({id:item.id,type:'1'})">
|
||||
<div class="flex flex-row" v-for="item, index in jinxList" :key="index"
|
||||
style="padding-bottom:30px; cursor: pointer;"
|
||||
@click="gotodetail({ id: item.id, type: '1' })">
|
||||
<div class="number_t" v-if="index == 0 || index == 1 || index == 2">
|
||||
{{index+1 > 10 ? index + 1 : '0'+(index+1) }}
|
||||
{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}
|
||||
</div>
|
||||
<div class="number_t1" v-else>
|
||||
<span v-if="index+1 == 6" style="color: #D70E08;">{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
|
||||
<span v-else>{{index+1 > 10 ? index + 1 : '0'+(index+1) }}</span>
|
||||
<span v-if="index + 1 == 6" style="color: #D70E08;">{{ index + 1 > 10 ? index + 1 :
|
||||
'0' + (index + 1) }}</span>
|
||||
<span v-else>{{ index + 1 > 10 ? index + 1 : '0' + (index + 1) }}</span>
|
||||
</div>
|
||||
<div class="content_t2">
|
||||
<p class="p1 one-line-ellipsis">{{ item.title }}</p>
|
||||
@ -97,10 +117,10 @@
|
||||
</div>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppFooter></AppFooter>
|
||||
<!-- 右分享 -->
|
||||
<!-- <div style="position: absolute;top: 300px;right:36px;" class="flex flex-col fiximg">
|
||||
<img :src="`/img/index/douyin.png`" alt="">
|
||||
@ -117,11 +137,11 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NTabs,NTabPane } from 'naive-ui'
|
||||
import { NTabs, NTabPane } from 'naive-ui'
|
||||
import $api from '@/service/webRequest'
|
||||
// import emitter from '@/plugins/emitter'
|
||||
const route = useRoute()
|
||||
// const inputSearch = ref('')
|
||||
const inputSearch = ref('')
|
||||
const page = ref(1);
|
||||
const jinxList = ref([]);
|
||||
const remList = ref([]);
|
||||
@ -139,25 +159,25 @@ const types = ref(route.query.type)
|
||||
|
||||
//精选
|
||||
const getjinxList = async () => {
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
{
|
||||
limit:6,
|
||||
page:page.value,
|
||||
fine:1
|
||||
limit: 6,
|
||||
page: page.value,
|
||||
fine: 1
|
||||
}
|
||||
)
|
||||
jinxList.value = res.data.data.list;
|
||||
jinxList.value = res.data.data.list;
|
||||
}
|
||||
//热门
|
||||
const getremList = async () => {
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
const res = await $api.post('/api/home.news/index',
|
||||
{
|
||||
limit:6,
|
||||
page:page.value,
|
||||
hot:1
|
||||
limit: 6,
|
||||
page: page.value,
|
||||
hot: 1
|
||||
}
|
||||
)
|
||||
remList.value = res.data.data.list;
|
||||
remList.value = res.data.data.list;
|
||||
|
||||
}
|
||||
// 新闻/百科/信息公开 详情
|
||||
@ -167,57 +187,57 @@ const getNewsdetail = async () => {
|
||||
title_left.value = '新闻动态';
|
||||
const res = await $api.post('/api/home.news/detail',
|
||||
{
|
||||
id:ids.value
|
||||
id: ids.value
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res.data.data;
|
||||
}else if(types.value == 2){
|
||||
} else if (types.value == 2) {
|
||||
title_left.value = '信息公开';
|
||||
//信息公开文章详情
|
||||
const res1 = await $api.post('/api/home.information/detail',
|
||||
{
|
||||
id:ids.value
|
||||
id: ids.value
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res1.data.data;
|
||||
}else{
|
||||
} else {
|
||||
title_left.value = '团务百科';
|
||||
// 团务百科文章详情
|
||||
const res2 = await $api.post('/api/home.encyclopedia/detail',
|
||||
{
|
||||
id:ids.value
|
||||
id: ids.value
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res2.data.data;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
//推荐列表跳转
|
||||
const gotodetail = async (data) => {
|
||||
// 新闻详情
|
||||
const gotodetail = async (data) => {
|
||||
// 新闻详情
|
||||
if (data.type == 1) {
|
||||
title_left.value = '新闻动态';
|
||||
const res = await $api.post('/api/home.news/detail',
|
||||
{
|
||||
id:data.id
|
||||
id: data.id
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res.data.data;
|
||||
}else if(data.type == 2){
|
||||
} else if (data.type == 2) {
|
||||
title_left.value = '信息公开';
|
||||
//信息公开文章详情
|
||||
const res1 = await $api.post('/api/home.information/detail',
|
||||
{
|
||||
id:data.id
|
||||
id: data.id
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res1.data.data;
|
||||
}else{
|
||||
} else {
|
||||
title_left.value = '团务百科';
|
||||
// 团务百科文章详情
|
||||
const res2 = await $api.post('/api/home.encyclopedia/detail',
|
||||
{
|
||||
id:data.id
|
||||
id: data.id
|
||||
}
|
||||
)
|
||||
Newsdetail.value = res2.data.data;
|
||||
@ -225,18 +245,18 @@ const gotodetail = async (data) => {
|
||||
}
|
||||
const hmScroll = () => {
|
||||
let tjright = document.getElementById('tjright');
|
||||
if(tjright.scrollTop>159){
|
||||
if (tjright.scrollTop > 159) {
|
||||
topding.value = true;
|
||||
}else{
|
||||
} else {
|
||||
topding.value = false;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
//加载中
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
getjinxList();
|
||||
getremList();
|
||||
getNewsdetail();
|
||||
getNewsdetail();
|
||||
window.addEventListener('scroll', hmScroll);
|
||||
})
|
||||
</script>
|
||||
@ -247,12 +267,12 @@ onMounted(() => {
|
||||
/* pc端样式 */
|
||||
|
||||
.rightcon {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/newsxq.png');
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/img/index/rightcons.png');
|
||||
background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top_search {
|
||||
@ -260,12 +280,13 @@ onMounted(() => {
|
||||
height: 70px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 415px;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.inputform {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
margin-right: 319px;
|
||||
}
|
||||
|
||||
.contactInput {
|
||||
@ -288,7 +309,7 @@ onMounted(() => {
|
||||
.search_rinput {
|
||||
width: 68px;
|
||||
height: 50px;
|
||||
background: #e6e6e6;
|
||||
background: #338CDE;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -306,11 +327,12 @@ onMounted(() => {
|
||||
|
||||
.lef_box {
|
||||
width: 835px;
|
||||
|
||||
.re_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 40px;
|
||||
margin-top: 20px;
|
||||
padding-left: 100px;
|
||||
|
||||
.re_box_item {
|
||||
@ -328,10 +350,12 @@ onMounted(() => {
|
||||
border-bottom: 1px dashed #bbbbbb;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.re_file{
|
||||
|
||||
.re_file {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.re_mian {
|
||||
// width: 248px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
@ -339,7 +363,8 @@ onMounted(() => {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
.re_rouse{
|
||||
|
||||
.re_rouse {
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@ -347,6 +372,7 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.re_title {
|
||||
width: 100%;
|
||||
font-family: Microsoft YaHei UI;
|
||||
@ -366,7 +392,7 @@ onMounted(() => {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -374,86 +400,96 @@ onMounted(() => {
|
||||
.rig_box {
|
||||
width: 430px;
|
||||
height: 100%;
|
||||
margin-top: 40px;
|
||||
margin-top: 20px;
|
||||
margin-left: 35px;
|
||||
.custom-tabs {
|
||||
.number_t{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
// background: #FFA234;
|
||||
background: #E40106;
|
||||
border-radius: 17px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.number_t1{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.content_t2{
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
width: 80%;
|
||||
.p1{
|
||||
margin-top: 7px;
|
||||
font-size: 18px;
|
||||
color: #393939;
|
||||
}
|
||||
.p2{
|
||||
margin-top: 15px;
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-tabs .n-tabs-tab-wrapper){
|
||||
.custom-tabs {
|
||||
.number_t {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
// background: #FFA234;
|
||||
background: #E40106;
|
||||
border-radius: 17px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.number_t1 {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 17px;
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #323232;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.content_t2 {
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
width: 80%;
|
||||
|
||||
.p1 {
|
||||
margin-top: 7px;
|
||||
font-size: 18px;
|
||||
color: #393939;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
margin-top: 15px;
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-tabs .n-tabs-tab-wrapper) {
|
||||
width: 215px;
|
||||
height: 72px;
|
||||
background: #ffffff;
|
||||
|
||||
|
||||
font-size: 18px;
|
||||
justify-content: center;
|
||||
}
|
||||
:deep(.n-tabs .n-tabs-tab .n-tabs-tab__label){
|
||||
|
||||
:deep(.n-tabs .n-tabs-tab .n-tabs-tab__label) {
|
||||
font-family: Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
}
|
||||
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab:hover, .n-tabs.n-tabs--bar-type .n-tabs-tab:hover){
|
||||
|
||||
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab:hover, .n-tabs.n-tabs--bar-type .n-tabs-tab:hover) {
|
||||
color: #348CDE;
|
||||
}
|
||||
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active){
|
||||
|
||||
:deep(.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active, .n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active) {
|
||||
color: #348CDE;
|
||||
background: #F1F8FF;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-top:solid 2px #378FDF;
|
||||
border-top: solid 2px #378FDF;
|
||||
}
|
||||
:deep(.n-tabs .n-tabs-tab-pad){
|
||||
|
||||
:deep(.n-tabs .n-tabs-tab-pad) {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
.topding{
|
||||
|
||||
.topding {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
@ -461,4 +497,34 @@ onMounted(() => {
|
||||
width: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
.top_bar {
|
||||
margin: 0px auto;
|
||||
width: 1300px;
|
||||
padding-left: 100px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.top_search {
|
||||
width: 920px;
|
||||
margin-left: 373px;
|
||||
|
||||
}
|
||||
|
||||
.News_box {
|
||||
width: 1032px;
|
||||
margin-left: 270px;
|
||||
}
|
||||
|
||||
.rig_box {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.top_bar {
|
||||
margin: 0px;
|
||||
width: 1032px;
|
||||
margin-left: 270px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,16 +6,16 @@
|
||||
<!-- 右边内容栏 -->
|
||||
<div class="rightcon" @scroll="hmScroll" id="tjright">
|
||||
<div class="flex top_search">
|
||||
<div style="width: 572px; height: 69px; margin-left: 415px">
|
||||
<div style="width: 350px;">
|
||||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%; height: 100%; object-fit: cover" />
|
||||
</div>
|
||||
<!-- <div class="inputform">
|
||||
<div class="inputform">
|
||||
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]" type="text"
|
||||
placeholder="请输入搜索关键字" />
|
||||
<div class="search_rinput">
|
||||
<img src="/img/index/hmsearch.png" alt="" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="News_box h-auto">
|
||||
@ -35,8 +35,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rig_box" :class="{'topding': topding}">
|
||||
|
||||
<div class="rig_box" >
|
||||
<n-tabs :bar-width="0" type="line"
|
||||
class="custom-tabs" pane-style="background-color: #ffffff;">
|
||||
<n-tab-pane name="oasis" tab="热门推荐" style="padding: 30px;">
|
||||
@ -230,7 +229,7 @@ onMounted(() => {
|
||||
.rightcon {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-image: url('/img/xwdt.png');
|
||||
background-image: url('/img/index/rightcons.png');
|
||||
background-size: 100% 100%;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
@ -241,12 +240,13 @@ onMounted(() => {
|
||||
height: 70px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 415px;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.inputform {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
margin-right: 319px;
|
||||
}
|
||||
|
||||
.contactInput {
|
||||
@ -269,7 +269,7 @@ onMounted(() => {
|
||||
.search_rinput {
|
||||
width: 68px;
|
||||
height: 50px;
|
||||
background: #e6e6e6;
|
||||
background: #338CDE;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -448,4 +448,18 @@ onMounted(() => {
|
||||
width: 430px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1440px) {
|
||||
.top_search {
|
||||
width: 920px;
|
||||
margin-left: 373px;
|
||||
|
||||
}
|
||||
.News_box{
|
||||
width: 1032px;
|
||||
margin-left: 270px;
|
||||
}
|
||||
.rig_box{
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
BIN
public/img/d.png
Normal file
BIN
public/img/d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB |
BIN
public/img/f1.png
Normal file
BIN
public/img/f1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/img/f2.png
Normal file
BIN
public/img/f2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
public/img/fuwu.png
Normal file
BIN
public/img/fuwu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 579 KiB After Width: | Height: | Size: 579 KiB |
BIN
public/img/home/2.png
Normal file
BIN
public/img/home/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
BIN
public/img/home/3.png
Normal file
BIN
public/img/home/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
BIN
public/img/home/4.png
Normal file
BIN
public/img/home/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
BIN
public/img/home/5.png
Normal file
BIN
public/img/home/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
BIN
public/img/home/6.png
Normal file
BIN
public/img/home/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 477 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
BIN
public/img/key.png
Normal file
BIN
public/img/key.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
BIN
public/img/luoyang.png
Normal file
BIN
public/img/luoyang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
public/img/ly_listbg.png
Normal file
BIN
public/img/ly_listbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
BIN
public/img/tuan.png
Normal file
BIN
public/img/tuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Loading…
x
Reference in New Issue
Block a user