kunshan/src/views/study/components/StudyBase.vue

<template>
  <m-card title="示范基地全景" :width="398" :height="450">
    <div class="study-base">
      <div class="core-indicator">
        <div class="indicator-main">
          <span class="main-value">30000</span>
          <span class="main-unit">㎡</span>
        </div>
        <div class="indicator-label">基地占地面积</div>
      </div>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">50+</div>
          <div class="stat-label">研学课程</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">20+</div>
          <div class="stat-label">合作学校</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">1200+</div>
          <div class="stat-label">参与学生</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">2023</div>
          <div class="stat-label">建设年份</div>
        </div>
      </div>
      <div class="architecture-flow">
        <div class="architecture-title">功能区域</div>
        <div class="architecture-tabs">
          <div class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">技术实践区</div>
          <div class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">技术研发区</div>
          <div class="tab-item" :class="{ active: activeTab === 2 }" @click="switchTab(2)">沉浸体验区</div>
        </div>
        <div class="tab-content">
          <div v-if="activeTab === 0">
            <p>配备先进的水文监测设备和实践设施，提供 hands-on 实践体验，培养学生的实际操作能力。</p>
          </div>
          <div v-else-if="activeTab === 1">
            <p>集合水文领域的前沿技术和设备，开展水文监测新技术、新方法的研发与测试。</p>
          </div>
          <div v-else-if="activeTab === 2">
            <p>通过 VR/AR 技术，沉浸式体验水文监测过程，增强学习趣味性和互动性。</p>
          </div>
        </div>
        <div class="architecture-title">产学研协同</div>
        <div class="collaboration-flow">
          <div class="arch-node">
            <div class="node-icon">🔍</div>
            <div class="node-label">需求调研</div>
          </div>
          <div class="arch-arrow">→</div>
          <div class="arch-node">
            <div class="node-icon">🔬</div>
            <div class="node-label">联合实验室</div>
          </div>
          <div class="arch-arrow">→</div>
          <div class="arch-node">
            <div class="node-icon">🚀</div>
            <div class="node-label">技术产品化</div>
          </div>
          <div class="arch-arrow">→</div>
          <div class="arch-node">
            <div class="node-icon">💼</div>
            <div class="node-label">企业应用</div>
          </div>
        </div>
      </div>
      <div class="action-buttons">
        <button class="action-btn primary">
          <span>🏫</span> 查看基地详情
        </button>
      </div>
    </div>
  </m-card>
</template>

<script setup>
import { ref, inject } from 'vue'
import mCard from "@/components/mCard/index.vue"
import emitter from "@/utils/emitter"

const activeTab = ref(1)

function switchTab(index) {
  activeTab.value = index
  // 当点击技术实践区时，切换背景图
  if (index === 0) {
    emitter.$emit('switchStudyBgImage', 'practice')
  } else {
    emitter.$emit('switchStudyBgImage', 'default')
  }
}
</script>

<style lang="scss" scoped>
.study-base {
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: rgba(0, 40, 80, 0.6);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(48, 220, 255, 0.5);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(48, 220, 255, 0.8);
  }
}

.core-indicator {
  text-align: center;
  padding: 12px;
  background: linear-gradient(135deg, rgba(48, 220, 255, 0.1) 0%, rgba(0, 191, 255, 0.05) 100%);
  border-radius: 8px;
  border: 1px solid rgba(48, 220, 255, 0.3);
}

.indicator-main {
  margin-bottom: 5px;
}

.main-value {
  font-size: 40px;
  font-weight: 700;
  color: #30DCFF;
  font-family: "D-DIN";
  text-shadow: 0 0 20px rgba(48, 220, 255, 0.5);
}

.main-unit {
  font-size: 20px;
  color: rgba(48, 220, 255, 0.8);
  font-weight: 600;
}

.indicator-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 1px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.stat-item {
  background: rgba(0, 180, 255, 0.08);
  border: 1px solid rgba(0, 180, 255, 0.2);
  border-radius: 4px;
  padding: 6px 4px;
  text-align: center;
  transition: all 0.3s ease;
  &:hover {
    background: rgba(0, 180, 255, 0.15);
    border-color: rgba(48, 220, 255, 0.5);
  }
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #30DCFF;
  font-family: "D-DIN";
  margin-bottom: 2px;
}

.stat-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.2;
}

.architecture-flow {
  flex: 1;
  background: rgba(0, 180, 255, 0.05);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.architecture-title {
  font-size: 11px;
  color: #30DCFF;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(48, 220, 255, 0.2);
}

.architecture-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0;
  .tab-item {
    flex: 1;
    padding: 6px 0;
    text-align: center;
    font-size: 10px;
    background: rgba(0, 40, 80, 0.6);
    border: 1px solid rgba(48, 220, 255, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    &.active {
      background: linear-gradient(135deg, #30DCFF, #00BFFF);
      color: white;
      border-color: #30DCFF;
    }
  }
}

.tab-content {
  padding: 8px;
  background: rgba(0, 40, 80, 0.4);
  border-radius: 4px;
  border: 1px solid rgba(48, 220, 255, 0.2);
  p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin: 0;
    text-align: center;
  }
}

.collaboration-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0;
  flex-wrap: wrap;
}

.arch-node {
  background: rgba(48, 220, 255, 0.15);
  border: 1px solid rgba(48, 220, 255, 0.4);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  min-width: 60px;
}

.node-icon {
  font-size: 14px;
  margin-bottom: 2px;
}

.node-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.9);
}

.arch-arrow {
  color: #30DCFF;
  font-size: 12px;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.3s ease;
  &.primary {
    background: linear-gradient(135deg, #30DCFF, #00BFFF);
    color: #fff;
    &:hover {
      box-shadow: 0 0 15px rgba(48, 220, 255, 0.5);
      transform: translateY(-2px);
    }
  }
  &.secondary {
    background: rgba(48, 220, 255, 0.15);
    border: 1px solid rgba(48, 220, 255, 0.4);
    color: #30DCFF;
    &:hover {
      background: rgba(48, 220, 255, 0.25);
    }
  }
  span {
    font-size: 14px;
  }
}
</style>