<template>
  <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }">
    <h3 class="serial-title">
      甄选服务<van-icon name="cross" @click="show = false" />
    </h3>
    <div class="list">
      <CarItem
        class="car-item"
        v-for="(item, index) in list"
        :key="index"
        :item="item"
      />
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import CarItem from "./CarItem";

const show = ref(false);

defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

defineExpose({
  show,
});
</script>
<style scoped lang="scss">
.serial-title {
  position: relative;
  color: rgba(27, 35, 48, 1);
  font-weight: 500;
  font-size: 36px;
  line-height: 120px;
  ::v-deep(.van-icon) {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(154, 164, 182, 1);
    font-size: 40px;
  }
}
.remark {
  color: rgba(27, 35, 48, 1);
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  text-align: left;
  padding: 0 32px;
}
.list {
  padding: 0 32px;
  ::v-deep .car-item {
    padding: 24px;
    background: linear-gradient(
        351.43deg,
        rgba(240, 46, 24, 0) 36.33%,
        rgba(240, 46, 24, 0.12) 82.76%
      ),
      rgba(255, 255, 255, 1);
    p {
      color: rgba(243, 105, 70, 1);
    }
  }
}
</style>
