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

Merge branch 'master' into zz-dev

...@@ -19,6 +19,7 @@ node_modules ...@@ -19,6 +19,7 @@ node_modules
# Build outputs # Build outputs
dist dist
dist.rar dist.rar
dist.zip
dist-ssr dist-ssr
*.local *.local
......
差异被折叠。
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"author": "", "author": "",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@antv/g6": "^4.8.25",
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@kangc/v-md-editor": "^2.3.18", "@kangc/v-md-editor": "^2.3.18",
"@microsoft/fetch-event-source": "^2.0.1", "@microsoft/fetch-event-source": "^2.0.1",
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div id="app"> <div id="app">
<div class="pro-wrapper"> <div class="pro-wrapper">
<div class="home-page"> <div class="home-page">
<ModuleHeader/> <ModuleHeader />
<div class="main-container"> <div class="main-container">
<router-view /> <router-view />
</div> </div>
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
</div> </div>
</div> </div>
<div class="tool-box" @click="handleClickToolBox"> <div class="tool-box">
<div class="tool-item"> <!-- <div class="tool-item">
<img src="@/assets/icons/tool-item-icon1.png" alt="" /> <img src="@/assets/icons/tool-item-icon1.png" alt="" />
</div> </div>
<div class="tool-item"> <div class="tool-item">
...@@ -34,7 +34,26 @@ ...@@ -34,7 +34,26 @@
</div> </div>
<div class="tool-item"> <div class="tool-item">
<img src="@/assets/icons/tool-item-icon4.png" alt="" /> <img src="@/assets/icons/tool-item-icon4.png" alt="" />
</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> </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>
<!-- <div class="ai-btn" @click="openAiBox"> <!-- <div class="ai-btn" @click="openAiBox">
...@@ -121,7 +140,7 @@ const handleGetPersonType = async () => { ...@@ -121,7 +140,7 @@ const handleGetPersonType = async () => {
personTypeList.value = []; personTypeList.value = [];
} }
window.sessionStorage.setItem("personTypeList", JSON.stringify(personTypeList.value)); window.sessionStorage.setItem("personTypeList", JSON.stringify(personTypeList.value));
} catch (error) { } } catch (error) {}
}; };
const isCurrentOverview = computed(() => { const isCurrentOverview = computed(() => {
...@@ -252,6 +271,14 @@ const handleClickTitle = item => { ...@@ -252,6 +271,14 @@ const handleClickTitle = item => {
} }
}; };
const handleOpenPage = page => {
const pageObj = {
znwd: "/chat",
znxb: "/writtingAsstaint"
};
window.open(pageObj[page], "_blank");
};
const handleClickToolBox = () => { const handleClickToolBox = () => {
ElMessage.warning("当前功能正在开发中,敬请期待!"); ElMessage.warning("当前功能正在开发中,敬请期待!");
}; };
...@@ -291,7 +318,7 @@ body { ...@@ -291,7 +318,7 @@ body {
text-align: justify; 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; display: none;
} }
</style> </style>
...@@ -640,7 +667,8 @@ body { ...@@ -640,7 +667,8 @@ body {
.right-btn { .right-btn {
position: absolute; position: absolute;
top: 132px; // top: 132px;
top: 100px;
right: 0; right: 0;
z-index: 10000000000000; z-index: 10000000000000;
......
...@@ -7,13 +7,12 @@ import request from "@/api/request.js"; ...@@ -7,13 +7,12 @@ import request from "@/api/request.js";
*/ */
export function getAllGovernmentList(params) { export function getAllGovernmentList(params) {
return request({ return request({
method: 'GET', method: "GET",
url: `/api/rivalryIndex/governmentSanctionsData`, url: `/api/rivalryIndex/governmentSanctionsData`,
params params
}) });
} }
// 全政府-获取美对华制裁措施数量趋势 // 全政府-获取美对华制裁措施数量趋势
/** /**
* @header token * @header token
...@@ -25,21 +24,22 @@ export function getAllGovernmentList(params) { ...@@ -25,21 +24,22 @@ export function getAllGovernmentList(params) {
*/ */
export function getUSChinaSanctionTrend(params) { export function getUSChinaSanctionTrend(params) {
return request({ return request({
method: 'GET', method: "GET",
url: `/api/rivalryIndex/sanctionsQuantitativeTrend`, url: `/api/rivalryIndex/sanctionsQuantitativeTrend`,
params params
}) });
} }
// 全政府-美政府部门打压遏制最新动态 // 全政府-美政府部门打压遏制最新动态
/** /**
* @header token * @header token
*/ */
export function getUSGovernmentLatestDynamic() { export function getUSGovernmentLatestDynamic(params) {
return request({ return request({
method: 'GET', method: "GET",
url: `/api/rivalryIndex/governmentSanctionsDynamics` url: `/api/rivalryIndex/governmentSanctionsDynamics`,
}) params
});
} }
// 全政府-美政府部门联合制裁排行 // 全政府-美政府部门联合制裁排行
...@@ -48,12 +48,11 @@ export function getUSGovernmentLatestDynamic() { ...@@ -48,12 +48,11 @@ export function getUSGovernmentLatestDynamic() {
*/ */
export function getUSGovernmentJointSanctionRank() { export function getUSGovernmentJointSanctionRank() {
return request({ return request({
method: 'GET', method: "GET",
url: `/api/rivalryIndex/governmentJointSanctionsRanking` url: `/api/rivalryIndex/governmentJointSanctionsRanking`
}) });
} }
// 全政府-美政府部门对我打压遏制时间线 // 全政府-美政府部门对我打压遏制时间线
/** /**
* @header token * @header token
...@@ -66,23 +65,22 @@ export function getUSGovernmentJointSanctionRank() { ...@@ -66,23 +65,22 @@ export function getUSGovernmentJointSanctionRank() {
*/ */
export function getUSGovernmentSanctionHistory(params) { export function getUSGovernmentSanctionHistory(params) {
return request({ return request({
method: 'GET', method: "GET",
url: `/api/rivalryIndex/getSanctionProcess`, url: `/api/rivalryIndex/getSanctionProcess`,
params params
}) });
} }
// 全政府-获取部门数据 // 全政府-获取部门数据
/** /**
* @header token * @header token
*/ */
export function getDepartmentList(params) { export function getDepartmentList(params) {
return request({ return request({
method: 'GET', method: "GET",
url: `/api/organization/summaryDepartList`, url: `/api/organization/summaryDepartList`,
params params
}) });
} }
// 全政府-获取制裁手段数据 // 全政府-获取制裁手段数据
...@@ -91,10 +89,10 @@ export function getDepartmentList(params) { ...@@ -91,10 +89,10 @@ export function getDepartmentList(params) {
*/ */
export function getSanTypeList(params) { export function getSanTypeList(params) {
return request({ return request({
method: 'GET', method: "GET",
url: `/api/rivalryIndex/sanTypeList`, url: `/api/rivalryIndex/sanTypeList`,
params params
}) });
} }
// 全政府-获取未来三个月内的打压遏制时间线 // 全政府-获取未来三个月内的打压遏制时间线
...@@ -103,8 +101,8 @@ export function getSanTypeList(params) { ...@@ -103,8 +101,8 @@ export function getSanTypeList(params) {
*/ */
export function getThreeMonthSanctionProcess(params) { export function getThreeMonthSanctionProcess(params) {
return request({ return request({
method: 'GET', method: "GET",
url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`, url: `/api/rivalryIndex/nextThreeMonthSanctionProcess`,
params params
}) });
} }
...@@ -111,7 +111,7 @@ export function getBillPostOrg(params) { ...@@ -111,7 +111,7 @@ export function getBillPostOrg(params) {
export function getBillProcess(params) { export function getBillProcess(params) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/bill/BillOverview/billsProcess/${params.year}`, url: `/api/BillOverview/billsProcess/${params.year}`,
}) })
} }
...@@ -119,7 +119,7 @@ export function getBillProcess(params) { ...@@ -119,7 +119,7 @@ export function getBillProcess(params) {
export function getBills(params, signal) { export function getBills(params, signal) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/bill/BillOverview/bills`, url: `/api/BillOverview/bills`,
params, params,
signal signal
}) })
...@@ -129,7 +129,7 @@ export function getBills(params, signal) { ...@@ -129,7 +129,7 @@ export function getBills(params, signal) {
export function getBillsPerson(params, signal) { export function getBillsPerson(params, signal) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/bill/BillOverview/billsPerson`, url: `/api/BillOverview/billsPerson`,
params, params,
signal signal
}) })
......
...@@ -32,7 +32,13 @@ export function getEnterpriseNewDynamic(params) { ...@@ -32,7 +32,13 @@ export function getEnterpriseNewDynamic(params) {
url: `/api/enterprisePage/newDynamic/${params}`, url: `/api/enterprisePage/newDynamic/${params}`,
}) })
} }
//企业基本信息:最新动态(分页)
export function getEnterpriseNewDynamicPage(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/newDynamicPage/${params}`,
})
}
//企业研发投入:年度研发投入对比 //企业研发投入:年度研发投入对比
export function getEnterpriseStudy(params) { export function getEnterpriseStudy(params) {
...@@ -123,3 +129,42 @@ export function getSupplyList(params) { ...@@ -123,3 +129,42 @@ export function getSupplyList(params) {
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() { ...@@ -17,10 +17,10 @@ export function getLatestDecree() {
} }
// 风险信号 // 风险信号
export function getDecreeRiskSignal() { export function getDecreeRiskSignal(params) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/administrativeOrderOverview/riskSignal`, url: `/api/commonFeature/riskSignal/${params.moduleId}`,
}) })
} }
......
...@@ -51,7 +51,8 @@ export function getEntitiesDataInfo() { ...@@ -51,7 +51,8 @@ export function getEntitiesDataInfo() {
method: "GET", method: "GET",
// url: '/api/entitiesDataInfo/latestInfoSelect', // url: '/api/entitiesDataInfo/latestInfoSelect',
// url: "/api/entitiesDataInfo/getLatestInfo", // 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() { ...@@ -121,7 +122,7 @@ export function getSanctionsInfoCount() {
* sanReason: string * sanReason: string
* }[]>} * }[]>}
*/ */
export function getSanctionProcess(typeName = "实体清单", pageNum = 1, pageSize = 10,isCn = false) { export function getSanctionProcess(typeName = "实体清单", pageNum = 1, pageSize = 10, isCn = false) {
return request200( return request200(
request({ request({
method: "POST", method: "POST",
...@@ -835,7 +836,6 @@ export function getScientificImpactEntityList(startTime) { ...@@ -835,7 +836,6 @@ export function getScientificImpactEntityList(startTime) {
); );
} }
/** /**
* 概览页--获取出口管制制裁措施 * 概览页--获取出口管制制裁措施
* @param {Object} data * @param {Object} data
...@@ -854,6 +854,4 @@ export function getExportControlList(data) { ...@@ -854,6 +854,4 @@ export function getExportControlList(data) {
); );
} }
// //
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div :class="{ <div :class="{
itemLeftStatus1: item[props.riskLevel] === '特别重大', itemLeftStatus1: item[props.riskLevel] === '特别重大',
itemLeftStatus2: 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], itemLeftStatus4: item[props.riskLevel] === '一般风险' || !item[props.riskLevel],
itemLeftStatus5: item[props.riskLevel] === '低风险', itemLeftStatus5: item[props.riskLevel] === '低风险',
}"> }">
......
<template> <template>
<div class="search-container" v-show="!isShow"> <div class="search-container" v-show="!isShow">
<div class="search-type-tabs" v-if="enableBillTypeSwitch"> <div class="search-type-tabs" v-if="enableBillTypeSwitch">
<div class="search-type-tab" :class="{ active: billSearchType === 'federal' }" <div
@click="handleChangeBillSearchType('federal')"> class="search-type-tab"
:class="{ active: billSearchType === 'federal' }"
@click="handleChangeBillSearchType('federal')"
>
联邦议会 联邦议会
</div> </div>
<div class="search-type-tab" :class="{ active: billSearchType === 'state' }" <div
@click="handleChangeBillSearchType('state')"> class="search-type-tab"
:class="{ active: billSearchType === 'state' }"
@click="handleChangeBillSearchType('state')"
>
州议会 州议会
</div> </div>
</div> </div>
<div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }"> <div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
<input v-model="store.searchBillText" :placeholder="placeholder" @keyup.enter="handleSearch" <input v-model="store.searchBillText" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
class="search-input" />
<div class="search-btn" @click="handleSearch"> <div class="search-btn" @click="handleSearch">
<img src="@/assets/icons/search-icon.png" alt /> <img src="@/assets/icons/search-icon.png" alt />
搜索 搜索
...@@ -32,7 +37,7 @@ ...@@ -32,7 +37,7 @@
</div> </div>
</div> </div>
<div class="btn" @click="handleToPosi('position2')"> <div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">咨询要闻</div> <div class="btn-text">资讯要闻</div>
<div class="btn-icon"> <div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt /> <img src="@/assets/icons/arrow-right-icon.png" alt />
</div> </div>
...@@ -62,14 +67,7 @@ import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore"; ...@@ -62,14 +67,7 @@ import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
const store = useWrittingAsstaintStore(); const store = useWrittingAsstaintStore();
const router = useRouter(); const router = useRouter();
const { const { countInfo, containerRef, placeholder, areaName, enableBillTypeSwitch, defaultBillSearchType } = defineProps({
countInfo,
containerRef,
placeholder,
areaName,
enableBillTypeSwitch,
defaultBillSearchType
} = defineProps({
countInfo: { countInfo: {
type: Array, type: Array,
default: () => [] default: () => []
...@@ -138,11 +136,9 @@ watchEffect(() => { ...@@ -138,11 +136,9 @@ watchEffect(() => {
if (isShow.value) { if (isShow.value) {
homeMainRef.value.classList.add("scroll-main"); homeMainRef.value.classList.add("scroll-main");
homeMainRef.value.classList.add("scrollHomeMain"); homeMainRef.value.classList.add("scrollHomeMain");
} else { } else {
homeMainRef.value.classList.remove("scroll-main"); homeMainRef.value.classList.remove("scroll-main");
homeMainRef.value.classList.remove("scrollHomeMain"); homeMainRef.value.classList.remove("scrollHomeMain");
} }
store.changeIsShowSearchBar(isShow.value); 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 = () => { ...@@ -66,14 +66,14 @@ const handleClickToDetail = () => {
display: flex; display: flex;
.header-icon { .header-icon {
width: 18px; width: 24px;
height: 18px; height: 24px;
margin-top: 13.7px; margin-top: 12px;
margin-left: 18.7px; margin-left: 17px;
} }
.header-title { .header-title {
margin-left: 21px; margin-left: 19px;
height: 48px; height: 48px;
padding: 0 16px; padding: 0 16px;
background: var(--color-main-active); background: var(--color-main-active);
......
...@@ -60,12 +60,12 @@ const props = defineProps({ ...@@ -60,12 +60,12 @@ const props = defineProps({
.header-icon { .header-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-top: 12px; margin-top: 14px;
margin-left: 20px; margin-left: 19px;
} }
.header-title { .header-title {
margin-left: 16px; margin-left: 17px;
height: 48px; height: 48px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
......
...@@ -2,10 +2,11 @@ ...@@ -2,10 +2,11 @@
<div class="box4"> <div class="box4">
<div class="box4-header"> <div class="box4-header">
<div class="header-icon"> <div class="header-icon">
<img src="./image1.png" alt="" /> <!-- <img src="./image1.png" alt="" /> -->
<img src="./message-icon.svg" alt="" />
</div> </div>
<div class="header-title"> <div class="header-title">
<slot name='title'>{{ "社交媒体" }}</slot> <slot name="title">{{ "社交媒体" }}</slot>
</div> </div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div> </div>
...@@ -14,10 +15,12 @@ ...@@ -14,10 +15,12 @@
<div class="avatar-container"> <div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" /> <img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
<div class="avatar-containerOne" v-if="isRepublicanParty"><img src="./image2.png" alt="" <div class="avatar-containerOne" v-if="isRepublicanParty">
class="avatar-imageOne" /></div> <img src="./image2.png" alt="" class="avatar-imageOne" />
<div class="avatar-containerTwo" v-if="isUnitedStatesSenate"><img src="./image3.png" alt="" </div>
class="avatar-imageTwo" /></div> <div class="avatar-containerTwo" v-if="isUnitedStatesSenate">
<img src="./image3.png" alt="" class="avatar-imageTwo" />
</div>
</div> </div>
<div class="bubble-container"> <div class="bubble-container">
<div class="bubble"> <div class="bubble">
...@@ -49,11 +52,10 @@ ...@@ -49,11 +52,10 @@
</div> --> </div> -->
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from "vue";
import avatarUser from "@/assets/images/avatar_user.png"; import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]); const emit = defineEmits(["click", "info-click"]);
...@@ -88,34 +90,32 @@ const props = defineProps({ ...@@ -88,34 +90,32 @@ const props = defineProps({
}, },
content: { content: {
type: String, type: String,
default: default: "content"
"content"
} }
}); });
const formattedTime = computed((index) => { const formattedTime = computed(index => {
const date = new Date(index); const date = new Date(index);
if (isNaN(date.getTime())) { if (isNaN(date.getTime())) {
return index; // 如果不是有效日期,返回原值 return index; // 如果不是有效日期,返回原值
} }
const year = date.getFullYear(); 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 day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, "0");
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`; // return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}${day}${hours}:${minutes}`; return `${month}${day}${hours}:${minutes}`;
}); });
const handleClickPerson = item => {
const handleClickPerson = (item) => {
emit("person-click", item); emit("person-click", item);
}; };
const handleInfoClick = (item) => { const handleInfoClick = item => {
emit("info-click", item); emit("info-click", item);
}; };
const handleToMoreNews = (item) => { const handleToMoreNews = item => {
emit("more-click", item); emit("more-click", item);
}; };
</script> </script>
...@@ -163,13 +163,13 @@ const handleToMoreNews = (item) => { ...@@ -163,13 +163,13 @@ const handleToMoreNews = (item) => {
} }
.more { .more {
width: 45px; width: 50px;
height: 24px; height: 24px;
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 27px; right: 27px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
font-family: 'Source Han Sans CN'; font-family: "Source Han Sans CN";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
...@@ -208,16 +208,13 @@ const handleToMoreNews = (item) => { ...@@ -208,16 +208,13 @@ const handleToMoreNews = (item) => {
} }
.avatar-containerOne { .avatar-containerOne {
left: 2px; left: 2px;
top: 29px; top: 29px;
.avatar-imageOne { .avatar-imageOne {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
} }
.avatar-containerTwo { .avatar-containerTwo {
...@@ -225,14 +222,11 @@ const handleToMoreNews = (item) => { ...@@ -225,14 +222,11 @@ const handleToMoreNews = (item) => {
top: 29px; top: 29px;
.avatar-imageTwo { .avatar-imageTwo {
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
} }
.avatar { .avatar {
width: 42px; width: 42px;
height: 42px; height: 42px;
...@@ -259,7 +253,6 @@ const handleToMoreNews = (item) => { ...@@ -259,7 +253,6 @@ const handleToMoreNews = (item) => {
align-items: center; align-items: center;
margin-bottom: 5px; margin-bottom: 5px;
.name { .name {
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
...@@ -289,7 +282,6 @@ const handleToMoreNews = (item) => { ...@@ -289,7 +282,6 @@ const handleToMoreNews = (item) => {
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: justify; text-align: justify;
} }
.triangle { .triangle {
...@@ -307,7 +299,7 @@ const handleToMoreNews = (item) => { ...@@ -307,7 +299,7 @@ const handleToMoreNews = (item) => {
/* 内层:原有颜色的三角形,覆盖在外层上面,模拟描边效果 */ /* 内层:原有颜色的三角形,覆盖在外层上面,模拟描边效果 */
.triangle::after { .triangle::after {
content: ''; content: "";
position: absolute; position: absolute;
top: -8px; top: -8px;
/* 向上偏移1px,对齐中心 */ /* 向上偏移1px,对齐中心 */
...@@ -319,31 +311,12 @@ const handleToMoreNews = (item) => { ...@@ -319,31 +311,12 @@ const handleToMoreNews = (item) => {
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1); border-right: 8px solid rgba(246, 250, 255, 1);
} }
} }
} }
} }
} }
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
.message-bubble { .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 @@ ...@@ -36,7 +36,7 @@
<div class="name">{{ "管理员" }}</div> <div class="name">{{ "管理员" }}</div>
</div> </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-content">
<div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item)"> <div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item)">
<div class="icon"> <div class="icon">
...@@ -372,11 +372,16 @@ onMounted(() => { ...@@ -372,11 +372,16 @@ onMounted(() => {
top: 52px; top: 52px;
left: 0; left: 0;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px; border-radius: 10px;
backdrop-filter: blur(30px); backdrop-filter: blur(10px);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); -webkit-backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.8); 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 { .menu-content {
width: 562px; width: 562px;
......
...@@ -48,6 +48,8 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -48,6 +48,8 @@ const handleToNewsAnalysis = (item, index) => {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/common.scss';
.box3-item { .box3-item {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -90,12 +92,8 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -90,12 +92,8 @@ const handleToNewsAnalysis = (item, index) => {
.title { .title {
// width: 500px; // width: 500px;
height: 24px; @extend .text-title-3-bold;
color: rgba(59, 65, 75, 1); color: var(--text-primary-80-color);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -108,39 +106,15 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -108,39 +106,15 @@ const handleToNewsAnalysis = (item, index) => {
.time { .time {
text-align: right; text-align: right;
height: 22px; @extend .text-tip-2;
color: rgba(95, 101, 108, 1); color: var(--text-primary-65-color);
font-family: 'Source Han Sans CN';
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.right-footer { .right-footer {
height: 48px; @extend .text-compact;
/* 调整为2行的高度:24px × 2 = 48px */ color: var(--text-primary-65-color);
color: rgba(59, 65, 75, 1); @include common.text-ellipsis(2);
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;
/* 允许单词换行 */
} }
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="box3"> <div class="news-wrapper">
<div class="box3-header"> <div class="news-header">
<div class="box3-header-left"> <div class="news-header-left">
<div class="box3-header-icon"> <div class="news-header-icon">
<img src="./image1.png" alt="" /> <img src="./news-icon.svg" alt="" />
</div> </div>
<div class="box3-header-title">{{ "新闻资讯" }}</div> <div class="news-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div> </div>
</div> </div>
<div class="box3-main"> <div class="news-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)"> <div class="news-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
<div class="left"> <div class="left">
<img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" /> <img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
</div> </div>
<div class="right"> <div class="right">
<div class="right-top"> <div class="right-top">
<div class="title"><span class="text-inner">{{ news[props.title] }}</span></div> <div class="title">
<span class="text-inner">{{ news[props.title] }}</span>
</div>
<div class="time">{{ news[props.from] }}</div> <div class="time">{{ news[props.from] }}</div>
</div> </div>
<div class="right-footer">{{ news[props.content] }}</div> <div class="right-footer">{{ news[props.content] }}</div>
...@@ -29,7 +31,6 @@ ...@@ -29,7 +31,6 @@
<script setup> <script setup>
import DefaultIconNews from "@/assets/icons/default-icon-news.png"; import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({ const props = defineProps({
// 新闻列表数据 // 新闻列表数据
newsList: { newsList: {
type: Array, type: Array,
...@@ -38,7 +39,7 @@ const props = defineProps({ ...@@ -38,7 +39,7 @@ const props = defineProps({
img: { img: {
type: String, type: String,
default: 'img' default: "img"
}, },
title: { title: {
type: String, type: String,
...@@ -51,19 +52,18 @@ const props = defineProps({ ...@@ -51,19 +52,18 @@ const props = defineProps({
content: { content: {
type: String, type: String,
default: "content" default: "content"
}, }
}); });
const emit = defineEmits(['item-click', 'more-click']); const emit = defineEmits(["item-click", "more-click"]);
const handleToMoreNews = () => { const handleToMoreNews = () => {
emit('more-click') emit("more-click");
}; };
const handleToNewsAnalysis = (item, index) => { const handleToNewsAnalysis = (item, index) => {
emit('item-click', item, index) emit("item-click", item, index);
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box3 { .news-wrapper {
width: 792px !important; width: 792px !important;
height: 450px !important; height: 450px !important;
border-radius: 10px !important; border-radius: 10px !important;
...@@ -74,8 +74,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -74,8 +74,7 @@ const handleToNewsAnalysis = (item, index) => {
gap: 0 !important; gap: 0 !important;
overflow: hidden; overflow: hidden;
.news-header {
.box3-header {
height: 48px !important; height: 48px !important;
border-bottom: 1px solid rgba(234, 236, 238, 1) !important; border-bottom: 1px solid rgba(234, 236, 238, 1) !important;
margin: 0 !important; margin: 0 !important;
...@@ -85,10 +84,10 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -85,10 +84,10 @@ const handleToNewsAnalysis = (item, index) => {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
.box3-header-left { .news-header-left {
display: flex !important; display: flex !important;
.box3-header-icon { .news-header-icon {
margin-left: 19px !important; margin-left: 19px !important;
margin-top: 14px !important; margin-top: 14px !important;
width: 24px !important; width: 24px !important;
...@@ -100,12 +99,12 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -100,12 +99,12 @@ const handleToNewsAnalysis = (item, index) => {
} }
} }
.box3-header-title { .news-header-title {
margin-top: 11px !important; margin-top: 11px !important;
margin-left: 17px !important; margin-left: 17px !important;
height: 26px !important; height: 26px !important;
color: var(--color-main-active) !important; color: var(--color-main-active) !important;
font-family: 'Source Han Sans CN' !important; font-family: "Source Han Sans CN" !important;
font-size: 20px !important; font-size: 20px !important;
font-weight: 700 !important; font-weight: 700 !important;
line-height: 26px !important; line-height: 26px !important;
...@@ -119,7 +118,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -119,7 +118,7 @@ const handleToNewsAnalysis = (item, index) => {
top: 12px; top: 12px;
right: 27px; right: 27px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: 'Source Han Sans CN'; font-family: "Source Han Sans CN";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
...@@ -127,13 +126,13 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -127,13 +126,13 @@ const handleToNewsAnalysis = (item, index) => {
} }
} }
.box3-main { .news-main {
height: 401px; height: 401px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: 6px 0; padding: 6px 0;
.box3-item { .news-item {
display: flex; display: flex;
height: 78px; height: 78px;
width: 749px; width: 749px;
...@@ -142,14 +141,15 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -142,14 +141,15 @@ const handleToNewsAnalysis = (item, index) => {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover);
.right-top .title { .right-top .title {
text-decoration: underline;
color: rgb(5, 95, 194) !important; color: rgb(5, 95, 194) !important;
font-weight: 700; font-weight: 700;
} }
.right-top .text-inner { .right-top .text-inner {
border-bottom-color: rgb(5, 95, 194) !important; border-bottom-color: rgb(5, 95, 194) !important;
} }
} }
...@@ -178,7 +178,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -178,7 +178,7 @@ const handleToNewsAnalysis = (item, index) => {
width: 500px; width: 500px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN'; font-family: "Source Han Sans CN";
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
...@@ -188,7 +188,6 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -188,7 +188,6 @@ const handleToNewsAnalysis = (item, index) => {
.text-inner { .text-inner {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
} }
...@@ -198,7 +197,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -198,7 +197,7 @@ const handleToNewsAnalysis = (item, index) => {
height: 22px; height: 22px;
margin-top: 14px; margin-top: 14px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: 'Source Han Sans CN'; font-family: "Source Han Sans CN";
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
...@@ -212,7 +211,7 @@ const handleToNewsAnalysis = (item, index) => { ...@@ -212,7 +211,7 @@ const handleToNewsAnalysis = (item, index) => {
width: 657px; width: 657px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN'; font-family: "Source Han Sans CN";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
......
<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 = () => { ...@@ -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 { .item-right {
margin-left: 12px; margin-left: 12px;
height: 46px; height: 46px;
......
<template> <template>
<div class="buttonList" :style="{ gap: gap + 'px' }"> <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"> <slot name="item" :item="item">
{{ item.text }} {{ item.text }}
</slot> </slot>
...@@ -29,6 +36,10 @@ const props = defineProps({ ...@@ -29,6 +36,10 @@ const props = defineProps({
default: function () { default: function () {
return []; return [];
} }
},
disabled: {
type: Boolean,
default: false
} }
}); });
const emit = defineEmits(["click"]); const emit = defineEmits(["click"]);
...@@ -40,6 +51,9 @@ const isActive = item => { ...@@ -40,6 +51,9 @@ const isActive = item => {
} }
}; };
function setActiveIndex(item) { function setActiveIndex(item) {
if (props.disabled || item.disabled) {
return;
}
if (!props.multiple) { if (!props.multiple) {
if (props.activeId === item.id) { if (props.activeId === item.id) {
return; return;
...@@ -63,5 +77,12 @@ function setActiveIndex(item) { ...@@ -63,5 +77,12 @@ function setActiveIndex(item) {
gap: 8px; gap: 8px;
overflow-x: auto; overflow-x: auto;
flex-wrap: wrap; flex-wrap: wrap;
.button {
&.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
} }
</style> </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> <template>
<el-scrollbar> <el-scrollbar>
<div class="common-page"> <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-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div> <div class="text-title-1-show">样式变量</div>
<const-style></const-style> <ConstStyle />
<div class="text-title-1-show">文字样式</div> <div class="text-title-1-show">文字样式</div>
<text-style></text-style> <TextStyle />
</el-space> </el-space>
</div> </div>
</el-scrollbar> </el-scrollbar>
</template> </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> <template>
<table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;"> <table style="width: 1600px; border-collapse: collapse; border: 1px solid #ebeef5;">
<!-- 表头 --> <!-- 表头 -->
<thead> <thead>
<tr class="text-title-2"> <tr class="text-title-2">
...@@ -83,6 +83,21 @@ const tableData = ref([ ...@@ -83,6 +83,21 @@ const tableData = ref([
{ name: '2级提示文字-加粗', className: 'text-tip-2-bold' }, { name: '2级提示文字-加粗', className: 'text-tip-2-bold' },
{ name: '3级提示文字', className: 'text-tip-3' }, { 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> </script>
......
...@@ -8,6 +8,7 @@ import { withFallbackImage } from "./utils"; ...@@ -8,6 +8,7 @@ import { withFallbackImage } from "./utils";
import "./styles/scrollbar.css"; import "./styles/scrollbar.css";
import "./styles/elui.css"; import "./styles/elui.css";
import "./styles/main.css"; import "./styles/main.css";
import "./styles/common.scss"
import '@/assets/fonts/font.css' import '@/assets/fonts/font.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
......
//企业主页 //企业主页
const companyPages = () => import('@/views/companyPages/index.vue') const companyPages = () => import('@/views/companyPages/index.vue')
const companyPages2 = () => import('@/views/companyPages2/index.vue')
const companyPagesRoutes = [ const companyPagesRoutes = [
...@@ -14,6 +15,16 @@ const companyPagesRoutes = [ ...@@ -14,6 +15,16 @@ const companyPagesRoutes = [
dynamicTitle: true 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", path: "/viewRiskSignal",
name: "riskSignal", name: "viewRiskSignal",
component: RiskSignal, component: viewRiskSignal,
meta: { meta: {
title: "风险信号" title: "风险信号"
} }
} }
] ]
export default riskSignalRoutes export default viewRiskSignalRoutes
\ No newline at end of file \ No newline at end of file
/***背景作为卡片***/ /***背景作为卡片***/
.background-as-card { .background-as-card {
background-color: var(--color-primary-65); background-color: var(--bg-white-80);
border-radius: 10px; border-radius: 10px;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid var(--bg-white-100);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
} }
.flex-display{ .flex-display {
display: flex; 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{ .text-base {
color: var(--color-primary-90); color: var(--color-primary-80);
} }
//0级标题 //0级标题
.text-title-0{ .text-title-0 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--color-primary-90);
font-size: 32px; font-size: 32px;
} }
.text-title-0-bold{ .text-title-0-bold {
@extend .text-title-0; @extend .text-title-0;
font-weight: Bold; font-weight: Bold;
} }
.text-title-0-show{
.text-title-0-show {
@extend .text-title-0; @extend .text-title-0;
font-size: 48px; font-size: 48px;
font-family: "YouSheBiaoTiHei"; font-family: "YouSheBiaoTiHei";
} }
//1级标题 //1级标题
.text-title-1{ .text-title-1 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--color-primary-90);
font-size: 24px; font-size: 24px;
} }
.text-title-1-bold{ .text-title-1-bold {
@extend .text-title-1; @extend .text-title-1;
font-weight: Bold; font-weight: Bold;
} }
.text-title-1-show{ .text-title-1-show {
@extend .text-title-1; @extend .text-title-1;
font-size: 30px; font-size: 30px;
font-family: "YouSheBiaoTiHei"; font-family: "YouSheBiaoTiHei";
} }
//2级标题 //2级标题
.text-title-2{ .text-title-2 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--color-primary-90);
font-size: 20px; font-size: 20px;
line-height:26px; line-height: 26px;
} }
.text-title-2-bold{ .text-title-2-bold {
@extend .text-title-2; @extend .text-title-2;
font-weight: Bold; font-weight: Bold;
} }
.text-title-2-show{ .text-title-2-show {
@extend .text-title-2; @extend .text-title-2;
font-size: 24px; font-size: 24px;
font-family: "YouSheBiaoTiHei"; font-family: "YouSheBiaoTiHei";
...@@ -72,19 +99,19 @@ ...@@ -72,19 +99,19 @@
} }
//3级标题 //3级标题
.text-title-3{ .text-title-3 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--color-primary-90);
font-size: 18px; font-size: 18px;
line-height:24px; line-height: 24px;
} }
.text-title-3-bold{ .text-title-3-bold {
@extend .text-title-3; @extend .text-title-3;
font-weight: Bold; font-weight: Bold;
} }
.text-title-3-show{ .text-title-3-show {
@extend .text-title-3; @extend .text-title-3;
font-size: 20px; font-size: 20px;
font-family: "YouSheBiaoTiHei"; font-family: "YouSheBiaoTiHei";
...@@ -92,59 +119,115 @@ ...@@ -92,59 +119,115 @@
} }
//正文 //正文
.text-regular{ .text-regular {
@extend .text-base; @extend .text-base;
font-size: 16px; font-size: 16px;
line-height:30px; line-height: 30px;
} }
//正文-加粗 //正文-加粗
.text-bold{ .text-bold {
@extend .text-base; @extend .text-base;
font-weight: Bold; font-weight: Bold;
} }
//正文-紧凑 //正文-紧凑
.text-compact{ .text-compact {
@extend .text-base; @extend .text-base;
font-size: 16px; font-size: 16px;
line-height:24px; line-height: 24px;
} }
.text-compact-bold{ .text-compact-bold {
@extend .text-base; @extend .text-base;
font-size: 16px; font-size: 16px;
line-height:24px; line-height: 24px;
font-weight: Bold; font-weight: Bold;
} }
//1级提示文字 //1级提示文字
.text-tip-1{ .text-tip-1 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--color-primary-90);
font-size: 16px; font-size: 16px;
line-height:24px; line-height: 24px;
} }
.text-tip-1-bold{ .text-tip-1-bold {
@extend .text-tip-1; @extend .text-tip-1;
font-weight: Bold; font-weight: Bold;
} }
//2级提示文字 //2级提示文字
.text-tip-2{ .text-tip-2 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--color-primary-90);
font-size: 14px; font-size: 14px;
line-height:22px; line-height: 22px;
} }
.text-tip-2-bold{ .text-tip-2-bold {
@extend .text-tip-2; @extend .text-tip-2;
font-weight: Bold; font-weight: Bold;
} }
//3级提示文字 //3级提示文字
.text-tip-3{ .text-tip-3 {
@extend .text-base; @extend .text-base;
color: var(--color-primary-90); color: var(--color-primary-90);
font-size: 12px; 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"; @use "common";
/***通用页面***/ /***通用页面***/
.common-page { .common-page {
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
margin: 16px auto; margin: 16px auto;
width: 1600px; width: 1600px;
align-items: center; align-items: center;
......
@use "common"; @use "common";
/***没有nav下划线***/ /***通用描述组件***/
.common-descriptions .el-descriptions__label{ .common-descriptions {
.el-descriptions__label {
@extend .text-tip-1-bold; @extend .text-tip-1-bold;
}
.common-descriptions .el-descriptions__content{
@extend .text-tip-1;
color: var(--text-primary-80-color); 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 @@ ...@@ -4,8 +4,6 @@
--font-family-base: "Source Han Sans CN"; --font-family-base: "Source Han Sans CN";
--font-size-base: 16px; --font-size-base: 16px;
--color-bg-hover: #f6faff; --color-bg-hover: #f6faff;
/* 普通按钮颜色 */ /* 普通按钮颜色 */
...@@ -29,6 +27,7 @@ ...@@ -29,6 +27,7 @@
--bg-black-5: #EAECEE; --bg-black-5: #EAECEE;
--bg-black-2: #F7F8F9; --bg-black-2: #F7F8F9;
--bg-white-100: #FFFFFF; --bg-white-100: #FFFFFF;
--bg-white-80: rgba(255, 255, 255, 0.8);
--bg-white-65: rgba(255, 255, 255, 0.65); --bg-white-65: rgba(255, 255, 255, 0.65);
--bg-white-50: rgba(255, 255, 255, 0.5); --bg-white-50: rgba(255, 255, 255, 0.5);
--bg-white-35: rgba(255, 255, 255, 0.35); --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"; @use "common";
/***没有nav下划线***/ /***没有nav下划线***/
.tabs-nav-no-wrap .el-tabs__nav-wrap::after{ .tabs-nav-no-wrap {
.el-tabs__nav-wrap::after {
height: 0px !important; height: 0px !important;
width: 0px !important; width: 0px !important;
}
} }
/***nav as card***/ /***nav as card***/
.tabs-header-as-card .el-tabs__header:not(.disinheritance .el-tabs__header) { .tabs-header-as-card {
.el-tabs__header:not(.disinheritance .el-tabs__header) {
@extend .background-as-card; @extend .background-as-card;
padding: 2px; padding: 2px;
}
} }
/***作为按钮样式的tabs-bar***/ /***作为按钮样式的tabs-bar***/
/*选中无下划线*/ /*选中无下划线*/
.tabs-bar-as-btn .el-tabs__active-bar:not(.disinheritance .el-tabs__active-bar) { .tabs-bar-as-btn {
.el-tabs__active-bar:not(.disinheritance .el-tabs__active-bar) {
height: 0px; height: 0px;
} }
/*定义字体*/ /*定义字体*/
.tabs-bar-as-btn .el-tabs__item:not(.disinheritance .el-tabs__item) { .el-tabs__item:not(.disinheritance .el-tabs__item) {
font-size: 20px; font-size: 20px;
font-family: "Source Han Sans CN-Regular"; font-family: "Source Han Sans CN-Regular";
font-weight: Regular; font-weight: Regular;
line-height: 26px; line-height: 26px;
height: 50px; 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-size: 24px;
font-family: "Source Han Sans CN-Bold"; font-family: "Source Han Sans CN-Bold";
...@@ -40,12 +45,30 @@ ...@@ -40,12 +45,30 @@
border-color: var(--color-primary-35); border-color: var(--color-primary-35);
border-radius: 10px; border-radius: 10px;
background-color: var(--color-primary-2); background-color: var(--color-primary-2);
}
} }
/***tabs-bar左边悬浮***/ /***tabs-bar左边悬浮***/
.left-float-nav-tabs .el-tabs__item{ .left-float-nav-tabs {
position:relative;
} // .el-tabs__header {
.left-float-nav-tabs .el-tabs__item.is-active{
background-color: aquamarine; 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 @@ ...@@ -26,7 +26,6 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
// import HeaderMenu from "@/components/headerMenu.vue";
import RiskToday from './component/riskToday/index.vue' import RiskToday from './component/riskToday/index.vue'
import ScienceNews from './component/scienceNews/index.vue' import ScienceNews from './component/scienceNews/index.vue'
const input = ref('') const input = ref('')
......
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
</div> </div>
</div> </div>
<div class="news-content"> <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="news-item-title">
<div class="tag-container"> <div class="tag-container">
<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)"> <!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
...@@ -109,6 +109,25 @@ ...@@ -109,6 +109,25 @@
</el-tooltip> </el-tooltip>
</div> </div>
</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>
<div class="empty-section"> <div class="empty-section">
<div class="bottom-item"> <div class="bottom-item">
...@@ -296,6 +315,7 @@ import { ...@@ -296,6 +315,7 @@ import {
} from "@/api/zmOverview/allDomains"; } from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js"; import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
const router = useRouter(); const router = useRouter();
...@@ -377,6 +397,36 @@ const timelineContainerWidth = 1700; ...@@ -377,6 +397,36 @@ const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态 // 美政府部门打压遏制最新动态
const newsList = ref([]); 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 () => { const getUSGovernmentLatestDynamicData = async () => {
try { try {
...@@ -1359,11 +1409,115 @@ watch(activeDate, () => { ...@@ -1359,11 +1409,115 @@ watch(activeDate, () => {
.news-section { .news-section {
width: 792px; width: 792px;
height: 700px; height: 700px;
display: flex;
flex-direction: column;
justify-content: space-between;
.news-title { .news-title {
padding: 8px; 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 { .tag-container {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1753,11 +1907,12 @@ watch(activeDate, () => { ...@@ -1753,11 +1907,12 @@ watch(activeDate, () => {
.news-content { .news-content {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
margin-bottom: auto;
} }
.news-item { .news-item {
/* 全政府-动态 (四全-最新动态) */ /* 全政府-动态 (四全-最新动态) */
width: 737px; width: 737px;
height: 124px; height: 116px;
margin: 0 28px; margin: 0 28px;
/* 自动布局 */ /* 自动布局 */
display: flex; display: flex;
...@@ -1825,7 +1980,7 @@ watch(activeDate, () => { ...@@ -1825,7 +1980,7 @@ watch(activeDate, () => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
margin-top: 8px; // margin-top: 8px;
/* 单行省略 */ /* 单行省略 */
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
<div class="content-wrapper"> <div class="content-wrapper">
<div class="btn-wrapper" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)"> <div class="btn-wrapper" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
<div class="cards-mask"> <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 class="btn-item-outer" v-for="(item, indexx) in buttonsData" :key="indexx">
<div <div
v-for="(value, index) in item" v-for="(value, index) in item"
...@@ -74,13 +75,18 @@ ...@@ -74,13 +75,18 @@
<span>美对华领域打压遏制最新动态</span> <span>美对华领域打压遏制最新动态</span>
</div> </div>
<div class="title-right-select"> <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-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="news-content"> <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="news-item-title">
<div class="tag-container"> <div class="tag-container">
<!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)"> <!-- <div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
...@@ -109,16 +115,31 @@ ...@@ -109,16 +115,31 @@
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
<div class="news-pagination"> <!-- <div class="news-pagination">
<el-pagination <div class="pagination-wrapper">
layout="prev, pager, next" <el-button
:total="newsList.length" class="pagination-btn"
:page-size="newsPageSize" type="primary"
v-model:current-page="newsCurrentPage" @click="handlePrevPage"
size="small" :disabled="newsCurrentPage === 1"
@current-change="handleNewsPageChange" :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> -->
<simple-pagination
v-model:current-page="newsCurrentPage"
:page-size="pageSize"
:total="allNewsList.length"
@page-change="handleNewsPageChange"
/>
</div> </div>
<div class="empty-section"> <div class="empty-section">
<div class="bottom-item"> <div class="bottom-item">
...@@ -200,7 +221,7 @@ ...@@ -200,7 +221,7 @@
<div class="bottom-item"> <div class="bottom-item">
<div class="bottom-item-title"> <div class="bottom-item-title">
<img :src="icon4" alt="" /> <img :src="icon4" alt="" />
<span>美对领域打压遏制时间线</span> <span>美对领域打压遏制时间线</span>
</div> </div>
<el-select <el-select
v-model="selectedFieldTimeline" v-model="selectedFieldTimeline"
...@@ -306,6 +327,8 @@ import { ...@@ -306,6 +327,8 @@ import {
} from "@/api/zmOverview/allDomains"; } from "@/api/zmOverview/allDomains";
import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js"; import { getUSGovernmentLatestDynamic, getDepartmentList, getSanTypeList } from "@/api/allGovernment.js";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import SimplePagination from "@/components/SimplePagination.vue";
const router = useRouter(); const router = useRouter();
...@@ -386,27 +409,64 @@ const selectedFieldTimeline = ref(""); ...@@ -386,27 +409,64 @@ const selectedFieldTimeline = ref("");
const timelineContainerWidth = 1700; const timelineContainerWidth = 1700;
// 美政府部门打压遏制最新动态 // 美政府部门打压遏制最新动态
const allNewsList = ref([]);
const newsList = ref([]); const newsList = ref([]);
const newsCurrentPage = ref(1); 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 paginatedNewsList = computed(() => {
const start = (newsCurrentPage.value - 1) * newsPageSize.value; const start = (newsCurrentPage.value - 1) * pageSize.value;
const end = start + newsPageSize.value; const end = start + pageSize.value;
return newsList.value.slice(start, end); 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 => { const handleNewsPageChange = page => {
newsCurrentPage.value = page; newsCurrentPage.value = page;
}; };
const handlePrevPage = () => {
if (newsCurrentPage.value > 1) {
newsCurrentPage.value--;
}
};
const handleNextPage = () => {
if (newsCurrentPage.value < totalPages.value) {
newsCurrentPage.value++;
}
};
const getUSGovernmentLatestDynamicData = async () => { const getUSGovernmentLatestDynamicData = async () => {
try { 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) { if (res.code === 200 && res.data) {
// 将接口数据转换为 newsList 需要的格式 // 将接口数据转换为 newsList 需要的格式
newsList.value = res.data.map(item => { allNewsList.value = res.data.content.map(item => {
const dateObj = new Date(item.time); const dateObj = new Date(item.time);
const formattedDate = `${dateObj.getFullYear()}${dateObj.getMonth() + 1}${dateObj.getDate()}日`; const formattedDate = `${dateObj.getFullYear()}${dateObj.getMonth() + 1}${dateObj.getDate()}日`;
...@@ -419,6 +479,7 @@ const getUSGovernmentLatestDynamicData = async () => { ...@@ -419,6 +479,7 @@ const getUSGovernmentLatestDynamicData = async () => {
content: item.content || item.title // 如果 content 为空,使用 title 填充 content: item.content || item.title // 如果 content 为空,使用 title 填充
}; };
}); });
updateNewsListByPage();
} }
} catch (error) { } catch (error) {
console.error("获取美政府部门打压遏制最新动态失败:", error); console.error("获取美政府部门打压遏制最新动态失败:", error);
...@@ -1390,59 +1451,103 @@ watch(activeDate, () => { ...@@ -1390,59 +1451,103 @@ watch(activeDate, () => {
padding: 8px; 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 { .news-pagination {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 16px 0; padding: 16px 0;
:deep(.el-pagination) { .pagination-wrapper {
&.is-background .el-pager li { display: flex;
background-color: #fff; align-items: center;
border: 1px solid #dcdfe6; gap: 12px;
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, .pagination-btn {
.btn-next { padding: 6px;
background-color: rgba(231, 243, 255, 1); background-color: rgba(231, 243, 255, 1);
// border: 1px solid #dcdfe6; // border: 1px solid #dcdfe6;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
// min-width: 32px; color: #606266;
// height: 32px; cursor: pointer;
line-height: 32px; transition: all 0.3s;
margin-right: 4px;
.el-icon {
font-size: 16px;
color: #055fc2;
font-weight: 800;
}
&:hover:not(.is-disabled) { &:hover:not(:disabled) {
background-color: #f5f7fa; background-color: #f5f7fa;
// border-color: #c0c4cc;
} }
&.is-disabled { &:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; 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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论