Skip to content

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

企业首页index

上级 cb755878
隐藏空白字符变更
内嵌 并排
正在显示 包含 668 行增加 和 0 行删除
src/views/companyPages/index.vue 0 → 100644
浏览文件 @ ad5cedf0
<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>
</div>
</template>
<script setup>
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';
const tabList = ref(['基础信息', '研发实力', '被制裁情况', '供应链情况'])
const activeTab = ref('基础信息')
const tabListSmall = ref(['企业概况', '企业动态'])
const activeTabSmall = ref('企业概况')
</script>
<style scoped>
/* 基础样式 */
.page-content {
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);
}
.company-logo-title {
display: flex;
align-items: center;
gap: 12px;
padding: 5px;
}
.logo-img {
width: 60px;
height: 60px;
object-fit: contain;
}
.title-group {
display: flex;
flex-direction: column;
}
.company-name {
font-size: 18px;
color: #1d2129;
margin: 0;
}
.company-english {
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;
}
}
.main-content {
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);
}
.sidebar-logo {
width: 132px;
height: 124px;
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;
}
.contact-list {
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);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
.contact-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.financial-list {
padding-top: 15px;
}
.financial-item {
text-align: center;
padding: 12px 0;
}
.financial-item:last-child {
border-bottom: none;
}
.financial-value {
font-size: 20px;
color: #1890ff;
font-weight: 600;
margin: 0 0 5px;
}
.financial-label {
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;
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;
}
.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);
}
.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);
}
.action-icons {
display: flex;
gap: 15px;
margin-left: auto;
}
.action-icon {
/* 收藏按钮 */
width: 28px;
height: 28px;
cursor: pointer;
}
/* 信息网格 */
.info-grid {
display: flex;
gap: 16px;
padding: 0 24px;
}
.info-card {
flex: 1;
background-color: #f9fafb;
border-radius: 6px;
padding: 12px 16px;
}
.info-list {
list-style: none;
padding: 0;
}
.info-list li {
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%;
}
.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;
}
.info-value {
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; */
}
.section-header {
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;
}
.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;
}
.personnel-grid {
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);
}
.personnel-card-header {
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;
}
.person-info {
flex: 1;
margin: 0 16px;
}
.person-name {
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;
}
.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;
}
.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;
}
/* 分支机构 */
.branches-grid {
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);
}
.branch-item:hover {
background-color: #f0f2f5;
}
.branch-arrow {
width: 12px;
height: 12px;
margin-left: auto;
}
/* 企业动态 */
.timeline-box {
display: flex;
height: calc(100vh - 220px);
}
/* 响应式适配 */
@media (max-width: 1200px) {
.personnel-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;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论