Skip to content

R
risk-monitor
提交 bb99a95a authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

fix:更新概览页全政府打压遏制时间线组件

上级 1281bff2 90255a86
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 354 行增加 和 300 行删除
.cursor/rules/g2.mdc 0 → 100644
浏览文件 @ bb99a95a
---
alwaysApply: true
---
# Overview
Insert overview text here. The agent will only see this should they choose to apply the rule.
```markdown
---
alwaysApply: true
---
# 前端开发（Cursor 专用执行要点）
## 1. HTML / 模板
- 属性命名：统一用小写-中线分割。动态 class 也用这种格式，使用单引号：`:class="{ 'xxx-xxx': isXxx }"`
- v-for 必须有唯一 key，`v-for + :key`（如`:key="item.id"`），禁止仅凭索引。示例：`<li v-for="item in list" :key="item.id"></li>`
- 禁止 v-if 与 v-for 同时在同一节点；如需筛选请用计算属性/方法过滤后再 v-for
- 无内容组件或标签必须自闭合，如 `<MyComp />` `<img />` `<input />`
- HTML 属性用双引号，动态属性外已双引号则用单引号
- 模板表达式保持极简，只写取值或很简单的显示；任何有数据处理（如数组/字符串操作、三元、函数执行等）必须抽到方法或计算属性完成
## 2. CSS
- 样式模块优先通用组件，确需定制严格按设计来写
- 全部样式变量统一来源于全局（如 `:root { --color-main-primary: #055fC2; ... }`）
- `<style scoped>` 默认加 scoped
- 修改子组件样式用 `:deep()`（Vue3 推荐写法），如：`.xxx :deep(.el-xxx) { ... }`
- 严禁页面大量内联 style，样式尽量写到 class 或 :style 绑定表达式
## 3. 文件系统
- 文件夹采用小驼峰，无数字/无关字符
- 每个业务模块 API 独立放模块对应文件夹
- 静态资源分全局 assets 与模块 assets：全局图片 assets/images，icon 建议 SVG，模块区分子文件夹
## 4. 组件
- 组件名大驼峰（PascalCase）。组件类型目录小驼峰，具体组件目录（如 AreaTag）大驼峰
- 单文件组件名 index.vue，多组件文件按具体功能如 LeftBtn.vue
- 优先用通用组件，业务组件只能放业务模块，不得放全局
## 5. JS/TS
- 命名统一规范
- 变量：小驼峰 userName、isVisible
- 常量：大写+下划线，如 MAX_COUNT
- 枚举：枚举名大驼峰，枚举值全大写+下划线 enum Status { SUCCESS = 'SUCCESS' }
- 普通函数：小驼峰+动词前缀 getUser/formatTime
- 事件函数：小驼峰+handle/on handleSubmit/onClose
- 布尔型函数：is/has/should + 大驼峰，如 isValid()
- 异步强制 async/await，catch 错误。禁止 Promise.then 链式嵌套（如遇回调 hell 必须拆分/抽象重写）
- 一律用 const/let 替换 var，优先 const
- 注释：
- 单行注释：后加空格，如 `// 注释内容`
- 方法/复杂模块加 /** JSDoc 注释 */
## 6. 其它
- 所有复杂渲染逻辑逻辑一律抽到计算属性或方法，模板结构保持简洁
src/api/bill/billHome.js
浏览文件 @ bb99a95a
...@@ -14,20 +14,20 @@ export function getBillIndustry(params) { ...@@ -14,20 +14,20 @@ export function getBillIndustry(params) {
// 涉华法案统计 // 涉华法案统计
export function getBillCount(params) { export function getBillCount(params) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/BillOverview/billCount`, url: `/api/BillOverview/billCount`,
params params
}) })
} }
// 获取关键条款 // 获取关键条款
export function getBillOverviewKeyTK() { export function getBillOverviewKeyTK() {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/BillOverview/keyTk`, url: `/api/BillOverview/keyTk`,
}) })
} }
// 获取热门法案列表 // 获取热门法案列表
...@@ -104,22 +104,32 @@ export function getBillPostOrg(params) { ...@@ -104,22 +104,32 @@ export function getBillPostOrg(params) {
}) })
} }
// 获取关键议员提案 // 获取涉华法案进展分布
/** /**
* @param {year} * @param {year}
*/ */
export function getMemberProposal(params) { export function getBillProcess(params) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/BillOverview/memberProposal/${params.year}`, url: `/bill/BillOverview/billsProcess/${params.year}`,
}) })
} }
// 获取资源库 // 获取资源库法案
export function getBills(params, signal) { export function getBills(params, signal) {
return request({ return request({
method: 'GET', method: 'GET',
url: `/api/BillOverview/bills`, url: `/bill/BillOverview/bills`,
params,
signal
})
}
// 获取资源库国会议员
export function getBillsPerson(params, signal) {
return request({
method: 'GET',
url: `/bill/BillOverview/billsPerson`,
params, params,
signal signal
}) })
......
src/components/base/messageBubble/index.vue
浏览文件 @ bb99a95a
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
<!-- <img src="./image1.png" alt="" /> --> <!-- <img src="./image1.png" alt="" /> -->
<img src="./message-icon.svg" alt="" /> <img src="./message-icon.svg" alt="" />
</div> </div>
<div class="header-title">{{ "社交媒体" }}</div> <div class="header-title">
<slot name='title'>{{ "社交媒体" }}</slot>
</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div> <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div> </div>
<div class="box4-main"> <div class="box4-main">
...@@ -149,7 +151,7 @@ const handleToMoreNews = (item) => { ...@@ -149,7 +151,7 @@ const handleToMoreNews = (item) => {
} }
.header-title { .header-title {
width: 80px; width: 100%;
margin-top: 11px; margin-top: 11px;
margin-left: 18px; margin-left: 18px;
height: 26px; height: 26px;
......
src/components/devStyle/components/constStyle.vue 0 → 100644
浏览文件 @ bb99a95a
<script setup>
import { ElSpace, ElButton } from 'element-plus';
import "@/styles/main.css"
import { copyToClipboardThenTip } from '@/utils/systemUtils'
// 黑色到白色主色一行
const rowBlackToWhite = [
{ title: "黑色", name: "--text-primary-color" },
{ title: "黑色90% / 主标题文字颜色", name: "--text-primary-90-color" },
{ title: "黑色80% / 小标题文字颜色", name: "--text-primary-80-color" },
{ title: "黑色65% / 正文颜色", name: "--text-primary-65-color" },
{ title: "黑色50%", name: "--text-primary-50-color" },
{ title: "黑色10%", name: "--bg-black-10" },
{ title: "黑色5% / 分割线颜色", name: "--bg-black-5" },
{ title: "黑色2% / 灰色背景色", name: "--bg-black-2" },
{ title: "白色主色", name: "--bg-white-100" },
]
// 主色到主色高亮背景一行（主色高亮背景为浅色，需黑色文字）
const rowPrimaryToHighlight = [
{ title: "主色", name: "--color-primary-100" },
{ title: "主色50%", name: "--color-primary-50", light: true },
{ title: "主色35%", name: "--color-primary-35" },
{ title: "主色10%", name: "--color-primary-10", light: true },
{ title: "主色高亮背景", name: "--color-primary-2", light: true },
]
// 红色到绿色10%一行（*10% 为浅色背景，需黑色文字）
const rowRedToGreen10 = [
{ title: "红色", name: "--color-red-100" },
{ title: "红色10%", name: "--color-red-10", light: true },
{ title: "橙色", name: "--color-orange-100" },
{ title: "橙色10%", name: "--color-orange-10", light: true },
{ title: "黄色", name: "--color-yellow-100" },
{ title: "黄色10%", name: "--color-yellow-10", light: true },
{ title: "绿色", name: "--color-green-100" },
{ title: "绿色10%", name: "--color-green-10", light: true },
]
function copyColorVar(item) {
const color = `var(${item.name})`
copyToClipboardThenTip(color)
}
</script>
<template>
<el-space direction="vertical" alignment="flex-start">
<div class="text-title-2">颜色</div>
<el-space direction="vertical" alignment="flex-start">
<el-space wrap>
<el-button v-for="(item, index) in rowBlackToWhite" :key="'bw-' + index" :color="`var(${item.name})`"
@click="copyColorVar(item)">
{{ item.title }}
</el-button>
</el-space>
<el-space wrap>
<el-button v-for="(item, index) in rowPrimaryToHighlight" :key="'ph-' + index"
:class="{ 'color-btn-text-black': item.light }"
:style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
@click="copyColorVar(item)">
{{ item.title }}
</el-button>
</el-space>
<el-space wrap>
<el-button v-for="(item, index) in rowRedToGreen10" :key="'rg-' + index"
:class="{ 'color-btn-text-black': item.light }"
:style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
@click="copyColorVar(item)">
{{ item.title }}
</el-button>
</el-space>
</el-space>
</el-space>
</template>
<style scoped>
/* 浅色背景按钮：文字黑色 */
:deep(.color-btn-text-black) {
color: var(--el-color-black) !important;
}
</style>
\ No newline at end of file
src/components/devStyle/components/index.vue
浏览文件 @ bb99a95a
<script setup lang="ts"> <script setup lang="ts">
import "@/styles/container.scss" import "@/styles/container.scss"
import TextStyle from './textStyle.vue'; import TextStyle from './textStyle.vue';
import { ElScrollbar } from "element-plus"; import ConstStyle from './constStyle.vue';
import { ElScrollbar, ElSpace } from "element-plus";
</script> </script>
<template> <template>
<el-scrollbar> <el-scrollbar>
<div class="common-page"> <div class="common-page">
<text-style></text-style> <el-space direction="vertical" alignment="flex-start">
<div class="text-title-0-show">开发样式</div>
<div class="text-title-1-show">样式变量</div>
<const-style></const-style>
<div class="text-title-1-show">文字样式</div>
<text-style></text-style>
</el-space>
</div> </div>
</el-scrollbar> </el-scrollbar>
</template> </template>
\ No newline at end of file
src/components/devStyle/components/textStyle.vue
浏览文件 @ bb99a95a
<template> <template>
<div> <table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;">
<div class="text-title-1-show">文字样式</div> <!-- 表头 -->
<table style="width: 100%; border-collapse: collapse; border: 1px solid #ebeef5;margin-top: 10px;"> <thead>
<!-- 表头 --> <tr class="text-title-2">
<thead> <th> 名称</th>
<tr> <th> 类型名称</th>
<th> 名称</th> <th> 操作</th>
<th> 类型名称</th> </tr>
<th> 操作</th> </thead>
<!-- 表格内容 -->
<tbody>
<template v-for="(row, index) in tableData" :key="index">
<!-- 隔行变色效果 -->
<tr :style="{
height: '60px',
backgroundColor: index % 2 === 1 ? '#fafafa' : 'transparent'
}">
<!-- 名称列 -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div :class="row.className">
{{ row.name }}
</div>
</td>
<!-- 类型名称列（带复制功能） -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div @click="copyToClipboardThenTip(row.className)" style="cursor: pointer;">
<span>{{ row.className }}</span>
</div>
</td>
<!-- 操作列 -->
<td style="padding: 12px; border: 1px solid #ebeef5; text-align: center;">
<el-button type="primary" link @click="copyToClipboardThenTip(row.className)">
<el-icon>
<DocumentCopy />
</el-icon>
复制
</el-button>
</td>
</tr> </tr>
</thead> </template>
<!-- 表格内容 --> </tbody>
<tbody> </table>
<template v-for="(row, index) in tableData" :key="index">
<!-- 隔行变色效果 -->
<tr :style="{
height: '60px',
backgroundColor: index % 2 === 1 ? '#fafafa' : 'transparent'
}">
<!-- 名称列 -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div :class="row.className">
{{ row.name }}
</div>
</td>
<!-- 类型名称列（带复制功能） -->
<td style="padding: 12px; border: 1px solid #ebeef5;">
<div @click="copyClassName(row.className)" style="cursor: pointer;">
<span>{{ row.className }}</span>
</div>
</td>
<!-- 操作列 -->
<td style="padding: 12px; border: 1px solid #ebeef5; text-align: center;">
<el-button type="primary" link @click="copyClassName(row.className)">
<el-icon>
<DocumentCopy />
</el-icon>
复制
</el-button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { ElMessage, } from 'element-plus'
import { DocumentCopy } from '@element-plus/icons-vue' import { DocumentCopy } from '@element-plus/icons-vue'
import "@/styles/common.scss" import "@/styles/common.scss"
import { copyToClipboard } from '@/utils/systemUtils' import { copyToClipboardThenTip } from '@/utils/systemUtils'
// 表格数据 // 表格数据
const tableData = ref([ const tableData = ref([
...@@ -87,18 +84,6 @@ const tableData = ref([ ...@@ -87,18 +84,6 @@ const tableData = ref([
{ name: '3级提示文字', className: 'text-tip-3' }, { name: '3级提示文字', className: 'text-tip-3' },
]) ])
// 复制类型名称到剪贴板
const copyClassName = async (className) => {
const { status, message } = await copyToClipboard(className)
if (status) {
ElMessage.success(message)
} else {
ElMessage.error(message)
}
}
</script> </script>
<style scoped></style> <style scoped></style>
\ No newline at end of file
src/router/modules/company.js
浏览文件 @ bb99a95a
//企业主页 //企业主页
const companyPages = () => import('@/views/companyPages/index.vue') const companyPages = () => import('@/views/companyPages/index.vue')
const companyPagesRoutes = [ const companyPagesRoutes = [
// 智库系统的主要路由 // 智库系统的主要路由
{ {
...@@ -9,7 +11,7 @@ const companyPagesRoutes = [ ...@@ -9,7 +11,7 @@ const companyPagesRoutes = [
component: companyPages, component: companyPages,
meta: { meta: {
title: "企业主页", title: "企业主页",
dynamicTitle: true dynamicTitle: true
} }
}, },
......
src/router/modules/devStyle.js
浏览文件 @ bb99a95a
//样式主页 //样式主页
import stylePages from "@/components/devStyle/components/index.vue"; const StylePages = () => import("@/components/devStyle/components/index.vue");
const stylePagesRoutes = [ const stylePagesRoutes = [
// 智库系统的主要路由 // 智库系统的主要路由
{ {
path: "/devStylePages", path: "/devStylePages",
name: "devStylePages", name: "devStylePages",
component: stylePages, component: StylePages,
meta: { meta: {
title: "开发样式", title: "开发样式",
dynamicTitle: true dynamicTitle: true
......
src/styles/descriptions.scss
浏览文件 @ bb99a95a
...@@ -2,8 +2,10 @@ ...@@ -2,8 +2,10 @@
/***没有nav下划线***/ /***没有nav下划线***/
.common-descriptions .el-descriptions__label{ .common-descriptions .el-descriptions__label{
@extend .text-header; @extend .text-tip-1-bold;
} }
.common-descriptions .el-descriptions__content{ .common-descriptions .el-descriptions__content{
@extend .text-base @extend .text-tip-1;
color: var(--text-primary-80-color);
} }
\ No newline at end of file
src/styles/main.css
浏览文件 @ bb99a95a
...@@ -39,10 +39,22 @@ ...@@ -39,10 +39,22 @@
/* 主色 设计定义*/ /* 主色 设计定义*/
--color-primary-100: #055FC2; --color-primary-100: #055FC2;
--color-primary-50: #82AFE0; --color-primary-50: #89C1FF;
--color-primary-35: #AED6FF; --color-primary-35: #B9DCFF;
--color-primary-10: #E7F3FF; --color-primary-10: #E7F3FF;
--color-primary-2: #F6FAFF; --color-primary-2: #F6FAFF;
/* 红色 设计定义 */
--color-red-100:#CE4F51;
--color-red-10:rgba(206, 79, 81, 0.1);
/* 橙色 设计定义 */
--color-orange-100:#FF954D;
--color-orange-10:rgba(255, 149, 77, 0.1);
/* 黄色 设计定义 */
--color-yellow-100:#E8BD0B;
--color-yellow-10:rgba(232, 189, 11, 0.1);
/* 绿色 设计定义 */
--color-green-100:#218139;
--color-green-10:rgba(33, 129, 57, 0.1);
} }
.hover-dialog { .hover-dialog {
......
src/utils/systemUtils.ts
浏览文件 @ bb99a95a
import { ElMessage } from "element-plus";
interface BaseReturn { interface BaseReturn {
status: boolean; status: boolean;
message: string; message: string;
...@@ -26,3 +28,13 @@ export async function copyToClipboard(txet: string): Promise<BaseReturn> { ...@@ -26,3 +28,13 @@ export async function copyToClipboard(txet: string): Promise<BaseReturn> {
return { status: false, message: "复制失败，请手动复制" }; return { status: false, message: "复制失败，请手动复制" };
} }
} }
// 复制类型名称到剪贴板
export async function copyToClipboardThenTip(text: string): Promise<void> {
const { status, message } = await copyToClipboard(text);
if (status) {
ElMessage.success(message);
} else {
ElMessage.error(message);
}
}
src/views/ZMOverView/components/fourSuppress/components/addDomain/mockdata.json deleted 100644 → 0
浏览文件 @ 1281bff2
{
"code": 200,
"message": "操作成功",
"success": true,
"data": [
{
"eventType": "行政令",
"eventName": "为了美国和委内瑞拉人民的利益保障委内瑞拉的石油收入",
"eventDesc": null,
"eventId": "248914",
"eventDomainList": [
{
"domainId": "1",
"domainName": "人工智能"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-10"
},
{
"eventType": "行政令",
"eventName": null,
"eventDesc": null,
"eventId": "248863",
"eventDomainList": [
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "9",
"domainName": "新材料"
}
],
"eventOrgName": null,
"eventDate": "2026-01-09"
},
{
"eventType": "行政令",
"eventName": "使美国退出与美国利益相悖的国际组织、公约、条约",
"eventDesc": null,
"eventId": "249004",
"eventDomainList": [
{
"domainId": "2",
"domainName": "生物科技"
},
{
"domainId": "4",
"domainName": "量子科技"
},
{
"domainId": "5",
"domainName": "新能源"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-08"
},
{
"eventType": "行政令",
"eventName": "在国防合同中优先考虑作战人员",
"eventDesc": null,
"eventId": "248915",
"eventDomainList": [
{
"domainId": "99",
"domainName": "其他"
},
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "10",
"domainName": "航空航天"
}
],
"eventOrgName": null,
"eventDate": "2026-01-08"
},
{
"eventType": "行政令",
"eventName": "大西洋高度洄游物种；商业性大西洋黑鼻鲨和娱乐性大西洋鲨鱼渔业管理措施的修订",
"eventDesc": "NMFS提议对商业和休闲大西洋鲨鱼渔业进行几项改革。具体来说，NMFS正在考虑取消大西洋地区黑鼻鲨管理边界，修改商业保留限额...",
"eventId": "163447",
"eventDomainList": [
{
"domainId": "14",
"domainName": "核"
},
{
"domainId": "7",
"domainName": "海洋"
}
],
"eventOrgName": null,
"eventDate": "2026-01-05"
},
{
"eventType": "行政令",
"eventName": "关于Hiefo Corporation收购Emcore Corporation部分资产",
"eventDesc": null,
"eventId": "248916",
"eventDomainList": [
{
"domainId": "3",
"domainName": "新一代通信网络"
},
{
"domainId": "8",
"domainName": "先进制造"
},
{
"domainId": "6",
"domainName": "集成电路"
}
],
"eventOrgName": null,
"eventDate": "2026-01-03"
},
{
"eventType": "行政令",
"eventName": "汽车贷款利息扣除",
"eventDesc": "本文件包含关于某些纳税人扣除高达10,000美元的合格乘用车贷款利息的拟议法规。本文件还包含关于新信息报告的拟议法规...",
"eventId": "163443",
"eventDomainList": [
{
"domainId": "13",
"domainName": "太空"
},
{
"domainId": "14",
"domainName": "核"
}
],
"eventOrgName": null,
"eventDate": "2026-01-02"
},
{
"eventType": "行政令",
"eventName": "品牌处方药费用法规的法定更新",
"eventDesc": "本文件建议修订有关对从事制造或进口某些品牌处方药业务的相关实体征收年费的法规。为了应对覆盖缺口折扣的替代...",
"eventId": "163444",
"eventDomainList": [
{
"domainId": "2",
"domainName": "生物科技"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2026-01-02"
},
{
"eventType": "337",
"eventName": "外国制造的半导体器件及其下游产品和组件",
"eventDesc": "美国ITC发布对外国制造的半导体器件及其下游产品和组件的337部分终裁",
"eventId": "111",
"eventDomainList": [
{
"domainId": "1",
"domainName": "人工智能"
},
{
"domainId": "5",
"domainName": "新能源"
}
],
"eventOrgName": "美国商务部",
"eventDate": "2026-01-01"
},
{
"eventType": "行政令",
"eventName": "美国东北部的渔业；大西洋冲浪蛤和海洋圆蛤渔业管理计划修正案21",
"eventDesc": "NMFS宣布，中大西洋渔业管理委员会已提交大西洋冲浪蛤和海洋圆蛤渔业管理计划第21号修正案，供商务部长审查和批准。我们正在征求意见...",
"eventId": "163426",
"eventDomainList": [
{
"domainId": "7",
"domainName": "海洋"
},
{
"domainId": "3",
"domainName": "新一代通信网络"
}
],
"eventOrgName": null,
"eventDate": "2025-12-29"
}
]
}
\ No newline at end of file
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ bb99a95a
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import right from "./assets/right.png"; import right from "./assets/right-white.png";
import background from "./assets/background.png"; import background from "./assets/background.png";
// 组件引入 // 组件引入
...@@ -104,12 +104,13 @@ const handleNavClick = name => { ...@@ -104,12 +104,13 @@ const handleNavClick = name => {
} }
&.active { &.active {
background-color: rgba(246, 250, 255, 1); background-color: rgba(5, 95, 194, 1);
border: 1px solid rgba(174, 214, 255, 1); border: 1px solid rgba(174, 214, 255, 1);
border-radius: 10px; border-radius: 10px;
span { span {
color: rgb(5, 95, 194); // color: rgb(5, 95, 194);
color: #fff;
} }
} }
} }
......
src/views/ZMOverView/index.vue
浏览文件 @ bb99a95a
...@@ -21,8 +21,13 @@ ...@@ -21,8 +21,13 @@
<!-- 美对华“四全”打压 --> <!-- 美对华“四全”打压 -->
<div id="us-pressure" class="us-pressure-section"> <div id="us-pressure" class="us-pressure-section">
<div class="data-select"> <div class="data-select">
<div v-for="item in dateList" :key="item.type" class="date-item" :class="{ active: activeDate === item.type }" <div
@click="handleDateClick(item.type)"> 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="" /> --> <!-- <img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" /> -->
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
...@@ -133,8 +138,6 @@ provide("activeDate", activeDate); ...@@ -133,8 +138,6 @@ provide("activeDate", activeDate);
const handleDateClick = type => { const handleDateClick = type => {
activeDate.value = type; activeDate.value = type;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -250,7 +253,8 @@ const handleDateClick = type => { ...@@ -250,7 +253,8 @@ const handleDateClick = type => {
.home-top-bg { .home-top-bg {
background: background:
url("./assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%); url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -266,7 +270,7 @@ const handleDateClick = type => { ...@@ -266,7 +270,7 @@ const handleDateClick = type => {
.data-select { .data-select {
width: 108px; width: 108px;
height: 192px; height: 192px;
position: fixed; position: absolute;
top: 149px; top: 149px;
left: 0; left: 0;
background-color: rgba(255, 255, 255, 0.65); background-color: rgba(255, 255, 255, 0.65);
......
src/views/bill/billHome/OverviewCard.vue 0 → 100644
浏览文件 @ bb99a95a
<template>
<div class="overview-card">
<div class="overview-card-header">
<div class="overview-card-header-left">
<div class="overview-card-header-icon">
<img :src="icon" alt="" />
</div>
<div class="overview-card-header-title">{{ title }}</div>
</div>
<div v-if="$slots.right" class="overview-card-header-right">
<slot name="right" />
</div>
</div>
<div class="overview-card-main">
<slot />
</div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: ""
},
icon: {
type: String,
default: ""
}
});
</script>
<style lang="scss" scoped>
.overview-card {
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
overflow: hidden;
.overview-card-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 27px 0 22px;
.overview-card-header-left {
display: flex;
align-items: center;
.overview-card-header-icon {
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.overview-card-header-title {
margin-left: 19px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.overview-card-header-right {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
}
}
.overview-card-main {
height: calc(100% - 53px);
}
}
</style>
vite.config.js
浏览文件 @ bb99a95a
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论