Commit 386dafb6 by 吴春元

修改

parent 46abc84b
<template>
<div class="bg-gray-50">
<!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300">
<div class="container mx-auto px-4 py-10 w-[1440px]">
<div class="grid grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-medium mb-4">联系我们</h3>
<div class="space-y-2">
<p>地址:山西省太原市迎泽区迎泽大街 369 号</p>
<p>电话:0351-12345678</p>
<p>邮箱:te@tynet.gov.cn</p>
</div>
</div>
<div>
<h4 class="text-lg font-medium mb-4">主办单位</h4>
<p>太原市互联网应急指挥和举报中心</p>
</div>
<div></div>
<!-- <div>
<h3 class="text-lg font-medium mb-4">关注我们</h3>
<div class="flex space-x-4">
<el-icon class="text-2xl"><Message /></el-icon>
<el-icon class="text-2xl"><Share /></el-icon>
<el-icon class="text-2xl"><Link /></el-icon>
</div>
</div> -->
</div>
<div class="mt-8 pt-5 border-t border-gray-700 text-center">
<p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p>
<p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div>
</div>
</footer>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Message, Share, Link, Search } from "@element-plus/icons-vue";
</script>
<style scoped></style>
...@@ -11,7 +11,10 @@ ...@@ -11,7 +11,10 @@
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(news.id)" @click="getToDetail(news.id)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"
>
<el-image <el-image
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
......
...@@ -47,9 +47,9 @@ ...@@ -47,9 +47,9 @@
</nav> </nav>
<router-view></router-view> <router-view></router-view>
<Footer></Footer>
<!-- 页脚 --> <!-- 页脚 -->
<footer class="bg-gray-800 text-gray-300 mt-10"> <!-- <footer class="bg-gray-800 text-gray-300 mt-10">
<div class="container mx-auto px-4 py-10 w-[1440px]"> <div class="container mx-auto px-4 py-10 w-[1440px]">
<div class="grid grid-cols-2 gap-8"> <div class="grid grid-cols-2 gap-8">
<div> <div>
...@@ -57,37 +57,86 @@ ...@@ -57,37 +57,86 @@
<div class="space-y-2"> <div class="space-y-2">
<p>地址:山西省太原市迎泽区迎泽大街 369 号</p> <p>地址:山西省太原市迎泽区迎泽大街 369 号</p>
<p>电话:0351-12345678</p> <p>电话:0351-12345678</p>
<p>邮箱:contact@tynet.gov.cn</p> <p>邮箱:te@tynet.gov.cn</p>
</div> </div>
</div> </div>
<div> <!-- <div>
<h3 class="text-lg font-medium mb-4">关注我们</h3> <h3 class="text-lg font-medium mb-4">关注我们</h3>
<div class="flex space-x-4"> <div class="flex space-x-4">
<el-icon class="text-2xl"><Message /></el-icon> <el-icon class="text-2xl"><Message /></el-icon>
<el-icon class="text-2xl"><Share /></el-icon> <el-icon class="text-2xl"><Share /></el-icon>
<el-icon class="text-2xl"><Link /></el-icon> <el-icon class="text-2xl"><Link /></el-icon>
</div> </div>
</div> </div> -->
</div> <!-- </div>
<div class="mt-8 pt-8 border-t border-gray-700 text-center"> <div class="mt-8 pt-8 border-t border-gray-700 text-center">
<p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p> <p>Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有</p>
<p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p> <p class="mt-2">晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div> </div>
</div> </div>
</footer> </footer> -->
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { ref } from "vue"; import { ref, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { Message, Share, Link, Search } from "@element-plus/icons-vue"; import { Message, Share, Link, Search } from "@element-plus/icons-vue";
import { getTab } from "@/api/home/home"; import { getTab } from "@/api/home/home";
import { HLW_YJZH_JBZX } from "@/utils/config"; import { HLW_YJZH_JBZX } from "@/utils/config";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue";
const router = useRouter(); const router = useRouter();
const route = useRoute();
const searchQuery = ref(""); const searchQuery = ref("");
const activeNav = ref(0); const activeNav = ref(0);
const navItems = ref([]); const navItems = ref();
//activeNav 监听
watch(
() => route.query.categoryId,
(newVal, oldVal) => {
if (route.query.activeNav != null) {
if (route.query.activeNav == "0") {
activeNav.value = 2;
}
if (route.query.activeNav == "1") {
activeNav.value = 1;
}
}
setNactiveNav();
}
);
function setNactiveNav(navItem?: any) {
navItem = navItem || navItems.value;
navItem.forEach((item: any, index: number) => {
if (item.id == route.query.categoryId) {
activeNav.value = index;
}
});
}
function navigateTo(index: number, item: any) {
// const routes = [
// { path: "/home/home", query: { id: item.id } },
// { path: "/home/news", query: { id: item.id } },
// { path: "/home/tynews", query: { id: item.id } },
// { path: "/home/sxnews", query: { id: item.id } },
// { path: "/home/announcements", query: { id: item.id } },
// ];
if (index == 0) {
router.push({
path: "/home/home",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
} else {
router.push({
path: "/home/news",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
}
activeNav.value = index;
}
const data = { const data = {
categoryFlag: HLW_YJZH_JBZX, categoryFlag: HLW_YJZH_JBZX,
...@@ -95,26 +144,17 @@ const data = { ...@@ -95,26 +144,17 @@ const data = {
getTab(data).then((res) => { getTab(data).then((res) => {
console.log(res); console.log(res);
const data = res.data.rows; const data: any[] = res.data.rows;
// //用data内的categorySort排序 // //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort); data.sort((a, b) => a.categorySort - b.categorySort);
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示 //将data内categoryTitle等于“轮播图”的数据过滤不在navItems.value中显示
data.unshift({ categoryTitle: "首页", categoryId: "999" });
const filterData = data.filter((item) => item.categoryTitle !== "轮播图"); const filterData = data.filter((item) => item.categoryTitle !== "轮播图");
navItems.value = filterData; navItems.value = filterData;
setNactiveNav(navItems.value);
}); });
function navigateTo(index, item) {
const routes = [
{ path: "/home/home", query: { id: item.id } },
{ path: "/home/news", query: { id: item.id } },
{ path: "/home/tynews", query: { id: item.id } },
{ path: "/home/sxnews", query: { id: item.id } },
{ path: "/home/announcements", query: { id: item.id } },
];
router.push({ path: routes[index].path });
activeNav.value = index;
}
function handleSearch() { function handleSearch() {
if (searchQuery.value) { if (searchQuery.value) {
router.push({ router.push({
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
:key="index" :key="index"
class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors" class="py-4 px-6 cursor-pointer hover:bg-white/10 transition-colors"
:class="{ 'bg-white/10': activeIndex === index }" :class="{ 'bg-white/10': activeIndex === index }"
@click="navigateTo(index)" @click="navigateTo(index, item)"
> >
<span class="text-white">{{ item.categoryTitle }}</span> <span class="text-white">{{ item.categoryTitle }}</span>
</div> </div>
...@@ -33,7 +33,9 @@ ...@@ -33,7 +33,9 @@
</nav> </nav>
</header> </header>
<router-view /> <router-view />
<footer class="bg-gray-100 py-8"> <Footer></Footer>
<!-- <footer class="bg-gray-100 py-8">
<div class="container mx-auto px-8"> <div class="container mx-auto px-8">
<div class="text-center text-sm text-gray-600"> <div class="text-center text-sm text-gray-600">
<p class="mb-2">联系电话:0351-5236042 技术支持:0351-5236044</p> <p class="mb-2">联系电话:0351-5236042 技术支持:0351-5236044</p>
...@@ -44,14 +46,15 @@ ...@@ -44,14 +46,15 @@
<p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p> <p>版权所有 © 2024 山西互联网联合辟谣平台 保留所有权利</p>
</div> </div>
</div> </div>
</footer> </footer> -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { computed, ref, watch } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules"; import { Pagination, Navigation, Autoplay } from "swiper/modules";
import { useRouter } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import Footer from "@/components/footer.vue";
import { import {
Document, Document,
...@@ -64,12 +67,31 @@ import { ...@@ -64,12 +67,31 @@ import {
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import { HLW_LH_PYPT } from "@/utils/config"; import { HLW_LH_PYPT } from "@/utils/config";
import { getTab } from "@/api/home/home"; import { getTab } from "@/api/home/home";
import { log } from "console";
const activeIndex = ref("0"); const activeIndex = ref(0);
const router = useRouter(); const router = useRouter();
const route = useRoute();
const navItems = ref([]); const navItems = ref([]);
//activeNav 监听
watch(
() => route.query.categoryId,
(newVal, oldVal) => {
setNactiveNav();
}
);
function setNactiveNav(navItem?: any) {
navItem = navItem || navItems.value;
navItem.forEach((item: any, index: number) => {
console.log(item.categoryId);
if (item.id == route.query.categoryId) {
activeIndex.value = index;
}
});
}
function goToHome() { function goToHome() {
if (window.opener && !window.opener.closed) { if (window.opener && !window.opener.closed) {
window.opener.focus(); // 将焦点返回到原始窗口 window.opener.focus(); // 将焦点返回到原始窗口
...@@ -86,25 +108,52 @@ getTab(data).then((res) => { ...@@ -86,25 +108,52 @@ getTab(data).then((res) => {
const data = res.data.rows; const data = res.data.rows;
// //用data内的categorySort排序 // //用data内的categorySort排序
data.sort((a, b) => a.categorySort - b.categorySort); data.sort((a, b) => a.categorySort - b.categorySort);
data.unshift({ categoryTitle: "首页", categoryId: "999" });
//将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示 //将data内categoryTitle等于“权威发布”和“辟谣专区”和“轮播图”的数据过滤不在navItems.value中显示
const filterData = data.filter( const filterData = data
(item) => .filter(
item.categoryTitle !== "轮播图" && (item) =>
item.categoryTitle !== "山西互联网联合辟谣平台" item.categoryTitle !== "轮播图" &&
); item.categoryTitle !== "山西互联网联合辟谣平台"
)
.map((item) => {
item.categoryId = item.categoryId.toString();
return item;
});
navItems.value = filterData; navItems.value = filterData;
setNactiveNav(navItems.value);
if (route.query.activeNav != null) {
if (route.query.activeNav == "2") {
activeIndex.value = 1;
}
if (route.query.activeNav == "3") {
activeIndex.value = 2;
}
}
}); });
function navigateTo(index) { function navigateTo(index: number, item: any) {
const routes = [ // const routes = [
{ path: "/py/pyhome" }, // { path: "/py/pyhome" },
{ path: "/py/authority" }, // { path: "/py/authority" },
{ path: "/py/rumor" }, // { path: "/py/rumor" },
{ path: "/py/expert" }, // { path: "/py/expert" },
{ path: "/py/law" }, // { path: "/py/law" },
{ path: "/py/reading" }, // { path: "/py/reading" },
]; // ];
router.push(routes[index].path).catch((err) => {}); // router.push(routes[index].path).catch((err) => {});
if (index == 0) {
router.push({
path: "/py/pyhome",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
} else {
router.push({
path: "/py/authority",
query: { categoryId: item.id, categoryTitle: item.categoryTitle },
});
}
activeIndex.value = index; activeIndex.value = index;
} }
</script> </script>
......
...@@ -76,9 +76,10 @@ ...@@ -76,9 +76,10 @@
</div> </div>
<router-view></router-view> <router-view></router-view>
<Footer></Footer>
<!-- 页脚 --> <!-- 页脚 -->
<footer class="footer-footer py-12 mt-8"> <!-- <footer class="footer-footer py-12 mt-8">
<div class="w-[1440px] mx-auto px-6"> <div class="w-[1440px] mx-auto px-6">
<div class="grid grid-cols-3 gap-8 mb-8"> <div class="grid grid-cols-3 gap-8 mb-8">
<div> <div>
...@@ -117,7 +118,7 @@ ...@@ -117,7 +118,7 @@
<p>晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p> <p>晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
</div> </div>
</div> </div>
</footer> </footer> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -136,6 +137,7 @@ import { ...@@ -136,6 +137,7 @@ import {
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue";
const router = useRouter(); const router = useRouter();
......
...@@ -10,3 +10,6 @@ export const useCounterStore = defineStore('counter', () => { ...@@ -10,3 +10,6 @@ export const useCounterStore = defineStore('counter', () => {
return { count, doubleCount, increment } return { count, doubleCount, increment }
}) })
...@@ -34,3 +34,5 @@ export const pyzq = "pyzq"; // 辟谣专区 ...@@ -34,3 +34,5 @@ export const pyzq = "pyzq"; // 辟谣专区
export const zjjd = "zjjd"; // 专家解读 export const zjjd = "zjjd"; // 专家解读
export const flfg = "flfg"; // 法律法规 export const flfg = "flfg"; // 法律法规
export const dtsy = "dtsy"; // 读图识谣 export const dtsy = "dtsy"; // 读图识谣
/** /**
* 通用js方法封装处理 * 通用js方法封装处理
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
import { ref } from "vue";
// 日期格式化 // 日期格式化
export function parseTime(time, pattern) { export function parseTime(time, pattern) {
if (arguments.length === 0 || !time) { if (arguments.length === 0 || !time) {
return null return null;
} }
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}' const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
let date let date;
if (typeof time === 'object') { if (typeof time === "object") {
date = time date = time;
} else { } else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) { if (typeof time === "string" && /^[0-9]+$/.test(time)) {
time = parseInt(time) time = parseInt(time);
} else if (typeof time === 'string') { } else if (typeof time === "string") {
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), ''); time = time
.replace(new RegExp(/-/gm), "/")
.replace("T", " ")
.replace(new RegExp(/\.[\d]{3}/gm), "");
} }
if ((typeof time === 'number') && (time.toString().length === 10)) { if (typeof time === "number" && time.toString().length === 10) {
time = time * 1000 time = time * 1000;
} }
date = new Date(time) date = new Date(time);
} }
const formatObj = { const formatObj = {
y: date.getFullYear(), y: date.getFullYear(),
...@@ -32,18 +35,20 @@ export function parseTime(time, pattern) { ...@@ -32,18 +35,20 @@ export function parseTime(time, pattern) {
h: date.getHours(), h: date.getHours(),
i: date.getMinutes(), i: date.getMinutes(),
s: date.getSeconds(), s: date.getSeconds(),
a: date.getDay() a: date.getDay(),
} };
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key] let value = formatObj[key];
// Note: getDay() returns 0 on Sunday // Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] } if (key === "a") {
return ["日", "一", "二", "三", "四", "五", "六"][value];
}
if (result.length > 0 && value < 10) { if (result.length > 0 && value < 10) {
value = '0' + value value = "0" + value;
} }
return value || 0 return value || 0;
}) });
return time_str return time_str;
} }
// 表单重置 // 表单重置
...@@ -56,14 +61,19 @@ export function resetForm(refName) { ...@@ -56,14 +61,19 @@ export function resetForm(refName) {
// 添加日期范围 // 添加日期范围
export function addDateRange(params, dateRange, propName) { export function addDateRange(params, dateRange, propName) {
let search = params; let search = params;
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}; search.params =
typeof search.params === "object" &&
search.params !== null &&
!Array.isArray(search.params)
? search.params
: {};
dateRange = Array.isArray(dateRange) ? dateRange : []; dateRange = Array.isArray(dateRange) ? dateRange : [];
if (typeof (propName) === 'undefined') { if (typeof propName === "undefined") {
search.params['beginTime'] = dateRange[0]; search.params["beginTime"] = dateRange[0];
search.params['endTime'] = dateRange[1]; search.params["endTime"] = dateRange[1];
} else { } else {
search.params['begin' + propName] = dateRange[0]; search.params["begin" + propName] = dateRange[0];
search.params['end' + propName] = dateRange[1]; search.params["end" + propName] = dateRange[1];
} }
return search; return search;
} }
...@@ -75,20 +85,20 @@ export function selectDictLabel(datas, value) { ...@@ -75,20 +85,20 @@ export function selectDictLabel(datas, value) {
} }
var actions = []; var actions = [];
Object.keys(datas).some((key) => { Object.keys(datas).some((key) => {
if (datas[key].value == ('' + value)) { if (datas[key].value == "" + value) {
actions.push(datas[key].label); actions.push(datas[key].label);
return true; return true;
} }
}) });
if (actions.length === 0) { if (actions.length === 0) {
actions.push(value); actions.push(value);
} }
return actions.join(''); return actions.join("");
} }
// 回显数据字典(字符串数组) // 回显数据字典(字符串数组)
export function selectDictLabels(datas, value, separator) { export function selectDictLabels(datas, value, separator) {
if (value === undefined || value.length ===0) { if (value === undefined || value.length === 0) {
return ""; return "";
} }
if (Array.isArray(value)) { if (Array.isArray(value)) {
...@@ -100,30 +110,32 @@ export function selectDictLabels(datas, value, separator) { ...@@ -100,30 +110,32 @@ export function selectDictLabels(datas, value, separator) {
Object.keys(value.split(currentSeparator)).some((val) => { Object.keys(value.split(currentSeparator)).some((val) => {
var match = false; var match = false;
Object.keys(datas).some((key) => { Object.keys(datas).some((key) => {
if (datas[key].value == ('' + temp[val])) { if (datas[key].value == "" + temp[val]) {
actions.push(datas[key].label + currentSeparator); actions.push(datas[key].label + currentSeparator);
match = true; match = true;
} }
}) });
if (!match) { if (!match) {
actions.push(temp[val] + currentSeparator); actions.push(temp[val] + currentSeparator);
} }
}) });
return actions.join('').substring(0, actions.join('').length - 1); return actions.join("").substring(0, actions.join("").length - 1);
} }
// 字符串格式化(%s ) // 字符串格式化(%s )
export function sprintf(str) { export function sprintf(str) {
var args = arguments, flag = true, i = 1; var args = arguments,
flag = true,
i = 1;
str = str.replace(/%s/g, function () { str = str.replace(/%s/g, function () {
var arg = args[i++]; var arg = args[i++];
if (typeof arg === 'undefined') { if (typeof arg === "undefined") {
flag = false; flag = false;
return ''; return "";
} }
return arg; return arg;
}); });
return flag ? str : ''; return flag ? str : "";
} }
// 转换字符串,undefined,null等转化为"" // 转换字符串,undefined,null等转化为""
...@@ -148,7 +160,7 @@ export function mergeRecursive(source, target) { ...@@ -148,7 +160,7 @@ export function mergeRecursive(source, target) {
} }
} }
return source; return source;
}; }
/** /**
* 构造树型结构数据 * 构造树型结构数据
...@@ -159,9 +171,9 @@ export function mergeRecursive(source, target) { ...@@ -159,9 +171,9 @@ export function mergeRecursive(source, target) {
*/ */
export function handleTree(data, id, parentId, children) { export function handleTree(data, id, parentId, children) {
let config = { let config = {
id: id || 'id', id: id || "id",
parentId: parentId || 'parentId', parentId: parentId || "parentId",
childrenList: children || 'children' childrenList: children || "children",
}; };
var childrenListMap = {}; var childrenListMap = {};
...@@ -202,19 +214,23 @@ export function handleTree(data, id, parentId, children) { ...@@ -202,19 +214,23 @@ export function handleTree(data, id, parentId, children) {
} }
/** /**
* 参数处理 * 参数处理
* @param {*} params 参数 * @param {*} params 参数
*/ */
export function tansParams(params) { export function tansParams(params) {
let result = '' let result = "";
for (const propName of Object.keys(params)) { for (const propName of Object.keys(params)) {
const value = params[propName]; const value = params[propName];
var part = encodeURIComponent(propName) + "="; var part = encodeURIComponent(propName) + "=";
if (value !== null && value !== "" && typeof (value) !== "undefined") { if (value !== null && value !== "" && typeof value !== "undefined") {
if (typeof value === 'object') { if (typeof value === "object") {
for (const key of Object.keys(value)) { for (const key of Object.keys(value)) {
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') { if (
let params = propName + '[' + key + ']'; value[key] !== null &&
value[key] !== "" &&
typeof value[key] !== "undefined"
) {
let params = propName + "[" + key + "]";
var subPart = encodeURIComponent(params) + "="; var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&"; result += subPart + encodeURIComponent(value[key]) + "&";
} }
...@@ -224,23 +240,24 @@ export function tansParams(params) { ...@@ -224,23 +240,24 @@ export function tansParams(params) {
} }
} }
} }
return result return result;
} }
// 返回项目路径 // 返回项目路径
export function getNormalPath(p) { export function getNormalPath(p) {
if (p.length === 0 || !p || p == 'undefined') { if (p.length === 0 || !p || p == "undefined") {
return p return p;
}; }
let res = p.replace('//', '/') let res = p.replace("//", "/");
if (res[res.length - 1] === '/') { if (res[res.length - 1] === "/") {
return res.slice(0, res.length - 1) return res.slice(0, res.length - 1);
} }
return res; return res;
} }
// 验证是否为blob格式 // 验证是否为blob格式
export function blobValidate(data) { export function blobValidate(data) {
return data.type !== 'application/json' return data.type !== "application/json";
} }
export const getActiveNav = ref(0);
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<h3 <h3
class="text-blue-600 hover:text-blue-800 cursor-pointer text-lg font-medium truncate mr-2 line-clamp-2" class="text-black hover:text-blue-600 cursor-pointer text-lg font-medium truncate mr-2 line-clamp-2"
@click="goToDetail(item.id)" @click="goToDetail(item.id)"
> >
{{ item.contentTitle }} {{ item.contentTitle }}
...@@ -30,26 +30,26 @@ ...@@ -30,26 +30,26 @@
> >
<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>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 分页 --> </div>
<div class="flex justify-center mt-8"> <!-- 分页 -->
<el-pagination <div class="flex justify-center mt-8">
v-model:current-page="pageNo" <el-pagination
v-model:page-size="pageSize" v-model:current-page="pageNo"
background v-model:page-size="pageSize"
:total="total" background
:page-sizes="[10, 20, 30, 40]" :total="total"
layout="prev, pager, next" :page-sizes="[10, 20, 30, 40]"
@size-change="handleSizeChange" layout="prev, pager, next"
@current-change="handleCurrentChange" @size-change="handleSizeChange"
/> @current-change="handleCurrentChange"
</div> />
</div> </div>
</div> </div>
<div class="w-80 flex-shrink-0 space-y-6"> <div class="w-80 flex-shrink-0 space-y-6">
...@@ -66,12 +66,10 @@ ...@@ -66,12 +66,10 @@
class="group cursor-pointer" class="group cursor-pointer"
@click="goToDetail(item.id)" @click="goToDetail(item.id)"
> >
<div class="h-32 mb-2 overflow-hidden rounded-lg"> <div
<!-- <el-image v-if="item.images != null"
class="w-full h-full object-cover" class="h-32 mb-2 overflow-hidden rounded-lg"
:src="item.images" >
:fit="fit"
></el-image> -->
<img <img
:src="item.images" :src="item.images"
:alt="item.title" :alt="item.title"
...@@ -83,27 +81,49 @@ ...@@ -83,27 +81,49 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 通知公告 --> <!-- 通知公告 -->
<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-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告 通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in announcements"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="goToDetail(item.id)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告 </el-tag> <div
<span class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
> >
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -114,7 +134,15 @@ ...@@ -114,7 +134,15 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import { Search, Refresh, View } from "@element-plus/icons-vue"; import {
Clock,
Document,
View,
Star,
Location,
Bell,
ArrowRight,
} from "@element-plus/icons-vue";
import { getNewsList } from "@/api/home/news/list"; import { getNewsList } from "@/api/home/news/list";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { baseImageUrl, rdxw, sxxw, tzgg, tyxw } from "@/utils/config"; import { baseImageUrl, rdxw, sxxw, tzgg, tyxw } from "@/utils/config";
...@@ -146,7 +174,7 @@ const handleCurrentChange = (val: number) => { ...@@ -146,7 +174,7 @@ const handleCurrentChange = (val: number) => {
getList(pageSize.value, pageNo.value); getList(pageSize.value, pageNo.value);
}; };
getTyNewsList(3, 1); getTyNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) { function getTyNewsList(pageSize: number, pageNo: number) {
......
<template> <template>
<div class="min-h-screen bg-gray-50"> <div class="min-h-screen bg-gray-50">
<div class="container mx-auto px-4 py-8 w-[1440px]"> <div class="container mx-auto px-4 py-8 w-[1440px]">
<bread-crumb <!-- <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
route.query.titlePath == '-1' ? breadcrumbItems2 : breadcrumbItems route.query.titlePath == '-1' ? breadcrumbItems2 : breadcrumbItems
" "
/> /> -->
<div class="mb-6">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item :to="{ path: '/home/home' }"
>首页</el-breadcrumb-item
>
<el-breadcrumb-item
v-if="route.query.type != '0'"
:to="{
path: '/home/news',
query: {
categoryTitle: route.query.categoryTitle,
categoryId: route.query.categoryId,
},
}"
>{{ route.query.categoryTitle }}
</el-breadcrumb-item>
<el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 主要内容区 --> <!-- 主要内容区 -->
<div class="grid grid-cols-3 gap-8"> <div class="grid grid-cols-3 gap-8">
<!-- 左侧主要新闻内容 --> <!-- 左侧主要新闻内容 -->
...@@ -33,7 +52,39 @@ ...@@ -33,7 +52,39 @@
</div> </div>
<!-- 右侧边栏 --> <!-- 右侧边栏 -->
<div class="space-y-6"> <div class="space-y-3">
<!-- 通知公告 -->
<div class="bg-white rounded-lg shadow-sm p-4">
<h2 class="text-xl font-bold mb-4 flex items-center text-black">
<el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告
</h2>
<div class="space-y-4">
<div
v-for="(item, index) in announcements"
:key="index"
class="group cursor-pointer"
@click="getToDetail(item)"
>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div>
</div>
</div>
<!-- 热点新闻 --> <!-- 热点新闻 -->
<div class="bg-white rounded-lg shadow-sm p-6"> <div class="bg-white rounded-lg shadow-sm p-6">
<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">
...@@ -62,28 +113,59 @@ ...@@ -62,28 +113,59 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</h3> </h3>
<p class="text-sm text-gray-500">{{ item.contentDatetime }}</p> <div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 本地新闻 -->
<!-- 通知公告 --> <div class="bg-white rounded-lg shadow-sm p-3">
<div class="bg-white rounded-lg shadow-sm p-6 text-black"> <h2 class="text-xl font-bold mb-4 flex items-center text-black">
<h2 class="text-xl font-bold mb-4 flex items-center"> <el-icon class="mr-2 text-blue-500"><Location /></el-icon>
<el-icon class="text-yellow-500 mr-2"><Bell /></el-icon> 太原新闻
通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in tyNews"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="itemTyClick(item)" @click="getToDetail(item)"
> >
<el-icon><Document /></el-icon> <div
<span class="text-sm group-hover:text-blue-600">{{ v-if="item.images != null"
item.contentTitle class="h-32 mb-2 overflow-hidden rounded-lg"
}}</span> >
<img
:src="item.images"
:alt="item.title"
class="w-full h-full object-cover"
/>
</div>
<div
class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
>
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -114,6 +196,7 @@ import { ...@@ -114,6 +196,7 @@ import {
TY_XW_ID, TY_XW_ID,
SX_XW_ID, SX_XW_ID,
TZ_GG_ID, TZ_GG_ID,
tyxw,
} from "@/utils/config"; } from "@/utils/config";
import { getNewsList } from "@/api/home/news/list"; import { getNewsList } from "@/api/home/news/list";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
...@@ -121,25 +204,11 @@ import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; ...@@ -121,25 +204,11 @@ import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const breadcrumbItems = ref([
{ title: "首页", path: "/home/home", contentTitle: "" },
{
title: route.query.title,
path: route.query.titlePath,
contentTitle: route.query.contentTitle,
},
{ title: "详情", path: "", contentTitle: "" },
]);
const breadcrumbItems2 = ref([
{ title: "首页", path: "/home/home" },
{ title: "详情", path: "" },
]);
const hotNews = ref([]); const hotNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
const tyNews = ref([]);
getHotsNewsList(3, 1); getHotsNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) { function getHotsNewsList(pageSize: number, pageNo: number) {
...@@ -160,6 +229,26 @@ function getHotsNewsList(pageSize: number, pageNo: number) { ...@@ -160,6 +229,26 @@ function getHotsNewsList(pageSize: number, pageNo: number) {
hotNews.value = rowsList; hotNews.value = rowsList;
}); });
} }
getTyNewsList(5, 1);
//获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) {
const datas = {
contentType: tyxw,
pageSize: pageSize,
pageNo: pageNo,
};
getNewsList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
rowsList.forEach((item: any) => {
if (item.contentImg) {
item.images = baseImageUrl(JSON.parse(item.contentImg)[0].path);
}
});
tyNews.value = rowsList;
});
}
function itemTyClick(item: any) { function itemTyClick(item: any) {
if (item.contentOutLink) { if (item.contentOutLink) {
......
...@@ -137,15 +137,15 @@ ...@@ -137,15 +137,15 @@
</h3> </h3>
<ul class="space-y-2 text-gray-700"> <ul class="space-y-2 text-gray-700">
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Phone /></el-icon> <!-- <el-icon class="mr-2"><Phone /></el-icon> -->
举报电话:0351-8222236 举报电话:0351-8222236
</li> </li>
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon> <!-- <el-icon class="mr-2"><Message /></el-icon> -->
举报传真:0351-8222234 举报传真:0351-8222234
</li> </li>
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon> <!-- <el-icon class="mr-2"><Message /></el-icon> -->
举报邮箱:tyhlwjb@163.com 举报邮箱:tyhlwjb@163.com
</li> </li>
</ul> </ul>
...@@ -154,11 +154,11 @@ ...@@ -154,11 +154,11 @@
<h3 class="font-medium mb-4 text-black">太原新闻网</h3> <h3 class="font-medium mb-4 text-black">太原新闻网</h3>
<ul class="space-y-2 text-gray-700"> <ul class="space-y-2 text-gray-700">
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Phone /></el-icon> <!-- <el-icon class="mr-2"><Phone /></el-icon> -->
举报电话:0351-8222094 举报电话:0351-8222094
</li> </li>
<li class="flex items-center"> <li class="flex items-center">
<el-icon class="mr-2"><Message /></el-icon> <!-- <el-icon class="mr-2"><Message /></el-icon> -->
举报邮箱:news1950@126.com 举报邮箱:news1950@126.com
</li> </li>
</ul> </ul>
......
...@@ -13,7 +13,10 @@ ...@@ -13,7 +13,10 @@
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(news)" @click="getToDetail(news)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"
>
<el-image <el-image
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
...@@ -40,7 +43,7 @@ ...@@ -40,7 +43,7 @@
</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>
{{ news.contentHit }} {{ news.contentHit }} 阅读
</span> </span>
</div> </div>
</div> </div>
...@@ -56,16 +59,6 @@ ...@@ -56,16 +59,6 @@
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<!-- <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
>
</el-pagination> -->
<el-pagination <el-pagination
v-model:current-page="pageNo" v-model:current-page="pageNo"
v-model:page-size="pageSize" v-model:page-size="pageSize"
...@@ -92,12 +85,10 @@ ...@@ -92,12 +85,10 @@
class="group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<div class="h-32 mb-2 overflow-hidden rounded-lg"> <div
<!-- <el-image v-if="item.images != null"
class="w-full h-full object-cover" class="h-32 mb-2 overflow-hidden rounded-lg"
:src="item.images" >
:fit="fit"
></el-image> -->
<img <img
:src="item.images" :src="item.images"
:alt="item.title" :alt="item.title"
...@@ -109,27 +100,49 @@ ...@@ -109,27 +100,49 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 通知公告 --> <!-- 通知公告 -->
<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-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告 通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in announcements"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告 </el-tag> <div
<span class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
> >
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -180,7 +193,7 @@ const newsList = ref([]); ...@@ -180,7 +193,7 @@ const newsList = ref([]);
const tyNews = ref([]); const tyNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
getTyNewsList(3, 1); getTyNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getTyNewsList(pageSize: number, pageNo: number) { function getTyNewsList(pageSize: number, pageNo: number) {
......
...@@ -13,15 +13,17 @@ ...@@ -13,15 +13,17 @@
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(news)" @click="getToDetail(news)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg me-5"
>
<el-image <el-image
v-if="news.images != null"
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
fit="fill" fit="fill"
/> />
</div> </div>
<div class="flex-grow px-6"> <div class="flex-grow">
<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"
> >
...@@ -41,7 +43,7 @@ ...@@ -41,7 +43,7 @@
</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>
{{ news.contentHit }} {{ news.contentHit }} 阅读
</span> </span>
</div> </div>
</div> </div>
...@@ -89,31 +91,49 @@ ...@@ -89,31 +91,49 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="text-xs text-gray-500 mt-1">
{{ item.contentHit }} 阅读 <div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 通知公告 -->
<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-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告 通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in announcements"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告</el-tag> <div
<span class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
> >
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -163,7 +183,7 @@ const newsList = ref([]); ...@@ -163,7 +183,7 @@ const newsList = ref([]);
const hotNews = ref([]); const hotNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
getHotsNewsList(3, 1); getHotsNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) { function getHotsNewsList(pageSize: number, pageNo: number) {
......
...@@ -13,15 +13,17 @@ ...@@ -13,15 +13,17 @@
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(news)" @click="getToDetail(news)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="news.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg me-5"
>
<el-image <el-image
v-if="news.images != null"
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
fit="fill" fit="fill"
/> />
</div> </div>
<div class="flex-grow px-6"> <div class="flex-grow">
<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"
> >
...@@ -41,7 +43,7 @@ ...@@ -41,7 +43,7 @@
</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>
{{ news.contentHit }} {{ news.contentHit }} 阅读
</span> </span>
</div> </div>
</div> </div>
...@@ -89,8 +91,16 @@ ...@@ -89,8 +91,16 @@
> >
{{ item.contentTitle }} {{ item.contentTitle }}
</div> </div>
<div class="text-xs text-gray-500 mt-1"> <div class="mt-1 flex items-center space-x-4">
{{ item.contentHit }} 阅读 <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -99,21 +109,32 @@ ...@@ -99,21 +109,32 @@
<!-- 通知公告 --> <!-- 通知公告 -->
<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-orange-500"><Bell /></el-icon> <el-icon class="mr-2 text-blue-500"><Bell /></el-icon>
通知公告 通知公告
</h2> </h2>
<div class="space-y-3"> <div class="space-y-4">
<div <div
v-for="(item, index) in announcements" v-for="(item, index) in announcements"
:key="index" :key="index"
class="flex items-center space-x-2 group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<el-tag size="small" :type="item.type">公告</el-tag> <div
<span class="text-sm font-medium group-hover:text-blue-600 line-clamp-2 text-black"
class="text-sm group-hover:text-blue-600 flex-1 line-clamp-1 text-black"
>{{ item.contentTitle }}</span
> >
{{ item.contentTitle }}
</div>
<div class="mt-1 flex items-center space-x-4">
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }}
</span>
<span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} 阅读
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -163,7 +184,7 @@ const newsList = ref([]); ...@@ -163,7 +184,7 @@ const newsList = ref([]);
const hotNews = ref([]); const hotNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
getHotsNewsList(3, 1); getHotsNewsList(5, 1);
//获取太原新闻 //获取太原新闻
function getHotsNewsList(pageSize: number, pageNo: number) { function getHotsNewsList(pageSize: number, pageNo: number) {
......
<!-- 权威发布 --> <!-- 权威发布 -->
<template> <template>
<div> <div>
<news-list <news-list />
title="权威发布"
pathType="/py/authority"
title1="辟谣专区"
title2="专家解读"
title3="法律法规"
:type0="qwfb"
:type1="pyzq"
:type2="zjjd"
:type3="flfg"
/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
......
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<div class="mx-auto bg-gray-200"> <div class="mx-auto bg-gray-200">
<main class="container mx-auto px-8 py-8"> <main class="container mx-auto px-8 py-8">
<div class="bg-white rounded-lg shadow-lg p-6 mb-8"> <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-4 text-black"> <h2 class="text-2xl font-bold mb-4 text-black line-clamp-1">
{{ title }} {{ title }}
</h2> </h2>
<p class="text-gray-600 mb-4"> <p class="text-gray-600 mb-4 line-clamp-1">
{{ description }} {{ description }}
</p> </p>
<div class="flex gap-8 mb-8"> <div class="flex gap-8 mb-8">
...@@ -78,21 +78,29 @@ ...@@ -78,21 +78,29 @@
</div> </div>
</template> </template>
<el-scrollbar height="400px"> <el-scrollbar height="400px">
<ul class="space-y-3"> <div class="space-y-4">
<li <div
v-for="(item, itemIndex) in section.items" v-for="(item, index) in section.items"
:key="itemIndex" :key="index"
class="flex items-center" class="group cursor-pointer flex items-center"
@click="getToDetail(item)"
> >
<span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span> <!-- <span class="bg-gray-400 mr-2 w-1 h-1"></span> -->
<el-link <!-- <div class="bg-gray-400 mr-2 w-1 h-1"></div> -->
:underline="false" <el-tooltip
class="text-gray-700 hover:text-primary truncate" popper-class="tooltip-width"
@click="getToDetail(item)" effect="dark"
>{{ item.contentTitle }}</el-link :content="item.contentTitle"
placement="top-start"
> >
</li> <div
</ul> 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-scrollbar>
</el-card> </el-card>
</div> </div>
...@@ -118,15 +126,24 @@ ...@@ -118,15 +126,24 @@
class="h-full hover:shadow-lg transition-shadow" class="h-full hover:shadow-lg transition-shadow"
@click="getToDetail(item)" @click="getToDetail(item)"
> >
<img :src="item.images" class="w-full h-full object-cover" /> <div class="w-full mb-4 overflow-hidden rounded-lg h-56">
<img
<!-- <el-image v-if="item.images"
:src="item.images" :src="item.images"
fit="cover" class="w-full h-full object-cover object-top"
class="w-full h-40 rounded mb-4" />
/> --> </div>
<h4 class="font-bold mb-2">{{ item.contentTitle }}</h4> <el-tooltip
<p class="text-sm text-gray-600"> popper-class="tooltip-width"
effect="dark"
:content="item.contentTitle"
placement="top-start"
>
<h4 class="font-bold mb-2 line-clamp-1">
{{ item.contentTitle }}
</h4>
</el-tooltip>
<p class="text-sm text-gray-600 line-clamp-1">
{{ item.contentDescription }} {{ item.contentDescription }}
</p> </p>
</el-card> </el-card>
...@@ -256,10 +273,10 @@ const quickLinks = [ ...@@ -256,10 +273,10 @@ const quickLinks = [
}, },
]; ];
getList(zjjd, 10, 1); getList(zjjd, 12, 1);
getList(pyzq, 10, 1); getList(pyzq, 12, 1);
getList(flfg, 10, 1); getList(flfg, 12, 1);
getList2(dtsy, 10, 1); getList2(dtsy, 12, 1);
getList3(5, 1); //轮播图 getList3(5, 1); //轮播图
//获取专家解读、辟谣专区、法律法规 //获取专家解读、辟谣专区、法律法规
...@@ -332,19 +349,19 @@ function getToDetail(item: any) { ...@@ -332,19 +349,19 @@ function getToDetail(item: any) {
router.push({ router.push({
path: "/py/news/detail", path: "/py/news/detail",
query: { query: {
pathType: "-1", type: "0",
type1: pyzq,
type2: zjjd,
title1: "辟谣专区",
title2: "专家解读",
id: item.id, id: item.id,
}, },
}); });
} }
} }
</script> </script>
<style scoped> <style>
.hero-bg { .tooltip-width {
max-width: 800px;
font-size: 14px;
}
  .hero-bg {
background: linear-gradient(135deg, #001f3f, #0047ab); background: linear-gradient(135deg, #001f3f, #0047ab);
} }
:deep(.el-card) { :deep(.el-card) {
......
...@@ -15,14 +15,25 @@ ...@@ -15,14 +15,25 @@
> >
<div class="h-48 w-full mb-4 overflow-hidden rounded-lg"> <div class="h-48 w-full mb-4 overflow-hidden rounded-lg">
<img <img
v-if="card.images"
:src="card.images" :src="card.images"
class="w-full h-full object-cover object-top" class="w-full h-full object-cover object-top"
/> />
</div> </div>
<h3 class="text-lg font-semibold mb-2 text-black line-clamp-2"> <el-tooltip
{{ card.contentTitle }} popper-class="tooltip-width"
</h3> effect="dark"
<p class="text-gray-600 text-sm">{{ card.contentDescription }}</p> :content="card.contentTitle"
placement="top-start"
>
<h3 class="text-lg font-semibold mb-2 text-black line-clamp-1">
{{ card.contentTitle }}
</h3>
</el-tooltip>
<p class="text-gray-600 text-sm line-clamp-1">
{{ card.contentDescription }}
</p>
</div> </div>
</div> </div>
<!-- 分页器 --> <!-- 分页器 -->
...@@ -72,7 +83,7 @@ const handleCurrentChange = (val: number) => { ...@@ -72,7 +83,7 @@ const handleCurrentChange = (val: number) => {
getList(pageSize.value, pageNo.value); getList(pageSize.value, pageNo.value);
}; };
getList(10, 1); getList(12, 1);
//获取专家解读 //获取专家解读
function getList(pageSize: number, pageNo: number) { function getList(pageSize: number, pageNo: number) {
......
<template> <template>
<!-- 主体内容区 --> <!-- 主体内容区 -->
<!-- 居中 --> <!-- 居中 -->
<div class="grid grid-cols-12 gap-6 w-[1440px] mx-auto"> <div class="grid grid-cols-12 gap-6 w-[1440px] mx-auto mb-10">
<!-- 左侧热点 --> <!-- 左侧热点 -->
<div class="col-span-6"> <div class="col-span-6">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div> <div>
<!-- 主要内容区域 --> <!-- 主要内容区域 -->
<div class="container mx-auto px-0 py-0 w-[1440px]"> <div class="container mx-auto px-0 py-0 w-[1440px] mb-10">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <bread-crumb :breadcrumbItems="breadcrumbItems" />
<div class="grid grid-cols-12 gap-8 mt-5"> <div class="grid grid-cols-12 gap-8 mt-5">
......
<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="mx-auto w-[1440px] px-4 py-0"> <div class="mx-auto w-[1440px] px-4 py-0 mb-10">
<bread-crumb <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
......
<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="w-[1440px] mx-auto px-4"> <div class="w-[1440px] mx-auto px-4 mb-10">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5"> <div class="flex items-center justify-between py-2 border-b mb-5">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <bread-crumb :breadcrumbItems="breadcrumbItems" />
......
<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="mx-auto w-[1440px] px-4 py-0"> <div class="mx-auto w-[1440px] px-4 py-0 mb-10">
<bread-crumb <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
......
<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="mx-auto w-[1440px] px-4"> <div class="mx-auto w-[1440px] px-4 mb-10">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5"> <div class="flex items-center justify-between py-2 border-b mb-5">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <bread-crumb :breadcrumbItems="breadcrumbItems" />
......
...@@ -28,9 +28,9 @@ export default defineConfig({ ...@@ -28,9 +28,9 @@ export default defineConfig({
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: { proxy: {
"/cms": { "/cms": {
// target: "http://localhost:9002", target: "http://localhost:9002",
// target: "http://172.16.70.52:8081", // target: "http://172.16.70.52:8081",
target: "http://192.168.19.142:9002", // target: "http://192.168.19.142:9002",
// target: "http://192.168.19.127:9002", // target: "http://192.168.19.127:9002",
changeOrigin: true, changeOrigin: true,
// rewrite: (path) => path.replace(/^\/cms/, "/cms"), // rewrite: (path) => path.replace(/^\/cms/, "/cms"),
......
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