<template>
  <div class="panel-box panel-right">
    <view-title height="41%" title="平台介绍">
      <div class="introduce">
        <div class="introduce-icon">
          <div class="introduce-image"></div>
        </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="飞行场景" >
      <div class="flight-circle">
        <div class="uav-img"></div>
        <div
          v-for="(item, index) in list"
          :key="index"
           :class="['section-object-item', item.className]"
        >
        <span>{{item.name}}</span>
        
    </div>
      </div>
     
    </view-title>
  </div>
</template>

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

const list = [
  { name: "市容环卫场景应用", className: "item1" },
  { name: "违章搭建场景应用", className: "item2" },
  { name: "应急救灾场景应用", className: "item3" },
  { name: "森林防火场景应用", className: "item4" },
  { name: "农林值保场景应用", className: "item5" },
  { name: "测绘勘察场景应用", className: "item6" },
];
</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-image{
      height: 80%;
      width: 80%;

      border-radius: 50%;
      background: url("../../../assets/images/introduce-image.png");
    background-size: 100% 100%;
    margin-top: 13px;
    margin-left: 13px;
    }
  }
  .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%;
    }
  }
}

.flight-circle {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 350px;
  height: 149px;
  background: url("../../../assets/images/flight-circle.png") no-repeat right center;
  background-size:cover;

 
  margin: 0;
    .uav-img{
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 161px;
        height: 131px;
        background: url("../../../assets/images/uav-img.png") no-repeat center;
        background-size: 100% 100%;
    }
  .section-object-item {
      position: absolute;
      width: 70px;
      height: 77px;
      background: url("../../../assets/images/flight-circle-zi.png") no-repeat center;
      background-size: 100% 100%; 
      padding-top: 10px;
      text-align: center;
      font-size: 13px;
      color: #FFFFFF;
        font-weight: bold;
        text-shadow: 2px 0px 2px #020D21;
   
    
     
  }
}

//-------------------旋转动画---------------
.item1 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -26.75s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.item2 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -32.25s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate;
}
.item3 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.25s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.item4 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -11.75s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;
}
.item5 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
}
.item6 {
  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -14.5s infinite alternate,
    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
}
@keyframes animX {
  0% {
    left: 0px;
  }
  100% {
    left: 280px;
  }
}
@keyframes animY {
  0% {
    top: -70px;
  }
  100% {
    top: 100px;
  }
}
@keyframes scale {
}
</style>
