Skip to content

R
risk-monitor
提交 58e246df authored 作者: 张烨's avatar 张烨
浏览文件
操作

style:科技政令详情页布局调整

上级 88a48798
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 213 行增加 和 81 行删除
src/views/decree/decreeHome/index.vue
浏览文件 @ 58e246df
......@@ -254,7 +254,7 @@
<template #reference>
<div class="info-content">{{ item.content ? item.content : "暂无数据" }}</div>
</template>
</el-popover> -->
</el-popover> -->
</div>
</div>
</div>
......@@ -280,7 +280,7 @@
</el-select>
</div>
<div style="flex: auto;"></div>
<el-checkbox v-model="isChina" @change="handleChina">只看涉华政令</el-checkbox>
<el-checkbox v-model="isChina">只看涉华政令</el-checkbox>
<div class="select-box">
<div class="paixu-btn" @click="handleSwithSort">
<div class="icon1">
......@@ -297,7 +297,7 @@
</div>
<div class="home-main-footer-main">
<div class="left">
<!-- <div class="select-box">
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "政令类型" }}</div>
......@@ -311,7 +311,7 @@
</el-checkbox>
</div>
</div>
</div> -->
</div>
<!-- <div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
......@@ -381,16 +381,7 @@
<div class="main-item-center">
<div class="center-header">
<div class="title">{{ item.title }}</div>
<!-- <div
class="type-box"
:class="{
type1: item.status === 1,
type2: item.status === 2,
type3: item.status === 3
}"
>
{{ item.type }}
</div> -->
<!-- <div class="type-box type1">{{ item.type }}</div> -->
</div>
<div class="desc">{{ item.desc }}</div>
<div class="tag-box">
......@@ -1184,7 +1175,7 @@ const handleGetDecreeOrderList = async () => {
researchTypeIds: p1, // 全选时不传（为空）
sortFun: isSort.value,
isCN: isChina.value ? 1 : 0,
proposeName: [searchType.value.trim()],
proposeName: searchType.value.trim(),
years: p2, // 全选时不传（为空）
typeIds: checkedDecreeType.value.toString()
};
......@@ -3120,7 +3111,7 @@ onMounted(async () => {
}
.search-box {
width: 20%;
width: 360px;
}
.select-box {
......@@ -3191,10 +3182,9 @@ onMounted(async () => {
gap: 16px;
.left {
width: 20%;
width: 360px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-radius: 10px;
.select-box {
......@@ -3279,9 +3269,11 @@ onMounted(async () => {
min-height: 790px;
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
.main-item {
display: flex;
width: 100%;
min-height: 100px;
// height: 136px;
// background: orange;
......@@ -3335,13 +3327,18 @@ onMounted(async () => {
}
.main-item-center {
margin-left: 21px;
margin-bottom: 16px;
width: 1086px;
padding-left: 21px;
padding-bottom: 16px;
box-sizing: border-box;
width: 20px;
flex: auto;
.center-header {
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
.title {
height: 26px;
......@@ -3351,10 +3348,14 @@ onMounted(async () => {
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
flex: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.type-box {
flex: none;
height: 28px;
line-height: 28px;
padding: 0 8px;
......@@ -3365,21 +3366,26 @@ onMounted(async () => {
letter-spacing: 0px;
border-radius: 4px;
}
.type1 {
color: rgba(22, 119, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(232, 189, 11, 1);
background: rgba(232, 189, 11, 0.1);
}
.type2 {
color: rgba(19, 168, 168, 1);
background: rgba(230, 255, 251, 1);
}
.type3 {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
color: rgba(255, 149, 77, 1);
background: rgba(255, 149, 77, 0.1);
}
// .type1 {
// color: rgba(22, 119, 255, 1);
// background: rgba(230, 244, 255, 1);
// }
// .type2 {
// color: rgba(19, 168, 168, 1);
// background: rgba(230, 255, 251, 1);
// }
// .type3 {
// color: rgba(250, 140, 22, 1);
// background: rgba(255, 247, 230, 1);
// }
}
.desc {
......
src/views/decree/decreeLayout/index.vue
浏览文件 @ 58e246df
......@@ -60,6 +60,12 @@
</div>
<div class="text">{{ "政令原文" }}</div>
</div>
<div class="btn">
<div class="icon">
<img src="./assets/icons/link-icon.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
</div>
<div class="btn-active" @click="handleAnalysisClick">
<div class="icon-active">
<img src="./assets/icons/edit-icon.png" alt="" />
......@@ -509,7 +515,7 @@ onMounted(() => {
}
}
.layout-main-header-right-box {
width: 300px;
width: 450px;
margin-top: 19px;
.right-box-top {
.time {
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 58e246df
......@@ -142,7 +142,7 @@
</div> -->
</div>
<div class="box2">
<AnalysisBox title="主要指令" :showAllBtn="false">
<!-- <AnalysisBox title="主要指令" :showAllBtn="false">
<div v-if="curmajorList.length" class="box2-main">
<div class="box2-item" v-for="(item, index) in curmajorList" :key="index">
<div class="id">{{ index + 1 }}</div>
......@@ -157,6 +157,27 @@
</div>
</div>
<el-empty v-else description="暂无数据" :image-size="100" />
</AnalysisBox> -->
<AnalysisBox title="相关事件" :showAllBtn="false">
<div class="box2-main">
<el-empty v-if="!relatedEvents.length" description="暂无数据" :image-size="100" />
<div class="box2-item" v-for="(item, index) in relatedEvents" :key="index">
<div class="item-left">
<img :src="item.image" alt="" />
</div>
<div class="item-center">
<div class="bubble-header">
<span class="name">{{ item.title }}</span>
<span class="meta">{{ item.time }} · {{ "洛杉矶时报" }}</span>
</div>
<el-popover effect="dark" :width="1000" :content="item.content" placement="top-start">
<template #reference>
<div class="content">{{ item.content }}</div>
</template>
</el-popover>
</div>
</div>
</div>
</AnalysisBox>
<!-- <div class="box-header">
<div class="header-left"></div>
......@@ -234,11 +255,8 @@
</div>
<div class="box3-bottom-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in eventList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div>
<el-timeline-item :timestamp="item.postDate" placement="top" v-for="(item, index) in eventList?.slice(0, 3)" :key="index">
<div class="timeline-content">{{ item.describe }}</div>
</el-timeline-item>
</el-timeline>
</div>
......@@ -321,6 +339,7 @@ import {
getDecreeOrganization,
getDecreeIssueOrganization
} from "@/api/decree/introduction";
import { getDecreeRelatedEvent } from "@/api/decree/background";
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
......@@ -364,6 +383,30 @@ const handleGetBasicInfo = async () => {
};
handleGetBasicInfo();
// 相关事件
const relatedEvents = ref([]);
const handleGetRelateEvents = async () => {
const params = {
id: decreeId.value
};
try {
const res = await getDecreeRelatedEvent(params);
console.log("相关事件", res);
if (res.code === 200 && res.data) {
relatedEvents.value = res.data.map(item => {
return {
image: item.imageUrl,
title: item.sjbt,
content: item.sjnr,
time: item.sjsj
};
});
} else {
relatedEvents.value = [];
}
} catch (error) { }
};
// 主要指令
const majorList = ref([
// {
......@@ -402,7 +445,7 @@ const handleMajorList = async () => {
}
} catch (error) { }
};
handleMajorList();
// handleMajorList();
// 发布机构
......@@ -455,7 +498,8 @@ const handleGetOrgnization = async () => {
box3TopTopData.value.logo = res.data.image;
box3TopTopData.value.name = res.data.name;
box3TopTopData.value.eName = res.data.ename;
eventList.value = res.data.newsList;
// eventList.value = res.data.newsList;
eventList.value = res.data.orderInfoList;
box3TopBottomData.value = res.data.personList;
}
......@@ -473,6 +517,7 @@ const handleGetOrgnization = async () => {
};
onMounted(() => {
handleGetRelateEvents();
handleGetOrgnization();
});
</script>
......@@ -673,60 +718,134 @@ onMounted(() => {
width: 1064px;
height: 415px;
// .box2-main {
// margin-left: 22px;
// height: 280px;
// overflow: hidden;
// overflow-y: auto;
// .box2-item {
// width: 1015px;
// // height: 48px;
// margin-bottom: 8px;
// box-sizing: border-box;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 2px;
// background: rgba(255, 255, 255, 1);
// display: flex;
// align-items: center;
// padding: 12px 0;
// &:nth-child(2n-1) {
// background: rgba(247, 248, 249, 1);
// }
// .id {
// margin-left: 15px;
// width: 24px;
// height: 24px;
// text-align: center;
// line-height: 24px;
// border-radius: 12px;
// background: #e7f3ff;
// color: #0a57a6;
// }
// .title {
// width: 1020px;
// line-height: 24px;
// margin-left: 10px;
// color: rgba(59, 65, 75, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 700;
// // overflow: hidden;
// // text-overflow: ellipsis;
// // white-space: nowrap;
// }
// .open {
// width: 16px;
// height: 16px;
// margin-top: 16px;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
// }
.box2-main {
margin-left: 22px;
height: 280px;
margin-top: 3px;
margin-left: 31px;
height: 330px;
width: 1004px;
overflow: hidden;
overflow-y: auto;
.box2-item {
width: 1015px;
// height: 48px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
padding: 12px 0;
height: 60px;
width: 100%;
margin-bottom: 2px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin-top: 10px;
&:nth-child(2n-1) {
background: rgba(247, 248, 249, 1);
}
.item-left {
width: 64px;
height: 48px;
border-radius: 2px;
.id {
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 1020px;
line-height: 24px;
margin-left: 10px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
.item-center {
flex: auto;
width: 20px;
margin-left: 14px;
.bubble-header {
display: flex;
align-items: center;
.name {
flex: auto;
width: 20px;
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.open {
width: 16px;
height: 16px;
margin-top: 16px;
.meta {
color: rgb(95, 101, 108);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
}
}
img {
.content {
width: 100%;
height: 100%;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
}
}
......
vite.config.js
浏览文件 @ 58e246df
......@@ -53,6 +53,7 @@ export default defineConfig({
'/api': {
target: 'http://8.140.26.4:9085/',
// target: 'http://192.168.0.4:28080/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论