Skip to content

E
emergency-project
Commit 59814493 by 吴春元
Options

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

refactor(views): 重构首页和辟谣页面组件结构
style(components): 调整新闻列表和卡片样式
fix(layout): 修正导航栏和搜索框布局问题
parent 74fb72b7
Showing with 127 additions and 181 deletions
src/components/py/NewsList.vue
...@@ -5,16 +5,13 @@ ...@@ -5,16 +5,13 @@
<!-- <bread-crumb :breadcrumbItems="breadcrumbItems" /> --> <!-- <bread-crumb :breadcrumbItems="breadcrumbItems" /> -->
<div class="mb-6"> <div class="mb-6">
<el-breadcrumb :separator-icon="ArrowRight"> <el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item <el-breadcrumb-item :to="{
:to="{
path: '/py/pyhome', path: '/py/pyhome',
// query: { // query: {
// categoryTitle: '首页', // categoryTitle: '首页',
// categoryId: '999', // categoryId: '999',
// }, // },
}" }">首页</el-breadcrumb-item>
>首页</el-breadcrumb-item
>
<el-breadcrumb-item>{{ <el-breadcrumb-item>{{
route.query.categoryTitle route.query.categoryTitle
}}</el-breadcrumb-item> }}</el-breadcrumb-item>
...@@ -23,30 +20,37 @@ ...@@ -23,30 +20,37 @@
<div class="flex gap-6"> <div class="flex gap-6">
<div class="flex-1"> <div class="flex-1">
<div class="bg-white rounded-lg shadow-sm"> <div class="bg-white rounded-lg shadow-sm">
<div <div v-for="(item, index) in list" :key="index"
v-for="(item, index) in list"
:key="index"
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer" class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)">
> <div v-if="item.images != null" class="w-[150px] h-[105px] flex-shrink-0 overflow-hidden mr-3">
<div <el-image :src="item.images" class="w-full h-full object-cover" />
v-if="item.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg mr-3"
>
<img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div class="flex-grow"> <div class="flex-grow relative">
<h2 <h2 class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black">
class="text-lg font-semibold mb-2 group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }} {{ item.contentTitle }}
</h2> </h2>
<p class="text-gray-600 text-sm line-clamp-2"> <p class="text-gray-600 text-sm line-clamp-2">
{{ item.contentDescription }} {{ item.contentDescription }}
</p> </p>
<div v-if="item.contentType == 'pyzq'" class="absolute right-10 top-0">
<!-- transform旋转45度 -->
<img :src="yyIcon" class="w-[85px] h-[85px] object-contain transform rotate-[-20deg]" alt="谣言标识" />
</div>
<div class="mt-3 flex items-center space-x-4"> <div class="mt-3 flex items-center space-x-4">
<span v-if="item.contentType == 'pyzq'" 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"><Clock /></el-icon> <el-icon class="mr-1">
<Clock />
</el-icon>
{{ item.contentDatetime }} {{ item.contentDatetime }}
</span> </span>
<!-- <span class="text-sm text-gray-500 flex items-center"> <!-- <span class="text-sm text-gray-500 flex items-center">
...@@ -54,7 +58,9 @@ ...@@ -54,7 +58,9 @@
{{ item.contentTags }} {{ item.contentTags }}
</span> --> </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"><View /></el-icon> <el-icon class="mr-1">
<View />
</el-icon>
{{ item.contentHit }} {{ item.contentHit }}
</span> </span>
</div> </div>
...@@ -71,16 +77,9 @@ ...@@ -71,16 +77,9 @@
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<el-pagination <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" background :total="total"
v-model:current-page="pageNo" :page-sizes="[10, 20, 30, 40]" layout="prev, pager, next" @size-change="handleSizeChange"
v-model:page-size="pageSize" @current-change="handleCurrentChange" />
background
:total="total"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> </div>
</div> </div>
...@@ -88,25 +87,17 @@ ...@@ -88,25 +87,17 @@
<!-- 权威发布 --> <!-- 权威发布 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon> <el-icon class="mr-2 text-red-500">
<Star />
</el-icon>
权威发布 权威发布
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div v-for="(item, index) in list0" :key="index" class="group cursor-pointer" @click="getToDetail(item)">
v-for="(item, index) in list0" <div v-if="item.images" class="h-32 mb-2 overflow-hidden rounded-lg">
:key="index"
class="group cursor-pointer"
@click="getToDetail(item)"
>
<div
v-if="item.images"
class="h-32 mb-2 overflow-hidden rounded-lg"
>
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div <div class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black">
class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
>
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<p class="text-gray-600 text-sm line-clamp-2 mt-1"> <p class="text-gray-600 text-sm line-clamp-2 mt-1">
...@@ -114,12 +105,16 @@ ...@@ -114,12 +105,16 @@
</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-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1">
<Clock />
</el-icon>
{{ item.contentDatetime }} {{ item.contentDatetime }}
</span> </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"><View /></el-icon> <el-icon class="mr-1">
<View />
</el-icon>
{{ item.contentHit }} 阅读 {{ item.contentHit }} 阅读
</span> </span>
</div> </div>
...@@ -129,25 +124,17 @@ ...@@ -129,25 +124,17 @@
<!-- 辟谣专区 --> <!-- 辟谣专区 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-red-500"><Star /></el-icon> <el-icon class="mr-2 text-red-500">
<Star />
</el-icon>
辟谣专区 辟谣专区
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div v-for="(item, index) in list1" :key="index" class="group cursor-pointer" @click="getToDetail(item)">
v-for="(item, index) in list1" <div v-if="item.images" class="h-32 mb-2 overflow-hidden rounded-lg">
:key="index"
class="group cursor-pointer"
@click="getToDetail(item)"
>
<div
v-if="item.images"
class="h-32 mb-2 overflow-hidden rounded-lg"
>
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div <div class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black">
class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
>
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<p class="text-gray-600 text-sm line-clamp-2 mt-1"> <p class="text-gray-600 text-sm line-clamp-2 mt-1">
...@@ -155,12 +142,16 @@ ...@@ -155,12 +142,16 @@
</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-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1">
<Clock />
</el-icon>
{{ item.contentDatetime }} {{ item.contentDatetime }}
</span> </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"><View /></el-icon> <el-icon class="mr-1">
<View />
</el-icon>
{{ item.contentHit }} 阅读 {{ item.contentHit }} 阅读
</span> </span>
</div> </div>
...@@ -170,25 +161,17 @@ ...@@ -170,25 +161,17 @@
<!-- 专家解读--> <!-- 专家解读-->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon> <el-icon class="mr-2 text-blue-500">
<Location />
</el-icon>
专家解读 专家解读
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div v-for="(item, index) in list2" :key="index" class="group cursor-pointer" @click="getToDetail(item)">
v-for="(item, index) in list2" <div v-if="item.images" class="h-32 mb-2 overflow-hidden rounded-lg">
:key="index"
class="group cursor-pointer"
@click="getToDetail(item)"
>
<div
v-if="item.images"
class="h-32 mb-2 overflow-hidden rounded-lg"
>
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div <div class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black">
class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
>
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<p class="text-gray-600 text-sm line-clamp-2 mt-1"> <p class="text-gray-600 text-sm line-clamp-2 mt-1">
...@@ -196,12 +179,16 @@ ...@@ -196,12 +179,16 @@
</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-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1">
<Clock />
</el-icon>
{{ item.contentDatetime }} {{ item.contentDatetime }}
</span> </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"><View /></el-icon> <el-icon class="mr-1">
<View />
</el-icon>
{{ item.contentHit }} 阅读 {{ item.contentHit }} 阅读
</span> </span>
</div> </div>
...@@ -212,25 +199,17 @@ ...@@ -212,25 +199,17 @@
<!-- 法律法规 --> <!-- 法律法规 -->
<div class="bg-white rounded-lg shadow-sm p-4"> <div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Location /></el-icon> <el-icon class="mr-2 text-blue-500">
<Location />
</el-icon>
法律法规 法律法规
</h2> </h2>
<div class="space-y-4"> <div class="space-y-4">
<div <div v-for="(item, index) in list3" :key="index" class="group cursor-pointer" @click="getToDetail(item)">
v-for="(item, index) in list3" <div v-if="item.images" class="h-32 mb-2 overflow-hidden rounded-lg">
:key="index"
class="group cursor-pointer"
@click="getToDetail(item)"
>
<div
v-if="item.images"
class="h-32 mb-2 overflow-hidden rounded-lg"
>
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div <div class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black">
class="text-sm font-medium group-hover:text-blue-600 line-clamp-1 text-black"
>
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<p class="text-gray-600 text-sm line-clamp-2 mt-1"> <p class="text-gray-600 text-sm line-clamp-2 mt-1">
...@@ -238,12 +217,16 @@ ...@@ -238,12 +217,16 @@
</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-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1">
<Clock />
</el-icon>
{{ item.contentDatetime }} {{ item.contentDatetime }}
</span> </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"><View /></el-icon> <el-icon class="mr-1">
<View />
</el-icon>
{{ item.contentHit }} 阅读 {{ item.contentHit }} 阅读
</span> </span>
</div> </div>
...@@ -271,6 +254,7 @@ import { baseImageUrl, pyzq, qwfb, zjjd, flfg } from "@/utils/config"; ...@@ -271,6 +254,7 @@ import { baseImageUrl, pyzq, qwfb, zjjd, flfg } from "@/utils/config";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { ca } from "element-plus/es/locales.mjs"; import { ca } from "element-plus/es/locales.mjs";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import yyIcon from "@/assets/imgs/yy-icon.png";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
...@@ -453,6 +437,7 @@ function getToDetail(item: any) { ...@@ -453,6 +437,7 @@ function getToDetail(item: any) {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.line-clamp-1 { .line-clamp-1 {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
......
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
...@@ -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">
...@@ -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