hldrCenter/web/src/views/BaseOverview.vue

<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>