提交 43e9a6c4 authored 作者: 朱政's avatar 朱政

Merge branch 'master' into zz-dev

......@@ -19,6 +19,7 @@ node_modules
# Build outputs
dist
dist.rar
dist.zip
dist-ssr
*.local
......
差异被折叠。
......@@ -18,6 +18,7 @@
"author": "",
"license": "MIT",
"dependencies": {
"@antv/g6": "^4.8.25",
"@element-plus/icons-vue": "^2.3.1",
"@kangc/v-md-editor": "^2.3.18",
"@microsoft/fetch-event-source": "^2.0.1",
......
......@@ -2,7 +2,7 @@
<div id="app">
<div class="pro-wrapper">
<div class="home-page">
<ModuleHeader/>
<ModuleHeader />
<div class="main-container">
<router-view />
</div>
......@@ -22,8 +22,8 @@
</div>
</div>
<div class="tool-box" @click="handleClickToolBox">
<div class="tool-item">
<div class="tool-box">
<!-- <div class="tool-item">
<img src="@/assets/icons/tool-item-icon1.png" alt="" />
</div>
<div class="tool-item">
......@@ -34,7 +34,26 @@
</div>
<div class="tool-item">
<img src="@/assets/icons/tool-item-icon4.png" alt="" />
</div>
</div> -->
<el-tooltip content="智能写报" placement="left" :offset="10">
<div class="tool-item" @click="handleOpenPage('znxb')">
<img src="@/assets/icons/tool-item-icon1.png" alt="" />
</div>
</el-tooltip>
<el-tooltip content="智能翻译" placement="left" :offset="10">
<div class="tool-item" @click="handleClickToolBox">
<img src="@/assets/icons/tool-item-icon2.png" alt="" />
</div>
</el-tooltip>
<!-- <div class="tool-item">
<img src="@/assets/icons/tool-item-icon3.png" alt="" />
</div> -->
<el-tooltip content="智能问答" placement="left" :offset="10">
<div class="tool-item" @click="handleOpenPage('znwd')">
<img src="@/assets/icons/tool-item-icon4.png" alt="" />
</div>
</el-tooltip>
</div>
<!-- <div class="ai-btn" @click="openAiBox">
......@@ -121,7 +140,7 @@ const handleGetPersonType = async () => {
personTypeList.value = [];
}
window.sessionStorage.setItem("personTypeList", JSON.stringify(personTypeList.value));
} catch (error) { }
} catch (error) {}
};
const isCurrentOverview = computed(() => {
......@@ -252,6 +271,14 @@ const handleClickTitle = item => {
}
};
const handleOpenPage = page => {
const pageObj = {
znwd: "/chat",
znxb: "/writtingAsstaint"
};
window.open(pageObj[page], "_blank");
};
const handleClickToolBox = () => {
ElMessage.warning("当前功能正在开发中,敬请期待!");
};
......@@ -291,7 +318,7 @@ body {
text-align: justify;
}
.el-popper[data-popper-placement^="top"]>.el-popper__arrow:before {
.el-popper[data-popper-placement^="top"] > .el-popper__arrow:before {
display: none;
}
</style>
......@@ -640,7 +667,8 @@ body {
.right-btn {
position: absolute;
top: 132px;
// top: 132px;
top: 100px;
right: 0;
z-index: 10000000000000;
......
......@@ -6,14 +6,13 @@ import request from "@/api/request.js";
* * @param {String} params.monthNum // 月份数
*/
export function getAllGovernmentList(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentSanctionsData`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/governmentSanctionsData`,
params
});
}
// 全政府-获取美对华制裁措施数量趋势
/**
* @header token
......@@ -24,22 +23,23 @@ export function getAllGovernmentList(params) {
* @param {String} params.sanType // 制裁手段
*/
export function getUSChinaSanctionTrend(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/sanctionsQuantitativeTrend`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/sanctionsQuantitativeTrend`,
params
});
}
// 全政府-美政府部门打压遏制最新动态
/**
* @header token
*/
export function getUSGovernmentLatestDynamic() {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentSanctionsDynamics`
})
export function getUSGovernmentLatestDynamic(params) {
return request({
method: "GET",
url: `/api/rivalryIndex/governmentSanctionsDynamics`,
params
});
}
// 全政府-美政府部门联合制裁排行
......@@ -47,13 +47,12 @@ export function getUSGovernmentLatestDynamic() {
* @header token
*/
export function getUSGovernmentJointSanctionRank() {
return request({
method: 'GET',
url: `/api/rivalryIndex/governmentJointSanctionsRanking`
})
return request({
method: "GET",
url: `/api/rivalryIndex/governmentJointSanctionsRanking`
});
}
// 全政府-美政府部门对我打压遏制时间线
/**
* @header token
......@@ -65,24 +64,23 @@ export function getUSGovernmentJointSanctionRank() {
* @param {String} params.field // 领域ID
*/
export function getUSGovernmentSanctionHistory(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/getSanctionProcess`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/getSanctionProcess`,
params
});
}
// 全政府-获取部门数据
/**
* @header token
*/
export function getDepartmentList(params) {
return request({
method: 'GET',
url: `/api/organization/summaryDepartList`,
params
})
return request({
method: "GET",
url: `/api/organization/summaryDepartList`,
params
});
}
// 全政府-获取制裁手段数据
......@@ -90,11 +88,11 @@ export function getDepartmentList(params) {
* @params {orgId}
*/
export function getSanTypeList(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/sanTypeList`,
params
})
return request({
method: "GET",
url: `/api/rivalryIndex/sanTypeList`,
params
});
}
// 全政府-获取未来三个月内的打压遏制时间线
......@@ -102,9 +100,9 @@ export function getSanTypeList(params) {
* @params {field}
*/
export function getThreeMonthSanctionProcess(params) {
return request({
method: 'GET',
url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`,
params
})
}
\ No newline at end of file
return request({
method: "GET",
url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`,
params
});
}
......@@ -111,7 +111,7 @@ export function getBillPostOrg(params) {
export function getBillProcess(params) {
return request({
method: 'GET',
url: `/bill/BillOverview/billsProcess/${params.year}`,
url: `/api/BillOverview/billsProcess/${params.year}`,
})
}
......@@ -119,7 +119,7 @@ export function getBillProcess(params) {
export function getBills(params, signal) {
return request({
method: 'GET',
url: `/bill/BillOverview/bills`,
url: `/api/BillOverview/bills`,
params,
signal
})
......@@ -129,7 +129,7 @@ export function getBills(params, signal) {
export function getBillsPerson(params, signal) {
return request({
method: 'GET',
url: `/bill/BillOverview/billsPerson`,
url: `/api/BillOverview/billsPerson`,
params,
signal
})
......
......@@ -32,7 +32,13 @@ export function getEnterpriseNewDynamic(params) {
url: `/api/enterprisePage/newDynamic/${params}`,
})
}
//企业基本信息:最新动态(分页)
export function getEnterpriseNewDynamicPage(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/newDynamicPage/${params}`,
})
}
//企业研发投入:年度研发投入对比
export function getEnterpriseStudy(params) {
......@@ -123,3 +129,42 @@ export function getSupplyList(params) {
params,
})
}
// 企业市值:市值变化
export function getMarketCapList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/marketCap/${params}`,
})
}
// 企业发展:营收折线图
export function getRevenueList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/revenue/${params}`,
})
}
// 企业发展:净利润折线图
export function getNetProfitList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/netProfit/${params}`,
})
}
// 企业发展:人员情况折线图
export function getPersonnelList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/personnel/${params}`,
})
}
// 企业发展: 市场占比折线图
export function getMarketShareList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/marketShare/${params}`,
})
}
\ No newline at end of file
......@@ -17,10 +17,10 @@ export function getLatestDecree() {
}
// 风险信号
export function getDecreeRiskSignal() {
export function getDecreeRiskSignal(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/riskSignal`,
url: `/api/commonFeature/riskSignal/${params.moduleId}`,
})
}
......
......@@ -51,7 +51,8 @@ export function getEntitiesDataInfo() {
method: "GET",
// url: '/api/entitiesDataInfo/latestInfoSelect',
// url: "/api/entitiesDataInfo/getLatestInfo",
url: "/api/sanctionList/export/getLatestInfo"
// url: "/api/sanctionList/export/getLatestInfo"
url: "/api/sanctionList/export/getLatestEntityListInfo"
})
);
}
......@@ -121,7 +122,7 @@ export function getSanctionsInfoCount() {
* sanReason: string
* }[]>}
*/
export function getSanctionProcess(typeName = "实体清单", pageNum = 1, pageSize = 10,isCn = false) {
export function getSanctionProcess(typeName = "实体清单", pageNum = 1, pageSize = 10, isCn = false) {
return request200(
request({
method: "POST",
......@@ -835,7 +836,6 @@ export function getScientificImpactEntityList(startTime) {
);
}
/**
* 概览页--获取出口管制制裁措施
* @param {Object} data
......@@ -854,6 +854,4 @@ export function getExportControlList(data) {
);
}
//
\ No newline at end of file
//
......@@ -16,7 +16,7 @@
<div :class="{
itemLeftStatus1: item[props.riskLevel] === '特别重大',
itemLeftStatus2: item[props.riskLevel] === '重大风险',
itemLeftStatus3: item[props.riskLevel] === '较大风险',
itemLeftStatus3: item[props.riskLevel] === '较大风险' || item[props.riskLevel] === '中等风险',
itemLeftStatus4: item[props.riskLevel] === '一般风险' || !item[props.riskLevel],
itemLeftStatus5: item[props.riskLevel] === '低风险',
}">
......
<template>
<div class="search-container" v-show="!isShow">
<div class="search-type-tabs" v-if="enableBillTypeSwitch">
<div class="search-type-tab" :class="{ active: billSearchType === 'federal' }"
@click="handleChangeBillSearchType('federal')">
<div
class="search-type-tab"
:class="{ active: billSearchType === 'federal' }"
@click="handleChangeBillSearchType('federal')"
>
联邦议会
</div>
<div class="search-type-tab" :class="{ active: billSearchType === 'state' }"
@click="handleChangeBillSearchType('state')">
<div
class="search-type-tab"
:class="{ active: billSearchType === 'state' }"
@click="handleChangeBillSearchType('state')"
>
州议会
</div>
</div>
<div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
<input v-model="store.searchBillText" :placeholder="placeholder" @keyup.enter="handleSearch"
class="search-input" />
<input v-model="store.searchBillText" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
<div class="search-btn" @click="handleSearch">
<img src="@/assets/icons/search-icon.png" alt />
搜索
......@@ -32,7 +37,7 @@
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">咨询要闻</div>
<div class="btn-text">资讯要闻</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt />
</div>
......@@ -62,14 +67,7 @@ import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
const store = useWrittingAsstaintStore();
const router = useRouter();
const {
countInfo,
containerRef,
placeholder,
areaName,
enableBillTypeSwitch,
defaultBillSearchType
} = defineProps({
const { countInfo, containerRef, placeholder, areaName, enableBillTypeSwitch, defaultBillSearchType } = defineProps({
countInfo: {
type: Array,
default: () => []
......@@ -138,11 +136,9 @@ watchEffect(() => {
if (isShow.value) {
homeMainRef.value.classList.add("scroll-main");
homeMainRef.value.classList.add("scrollHomeMain");
} else {
homeMainRef.value.classList.remove("scroll-main");
homeMainRef.value.classList.remove("scrollHomeMain");
}
store.changeIsShowSearchBar(isShow.value);
......
NEW_FILE_CODE
<template>
<div class="simple-pagination">
<div class="pagination-wrapper">
<el-icon class="pagination-btn" @click="handlePrevPage" :class="{ disabled: currentPage === 1 }">
<el-icon :size="16">
<ArrowLeft />
</el-icon>
</el-icon>
<div class="pagination-info">
<span class="current-page">{{ currentPage }}</span>
<span>/</span>
<span>{{ totalPages }}</span>
</div>
<el-icon class="pagination-btn" @click="handleNextPage" :class="{ disabled: currentPage === totalPages }">
<el-icon :size="16">
<ArrowRight />
</el-icon>
</el-icon>
</div>
</div>
</template>
<script setup>
import { computed } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
const props = defineProps({
// 当前页码
currentPage: {
type: Number,
default: 1
},
// 每页显示条数
pageSize: {
type: Number,
default: 5
},
// 总记录数
total: {
type: Number,
default: 0
}
});
const emit = defineEmits(["update:currentPage", "page-change"]);
// 计算总页数
const totalPages = computed(() => {
return Math.ceil(props.total / props.pageSize) || 1;
});
// 处理上一页
const handlePrevPage = () => {
if (props.currentPage > 1) {
const newPage = props.currentPage - 1;
emit("update:currentPage", newPage);
emit("page-change", newPage);
}
};
// 处理下一页
const handleNextPage = () => {
if (props.currentPage < totalPages.value) {
const newPage = props.currentPage + 1;
emit("update:currentPage", newPage);
emit("page-change", newPage);
}
};
</script>
<style lang="scss" scoped>
.simple-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.pagination-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
color: #055fc2;
font-size: 20px;
cursor: pointer;
transition: all 0.3s;
&:hover:not(.disabled) {
background-color: #f5f7fa;
border-color: #c0c4cc;
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
color: #c0c4cc;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
// min-width: 60px;
text-align: center;
display: flex;
gap: 5px;
// letter-spacing: 5px;
}
}
}
</style>
......@@ -66,14 +66,14 @@ const handleClickToDetail = () => {
display: flex;
.header-icon {
width: 18px;
height: 18px;
margin-top: 13.7px;
margin-left: 18.7px;
width: 24px;
height: 24px;
margin-top: 12px;
margin-left: 17px;
}
.header-title {
margin-left: 21px;
margin-left: 19px;
height: 48px;
padding: 0 16px;
background: var(--color-main-active);
......
......@@ -60,12 +60,12 @@ const props = defineProps({
.header-icon {
width: 24px;
height: 24px;
margin-top: 12px;
margin-left: 20px;
margin-top: 14px;
margin-left: 19px;
}
.header-title {
margin-left: 16px;
margin-left: 17px;
height: 48px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
......
......@@ -2,10 +2,11 @@
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./image1.png" alt="" />
<!-- <img src="./image1.png" alt="" /> -->
<img src="./message-icon.svg" alt="" />
</div>
<div class="header-title">
<slot name='title'>{{ "社交媒体" }}</slot>
<slot name="title">{{ "社交媒体" }}</slot>
</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
......@@ -14,10 +15,12 @@
<div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
<div class="avatar-containerOne" v-if="isRepublicanParty"><img src="./image2.png" alt=""
class="avatar-imageOne" /></div>
<div class="avatar-containerTwo" v-if="isUnitedStatesSenate"><img src="./image3.png" alt=""
class="avatar-imageTwo" /></div>
<div class="avatar-containerOne" v-if="isRepublicanParty">
<img src="./image2.png" alt="" class="avatar-imageOne" />
</div>
<div class="avatar-containerTwo" v-if="isUnitedStatesSenate">
<img src="./image3.png" alt="" class="avatar-imageTwo" />
</div>
</div>
<div class="bubble-container">
<div class="bubble">
......@@ -49,11 +52,10 @@
</div> -->
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import { computed } from "vue";
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
......@@ -88,34 +90,32 @@ const props = defineProps({
},
content: {
type: String,
default:
"content"
default: "content"
}
});
const formattedTime = computed((index) => {
const formattedTime = computed(index => {
const date = new Date(index);
if (isNaN(date.getTime())) {
return index; // 如果不是有效日期,返回原值
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}${day}${hours}:${minutes}`;
});
const handleClickPerson = (item) => {
const handleClickPerson = item => {
emit("person-click", item);
};
const handleInfoClick = (item) => {
const handleInfoClick = item => {
emit("info-click", item);
};
const handleToMoreNews = (item) => {
const handleToMoreNews = item => {
emit("more-click", item);
};
</script>
......@@ -163,13 +163,13 @@ const handleToMoreNews = (item) => {
}
.more {
width: 45px;
width: 50px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgb(5, 95, 194);
font-family: 'Source Han Sans CN';
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
......@@ -208,16 +208,13 @@ const handleToMoreNews = (item) => {
}
.avatar-containerOne {
left: 2px;
top: 29px;
.avatar-imageOne {
width: 20px;
height: 20px;
}
}
.avatar-containerTwo {
......@@ -225,14 +222,11 @@ const handleToMoreNews = (item) => {
top: 29px;
.avatar-imageTwo {
width: 20px;
height: 20px;
}
}
.avatar {
width: 42px;
height: 42px;
......@@ -259,7 +253,6 @@ const handleToMoreNews = (item) => {
align-items: center;
margin-bottom: 5px;
.name {
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
......@@ -289,7 +282,6 @@ const handleToMoreNews = (item) => {
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.triangle {
......@@ -307,7 +299,7 @@ const handleToMoreNews = (item) => {
/* 内层:原有颜色的三角形,覆盖在外层上面,模拟描边效果 */
.triangle::after {
content: '';
content: "";
position: absolute;
top: -8px;
/* 向上偏移1px,对齐中心 */
......@@ -319,31 +311,12 @@ const handleToMoreNews = (item) => {
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
}
}
}
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
......
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none" customFrame="#000000">
<rect id="容器 1719" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<path id="减去顶层" d="M16.9748 3.81112L16.9748 12.9003C16.9748 13.3866 16.6139 13.7103 16.0713 13.7103L6.11904 13.7103L2.5 16.9505L2.5 3.81112C2.5 3.32482 2.86074 3 3.40341 3L16.0713 3C16.614 3 16.9748 3.32482 16.9748 3.81112ZM7.02382 8.4C7.02382 7.90294 6.61874 7.5 6.11906 7.5C5.61937 7.5 5.21429 7.90294 5.21429 8.4C5.21429 8.89706 5.61937 9.3 6.11906 9.3C6.61874 9.3 7.02382 8.89706 7.02382 8.4ZM10.6428 8.4C10.6428 7.90294 10.2378 7.5 9.73807 7.5C9.23839 7.5 8.83331 7.90294 8.83331 8.4C8.83331 8.89706 9.23839 9.3 9.73807 9.3C10.2378 9.3 10.6428 8.89706 10.6428 8.4ZM13.3572 7.5C13.8568 7.5 14.2619 7.90294 14.2619 8.4C14.2619 8.89706 13.8568 9.3 13.3572 9.3C12.8575 9.3 12.4524 8.89706 12.4524 8.4C12.4524 7.90294 12.8575 7.5 13.3572 7.5ZM18.7843 8.04086L20.5952 8.04086C21.1364 8.04086 21.5 8.36507 21.5 8.85018L21.5 21L17.8809 17.7598L7.92723 17.7598C7.38459 17.7598 7.02242 17.4356 7.02242 16.9505L7.02242 15.3294L18.7843 15.3294L18.7843 8.04086Z" fill="rgb(5,95,194)" fill-rule="evenodd" />
</svg>
......@@ -36,7 +36,7 @@
<div class="name">{{ "管理员" }}</div>
</div>
</div>
<div class="menu-box" v-if="isShowMenu" @mouseenter="handleHoverMenu(true)" @mouseleave="handleHoverMenu(false)">
<div class="menu-box" v-show="isShowMenu" @mouseenter="handleHoverMenu(true)" @mouseleave="handleHoverMenu(false)">
<div class="menu-content">
<div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item)">
<div class="icon">
......@@ -372,11 +372,16 @@ onMounted(() => {
top: 52px;
left: 0;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
backdrop-filter: blur(30px);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0px 8px 32px 0px rgba(31, 38, 135, 0.15);
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
.menu-content {
width: 562px;
......
......@@ -48,6 +48,8 @@ const handleToNewsAnalysis = (item, index) => {
};
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';
.box3-item {
display: flex;
align-items: center;
......@@ -90,12 +92,8 @@ const handleToNewsAnalysis = (item, index) => {
.title {
// width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 700;
line-height: 24px;
@extend .text-title-3-bold;
color: var(--text-primary-80-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -108,39 +106,15 @@ const handleToNewsAnalysis = (item, index) => {
.time {
text-align: right;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: 'Source Han Sans CN';
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@extend .text-tip-2;
color: var(--text-primary-65-color);
}
}
.right-footer {
height: 48px;
/* 调整为2行的高度:24px × 2 = 48px */
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
display: -webkit-box;
/* 关键 */
-webkit-line-clamp: 2;
/* 显示2行 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
text-overflow: ellipsis;
/* 第二行省略号 */
white-space: normal;
/* 改为 normal */
word-break: break-word;
/* 允许单词换行 */
@extend .text-compact;
color: var(--text-primary-65-color);
@include common.text-ellipsis(2);
}
}
</style>
\ No newline at end of file
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
<rect id="新闻" width="24.000000" height="24.000000" x="0.000000" y="0.000000" />
<path id="矢量 463" d="M19.125 7.25L19.125 5.875C19.125 5.32272 18.6773 4.875 18.125 4.875L3.5 4.875C2.94772 4.875 2.5 5.32272 2.5 5.875L2.5 17.9375C2.5 18.5936 3.03141 19.125 3.6875 19.125L19.7188 19.125C20.7026 19.125 21.5 18.3276 21.5 17.3438L21.5 8.25C21.5 7.69772 21.0523 7.25 20.5 7.25L19.125 7.25ZM17.4999 17.9372L3.99997 17.9372L4.00008 6.0625L17.5001 6.0625L17.4999 17.9372ZM4.99994 8.4375L16.5001 8.4375L16.5001 9.625L4.99994 9.625L4.99994 8.4375ZM12 10.8125L16.5001 10.8125L16.5001 12L12 12L12 10.8125ZM12 13.1875L16.5001 13.1875L16.5001 14.375L12 14.375L12 13.1875ZM12 15.5625L15.3126 15.5625L15.3126 16.75L12 16.75L12 15.5625ZM4.99994 10.8125L10.8125 10.8125L10.8125 16.75L4.99994 16.75L4.99994 10.8125Z" fill="rgb(5,95,194)" fill-rule="nonzero" />
</svg>
<script setup>
</script>
<template>
<div class="flex-display box">
<div class="img"></div>
<div class="flex-fill txt text-tip-1">
<slot></slot>
</div>
<div class="arrow"><span></span></div>
</div>
</template>
<style scoped lang="scss">
@use '@/styles/common.scss';
.box {
background-color: var(--color-primary-2);
flex-direction: row;
gap: 10px;
justify-content: center;
align-items: center;
padding: 6px 12px;
border-radius: 4px;
border: 1px solid var(--color-primary-10);
color: var(--color-primary-100);
}
.img {
width: 19px;
height: 20px;
background-image: url("@/assets/icons/model.png");
}
.txt {
flex: 1;
min-width: 0;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
.arrow {
border-radius: 50%;
min-width: 24px;
width: 24px;
height: 24px;
background: var(--color-primary-10);
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 22px;
font-weight: bold;
position: relative;
top: -3px;
/* 向上偏移2px */
}
}
</style>
\ No newline at end of file
......@@ -236,25 +236,6 @@ const handleMoreClick = () => {
.item-left {
margin-top: 4px;
margin-left: 0px;
margin-bottom: 4px;
width: 40px;
height: 40px;
border-radius: 20px;
color: rgba(82, 196, 26, 1);
background: rgba(246, 255, 237, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
flex-shrink: 0;
}
.item-right {
margin-left: 12px;
height: 46px;
......
<template>
<div class="buttonList" :style="{ gap: gap + 'px' }">
<Button class="button" @click="setActiveIndex(item)" :is-active="isActive(item)" v-for="item in list" :key="item.id">
<Button
class="button"
@click="setActiveIndex(item)"
:is-active="isActive(item)"
:disabled="disabled || item.disabled"
v-for="item in list"
:key="item.id"
>
<slot name="item" :item="item">
{{ item.text }}
</slot>
......@@ -29,6 +36,10 @@ const props = defineProps({
default: function () {
return [];
}
},
disabled: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
......@@ -40,6 +51,9 @@ const isActive = item => {
}
};
function setActiveIndex(item) {
if (props.disabled || item.disabled) {
return;
}
if (!props.multiple) {
if (props.activeId === item.id) {
return;
......@@ -63,5 +77,12 @@ function setActiveIndex(item) {
gap: 8px;
overflow-x: auto;
flex-wrap: wrap;
.button {
&.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
</style>
<script setup lang="ts">
import "@/styles/container.scss"
import TextStyle from './textStyle.vue';
import ConstStyle from './constStyle.vue';
import { ElScrollbar, ElSpace } from "element-plus";
</script>
<template>
<el-scrollbar>
<div class="common-page">
<el-space direction="vertical" alignment="flex-start">
<el-space direction="vertical" :size="20" alignment="flex-start">
<div class="text-title-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div>
<const-style></const-style>
<ConstStyle />
<div class="text-title-1-show">文字样式</div>
<text-style></text-style>
<TextStyle />
</el-space>
</div>
</el-scrollbar>
</template>
\ No newline at end of file
</template>
<script setup>
import "@/styles/container.scss"
import TextStyle from './textStyle.vue';
import ConstStyle from './constStyle.vue';
</script>
\ No newline at end of file
<template>
<table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;">
<table style="width: 1600px; border-collapse: collapse; border: 1px solid #ebeef5;">
<!-- 表头 -->
<thead>
<tr class="text-title-2">
......@@ -83,6 +83,21 @@ const tableData = ref([
{ name: '2级提示文字-加粗', className: 'text-tip-2-bold' },
{ name: '3级提示文字', className: 'text-tip-3' },
{ name: '黑色', className: 'text-primary-clor'},
{ name: '黑色90% / 主标题文字颜色', className: 'text-primary-90-clor'},
{ name: '黑色80% / 小标题文字颜色', className: 'text-primary-80-clor'},
{ name: '黑色65% / 正文颜色', className: 'text-primary-65-clor'},
{ name: '黑色50%', className: 'text-primary-50-clor'},
{ name: '黑色10%', className: 'bg-black-10'},
{ name: '黑色5% / 分割线颜色', className: 'bg-black-5'},
{ name: '黑色2% / 灰色背景色', className: 'bg-black-2'},
{ name: '白色主色', className: 'bg-white-100'},
{name: '主色', className: 'main-color'},
{name: '高亮背景色', className: 'color-bg-active'}
])
</script>
......
......@@ -8,6 +8,7 @@ import { withFallbackImage } from "./utils";
import "./styles/scrollbar.css";
import "./styles/elui.css";
import "./styles/main.css";
import "./styles/common.scss"
import '@/assets/fonts/font.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
......
//企业主页
const companyPages = () => import('@/views/companyPages/index.vue')
const companyPages2 = () => import('@/views/companyPages2/index.vue')
const companyPagesRoutes = [
......@@ -14,6 +15,16 @@ const companyPagesRoutes = [
dynamicTitle: true
}
},
// todo: 开发过程测试,开发完成后删除,by hsx ,20260306
{
path: "/companyPages2/:id",
name: "companyPages2",
component: companyPages2,
meta: {
title: "企业主页",
dynamicTitle: true
}
},
]
......
// 风险信号
const RiskSignal = () => import('@/views/riskSignal/index.vue')
const viewRiskSignal = () => import('@/views/viewRiskSignal/index.vue')
const riskSignalRoutes = [
const viewRiskSignalRoutes = [
//风险信号页面路由
{
path: "/riskSignal",
name: "riskSignal",
component: RiskSignal,
path: "/viewRiskSignal",
name: "viewRiskSignal",
component: viewRiskSignal,
meta: {
title: "风险信号"
}
}
]
export default riskSignalRoutes
\ No newline at end of file
export default viewRiskSignalRoutes
\ No newline at end of file
/***背景作为卡片***/
.background-as-card {
background-color: var(--color-primary-65);
background-color: var(--bg-white-80);
border-radius: 10px;
border: 1px solid rgba(234, 236, 238, 1);
border: 1px solid var(--bg-white-100);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}
.flex-display{
.flex-display {
display: flex;
}
.flex-fill {
flex: 1;
}
// 文本超出指定行数省略号显示
@mixin text-ellipsis($line-clamp) {
overflow: hidden;
display: -webkit-box;
/* 关键 */
-webkit-line-clamp: $line-clamp;
/* 显示2行 */
-webkit-box-orient: vertical;
/* 垂直方向排列 */
text-overflow: ellipsis;
/* 第二行省略号 */
white-space: normal;
/* 改为 normal */
word-break: break-word;
/* 允许单词换行 */
}
//禁止换行
.text-nowrap {
white-space: nowrap;
}
/***文本样式***/
.text-base{
color: var(--color-primary-90);
.text-base {
color: var(--color-primary-80);
}
//0级标题
.text-title-0{
.text-title-0 {
@extend .text-base;
color: var(--color-primary-90);
font-size: 32px;
}
.text-title-0-bold{
.text-title-0-bold {
@extend .text-title-0;
font-weight: Bold;
}
.text-title-0-show{
.text-title-0-show {
@extend .text-title-0;
font-size: 48px;
font-family: "YouSheBiaoTiHei";
}
//1级标题
.text-title-1{
.text-title-1 {
@extend .text-base;
color: var(--color-primary-90);
font-size: 24px;
}
.text-title-1-bold{
.text-title-1-bold {
@extend .text-title-1;
font-weight: Bold;
}
.text-title-1-show{
.text-title-1-show {
@extend .text-title-1;
font-size: 30px;
font-family: "YouSheBiaoTiHei";
}
//2级标题
.text-title-2{
.text-title-2 {
@extend .text-base;
color: var(--color-primary-90);
font-size: 20px;
line-height:26px;
line-height: 26px;
}
.text-title-2-bold{
.text-title-2-bold {
@extend .text-title-2;
font-weight: Bold;
}
.text-title-2-show{
.text-title-2-show {
@extend .text-title-2;
font-size: 24px;
font-family: "YouSheBiaoTiHei";
......@@ -72,19 +99,19 @@
}
//3级标题
.text-title-3{
.text-title-3 {
@extend .text-base;
color: var(--color-primary-90);
font-size: 18px;
line-height:24px;
line-height: 24px;
}
.text-title-3-bold{
.text-title-3-bold {
@extend .text-title-3;
font-weight: Bold;
}
.text-title-3-show{
.text-title-3-show {
@extend .text-title-3;
font-size: 20px;
font-family: "YouSheBiaoTiHei";
......@@ -92,59 +119,115 @@
}
//正文
.text-regular{
.text-regular {
@extend .text-base;
font-size: 16px;
line-height:30px;
line-height: 30px;
}
//正文-加粗
.text-bold{
.text-bold {
@extend .text-base;
font-weight: Bold;
}
//正文-紧凑
.text-compact{
.text-compact {
@extend .text-base;
font-size: 16px;
line-height:24px;
line-height: 24px;
}
.text-compact-bold{
.text-compact-bold {
@extend .text-base;
font-size: 16px;
line-height:24px;
line-height: 24px;
font-weight: Bold;
}
//1级提示文字
.text-tip-1{
.text-tip-1 {
@extend .text-base;
color: var(--color-primary-90);
font-size: 16px;
line-height:24px;
line-height: 24px;
}
.text-tip-1-bold{
.text-tip-1-bold {
@extend .text-tip-1;
font-weight: Bold;
}
//2级提示文字
.text-tip-2{
.text-tip-2 {
@extend .text-base;
color: var(--color-primary-90);
font-size: 14px;
line-height:22px;
line-height: 22px;
}
.text-tip-2-bold{
.text-tip-2-bold {
@extend .text-tip-2;
font-weight: Bold;
}
//3级提示文字
.text-tip-3{
.text-tip-3 {
@extend .text-base;
color: var(--color-primary-90);
font-size: 12px;
}
.main-color{
color: rgb(5, 95, 194);
}
// 业务主色 高亮背景
.color-bg-active{
background: rgb(246, 250, 255);
}
// 黑色
.text-primary-clor{
color: #0a121e;
}
// 黑色90% / 主标题文字颜色
.text-primary-90-clor{
color: #222934;
}
// 黑色80% / 小标题文字颜色
.text-primary-80-clor{
color: #3b414b;
}
// 黑色65% / 正文颜色
.text-primary-65-clor{
color: #5f656c;
}
// 黑色50%
.text-primary-50-clor{
color: #84888e;
}
// 黑色10%
.bg-black-10{
background: #E6E7E8;
}
// 黑色5%
.bg-black-5{
background: #EAECEE;
}
// 黑色2%
.bg-black-2{
background: #F7F8F9;
}
// 白色主色
.bg-white-100{
background: #FFFFFF;
}
\ No newline at end of file
@use "common";
/***通用页面***/
.common-page {
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
margin: 16px auto;
width: 1600px;
align-items: center;
......
@use "common";
/***没有nav下划线***/
.common-descriptions .el-descriptions__label{
@extend .text-tip-1-bold;
}
.common-descriptions .el-descriptions__content{
@extend .text-tip-1;
color: var(--text-primary-80-color);
/***通用描述组件***/
.common-descriptions {
.el-descriptions__label {
@extend .text-tip-1-bold;
color: var(--text-primary-80-color);
}
.common-descriptions .el-descriptions__content {
@extend .text-tip-1;
color: var(--text-primary-80-color);
}
}
\ No newline at end of file
......@@ -4,8 +4,6 @@
--font-family-base: "Source Han Sans CN";
--font-size-base: 16px;
--color-bg-hover: #f6faff;
/* 普通按钮颜色 */
......@@ -29,6 +27,7 @@
--bg-black-5: #EAECEE;
--bg-black-2: #F7F8F9;
--bg-white-100: #FFFFFF;
--bg-white-80: rgba(255, 255, 255, 0.8);
--bg-white-65: rgba(255, 255, 255, 0.65);
--bg-white-50: rgba(255, 255, 255, 0.5);
--bg-white-35: rgba(255, 255, 255, 0.35);
......
@use '@/styles/common.scss';
.radio-group-as-gap-btn {
@extend .text-tip-1;
.el-radio-button {
--el-radio-button-checked-bg-color: var(--bg-white-100);
--el-radio-button-checked-border-color: var(--bg-black-10);
border-radius: 4px;
}
.el-radio-button.is-active {
--el-radio-button-checked-text-color: var(--color-primary-100);
--el-radio-button-checked-bg-color: var(--color-primary-10);
--el-radio-button-checked-border-color: var(--color-primary-5);
border-radius: 4px;
}
}
\ No newline at end of file
@use "common";
/***没有nav下划线***/
.tabs-nav-no-wrap .el-tabs__nav-wrap::after{
height: 0px !important;
width: 0px !important;
.tabs-nav-no-wrap {
.el-tabs__nav-wrap::after {
height: 0px !important;
width: 0px !important;
}
}
/***nav as card***/
.tabs-header-as-card .el-tabs__header:not(.disinheritance .el-tabs__header) {
@extend .background-as-card;
padding: 2px;
.tabs-header-as-card {
.el-tabs__header:not(.disinheritance .el-tabs__header) {
@extend .background-as-card;
padding: 2px;
}
}
/***作为按钮样式的tabs-bar***/
/*选中无下划线*/
.tabs-bar-as-btn .el-tabs__active-bar:not(.disinheritance .el-tabs__active-bar) {
height: 0px;
}
.tabs-bar-as-btn {
.el-tabs__active-bar:not(.disinheritance .el-tabs__active-bar) {
height: 0px;
}
/*定义字体*/
.tabs-bar-as-btn .el-tabs__item:not(.disinheritance .el-tabs__item) {
font-size: 20px;
font-family: "Source Han Sans CN-Regular";
font-weight: Regular;
line-height: 26px;
height: 50px;
}
/*定义字体*/
.el-tabs__item:not(.disinheritance .el-tabs__item) {
font-size: 20px;
font-family: "Source Han Sans CN-Regular";
font-weight: Regular;
line-height: 26px;
height: 50px;
}
/*激活时按钮样式*/
.tabs-bar-as-btn .el-tabs__item.is-active:not(.disinheritance .el-tabs__item){
/*激活时按钮样式*/
.el-tabs__item.is-active:not(.disinheritance .el-tabs__item) {
font-size: 24px;
font-family: "Source Han Sans CN-Bold";
font-weight: Bold;
font-size: 24px;
font-family: "Source Han Sans CN-Bold";
font-weight: Bold;
color: var(--color-primary-100);
border-width: 1px;
border-style: solid;
border-color: var(--color-primary-35);
border-radius: 10px;
background-color: var(--color-primary-2);
color: var(--color-primary-100);
border-width: 1px;
border-style: solid;
border-color: var(--color-primary-35);
border-radius: 10px;
background-color: var(--color-primary-2);
}
}
/***tabs-bar左边悬浮***/
.left-float-nav-tabs .el-tabs__item{
position:relative;
}
.left-float-nav-tabs .el-tabs__item.is-active{
background-color: aquamarine;
.left-float-nav-tabs {
// .el-tabs__header {
position: relative;
overflow: visible;
transform: translateZ(0);
/* 双重保障 */
/* 创建新的渲染层 */
/* 创建新的层叠上下文 */
.el-tabs__header {
// position: absolute;
left: 0;
top: 0;
z-index: 999;
background-color: red;
// margin-left: -20px;
}
// }
}
\ No newline at end of file
......@@ -26,7 +26,6 @@
<script setup>
import { onMounted, ref, computed } from "vue";
// import HeaderMenu from "@/components/headerMenu.vue";
import RiskToday from './component/riskToday/index.vue'
import ScienceNews from './component/scienceNews/index.vue'
const input = ref('')
......
......@@ -80,7 +80,7 @@
</div>
</div>
<div class="news-content">
<div v-for="(value, idx) in newsList" :key="idx" class="news-item">
<div v-for="(value, idx) in paginatedNewsList" :key="idx" class="news-item">
<div class="news-item-title">
<div class="tag-container">
<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
......@@ -109,6 +109,25 @@
</el-tooltip>
</div>
</div>
<div class="news-pagination">
<div class="pagination-wrapper">
<el-button
class="pagination-btn"
type="primary"
@click="handlePrevPage"
:disabled="newsCurrentPage === 1"
:icon="ArrowLeft"
/>
<span class="pagination-info"> {{ newsCurrentPage }}/{{ totalPages }} </span>
<el-button
class="pagination-btn"
type="primary"
@click="handleNextPage"
:disabled="newsCurrentPage === totalPages"
:icon="ArrowRight"
/>
</div>
</div>
</div>
<div class="empty-section">
<div class="bottom-item">
......@@ -296,6 +315,7 @@ import {
} from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
const router = useRouter();
......@@ -377,6 +397,36 @@ const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const newsList = ref([]);
const newsCurrentPage = ref(1);
const newsPageSize = ref(3); // 每页显示 5 条
// 总页数
const totalPages = computed(() => {
return Math.ceil(newsList.value.length / newsPageSize.value) || 1;
});
// 分页后的新闻列表
const paginatedNewsList = computed(() => {
const start = (newsCurrentPage.value - 1) * newsPageSize.value;
const end = start + newsPageSize.value;
return newsList.value.slice(start, end);
});
const handleNewsPageChange = page => {
newsCurrentPage.value = page;
};
const handlePrevPage = () => {
if (newsCurrentPage.value > 1) {
newsCurrentPage.value--;
}
};
const handleNextPage = () => {
if (newsCurrentPage.value < totalPages.value) {
newsCurrentPage.value++;
}
};
const getUSGovernmentLatestDynamicData = async () => {
try {
......@@ -1359,11 +1409,115 @@ watch(activeDate, () => {
.news-section {
width: 792px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: space-between;
.news-title {
padding: 8px;
}
// .news-pagination {
// display: flex;
// justify-content: center;
// align-items: center;
// padding: 16px 0;
// :deep(.el-pagination) {
// &.is-background .el-pager li {
// background-color: #fff;
// border: 1px solid #dcdfe6;
// border-radius: 4px;
// font-size: 14px;
// min-width: 32px;
// height: 32px;
// line-height: 32px;
// margin: 0 4px;
// &.is-active {
// background-color: #055fc2;
// color: #fff;
// border-color: #055fc2;
// }
// &:hover {
// background-color: #f5f7fa;
// }
// }
// .btn-prev,
// .btn-next {
// background-color: rgba(231, 243, 255, 1);
// // border: 1px solid #dcdfe6;
// border: none;
// border-radius: 4px;
// font-size: 14px;
// // min-width: 32px;
// // height: 32px;
// line-height: 32px;
// margin-right: 4px;
// .el-icon {
// font-size: 16px;
// color: #055fc2;
// font-weight: 800;
// }
// &:hover:not(.is-disabled) {
// background-color: #f5f7fa;
// }
// &.is-disabled {
// opacity: 0.5;
// cursor: not-allowed;
// }
// }
// }
// }
.news-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.pagination-btn {
padding: 6px;
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
font-size: 14px;
color: #606266;
cursor: pointer;
transition: all 0.3s;
&:hover:not(:disabled) {
background-color: #f5f7fa;
// border-color: #c0c4cc;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
min-width: 60px;
text-align: center;
letter-spacing: 4px;
}
}
}
.tag-container {
display: flex;
align-items: center;
......@@ -1753,11 +1907,12 @@ watch(activeDate, () => {
.news-content {
overflow-y: auto;
overflow-x: hidden;
margin-bottom: auto;
}
.news-item {
/* 全政府-动态 (四全-最新动态) */
width: 737px;
height: 124px;
height: 116px;
margin: 0 28px;
/* 自动布局 */
display: flex;
......@@ -1825,7 +1980,7 @@ watch(activeDate, () => {
letter-spacing: 0px;
text-align: left;
color: rgba(59, 65, 75, 1);
margin-top: 8px;
// margin-top: 8px;
/* 单行省略 */
display: -webkit-box;
-webkit-box-orient: vertical;
......
......@@ -4,7 +4,8 @@
<div class="content-wrapper">
<div class="btn-wrapper" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
<div class="cards-mask">
<div class="btn-box" :style="{ transform: `translateX(-${currentIndex * (cardWidth + cardGap)}px)` }">
<!-- <div class="btn-box" :style="{ transform: `translateX(-${currentIndex * (cardWidth + cardGap)}px)` }"> -->
<div class="btn-box">
<div class="btn-item-outer" v-for="(item, indexx) in buttonsData" :key="indexx">
<div
v-for="(value, index) in item"
......@@ -74,13 +75,18 @@
<span>美对华领域打压遏制最新动态</span>
</div>
<div class="title-right-select">
<el-select v-model="selectedFieldForLatest" placeholder="全部领域" class="field-select">
<el-select
v-model="selectedFieldForLatest"
@change="handleFieldChange"
placeholder="全部领域"
class="field-select"
>
<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="news-content">
<div v-for="(value, idx) in paginatedNewsList" :key="idx" class="news-item">
<div v-for="(value, idx) in newsList" :key="idx" class="news-item">
<div class="news-item-title">
<div class="tag-container">
<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
......@@ -109,16 +115,31 @@
</el-tooltip>
</div>
</div>
<div class="news-pagination">
<el-pagination
layout="prev, pager, next"
:total="newsList.length"
:page-size="newsPageSize"
v-model:current-page="newsCurrentPage"
size="small"
@current-change="handleNewsPageChange"
/>
</div>
<!-- <div class="news-pagination">
<div class="pagination-wrapper">
<el-button
class="pagination-btn"
type="primary"
@click="handlePrevPage"
:disabled="newsCurrentPage === 1"
:icon="ArrowLeft"
/>
<span class="pagination-info"> {{ newsCurrentPage }}/{{ totalPages }} </span>
<el-button
class="pagination-btn"
type="primary"
@click="handleNextPage"
:disabled="newsCurrentPage === totalPages"
:icon="ArrowRight"
/>
</div>
</div> -->
<simple-pagination
v-model:current-page="newsCurrentPage"
:page-size="pageSize"
:total="allNewsList.length"
@page-change="handleNewsPageChange"
/>
</div>
<div class="empty-section">
<div class="bottom-item">
......@@ -200,7 +221,7 @@
<div class="bottom-item">
<div class="bottom-item-title">
<img :src="icon4" alt="" />
<span>美对领域打压遏制时间线</span>
<span>美对领域打压遏制时间线</span>
</div>
<el-select
v-model="selectedFieldTimeline"
......@@ -306,6 +327,8 @@ import {
} from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import SimplePagination from "@/components/SimplePagination.vue";
const router = useRouter();
......@@ -386,27 +409,64 @@ const selectedFieldTimeline = ref("");
const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态
const allNewsList = ref([]);
const newsList = ref([]);
const newsCurrentPage = ref(1);
const newsPageSize = ref(5); // 每页显示 5 条
const pageSize = ref(5); // 每页显示 5 条
const handleFieldChange = domainId => {
console.log("领域改变", domainId);
console.log("领域值 =>", selectedFieldForLatest.value);
newsCurrentPage.value = 1;
getUSGovernmentLatestDynamicData();
};
// 总页数
const totalPages = computed(() => {
return Math.ceil(newsList.value.length / pageSize.value) || 1;
});
// 分页后的新闻列表
const paginatedNewsList = computed(() => {
const start = (newsCurrentPage.value - 1) * newsPageSize.value;
const end = start + newsPageSize.value;
const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
return newsList.value.slice(start, end);
});
const updateNewsListByPage = () => {
const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
newsList.value = allNewsList.value.slice(start, end);
};
const handleNewsPageChange = page => {
newsCurrentPage.value = page;
};
const handlePrevPage = () => {
if (newsCurrentPage.value > 1) {
newsCurrentPage.value--;
}
};
const handleNextPage = () => {
if (newsCurrentPage.value < totalPages.value) {
newsCurrentPage.value++;
}
};
const getUSGovernmentLatestDynamicData = async () => {
try {
const res = await getUSGovernmentLatestDynamic();
const params = {
domainId: !!selectedFieldForLatest.value ? selectedFieldForLatest.value : null,
pageSize: 50,
currentPage: newsCurrentPage.value
};
console.log("领域值 =>", selectedFieldForLatest.value);
const res = await getUSGovernmentLatestDynamic(params);
if (res.code === 200 && res.data) {
// 将接口数据转换为 newsList 需要的格式
newsList.value = res.data.map(item => {
allNewsList.value = res.data.content.map(item => {
const dateObj = new Date(item.time);
const formattedDate = `${dateObj.getFullYear()}${dateObj.getMonth() + 1}${dateObj.getDate()}日`;
......@@ -419,6 +479,7 @@ const getUSGovernmentLatestDynamicData = async () => {
content: item.content || item.title // 如果 content 为空,使用 title 填充
};
});
updateNewsListByPage();
}
} catch (error) {
console.error("获取美政府部门打压遏制最新动态失败:", error);
......@@ -1390,60 +1451,104 @@ watch(activeDate, () => {
padding: 8px;
}
// .news-pagination {
// display: flex;
// justify-content: center;
// align-items: center;
// padding: 16px 0;
// :deep(.el-pagination) {
// &.is-background .el-pager li {
// background-color: #fff;
// border: 1px solid #dcdfe6;
// border-radius: 4px;
// font-size: 14px;
// min-width: 32px;
// height: 32px;
// line-height: 32px;
// margin: 0 4px;
// &.is-active {
// background-color: #055fc2;
// color: #fff;
// border-color: #055fc2;
// }
// &:hover {
// background-color: #f5f7fa;
// }
// }
// .btn-prev,
// .btn-next {
// background-color: rgba(231, 243, 255, 1);
// // border: 1px solid #dcdfe6;
// border: none;
// border-radius: 4px;
// font-size: 14px;
// // min-width: 32px;
// // height: 32px;
// line-height: 32px;
// margin-right: 4px;
// .el-icon {
// font-size: 16px;
// color: #055fc2;
// font-weight: 800;
// }
// &:hover:not(.is-disabled) {
// background-color: #f5f7fa;
// }
// &.is-disabled {
// opacity: 0.5;
// cursor: not-allowed;
// }
// }
// }
// }
.news-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 0;
:deep(.el-pagination) {
&.is-background .el-pager li {
background-color: #fff;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
min-width: 32px;
height: 32px;
line-height: 32px;
margin: 0 4px;
&.is-active {
background-color: #055fc2;
color: #fff;
border-color: #055fc2;
}
&:hover {
background-color: #f5f7fa;
}
}
.pagination-wrapper {
display: flex;
align-items: center;
gap: 12px;
.btn-prev,
.btn-next {
.pagination-btn {
padding: 6px;
background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6;
border: none;
border-radius: 4px;
font-size: 14px;
// min-width: 32px;
// height: 32px;
line-height: 32px;
margin-right: 4px;
.el-icon {
font-size: 16px;
color: #055fc2;
font-weight: 800;
}
color: #606266;
cursor: pointer;
transition: all 0.3s;
&:hover:not(.is-disabled) {
&:hover:not(:disabled) {
background-color: #f5f7fa;
// border-color: #c0c4cc;
}
&.is-disabled {
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f5f7fa;
}
}
.pagination-info {
font-size: 14px;
color: rgba(5, 95, 194, 1);
min-width: 60px;
text-align: center;
letter-spacing: 4px;
}
}
}
......
差异被折叠。
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论