<template>
  <uni-card
    :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
    :padding="'0px'"
    :margin="'20px'"
    :border="false"
  >
    <view class="card-content">
      <view class="title"
        ><text class="circle"></text
        ><text class="text">个人车所需材料</text></view
      >
      <view class="content">
        <view v-for="(item, index) in list" :key="index"
          ><image :src="`${url}/static/img/vehicle/tip.png`" />{{ item }}</view
        >
      </view>
    </view>
    <view> </view>
  </uni-card>

  <uni-card
    class="company"
    :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
    :padding="'0px'"
    :margin="'20px'"
    :border="false"
  >
    <view class="card-content">
      <view class="title"
        ><text class="circle"></text
        ><text class="text">单位车所需材料</text></view
      >
      <view class="content">
        <view v-for="(item, index) in list1" :key="index"
          ><image :src="`${url}/static/img/vehicle/tip1.png`" />{{ item }}</view
        >
      </view>
    </view>
    <view> </view>
  </uni-card>
</template>
<script setup lang="ts">
import { url } from "@/utils/data";
const list = ref([
  "1、车主身份证复印件1份",
  "2、机动车行驶证原件",
  "3、机动车登记证原件（大绿本）",
  "4、车辆牌照（前、后两块）",
]);

const list1 = ref([
  "1、组织机构代码或营业执照1份（加盖公章）",
  "2、机动车行驶证原件",
  "3、机动车登记证原件（大绿本）",
  "4、经办人身份证复印件1份",
  "5、车辆牌照（前、后两块）",
  "6、机动车业务办理授权委托书（加盖公章）",
]);
</script>
<style lang="scss" scoped>
::v-deep .uni-card--shadow {
  padding: 0px !important;
  background: linear-gradient(0deg, #ecfff8, #ffffff);
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
}
.card-content {
  padding: 40rpx;
  .title {
    display: flex;
    .circle {
      width: 42rpx;
      height: 42rpx;
      background-color: #22d594;
      border-radius: 50%;
      display: inline-block;
      margin-right: 20rpx;
    }
    .text {
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
      line-height: 42rpx;
      background: linear-gradient(
        175deg,
        #0fc480 0%,
        #73f4ad 55.2734375%,
        #0fc480 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .content {
    padding: 10rpx;
    image {
      width: 60rpx;
      height: 46rpx;
      margin-right: 20rpx;
    }
    view {
      font-weight: 400;
      font-size: 26rpx;
      color: #000000;
      line-height: 90rpx;
      display: flex;
      align-items: center;
    }
  }
}

.company {
  .card-content {
    .title {
      .circle {
        background: #E8BB32;
      }
      .text {
        background: linear-gradient(
          175deg,
          #d9ac25 0%,
          #f4d26c 55.2734375%,
          #d9ac25 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
