Skip to content

R
risk-monitor
提交 90ab7147 authored 作者: 李顺's avatar 李顺
浏览文件
操作

[update]:完成部分规则限制接口对接以及页面优化

上级 9f6eba98 4ab528d0
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 2087 行增加 和 39 行删除
package.json
浏览文件 @ 90ab7147
{ {
"name": "think-tank", "name": "zm-system",
"version": "1.0.0", "version": "1.0.0",
"description": "Vue3 + Element Plus + Vue Router 项目", "description": "Vue3 + Element Plus + Vue Router 项目",
"main": "index.js", "main": "index.js",
......
src/api/exportControlV2.0.js
浏览文件 @ 90ab7147
...@@ -278,6 +278,7 @@ export function getSingleSanctionBackground(data) { ...@@ -278,6 +278,7 @@ export function getSingleSanctionBackground(data) {
* @param {Boolean} [data.isOnlyCn=true] - 是否仅查询中国数据 * @param {Boolean} [data.isOnlyCn=true] - 是否仅查询中国数据
* @param {String} [data.domainId] - 科技领域ID * @param {String} [data.domainId] - 科技领域ID
* @param {String} [data.searchText] - 搜索文本 * @param {String} [data.searchText] - 搜索文本
* @param {String} [data.searchType] - 搜索类型
* @header token * @header token
*/ */
export function getSingleSanctionOverviewList(data) { export function getSingleSanctionOverviewList(data) {
......
src/api/marketAccessRestrictions/index.js
浏览文件 @ 90ab7147
...@@ -73,9 +73,29 @@ export function getStatAreaCompanyList() { ...@@ -73,9 +73,29 @@ export function getStatAreaCompanyList() {
}) })
} }
// 受调查国家分布
/**
* @param {year, sortCode}
*/
export function getSearchCountry(params) {
return request({
method: 'GET',
url: `/api/marketsearchDetails/getSearchCountry`,
params
})
}
// 调查结果分布
/**
* @param {searchId, sortCode}
*/
export function getSearchResult(params) {
return request({
method: 'GET',
url: `/api/marketsearchDetails/searchResult`,
params
})
}
// 资源库 // 资源库
// 左侧行业领域列表 // 左侧行业领域列表
...@@ -86,6 +106,23 @@ export function getHylyList() { ...@@ -86,6 +106,23 @@ export function getHylyList() {
}) })
} }
// 左侧发布机构
export function getSearchAllOrg(params) {
return request({
method: 'GET',
url: `/api/marketsearchDetails/getSearchAllOrg`,
params
})
}
// 左侧受调查国家/地区
export function getSearchAllCountry() {
return request({
method: 'GET',
url: `/api/marketsearchDetails/getSearchAllCountry`,
})
}
// 获取调查列表接口 // 获取调查列表接口
/** /**
* @param {currentPage, pageSize, sortCode, publishYear, Area, sortField, sortOrder} * @param {currentPage, pageSize, sortCode, publishYear, Area, sortField, sortOrder}
......
src/api/ruleRestriction/ruleRestriction.js 0 → 100644
浏览文件 @ 90ab7147
import request from "@/api/request.js";
// 规则限制-首页统计接口
export function getRuleRestrictionStatistics() {
return request({
method: 'GET',
url: `/api/ruleLimitInfo/statCount`
})
}
// 规则限制-查询最新动态接口
export function getRuleRestrictionLatest(params) {
return request({
method: 'GET',
url: `/api/ruleLimitInfo/getLatestUpdates`,
params
})
}
// 规则限制-获取风险信号接口
/**
* @param {moduleId} 模块ID
* @header token
*/
export function getRuleRestrictionRiskSignal(params) {
return request({
method: 'GET',
url: `/api/commonFeature/riskSignal/${params.moduleId}`
})
}
// 规则限制-获取新闻资讯接口
/**
* @param {moduleId} 模块ID
* @header token
*/
export function getRuleRestrictionNews(params) {
return request({
method: 'GET',
url: `/api/commonFeature/news/${params.moduleId}`
})
}
// 规则限制-获取社交媒体接口
/**
* @param {moduleId} 模块ID
* @header token
*/
export function getRuleRestrictionSocialMedia(params) {
return request({
method: 'GET',
url: `/api/commonFeature/remarks/${params.moduleId}`
})
}
\ No newline at end of file
src/api/technologyFigures/technologyFigures.js 0 → 100644
浏览文件 @ 90ab7147
import request from "@/api/request.js";
//获取人物新闻动态
export function getnewsDynamics(params) {
return request({
method: 'GET',
url: `/api/personRemarksOverview/newsDynamics`,
params
})
}
//获取主要人物涉华观点统计
/**
* @param {personTypeId}
* @param {year}
* @header token
*/
export function getMainCharactersView(params) {
return request({
method: 'GET',
url: `/api/personRemarksOverview/option/count/${params.personTypeId}/${params.year}`,
params,
})
}
//获取科技人物观点词云
/**
* @param {year}
* @header token
* @areaId
*/
export function getCharacterOpinionWordCloud(params) {
return request({
method: 'GET',
url: `/api/personRemarksOverview/option/${params.year}`,
params,
})
}
//获取人物观点涉及领域变化趋势
/**
* @param {startTime}
* @header token
*/
export function getOptionAreaChange(params) {
return request({
method: 'GET',
url: `/api/personRemarksOverview/optionAreaChange/${params.startTime}`,
params,
})
}
//获取重要人物言论及立场
/**
* @param {industryId}
* @header token
*/
export function getPersonRelation(params) {
return request({
method: 'GET',
url: `/api/personRemarksOverview/personRelation`,
params,
})
}
//获取人物动向
/**
* @param {startTime}
* @header token
*/
export function getCharacterTrends(params) {
return request({
method: 'GET',
url: `/api/personRemarksOverview/personRelation/${params.startTime}`,
params,
})
}
// 获取人物资源库
/**
* @param {personTypeId,currentPage,pageSize}
* @header token
*/
export function getPersonResource(params) {
return request({
method: 'GET',
url: `/api/personRemarksOverview/personResource`,
params,
})
}
//获取科技人物类型
export function getPersonTypeCount(params) {
return request({
method: 'GET',
url: `/api/personRemarksOverview/personTypeCount`,
params
})
}
// 获取风险信号
/**
* @param {moduleId}
*/
export function getBillRiskSignal(params) {
return request({
method: 'GET',
url: `/api/commonFeature/riskSignal/${params.moduleId}`,
})
}
//获取人物类别
export function getPersonType(params) {
return request({
method: 'GET',
url: `/api/commonDict/personType`,
params
})
}
// 获取人物全局信息 通过personId 获取personType
export function getPersonSummaryInfo(params) {
return request({
method: 'GET',
url: `/api/personHomepage/summaryInfo/${params.personId}`,
})
}
// 获取人物全局信息 通过personId 获取personType
export function getareaType(params) {
return request({
method: 'GET',
url: `/api/commonDict/areaType`,
params
})
}
\ No newline at end of file
src/components/dialog.vue 0 → 100644
浏览文件 @ 90ab7147
<template>
<div class="message-bubble">
<div class="avatar-container" @click="handleClick">
<img :src="avatar || avatarUser" :alt="name" class="avatar" />
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ name }}</span>
<span class="meta">{{ time }} · {{ source }}</span>
</div>
<div class="bubble-content" @click="handleInfoClick">
{{ content }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
</template>
<script setup>
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
defineProps({
avatar: {
type: String,
default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
},
name: {
type: String,
default: "唐纳德·特朗普"
},
time: {
type: String,
default: "15:23"
},
source: {
type: String,
default: "发布于真实社交"
},
content: {
type: String,
default:
"埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
}
});
const handleClick = () => {
emit("click");
};
const handleInfoClick = () => {
emit("info-click");
};
</script>
<style scoped>
.message-bubble {
display: flex;
max-width: 720px;
margin-top: 5px;
margin-bottom: 16px;
}
.avatar-container {
flex-shrink: 0;
flex-grow: 0;
flex: 0;
margin-right: 12px;
cursor: pointer;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.bubble-container {
flex: 1;
position: relative;
}
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 10px 16px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
font-family: "微软雅黑";
}
.name {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.meta {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: right;
}
.bubble-content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
font-family: "微软雅黑";
}
.triangle {
position: absolute;
left: -8px;
top: 15px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/components/headerInfo.vue
浏览文件 @ 90ab7147
<template> <template>
<div class="info-wrapper"> <div class="info-wrapper">
<div class="header-item">国家科技安全</div> <!-- <div class="header-item">国家科技安全</div>
<div class="header-item">></div> <div class="header-item">></div> -->
<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div> <div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
<div class="header-item">></div> <div class="header-item">></div>
<div class="header-item">{{ curTitleName }}</div> <div class="header-item">{{ curTitleName }}</div>
......
src/components/headerMenu.vue
浏览文件 @ 90ab7147
...@@ -56,9 +56,9 @@ ...@@ -56,9 +56,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <!-- <div class="right">
<div class="right-header"> <div class="right-header">
<div class="title">{{ "风险检测" }}</div> <div class="title">{{ "风险监测" }}</div>
<div class="icon"> <div class="icon">
<img src="@/assets/icons/more.png" alt="" /> <img src="@/assets/icons/more.png" alt="" />
</div> </div>
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
<div class="text">{{ item.name }}</div> <div class="text">{{ item.name }}</div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
...@@ -101,7 +101,7 @@ const leftList = ref([ ...@@ -101,7 +101,7 @@ const leftList = ref([
path: "/billHome" path: "/billHome"
}, },
{ {
name: "政令", name: "科技政令",
path: "/decree" path: "/decree"
}, },
{ {
...@@ -111,6 +111,10 @@ const leftList = ref([ ...@@ -111,6 +111,10 @@ const leftList = ref([
{ {
name: "出口管制", name: "出口管制",
path: "/exportControl" path: "/exportControl"
},
{
name: "科研合作限制",
path: "/cooperationRestrictions"
}, },
{ {
name: "投融资限制", name: "投融资限制",
...@@ -120,24 +124,22 @@ const leftList = ref([ ...@@ -120,24 +124,22 @@ const leftList = ref([
name: "市场准入限制", name: "市场准入限制",
path: "/marketAccessRestrictions" path: "/marketAccessRestrictions"
}, },
{
name: "合作限制",
path: "/cooperationRestrictions"
},
{ {
name: "规则限制", name: "规则限制",
path: "/ruleRestrictions" path: "/ruleRestrictions"
}, },
{ {
name: "美国主要创新主体",
path: "/innovationSubject"
},
{
name: "美国科技人物观点", name: "美国科技人物观点",
path: "/technologyFigures" path: "/technologyFigures"
}, },
{ {
name: "美国科研资助体系", name: "美国主要创新主体动向",
path: "/innovationSubject"
},
{
name: "美国科研资助体系分析",
path: "/scientificFunding" path: "/scientificFunding"
} }
]); ]);
...@@ -244,7 +246,8 @@ const rightList = ref([ ...@@ -244,7 +246,8 @@ const rightList = ref([
left: 0; left: 0;
width: 100%; width: 100%;
height: 299px; height: 299px;
background: #fff; background: rgb(249, 249, 249);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.3);
display: flex; display: flex;
.left { .left {
margin-top: 35px; margin-top: 35px;
...@@ -289,6 +292,7 @@ const rightList = ref([ ...@@ -289,6 +292,7 @@ const rightList = ref([
width: 256px; width: 256px;
height: 36px; height: 36px;
align-items: center; align-items: center;
border-radius: 4px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
...@@ -361,6 +365,7 @@ const rightList = ref([ ...@@ -361,6 +365,7 @@ const rightList = ref([
width: 256px; width: 256px;
height: 36px; height: 36px;
align-items: center; align-items: center;
border-radius: 4px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
......
src/main.js
浏览文件 @ 90ab7147
...@@ -10,7 +10,7 @@ import "./styles/scrollbar.css"; ...@@ -10,7 +10,7 @@ import "./styles/scrollbar.css";
import "./styles/elui.css"; import "./styles/elui.css";
import "./styles/main.css"; import "./styles/main.css";
import '@/assets/fonts/font.css' import '@/assets/fonts/font.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const app = createApp(App); const app = createApp(App);
// 注册所有图标 // 注册所有图标
...@@ -21,6 +21,8 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) { ...@@ -21,6 +21,8 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
// 注册全局函数 // 注册全局函数
app.config.globalProperties.$withFallbackImage = withFallbackImage; app.config.globalProperties.$withFallbackImage = withFallbackImage;
app.use(router); app.use(router);
app.use(ElementPlus); app.use(ElementPlus, {
locale: zhCn,
})
app.component("CardTitle", CardTitle); app.component("CardTitle", CardTitle);
app.mount("#app"); app.mount("#app");
src/router/modules/ZMGame.js 0 → 100644
浏览文件 @ 90ab7147
//ZM博弈概览
import ZMGame from "@/views/ZMGame/index.vue";
const ZMGameRoutes = [
//创新主体
{
path: "/ZMGame",
name: "ZMGame",
component: ZMGame,
meta: {
title: "ZM博弈概览"
}
}
]
export default ZMGameRoutes
\ No newline at end of file
src/router/modules/ZMOverView.js 0 → 100644
浏览文件 @ 90ab7147
//ZM博弈概览
import ZMOverview from "@/views/ZMOverView/index.vue";
const ZMOverviewRoutes = [
//创新主体
{
path: "/ZMOverView",
name: "ZMOverView",
component: ZMOverview,
meta: {
title: "ZM博弈概览"
}
}
]
export default ZMOverviewRoutes
src/views/ZMGame/component/riskToday/WaveBall.vue 0 → 100644
浏览文件 @ 90ab7147
<template>
<div ref="ballDom" class="ball-box" :style="{ width: '128px', height: '128px' }" />
</template>
<script setup>
/**
* Vue3 水波进度球
* 用法：<WaterBall :percent="67" :size="200" />
*/
import { ref, watch, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
/* props */
const props = defineProps({
percent: { type: Number, default: 60 }, // 0~100
size: { type: Number, default: 200 }, // 画布宽高
data: { type: Object, default: {} },
color: { type: Array, default: [] },
})
/* dom */
const ballDom = ref(null)
let instance = null
// const color = ref([0, 0, 0])
// const makeColors = () => {
// props.color[0] = Math.floor(Math.random() * 360) // 随机色相
// props.color[1] = 70 // 固定饱和度
// props.color[2] = 50 // 固定亮度
// }
/* 颜色映射 */
/* 配置项 */
const makeOption = () => {
const p = Math.min(100, Math.max(0, props.percent)) / 100
console.log(props.color, 'colorcolorcolor')
return {
series: [{
type: 'liquidFill',
radius: '90%',
data: [
{ value: p, direction: 'right' },
{ value: p, direction: 'left' } // 两层波浪反向
],
color: [` ${props.color[1]}`, ` ${props.color[0]}`],
waveAnimation: true,
animationEasingUpdate: 'cubicOut',
outline: {
show: true,
borderDistance: 2, // 第一层边框
itemStyle: {
shadowBlur: 0, // 同样设为 0
borderWidth: 1,
borderColor: `${props.color[0]}`,
shadowColor: 'transparent'
}
},
// 1. 关掉波浪的阴影
itemStyle: {
shadowBlur: 0, // 关键：阴影范围设为 0
shadowColor: 'transparent'
},
backgroundStyle: {
color: `${props.color[2]}`,
borderWidth: 1,
borderColor: `${props.color[1]}`, // 中间区域保持透明
shadowBlur: 0
},
label: {
show: true,
formatter: `${props.data.change}` + `${props.data.unit}`,
fontSize: 24,
color: `${props.color[3]}`,
insideColor: `${props.color[3]}`,
}
}]
}
}
/* 初始化 */
const init = () => {
if (instance) instance.dispose()
instance = echarts.init(ballDom.value)
instance.setOption(makeOption())
}
/* 自动更新 */
watch(() => props.percent, () => {
instance?.setOption(makeOption())
})
onMounted(init)
</script>
<style scoped>
.ball-box {
margin: 0 auto;
}
</style>
\ No newline at end of file
src/views/ZMGame/component/riskToday/index.vue 0 → 100644
浏览文件 @ 90ab7147
差异被折叠。
src/views/ZMGame/component/scienceNews/index.vue 0 → 100644
浏览文件 @ 90ab7147
<!--科技要闻-->
<template>
<div class="content-wrapper">
<img :src="titlebg" alt="" class="title-bg" />
<img :src="background" alt="" class="background" />
<!-- 搜索框 -->
<div class="search-wrapper">
<input type="text" v-model="searchText" placeholder="搜索新闻" class="search-input" />
<button class="search-btn">
<img :src="search" alt="" />
搜索
</button>
</div>
<!-- 模块选择 -->
<div class="module-wrapper">
<div
v-for="(item, index) in moduleList"
:key="index"
class="module-item"
:class="{ active: activeModule === item.name }"
@click="activeModule = item.name"
>
<span>{{ item.name }}</span>
<img :src="activeModule === item.name ? rightActive : right" alt="" />
</div>
<div class="adjustment-btn">
<img :src="adjustment" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="main-content">
<div class="left">
<div class="title">
<div class="title-left">
<img :src="icon1" alt="" class="icon1" />
<span>今日要闻</span>
<img :src="right" alt="" class="right-icon" />
</div>
<div class="title-right">
<img :src="refresh" alt="" class="refresh-icon" />
<span>换一批</span>
</div>
</div>
</div>
<div class="right"></div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import search from "./assets/Search.png";
import right from "./assets/right.png";
import rightActive from "./assets/right_active.png";
import adjustment from "./assets/adjustment.png";
import titlebg from "./assets/titlebg.png";
import icon1 from "./assets/icon1.png";
import icon2 from "./assets/icon2.png";
import refresh from "./assets/refresh.png";
import background from "../../../../assets/images/background.png";
const searchText = ref("");
// 模块选择数据
const activeModule = ref("新闻纵览");
const moduleList = ref([
{ name: "新闻纵览" },
{ name: "科技法案" },
{ name: "科技政令" },
{ name: "科技智库" },
{ name: "出口管制" },
{ name: "投融资限制" },
{ name: "市场准入限制" },
{ name: "合作限制" },
{ name: "规则限制" },
{ name: "创新主体" },
{ name: "科技人物" },
{ name: "资助体系" }
]);
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1600px;
height: 908px;
margin-bottom: 50px;
border-radius: 10px;
border: 1px solid #fff;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
padding-top: 48px;
position: relative;
background: linear-gradient(180deg, #e7f3ff 0%, #ffffff 20%);
.title-bg {
width: 100%;
height: 56px;
position: absolute;
top: 0;
left: 0;
}
.background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
pointer-events: none;
}
// 搜索框
.search-wrapper {
position: relative;
z-index: 2;
width: 800px;
height: 48px;
margin: 0 auto;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 3px;
margin-bottom: 38px;
.search-input {
width: 650px;
height: 48px;
border: none;
outline: none;
background-color: transparent;
padding-left: 16px;
font-size: 16px;
color: rgb(0, 0, 0);
::placeholder {
color: rgb(132, 136, 142);
font-size: 16px;
font-weight: 400;
line-height: 24px;
font-family: Microsoft YaHei;
}
}
.search-btn {
width: 120px;
height: 42px;
border: none;
outline: none;
background-color: rgb(5, 95, 194);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 22px;
height: 22px;
margin-right: 8px;
}
font-size: 18px;
color: rgb(255, 255, 255);
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
// 模块选择
.module-wrapper {
position: relative;
z-index: 2;
width: 1262px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 0 19px;
justify-content: center;
margin-bottom: 26px;
.module-item {
height: 40px;
padding: 0 20px;
background: rgba(255, 255, 255, 1);
border-radius: 32px;
border: 1px solid #e5e6eb;
display: flex;
align-items: center;
cursor: pointer;
span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgb(95, 101, 108);
margin-right: 10px;
white-space: nowrap;
}
img {
width: 6px;
height: 12px;
}
&.active {
background: rgba(231, 243, 255, 1);
border: 1px solid rgba(174, 214, 255, 1);
span {
color: rgb(5, 95, 194);
}
}
}
.adjustment-btn {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
border: 1px solid #e5e6eb;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02);
img {
width: 16px;
height: 16px;
}
}
}
// 主要内容
.main-content {
position: relative;
z-index: 2;
width: 100%;
height: 656px;
margin: 0 auto;
padding: 0 22px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: space-between;
gap: 21px;
.left {
width: 50%;
height: 100%;
padding: 0 24px;
}
.right {
width: 50%;
height: 100%;
padding: 0 24px;
}
}
// 通用标题
.title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid rgb(234, 236, 238);
.title-left {
display: flex;
align-items: center;
justify-content: center;
.icon1 {
width: 20px;
height: 20px;
margin-right: 10px;
}
span {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 700;
color: rgb(5, 95, 194);
line-height: 24px;
margin-right: 10px;
}
.right-icon {
width: 6px;
height: 12px;
}
}
.title-right {
padding: 2px 12px;
border-radius: 20px;
background-color: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 12px;
height: 12px;
margin-right: 9px;
}
span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgb(5, 95, 194);
line-height: 24px;
}
}
}
}
</style>
src/views/ZMGame/index.vue 0 → 100644
浏览文件 @ 90ab7147
<!--ZM博弈概览页-->
<template>
<div class="home-wrapper">
<div class="home-header">
<div class="header-left">
<HeaderMenu></HeaderMenu>
</div>
<div class="header-right">
<input :value="input">
</div>
</div>
<div class="content-box">
<div class="btn-box">
<div v-for="item in riskItems" :key="item" :class="aciveBtn === item ? 'btn-select' : 'btn'"
@click="aciveBtn = item">
<img src="./assets/icons/btn-select-icon.png" v-if="aciveBtn === item" class="btn-icon" />{{
item }}
</div>
</div>
<RiskToday v-if="aciveBtn === '最新风险动态'" />
<ScienceNews v-if="aciveBtn === '最新科技要闻'" />
</div>
</div>
</template>
<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('')
const riskItems = ref([
"最新风险动态", "最新科技要闻", "美对我打压遏制TS", "中美科技博弈概况"
]);
const aciveBtn = ref('最新风险动态')
</script>
<style lang="scss" scoped>
.home-wrapper {
width: 100%;
height: 100%;
position: relative;
overflow-y: auto;
.home-header {
height: 64px;
background: url("./assets/images/header-bg.png");
box-sizing: border-box;
padding: 0 160px;
display: flex;
justify-content: space-between;
}
.content-box {
width: 100%;
height: 100%;
padding: 16px 160px;
.btn-box {
/* 概览页导航 */
width: 1598px;
height: 55px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 8;
padding: 4px 5px 4px 5px;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
font-family: YouSheBiaoTiHei;
color: rgba(59, 65, 75, 1);
font-family: YouSheBiaoTiHei;
font-style: Regular;
font-size: 24px;
font-weight: 400;
line-height: 31px;
letter-spacing: 0px;
text-align: center;
.btn {
/* 容器 1464 */
width: 391px;
height: 47px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 8px 66px 8px 66px;
}
.btn-select {
/* 容器 1462 */
width: 391px;
height: 47px;
padding: 8px 66px 8px 66px;
box-sizing: border-box;
border: 1px solid rgba(174, 214, 255, 1);
border-radius: 10px;
background: rgba(246, 250, 255, 1);
}
.btn-icon {
/* 容器 1554 */
width: 18px;
height: 18px;
margin-right: 10px;
}
}
}
}
</style>
\ No newline at end of file
src/views/ZMOverView/commonPrompt/index.vue 0 → 100644
浏览文件 @ 90ab7147
<template>
<el-tooltip
effect="dark"
:content="content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="text-ellipsis">
<slot>{{ content }}</slot>
</div>
</el-tooltip>
</template>
<script setup>
defineProps({
content: {
type: String,
default: ""
}
});
</script>
<style scoped>
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
cursor: pointer;
}
</style>
<style>
.common-prompt-popper.el-popper {
padding: 8px 16px !important;
border-radius: 10px !important;
background-color: rgb(59, 65, 75) !important;
font-size: 16px !important;
font-weight: 400 !important;
font-family: "Microsoft YaHei" !important;
line-height: 30px !important;
color: #fff !important;
border: none !important;
}
.common-prompt-popper.el-popper .el-popper__arrow::before {
background-color: rgb(59, 65, 75) !important;
border-color: rgb(59, 65, 75) !important;
}
</style>
src/views/ZMOverView/commonTitle/comTitle.vue 0 → 100644
浏览文件 @ 90ab7147
<template>
<div class="com-title">
<div class="cl1"></div>
<div class="cl2"></div>
<div class="title">{{ title }}</div>
<div class="cl3"></div>
</div>
</template>
<script setup>
import { ref } from "vue";
// 传入的title数据
const props = defineProps({
title: {
type: String,
default: ""
}
});
</script>
<style scoped lang="scss">
.com-title {
width: 100%;
height: 42px;
display: flex;
align-items: center;
margin-bottom: 36px;
.cl1 {
width: 24px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
flex-shrink: 0;
}
.cl2 {
width: 8px;
height: 30px;
background-color: rgba(174, 214, 255, 1);
margin-right: 8px;
flex-shrink: 0;
}
.title {
height: 42px;
white-space: nowrap;
font-size: 32px;
font-weight: 700;
font-family: 'Microsoft YaHei';
line-height: 42px;
margin-right: 16px;
flex-shrink: 0;
}
.cl3 {
flex: 1;
height: 1px;
background-color: rgba(174, 214, 255, 1);
box-sizing: border-box;
}
}
</style>
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue 0 → 100644
浏览文件 @ 90ab7147
<!--科技要闻-->
<template>
<div class="content-wrapper">
全领域
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1666px;
height: 2132px;
}
</style>
src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue 0 → 100644
浏览文件 @ 90ab7147
<!--科技要闻-->
<template>
<div class="content-wrapper">
全要素
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1666px;
height: 2132px;
}
</style>
src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue 0 → 100644
浏览文件 @ 90ab7147
<!--科技要闻-->
<template>
<div class="content-wrapper">
全联盟
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1666px;
height: 2132px;
}
</style>
src/views/ZMOverView/components/fourSuppress/index.vue 0 → 100644
浏览文件 @ 90ab7147
<!--科技要闻-->
<template>
<div class="content-wrapper">
<div class="main-nav">
<div
v-for="item in navList"
:key="item.name"
class="nav-item"
:class="{ active: activeNav === item.name }"
@click="handleNavClick(item.name)"
>
<div class="item-content">
<img v-if="activeNav === item.name" :src="right" class="active-icon" alt="" />
<span>{{ item.name }}</span>
</div>
<img v-if="activeNav === item.name" :src="background" class="active-bg" alt="" />
</div>
</div>
<!-- 切换不同的组件 -->
<AllGovernment v-if="activeNav === '全政府'" />
<AddDomain v-if="activeNav === '全领域'" />
<AllUnion v-if="activeNav === '全联盟'" />
<AllElement v-if="activeNav === '全要素'" />
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import right from "./assets/right.png";
import background from "./assets/background.png";
// 组件引入
import AllGovernment from "./components/allGovernment/index.vue";
import AddDomain from "./components/addDomain/index.vue";
import AllUnion from "./components/allUnion/index.vue";
import AllElement from "./components/allElement/index.vue";
const navList = ref([
{ name: "全政府" },
{ name: "全领域" },
{ name: "全联盟" },
{ name: "全要素" }
]);
const activeNav = ref("全政府");
const handleNavClick = (name) => {
activeNav.value = name;
};
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 1601px;
height: 2203px;
margin: 0 auto;
.main-nav {
width: 100%;
height: 55px;
padding: 4px 5px;
display: flex;
align-items: center;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
box-sizing: border-box;
gap: 8px;
margin-bottom: 16px;
.nav-item {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
// transition: all 0.3s;
.item-content {
display: flex;
align-items: center;
z-index: 1;
.active-icon {
width: 18px;
height: 18px;
margin-right: 8px;
}
span {
font-family: 'YouSheBiaoTiHei';
font-size: 24px;
font-weight: 400;
line-height: 31px;
color: rgb(59, 65, 75);
}
}
.active-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 60px;
z-index: 0;
}
&.active {
background-color: rgba(246, 250, 255, 1);
border: 1px solid rgba(174, 214, 255, 1);
border-radius: 10px;
span {
color: rgb(5, 95, 194);
}
}
}
}
}
</style>
src/views/ZMOverView/components/gameProfile/Timeline.vue 0 → 100644
浏览文件 @ 90ab7147
<template>
<div class="timeline-wrapper">
<button class="arrow left" :disabled="index <= 0" @click="index--">
{{ '<' }}
</button>
<div class="timeline-box">
<div class="line"></div>
<div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftOffset(i)">
<div class="node" :style="leftOffset(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)"></div>
<!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)">
<div class="time">
{{ item.time }}
</div>
<div class="title">
{{ item.title }}
<img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;" />
</div>
<div class="content">
{{ item.content }}
</div>
</div>
</div>
</div>
</div>
<button class="arrow right" :disabled="index >= total - 5" @click="index++">
{{ '>' }}
</button>
</div>
</template>
<script>
export default {
name: 'TimeLine',
props: {
data: { // 父组件传入的数组
type: Array,
required: true
},
textKey: { // 要显示的文本字段
type: String,
default: 'text'
},
idKey: { // 唯一标识字段
type: String,
default: 'id'
}
},
data() {
return { index: 0 };
},
computed: {
total() {
return this.data.length;
},
showList() {
return this.data.slice(this.index, this.index + 5);
},
flip() { return this.index % 2 === 1; }
},
methods: {
leftOffset(i) {
return { left: `${(i * 100) / 5}%` };
},
/* 上下层翻转（保留上次逻辑） */
cardPos(i, flip = false) {
return (i % 2) ^ flip ? 'down' : 'up';
},
/* 线延伸方向 = 卡片出现方向 */
linePos(i, flip = false) {
return this.cardPos(i, flip); // up / down
}
}
};
</script>
<style scoped>
/* 样式与之前完全一致，不再重复 */
.timeline-wrapper {
display: flex;
align-items: center;
width: 100%;
position: relative;
padding: 0 40px;
}
.arrow {
position: absolute;
top: 170px;
/* 左右切换按钮 */
width: 24px;
height: 48px;
font-size: 24px;
border-color: #E7F3FF;
border: 0;
background: #E7F3FF;
cursor: pointer;
z-index: 10;
color: #3E84D1;
}
.arrow:disabled {
color: #c0c4cc;
cursor: not-allowed;
}
.left {
left: 0;
border-radius: 0px 4px 4px 0px;
}
.right {
right: 0;
border-radius: 4px 0px 0px 4px;
}
.timeline-box {
flex: 1;
height: 100%;
position: relative;
}
.line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
background-image: url("@/assets/images/bg/timeLine-bg.jpg");
transform: translateY(-50%);
background-size: auto 100%;
}
.node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* ===== 圆环基础 ===== */
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #409eff;
background: #fff;
position: relative;
margin: 0 auto;
z-index: 2;
}
/* ===== 延伸线 ===== */
.dot::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-1px);
/* 居中细线 */
width: 1px;
background: #409eff;
}
/* 向上节点：线往下伸 */
.dot.up::after {
bottom: 100%;
height: 165px;
/* 圆环底部 → 卡片顶 */
}
/* 向下节点：线往上伸 */
.dot.down::after {
top: 100%;
height: 165px;
}
.card {
position: absolute;
height: 165px;
width: 320px;
padding: 8px 12px;
text-align: left;
cursor: pointer;
font-size: 14px;
}
.time {
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
margin-bottom: 10px;
}
.title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
margin-bottom: 10px;
}
.content {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.card.up {
bottom: 20px;
}
.card.down {
top: 20px;
}
</style>
\ No newline at end of file
src/views/ZMOverView/components/gameProfile/index.vue 0 → 100644
浏览文件 @ 90ab7147
<!--科技要闻-->
<template>
<div class="content-wrapper">
<div class="card-box">
<div class="card-title">
<img class="icon" src="../../assets/icons/title-icon1.png" />
<img class="text" src="../../assets/icons/title-text1.png" />
</div>
</div>
<div class="card-box" style="margin-top: 16px;">
<div class="card-title">
<img class="icon" src="../../assets/icons/title-icon2.png" />
<img class="text" src="../../assets/icons/title-text2.png" />
</div>
<div style="display: flex;height: 530px;">
<Timeline :data="course" text-key="title" id-key="seq" />
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import Timeline from "./Timeline.vue";
const course = ref([
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
},
{
time: "2025年1月",
title: "特朗普宣布撤销拜登AI规则",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
},
{
time: "2025年1月",
title: "特朗普签署EO 143202",
content: "特朗普政府宣布撤销拜登AI规则，计划"
},
{
time: "2025年1月",
title: "中国网信办约谈英伟达",
content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
},
{
time: "2025年7月23日",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
},
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
},
{
time: "2025年1月",
title: "特朗普宣布撤销拜登AI规则",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
},
{
time: "2025年1月",
title: "特朗普签署EO 143202",
content: "特朗普政府宣布撤销拜登AI规则，计划"
},
{
time: "2025年1月",
title: "中国网信办约谈英伟达",
content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
},
{
time: "2025年7月23日",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
}
]);
</script>
<style lang="scss" scoped>
.content-wrapper {
width: 100%;
height: 1416px;
.card-box {
width: 1600px;
height: 700px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---10, 10px);
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.card-title {
width: 1602px;
height: 48px;
display: flex;
.icon {
/* 合并 */
width: 18.67px;
height: 17.85px;
margin: 14px 16px;
}
.text {
/* Text */
width: 177px;
height: 31px;
margin: 8px 0px;
}
}
}
}
</style>
src/views/ZMOverView/components/newRisk/WaveBall.vue 0 → 100644
浏览文件 @ 90ab7147
<template>
<div ref="ballDom" class="ball-box" :style="{ width: '128px', height: '128px' }" />
</template>
<script setup>
/**
* Vue3 水波进度球
* 用法：<WaterBall :percent="67" :size="200" />
*/
import { ref, watch, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
/* props */
const props = defineProps({
percent: { type: Number, default: 60 }, // 0~100
size: { type: Number, default: 200 }, // 画布宽高
data: { type: Object, default: {} },
color: { type: Array, default: [] },
})
/* dom */
const ballDom = ref(null)
let instance = null
// const color = ref([0, 0, 0])
// const makeColors = () => {
// props.color[0] = Math.floor(Math.random() * 360) // 随机色相
// props.color[1] = 70 // 固定饱和度
// props.color[2] = 50 // 固定亮度
// }
/* 颜色映射 */
/* 配置项 */
const makeOption = () => {
const p = Math.min(100, Math.max(0, props.percent)) / 100
console.log(props.color, 'colorcolorcolor')
return {
series: [{
type: 'liquidFill',
radius: '90%',
data: [
{ value: p, direction: 'right' },
{ value: p, direction: 'left' } // 两层波浪反向
],
color: [` ${props.color[1]}`, ` ${props.color[0]}`],
waveAnimation: true,
animationEasingUpdate: 'cubicOut',
outline: {
show: true,
borderDistance: 2, // 第一层边框
itemStyle: {
shadowBlur: 0, // 同样设为 0
borderWidth: 1,
borderColor: `${props.color[2]}`,
shadowColor: 'transparent'
}
},
// 1. 关掉波浪的阴影
itemStyle: {
shadowBlur: 0, // 关键：阴影范围设为 0
shadowColor: 'transparent'
},
backgroundStyle: {
color: `${props.color[3]}`,
borderWidth: 1,
borderColor: `${props.color[4]}`, // 中间区域保持透明
shadowBlur: 0
},
label: {
show: true,
formatter: `${props.data.change}` + `${props.data.unit}`,
fontSize: 24,
color: `${props.color[5]}`,
insideColor: `${props.color[5]}`,
}
}]
}
}
/* 初始化 */
const init = () => {
if (instance) instance.dispose()
instance = echarts.init(ballDom.value)
instance.setOption(makeOption())
}
/* 自动更新 */
watch(() => props.percent, () => {
instance?.setOption(makeOption())
})
onMounted(init)
</script>
<style scoped>
.ball-box {
margin: 0 auto;
}
</style>
\ No newline at end of file
src/views/ZMOverView/index.vue 0 → 100644
浏览文件 @ 90ab7147
<!--ZM博弈概览页-->
<template>
<div class="home-wrapper">
<img :src="background" alt="" class="background-img">
<div class="home-header">
<div class="header-left">
<HeaderMenu></HeaderMenu>
</div>
<div class="header-right">
<div class="header-search-box">
<div class="header-search-left">
<div class="input-box">
<el-input v-model="searchText" @keyup.enter="handleSearch" />
</div>
<div class="icon" @click="handleSearch">
<img src="./assets/images/search-icon.png" alt="" />
</div>
</div>
<div class="header-search-right" @click="handleToSearch">
<div class="header-img-box"><img src="./assets/images/search-btn.png" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="data-select">
<div
v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<div class="content-box">
<!-- 导航栏 -->
<div class="content-nav">
<div class="nav-title">中美科技博弈概览</div>
<div class="nav-btn">
<div v-for="item in navList" :key="item.name" class="btn-item" @click="handleScrollTo(item.id)">
<span>{{ item.name }}</span>
<img :src="right" alt="" />
</div>
</div>
</div>
<!-- 最新风险动态 -->
<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;"></commonTitle>
<newRisk></newRisk>
<!-- 最新科技要闻 -->
<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
<!-- 美对华“四全”打压 -->
<commonTitle id="us-pressure" title="美对华“四全”打压" style="margin-top: 64px;"></commonTitle>
<fourSuppress></fourSuppress>
<!-- 中美博弈概况 -->
<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;"></commonTitle>
<gameProfile></gameProfile>
</div>
</div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import background from "./assets/images/backgroundBT.png"
import HeaderMenu from "@/components/headerMenu.vue";
import right from "./assets/icons/right.png"
import commonTitle from "./commonTitle/comTitle.vue"
import week from "./assets/icons/week.png"
import weekActive from "./assets/icons/week-active.png"
import month from "./assets/icons/month.png"
import monthActive from "./assets/icons/month-active.png"
import year from "./assets/icons/year.png"
import yearActive from "./assets/icons/year-active.png"
// 组件引入
import newRisk from "./components/newRisk/index.vue"
import fourSuppress from "./components/fourSuppress/index.vue"
import gameProfile from "./components/gameProfile/index.vue"
const router = useRouter();
const navList = ref([
{ name: "最新风险动态", id: "risk-dynamic" },
{ name: "最新科技要闻", id: "tech-news" },
{ name: "美对华“四全”打压", id: "us-pressure" },
{ name: "中美博弈概况", id: "zm-overview" }
]);
const handleScrollTo = (id) => {
const element = document.getElementById(id);
const container = document.querySelector('.content-box');
if (element && container) {
const targetOffsetTop = element.offsetTop - container.offsetTop;
container.scrollTo({
top: targetOffsetTop,
behavior: "smooth"
});
}
};
const searchText = ref("");
const handleSearch = () => {
if (!searchText.value.trim()) {
ElMessage.warning("请输入搜索关键词");
return;
}
const curRoute = router.resolve({
path: "/searchResults",
query: {
searchText: searchText.value.trim()
}
});
window.open(curRoute.href, "_blank");
};
// 跳转到综合检索页面
const handleToSearch = () => {
const route = router.resolve("/comprehensiveSearch");
window.open(route.href, "_blank");
};
const dateList = ref([
{ name: "本周", type: "week", icon: week, activeIcon: weekActive },
{ name: "本月", type: "month", icon: month, activeIcon: monthActive },
{ name: "今年", type: "year", icon: year, activeIcon: yearActive }
]);
const activeDate = ref("week");
const handleDateClick = (type) => {
activeDate.value = type;
};
</script>
<style lang="scss" scoped>
.home-wrapper {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
.data-select {
width: 120px;
height: 144px;
position: absolute;
top: 291px;
left: 0;
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 10;
.date-item {
display: flex;
align-items: center;
padding-left: 18px;
height: 46px;
cursor: pointer;
// transition: all 0.3s;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
img {
width: 18px;
height: 18px;
margin-right: 18px;
}
span {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgb(95, 101, 108);
}
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
}
}
}
}
.background-img {
width: 100%;
height: 700px;
position: absolute;
top: 64px;
left: 0;
z-index: -1;
}
.home-header {
height: 64px;
flex-shrink: 0;
z-index: 100;
background: url("./assets/images/header-bg.png") no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
padding: 0 160px;
display: flex;
justify-content: space-between;
align-items: center;
.header-right {
.header-search-box {
display: flex;
gap: 12px;
justify-content: flex-end;
.header-search-left {
width: 360px;
height: 36px;
line-height: 36px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.3);
display: flex;
.input-box {
width: 324px;
:deep(.el-input) {
.el-input__wrapper {
background-color: transparent !important;
box-shadow: none !important;
padding: 0 12px;
}
.el-input__inner {
color: #fff;
height: 36px;
line-height: 36px;
&::placeholder {
color: rgba(255, 255, 255, 0.6);
}
}
}
}
.icon {
width: 36px;
height: 36px;
border-radius: 4px;
cursor: pointer;
&:hover {
background: rgba(255, 255, 255, 0.5);
}
img {
width: 100%;
height: 100%;
}
}
}
.header-search-right {
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
.header-img-box {
width: 19px;
height: 24px;
margin: 5px auto;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
.content-box {
flex: 1;
width: 100%;
overflow-y: auto;
padding: 48px 160px;
.content-nav {
.nav-title {
font-size: 48px;
font-weight: 400;
line-height: 62px;
letter-spacing: 0px;
text-align: center;
color: rgb(5, 95, 194);
font-family: YouSheBiaoTiHei;
margin-bottom: 14px;
}
.nav-btn {
display: flex;
justify-content: center;
gap: 16px;
.btn-item {
display: flex;
align-items: center;
padding: 10px 24px 10px 32px;
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 50px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
cursor: pointer;
transition: all 0.3s;
// &:hover {
// background: rgba(255, 255, 255, 0.8);
// transform: translateY(-2px);
// }
span {
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 26px;
color: rgb(5, 95, 194);
margin-right: 16px;
}
img {
width: 6px;
height: 12px;
}
}
}
}
}
}
</style>
src/views/bill/background/index.vue
浏览文件 @ 90ab7147
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</div> </div>
<div class="box1-main-footer"> <div class="box1-main-footer">
<div class="info"> <div class="info">
{{ `共有${total}条${box1BtnActive === 1 ? "涉华" : "全部"}背景` }} {{ `共 ${total} 项` }}
</div> </div>
<div class="page-box"> <div class="page-box">
<el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage" <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage"
...@@ -501,11 +501,11 @@ onMounted(() => { ...@@ -501,11 +501,11 @@ onMounted(() => {
} }
.background-wrap-left { .background-wrap-left {
width: 1150px; width: 1064px;
margin-top: 16px; margin-top: 16px;
.background-wrap-left-box1 { .background-wrap-left-box1 {
width: 1150px; width: 1064px;
height: 415px; height: 415px;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
...@@ -513,7 +513,7 @@ onMounted(() => { ...@@ -513,7 +513,7 @@ onMounted(() => {
.box1-main { .box1-main {
.box1-main-center { .box1-main-center {
margin: 0 22px; margin: 0 22px;
width: 1106px; width: 1016px;
height: 280px; height: 280px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -521,7 +521,7 @@ onMounted(() => { ...@@ -521,7 +521,7 @@ onMounted(() => {
align-content: flex-start; align-content: flex-start;
.box1-main-item { .box1-main-item {
width: 544px; width: 500px;
height: 48px; height: 48px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(243, 243, 244, 1); border: 1px solid rgba(243, 243, 244, 1);
...@@ -592,26 +592,25 @@ onMounted(() => { ...@@ -592,26 +592,25 @@ onMounted(() => {
.background-wrap-left-box2 { .background-wrap-left-box2 {
margin-top: 15px; margin-top: 15px;
width: 1150px; width: 1064px;
height: 415px; height: 415px;
background: #fff; background: #fff;
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);
.box2-main { .box2-main {
// margin-top: 9px; // margin-top: 9px;
width: 1110px; width: 1010px;
margin-left: 23px; margin-left: 23px;
height: 349px; height: 349px;
overflow-y: auto; overflow-y: auto;
.box2-main-item { .box2-main-item {
width: 1103px; width: 1005px;
height: 60px; height: 60px;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
padding: 6px 8px; padding: 6px 8px;
display: flex; display: flex;
&:hover { &:hover {
background: rgba(225, 225, 225, 0.3); background: rgba(225, 225, 225, 0.3);
} }
...@@ -629,7 +628,7 @@ onMounted(() => { ...@@ -629,7 +628,7 @@ onMounted(() => {
.center { .center {
margin-left: 14px; margin-left: 14px;
width: 900px; width: 805px;
.title { .title {
height: 22px; height: 22px;
...@@ -698,7 +697,7 @@ onMounted(() => { ...@@ -698,7 +697,7 @@ onMounted(() => {
margin-right: 18px; margin-right: 18px;
margin-left: 16px; margin-left: 16px;
margin-top: 16px; margin-top: 16px;
width: 576px; width: 520px;
height: 845px; height: 845px;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
...@@ -741,7 +740,7 @@ onMounted(() => { ...@@ -741,7 +740,7 @@ onMounted(() => {
.right-box1-main-top { .right-box1-main-top {
margin-left: 16px; margin-left: 16px;
width: 544px; width: 490px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -830,7 +829,7 @@ onMounted(() => { ...@@ -830,7 +829,7 @@ onMounted(() => {
margin: 17px 16px 0 16px; margin: 17px 16px 0 16px;
border-top: 1px solid rgba(243, 243, 244, 1); border-top: 1px solid rgba(243, 243, 244, 1);
border-bottom: 1px solid rgba(243, 243, 244, 1); border-bottom: 1px solid rgba(243, 243, 244, 1);
width: 544px; width: 490px;
height: 266px; height: 266px;
background: rgba(249, 250, 252, 1); background: rgba(249, 250, 252, 1);
border-radius: 5px; border-radius: 5px;
...@@ -938,9 +937,9 @@ onMounted(() => { ...@@ -938,9 +937,9 @@ onMounted(() => {
height: 22px; height: 22px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 16px;
font-weight: 600; font-weight: 400;
line-height: 22px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
...@@ -963,7 +962,7 @@ onMounted(() => { ...@@ -963,7 +962,7 @@ onMounted(() => {
.user-box { .user-box {
cursor: pointer; cursor: pointer;
width: 538px; width: 490px;
padding: 12px 0; padding: 12px 0;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid rgba(241, 243, 246, 1); border-bottom: 1px solid rgba(241, 243, 246, 1);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论