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 @@
<template>
<div class="mx-auto">
<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 space-x-4">
<h1 class="text-title font-bold cursor-pointer text-[49px]" @click="goToHome()">
......@@ -23,14 +23,14 @@
</p>
</div>
<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 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="{ 'bg-white/10': activeIndex === index }" @click="navigateTo(index, item)">
<span class="text-white text-[16px] font-bold">{{ item.categoryTitle }}</span>
</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"
@keyup.enter="handleSearch">
<template #append>
......@@ -199,7 +199,7 @@ function navigateTo(index: number, item: NavItem) {
<style scoped>
.hero-bg {
/* 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) {
......
src/views/home/home/HomeView.vue
......@@ -32,13 +32,13 @@
</el-icon> -->
<span v-if="index == 0" class="text-4xl font-semibold px-6">{{
entry.title
}}</span>
}}</span>
<span v-else-if="index == 1" class="text-4xl font-semibold text-center px-6">{{
entry.title
}}</span>
}}</span>
<span v-else-if="index == 2" class="text-4xl font-semibold text-center px-6">{{
entry.title
}}</span>
}}</span>
</div>
</div>
</div>
......@@ -219,11 +219,11 @@
<div class="space-y-4">
<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)">
<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" />
</div>
<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-tooltip popper-class="tooltip-width" effect="dark" :content="item.contentTitle"
placement="top-start">
......@@ -231,12 +231,22 @@
{{ item.contentTitle }}
</h3>
</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>
<p class="mt-1 text-sm text-gray-500 line-clamp-2">
{{ item.contentDescription }}
</p>
<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">
<el-icon class="mr-1">
<Clock />
......@@ -262,7 +272,7 @@
<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> -->
<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> -->
<!-- <div class="w-[50px] h-[3px] bg-blue-500 rounded-full mt-1"></div> -->
</div>
......@@ -305,6 +315,7 @@ import "swiper/css/navigation";
import { getLink } from "@/api/home/home";
// @ts-ignore
import { getNewsList } from "@/api/home/news/list";
import yyIcon from "@/assets/imgs/yy-icon.png";
// @ts-ignore
import {
......@@ -333,6 +344,7 @@ interface NewsItem {
contentImg?: string;
contentOutLink?: string;
images?: string;
}
interface LinkItem {
......
src/views/py/home/PyHome.vue
......@@ -3,12 +3,9 @@
<div class="mx-auto bg-gray-200">
<main class="container mx-auto px-5 py-5 w-[1440px]">
<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">
{{ title }}
</h2>
<p class="text-gray-600 mb-4 line-clamp-1">
<!-- <p class="text-gray-600 mb-4 line-clamp-1">
{{ description }}
</p>
</p> -->
<div class="flex gap-5 mb-5">
<div class="relative w-2/3 h-[510px] rounded-lg overflow-hidden">
<swiper :modules="swiperModules" :pagination="{ clickable: true }" :navigation="true"
......@@ -17,6 +14,10 @@
<swiper-slide v-for="(slide, index) in list3" :key="index">
<el-image :src="slide.images" fit="cover" class="w-full h-full object-cover"
@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 组件显示图片，并设置图片填充方式为覆盖 -->
</swiper-slide>
</swiper>
......@@ -24,13 +25,13 @@
<div class="w-1/2 flex flex-col gap-2">
<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">
<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">
<div class="flex items-center gap-0 p-0 bg-gradient-to-r from-blue-50 to-white rounded-lg">
<el-icon :size="24" class="text-blue-600">
<component :is="item.icon" />
<div class="flex items-center gap-0 p-0 bg-gradient-to-r rounded-lg">
<el-icon :size="20">
<component :is="item.icon" class="text-[#2f7ef6]"/>
</el-icon>
<h4 :style="{ whiteSpace: 'pre-line' }"
class="font-bold text-base text-[#2f7ef6] flex items-center ml-3">
......@@ -82,11 +83,11 @@
<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">
<View />
</el-icon>
线索来源：{{ item.contentSource }}
线索来源：{{ item.contentSource }}
</span>
<span class="text-[12px] text-gray-500 flex items-center">
......@@ -264,35 +265,6 @@
</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 class="bg-white rounded-lg shadow-lg p-6">
......@@ -349,52 +321,32 @@ import { baseImageUrl, lhpylbt, dtsy, zjjd, pyzq, flfg, qwfb } from "@/utils/con
import { useRouter, useRoute } from "vue-router";
import yyIcon from "@/assets/imgs/yy-icon.png";
const title = ref();
const description = ref();
const list1 = ref([
{
title: "辟谣专区",
items: [],
},
{
title: "专家解读",
items: [],
},
{
title: "法律法规",
items: [],
},
]);
const pyList = ref([]);
const qwList = ref([]);
const zjList = ref([]);
const flfgList = ref([]);
const list2 = ref([]);
const list3 = ref([]);
const pyList = ref<any[]>([]);
const qwList = ref<any[]>([]);
const zjList = ref<any[]>([]);
const flfgList = ref<any[]>([]);
const list2 = ref<any[]>([]);
const list3 = ref<any[]>([]);
const router = useRouter();
const route = useRoute();
const swiperModules = [Pagination, Navigation, Autoplay];
const onSwiper = (swiper) => {
const onSwiper = (swiper: any) => {
const index = swiper.activeIndex;
title.value = list3.value[index]?.contentTitle;
description.value = list3.value[index]?.contentDescription;
// title.value = list3.value[index]?.contentTitle;
// description.value = list3.value[index]?.contentDescription;
};
const onSlideChange = (swiper) => {
const onSlideChange = (swiper: any) => {
console.log(swiper.activeIndex);
const index = swiper.activeIndex;
title.value = list3.value[index]?.contentTitle;
description.value = list3.value[index]?.contentDescription;
// title.value = list3.value[index]?.contentTitle;
// description.value = list3.value[index]?.contentDescription;
};
//专家解读、辟谣专区、法律法规 更多
function goToTyMoreList(index: number) {
switch (index) {
case 0: //专家解读
// router.push({
// path: "/py/expert",
// });
router.push({
path: "/py/expert",
query: {
......@@ -500,7 +452,7 @@ function getList(value: string, pageSize: number, pageNo: number) {
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
getNewsList(datas).then((response: any) => {
switch (value) {
case pyzq:
pyList.value = response.data.rows;
......@@ -512,15 +464,12 @@ function getList(value: string, pageSize: number, pageNo: number) {
break;
case qwfb:
qwList.value = response.data.rows;
// list1.value[0].items = response.data.rows;
break;
case zjjd:
zjList.value = response.data.rows;
// list1.value[1].items = response.data.rows;
break;
case flfg:
flfgList.value = response.data.rows;
// list1.value[2].items = response.data.rows;
break;
}
});
......@@ -534,7 +483,7 @@ function getList2(value: string, pageSize: number, pageNo: number) {
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
getNewsList(datas).then((response: any) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
......@@ -554,7 +503,7 @@ function getList3(pageSize: number, pageNo: number) {
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
getNewsList(datas).then((response: any) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
......
src/views/wm/home/WmHome.vue
......@@ -199,11 +199,11 @@ const getRecoverList = rawGetRecoverList as ApiFunction<RecoverListItem>;
const router = useRouter();
import gzhIcon from "@/assets/imgs/gzh-icon.png";
import wxIcon from "@/assets/imgs/wx-icon.png";
import dyIcon from "@/assets/imgs/dy-icon.png";
import sphIcon from "@/assets/imgs/sph-icon.png";
import jrttIcon from "@/assets/imgs/jrtt-icon.png";
import qCodeIcon from "@/assets/imgs/q-code-icon.jpg";
const mediaAccountList = ref([
{
......@@ -221,11 +221,11 @@ const mediaAccountList = ref([
{
name: "视频号",
img: sphIcon,
qrCode: sphIcon,
qrCode: qCodeIcon,
url: "",
},
{
name: "今⽇头条号",
name: "今⽇头条",
img: jrttIcon,
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",
......
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