Skip to content

E
emergency-project
Commit 59814493 by 吴春元
Options

feat: 更新媒体账号展示和布局样式优化 

refactor(views): 重构首页和辟谣页面组件结构
style(components): 调整新闻列表和卡片样式
fix(layout): 修正导航栏和搜索框布局问题
parent 74fb72b7
Showing with 52 additions and 91 deletions
src/layout/py.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div class="mx-auto"> <div class="mx-auto">
<header class="hero-bg text-white"> <header class="hero-bg text-white">
<div class="container mx-auto px-8 py-8"> <div class="container mx-auto px-[70px] py-8">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<h1 class="text-title font-bold cursor-pointer text-[49px]" @click="goToHome()"> <h1 class="text-title font-bold cursor-pointer text-[49px]" @click="goToHome()">
...@@ -23,14 +23,14 @@ ...@@ -23,14 +23,14 @@
</p> </p>
</div> </div>
<nav class="bg-white/10 backdrop-blur-sm"> <nav class="bg-white/10 backdrop-blur-sm">
<div class="container mx-auto px-8"> <div class="container mx-auto px-[70px]">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div v-for="(item, index) in navItems" :key="index" <div v-for="(item, index) in navItems" :key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl" class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 shadow-lg hover:shadow-xl"
:class="{ 'bg-white/10': activeIndex === index }" @click="navigateTo(index, item)"> :class="{ 'bg-white/10': activeIndex === index }" @click="navigateTo(index, item)">
<span class="text-white text-[16px] font-bold">{{ item.categoryTitle }}</span> <span class="text-white text-[16px] font-bold">{{ item.categoryTitle }}</span>
</div> </div>
<div class="flex relative w-[240px] mr-[50px]"> <div class="flex relative w-[240px] mr-[0px]">
<el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索辟谣、权威、法律、专家..." :prefix-icon="Search" <el-input v-model="searchQuery" class="!rounded-full" placeholder="搜索辟谣、权威、法律、专家..." :prefix-icon="Search"
@keyup.enter="handleSearch"> @keyup.enter="handleSearch">
<template #append> <template #append>
...@@ -199,7 +199,7 @@ function navigateTo(index: number, item: NavItem) { ...@@ -199,7 +199,7 @@ function navigateTo(index: number, item: NavItem) {
<style scoped> <style scoped>
.hero-bg { .hero-bg {
/* background: linear-gradient(135deg, #001f3f, #0047ab); */ /* background: linear-gradient(135deg, #001f3f, #0047ab); */
background: url("@/assets/imgs/py-hearder-bg.png"); background: url("@/assets/imgs/py-hearder-bg.png") center center / cover no-repeat;
} }
:deep(.el-card) { :deep(.el-card) {
......
src/views/home/home/HomeView.vue
...@@ -32,13 +32,13 @@ ...@@ -32,13 +32,13 @@
</el-icon> --> </el-icon> -->
<span v-if="index == 0" class="text-4xl font-semibold px-6">{{ <span v-if="index == 0" class="text-4xl font-semibold px-6">{{
entry.title entry.title
}}</span> }}</span>
<span v-else-if="index == 1" class="text-4xl font-semibold text-center px-6">{{ <span v-else-if="index == 1" class="text-4xl font-semibold text-center px-6">{{
entry.title entry.title
}}</span> }}</span>
<span v-else-if="index == 2" class="text-4xl font-semibold text-center px-6">{{ <span v-else-if="index == 2" class="text-4xl font-semibold text-center px-6">{{
entry.title entry.title
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -219,11 +219,11 @@ ...@@ -219,11 +219,11 @@
<div class="space-y-4"> <div class="space-y-4">
<div v-for="(item, index) in rumourNews" :key="index" <div v-for="(item, index) in rumourNews" :key="index"
class="flex items-start space-x-3 pb-4 border-b last:border-b-0" @click="goToDetail(item)"> class="flex items-start space-x-3 pb-4 border-b last:border-b-0" @click="goToDetail(item)">
<div v-if="item.images != null" class="flex-shrink-0 w-24 h-16"> <div v-if="item.images" class="flex-shrink-0 w-[150px] h-[90px]">
<img :src="item.images" class="w-full h-full object-cover rounded" /> <img :src="item.images" class="w-full h-full object-cover rounded" />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2 relative">
<el-tag size="small" type="danger" class="!rounded-full">辟谣</el-tag> <el-tag size="small" type="danger" class="!rounded-full">辟谣</el-tag>
<el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle" <el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
placement="top-start"> placement="top-start">
...@@ -231,12 +231,22 @@ ...@@ -231,12 +231,22 @@
{{ item.contentTitle }} {{ item.contentTitle }}
</h3> </h3>
</el-tooltip> </el-tooltip>
<div class="absolute right-10 top-0">
<!-- transform旋转45度 -->
<img :src="yyIcon" class="w-[85px] h-[85px] object-contain transform rotate-[-20deg]" alt="谣言标识" />
</div>
</div> </div>
<p class="mt-1 text-sm text-gray-500 line-clamp-2"> <p class="mt-1 text-sm text-gray-500 line-clamp-2">
{{ item.contentDescription }} {{ item.contentDescription }}
</p> </p>
<div class="mt-1 flex items-center space-x-4"> <div class="mt-1 flex items-center space-x-4">
<span class="text-[12px] text-[#2f7ef6] flex items-center">
<el-icon class="mr-1">
<View />
</el-icon>
线索来源：{{ item.contentSource }}
</span>
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"> <el-icon class="mr-1">
<Clock /> <Clock />
...@@ -262,7 +272,7 @@ ...@@ -262,7 +272,7 @@
<div class="bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)]"> <div class="bg-white rounded-lg p-6 shadow-[0_0_10px_rgba(5,157,254,0.32)]">
<!-- <h2 class="text-xl font-bold mb-4" style="color: #2f7ef6">友情链接</h2> --> <!-- <h2 class="text-xl font-bold mb-4" style="color: #2f7ef6">友情链接</h2> -->
<div class="relative mb-4"> <div class="relative mb-4">
<div class="title report-orgs"><span>友情链接</span></div> <div class="title report-orgs"><span class="text-xl font-bold">友情链接</span></div>
<!-- <h2 class="text-xl font-bold" style="color: #2f7ef6">友情链接</h2> --> <!-- <h2 class="text-xl font-bold" style="color: #2f7ef6">友情链接</h2> -->
<!-- <div class="w-[50px] h-[3px] bg-blue-500 rounded-full mt-1"></div> --> <!-- <div class="w-[50px] h-[3px] bg-blue-500 rounded-full mt-1"></div> -->
</div> </div>
...@@ -305,6 +315,7 @@ import "swiper/css/navigation"; ...@@ -305,6 +315,7 @@ import "swiper/css/navigation";
import { getLink } from "@/api/home/home"; import { getLink } from "@/api/home/home";
// @ts-ignore // @ts-ignore
import { getNewsList } from "@/api/home/news/list"; import { getNewsList } from "@/api/home/news/list";
import yyIcon from "@/assets/imgs/yy-icon.png";
// @ts-ignore // @ts-ignore
import { import {
...@@ -333,6 +344,7 @@ interface NewsItem { ...@@ -333,6 +344,7 @@ interface NewsItem {
contentImg?: string; contentImg?: string;
contentOutLink?: string; contentOutLink?: string;
images?: string; images?: string;
} }
interface LinkItem { interface LinkItem {
......
src/views/py/home/PyHome.vue
...@@ -3,12 +3,9 @@ ...@@ -3,12 +3,9 @@
<div class="mx-auto bg-gray-200"> <div class="mx-auto bg-gray-200">
<main class="container mx-auto px-5 py-5 w-[1440px]"> <main class="container mx-auto px-5 py-5 w-[1440px]">
<div class="rounded-lg p-0 mx-auto mb-5 w-full"> <div class="rounded-lg p-0 mx-auto mb-5 w-full">
<h2 class="text-2xl font-bold mb-4 text-black line-clamp-1"> <!-- <p class="text-gray-600 mb-4 line-clamp-1">
{{ title }}
</h2>
<p class="text-gray-600 mb-4 line-clamp-1">
{{ description }} {{ description }}
</p> </p> -->
<div class="flex gap-5 mb-5"> <div class="flex gap-5 mb-5">
<div class="relative w-2/3 h-[510px] rounded-lg overflow-hidden"> <div class="relative w-2/3 h-[510px] rounded-lg overflow-hidden">
<swiper :modules="swiperModules" :pagination="{ clickable: true }" :navigation="true" <swiper :modules="swiperModules" :pagination="{ clickable: true }" :navigation="true"
...@@ -17,6 +14,10 @@ ...@@ -17,6 +14,10 @@
<swiper-slide v-for="(slide, index) in list3" :key="index"> <swiper-slide v-for="(slide, index) in list3" :key="index">
<el-image :src="slide.images" fit="cover" class="w-full h-full object-cover" <el-image :src="slide.images" fit="cover" class="w-full h-full object-cover"
@click="getToDetail(slide)" /> @click="getToDetail(slide)" />
<h2
class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3 text-white text-xl font-bold">
{{ slide.contentTitle }}
</h2>
<!-- 使用 el-image 组件显示图片，并设置图片填充方式为覆盖 --> <!-- 使用 el-image 组件显示图片，并设置图片填充方式为覆盖 -->
</swiper-slide> </swiper-slide>
</swiper> </swiper>
...@@ -24,13 +25,13 @@ ...@@ -24,13 +25,13 @@
<div class="w-1/2 flex flex-col gap-2"> <div class="w-1/2 flex flex-col gap-2">
<el-card v-for="(item, index) in quickLinks" :key="index" <el-card v-for="(item, index) in quickLinks" :key="index"
class="hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer" class="hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer"
shadow="hover"> shadow="hover">
<a :href="item.url" target="_blank" <a :href="item.url" target="_blank"
class="flex items-center gap-4 p-1 bg-gradient-to-r from-blue-50 to-white rounded-lg"> class="flex items-center gap-4 p-1 bg-gradient-to-r from-blue-50 to-white rounded-lg">
<div class="flex items-center gap-0 p-0 bg-gradient-to-r from-blue-50 to-white rounded-lg"> <div class="flex items-center gap-0 p-0 bg-gradient-to-r rounded-lg">
<el-icon :size="24" class="text-blue-600"> <el-icon :size="20">
<component :is="item.icon" /> <component :is="item.icon" class="text-[#2f7ef6]"/>
</el-icon> </el-icon>
<h4 :style="{ whiteSpace: 'pre-line' }" <h4 :style="{ whiteSpace: 'pre-line' }"
class="font-bold text-base text-[#2f7ef6] flex items-center ml-3"> class="font-bold text-base text-[#2f7ef6] flex items-center ml-3">
...@@ -82,11 +83,11 @@ ...@@ -82,11 +83,11 @@
<div class="mt-2 flex items-center space-x-4"> <div class="mt-2 flex items-center space-x-4">
<span class="text-[12px] text-[#2f7ef6] flex items-center"> <span class="text-[12px] text-[#2f7ef6] flex items-center">
<el-icon class="mr-1"> <el-icon class="mr-1">
<View /> <View />
</el-icon> </el-icon>
线索来源：{{ item.contentSource }} 线索来源：{{ item.contentSource }}
</span> </span>
<span class="text-[12px] text-gray-500 flex items-center"> <span class="text-[12px] text-gray-500 flex items-center">
...@@ -264,35 +265,6 @@ ...@@ -264,35 +265,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid grid-cols-3 gap-3" v-if="false">
<el-card v-for="(section, index) in list1" :key="index"
class="h-full rounded-xl p-0 shadow-[0_0_10px_rgba(5,157,254,0.32)]">
<template #header>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-primary">{{
section.title
}}</span>
<el-button type="primary" text @click="goToTyMoreList(index)">更多 ></el-button>
</div>
</template>
<el-scrollbar height="400px">
<div class="space-y-4">
<div v-for="(item, index) in section.items" :key="index" class="group cursor-pointer flex items-center"
@click="getToDetail(item)">
<!-- <span class="bg-gray-400 mr-2 w-1 h-1"></span> -->
<!-- <div class="bg-gray-400 mr-2 w-1 h-1"></div> -->
<el-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
placement="top-start">
<div class="text-sm group-hover:text-blue-600 line-clamp-1 text-gray-600 ml-2">
{{ item.contentTitle }}
</div>
</el-tooltip>
</div>
</div>
</el-scrollbar>
</el-card>
</div>
</div> </div>
<div class="bg-white rounded-lg shadow-lg p-6"> <div class="bg-white rounded-lg shadow-lg p-6">
...@@ -349,52 +321,32 @@ import { baseImageUrl, lhpylbt, dtsy, zjjd, pyzq, flfg, qwfb } from "@/utils/con ...@@ -349,52 +321,32 @@ import { baseImageUrl, lhpylbt, dtsy, zjjd, pyzq, flfg, qwfb } from "@/utils/con
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import yyIcon from "@/assets/imgs/yy-icon.png"; import yyIcon from "@/assets/imgs/yy-icon.png";
const title = ref(); const pyList = ref<any[]>([]);
const description = ref(); const qwList = ref<any[]>([]);
const list1 = ref([ const zjList = ref<any[]>([]);
{ const flfgList = ref<any[]>([]);
title: "辟谣专区", const list2 = ref<any[]>([]);
items: [], const list3 = ref<any[]>([]);
},
{
title: "专家解读",
items: [],
},
{
title: "法律法规",
items: [],
},
]);
const pyList = ref([]);
const qwList = ref([]);
const zjList = ref([]);
const flfgList = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const swiperModules = [Pagination, Navigation, Autoplay]; const swiperModules = [Pagination, Navigation, Autoplay];
const onSwiper = (swiper) => { const onSwiper = (swiper: any) => {
const index = swiper.activeIndex; const index = swiper.activeIndex;
title.value = list3.value[index]?.contentTitle; // title.value = list3.value[index]?.contentTitle;
description.value = list3.value[index]?.contentDescription; // description.value = list3.value[index]?.contentDescription;
}; };
const onSlideChange = (swiper) => { const onSlideChange = (swiper: any) => {
console.log(swiper.activeIndex); console.log(swiper.activeIndex);
const index = swiper.activeIndex; const index = swiper.activeIndex;
title.value = list3.value[index]?.contentTitle; // title.value = list3.value[index]?.contentTitle;
description.value = list3.value[index]?.contentDescription; // description.value = list3.value[index]?.contentDescription;
}; };
//专家解读、辟谣专区、法律法规 更多 //专家解读、辟谣专区、法律法规 更多
function goToTyMoreList(index: number) { function goToTyMoreList(index: number) {
switch (index) { switch (index) {
case 0: //专家解读 case 0: //专家解读
// router.push({
// path: "/py/expert",
// });
router.push({ router.push({
path: "/py/expert", path: "/py/expert",
query: { query: {
...@@ -500,7 +452,7 @@ function getList(value: string, pageSize: number, pageNo: number) { ...@@ -500,7 +452,7 @@ function getList(value: string, pageSize: number, pageNo: number) {
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
getNewsList(datas).then((response) => { getNewsList(datas).then((response: any) => {
switch (value) { switch (value) {
case pyzq: case pyzq:
pyList.value = response.data.rows; pyList.value = response.data.rows;
...@@ -512,15 +464,12 @@ function getList(value: string, pageSize: number, pageNo: number) { ...@@ -512,15 +464,12 @@ function getList(value: string, pageSize: number, pageNo: number) {
break; break;
case qwfb: case qwfb:
qwList.value = response.data.rows; qwList.value = response.data.rows;
// list1.value[0].items = response.data.rows;
break; break;
case zjjd: case zjjd:
zjList.value = response.data.rows; zjList.value = response.data.rows;
// list1.value[1].items = response.data.rows;
break; break;
case flfg: case flfg:
flfgList.value = response.data.rows; flfgList.value = response.data.rows;
// list1.value[2].items = response.data.rows;
break; break;
} }
}); });
...@@ -534,7 +483,7 @@ function getList2(value: string, pageSize: number, pageNo: number) { ...@@ -534,7 +483,7 @@ function getList2(value: string, pageSize: number, pageNo: number) {
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
getNewsList(datas).then((response) => { getNewsList(datas).then((response: any) => {
const data = response.data; const data = response.data;
const rowsList = data.rows; const rowsList = data.rows;
rowsList.forEach((item: any) => { rowsList.forEach((item: any) => {
...@@ -554,7 +503,7 @@ function getList3(pageSize: number, pageNo: number) { ...@@ -554,7 +503,7 @@ function getList3(pageSize: number, pageNo: number) {
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
getNewsList(datas).then((response) => { getNewsList(datas).then((response: any) => {
const data = response.data; const data = response.data;
const rowsList = data.rows; const rowsList = data.rows;
rowsList.forEach((item: any) => { rowsList.forEach((item: any) => {
......
src/views/wm/home/WmHome.vue
...@@ -199,11 +199,11 @@ const getRecoverList = rawGetRecoverList as ApiFunction<RecoverListItem>; ...@@ -199,11 +199,11 @@ const getRecoverList = rawGetRecoverList as ApiFunction<RecoverListItem>;
const router = useRouter(); const router = useRouter();
import gzhIcon from "@/assets/imgs/gzh-icon.png";
import wxIcon from "@/assets/imgs/wx-icon.png"; import wxIcon from "@/assets/imgs/wx-icon.png";
import dyIcon from "@/assets/imgs/dy-icon.png"; import dyIcon from "@/assets/imgs/dy-icon.png";
import sphIcon from "@/assets/imgs/sph-icon.png"; import sphIcon from "@/assets/imgs/sph-icon.png";
import jrttIcon from "@/assets/imgs/jrtt-icon.png"; import jrttIcon from "@/assets/imgs/jrtt-icon.png";
import qCodeIcon from "@/assets/imgs/q-code-icon.jpg";
const mediaAccountList = ref([ const mediaAccountList = ref([
{ {
...@@ -221,11 +221,11 @@ const mediaAccountList = ref([ ...@@ -221,11 +221,11 @@ const mediaAccountList = ref([
{ {
name: "视频号", name: "视频号",
img: sphIcon, img: sphIcon,
qrCode: sphIcon, qrCode: qCodeIcon,
url: "", url: "",
}, },
{ {
name: "今⽇头条号", name: "今⽇头条",
img: jrttIcon, img: jrttIcon,
qrCode: "", qrCode: "",
url: "https://profile.zjurl.cn/rogue/ugc/profile/?active_tab=dongtai&app_name=news_article&device_id=65&media_id=1749004825668611&module_name=iOS_tt_url&request_source=1&share_token=8A789140-6E78-4E94-8126-3061A3884A82&tt_from=copy_link&upstream_biz=iOS_url&user_id=734914904863531&utm_campaign=client_share&utm_medium=toutiao_ios&utm_source=copy_link&version_code=14.7.0&version_name=140700", url: "https://profile.zjurl.cn/rogue/ugc/profile/?active_tab=dongtai&app_name=news_article&device_id=65&media_id=1749004825668611&module_name=iOS_tt_url&request_source=1&share_token=8A789140-6E78-4E94-8126-3061A3884A82&tt_from=copy_link&upstream_biz=iOS_url&user_id=734914904863531&utm_campaign=client_share&utm_medium=toutiao_ios&utm_source=copy_link&version_code=14.7.0&version_name=140700",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment