提交 4d2068b3 authored 作者: coderBryanFu's avatar coderBryanFu

出口管制样式优化

上级 2afd5596
...@@ -276,7 +276,7 @@ ...@@ -276,7 +276,7 @@
</div> </div>
<div class="box4-main"> <div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index"> <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="" /> <img :src="item.img" alt="" />
</div> </div>
<div class="right"> <div class="right">
...@@ -379,7 +379,12 @@ ...@@ -379,7 +379,12 @@
</el-select> </el-select>
</div> </div>
<div class="box8-main"> <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"> <div class="box8-main-item-left">
<img :src="item.img" alt="" /> <img :src="item.img" alt="" />
<div class="left-icon1"> <div class="left-icon1">
...@@ -558,7 +563,36 @@ ...@@ -558,7 +563,36 @@
</div> </div>
</div> </div>
<div class="right-main"> <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> <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"; ...@@ -648,9 +682,29 @@ import Cyy from "@/assets/icons/cyy.png";
import Zyy from "@/assets/icons/zyy.png"; import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png"; import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png"; import Mzd from "@/assets/icons/mzd.png";
import { iteratee } from "lodash";
const searchBillText = ref(""); 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 = () => { const handleBackHome = () => {
router.push({ router.push({
...@@ -1455,6 +1509,36 @@ const footerSelectList2 = ref([ ...@@ -1455,6 +1509,36 @@ const footerSelectList2 = ref([
]); ]);
const footerSelect2 = 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 () => { onMounted(async () => {
handleGetHylyList(); handleGetHylyList();
...@@ -2406,6 +2490,7 @@ onUnmounted(() => {}); ...@@ -2406,6 +2490,7 @@ onUnmounted(() => {});
margin-top: 5px; margin-top: 5px;
width: 36px; width: 36px;
height: 36px; height: 36px;
cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -2733,12 +2818,17 @@ onUnmounted(() => {}); ...@@ -2733,12 +2818,17 @@ onUnmounted(() => {});
height: 340px; height: 340px;
.box8-main-item { .box8-main-item {
margin: 0 auto; margin: 0 auto;
width: 458px; width: 478px;
height: 51px; height: 51px;
margin-bottom: 16px; margin-bottom: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
padding: 0 10px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.box8-main-item-left { .box8-main-item-left {
position: relative; position: relative;
width: 42px; width: 42px;
...@@ -2801,7 +2891,7 @@ onUnmounted(() => {}); ...@@ -2801,7 +2891,7 @@ onUnmounted(() => {});
.box8-main-item-right { .box8-main-item-right {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 10px;
width: 92px; width: 92px;
height: 51px; height: 51px;
text-align: right; text-align: right;
...@@ -3001,13 +3091,90 @@ onUnmounted(() => {}); ...@@ -3001,13 +3091,90 @@ onUnmounted(() => {});
} }
.right-main { .right-main {
height: 1264px; height: 1264px;
overflow: hidden;
.right-main-box { .right-main-box {
width: 1280px; width: 1280px;
height: 300px; height: 300px;
border-radius: 10px; 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); background: rgba(255, 255, 255, 1);
margin-bottom: 16px; 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 { .right-footer {
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="section-header" style=" margin-top: 24px;"> <div class="section-header" style=" margin-top: 24px;">
<div style="display: flex;"> <div style="display: flex;">
<div class="section-icon"></div> <div class="section-icon"></div>
<h3 class="section-title">年度研发投入对比</h3> <h3 class="section-title">年度研发投入对比111</h3>
</div> </div>
<div class="action-icons"> <div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon"> <img src="@/assets/icons/download.png" alt="下载" class="action-icon">
......
...@@ -3,42 +3,46 @@ ...@@ -3,42 +3,46 @@
<!-- 公司导航栏 --> <!-- 公司导航栏 -->
<div class="company-nav"> <div class="company-nav">
<div class="company-logo-title"> <div class="company-logo-title">
<img :src="data.company.logo" alt="华为logo" class="logo-img"> <img :src="data.company.logo" alt="华为logo" class="logo-img" />
<div class="title-group"> <div class="title-group">
<h1 class="company-name">{{ data.company.name }}</h1> <h1 class="company-name">{{ data.company.name }}</h1>
<p class="company-english">{{ data.company.englishName }}</p> <p class="company-english">{{ data.company.englishName }}</p>
</div> </div>
</div> </div>
<div class="main-tabs"> <div class="main-tabs">
<div v-for="(tab, index) in tabList" :class="activeTab === tab ? 'tab-active' : 'tab'" @click="activeTab = tab"> <div
<img :src="'src/assets/icons/company' + (index + 1) + '.svg'" alt="邮件" class="icon mail-icon" /> v-for="(tab, index) in tabList"
{{ tab }} :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>
</div> </div>
<!-- 基础信息主体内容区 --> <!-- 基础信息主体内容区 -->
<div class="main-content" v-if="activeTab === '基础信息'"> <div class="main-content" v-if="activeTab === '基础信息'">
<!-- 左侧信息栏 --> <!-- 左侧信息栏 -->
<div class="left-sidebar"> <div class="left-sidebar">
<img :src="data.company.logo" alt="华为logo" class="sidebar-logo"> <img :src="data.company.logo" alt="华为logo" class="sidebar-logo" />
<h2 class="sidebar-company-name">{{ data.company.name }}</h2> <h2 class="sidebar-company-name">{{ data.company.name }}</h2>
<div class="contact-list"> <div class="contact-list">
<div class="contact-item"> <div class="contact-item">
<img src="../../assets/icons/shutter.svg" alt="网址" class="contact-icon"> <img src="../../assets/icons/shutter.svg" alt="网址" class="contact-icon" />
<span>{{ data.contactInfo.website }}</span> <span>{{ data.contactInfo.website }}</span>
</div> </div>
<div class="contact-item"> <div class="contact-item">
<img src="../../assets/icons/location.svg" alt="地址" class="contact-icon"> <img src="../../assets/icons/location.svg" alt="地址" class="contact-icon" />
<span>{{ data.contactInfo.address }}</span> <span>{{ data.contactInfo.address }}</span>
</div> </div>
<div class="contact-item"> <div class="contact-item">
<img src="../../assets/icons/call.svg" alt="电话" class="contact-icon"> <img src="../../assets/icons/call.svg" alt="电话" class="contact-icon" />
<span>{{ data.contactInfo.phone }}</span> <span>{{ data.contactInfo.phone }}</span>
</div> </div>
<div class="contact-item"> <div class="contact-item">
<img src="../../assets/icons/mail.svg" alt="邮箱" class="contact-icon"> <img src="../../assets/icons/mail.svg" alt="邮箱" class="contact-icon" />
<span>{{ data.contactInfo.email }}</span> <span>{{ data.contactInfo.email }}</span>
</div> </div>
</div> </div>
...@@ -55,25 +59,32 @@ ...@@ -55,25 +59,32 @@
<div class="right-content"> <div class="right-content">
<!-- 子标签栏 --> <!-- 子标签栏 -->
<div class="sub-tabs"> <div class="sub-tabs">
<span v-for="(tab, idx) in tabListSmall" :key="idx" <span
:class="['sub-tab', activeTabSmall === tab ? 'active' : '']" @click="activeTabSmall = tab"> v-for="(tab, idx) in tabListSmall"
:key="idx"
:class="['sub-tab', activeTabSmall === tab ? 'active' : '']"
@click="activeTabSmall = tab"
>
{{ tab }} {{ tab }}
</span> </span>
<div class="action-icons"> <div class="action-icons">
<img src="../../assets/icons/download.png" alt="下载" class="action-icon"> <img src="../../assets/icons/download.png" alt="下载" class="action-icon" />
<img src="../../assets/icons/shoucang.png" alt="收藏" class="action-icon"> <img src="../../assets/icons/shoucang.png" alt="收藏" class="action-icon" />
</div> </div>
</div> </div>
<!-- 企业概况内容 --> <!-- 企业概况内容 -->
<div v-if="activeTabSmall === '企业概况'"> <div v-if="activeTabSmall === '企业概况'">
<div class="overview-content"> <div class="overview-content">
<!-- 类别分布与经营信息 --> <!-- 类别分布与经营信息 -->
<div class="info-grid"> <div class="info-grid">
<div class="info-card"> <div class="info-card">
<h3 class="section-title">类别分布</h3> <h3 class="section-title">类别分布</h3>
<ul class="info-list"> <ul class="info-list">
<li v-for="(value, key) in data.categoryDist" :key="key" style="display: flex;align-items: center;"> <li
v-for="(value, key) in data.categoryDist"
:key="key"
style="display: flex; align-items: center"
>
<div class="li-icon"></div> <div class="li-icon"></div>
<span class="info-key">{{ key }}</span> <span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span> <span class="info-value">{{ value }}</span>
...@@ -83,7 +94,11 @@ ...@@ -83,7 +94,11 @@
<div class="info-card"> <div class="info-card">
<h3 class="section-title">经营信息</h3> <h3 class="section-title">经营信息</h3>
<ul class="info-list"> <ul class="info-list">
<li v-for="(value, key) in data.businessInfo" :key="key" style="display: flex;align-items: center;"> <li
v-for="(value, key) in data.businessInfo"
:key="key"
style="display: flex; align-items: center"
>
<div class="li-icon"></div> <div class="li-icon"></div>
<span class="info-key">{{ key }}</span> <span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span> <span class="info-value">{{ value }}</span>
...@@ -94,7 +109,7 @@ ...@@ -94,7 +109,7 @@
</div> </div>
<!-- 主要人员 --> <!-- 主要人员 -->
<div class="section"> <div class="section">
<div class="section-header" style=" margin-top: 24px;"> <div class="section-header" style="margin-top: 24px">
<div class="section-icon"></div> <div class="section-icon"></div>
<h3 class="section-title">主要人员</h3> <h3 class="section-title">主要人员</h3>
</div> </div>
...@@ -102,14 +117,13 @@ ...@@ -102,14 +117,13 @@
<div class="personnel-grid"> <div class="personnel-grid">
<div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx"> <div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx">
<div class="personnel-card-header"> <div class="personnel-card-header">
<img :src="person.avatar" alt="头像" class="person-avatar"> <img :src="person.avatar" alt="头像" class="person-avatar" />
<div class="person-info"> <div class="person-info">
<h4 class="person-name">{{ person.name }}</h4> <h4 class="person-name">{{ person.name }}</h4>
<p class="person-position">{{ person.position }}</p> <p class="person-position">{{ person.position }}</p>
</div> </div>
</div> </div>
<p class="person-desc">{{ person.desc }}</p> <p class="person-desc">{{ person.desc }}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -122,7 +136,7 @@ ...@@ -122,7 +136,7 @@
<div class="branches-grid"> <div class="branches-grid">
<div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx"> <div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx">
<span>{{ branch }}</span> <span>{{ branch }}</span>
<img src="../../assets/icons/open.png" alt="箭头" class="branch-arrow"> <img src="../../assets/icons/open.png" alt="箭头" class="branch-arrow" />
</div> </div>
</div> </div>
</div> </div>
...@@ -144,29 +158,57 @@ ...@@ -144,29 +158,57 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from "vue";
import data from './data/huaweiData.json' import data from "./data/huaweiData.json";
import movementData from './data/movement.json' import movementData from "./data/movement.json";
import Timeline from "./component/Timeline.vue"; import Timeline from "./component/Timeline.vue";
import Capability from './component/Capability.vue'; import Capability from "./component/Capability.vue";
import SanctionsSituation from './component/SanctionsSituation‌.vue' import SanctionsSituation from "./component/SanctionsSituation‌.vue";
import SupplyChain from './component/SupplyChain.vue'; import SupplyChain from "./component/SupplyChain.vue";
const tabList = ref(['基础信息', '研发实力', '被制裁情况', '供应链情况'])
const activeTab = ref('基础信息') import TabIcon1 from "./images/tab-icon1.png";
const tabListSmall = ref(['企业概况', '企业动态']) import TabIcon2 from "./images/tab-icon2.png";
const activeTabSmall = ref('企业概况') 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> </script>
<style scoped> <style lang="scss" scoped>
/* 基础样式 */ /* 基础样式 */
.page-content { .page-content {
font-family: "Microsoft Yahei", "PingFang SC", sans-serif; font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
background-color: #f5f7fa; background-color: #f5f7fa;
} }
/* 公司导航栏 */ /* 公司导航栏 */
.company-nav { .company-nav {
height: 124px; height: 124px;
...@@ -175,7 +217,6 @@ const activeTabSmall = ref('企业概况') ...@@ -175,7 +217,6 @@ const activeTabSmall = ref('企业概况')
padding: 0 160px; padding: 0 160px;
box-shadow: 0px 4px 4px 0px rgba(129, 128, 128, 0.25); box-shadow: 0px 4px 4px 0px rgba(129, 128, 128, 0.25);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
} }
.company-logo-title { .company-logo-title {
...@@ -217,22 +258,32 @@ const activeTabSmall = ref('企业概况') ...@@ -217,22 +258,32 @@ const activeTabSmall = ref('企业概况')
align-items: flex-start; align-items: flex-start;
gap: 32; gap: 32;
padding: 0px 16px 0px 0px; padding: 0px 16px 0px 0px;
img {
width: 16px;
height: 16px;
margin-right: 4px;
}
.tab { .tab {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
height: 48px; height: 48px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 0px solid rgba(5, 95, 194, 1); border-bottom: 2px solid transparent;
margin: 6px 30px 0 0; margin: 6px 30px 0 0;
cursor: pointer;
} }
.tab-active { .tab-active {
/* 导航/Tabs标签页/亮色/带图标-选中 */
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
height: 48px; height: 48px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -241,8 +292,8 @@ const activeTabSmall = ref('企业概况') ...@@ -241,8 +292,8 @@ const activeTabSmall = ref('企业概况')
box-sizing: border-box; box-sizing: border-box;
border-bottom: 2px solid rgba(5, 95, 194, 1); border-bottom: 2px solid rgba(5, 95, 194, 1);
margin: 6px 30px 0 0; margin: 6px 30px 0 0;
cursor: pointer;
} }
} }
.main-content { .main-content {
...@@ -351,7 +402,6 @@ const activeTabSmall = ref('企业概况') ...@@ -351,7 +402,6 @@ const activeTabSmall = ref('企业概况')
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
} }
.sub-tabs { .sub-tabs {
height: 56px; height: 56px;
padding: 12px 24px; padding: 12px 24px;
...@@ -380,7 +430,6 @@ const activeTabSmall = ref('企业概况') ...@@ -380,7 +430,6 @@ const activeTabSmall = ref('企业概况')
border: 1px solid rgba(59, 65, 75, 1); border: 1px solid rgba(59, 65, 75, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(246, 250, 255, 1); background: rgba(246, 250, 255, 1);
} }
.sub-tab.active { .sub-tab.active {
...@@ -404,7 +453,6 @@ const activeTabSmall = ref('企业概况') ...@@ -404,7 +453,6 @@ const activeTabSmall = ref('企业概况')
background: rgba(246, 250, 255, 1); background: rgba(246, 250, 255, 1);
} }
.action-icons { .action-icons {
display: flex; display: flex;
gap: 15px; gap: 15px;
...@@ -418,7 +466,6 @@ const activeTabSmall = ref('企业概况') ...@@ -418,7 +466,6 @@ const activeTabSmall = ref('企业概况')
cursor: pointer; cursor: pointer;
} }
/* 信息网格 */ /* 信息网格 */
.info-grid { .info-grid {
display: flex; display: flex;
...@@ -433,8 +480,6 @@ const activeTabSmall = ref('企业概况') ...@@ -433,8 +480,6 @@ const activeTabSmall = ref('企业概况')
padding: 12px 16px; padding: 12px 16px;
} }
.info-list { .info-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
...@@ -482,7 +527,6 @@ const activeTabSmall = ref('企业概况') ...@@ -482,7 +527,6 @@ const activeTabSmall = ref('企业概况')
.section-header { .section-header {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.section-icon { .section-icon {
...@@ -491,15 +535,11 @@ const activeTabSmall = ref('企业概况') ...@@ -491,15 +535,11 @@ const activeTabSmall = ref('企业概况')
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: rgba(5, 95, 194, 1); background: rgba(5, 95, 194, 1);
margin-right: 17px; margin-right: 17px;
} }
.section-title { .section-title {
font-size: 15px;
color: #1d2129;
margin: 0; margin: 0;
color: rgba(5, 95, 194, 1); color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -515,7 +555,6 @@ const activeTabSmall = ref('企业概况') ...@@ -515,7 +555,6 @@ const activeTabSmall = ref('企业概况')
padding: 15px 23px; padding: 15px 23px;
} }
.personnel-card { .personnel-card {
height: 150px; height: 150px;
box-sizing: border-box; box-sizing: border-box;
...@@ -603,7 +642,6 @@ const activeTabSmall = ref('企业概况') ...@@ -603,7 +642,6 @@ const activeTabSmall = ref('企业概况')
margin-bottom: -1px; margin-bottom: -1px;
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
} }
.branch-item:hover { .branch-item:hover {
......
...@@ -117,8 +117,11 @@ onMounted(async () => { ...@@ -117,8 +117,11 @@ onMounted(async () => {
} }
.text { .text {
margin-left: 4px; margin-left: 4px;
height: 35px; height: 70px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -151,9 +154,13 @@ onMounted(async () => { ...@@ -151,9 +154,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -201,9 +208,13 @@ onMounted(async () => { ...@@ -201,9 +208,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -236,9 +247,13 @@ onMounted(async () => { ...@@ -236,9 +247,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -286,9 +301,13 @@ onMounted(async () => { ...@@ -286,9 +301,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -321,9 +340,13 @@ onMounted(async () => { ...@@ -321,9 +340,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -371,9 +394,13 @@ onMounted(async () => { ...@@ -371,9 +394,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -406,9 +433,13 @@ onMounted(async () => { ...@@ -406,9 +433,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -456,9 +487,13 @@ onMounted(async () => { ...@@ -456,9 +487,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -491,9 +526,13 @@ onMounted(async () => { ...@@ -491,9 +526,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
...@@ -541,9 +580,13 @@ onMounted(async () => { ...@@ -541,9 +580,13 @@ onMounted(async () => {
} }
} }
.text { .text {
width: 100px;
margin-left: 4px; margin-left: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.line { .line {
margin-left: 7px; margin-left: 7px;
...@@ -576,9 +619,13 @@ onMounted(async () => { ...@@ -576,9 +619,13 @@ onMounted(async () => {
background: rgba(174, 208, 255, 1); background: rgba(174, 208, 255, 1);
} }
.text { .text {
width: 100px;
margin-right: 4px; margin-right: 4px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-top: 7px; margin-top: 7px;
......
...@@ -402,6 +402,7 @@ onMounted(() => { ...@@ -402,6 +402,7 @@ onMounted(() => {
margin-right: 32px; margin-right: 32px;
margin-top: 3px; margin-top: 3px;
height: 35px; height: 35px;
border-bottom: 2px solid transparent;
cursor: pointer; cursor: pointer;
// &:hover{ // &:hover{
// .name { // .name {
...@@ -433,7 +434,7 @@ onMounted(() => { ...@@ -433,7 +434,7 @@ onMounted(() => {
} }
} }
.leftBoxBottomItemActive { .leftBoxBottomItemActive {
border-bottom: 3px solid rgba(20, 89, 187, 1); border-bottom: 2px solid rgba(20, 89, 187, 1);
} }
} }
} }
......
...@@ -91,12 +91,11 @@ function moreClick() { ...@@ -91,12 +91,11 @@ function moreClick() {
} }
.titleWrap { .titleWrap {
margin-left: 16px; margin-left: 16px;
height: 16px; height: 26px;
line-height: 16px; line-height: 26px;
color: var(--color-main-active); color: var(--color-main-active);
font-size: 16px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 16px;
} }
.rightWrap { .rightWrap {
display: flex; display: flex;
......
...@@ -399,7 +399,7 @@ ...@@ -399,7 +399,7 @@
<el-checkbox v-model="checked" label="50%规则" size="large" /> <el-checkbox v-model="checked" label="50%规则" size="large" />
</template> </template>
<template #default> <template #default>
<EChart :option="radarOption" autoresize :style="{ height: '450px' }" /> <EChart :option="radarOption" autoresize :style="{ height: '380px' }" />
</template> </template>
</custom-container> </custom-container>
</el-col> </el-col>
...@@ -474,7 +474,7 @@ ...@@ -474,7 +474,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="domains" label="涉及领域" min-width="180"> <el-table-column prop="domains" label="涉及领域" min-width="150">
<template #default="scope"> <template #default="scope">
<div class="domain-tags"> <div class="domain-tags">
<el-tag <el-tag
...@@ -514,12 +514,19 @@ ...@@ -514,12 +514,19 @@
<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right"> <el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
<template #default="scope"> <template #default="scope">
<span <div class="num-item">
:class="['revenue-cell', scope.row.revenue === '无营收数据' ? 'no-revenue' : '']" <div
class="name-item"
:class="[
'revenue-cell',
scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
]"
> >
{{ scope.row.name }}...等 {{ scope.row.name }}...等
<span style="color: #409eff">{{ scope.row.ruleOrgCount }}家> </span> </div>
</span> <div style="width: 50px; color: #409eff">{{ scope.row.ruleOrgCount }}家></div>
</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -841,9 +848,6 @@ const radarOption = ref({ ...@@ -841,9 +848,6 @@ const radarOption = ref({
title: { title: {
text: "" text: ""
}, },
// grid: {
// top: 100
// },
legend: { legend: {
top: 0, top: 0,
icon: "circle", icon: "circle",
...@@ -2462,6 +2466,17 @@ onMounted(async () => { ...@@ -2462,6 +2466,17 @@ onMounted(async () => {
text-align: justify; 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) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
border-radius: 10px; border-radius: 10px;
...@@ -2473,4 +2488,23 @@ onMounted(async () => { ...@@ -2473,4 +2488,23 @@ onMounted(async () => {
:deep(.el-input__wrapper.is-focus) { :deep(.el-input__wrapper.is-focus) {
box-shadow: none !important; 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> </style>
...@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => { ...@@ -12,10 +12,10 @@ const getMultiLineChart = (dataX, dataY1, dataY2) => {
} }
}, },
grid: { grid: {
top: '8%', top: '5%',
right: '5%', right: '3%',
bottom: '5%', bottom: '3%',
left: '5%', left: '3%',
containLabel: true containLabel: true
}, },
legend: { legend: {
......
...@@ -1192,7 +1192,7 @@ onMounted(() => { ...@@ -1192,7 +1192,7 @@ onMounted(() => {
.btn { .btn {
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 42px; line-height: 42px;
padding: 0 24px; padding: 0 24px;
...@@ -1211,6 +1211,7 @@ onMounted(() => { ...@@ -1211,6 +1211,7 @@ onMounted(() => {
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
font-weight: 700;
&:hover { &:hover {
color: #fff; color: #fff;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论