Skip to content

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

组件更新

上级 9d0c0ce1 0ad9f2da
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 1098 行增加 和 220 行删除
src/components/NewsList/NewsList.vue 0 → 100644
浏览文件 @ ebc89c2c
<template>
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./image1.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
<div class="left">
<img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title"><span class="text-inner">{{ news[props.title] }}</span></div>
<div class="time">{{ news[props.from] }}</div>
</div>
<div class="right-footer">{{ news[props.content] }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({
// 新闻列表数据
newsList: {
type: Array,
default: () => []
},
img: {
type: String,
default: 'img'
},
title: {
type: String,
default: "title"
},
from: {
type: String,
default: "from"
},
content: {
type: String,
default: "content"
},
});
const emit = defineEmits(['item-click', 'more-click']);
const handleToMoreNews = () => {
emit('more-click')
};
const handleToNewsAnalysis = (item, index) => {
emit('item-click', item, index)
};
</script>
<style lang="scss" scoped>
.box3 {
width: 792px !important;
height: 450px !important;
border-radius: 10px !important;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1) !important;
background: rgba(255, 255, 255, 1) !important;
display: flex !important;
flex-direction: column;
gap: 0 !important;
overflow: hidden;
.box3-header {
height: 48px !important;
border-bottom: 1px solid rgba(234, 236, 238, 1) !important;
margin: 0 !important;
display: flex !important;
justify-content: space-between !important;
position: relative !important;
width: 100%;
box-sizing: border-box;
.box3-header-left {
display: flex !important;
.box3-header-icon {
margin-left: 19px !important;
margin-top: 14px !important;
width: 24px !important;
height: 24px !important;
img {
width: 100% !important;
height: 100% !important;
}
}
.box3-header-title {
margin-top: 11px !important;
margin-left: 17px !important;
height: 26px !important;
color: var(--color-main-active) !important;
font-family: 'Source Han Sans CN' !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 26px !important;
}
}
.more {
width: 45px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box3-main {
height: 401px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0;
.box3-item {
display: flex;
height: 78px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
cursor: pointer;
&:hover {
.right-top .title {
color: rgb(5, 95, 194) !important;
font-weight: 700;
}
.right-top .text-inner {
border-bottom-color: rgb(5, 95, 194) !important;
}
}
.left {
width: 72px;
height: 48px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
.title {
margin-top: 14px;
width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.text-inner {
border-bottom: 1px solid transparent;
}
}
.time {
width: 157px;
text-align: right;
height: 22px;
margin-top: 14px;
color: rgba(95, 101, 108, 1);
font-family: 'Source Han Sans CN';
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>
\ No newline at end of file
src/components/RiskSignal/RiskSignal.vue 0 → 100644
浏览文件 @ ebc89c2c
<template>
<div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./image1.png" alt="" />
</div>
<div class="title">
<div class="text">{{ title }}</div>
<div class="num">{{ list.length }}</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item, index)">
<div :class="{
itemLeftStatus1: item[props.riskLevel] === '特别重大',
itemLeftStatus2: item[props.riskLevel] === '重大风险',
itemLeftStatus3: item[props.riskLevel] === '较大风险',
itemLeftStatus4: item[props.riskLevel] === '一般风险' || !item[props.riskLevel],
itemLeftStatus5: item[props.riskLevel] === '低风险',
}">
{{ item[props.riskLevel] || "暂无数据" }}
</div>
<div class="item-right">
<div class="text"> <span class="text-inner">{{ item[props.name] }}</span></div>
<div class="time">{{ item[props.postDate] }}</div>
</div>
</div>
</div>
<div class="box2-footer" @click="handleMoreClick" v-if="showMore">
<div class="icon">
<img src="./image2.png" alt="" />
</div>
<div class="text">{{ moreText }}</div>
</div>
</div>
</template>
<script setup>
import { ElMessage } from "element-plus";
// 接收父组件传递的参数
const props = defineProps({
// 标题（默认“风险信号”）
title: {
type: String,
default: "风险信号"
},
// 风险信号列表数据
list: {
type: Array,
default: () => []
},
// “查看更多”文本（默认“查看更多”）
moreText: {
type: String,
default: "查看更多"
},
//控制“查看更多”是否显示，默认显示
showMore: {
type: Boolean,
default: true
},
name: {
type: String,
default: "name"
},
postDate: {
type: String,
default: "postDate"
},
riskLevel: {
type: String,
default: "riskLevel"
},
});
// 定义自定义事件，把点击事件传递给父组件
const emit = defineEmits(['item-click', 'more-click']);
// 点击单条风险信号
const handleItemClick = (item, index) => {
emit('item-click', item, index)
};
// 点击“查看更多”
const handleMoreClick = () => {
emit('more-click')
};
</script>
<style scoped lang="scss">
.risk-status-base {
width: 40px;
height: 40px;
border-radius: 20px;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.itemLeftStatus1 {
color: rgb(206, 79, 81) !important;
background: rgba(255, 241, 240, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus3 {
color: rgba(212, 177, 6, 1) !important;
background: rgba(254, 255, 230, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus4 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
@extend .risk-status-base
}
.itemLeftStatus5 {
color: rgba(22, 119, 255, 1) !important;
background: rgba(230, 244, 255, 1) !important;
@extend .risk-status-base
}
.box2 {
width: 520px;
height: 450px;
border-radius: 10px;
position: relative;
background: rgba(255, 255, 255, 1);
padding: 0;
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
border: 1px solid rgba(234, 236, 238, 1);
box-sizing: border-box;
overflow: hidden;
.box2-header {
height: 48px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.icon {
width: 24px;
height: 24px;
margin-left: 18px;
margin-top: 14px;
margin-bottom: 10px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
background: rgb(206, 79, 81);
margin-left: 18px;
.text {
margin-left: 16px;
height: 48px;
color: rgba(255, 255, 255, 1);
font-family: 'Source Han Sans CN';
font-size: 20px;
font-weight: 700;
line-height: 48px;
}
.num {
width: 24px;
height: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 15px;
margin-top: 15px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
}
}
.box2-main {
box-sizing: border-box;
padding-left: 23px;
padding-right: 30px;
overflow-y: auto;
width: 520px;
height: calc(100% - 160px);
border-radius: 4px;
.box2-main-item {
width: 463px;
height: 48px;
border-radius: 2px;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
.item-right .text {
color: rgb(5, 95, 194) !important;
font-weight: 700;
}
.item-right .text-inner {
border-bottom-color: rgb(5, 95, 194) !important;
}
}
.item-left {
margin-top: 4px;
margin-left: 0px;
margin-bottom: 4px;
width: 40px;
height: 40px;
border-radius: 20px;
color: rgba(82, 196, 26, 1);
background: rgba(246, 255, 237, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
flex-shrink: 0;
}
.item-right {
margin-left: 12px;
height: 46px;
display: flex;
align-items: center;
flex: 1;
background: transparent;
padding: 0;
border-bottom: 1px solid #EAECEE;
box-sizing: border-box;
overflow: hidden; // 保证右侧不会溢出
.text {
padding-top: 8px;
padding-bottom: 8px;
flex: 1 1 auto;
min-width: 0;
height: 100%;
background: transparent;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
flex-shrink: 1;
.text-inner {
border-bottom: 1px solid transparent;
}
}
.time {
flex: 0 0 auto;
margin-left: 12px;
padding-top: 11px;
padding-bottom: 11px;
height: 100%;
flex-shrink: 0;
background: transparent;
font-family: "Source Han Sans CN", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
box-sizing: border-box;
color: rgb(132, 136, 142);
white-space: nowrap;
}
}
}
}
.box2-footer {
position: absolute;
left: 26px;
right: 20px;
bottom: 20px;
width: 460px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: var(--color-main-active);
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
color: rgba(255, 255, 255, 1);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
</style>
\ No newline at end of file
src/components/dialog.vue deleted 100644 → 0
浏览文件 @ 9d0c0ce1
<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">{{ formattedTime }} · {{ source }}</span>
</div>
<div class="bubble-content" @click="handleInfoClick">
{{ content }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
const props = 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 formattedTime = computed(() => {
const date = new Date(props.time);
if (isNaN(date.getTime())) {
return props.time; // 如果不是有效日期，返回原值
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}月${day}日 ${hours}:${minutes}`;
});
const handleClick = () => {
emit("click");
};
const handleInfoClick = () => {
emit("info-click");
};
</script>
<style scoped>
.message-bubble {
display: flex;
max-width: 750px;
margin-top: 5px;
margin-bottom: 12px;
}
.avatar-container {
flex-shrink: 0;
flex-grow: 0;
flex: 0;
margin-right: 12px;
cursor: pointer;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.bubble-container {
flex: 1;
position: relative;
}
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 12px;
position: relative;
border: 1px solid rgba(231, 243, 255, 1);
/* 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/dialog/dialog.vue 0 → 100644
浏览文件 @ ebc89c2c
<template>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./image1.png" alt="" />
</div>
<div class="header-title">{{ "社交媒体" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
<div class="box4-main">
<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
<div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
<div class="avatar-containerOne" v-if="isRepublicanParty"><img src="./image2.png" alt=""
class="avatar-imageOne" /></div>
<div class="avatar-containerTwo" v-if="isUnitedStatesSenate"><img src="./image3.png" alt=""
class="avatar-imageTwo" /></div>
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ item[props.name] }}</span>
<span class="meta">{{ item[props.time] }} · {{ item[props.source] }}</span>
</div>
<div class="bubble-content">
{{ item[props.content] }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
<!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" /> -->
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="content">{{ item.content }}</div>
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
const props = defineProps({
isRepublicanParty: {
type: Boolean,
default: false
},
isUnitedStatesSenate: {
type: Boolean,
default: false
},
messageList: {
type: Array,
default: () => []
},
imageUrl: {
type: String,
default: "imageUrl"
},
name: {
type: String,
default: "name"
},
time: {
type: String,
default: "time"
},
source: {
type: String,
default: "source"
},
content: {
type: String,
default:
"content"
}
});
const formattedTime = computed((index) => {
const date = new Date(index);
if (isNaN(date.getTime())) {
return index; // 如果不是有效日期，返回原值
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}月${day}日 ${hours}:${minutes}`;
});
const handleClickPerson = (item) => {
emit("person-click", item);
};
const handleInfoClick = (item) => {
emit("info-click", item);
};
const handleToMoreNews = (item) => {
emit("more-click", item);
};
</script>
<style scoped>
.box4 {
margin-left: 20px;
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
border: 1px solid rgb(234, 236, 238);
.box4-header {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
box-sizing: border-box;
position: relative;
.header-icon {
margin-left: 18px;
margin-top: 14px;
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
width: 80px;
margin-top: 11px;
margin-left: 18px;
height: 26px;
color: rgb(5, 95, 194);
font-family: "Source Han Sans CN";
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
}
.more {
width: 45px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgb(5, 95, 194);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
text-align: right;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
box-sizing: border-box;
padding-bottom: 8px;
padding-left: 21px;
padding-top: 23px;
.message-bubble {
display: flex;
max-width: 740px;
margin-bottom: 15px;
.avatar-container {
flex-shrink: 0;
flex-grow: 0;
flex: 0;
width: 42px;
height: 42px;
margin-right: 14.5px;
cursor: pointer;
position: relative;
.avatar-containerOne,
.avatar-containerTwo {
display: inline-block;
position: absolute;
}
.avatar-containerOne {
left: 2px;
top: 29px;
.avatar-imageOne {
width: 20px;
height: 20px;
}
}
.avatar-containerTwo {
right: 2px;
top: 29px;
.avatar-imageTwo {
width: 20px;
height: 20px;
}
}
.avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
}
}
.bubble-container {
flex: 1;
position: relative;
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 12px;
position: relative;
border: 1px solid rgba(231, 243, 255, 1);
/* 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;
.name {
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.meta {
color: rgb(95, 101, 108);
font-family: "Source Han Sans CN";
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: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.triangle {
position: absolute;
left: -9px;
/* 向左偏移1px，给描边留出空间 */
top: 15px;
width: 0;
height: 0;
/* 外层：描边颜色的三角形（比内层大1px） */
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid rgb(231, 243, 255);
}
/* 内层：原有颜色的三角形，覆盖在外层上面，模拟描边效果 */
.triangle::after {
content: '';
position: absolute;
top: -8px;
/* 向上偏移1px，对齐中心 */
left: 1px;
/* 向右偏移1px，露出外层的描边 */
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/stores/writtingAsstaintStore.js
浏览文件 @ ebc89c2c
...@@ -162,6 +162,47 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', { ...@@ -162,6 +162,47 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
} }
}, },
// ========== 获取政令基础信息 (翻译栏数据) ==========
async fetchOrderBaseInfo(orderId) {
try {
const response = await fetch('/reportData/get-order-base-info', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ order_id: Number(orderId) })
});
const data = await response.json();
if (data.status === 'success' && data.result) {
const res = data.result;
// 1. 填充元数据 (用于翻译栏顶部的标题卡片)
this.pdfMetadata = {
name: res.order_name_zh,
order_title: res.order_name,
signing_date: res.post_date
};
// 2. 填充条款翻译内容
this.clauseTranslationMessages = (res.clauses || []).map(item => ({
event: 'clause_translation',
payload: {
clause_number: item.section_num,
clause_section: item.section_num, // 这里根据结构复用 section_num
clause_content: item.section_text,
clause_content_zh: item.section_text_zh
}
}));
// 3. 自动展示翻译栏
this.isShowClauseTranslation = true;
this.isShowSteps = true;
console.log('政令基础信息获取并回填成功:', res);
}
} catch (error) {
console.error('获取政令基础信息失败:', error);
}
},
// ========== 获取业务数据并触发生成 (业务封装) ========== // ========== 获取业务数据并触发生成 (业务封装) ==========
async fetchOrderReportData(orderId) { async fetchOrderReportData(orderId) {
await this._fetchBusinessData({ await this._fetchBusinessData({
...@@ -425,7 +466,7 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', { ...@@ -425,7 +466,7 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
this.isShowProcess = true; this.isShowProcess = true;
if (Object.keys(this.routeQuery).length !== 0) { if (Object.keys(this.routeQuery).length !== 0) {
const { fileId, topic } = this.routeQuery; const { fileId } = this.routeQuery;
// 外部跳转：根据 topic 决定调用哪种数据获取接口，再触发生成 // 外部跳转：根据 topic 决定调用哪种数据获取接口，再触发生成
if (fileId) { if (fileId) {
...@@ -434,6 +475,8 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', { ...@@ -434,6 +475,8 @@ export const useWrittingAsstaintStore = defineStore('writtingAsstaint', {
} else if (this.curTempTitle === '清单') { } else if (this.curTempTitle === '清单') {
await this.fetchListReportData(fileId); await this.fetchListReportData(fileId);
} else { } else {
// 政令：先获取基础信息(用于翻译栏)，再获取写报数据并生成
await this.fetchOrderBaseInfo(fileId);
await this.fetchOrderReportData(fileId); await this.fetchOrderReportData(fileId);
} }
return; return;
......
src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue
浏览文件 @ ebc89c2c
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<div class="news-content"> <div class="news-content">
<div v-for="value in newsList" 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)">
......
src/views/ZMOverView/components/gameProfile/index.vue
浏览文件 @ ebc89c2c
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
数据来源: 数据来源:
<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px" <el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"
v-model="origin" @change="handleGetCompare()"> v-model="origin" @change="handleGetCompare()">
<el-option :value="value.id" :label="value.name" v-for="value in originList" /> <el-option :value="value.id" :label="value.name" v-for="value,index in originList" :key="index" />
</el-select> </el-select>
</div> </div>
<div style="display: flex"> <div style="display: flex">
......
src/views/coopRestriction/components/askPage/index.vue
浏览文件 @ ebc89c2c
<template> <template>
<div class="ask-page"> <div class="ask-page">
<div class="left"> <!-- <div class="left">
<div class="left-title">
<NewsList :list="leftList" :errImg="defaultNews"/>
<!-- <div class="left-title">
<img src="./assets/icon01.png" alt=""> <img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div> <div class="tit">新闻资讯</div>
<div class="more" @click="handleToMoreNews">更多 +</div> <div class="more" @click="handleToMoreNews">更多 +</div>
</div> </div>
<div class="left-main"> <div class="left-main">
<div v-for="item in leftList.slice(0, 5)" :key="item.id" class="main-item" @click="handleToNewsDetail(item)"> <div v-for="item in leftList" :key="item.id" class="main-item" @click="handleToNewsDetail(item)">
<img :src="item.image || defaultNews" alt="" @error="e => e.target.src = defaultNews"> <img :src="item.image || defaultNews" alt="" @error="e => e.target.src = defaultNews">
<div class="item-content"> <div class="item-content">
<div class="title"> <div class="title">
...@@ -26,15 +23,20 @@ ...@@ -26,15 +23,20 @@
<div class="time">{{ item.time }}</div> <div class="time">{{ item.time }}</div>
</div> </div>
</div> </div>
</div> -->
</div> </div>
<div class="right"> </div> -->
<NewsList :newsList="leftList" @item-click="handleToNewsDetail" @more-click="handleToMoreNews" img="image"
title="title" content="content" from="from" />
<MessageBubble :messageList="rightList" imageUrl="personImage" @more-click="handleToSocialDetail"
@person-click="handleToSocialDetail" name="name" content="content" source="orgName" image-url="image" />
<!-- <div class="right">
<div class="right-title"> <div class="right-title">
<img src="./assets/icon02.png" alt=""> <img src="./assets/icon02.png" alt="">
<div class="tit">社交媒体</div> <div class="tit">社交媒体</div>
</div> </div>
<div class="right-main"> <div class="right-main">
<div v-for="(item, index) in rightList.slice(0, 3)" :key="item.id" class="social-item" @click="handleToSocialDetail(item)"> <div v-for="(item, index) in rightList.slice(0, 3)" :key="item.id" class="social-item"
@click="handleToSocialDetail(item)">
<img :src="item.image || defaultAvatar" alt="" @error="e => e.target.src = defaultAvatar"> <img :src="item.image || defaultAvatar" alt="" @error="e => e.target.src = defaultAvatar">
<div class="social-item-main" :style="{ backgroundImage: `url(${socialConfig[index].bg})` }"> <div class="social-item-main" :style="{ backgroundImage: `url(${socialConfig[index].bg})` }">
<div class="cl1">{{ item.name }}</div> <div class="cl1">{{ item.name }}</div>
...@@ -43,11 +45,13 @@ ...@@ -43,11 +45,13 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
import MessageBubble from "@/components/dialog/dialog.vue";
import NewsList from "@/components/NewsList/NewsList.vue";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import router from '@/router' import router from '@/router'
import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction' import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'
...@@ -74,12 +78,13 @@ const getCoopRestrictionSocialData = async () => { ...@@ -74,12 +78,13 @@ const getCoopRestrictionSocialData = async () => {
const d = date.getDate().toString().padStart(2, '0'); const d = date.getDate().toString().padStart(2, '0');
const hh = date.getHours().toString().padStart(2, '0'); const hh = date.getHours().toString().padStart(2, '0');
const mm = date.getMinutes().toString().padStart(2, '0'); const mm = date.getMinutes().toString().padStart(2, '0');
const formattedTime = `${y}-${m}-${d} ${hh}:${mm} · 发布于${item.orgName}`; const formattedTime = `${y}-${m}-${d} ${hh}:${mm} `;
return { return {
id: item.personId, id: item.personId,
name: item.personName, name: item.personName,
content: item.remarks, content: item.remarks,
time: formattedTime, time: formattedTime,
orgName: item.orgName,
image: item.personImage image: item.personImage
} }
}); });
...@@ -95,14 +100,14 @@ const getCoopRestrictionNewsData = async () => { ...@@ -95,14 +100,14 @@ const getCoopRestrictionNewsData = async () => {
try { try {
const res = await getCoopRestrictionNews({ moduleId: "0106" }); const res = await getCoopRestrictionNews({ moduleId: "0106" });
if (res && res.code === 200) { if (res && res.code === 200) {
leftList.value = res.data || [] leftList.value = (res.data || []).map(item => ({
// leftList.value = (res.data || []).map(item => ({ id: item.newsId,
// id: item.newsId, title: item.newsTitle,
// title: item.newsTitle, content: item.newsContent,
// content: item.newsContent, time: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
// time: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`, image: item.newsImage,
// image: item.newsImage from: `${item.newsDate}${item.newsOrg ? ' · ' + item.newsOrg : ''}`,
// })); }));
} }
} catch (error) { } catch (error) {
console.error("获取合作限制新闻资讯数据失败:", error); console.error("获取合作限制新闻资讯数据失败:", error);
...@@ -159,11 +164,13 @@ onMounted(() => { ...@@ -159,11 +164,13 @@ onMounted(() => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.ask-page { .ask-page {
width: 1600px; width: 1600px;
height: 450px; height: 450px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 792px; width: 792px;
height: 450px; height: 450px;
...@@ -172,11 +179,13 @@ onMounted(() => { ...@@ -172,11 +179,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.left-title { .left-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
...@@ -184,6 +193,7 @@ onMounted(() => { ...@@ -184,6 +193,7 @@ onMounted(() => {
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
width: 80px; width: 80px;
...@@ -195,6 +205,7 @@ onMounted(() => { ...@@ -195,6 +205,7 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
...@@ -209,29 +220,35 @@ onMounted(() => { ...@@ -209,29 +220,35 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
} }
.left-main { .left-main {
width: 792px; width: 792px;
height: 402px; height: 402px;
padding: 20px 22px 21px 21px; padding: 20px 22px 21px 21px;
.main-item { .main-item {
width: 749px; width: 749px;
height: 64px; height: 64px;
display: flex; display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-bottom: 14px; margin-bottom: 14px;
&:hover { &:hover {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
img { img {
width: 72px; width: 72px;
height: 48px; height: 48px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
} }
.item-content { .item-content {
width: 657px; width: 657px;
height: 50px; height: 50px;
position: relative; position: relative;
.title { .title {
width: 480px; width: 480px;
font-size: 16px; font-size: 16px;
...@@ -244,6 +261,7 @@ onMounted(() => { ...@@ -244,6 +261,7 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.content { .content {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
...@@ -256,6 +274,7 @@ onMounted(() => { ...@@ -256,6 +274,7 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.time { .time {
position: absolute; position: absolute;
top: 0px; top: 0px;
...@@ -271,6 +290,7 @@ onMounted(() => { ...@@ -271,6 +290,7 @@ onMounted(() => {
} }
} }
} }
.right { .right {
width: 792px; width: 792px;
height: 450px; height: 450px;
...@@ -278,11 +298,13 @@ onMounted(() => { ...@@ -278,11 +298,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.right-title { .right-title {
width: 792px; width: 792px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 19px; width: 19px;
height: 19px; height: 19px;
...@@ -290,6 +312,7 @@ onMounted(() => { ...@@ -290,6 +312,7 @@ onMounted(() => {
top: 16px; top: 16px;
left: 21px; left: 21px;
} }
.tit { .tit {
margin-left: 60px; margin-left: 60px;
width: 80px; width: 80px;
...@@ -301,6 +324,7 @@ onMounted(() => { ...@@ -301,6 +324,7 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.more { .more {
width: 49px; width: 49px;
height: 24px; height: 24px;
...@@ -315,28 +339,33 @@ onMounted(() => { ...@@ -315,28 +339,33 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
} }
.right-main { .right-main {
width: 792px; width: 792px;
height: 402px; height: 402px;
padding: 23px 30px 25px 21px; padding: 23px 30px 25px 21px;
overflow: auto; overflow: auto;
.social-item { .social-item {
width: 740px; width: 740px;
margin-bottom: 16px; margin-bottom: 16px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
img { img {
width: 36px; width: 36px;
height: 36px; height: 36px;
margin-right: 8.5px; margin-right: 8.5px;
border-radius: 50%; border-radius: 50%;
} }
.social-item-main { .social-item-main {
width: 695.6px; width: 695.6px;
padding: 11px 14px 12px 22.5px; padding: 11px 14px 12px 22.5px;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
.cl1 { .cl1 {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -345,6 +374,7 @@ onMounted(() => { ...@@ -345,6 +374,7 @@ onMounted(() => {
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
margin-bottom: 5px; margin-bottom: 5px;
} }
.cl2 { .cl2 {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -352,6 +382,7 @@ onMounted(() => { ...@@ -352,6 +382,7 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.cl3 { .cl3 {
position: absolute; position: absolute;
top: 11px; top: 11px;
......
src/views/coopRestriction/components/dataNew/index.vue
浏览文件 @ ebc89c2c
...@@ -9,16 +9,8 @@ ...@@ -9,16 +9,8 @@
<div class="more" @click="handleClickToDetail">查看详情 ></div> <div class="more" @click="handleClickToDetail">查看详情 ></div>
</div> </div>
<el-carousel <el-carousel ref="carouselRef" height="412px" direction="horizontal" :autoplay="true" :interval="5000"
ref="carouselRef" arrow="never" indicator-position="none" @change="handleCarouselChange">
height="412px"
direction="horizontal"
:autoplay="true"
:interval="5000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel-item v-for="(item, index) in coopRestrictionTrends" :key="item.ID || index"> <el-carousel-item v-for="(item, index) in coopRestrictionTrends" :key="item.ID || index">
<div class="carousel-item-content"> <div class="carousel-item-content">
<div class="left-center"> <div class="left-center">
...@@ -42,14 +34,9 @@ ...@@ -42,14 +34,9 @@
<li> <li>
<span class="ul-title">涉及领域：</span> <span class="ul-title">涉及领域：</span>
<div class="ul-tags" v-if="item.AREA"> <div class="ul-tags" v-if="item.AREA">
<span <span v-for="(field, fIndex) in typeof item.AREA === 'string'
v-for="(field, fIndex) in typeof item.AREA === 'string'
? item.AREA.split(',') ? item.AREA.split(',')
: item.AREA" : item.AREA" :key="fIndex" class="ul-pie" :class="'cl' + ((fIndex % 3) + 1)">
:key="fIndex"
class="ul-pie"
:class="'cl' + ((fIndex % 3) + 1)"
>
{{ field }} {{ field }}
</span> </span>
</div> </div>
...@@ -92,7 +79,7 @@ ...@@ -92,7 +79,7 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div class="right"> <!-- <div class="right">
<div class="right-top"> <div class="right-top">
<img src="./assets/icon02.png" alt="" /> <img src="./assets/icon02.png" alt="" />
<div class="right-top-title"> <div class="right-top-title">
...@@ -102,10 +89,8 @@ ...@@ -102,10 +89,8 @@
</div> </div>
<div style="margin: 6px 34px 0 23px"> <div style="margin: 6px 34px 0 23px">
<div v-for="item in riskSignals" :key="item.id" class="right-main" @click="handleToRiskDetail(item)"> <div v-for="item in riskSignals" :key="item.id" class="right-main" @click="handleToRiskDetail(item)">
<div <div class="main-left"
class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险', cl6: item.title === '一般风险' }">
:class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险', cl6: item.title === '一般风险' }"
>
{{ item.title }} {{ item.title }}
</div> </div>
<div class="item-right"> <div class="item-right">
...@@ -122,11 +107,14 @@ ...@@ -122,11 +107,14 @@
<img src="./assets/btn.png" alt="" /> <img src="./assets/btn.png" alt="" />
查看更多 查看更多
</div> </div>
</div> </div> -->
<RiskSignal :list="riskSignals" @more-click="handleToMoreRiskSignal" postDate="time" name="content"
riskLevel="title" @item-click="handleClickToDetail" />
</div> </div>
</template> </template>
<script setup> <script setup>
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { ref, onMounted, computed } from "vue"; import { ref, onMounted, computed } from "vue";
import router from "@/router"; import router from "@/router";
import { getCoopRestrictionTrends, getCoopRestrictionSignals } from "@/api/coopRestriction/coopRestriction.js"; import { getCoopRestrictionTrends, getCoopRestrictionSignals } from "@/api/coopRestriction/coopRestriction.js";
...@@ -236,11 +224,13 @@ onMounted(() => { ...@@ -236,11 +224,13 @@ onMounted(() => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.data-new { .data-new {
width: 1600px; width: 1600px;
height: 460px; height: 460px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 1064px; width: 1064px;
height: 460px; height: 460px;
...@@ -250,6 +240,7 @@ onMounted(() => { ...@@ -250,6 +240,7 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative; position: relative;
.left-btn { .left-btn {
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -260,6 +251,7 @@ onMounted(() => { ...@@ -260,6 +251,7 @@ onMounted(() => {
z-index: 100; z-index: 100;
pointer-events: auto; pointer-events: auto;
} }
.right-btn { .right-btn {
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -270,11 +262,13 @@ onMounted(() => { ...@@ -270,11 +262,13 @@ onMounted(() => {
z-index: 100; z-index: 100;
pointer-events: auto; pointer-events: auto;
} }
.left-top { .left-top {
width: 100%; width: 100%;
height: 48px; height: 48px;
position: relative; position: relative;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
...@@ -282,6 +276,7 @@ onMounted(() => { ...@@ -282,6 +276,7 @@ onMounted(() => {
top: 15px; top: 15px;
left: 23px; left: 23px;
} }
.more { .more {
position: absolute; position: absolute;
height: 48px; height: 48px;
...@@ -295,6 +290,7 @@ onMounted(() => { ...@@ -295,6 +290,7 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
z-index: 101; z-index: 101;
} }
.left-top-title { .left-top-title {
margin-left: 60px; margin-left: 60px;
width: 152px; width: 152px;
...@@ -309,10 +305,12 @@ onMounted(() => { ...@@ -309,10 +305,12 @@ onMounted(() => {
padding: 11px 16px; padding: 11px 16px;
} }
} }
.carousel-item-content { .carousel-item-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.left-center { .left-center {
width: 967px; width: 967px;
height: 208px; height: 208px;
...@@ -320,15 +318,19 @@ onMounted(() => { ...@@ -320,15 +318,19 @@ onMounted(() => {
margin-left: 62px; margin-left: 62px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 148px; width: 148px;
height: 148px; height: 148px;
margin-right: 21px; margin-right: 21px;
} }
display: flex; display: flex;
.left-center-main { .left-center-main {
width: 439px; width: 439px;
height: 175px; height: 175px;
.left-center-main-title { .left-center-main-title {
margin-left: 19px; margin-left: 19px;
margin-bottom: 17px; margin-bottom: 17px;
...@@ -337,17 +339,21 @@ onMounted(() => { ...@@ -337,17 +339,21 @@ onMounted(() => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
.left-center-main-ul { .left-center-main-ul {
width: 439px; width: 439px;
height: 132px; height: 132px;
ul { ul {
list-style-position: inside; list-style-position: inside;
li { li {
width: 100%; width: 100%;
min-height: 24px; min-height: 24px;
margin-bottom: 12px; margin-bottom: 12px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
&::before { &::before {
content: "·"; content: "·";
font-size: 24px; font-size: 24px;
...@@ -356,6 +362,7 @@ onMounted(() => { ...@@ -356,6 +362,7 @@ onMounted(() => {
margin-right: 16px; margin-right: 16px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.ul-title { .ul-title {
flex-shrink: 0; flex-shrink: 0;
width: 120px; width: 120px;
...@@ -365,6 +372,7 @@ onMounted(() => { ...@@ -365,6 +372,7 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.ul-content { .ul-content {
flex: 1; flex: 1;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
...@@ -373,12 +381,14 @@ onMounted(() => { ...@@ -373,12 +381,14 @@ onMounted(() => {
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
.ul-tags { .ul-tags {
flex: 1; flex: 1;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
} }
.ul-pie { .ul-pie {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
...@@ -389,16 +399,19 @@ onMounted(() => { ...@@ -389,16 +399,19 @@ onMounted(() => {
line-height: 18px; line-height: 18px;
white-space: nowrap; white-space: nowrap;
} }
.cl1 { .cl1 {
border-color: rgba(186, 224, 255, 1); border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1); background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
} }
.cl2 { .cl2 {
border-color: rgba(255, 163, 158, 1); border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1); color: rgba(245, 34, 45, 1);
} }
.cl3 { .cl3 {
border-color: rgba(135, 232, 222, 1); border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1); background-color: rgba(230, 255, 251, 1);
...@@ -408,6 +421,7 @@ onMounted(() => { ...@@ -408,6 +421,7 @@ onMounted(() => {
} }
} }
} }
.left-center-title { .left-center-title {
padding: 3px 8px 5px; padding: 3px 8px 5px;
height: 32px; height: 32px;
...@@ -423,10 +437,13 @@ onMounted(() => { ...@@ -423,10 +437,13 @@ onMounted(() => {
top: -1px; top: -1px;
} }
} }
.left-bottom { .left-bottom {
margin: 17px 0 0 62px; margin: 17px 0 0 62px;
ul { ul {
list-style-position: inside; list-style-position: inside;
.left-bottom-li { .left-bottom-li {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -436,6 +453,7 @@ onMounted(() => { ...@@ -436,6 +453,7 @@ onMounted(() => {
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
&::before { &::before {
content: "·"; content: "·";
font-size: 24px; font-size: 24px;
...@@ -446,6 +464,7 @@ onMounted(() => { ...@@ -446,6 +464,7 @@ onMounted(() => {
} }
} }
} }
.left-bottom-content { .left-bottom-content {
width: 943px; width: 943px;
margin-left: 22px; margin-left: 22px;
...@@ -457,6 +476,7 @@ onMounted(() => { ...@@ -457,6 +476,7 @@ onMounted(() => {
} }
} }
} }
.right { .right {
width: 520px; width: 520px;
height: 460px; height: 460px;
...@@ -465,11 +485,13 @@ onMounted(() => { ...@@ -465,11 +485,13 @@ onMounted(() => {
border: 1px solid rgb(234, 236, 238); border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
position: relative; position: relative;
.right-top { .right-top {
width: 520px; width: 520px;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
position: relative; position: relative;
img { img {
width: 21px; width: 21px;
height: 16.84px; height: 16.84px;
...@@ -477,6 +499,7 @@ onMounted(() => { ...@@ -477,6 +499,7 @@ onMounted(() => {
top: 15.1px; top: 15.1px;
left: 19.5px; left: 19.5px;
} }
.right-top-title { .right-top-title {
padding: 11px 16px; padding: 11px 16px;
width: 148px; width: 148px;
...@@ -489,6 +512,7 @@ onMounted(() => { ...@@ -489,6 +512,7 @@ onMounted(() => {
text-align: center; text-align: center;
color: #fff; color: #fff;
margin-left: 60px; margin-left: 60px;
span { span {
display: inline-block; display: inline-block;
width: 24px; width: 24px;
...@@ -504,6 +528,7 @@ onMounted(() => { ...@@ -504,6 +528,7 @@ onMounted(() => {
} }
} }
} }
.right-main { .right-main {
width: 468px; width: 468px;
padding-right: 5px; padding-right: 5px;
...@@ -512,9 +537,11 @@ onMounted(() => { ...@@ -512,9 +537,11 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.main-left { .main-left {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -527,24 +554,29 @@ onMounted(() => { ...@@ -527,24 +554,29 @@ onMounted(() => {
padding: 6px 4px; padding: 6px 4px;
text-align: center; text-align: center;
} }
.cl4 { .cl4 {
background-color: rgba(255, 241, 240, 1); background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81); color: rgb(206, 79, 81);
} }
.cl5 { .cl5 {
background-color: rgba(255, 247, 230, 1); background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1); color: rgba(250, 140, 22, 1);
} }
.cl6 { .cl6 {
background-color: rgba(246, 255, 237, 1); background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1); color: rgba(82, 196, 26, 1);
} }
.item-right { .item-right {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
.main-center { .main-center {
flex: 1; flex: 1;
height: 30px; height: 30px;
...@@ -558,6 +590,7 @@ onMounted(() => { ...@@ -558,6 +590,7 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.main-right { .main-right {
width: 100px; width: 100px;
height: 24px; height: 24px;
...@@ -571,6 +604,7 @@ onMounted(() => { ...@@ -571,6 +604,7 @@ onMounted(() => {
} }
} }
} }
.right-mainbtn { .right-mainbtn {
width: 460px; width: 460px;
height: 42px; height: 42px;
...@@ -584,11 +618,13 @@ onMounted(() => { ...@@ -584,11 +618,13 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 8px; margin-right: 8px;
} }
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论