<template>
  <div class="main">
    <div class="topMessage">
      <div class="messageTitle">请输入您的车牌号</div>
      <div class="messageList">
        <div class="messageText">
          1、您授权的车牌信息安全将被严格保证，并限于您授权的用途；
        </div>
        <div class="messageText">2、1个车牌号仅允许被1个账号绑定。</div>
      </div>
      <image
        class="carLogo"
        src="https://eshangtech.com/wanmeiyizhanImg/home/carLogoBg.png"
      />
    </div>

    <!-- 输入车牌号的框 -->
    <div class="codeBox">
      <div class="input-box">
        <div
          :class="haveCode ? 'input-f cccBg' : 'input-f'"
          v-for="(item, i) in normalLen"
          :key="i"
          @tap="focusInput(i)"
        >
          <div calss="show-input">{{ saveCarText[i] }}</div>
        </div>
        <div class="input-f lastBox" @tap="handleChangeCarType">
          <div calss="show-input">
            <span class="text-sm">{{ newEnergy ? "新能源" : "" }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="bindTypeBox" v-if="!haveCode">
      <span class="bindTrain" @click="handleChangeBindType">{{
        bindCarType === 1 ? "绑定货车" : "绑定轿车"
      }}</span>
    </div>

    <!-- 货车的内容 -->
    <view v-if="bindCarType === 2">
      <div class="bindPopup">
        <div class="fileItem">
          <div class="itemTitle">身份证<span style="color: red">*</span></div>
          <div class="uploadImgBox">
            <div class="submitImgBox" @click="submitImg('1')" v-if="!haveCode">
              <image class="addIcon" src="/static/home/addImageIcon.svg" />
            </div>

            <div
              class="imgItem"
              v-for="(item, index) in IDCardImgList"
              :key="index"
            >
              <image
                :src="item"
                @click="showImg2(index, IDCardImgList)"
                mode="aspectFill"
              />
              <div
                class="closeBox"
                @click.stop="deleteImgFuncResponse(IDCardImgList, index)"
                v-if="!haveCode"
              >
                <image class="closeIcon" src="/static/home/closeIcon.svg" />
              </div>
            </div>
          </div>
        </div>

        <div class="fileItem">
          <div class="itemTitle">驾驶证<span style="color: red">*</span></div>
          <div class="uploadImgBox">
            <div class="submitImgBox" @click="submitImg('2')" v-if="!haveCode">
              <image class="addIcon" src="/static/home/addImageIcon.svg" />
            </div>

            <div
              class="imgItem"
              v-for="(item, index) in driverLicenseList"
              :key="index"
            >
              <image
                :src="item"
                @click="showImg2(index, driverLicenseList)"
                mode="aspectFill"
              />
              <div
                class="closeBox"
                @click.stop="deleteImgFuncResponse(driverLicenseList, index)"
                v-if="!haveCode"
              >
                <image class="closeIcon" src="/static/home/closeIcon.svg" />
              </div>
            </div>
          </div>
        </div>

        <div class="fileItem">
          <div class="itemTitle">行驶证<span style="color: red">*</span></div>
          <div class="uploadImgBox">
            <div class="submitImgBox" @click="submitImg('3')" v-if="!haveCode">
              <image class="addIcon" src="/static/home/addImageIcon.svg" />
            </div>

            <div
              class="imgItem"
              v-for="(item, index) in drivingLicenseList"
              :key="index"
            >
              <image
                :src="item"
                @click="showImg2(index, drivingLicenseList)"
                mode="aspectFill"
              />
              <div
                class="closeBox"
                @click.stop="deleteImgFuncResponse(drivingLicenseList, index)"
                v-if="!haveCode"
              >
                <image class="closeIcon" src="/static/home/closeIcon.svg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </view>

    <!-- 确认绑定按钮 -->
    <div class="confirmBox" @click="handleConfirmCode" v-if="!haveCode">
      确认绑定
    </div>
    <!-- 取消绑定 -->
    <div class="cancelBox" @click="handleCancelCode" v-if="haveCode">
      解绑车辆
    </div>

    <!-- 货车司机 -->
    <!-- <div class="confirmBox" style="margin-top: 26rpx" @click="handleBindTruck">
      绑定货车
    </div> -->

    <!-- <uni-popup
      ref="popup"
      :show="showPopup"
      :safe-area="false"
      @close="handleClosePopup"
      @maskClick="handleClosePopup"
    >
      <div class="bindPopup">
        <div class="fileItem">
          <div class="itemTitle">身份证<span style="color: red">*</span></div>
          <div class="uploadImgBox">
            <div class="submitImgBox" @click="submitImg('1')">
              <image class="addIcon" src="/static/home/addImageIcon.svg" />
            </div>

            <div
              class="imgItem"
              v-for="(item, index) in IDCardImgList"
              :key="index"
            >
              <image
                :src="item"
                @click="showImg2(index, IDCardImgList)"
                mode="aspectFill"
              />
              <div class="closeBox" @click.stop="deleteImgFunc(item, index)">
                <image class="closeIcon" src="/static/home/closeIcon.svg" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </uni-popup> -->

    <div>
      <keyboard
        :isShow="isShow"
        :keyBoardType="defaultKeyWordType"
        @inputchange="inputChange"
        @delete="delValue"
        @ok="confirmboard"
      />
    </div>

    <div class="page-body" v-if="false">
      <div v-show="!isLoading && cards.length > 0">
        <div class="title">已绑车辆</div>
        <swiper scroll-x="true" class="banner">
          <swiper-item v-for="(item, o) in cards" :key="o" class="car-card">
            <div class="car-card">
              <image
                src="https://eshangtech.com/wanmeiyizhanImg/car-card.png"
                mode="acspetFit"
              />
              <text class="card-title">{{ item.License_Plate }}</text>
            </div>
          </swiper-item>
          <swiper-item class="car-card">
            <div class="car-card-add"></div>
          </swiper-item>
        </swiper>
      </div>
      <div v-show="!isLoading && cards.length == 0">
        <image
          src="https://eshangtech.com/wanmeiyizhanImg/car.png"
          mode="acspetFit"
          class="pic-image"
        ></image>
        <div class="tip-text">暂无绑定车辆</div>
        <div class="add-car" @tap="toAdd">
          <van-icon name="plus" size="32" color="#B0B0B0" />
          <span class="">添加车辆</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import keyboard from "../../../components/keyboard.vue";
export default {
  data() {
    return {
      cards: [],
      isLoading: true,
      normalLen: 7,
      nowIndex: -1,
      isShow: false,
      saveCarText: ["皖", "A", "", "", "", "", "", ""],
      newEnergy: true, // 是否是新能源
      haveCode: false, // 判断是否已经有了code
      defaultKeyWordType: 1, // 默认的键盘类型 1是 省份  2是 车牌号
      showPopup: false,
      IDCardImgList: [], // 身份证 上传的图片
      driverLicenseList: [], // 驾驶证 上传的图片
      drivingLicenseList: [], // 行驶证 上传的图片
      bindCarType: 1, // 绑定车的类型  1 轿车  2 货车
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  components: {
    keyboard,
  },
  methods: {
    // 修改绑定类型
    handleChangeBindType() {
      if (this.bindCarType === 1) {
        this.bindCarType = 2;
      } else {
        this.bindCarType = 1;
      }
    },
    // 绑定货车
    handleBindTruck() {
      this.handleOpenDetail();
    },
    // 关闭悬浮框 货车的
    handleClosePopup() {
      this.$refs.popup.close();
    },
    // 打开悬浮框 货车的
    handleOpenDetail() {
      this.$refs.popup.open("bottom");
    },
    showImg2(index, imgList) {
      uni.previewImage({
        urls: imgList,
        current: index,
        loop: true,
        indicator: "number",
      });
    },
    // 删除答案里面的图片
    deleteImgFuncResponse(item, index) {
      console.log("item", item);
      item = item.splice(index, 1);
      this.$forceUpdate();
    },
    submitImg(type) {
      let _this = this;
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ["original", "compressed"],
        sourceType: ["camera"],
        // "album",
        success: function (rs) {
          let quality = 100;
          if (rs.tempFiles[0].size > 1024 * 200) {
            quality = ((1024 * 200) / rs.tempFiles[0].size) * 100;
          }
          if (quality < 100 && rs.tempFiles[0].path.indexOf(".jpg") > -1) {
            uni.compressImage({
              src: rs.tempFilePaths[0], // 图片路径
              quality: quality, // 压缩质量
              success(res) {
                console.log("res", res);
                let data = {};
                if (res.data) {
                  data = JSON.parse(res.data);
                }
                console.log("data", data);
                uni.showLoading({
                  title: "图片上传中...",
                });
                uni.uploadFile({
                  // url: "https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA",
                  // url: "https://es.robot-z.cn/oss/upload",
                  url: "https://es.eshangtech.com/oss/upload",
                  filePath: res.tempFilePath,
                  header: {
                    "Content-Type": "multipart/form-data",
                  },
                  formData: {},
                  fileType: "image",
                  name: "file",
                  success(res) {
                    console.log("res", res);
                    let data = {};
                    if (res.data) {
                      data = JSON.parse(res.data);
                    }
                    console.log("data", data);
                    uni.hideLoading();

                    if (type === "1") {
                      // 身份证的数组
                      _this.IDCardImgList.push(
                        `https://es.eshangtech.com/${data.data.path}`
                      );
                    } else if (type === "2") {
                      // 驾驶证的图片
                      _this.driverLicenseList.push(
                        `https://es.eshangtech.com/${data.data.path}`
                      );
                    } else if (type === "3") {
                      // 行驶证图片
                      _this.drivingLicenseList.push(
                        `https://es.eshangtech.com/${data.data.path}`
                      );
                    }
                    // _this.$forceUpdate();
                  },
                  fail(error) {
                    console.log("error", error);
                    _this.noPost = true;
                  },
                });
              },
              fail(error) {
                _this.noPost = true;
              },
            });
          } else {
            uni.showLoading({
              title: "图片上传中...",
            });
            uni.uploadFile({
              // url: "https://user.eshangtech.com/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=MBWA",
              // url: "https://es.robot-z.cn/oss/upload",
              url: "https://es.eshangtech.com/oss/upload",
              filePath: rs.tempFilePaths[0],
              fileType: "image",
              header: {
                "Content-Type": "multipart/form-data",
              },
              name: "file",
              success(res) {
                console.log("res", res);
                let data = {};
                if (res.data) {
                  data = JSON.parse(res.data);
                }
                console.log("data", data);
                uni.hideLoading();
                if (type === "1") {
                  // 身份证的数组
                  _this.IDCardImgList.push(
                    `https://es.eshangtech.com/${data.data.path}`
                  );
                } else if (type === "2") {
                  // 驾驶证的图片
                  _this.driverLicenseList.push(
                    `https://es.eshangtech.com/${data.data.path}`
                  );
                } else if (type === "3") {
                  // 行驶证图片
                  _this.drivingLicenseList.push(
                    `https://es.eshangtech.com/${data.data.path}`
                  );
                }

                // _this.$forceUpdate();
              },
              fail(error) {
                console.log("error", error);
                _this.noPost = true;
              },
            });
          }
        },
        fail: function (err) {},
      });
    },

    // 确认绑定
    handleConfirmCode() {
      console.log("this.saveCarText", this.saveCarText);
      let _this = this;
      let carText = _this.saveCarText.join("");

      if (carText.length < 7) {
        uni.showModal({
          title: "温馨提示",
          content: "请您完善车牌号再提交",
          cancelColor: "#000000",
          confirmText: "确定",
          confirmColor: "#3CC51F",
          success: (result) => {
            if (result.confirm) {
            }
          },
        });
        return;
      } else {
        let reg =
          /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
        const careg = reg.test(carText);
        if (!careg) {
          uni.showModal({
            title: "温馨提示",
            content: "请输入正确车牌号",
            showCancel: false,
          });
          return;
        }
      }
      if (this.bindCarType === 2) {
        if (!(this.IDCardImgList && this.IDCardImgList.length > 0)) {
          uni.showModal({
            title: "温馨提示",
            content: "请上传身份证！",
            showCancel: false,
          });
          return;
        }

        if (!(this.driverLicenseList && this.driverLicenseList.length > 0)) {
          uni.showModal({
            title: "温馨提示",
            content: "请上传驾驶证！",
            showCancel: false,
          });
          return;
        }
        if (!(this.drivingLicenseList && this.drivingLicenseList.length > 0)) {
          uni.showModal({
            title: "温馨提示",
            content: "请上传行驶证！",
            showCancel: false,
          });
          return;
        }
      }

      // 图片的上传对象格式
      let imgObj = {
        IDCardImgList: _this.IDCardImgList,
        driverLicenseList: _this.driverLicenseList,
        drivingLicenseList: _this.drivingLicenseList,
      };

      _this.$api
        .getCoop({
          action_type: "BindVehicle",
          LicensePlate: carText,
          VehicleType: _this.newEnergy ? "新能源" : "",
          ImageInfo: _this.bindCarType === 2 ? JSON.stringify(imgObj) : "",
        })
        .then((res) => {
          console.log("res", res);
          if (res.Result_Code === 100) {
            uni.showModal({
              content: res.Result_Desc,
              cancelColor: "#000000",
              showCancel: false,
              confirmText: "确定",
              confirmColor: "#3CC51F",
              success: (result) => {
                _this.isShow = false;
                _this.getList();
              },
            });
          } else {
            uni.showModal({
              title: "温馨提示",
              content: res.Result_Desc,
              cancelColor: "#000000",
              confirmText: "确定",
              confirmColor: "#3CC51F",
              success: (result) => {
                if (result.confirm) {
                }
              },
            });
          }
        });
    },
    // 改变车的能源类型
    handleChangeCarType() {
      if (this.haveCode) {
        uni.showToast({
          title: "已有关联车辆！如需修改请先解绑",
          icon: "none",
          duration: 2000,
        });
        return;
      } else {
        this.newEnergy = !this.newEnergy;
      }
    },
    inputChange(value) {
      let index = this.nowIndex;
      this.saveCarText[index] = value;
      let next = index + 1;

      if (next < 7) {
        this.nowIndex = next;
      }
      this.$forceUpdate();
    },
    delValue() {
      let index = this.nowIndex;
      this.saveCarText[index] = "";
      let next = index - 1;

      if (next > -1) {
        this.nowIndex = next;
      }
      this.$forceUpdate();
    },
    confirmboard() {
      this.isShow = false;
    },
    focusInput(value) {
      console.log("valudsadase", value);
      console.log("saveCarText", this.saveCarText);
      // 判断第一个 有没有值 有值了的话 就显示数字键盘 没值的话 就显示中文键盘
      if (value === 0) {
        this.defaultKeyWordType = 1;
      } else {
        this.defaultKeyWordType = 2;
      }
      console.log("this.defaultKeyWordType", this.defaultKeyWordType);

      if (this.haveCode) {
        uni.showToast({
          title: "已有关联车辆！如需修改请先解绑",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      this.isShow = true;
      this.nowIndex = value;
    },
    // 取消绑定
    handleCancelCode() {
      let _this = this;
      if (_this.cards && _this.cards.length > 0) {
        let obj = _this.cards[0];
        uni.showModal({
          title: "确认取消绑定？",
          content: "取消绑定后将无法恢复",
          success: function (res) {
            if (res.confirm) {
              _this.$api
                .getCoop({
                  action_type: "UnbindVehicle",
                  MEMBERSHIPVEHICLE_ID: obj.MEMBERSHIPVEHICLE_ID,
                  LicensePlate: obj.License_Plate,
                  // Membership_Id: _this.user.MEMBERSHIP_ID,
                })
                .then((res) => {
                  console.log("res", res);
                  if (res.Result_Code === 100) {
                    _this.IDCardImgList = [];
                    _this.driverLicenseList = [];
                    _this.drivingLicenseList = [];
                    uni.showModal({
                      content: res.Result_Desc,
                      cancelColor: "#000000",
                      showCancel: false,
                      confirmText: "确定",
                      confirmColor: "#3CC51F",
                      success: (result) => {
                        _this.isShow = false;
                        _this.getList();
                      },
                    });
                  }
                });
            }
          },
        });
      } else {
        uni.showToast({
          title: "暂无关联车辆！",
          icon: "none",
          duration: 2000,
        });
      }
    },
    getList() {
      let _this = this;

      uni.showLoading({ title: "加载中" });
      this.$api
        .getCoop({
          action_type: "GetVehicleList",
        })
        .then((res) => {
          _this.isLoading = false;
          _this.cards = res.Result_Data.List;
          console.log("_this.cards", _this.cards);
          if (_this.cards && _this.cards.length > 0) {
            let obj = _this.cards[0];
            console.log("obj321321", obj);
            let code = obj.License_Plate;
            if (obj.ImageInfo) {
              _this.bindCarType = 2;
              let imgObj = JSON.parse(obj.ImageInfo);
              console.log("imgObj", imgObj);
              _this.IDCardImgList = imgObj.IDCardImgList;
              _this.driverLicenseList = imgObj.driverLicenseList;
              _this.drivingLicenseList = imgObj.drivingLicenseList;
            }
            _this.saveCarText = code.split("");
            _this.haveCode = true;
          } else {
            _this.saveCarText = ["皖", "A", "", "", "", "", "", ""];
            _this.haveCode = false;
          }
          uni.hideLoading();
        });
    },
    toAdd() {
      uni.navigateTo({ url: "/pages/homeFn/bindingCar/index" });
    },
  },
  onShow() {},
  onLoad() {
    this.isLoading = true;
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  .topMessage {
    width: 100%;
    height: 292rpx;
    background: linear-gradient(270deg, #727377 0%, #424448 100%);
    box-sizing: border-box;
    padding: 48rpx 32rpx;
    position: relative;
    .messageTitle {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 44rpx;
      text-align: left;
      font-style: normal;
    }
    .messageList {
      width: 100%;
      margin-top: 16rpx;
      .messageText {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #b8b7b4;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 4rpx;
      }
    }
    .carLogo {
      position: absolute;
      right: 12rpx;
      bottom: 0;
      width: 240rpx;
      height: 240rpx;
      opacity: 0.8;
    }
  }

  .codeBox {
    width: calc(100% - 64rpx);
    height: 152rpx;
    background: #ffffff;
    border-radius: 6rpx;
    margin-left: 32rpx;
    transform: translateY(-60rpx);
    box-sizing: border-box;
    padding: 40rpx 26rpx;
    .input-box {
      display: flex;
      align-items: center;
      margin-top: 24rpx;
      .input-f {
        text-align: center;
        width: 72rpx;
        height: 72rpx;
        box-sizing: border-box;
        border-radius: 5rpx;
        line-height: 72rpx;
        position: relative;
        border: 1rpx solid #e7e7e6;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8rpx;
        .show-input {
          font-size: 34rpx;
        }
        .text-sm {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #716f69;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
        }
        .text-tip-btn {
          text-align: center;
          width: 74rpx;
          height: 74rpx;
          border: 1rpx dashed #ededed;
          border-radius: 5rpx;
          background: #f8f8f8;
          line-height: 70rpx;
        }
      }
      .cccBg {
        background: #f5f6f7;
      }
      .lastBox {
        background: #f5f6f7;
        border-radius: 2rpx;
        border: 1rpx dashed #e7e7e6 !important;
      }
      .input-f:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .confirmBox {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    height: 88rpx;
    color: #ffffff;
    line-height: 44rpx;
    text-align: center;
    font-style: normal;
    width: calc(100% - 64rpx);
    margin-left: 32rpx;
    background: #ba922f;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cancelBox {
    font-family: "PingFangSC";
    font-weight: 400;
    font-size: 32rpx;
    height: 88rpx;
    color: #b8b7b4;
    line-height: 44rpx;
    text-align: center;
    font-style: normal;
    width: calc(100% - 64rpx);
    margin-left: 32rpx;
    background: #ffffff;
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #b8b7b4;
    margin-top: 24rpx;
  }
  .bindPopup {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
    padding-bottom: env(safe-area-inset-bottom);
    .fileItem {
      margin-bottom: 24rpx;
      .itemTitle {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 32rpx;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
        margin-bottom: 16rpx;
      }
      .uploadImgBox {
        width: 100%;
        margin-top: 16rpx;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .submitImgBox {
          width: 148rpx;
          height: 148rpx;
          background: #fff;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;

          .addIcon {
            width: 48rpx;
            height: 48rpx;
            color: #b4b5ba;
          }
        }

        .imgItem {
          width: 148rpx;
          height: 148rpx;
          margin-right: 16rpx;
          position: relative;
          border-radius: 8rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }

          .closeBox {
            width: 32rpx;
            height: 32rpx;
            border-radius: 0rpx 8rpx 0rpx 8rpx;
            background: rgba(6, 10, 25, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            right: 0;

            .closeIcon {
              width: 24rpx;
              height: 24rpx;
            }
          }
        }
      }
    }
  }

  .bindTypeBox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 8px;
    .bindTrain {
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 30rpx;
      line-height: 36rpx;
      color: #ba922f;
      text-align: left;
      font-style: normal;
    }
  }
}

page {
  background: #fff;
}

.title {
  color: #333333;
  padding-bottom: 36rpx;
  padding-left: 28rpx;
  padding-top: 43rpx;
}

.banner {
  height: 500rpx;
}

.car-card-add {
  width: 502rpx;
  height: 246rpx;
  background: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(221, 221, 221, 0.48);
}

.car-card {
  position: relative;
  padding-left: 35rpx;
  padding-top: 33rpx;
  width: 534rpx !important;
  height: 285rpx;

  // margin-left 26rpx
  image {
    width: 534rpx;
    height: 285rpx;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
  }

  .card-title {
    background: linear-gradient(#f3e6dd, #e5ba9f);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-size: 36rpx;
    font-weight: bolder;
  }
}

.pic-image {
  width: 482rpx;
  height: 281rpx;
  margin-left: 128rpx;
  margin-right: 140rpx;
  margin-top: 138rpx;
  margin-bottom: 54rpx;
}

.tip-text {
  text-align: center;
}

.add-car {
  color: #b0b0b0;
  width: 504rpx;
  height: 145rpx;
  background: #f8f8f8;
  border: 1rpx dashed #c3c3c3;
  border-radius: 5rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 83rpx auto;
  font-size: 24rpx;
  justify-content: center;
  line-height: 1.5;
}
</style>