Skip to content

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

areaTag、LeftBtn、RightBtn、AnalysisBox公共组件更新

上级 d4b8b274
隐藏空白字符变更
内嵌 并排
正在显示 包含 616 行增加 和 81 行删除
src/components/BoxBackground/analysisBox.vue 0 → 100644
浏览文件 @ 8bcfd2c2
<template>
<div class="analysis-box-wrapper" :style="{ width: width ? width : '100%', height: height ? height : '100%' }">
<div class="wrapper-header">
<div class="header-icon"></div>
<div class="header-title">{{ title }}</div>
<div class="header-right">
<div class="header-right-btn" @click="handleSave" v-if="showAllBtn">
<img src="@/assets/icons/box-header-icon1.png" alt="">
</div>
<div class="header-right-btn" @click="handleDownload">
<img src="@/assets/icons/box-header-icon2.png" alt="">
</div>
<div class="header-right-btn" @click="handleCollect">
<img src="@/assets/icons/box-header-icon3.png" alt="">
</div>
</div>
</div>
<div class="wrapper-main">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
title: {
type: String,
default: ''
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
},
showAllBtn: {
type: Boolean,
default: true
}
})
const handleSave = () => {
alert('save')
}
const handleDownload = () => {
alert('download')
}
const handleCollect = () => {
alert('collect')
}
</script>
<style lang="scss" scoped>
.analysis-box-wrapper {
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);
.wrapper-header {
height: 45px;
display: flex;
box-sizing: border-box;
position: relative;
.header-icon {
margin-top: 18px;
width: 8px;
height: 20px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.header-title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
justify-content: flex-end;
gap: 4px;
.header-right-btn {
width: 28px;
height: 28px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
.wrapper-main {
height: calc(100% - 45px);
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
padding: 5px 10px;
}
}
</style>
src/components/BoxBackground/overviewBox.vue 0 → 100644
浏览文件 @ 8bcfd2c2
<template>
<div class="overview-box-wrapper" :style="{ width: width ? width : '640px', height: height ? height : '415px' }">
<div class="wrapper-header">
<div class="header-icon"></div>
<div class="header-title">{{ title }}</div>
<div class="header-right">
<div class="header-right-btn" @click="handleSave">
<img src="@/assets/icons/box-header-icon1.png" alt="">
</div>
<div class="header-right-btn" @click="handleDownload">
<img src="@/assets/icons/box-header-icon2.png" alt="">
</div>
<div class="header-right-btn" @click="handleCollect">
<img src="@/assets/icons/box-header-icon3.png" alt="">
</div>
</div>
</div>
<div class="wrapper-main">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
title: {
type: String,
default: ''
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
}
})
const handleSave = () => {
alert('save')
}
const handleDownload = () => {
alert('download')
}
const handleCollect = () => {
alert('collect')
}
</script>
<style lang="scss" scoped>
.overview-box-wrapper {
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);
.wrapper-header {
height: 45px;
display: flex;
box-sizing: border-box;
.header-icon {
margin-top: 18px;
width: 8px;
height: 20px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.header-title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
justify-content: flex-end;
gap: 4px;
.header-right-btn {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.wrapper-main {
height: calc(100% - 45px);
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
padding: 5px 10px;
}
}
</style>
src/components/areaTag.vue 0 → 100644
浏览文件 @ 8bcfd2c2
<template>
<div class="tag-wrapper" :class="classObject">
{{ tagName }}
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
const props = defineProps({
tagName: {
type: String,
default: '标签名称'
}
})
const classObject = computed(() => ({
'tag1': props.tagName === '人工智能',
'tag2': props.tagName === '生物科技',
'tag3': props.tagName === '新一代通信网络',
'tag4': props.tagName === '量子科技',
'tag5': props.tagName === '新能源',
'tag6': props.tagName === '集成电路',
'tag7': props.tagName === '海洋',
'tag8': props.tagName === '先进制造',
'tag9': props.tagName === '新材料',
'tag10': props.tagName === '航空航天',
'tag11': props.tagName === '太空',
'tag12': props.tagName === '深海',
'tag13': props.tagName === '极地',
'tag14': props.tagName === '核',
'tag15': props.tagName === '其他',
}))
</script>
<style lang="scss" scoped>
.tag-wrapper {
height: 24px;
padding: 0 8px;
line-height: 24px;
text-align: center;
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
box-sizing: border-box;
border-radius: 4px;
}
.tag1 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
.tag2 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tag3 {
border: 1px solid rgba(174, 214, 255, 1);
background: rgba(246, 250, 255, 1);
color: rgba(5, 95, 194, 1);
}
.tag4 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.tag5 {
border: 1px solid rgba(183, 235, 143, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.tag6 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag7 {
border: 1px solid rgba(156, 207, 245, 1);
background: rgba(241, 247, 250, 1);
color: rgba(15, 120, 199, 1);
}
.tag8 {
border: 1px solid rgba(255, 229, 143, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.tag9 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag10 {
border: 1px solid rgba(173, 198, 255, 1);
background: rgba(240, 245, 255, 1);
color: rgba(47, 84, 235, 1);
}
.tag11 {
border: 1px solid rgba(173, 198, 255, 1);
background: rgba(240, 245, 255, 1);
color: rgba(47, 84, 235, 1);
}
.tag12 {
border: 1px solid rgba(116, 146, 203, 1);
background: rgba(230, 244, 255, 1);
color: rgba(73, 104, 161, 1);
}
.tag13 {
border: 1px solid rgba(214, 228, 255, 1);
background: rgba(240, 245, 255, 1);
color: rgba(133, 165, 255, 1);
}
.tag14 {
border: 1px solid rgba(255, 187, 150, 1);
background: rgba(255, 242, 232, 1);
color: rgba(250, 84, 28, 1);
}
.tag15 {
border: 1px solid rgba(183, 235, 143, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
</style>
\ No newline at end of file
src/components/pageBtn/leftBtn.vue 0 → 100644
浏览文件 @ 8bcfd2c2
<template>
<div class="left-btn-wrapper">
<img src="@/assets/images/icon/card-btn-left.png" alt="">
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.left-btn-wrapper {
width: 24px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
src/components/pageBtn/rightBtn.vue 0 → 100644
浏览文件 @ 8bcfd2c2
<template>
<div class="right-btn-wrapper">
<img src="@/assets/images/icon/card-btn-right.png" alt="">
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.right-btn-wrapper {
width: 24px;
height: 48px;
img {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
src/main.js
浏览文件 @ 8bcfd2c2
......@@ -12,6 +12,12 @@ import "./styles/main.css";
import '@/assets/fonts/font.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import AreaTag from '@/components/areaTag.vue'
import leftBtn from "@/components/pageBtn/leftBtn.vue";
import rightBtn from "@/components/pageBtn/rightBtn.vue";
import OverviewBox from '@/components/BoxBackground/overviewBox.vue'
import AnalysisBox from '@/components/BoxBackground/analysisBox.vue'
// 引入 Pinia 实例
import pinia from './stores'
const app = createApp(App);
......@@ -29,4 +35,9 @@ app.use(ElementPlus, {
})
app.use(pinia) // 挂载 Pinia
app.component("CardTitle", CardTitle);
app.component('AreaTag', AreaTag)
app.component('leftBtn', leftBtn)
app.component('rightBtn', rightBtn)
app.component('OverviewBox', OverviewBox)
app.component('AnalysisBox', AnalysisBox)
app.mount("#app");
src/views/bill/billHome/index.vue
浏览文件 @ 8bcfd2c2
......@@ -164,19 +164,9 @@
{{ bill.billName }}
</div>
<div class="box1-main-left-info">
<div
class="info-box"
:class="{
info1: index === 0,
info2: index === 1,
info3: index === 2,
info4: index === 3
}"
v-for="(item, index) in bill.hylyList"
:key="index"
>
{{ item.industryName }}
</div>
<AreaTag v-for="(item, index) in bill.hylyList"
:key="index" :tagName="item.industryName"></AreaTag>
</div>
<div class="box1-main-left-info1">
<div class="info1-box">
......@@ -836,6 +826,7 @@ import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";
import { ElMessage } from "element-plus";
import AreaTag from "@/components/areaTag.vue";
const searchBillText = ref("");
......@@ -2147,42 +2138,6 @@ onUnmounted(() => {
margin-top: 17px;
display: flex;
gap: 8px;
.info-box {
max-width: 80px;
height: 24px;
text-align: center;
overflow: hidden;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
.info1 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.info2 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.info3 {
border: 1px solid rgba(255, 229, 143, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.info4 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
}
.box1-main-left-info1 {
margin-top: 25px;
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 8bcfd2c2
......@@ -2,7 +2,70 @@
<div class="introduction-wrap">
<div class="left">
<div class="box1">
<div class="box-header">
<analysis-box title="基本信息" :showAllBtn="false">
<div class="box1-main">
<div class="box1-main-left" v-if="basicInfo.img">
<img :src="basicInfo.img" alt="" />
</div>
<div v-else class="box1-main-left-img-mock">
<img class="img-mock-badge-img" src="./assets/images/badge.png">
<p class="img-mock-badge-title">{{ basicInfo.eName }}</p>
<p class="img-mock-badge-org">The White House</p>
</div>
<div class="box1-main-right">
<div class="item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right">{{ basicInfo.name }}</div>
</div>
<div class="item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text" v-if="basicInfo.eName?.length < 60">
{{ basicInfo.eName }}
</div>
<el-popover v-else effect="dark" :width="500" :content="basicInfo.eName" placement="top-start">
<template #reference>
<div class="item-right text">
{{ basicInfo.eName }}
</div>
</template>
</el-popover>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box">
<div class="tag" v-for="(area, index) in basicInfo.areaList" :key="index">
{{ area.industryName }}
</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right text">{{ basicInfo.signTime }}</div>
</div>
<div class="item">
<div class="item-left">{{ "发布机构：" }}</div>
<div class="item-right text">
{{ basicInfo.proposeOrgName }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "政令编号：" }}</div>
<div class="item-right text">
{{ basicInfo.bh }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "执行期限：" }}</div>
<div class="item-right text">
{{ basicInfo.deadline + " 天" }}
</div>
</div>
</div>
</div>
</analysis-box>
<!-- <div class="box-header">
<div class="header-left">
</div>
......@@ -76,10 +139,31 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
<div class="box2">
<div class="box-header">
<analysis-box title="主要指令" :showAllBtn="false">
<div class="box2-main">
<el-empty v-if="!curmajorList.length" description="暂无数据" :image-size="100" />
<div class="box2-item" v-for="(item, index) in curmajorList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.content }}</div>
<!-- <div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div> -->
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-left">{{ `共 ${majorListNum} 项` }}</div>
<div class="box2-footer-right">
<el-pagination @current-change="handleCurrentChange" :page-size="5" background layout="prev, pager, next"
:total="majorListNum" />
</div>
</div>
</analysis-box>
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">主要指令</div>
<div class="header-right">
......@@ -96,23 +180,76 @@
<div class="box2-item" v-for="(item, index) in curmajorList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.content }}</div>
<!-- <div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div> -->
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-left">{{ `共 ${majorListNum} 项` }}</div>
<div class="box2-footer-right">
<el-pagination @current-change="handleCurrentChange" :page-size="5" background
layout="prev, pager, next" :total="majorListNum" />
<el-pagination @current-change="handleCurrentChange" :page-size="5" background layout="prev, pager, next"
:total="majorListNum" />
</div>
</div>
</div> -->
</div>
</div>
<div class="right">
<div class="box3">
<div class="box-header">
<analysis-box title="发布机构" :showAllBtn="false">
<div class="box3-top">
<div class="box3-top-top" @click="handleToInstitution(box3TopTopData)">
<div class="left">
<img :src="box3TopTopData.logo ? box3TopTopData.logo : DefaultIcon2" alt="" />
</div>
<div class="right">
<div class="name">{{ box3TopTopData.name + " >" }}</div>
<div class="ename">{{ box3TopTopData.eName }}</div>
</div>
<!-- <div class="more">
<div class="text">{{ "查看官网" }}</div>
<div class="icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div> -->
</div>
<div class="box3-top-bottom">
<div class="box3-top-bottom-header">
<div class="icon">
<img src="./assets/images/box3-icon1.png" alt="" />
</div>
<div class="text">{{ "关键人物" }}</div>
</div>
<div class="box3-top-bottom-main">
<div class="box3-top-bottom-item" v-for="(item, index) in box3TopBottomData" :key="index">
<div class="box3-top-bottom-item-left">
<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
</div>
<div class="box3-top-bottom-item-right">
<div class="name">{{ item.name }}</div>
<div class="position">{{ item.job }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="box3-bottom">
<div class="box3-bottom-header">
<div class="header-icon">
<img src="./assets/images/box3-bottom-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "机构动态" }}</div>
</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>
</el-timeline>
</div>
</div>
</analysis-box>
<!-- <div class="box-header">
<div class="header-left"></div>
<div class="title">发布机构</div>
<div class="header-right">
......@@ -133,12 +270,6 @@
<div class="name">{{ box3TopTopData.name + " >" }}</div>
<div class="ename">{{ box3TopTopData.eName }}</div>
</div>
<!-- <div class="more">
<div class="text">{{ "查看官网" }}</div>
<div class="icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div> -->
</div>
<div class="box3-top-bottom">
<div class="box3-top-bottom-header">
......@@ -170,14 +301,14 @@
<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">
v-for="(item, index) in eventList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div>
</el-timeline-item>
</el-timeline>
</div>
</div>
</div> -->
</div>
</div>
</div>
......@@ -198,6 +329,7 @@ import {
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import AnalysisBox from "@/components/BoxBackground/analysisBox.vue";
const route = useRoute();
const decreeId = ref(route.query.id);
......@@ -444,9 +576,9 @@ onMounted(() => {
margin-top: 16px;
width: 1064px;
height: 414px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: rgba(255, 255, 255, 1);
.box1-main {
display: flex;
......@@ -455,13 +587,14 @@ onMounted(() => {
width: 395px;
height: 332px;
margin-left: 24px;
img {
width: 100%;
// height: 100%;
}
}
.box1-main-left-img-mock{
.box1-main-left-img-mock {
width: 240px;
height: 332px;
margin-left: 24px;
......@@ -470,17 +603,20 @@ onMounted(() => {
align-items: center;
flex-direction: column;
padding: 16px;
.img-mock-badge-img{
.img-mock-badge-img {
width: 80px;
height: 80px;
}
.img-mock-badge-title{
.img-mock-badge-title {
text-align: center;
font-size: 20px;
line-height: 28px;
color: #fff;
}
.img-mock-badge-org{
.img-mock-badge-org {
text-align: center;
font-size: 14px;
color: #fff;
......@@ -543,9 +679,9 @@ onMounted(() => {
margin-top: 16px;
width: 1064px;
height: 415px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: rgba(255, 255, 255, 1);
.box2-main {
margin-left: 22px;
......@@ -631,9 +767,9 @@ onMounted(() => {
margin-top: 16px;
width: 520px;
height: 845px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: rgba(255, 255, 255, 1);
.box3-top {
margin-top: 2px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论