<template>
  <div class="panel-box panel-right">
    <view-title height="41%" title="平台介绍">
      <div class="introduce">
        <div class="introduce-icon"></div>
        <div class="introduce-text">
          借助新质生产力赋能城市治理，利用无人机可垂直起降、可悬停、操作灵活，可任意方向飞行的特性，快速发现问题，快速解决问题，让城市治
        </div>
      </div>
      <div class="introduce-cell">
        <div class="cell-icon"></div>
        <div class="cell-name">提升城市巡查裹盖范围</div>
      </div>
      <div class="introduce-cell">
        <div class="cell-icon"></div>
        <div class="cell-name">提升城市巡查频率和机动性</div>
      </div>
      <div class="introduce-cell">
        <div class="cell-icon"></div>
        <div class="cell-name">减轻基层工作人员压力</div>
      </div>
    </view-title>
    <view-title height="calc(59% / 2 )" title="特色应用">
      <div class="use-row">
        <div class="row-item">
          <img src="@/assets/images/use-icon1.png" class="row-img" />
          <div class="row-name">服务受理</div>
        </div>
        <div class="row-item">
          <img src="@/assets/images/use-icon2.png" class="row-img" />
          <div class="row-name">算法配置</div>
        </div>
        <div class="row-item">
          <img src="@/assets/images/use-icon3.png" class="row-img" />
          <div class="row-name">事件分拨</div>
        </div>
        <div class="row-item">
          <img src="@/assets/images/use-icon4.png" class="row-img" />
          <div class="row-name">飞行服务</div>
        </div>
      </div>
      <div class="use-row" style="margin-top: 6px">
        <div class="row-item">
          <img src="@/assets/images/use-icon5.png" class="row-img" />
          <div class="row-name">飞行控制</div>
        </div>
        <div class="row-item">
          <img src="@/assets/images/use-icon6.png" class="row-img" />
          <div class="row-name">设备管理</div>
        </div>
        <div class="row-item">
          <img src="@/assets/images/use-icon7.png" class="row-img" />
          <div class="row-name">数据共享</div>
        </div>
      </div>
    </view-title>
    <view-title height="calc(59% / 2 )" title="飞行场景"></view-title>
  </div>
</template>

<script setup>
import { ViewTitle } from "@/views/components/map";
</script>

<style lang="scss" scoped>
.introduce {
  position: relative;
  height: 142px;

  background: url("../../../assets/images/introduce-bg.png");
  background-size: 100% 100%;
  .introduce-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 119px;
    width: 119px;
    background: url("../../../assets/images/introduce-icon.png");
    background-size: 100% 100%;
  }
  .introduce-text {
    position: absolute;
    left: 119px;
    width: calc(100% - 132px);
    height: 100%;
    font-size: 14px;
    color: #70d4fd;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.introduce-cell{
    display: flex;
    align-items: center;
    margin-top: 2px;
    height: 50px;
    background: url("../../../assets/images/introduce-cell-bg.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0 50px;

    .cell-icon{
        margin-right: 25px;
        width: 19px;
        height: 18px;
        background: url("../../../assets/images/introduce-cell-icon.png");
        background-size: 100% 100%;
    }
    .cell-name{
        font-size: 15px;
color: #D2F3FF;
    }
}
.use-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  .row-item {
    box-sizing: border-box;
    padding: 6px;
    width: 80px;
    height: 90px;
    background: url("../../../assets/images/use-row-bg.png");
    background-size: 100% 100%;
    .row-img {
      display: block;
      width: 100%;
      height: 80%;
    }
    .row-name {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #fefeff;
      height: 20%;
      background: url("../../../assets/images/use-row-name.png");
      background-size: 100% 100%;
    }
  }
}
</style>
