zyuas.com/zyuas-neo/src/views/Solutions/SurveyingData.vue

<template>
  <div class="solutions-sub-page">
    <div class="content-block">
      <h2>数据成果</h2>
      <p class="lead">无人机测绘可生成多种类型的测绘成果，满足不同应用场景的需求。</p>

      <el-row :gutter="30" class="cards-row">
        <el-col :xs="24" :sm="12" :md="6">
          <div class="deliverable-card">
            <div class="card-icon">
              <el-icon><Picture /></el-icon>
            </div>
            <h5>数字正射影像 (DOM)</h5>
            <p>高分辨率航拍影像图</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="deliverable-card">
            <div class="card-icon">
              <el-icon><Grid /></el-icon>
            </div>
            <h5>数字表面模型 (DSM)</h5>
            <p>包含地物的高程模型</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="deliverable-card">
            <div class="card-icon">
              <el-icon><Position /></el-icon>
            </div>
            <h5>数字高程模型 (DEM)</h5>
            <p>裸地高程数据模型</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="deliverable-card">
            <div class="card-icon">
              <el-icon><MapLocation /></el-icon>
            </div>
            <h5>数字线划图 (DLG)</h5>
            <p>矢量地形要素图</p>
          </div>
        </el-col>
      </el-row>

      <el-row class="content-row">
        <el-col :span="24">
          <div class="info-box">
            <h4><el-icon><FolderOpened /></el-icon> 三维实景模型</h4>
            <p>通过倾斜摄影测量技术，可生成高分辨率的三维实景模型，真实还原地表场景，为城市规划、智慧城市建设提供直观的三维数据基础。模型可直接导入 GIS 系统，实现数据的快速更新和高效管理。</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Picture, Grid, Position, MapLocation, FolderOpened } from '@element-plus/icons-vue'
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.solutions-sub-page {
  padding: $spacer-4 0;
}

.content-block {
  h2 {
    font-size: $font-size-3xl;
    font-weight: $font-weight-bold;
    color: $text-primary;
    margin-bottom: $spacer-2;
    padding-bottom: $spacer-2;
    border-bottom: 1px solid $border-color;
  }

  .lead {
    font-size: $font-size-lg;
    color: $text-regular;
    line-height: 1.8;
    margin-bottom: $spacer-3;
  }
}

.content-row {
  margin-top: $spacer-3;
}

.cards-row {
  margin-top: $spacer-3;
}

.deliverable-card {
  padding: $spacer-3 $spacer-2;
  background: #fff;
  border-radius: $radius-lg;
  box-shadow: $shadow-md;
  text-align: center;
  transition: $transition-bounce;
  height: 100%;
  margin-bottom: $spacer-2;

  &:hover {
    transform: translateY(-8px);
    box-shadow: $shadow-lg, $glow-blue;
  }

  .card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba($primary-color, 0.1) 0%, rgba($primary-light, 0.1) 100%);
    border-radius: $radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-icon {
      color: $primary-color;
      font-size: 28px;
    }
  }

  h5 {
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    color: $text-primary;
    margin-bottom: 8px;
  }

  p {
    font-size: $font-size-sm;
    color: $text-muted;
    margin: 0;
  }
}

.info-box {
  padding: $spacer-3;
  background: $bg-lighter;
  border-radius: $radius-lg;
  border-left: 4px solid $primary-color;

  h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    color: $text-primary;
    margin-bottom: 16px;

    .el-icon {
      color: $primary-color;
      font-size: 20px;
    }
  }

  p {
    font-size: $font-size-base;
    line-height: 1.8;
    color: $text-regular;
    margin: 0;
  }
}
</style>