mayiming/hldrCenter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加基地概况，科学研究页面

Browse Source
This commit is contained in:
马懿铭
2025-10-24 11:52:18 +08:00
parent 3e023ed937
commit 294c9ccf4c
16 changed files with 1138 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
web/src/views/BaseOverview.vue Normal file
View File

@@ -0,0 +1,270 @@
<template>
<div class="base-overview-container">
<!-- 页面标题区域 -->
<div class="page-header">
<h1 class="main-title">基地概况</h1>
<p class="english-title">Base Overview</p>
</div>
<!-- 导航标签区域 -->
<el-tabs
v-model="activeTab"
class="content-tabs"
:border="false"
>
<el-tab-pane label="基地简介" name="introduction">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">基地简介</h2>
<p class="section-english">Base Introduction</p>
</div>
<div class="content-right">
<div class="text-content">
<p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
<p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
<p>探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。探索健康设计的新路径，引领知识创新的新范式，共同描绘人类健康的未来图景。</p>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="基地成员" name="members">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">基地成员</h2>
<p class="section-english">Members</p>
</div>
<div class="content-right">
<div class="text-content">
<p><strong>主任：</strong> 张三</p>
<p><strong>副主任：</strong> 李四</p>
<p><strong>研究人员：</strong> 王五、赵六、孙七 等20余人</p>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="规章制度" name="regulations">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">规章制度</h2>
<p class="section-english">Regulations</p>
</div>
<div class="content-right">
<div class="text-content">
<p><strong>1. 科研项目管理办法</strong>：规范中心科研项目的申报、立项、实施、验收等全流程管理，确保项目质量和成果产出。</p>
<p><strong>2. 学术活动管理规定</strong>：鼓励开展高水平学术交流活动，提升中心学术影响力和社会知名度。</p>
<p><strong>3. 经费使用管理办法</strong>：严格规范科研经费的使用，确保经费专款专用、合理高效。</p>
<p><strong>4. 成果管理办法</strong>：对科研成果的鉴定、登记、转化等进行规范管理，促进成果应用和社会效益发挥。</p>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="联系我们" name="contact">
<div class="tab-content">
<div class="content-layout">
<div class="content-left">
<h2 class="section-title">联系我们</h2>
<p class="section-english">Contact Us</p>
</div>
<div class="content-right">
<div class="text-content">
<p><strong>地址：</strong> 湖北省武汉市江夏区阳光大道1号 武汉纺织大学 设计学院</p>
<p><strong>邮编：</strong> 430200</p>
<p><strong>电话：</strong> 027-87186XXX</p>
<p><strong>邮箱：</strong> hldrcenter@wtu.edu.cn</p>
<p><strong>网站：</strong> <a href="http://www.wtu.edu.cn/hldrcenter" target="_blank">http://www.wtu.edu.cn/hldrcenter</a></p>
</div>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- 底部二维码区域 -->
<div class="qrcode-container">
<div class="qrcode-item">
<img src="https://picsum.photos/100/100?random=1" alt="微信公众号" class="qrcode-img">
</div>
<div class="qrcode-item">
<img src="https://picsum.photos/100/100?random=2" alt="官方网站" class="qrcode-img">
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';
// 控制当前激活的标签页，默认显示基地简介
const activeTab = ref('introduction');
</script>
<style scoped>
.base-overview-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
box-sizing: border-box;
}
/* 页面标题样式 */
.page-header {
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
}
.main-title {
font-size: 28px;
color: #333;
margin: 0 0 8px 0;
font-weight: 500;
}
.english-title {
font-size: 16px;
color: #999;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* 标签页样式 */
.content-tabs {
margin-bottom: 40px;
border-bottom: 1px solid #e0e0e0;
}
:deep(.el-tabs__nav) {
margin: 0 auto;
display: flex;
justify-content: center;
}
:deep(.el-tabs__item) {
font-size: 16px;
color: #666;
padding: 0 20px;
margin-right: 10px;
}
:deep(.el-tabs__item.is-active) {
color: #b50009;
font-weight: 500;
}
:deep(.el-tabs__active-bar) {
background-color: #b50009;
}
/* 内容区域样式 */
.tab-content {
padding: 30px 0;
}
/* 左侧标题 + 右侧内容的布局 */
.content-layout {
display: grid;
grid-template-columns: 280px 1fr; /* 左侧固定宽度，右侧自适应 */
gap: 30px;
align-items: start;
}
.content-left {
padding-right: 20px;
border-right: 1px solid #e0e0e0;
}
.section-title {
font-size: 24px;
color: #333;
margin: 0 0 10px 0;
font-weight: 500;
}
.section-english {
font-size: 16px;
color: #999;
margin: 0 0 20px 0;
text-transform: uppercase;
}
.text-content {
line-height: 1.8;
color: #555;
font-size: 16px;
}
.text-content p {
margin: 0 0 20px 0;
text-align: justify;
}
.text-content a {
color: #b50009;
text-decoration: none;
}
.text-content a:hover {
text-decoration: underline;
}
/* 底部二维码区域 - 靠右对齐 */
.qrcode-container {
display: flex;
justify-content: flex-end; /* 靠右显示 */
gap: 30px;
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
}
.qrcode-item {
width: 100px;
height: 100px;
}
.qrcode-img {
width: 100%;
height: 100%;
object-fit: cover;
border: 1px solid #eee;
padding: 4px;
}
/* 响应式调整 */
@media (max-width: 768px) {
.content-layout {
grid-template-columns: 1fr; /* 移动端单列布局 */
}
.content-left {
border-right: none;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 15px;
margin-bottom: 20px;
}
.qrcode-container {
justify-content: center; /* 移动端居中显示二维码 */
}
.main-title {
font-size: 24px;
}
.text-content {
font-size: 14px;
}
}
</style>