Skip to content

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

出口管制样式优化

上级 2afd5596
隐藏空白字符变更
内嵌 并排
正在显示 包含 809 行增加 和 521 行删除
src/views/bill/billHome/index.vue
浏览文件 @ 4d2068b3
......@@ -276,7 +276,7 @@
</div>
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left">
<div class="left" @click="handleClcikToCharacter(index)">
<img :src="item.img" alt="" />
</div>
<div class="right">
......@@ -379,7 +379,12 @@
</el-select>
</div>
<div class="box8-main">
<div class="box8-main-item" v-for="(item, index) in box8Data" :key="index">
<div
class="box8-main-item"
v-for="(item, index) in box8Data"
:key="index"
@click="handleClcikToCharacter(0)"
>
<div class="box8-main-item-left">
<img :src="item.img" alt="" />
<div class="left-icon1">
......@@ -558,7 +563,36 @@
</div>
</div>
<div class="right-main">
<div class="right-main-box"></div>
<div class="right-main-box" v-for="(item, index) in footerBillList" :key="index">
<div class="header">
<div class="title">{{ item.name }}</div>
<div class="en-title">{{ item.eName }}</div>
</div>
<div class="main">
<div class="item">
<div class="item-left">{{ "提案人：" }}</div>
<div class="item-right">{{ item.tcr }}</div>
</div>
<div class="item">
<div class="item-left">{{ "委员会：" }}</div>
<div class="item-right">{{ item.wyh }}</div>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right1">
<div class="tag" v-for="(val, idx) in item.areaList" :key="idx">{{ val }}</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "最新动议：" }}</div>
<div class="item-right">{{ item.zxdy }}</div>
</div>
<div class="item">
<div class="item-left">{{ "法案进展：" }}</div>
<div class="item-right2"></div>
</div>
</div>
</div>
<div class="right-main-box"></div>
<div class="right-main-box"></div>
<div class="right-main-box"></div>
......@@ -648,9 +682,29 @@ import Cyy from "@/assets/icons/cyy.png";
import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";
import { iteratee } from "lodash";
const searchBillText = ref("");
// 跳转人物主页
const handleClcikToCharacter = index => {
let type;
if (index === 0) {
type = 2;
} else if (index === 1) {
type = 1;
} else {
type = 3;
}
const route = router.resolve({
path: "/characterPage",
query: {
type: type
}
});
window.open(route.href, "_blank");
};
// 返回首页
const handleBackHome = () => {
router.push({
......@@ -1455,6 +1509,36 @@ const footerSelectList2 = ref([
]);
const footerSelect2 = ref("全部提出议员");
const footerBillList = ref([
{
name: "H.R.1-大而美法案",
eName: "One Big Beautiful Bill Act",
tcr: "乔迪·阿灵顿等2人",
wyh: "众议院-预算委员会",
areaList: ["集成电路", "人工智能"],
zxdy: "2025.07.04 成为公法 No: 119-21",
progress: []
},
{
name: "H.R.1-大而美法案",
eName: "One Big Beautiful Bill Act",
tcr: "乔迪·阿灵顿等2人",
wyh: "众议院-预算委员会",
areaList: ["集成电路", "人工智能"],
zxdy: "2025.07.04 成为公法 No: 119-21",
progress: []
},
{
name: "H.R.1-大而美法案",
eName: "One Big Beautiful Bill Act",
tcr: "乔迪·阿灵顿等2人",
wyh: "众议院-预算委员会",
areaList: ["集成电路", "人工智能"],
zxdy: "2025.07.04 成为公法 No: 119-21",
progress: []
}
]);
onMounted(async () => {
handleGetHylyList();
......@@ -2406,6 +2490,7 @@ onUnmounted(() => {});
margin-top: 5px;
width: 36px;
height: 36px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......@@ -2733,12 +2818,17 @@ onUnmounted(() => {});
height: 340px;
.box8-main-item {
margin: 0 auto;
width: 458px;
width: 478px;
height: 51px;
margin-bottom: 16px;
display: flex;
align-items: center;
position: relative;
padding: 0 10px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.box8-main-item-left {
position: relative;
width: 42px;
......@@ -2801,7 +2891,7 @@ onUnmounted(() => {});
.box8-main-item-right {
position: absolute;
top: 0;
right: 0;
right: 10px;
width: 92px;
height: 51px;
text-align: right;
......@@ -3001,13 +3091,90 @@ onUnmounted(() => {});
}
.right-main {
height: 1264px;
overflow: hidden;
.right-main-box {
width: 1280px;
height: 300px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
box-shadow: 0px 0px 10px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
margin-bottom: 16px;
overflow: hidden;
.header {
height: 91px;
width: 1200px;
margin: 0 auto;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.title {
margin-top: 19px;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.en-title {
margin-top: 8px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.main {
width: 1200px;
margin: 0 auto;
margin-top: 2px;
.item {
margin-top: 12px;
height: 24px;
display: flex;
.item-left {
width: 91px;
height: 24px;
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;
}
.item-right {
margin-left: 10px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.item-right1 {
margin-left: 10px;
display: flex;
gap: 8px;
.tag {
height: 24px;
line-height: 24px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
}
}
.right-footer {
......
src/views/companyPages/component/researcher.vue
浏览文件 @ 4d2068b3
......@@ -36,7 +36,7 @@
<div class="section-header" style=" margin-top: 24px;">
<div style="display: flex;">
<div class="section-icon"></div>
<h3 class="section-title">年度研发投入对比</h3>
<h3 class="section-title">年度研发投入对比111</h3>
</div>
<div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon">
......
src/views/companyPages/index.vue
浏览文件 @ 4d2068b3
<template>
<div class="page-content">
<!-- 公司导航栏 -->
<div class="company-nav">
<div class="company-logo-title">
<img :src="data.company.logo" alt="华为logo" class="logo-img">
<div class="title-group">
<h1 class="company-name">{{ data.company.name }}</h1>
<p class="company-english">{{ data.company.englishName }}</p>
</div>
</div>
<div class="main-tabs">
<div v-for="(tab, index) in tabList" :class="activeTab === tab ? 'tab-active' : 'tab'" @click="activeTab = tab">
<img :src="'src/assets/icons/company' + (index + 1) + '.svg'" alt="邮件" class="icon mail-icon" />
{{ tab }}
</div>
</div>
</div>
<!-- 基础信息主体内容区 -->
<div class="main-content" v-if="activeTab === '基础信息'">
<!-- 左侧信息栏 -->
<div class="left-sidebar">
<img :src="data.company.logo" alt="华为logo" class="sidebar-logo">
<h2 class="sidebar-company-name">{{ data.company.name }}</h2>
<div class="contact-list">
<div class="contact-item">
<img src="../../assets/icons/shutter.svg" alt="网址" class="contact-icon">
<span>{{ data.contactInfo.website }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/location.svg" alt="地址" class="contact-icon">
<span>{{ data.contactInfo.address }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/call.svg" alt="电话" class="contact-icon">
<span>{{ data.contactInfo.phone }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/mail.svg" alt="邮箱" class="contact-icon">
<span>{{ data.contactInfo.email }}</span>
</div>
</div>
<div class="financial-list">
<div class="financial-item" v-for="(item, idx) in data.financialData" :key="idx">
<p class="financial-value">{{ item.value }}</p>
<p class="financial-label">{{ item.label }}</p>
</div>
</div>
</div>
<!-- 右侧内容区 -->
<div class="right-content">
<!-- 子标签栏 -->
<div class="sub-tabs">
<span v-for="(tab, idx) in tabListSmall" :key="idx"
:class="['sub-tab', activeTabSmall === tab ? 'active' : '']" @click="activeTabSmall = tab">
{{ tab }}
</span>
<div class="action-icons">
<img src="../../assets/icons/download.png" alt="下载" class="action-icon">
<img src="../../assets/icons/shoucang.png" alt="收藏" class="action-icon">
</div>
</div>
<!-- 企业概况内容 -->
<div v-if="activeTabSmall === '企业概况'">
<div class="overview-content">
<!-- 类别分布与经营信息 -->
<div class="info-grid">
<div class="info-card">
<h3 class="section-title">类别分布</h3>
<ul class="info-list">
<li v-for="(value, key) in data.categoryDist" :key="key" style="display: flex;align-items: center;">
<div class="li-icon"></div>
<span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span>
</li>
</ul>
</div>
<div class="info-card">
<h3 class="section-title">经营信息</h3>
<ul class="info-list">
<li v-for="(value, key) in data.businessInfo" :key="key" style="display: flex;align-items: center;">
<div class="li-icon"></div>
<span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 主要人员 -->
<div class="section">
<div class="section-header" style=" margin-top: 24px;">
<div class="section-icon"></div>
<h3 class="section-title">主要人员</h3>
</div>
<div class="personnel-grid">
<div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx">
<div class="personnel-card-header">
<img :src="person.avatar" alt="头像" class="person-avatar">
<div class="person-info">
<h4 class="person-name">{{ person.name }}</h4>
<p class="person-position">{{ person.position }}</p>
</div>
</div>
<p class="person-desc">{{ person.desc }}</p>
</div>
</div>
</div>
<!-- 分支机构 -->
<div class="section">
<div class="section-header">
<div class="section-icon"></div>
<h3 class="section-title">分支机构</h3>
</div>
<div class="branches-grid">
<div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx">
<span>{{ branch }}</span>
<img src="../../assets/icons/open.png" alt="箭头" class="branch-arrow">
</div>
</div>
</div>
</div>
<div v-if="activeTabSmall === '企业动态'">
<div class="timeline-box">
<Timeline :data="movementData" text-key="title" id-key="seq" />
</div>
</div>
</div>
</div>
<!-- '研发实力', '被制裁情况', '供应链情况'主体内容区 -->
<div class="main-content" v-if="activeTab === '研发实力'">
<Capability />
</div>
<SanctionsSituation‌ v-if="activeTab === '被制裁情况'" />
<SupplyChain v-if="activeTab === '供应链情况'" />
</div>
<div class="page-content">
<!-- 公司导航栏 -->
<div class="company-nav">
<div class="company-logo-title">
<img :src="data.company.logo" alt="华为logo" class="logo-img" />
<div class="title-group">
<h1 class="company-name">{{ data.company.name }}</h1>
<p class="company-english">{{ data.company.englishName }}</p>
</div>
</div>
<div class="main-tabs">
<div
v-for="(tab, index) in tabList"
:key="index"
:class="activeTab === tab.title ? 'tab-active' : 'tab'"
@click="activeTab = tab.title"
>
<img :src="activeTab === tab.title ? tab.activeIcon : tab.icon" alt="" />
{{ tab.title }}
</div>
</div>
</div>
<!-- 基础信息主体内容区 -->
<div class="main-content" v-if="activeTab === '基础信息'">
<!-- 左侧信息栏 -->
<div class="left-sidebar">
<img :src="data.company.logo" alt="华为logo" class="sidebar-logo" />
<h2 class="sidebar-company-name">{{ data.company.name }}</h2>
<div class="contact-list">
<div class="contact-item">
<img src="../../assets/icons/shutter.svg" alt="网址" class="contact-icon" />
<span>{{ data.contactInfo.website }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/location.svg" alt="地址" class="contact-icon" />
<span>{{ data.contactInfo.address }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/call.svg" alt="电话" class="contact-icon" />
<span>{{ data.contactInfo.phone }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/mail.svg" alt="邮箱" class="contact-icon" />
<span>{{ data.contactInfo.email }}</span>
</div>
</div>
<div class="financial-list">
<div class="financial-item" v-for="(item, idx) in data.financialData" :key="idx">
<p class="financial-value">{{ item.value }}</p>
<p class="financial-label">{{ item.label }}</p>
</div>
</div>
</div>
<!-- 右侧内容区 -->
<div class="right-content">
<!-- 子标签栏 -->
<div class="sub-tabs">
<span
v-for="(tab, idx) in tabListSmall"
:key="idx"
:class="['sub-tab', activeTabSmall === tab ? 'active' : '']"
@click="activeTabSmall = tab"
>
{{ tab }}
</span>
<div class="action-icons">
<img src="../../assets/icons/download.png" alt="下载" class="action-icon" />
<img src="../../assets/icons/shoucang.png" alt="收藏" class="action-icon" />
</div>
</div>
<!-- 企业概况内容 -->
<div v-if="activeTabSmall === '企业概况'">
<div class="overview-content">
<!-- 类别分布与经营信息 -->
<div class="info-grid">
<div class="info-card">
<h3 class="section-title">类别分布</h3>
<ul class="info-list">
<li
v-for="(value, key) in data.categoryDist"
:key="key"
style="display: flex; align-items: center"
>
<div class="li-icon"></div>
<span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span>
</li>
</ul>
</div>
<div class="info-card">
<h3 class="section-title">经营信息</h3>
<ul class="info-list">
<li
v-for="(value, key) in data.businessInfo"
:key="key"
style="display: flex; align-items: center"
>
<div class="li-icon"></div>
<span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 主要人员 -->
<div class="section">
<div class="section-header" style="margin-top: 24px">
<div class="section-icon"></div>
<h3 class="section-title">主要人员</h3>
</div>
<div class="personnel-grid">
<div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx">
<div class="personnel-card-header">
<img :src="person.avatar" alt="头像" class="person-avatar" />
<div class="person-info">
<h4 class="person-name">{{ person.name }}</h4>
<p class="person-position">{{ person.position }}</p>
</div>
</div>
<p class="person-desc">{{ person.desc }}</p>
</div>
</div>
</div>
<!-- 分支机构 -->
<div class="section">
<div class="section-header">
<div class="section-icon"></div>
<h3 class="section-title">分支机构</h3>
</div>
<div class="branches-grid">
<div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx">
<span>{{ branch }}</span>
<img src="../../assets/icons/open.png" alt="箭头" class="branch-arrow" />
</div>
</div>
</div>
</div>
<div v-if="activeTabSmall === '企业动态'">
<div class="timeline-box">
<Timeline :data="movementData" text-key="title" id-key="seq" />
</div>
</div>
</div>
</div>
<!-- '研发实力', '被制裁情况', '供应链情况'主体内容区 -->
<div class="main-content" v-if="activeTab === '研发实力'">
<Capability />
</div>
<SanctionsSituation‌ v-if="activeTab === '被制裁情况'" />
<SupplyChain v-if="activeTab === '供应链情况'" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import data from './data/huaweiData.json'
import movementData from './data/movement.json'
import { ref } from "vue";
import data from "./data/huaweiData.json";
import movementData from "./data/movement.json";
import Timeline from "./component/Timeline.vue";
import Capability from './component/Capability.vue';
import SanctionsSituation‌ from './component/SanctionsSituation‌.vue'
import SupplyChain from './component/SupplyChain.vue';
const tabList = ref(['基础信息', '研发实力', '被制裁情况', '供应链情况'])
const activeTab = ref('基础信息')
const tabListSmall = ref(['企业概况', '企业动态'])
const activeTabSmall = ref('企业概况')
import Capability from "./component/Capability.vue";
import SanctionsSituation‌ from "./component/SanctionsSituation‌.vue";
import SupplyChain from "./component/SupplyChain.vue";
import TabIcon1 from "./images/tab-icon1.png";
import TabIcon2 from "./images/tab-icon2.png";
import TabIcon3 from "./images/tab-icon3.png";
import TabIcon4 from "./images/tab-icon4.png";
import TabIcon1Active from "./images/tab-icon1-active.png";
import TabIcon2Active from "./images/tab-icon2-active.png";
import TabIcon3Active from "./images/tab-icon3-active.png";
import TabIcon4Active from "./images/tab-icon4-active.png";
const tabList = ref([
{
title: "基础信息",
icon: TabIcon1,
activeIcon: TabIcon1Active
},
{
title: "研发实力",
icon: TabIcon2,
activeIcon: TabIcon2Active
},
{
title: "被制裁情况",
icon: TabIcon3,
activeIcon: TabIcon3Active
},
{
title: "供应链情况",
icon: TabIcon4,
activeIcon: TabIcon4Active
}
]);
const activeTab = ref("基础信息");
const tabListSmall = ref(["企业概况", "企业动态"]);
const activeTabSmall = ref("企业概况");
</script>
<style scoped>
<style lang="scss" scoped>
/* 基础样式 */
.page-content {
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
background-color: #f5f7fa;
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
background-color: #f5f7fa;
}
/* 公司导航栏 */
.company-nav {
height: 124px;
align-items: center;
padding: 0 160px;
box-shadow: 0px 4px 4px 0px rgba(129, 128, 128, 0.25);
background: rgba(255, 255, 255, 1);
height: 124px;
align-items: center;
padding: 0 160px;
box-shadow: 0px 4px 4px 0px rgba(129, 128, 128, 0.25);
background: rgba(255, 255, 255, 1);
}
.company-logo-title {
display: flex;
align-items: center;
gap: 12px;
padding: 5px;
display: flex;
align-items: center;
gap: 12px;
padding: 5px;
}
.logo-img {
width: 60px;
height: 60px;
object-fit: contain;
width: 60px;
height: 60px;
object-fit: contain;
}
.title-group {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.company-name {
font-size: 18px;
color: #1d2129;
margin: 0;
font-size: 18px;
color: #1d2129;
margin: 0;
}
.company-english {
font-size: 12px;
color: #86909c;
margin: 0;
font-size: 12px;
color: #86909c;
margin: 0;
}
.main-tabs {
height: 48px;
height: 48px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 32;
padding: 0px 16px 0px 0px;
.tab {
color: rgba(59, 65, 75, 1);
height: 48px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom: 0px solid rgba(5, 95, 194, 1);
margin: 6px 30px 0 0;
}
.tab-active {
/* 导航/Tabs标签页/亮色/带图标-选中 */
color: rgba(5, 95, 194, 1);
height: 48px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom: 2px solid rgba(5, 95, 194, 1);
margin: 6px 30px 0 0;
}
height: 48px;
height: 48px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: 32;
padding: 0px 16px 0px 0px;
img {
width: 16px;
height: 16px;
margin-right: 4px;
}
.tab {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
height: 48px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom: 2px solid transparent;
margin: 6px 30px 0 0;
cursor: pointer;
}
.tab-active {
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
height: 48px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom: 2px solid rgba(5, 95, 194, 1);
margin: 6px 30px 0 0;
cursor: pointer;
}
}
.main-content {
margin: 16px 160px;
width: calc(100% - 320px);
display: flex;
margin: 16px 160px;
width: calc(100% - 320px);
display: flex;
}
/* 左侧信息栏 */
.left-sidebar {
width: 360px;
/* height: calc(100vh - 220px); */
background-color: #fff;
border-radius: 6px;
padding: 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
width: 360px;
/* height: calc(100vh - 220px); */
background-color: #fff;
border-radius: 6px;
padding: 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.sidebar-logo {
width: 132px;
height: 124px;
width: 132px;
height: 124px;
object-fit: contain;
margin: 60px 90px 0px;
display: block;
object-fit: contain;
margin: 60px 90px 0px;
display: block;
}
.sidebar-company-name {
text-align: center;
color: #1d2129;
margin: 48px 0 20px;
padding-bottom: 15px;
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
text-align: center;
color: #1d2129;
margin: 48px 0 20px;
padding-bottom: 15px;
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 24px;
font-weight: 700;
line-height: 32px;
letter-spacing: 0px;
text-align: center;
}
.contact-list {
margin-bottom: 20px;
margin-bottom: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #4e5969;
margin-bottom: 12px;
color: rgba(59, 65, 75, 1);
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #4e5969;
margin-bottom: 12px;
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
.contact-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.financial-list {
padding-top: 15px;
padding-top: 15px;
}
.financial-item {
text-align: center;
padding: 12px 0;
text-align: center;
padding: 12px 0;
}
.financial-item:last-child {
border-bottom: none;
border-bottom: none;
}
.financial-value {
font-size: 20px;
color: #1890ff;
font-weight: 600;
margin: 0 0 5px;
font-size: 20px;
color: #1890ff;
font-weight: 600;
margin: 0 0 5px;
}
.financial-label {
font-size: 12px;
color: #86909c;
margin: 0;
font-size: 12px;
color: #86909c;
margin: 0;
}
/* 右侧内容区 */
.right-content {
/* height: calc(100vh - 220px); */
width: 100%;
margin-left: 16px;
flex: 1;
background-color: #fff;
border-radius: 6px;
/* height: calc(100vh - 220px); */
width: 100%;
margin-left: 16px;
flex: 1;
background-color: #fff;
border-radius: 6px;
border-radius: 4px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
border-radius: 4px;
/* 业务系统/模块阴影 */
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.sub-tabs {
height: 56px;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 56px;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sub-tab {
/* 切换按钮 */
width: 80px;
height: 28px;
/* 自动布局 */
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(59, 65, 75, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
/* 切换按钮 */
width: 80px;
height: 28px;
/* 自动布局 */
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(59, 65, 75, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
}
.sub-tab.active {
/* 切换按钮 */
width: 80px;
height: 28px;
/* 自动布局 */
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
/* 切换按钮 */
width: 80px;
height: 28px;
/* 自动布局 */
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
}
.action-icons {
display: flex;
gap: 15px;
margin-left: auto;
display: flex;
gap: 15px;
margin-left: auto;
}
.action-icon {
/* 收藏按钮 */
width: 28px;
height: 28px;
cursor: pointer;
/* 收藏按钮 */
width: 28px;
height: 28px;
cursor: pointer;
}
/* 信息网格 */
.info-grid {
display: flex;
gap: 16px;
padding: 0 24px;
display: flex;
gap: 16px;
padding: 0 24px;
}
.info-card {
flex: 1;
background-color: #f9fafb;
border-radius: 6px;
padding: 12px 16px;
flex: 1;
background-color: #f9fafb;
border-radius: 6px;
padding: 12px 16px;
}
.info-list {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}
.info-list li {
font-size: 13px;
margin-bottom: 12px;
line-height: 1.5;
font-size: 13px;
margin-bottom: 12px;
line-height: 1.5;
}
.li-icon {
/* 路径 */
width: 4px;
height: 4px;
background: rgba(59, 65, 75, 1);
border-radius: 50%;
/* 路径 */
width: 4px;
height: 4px;
background: rgba(59, 65, 75, 1);
border-radius: 50%;
}
.info-key {
width: 100px;
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
margin-left: 22px;
width: 100px;
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
margin-left: 22px;
}
.info-value {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
/* 主要人员 */
.section {
/* margin-bottom: 25px; */
/* margin-bottom: 25px; */
}
.section-header {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.section-icon {
width: 7px;
height: 18px;
border-radius: 0 4px 4px 0;
background: rgba(5, 95, 194, 1);
margin-right: 17px;
width: 7px;
height: 18px;
border-radius: 0 4px 4px 0;
background: rgba(5, 95, 194, 1);
margin-right: 17px;
}
.section-title {
font-size: 15px;
color: #1d2129;
margin: 0;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
margin: 0;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.personnel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 15px 23px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 15px 23px;
}
.personnel-card {
height: 150px;
box-sizing: border-box;
border: 1px solid rgba(223, 232, 239, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
height: 150px;
box-sizing: border-box;
border: 1px solid rgba(223, 232, 239, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
}
.personnel-card-header {
display: flex;
height: 78px;
background: rgba(246, 249, 250, 1);
padding: 11px 15px;
display: flex;
height: 78px;
background: rgba(246, 249, 250, 1);
padding: 11px 15px;
}
.person-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.person-info {
flex: 1;
margin: 0 16px;
flex: 1;
margin: 0 16px;
}
.person-name {
font-size: 14px;
font-size: 14px;
margin: 0;
color: rgba(10, 18, 30, 1);
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
margin: 0;
color: rgba(10, 18, 30, 1);
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.person-position {
margin: 0;
color: rgba(10, 18, 30, 1);
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
margin: 0;
color: rgba(10, 18, 30, 1);
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.person-desc {
padding: 16px 8px;
margin: 0;
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
padding: 16px 8px;
margin: 0;
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
/* 分支机构 */
.branches-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 10px;
padding: 12px 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 10px;
padding: 12px 24px;
}
.branch-item {
height: 54px;
display: flex;
align-items: center;
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
cursor: pointer;
padding: 12px 16px;
box-sizing: border-box;
border-top: 1px solid rgba(234, 236, 238, 1);
border-bottom: 1px solid rgba(234, 236, 238, 1);
margin-bottom: -1px;
border-radius: 4px;
background: rgba(255, 255, 255, 1);
height: 54px;
display: flex;
align-items: center;
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
cursor: pointer;
padding: 12px 16px;
box-sizing: border-box;
border-top: 1px solid rgba(234, 236, 238, 1);
border-bottom: 1px solid rgba(234, 236, 238, 1);
margin-bottom: -1px;
border-radius: 4px;
background: rgba(255, 255, 255, 1);
}
.branch-item:hover {
background-color: #f0f2f5;
background-color: #f0f2f5;
}
.branch-arrow {
width: 12px;
height: 12px;
margin-left: auto;
width: 12px;
height: 12px;
margin-left: auto;
}
/* 企业动态 */
.timeline-box {
display: flex;
height: calc(100vh - 220px);
display: flex;
height: calc(100vh - 220px);
}
/* 响应式适配 */
@media (max-width: 1200px) {
.personnel-grid {
grid-template-columns: repeat(2, 1fr);
}
.personnel-grid {
grid-template-columns: repeat(2, 1fr);
}
.branches-grid {
grid-template-columns: repeat(2, 1fr);
}
.branches-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.main-content {
flex-direction: column;
}
.left-sidebar {
width: 100%;
}
.info-grid {
flex-direction: column;
}
.personnel-grid {
grid-template-columns: 1fr;
}
.branches-grid {
grid-template-columns: 1fr;
}
.company-nav {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.main-nav {
margin-left: 0;
width: 100%;
overflow-x: auto;
padding-bottom: 5px;
}
.main-content {
flex-direction: column;
}
.left-sidebar {
width: 100%;
}
.info-grid {
flex-direction: column;
}
.personnel-grid {
grid-template-columns: 1fr;
}
.branches-grid {
grid-template-columns: 1fr;
}
.company-nav {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.main-nav {
margin-left: 0;
width: 100%;
overflow-x: auto;
padding-bottom: 5px;
}
}
</style>
\ No newline at end of file
src/views/exportControl/analysis/components/fishbone.vue
浏览文件 @ 4d2068b3
......@@ -117,8 +117,11 @@ onMounted(async () => {
}
.text {
margin-left: 4px;
height: 35px;
height: 70px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
......@@ -151,9 +154,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
margin-top: 7px;
......@@ -201,9 +208,13 @@ onMounted(async () => {
}
}
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
......@@ -236,9 +247,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
margin-top: 7px;
......@@ -286,9 +301,13 @@ onMounted(async () => {
}
}
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
......@@ -321,9 +340,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
margin-top: 7px;
......@@ -371,9 +394,13 @@ onMounted(async () => {
}
}
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
......@@ -406,9 +433,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
margin-top: 7px;
......@@ -456,9 +487,13 @@ onMounted(async () => {
}
}
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
......@@ -491,9 +526,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
margin-top: 7px;
......@@ -541,9 +580,13 @@ onMounted(async () => {
}
}
.text {
width: 100px;
margin-left: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line {
margin-left: 7px;
......@@ -576,9 +619,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1);
}
.text {
width: 100px;
margin-right: 4px;
height: 35px;
line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
margin-top: 7px;
......
src/views/exportControl/analysis/index.vue
浏览文件 @ 4d2068b3
......@@ -402,6 +402,7 @@ onMounted(() => {
margin-right: 32px;
margin-top: 3px;
height: 35px;
border-bottom: 2px solid transparent;
cursor: pointer;
// &:hover{
// .name {
......@@ -433,7 +434,7 @@ onMounted(() => {
}
}
.leftBoxBottomItemActive {
border-bottom: 3px solid rgba(20, 89, 187, 1);
border-bottom: 2px solid rgba(20, 89, 187, 1);
}
}
}
......
src/views/exportControl/components/CardCustom.vue
浏览文件 @ 4d2068b3
......@@ -91,12 +91,11 @@ function moreClick() {
}
.titleWrap {
margin-left: 16px;
height: 16px;
line-height: 16px;
height: 26px;
line-height: 26px;
color: var(--color-main-active);
font-size: 16px;
font-size: 20px;
font-weight: 600;
line-height: 16px;
}
.rightWrap {
display: flex;
......
src/views/exportControl/index.vue
浏览文件 @ 4d2068b3
......@@ -399,7 +399,7 @@
<el-checkbox v-model="checked" label="50%规则" size="large" />
</template>
<template #default>
<EChart :option="radarOption" autoresize :style="{ height: '450px' }" />
<EChart :option="radarOption" autoresize :style="{ height: '380px' }" />
</template>
</custom-container>
</el-col>
......@@ -474,7 +474,7 @@
</template>
</el-table-column>
<el-table-column prop="domains" label="涉及领域" min-width="180">
<el-table-column prop="domains" label="涉及领域" min-width="150">
<template #default="scope">
<div class="domain-tags">
<el-tag
......@@ -514,12 +514,19 @@
<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
<template #default="scope">
<span
:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']"
>
{{ scope.row.name }}...等
<span style="color: #409eff">{{ scope.row.ruleOrgCount }}家> </span>
</span>
<div class="num-item">
<div
class="name-item"
:class="[
'revenue-cell',
scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
]"
>
{{ scope.row.name }}...等
</div>
<div style="width: 50px; color: #409eff">{{ scope.row.ruleOrgCount }}家></div>
</div>
</template>
</el-table-column>
</el-table>
......@@ -841,9 +848,6 @@ const radarOption = ref({
title: {
text: ""
},
// grid: {
// top: 100
// },
legend: {
top: 0,
icon: "circle",
......@@ -2462,6 +2466,17 @@ onMounted(async () => {
text-align: justify;
}
.num-item {
width: 280px;
display: flex;
.name-item{
width: 215px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
......@@ -2473,4 +2488,23 @@ onMounted(async () => {
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
:deep(.el-table thead) {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
:deep(.el-table tr) {
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;
}
</style>
src/views/exportControl/utils/multiLineChart.js
浏览文件 @ 4d2068b3
......@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
}
},
grid: {
top: '8%',
right: '5%',
bottom: '5%',
left: '5%',
top: '5%',
right: '3%',
bottom: '3%',
left: '3%',
containLabel: true
},
legend: {
......
src/views/technologyFigures/index.vue
浏览文件 @ 4d2068b3
......@@ -1192,7 +1192,7 @@ onMounted(() => {
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 18px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
......@@ -1211,6 +1211,7 @@ onMounted(() => {
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
font-weight: 700;
&:hover {
color: #fff;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论