Skip to content

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

企业动态页面

上级 bee9c823
隐藏空白字符变更
内嵌 并排
正在显示 包含 256 行增加 和 517 行删除
src/views/companyPages/component/Timeline.vue 0 → 100644
浏览文件 @ 7f64a15a
<template>
<div class="timeline-wrapper">
<!-- <button class="arrow left" :disabled="index <= 0" @click="index--">
&lt;
</button> -->
<div class="timeline-box">
<div class="line"></div>
<div v-for="(item, i) in showList" :key="item[idKey]" class="node" :style="leftOffset(i)">
<div class="node" :style="leftOffset(i)">
<!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)" :style="{
marginTop: linePos(i, flip) === 'down' ? '35px' : '-10px'
}"></div>
<div class="time" :style="{
marginTop: linePos(i, flip) === 'down' ? '10px' : '-40px'
}">
{{ item.time }}
</div>
<!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)" :style="{
marginTop: linePos(i, flip) === 'down' ? '100px' : '-40px'
}">
<div class="title">
{{ item.title }}
<!-- <img class="item-header-icon" src="@/assets/images/icon/copy.png" style="cursor: pointer;"></img> -->
</div>
<div class="content">
{{ item.content }}
</div>
</div>
</div>
</div>
</div>
<!-- <button class="arrow right" :disabled="index >= total - 5" @click="index++">
&gt;
</button> -->
</div>
</template>
<script>
export default {
name: 'TimeLine',
props: {
data: { // 父组件传入的数组
type: Array,
required: true
},
textKey: { // 要显示的文本字段
type: String,
default: 'text'
},
idKey: { // 唯一标识字段
type: String,
default: 'id'
}
},
data() {
return { index: 0 };
},
computed: {
total() {
return this.data.length;
},
showList() {
return this.data.slice(this.index, this.index + 5);
},
flip() { return this.index % 2 === 1; }
},
methods: {
leftOffset(i) {
return { left: `${(i * 100) / 5}%` };
},
/* 上下层翻转（保留上次逻辑） */
cardPos(i, flip = false) {
return (i % 2) ^ flip ? 'down' : 'up';
},
/* 线延伸方向 = 卡片出现方向 */
linePos(i, flip = false) {
return this.cardPos(i, flip); // up / down
}
}
};
</script>
<style scoped>
/* 样式与之前完全一致，不再重复 */
.timeline-wrapper {
display: flex;
align-items: center;
width: 100%;
position: relative;
padding: 0 40px;
}
.arrow {
position: absolute;
top: 50%;
/* 左右切换按钮 */
width: 24px;
height: 48px;
font-size: 24px;
border-color: #E7F3FF;
border: 0;
background: #E7F3FF;
cursor: pointer;
z-index: 10;
color: #3E84D1;
}
.arrow:disabled {
color: #c0c4cc;
cursor: not-allowed;
}
.left {
left: 0;
border-radius: 4px 0px 0px 4px;
}
.right {
right: 0;
border-radius: 0px 4px 4px 0px;
}
.timeline-box {
flex: 1;
height: 100%;
position: relative;
}
.line {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 6px;
background-image: url("@/assets/images/bg/timeLine-bg.jpg");
transform: translateY(-50%);
background-size: auto 100%;
}
.node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* ===== 圆环基础 ===== */
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid #409eff;
background: #fff;
position: relative;
margin: 0 auto;
z-index: 2;
}
/* ===== 延伸线 ===== */
.dot::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-1px);
/* 居中细线 */
width: 1px;
background: #409eff;
}
/* 向上节点：线往下伸 */
.dot.up::after {
bottom: 100%;
height: 180px;
/* 圆环底部 → 卡片顶 */
}
/* 向下节点：线往上伸 */
.dot.down::after {
top: 100%;
height: 180px;
}
.card {
position: absolute;
height: 180px;
width: 15vw;
padding: 8px 12px;
text-align: left;
cursor: pointer;
font-size: 14px;
margin-left: 150px;
}
.time {
width: 150px;
margin-left: 150px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
}
.title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
}
.content {
margin-top: 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: justify;
}
.card.up {
bottom: 20px;
}
.card.down {
top: 20px;
}
</style>
\ No newline at end of file
src/views/companyPages/data/movement.json
浏览文件 @ 7f64a15a
...@@ -2,21 +2,21 @@ ...@@ -2,21 +2,21 @@
{ {
"title": "AIWAN解决方案全面升级", "title": "AIWAN解决方案全面升级",
"content": "华为在UBBF2025期间发布以AI-Centric全面升级的AIWAN解决方案，重新定义体验感知、算网极限、安全韧性和运维模式。", "content": "华为在UBBF2025期间发布以AI-Centric全面升级的AIWAN解决方案，重新定义体验感知、算网极限、安全韧性和运维模式。",
"date": "2025年5月" "time": "2025年5月"
}, },
{ {
"title": "天才少年计划扩展", "title": "天才少年计划扩展",
"content": "华为发布“天才少年挑战课题”，覆盖智能联接、基础研究、智能终端、云计算和智能汽车五大领域。", "content": "华为发布“天才少年挑战课题”，覆盖智能联接、基础研究、智能终端、云计算和智能汽车五大领域。",
"date": "2025年5月31日" "time": "2025年5月31日"
}, },
{ {
"title": "两项碳化硅散热技术专利公布", "title": "两项碳化硅散热技术专利公布",
"content": "华为公布两项采用碳化硅做填料的专利，提高电子设备的导热能力，应用于电子元器件散热和封装芯片。", "content": "华为公布两项采用碳化硅做填料的专利，提高电子设备的导热能力，应用于电子元器件散热和封装芯片。",
"date": "2025年7月23日" "time": "2025年7月23日"
}, },
{ {
"title": "新一代5G-A技术突破", "title": "新一代5G-A技术突破",
"content": "华为在5G-A技术领域取得重大突破，实现下行万兆、上行千兆的峰值速率，为工业互联网和元宇宙应用奠定基础。", "content": "华为在5G-A技术领域取得重大突破，实现下行万兆、上行千兆的峰值速率，为工业互联网和元宇宙应用奠定基础。",
"date": "2025年10月" "time": "2025年10月"
} }
] ]
src/views/companyPages/index copy.vue deleted 100644 → 0
浏览文件 @ bee9c823
<template>
<div class="huawei-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>
<nav class="main-nav">
<span v-for="(item, idx) in data.company.navItems" :key="idx"
:class="['nav-item', data.company.activeNav === item ? 'active' : '']">
{{ item }}
</span>
</nav>
</div>
<!-- 主体内容区 -->
<div class="main-content">
<!-- 左侧信息栏 -->
<aside 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/arrow-0.png" alt="网址" class="contact-icon">
<span>{{ data.contactInfo.website }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/arrow-0.png" alt="地址" class="contact-icon">
<span>{{ data.contactInfo.address }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/arrow-0.png" alt="电话" class="contact-icon">
<span>{{ data.contactInfo.phone }}</span>
</div>
<div class="contact-item">
<img src="../../assets/icons/arrow-0.png" 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>
</aside>
<!-- 右侧内容区 -->
<div class="right-content">
<!-- 子标签栏 -->
<div class="sub-tabs">
<span v-for="(tab, idx) in data.company.subTabs" :key="idx"
:class="['sub-tab', data.company.activeSubTab === tab ? 'active' : '']">
{{ tab }}
</span>
<div class="action-icons">
<img src="../../assets/icons/arrow-0.png" alt="分享" class="action-icon">
<img src="../../assets/icons/arrow-0.png" alt="收藏" class="action-icon">
</div>
</div>
<!-- 企业概况内容 -->
<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">
<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">
<span class="info-key">{{ key }}</span>
<span class="info-value">{{ value }}</span>
</li>
</ul>
</div>
</div>
<!-- 主要人员 -->
<div class="section">
<h3 class="section-title">主要人员</h3>
<div class="personnel-grid">
<div class="personnel-card" v-for="(person, idx) in data.mainPersonnel" :key="idx">
<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>
<p class="person-desc">{{ person.desc }}</p>
</div>
</div>
</div>
</div>
<!-- 分支机构 -->
<div class="section">
<h3 class="section-title">分支机构</h3>
<div class="branches-grid">
<div class="branch-item" v-for="(branch, idx) in data.branches" :key="idx">
<span>{{ branch }}</span>
<img src="../../assets/icons/arrow-0.png" alt="箭头" class="branch-arrow">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import data from './data/huaweiData.json'
export default {
name: 'HuaweiContent',
data() {
return {
data
}
}
}
</script>
<style scoped>
/* 基础样式 */
.huawei-content {
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
background-color: #f5f7fa;
}
/* 公司导航栏 */
.company-nav {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 20px;
}
.company-logo-title {
display: flex;
align-items: center;
gap: 15px;
}
.logo-img {
width: 50px;
height: 50px;
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-nav {
display: flex;
gap: 25px;
margin-left: 30px;
}
.nav-item {
font-size: 14px;
color: #4e5969;
cursor: pointer;
padding: 5px 0;
position: relative;
}
.nav-item.active {
color: #1890ff;
font-weight: 500;
}
.nav-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
}
/* 主体内容区 */
.main-content {
display: flex;
gap: 16px;
}
/* 左侧信息栏 */
.left-sidebar {
width: 360px;
background-color: #fff;
border-radius: 6px;
padding: 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.sidebar-logo {
width: 120px;
height: 120px;
object-fit: contain;
margin: 0 auto 15px;
display: block;
}
.sidebar-company-name {
text-align: center;
font-size: 16px;
color: #1d2129;
margin: 0 0 20px;
padding-bottom: 15px;
border-bottom: 1px dashed #e5e7eb;
}
.contact-list {
margin-bottom: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #4e5969;
margin-bottom: 12px;
}
.contact-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.financial-list {
border-top: 1px dashed #e5e7eb;
padding-top: 15px;
}
.financial-item {
text-align: center;
padding: 12px 0;
border-bottom: 1px dashed #e5e7eb;
}
.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 {
flex: 1;
background-color: #fff;
border-radius: 6px;
padding: 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.sub-tabs {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e7eb;
}
.sub-tab {
font-size: 14px;
color: #4e5969;
cursor: pointer;
margin-right: 20px;
padding: 5px 0;
position: relative;
}
.sub-tab.active {
color: #1890ff;
font-weight: 500;
}
.sub-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: #1890ff;
}
.action-icons {
display: flex;
gap: 15px;
}
.action-icon {
width: 16px;
height: 16px;
cursor: pointer;
}
/* 信息网格 */
.info-grid {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.info-card {
flex: 1;
background-color: #f9fafb;
border-radius: 6px;
padding: 15px;
}
.section-title {
font-size: 15px;
color: #1d2129;
margin: 0 0 15px;
padding-left: 8px;
border-left: 2px solid #1890ff;
}
.info-list {
list-style: none;
padding: 0;
}
.info-list li {
font-size: 13px;
margin-bottom: 12px;
line-height: 1.5;
}
.info-key {
display: inline-block;
width: 80px;
color: #86909c;
}
.info-value {
color: #4e5969;
}
/* 主要人员 */
.section {
margin-bottom: 25px;
}
.personnel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.personnel-card {
background-color: #f9fafb;
border-radius: 6px;
padding: 15px;
display: flex;
gap: 12px;
}
.person-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.person-info {
flex: 1;
}
.person-name {
font-size: 14px;
color: #1d2129;
margin: 0 0 5px;
font-weight: 500;
}
.person-position {
font-size: 12px;
color: #1890ff;
margin: 0 0 5px;
}
.person-desc {
font-size: 12px;
color: #86909c;
margin: 0;
line-height: 1.4;
}
/* 分支机构 */
.branches-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.branch-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: #4e5969;
padding: 8px 10px;
background-color: #f9fafb;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.branch-item:hover {
background-color: #f0f2f5;
}
.branch-arrow {
width: 12px;
height: 12px;
margin-left: auto;
}
/* 响应式适配 */
@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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论