<template>
  <div class="page">
    <div class="commoditylIst" ref="scrollContainerRef" @wheel="handleWheel">
      <div class="item" v-for="item in packageList" :key="item.typeDesc">
        <!-- 遮罩层 -->
        <!-- <div class="mask" v-if="item.type != 1">
          <el-icon><i-ep-Lock /></el-icon>
        </div> -->
        <!-- clickPayDialog(item)  getOrderDetail-->
        <div @click="clickPayDialog(item)"> 
          <div class="line" :style="`background-color:${item.color} ;`"></div>
          <div class="info">
            <!-- 商品信息 -->
            <div class="content">
              <div class="titleBox">
                <div class="title">
                  {{ item.title }}
                </div>
              </div>
              <div class="money">
                <span class="price">{{
                  item.sellPriceRmb
                }} ¥</span
                >/ <span style="text-decoration:line-through;">原价{{ item.priceRmb }}</span>
              </div>
              <div class="time">
                币值<span>{{ item.glod }}</span
                > 
              </div>
              <div class="button" :style="`background-color: #f3af00 ;`">
                方案选择
              </div>
              <div class="button" @click="createOrder(item)" :style="`background-color: #f3af00 ;`">
                创建订单
              </div>
              <!-- <div
                v-if="item.type != 1"
                class="button"
                :style="`background-color:${item.color} ;`"
              >
                {{ $t("createVideo.comingSoon") }}
              </div>
              <div
                v-else
                class="button"
                :style="`background-color:${item.color} ;`"
              >
                {{ $t("shop.selectPlan") }}
              </div> -->
            </div>
            <!-- 商品权益 -->
            <div class="authority">
              <div v-html="item.detail"></div>
              <!-- <div class="authority-item">
                {{ $t("shop.InviteGetscore") }}:

                <span>
                  <i>{{ item.inviteUserCredit }}</i
                  >{{ $t("shop.score") }}</span
                >
              </div>
              <div class="authority-item">
                {{ $t("shop.createVideoPrice") }}:<span
                  ><i>{{ item.videoPrice }}</i
                  >{{ $t("shop.score") }}</span
                >
              </div>
              <div class="authority-item">
                {{ $t("shop.AIGeneratesPhotoPrices") }}:<span
                  ><i>{{ item.photoPrice }}</i
                  >{{ $t("shop.score") }}</span
                >
              </div>
              <div class="authority-item">
                {{ $t("shop.UnitChargeDuration") }}:<span
                  ><i>{{ item.chargeTime }}</i
                  >{{ $t("shop.second") }}</span
                >
              </div> -->

              <!-- <div class="authority-item">
                {{ $t("shop.Language") }}:<span
                  ><i>{{ item.userPackageDetails[0].languageDesc }}</i></span
                >
              </div>
              <div class="authority-item">
                {{ $t("shop.sound") }}:<span
                  ><i>{{ item.userPackageDetails[0].soundDesc }}</i></span
                >
              </div>
              <div class="authority-item">
                {{ $t("shop.IndividualVideoDuration") }}:<span
                  ><i>{{ item.userPackageDetails[0].videoTime }}</i
                  >{{ $t("shop.second") }}</span
                >
              </div>
              <div class="authority-item">
                {{ $t("shop.Watermark") }}:<span>{{
                  item.userPackageDetails[0].aiPortrait == 0
                    ? $t("shop.yes")
                    : $t("shop.no")
                }}</span>
              </div>
              <div class="authority-item">
                {{ $t("shop.AIGeneratedPortrait") }}:<span>{{
                  item.userPackageDetails[0].aiPortrait == 0
                    ? $t("shop.no")
                    : $t("shop.yes")
                }}</span>
              </div>
              <div class="authority-item">
                {{ $t("shop.PhotoSinging") }}:<span>{{
                  item.userPackageDetails[0].photoSing == 0
                    ? $t("shop.no")
                    : $t("shop.yes")
                }}</span>
              </div>
              <div class="authority-item">
                {{ $t("shop.AIGeneratedText") }}:<span
                  ><i>{{ item.userPackageDetails[0].aiCreateTime }}</i></span
                >
              </div>
              <div class="authority-item">
                {{ $t("shop.VideoResolution") }}:<span>{{
                  item.userPackageDetails[0].resolutionRatioDesc
                }}</span>
              </div> -->
              <!-- <div class="authority-item">
                {{ $t("shop.DigitalPersonTemplate") }}:{{
                  item.userPackageDetails[0].humanTemplateDesc
                }}
              </div> -->
              <!-- <div
                class="authority-item"
                v-for="items in item.authority"
                :key="items"
              >
                <span>✔</span>{{ items }}
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 企业版 -->
      <div class="item" @click="showTalkUsDialog = true">
        <!-- 遮罩层 -->
        <div class="mask" v-if="false">
          <el-icon><i-ep-Lock /></el-icon>
        </div>
        <div class="line" :style="`background-color:#000 ;`"></div>
        <div class="info">
          <div class="content" style="border-bottom: none">
            <div class="titleBox">
              <div class="title">
                {{ $t("shop.Ent") }}
              </div>
            </div>
            <!-- 描述 -->
            <div class="description">
              <div>
                {{ lanChange == "zh-cn" ? "所有权限" : "All Pro Benefits" }}
              </div>
              <div>
                {{
                  lanChange == "zh-cn" ? "克隆数字双元" : "Clone DigItal Double"
                }}
              </div>
              <div>
                {{
                  lanChange == "zh-cn" ? "专属定制头像" : "Customized Avatar"
                }}
              </div>
              <div>
                {{
                  lanChange == "zh-cn"
                    ? "专属定制声纹"
                    : "Customized Voiceprint"
                }}
              </div>
            </div>
            <div v-if="true" class="button" :style="`background-color:#000  ;`">
              {{ $t("shop.talkUs") }}
            </div>
            <div v-else class="button" :style="`background-color:#000  ;`">
              {{ $t("shop.talkUs") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 对话框 v-if="false"-->
    <el-dialog v-model="showPayDialog" width="60%" center>
      <div class="payDialog">
        <div class="left">
          <!-- <div class="title">{{ $t(presentItme.value.title) }}</div> -->
          <div class="title">{{ $t(presentItme.value.typeDesc) }}</div>
          <div class="money">
            <span class="price">{{
              lanChange == "zh-cn"
                ? presentItme.value.rmb + "¥"
                : presentItme.value.dollar + "$"
            }}</span
            >/{{ presentItme.value.validityDuration }}{{ $t("shop.day") }}
          </div>
          <div class="time">
            <span>{{ presentItme.value.credit }}</span
            >{{ $t("shop.score") }}
          </div>
          <!-- 套餐内容 -->
          <div class="authority">
            <div class="authority-item">
              {{ $t("shop.InviteGetscore") }}:
              <span>
                <i>{{ presentItme.value.inviteUserCredit }}</i
                >{{ $t("shop.score") }}</span
              >
            </div>
            <div class="authority-item">
              {{ $t("shop.createVideoPrice") }}:<span
                ><i>{{ presentItme.value.videoPrice }}</i
                >{{ $t("shop.score") }}</span
              >
            </div>
            <div class="authority-item">
              {{ $t("shop.AIGeneratesPhotoPrices") }}:<span
                ><i>{{ presentItme.value.photoPrice }}</i
                >{{ $t("shop.score") }}</span
              >
            </div>
            <div class="authority-item">
              {{ $t("shop.UnitChargeDuration") }}:<span
                ><i>{{ presentItme.value.chargeTime }}</i
                >{{ $t("shop.second") }}</span
              >
            </div>

            <div class="authority-item">
              {{ $t("shop.Language") }}:<span
                ><i>{{
                  presentItme.value.userPackageDetails[0].languageDesc
                }}</i></span
              >
            </div>
            <div class="authority-item">
              {{ $t("shop.sound") }}:<span
                ><i>{{
                  presentItme.value.userPackageDetails[0].soundDesc
                }}</i></span
              >
            </div>
            <div class="authority-item">
              {{ $t("shop.IndividualVideoDuration") }}:<span
                ><i>{{ presentItme.value.userPackageDetails[0].videoTime }}</i
                >{{ $t("shop.second") }}</span
              >
            </div>
            <div class="authority-item">
              {{ $t("shop.Watermark") }}:<span>{{
                presentItme.value.userPackageDetails[0].aiPortrait == 0
                  ? $t("shop.yes")
                  : $t("shop.no")
              }}</span>
            </div>
            <div class="authority-item">
              {{ $t("shop.AIGeneratedPortrait") }}:<span>{{
                presentItme.value.userPackageDetails[0].aiPortrait == 0
                  ? $t("shop.no")
                  : $t("shop.yes")
              }}</span>
            </div>
            <div class="authority-item">
              {{ $t("shop.PhotoSinging") }}:<span>{{
                presentItme.value.userPackageDetails[0].photoSing == 0
                  ? $t("shop.no")
                  : $t("shop.yes")
              }}</span>
            </div>
            <div class="authority-item">
              {{ $t("shop.AIGeneratedText") }}:<span
                ><i>{{
                  presentItme.value.userPackageDetails[0].aiCreateTime
                }}</i></span
              >
            </div>
            <div class="authority-item">
              {{ $t("shop.VideoResolution") }}:<span>{{
                presentItme.value.userPackageDetails[0].resolutionRatioDesc
              }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <div
            style="background-color: #07c160; cursor: pointer"
            @click="showOrderCode(2)"
          >
            {{ $t("shop.WeChatPay") }}
          </div>
          <div
            style="background-color: #1378fe; cursor: pointer"
            @click="showOrderCode(4)"
          >
            {{ $t("shop.Alipay") }}
          </div>
          <div
            style="background-color: #0070ba; cursor: pointer"
            @click="showOrderCode(3)"
          >
            Paypal
          </div>
        </div>
      </div>
      <!-- 二维码弹出框 -->
      <el-dialog
        v-model="orderCodeDialogShow"
        width="30%"
        append-to-body
        destroy-on-close
        @closed="clearCode"
        :close-on-click-modal="false"
      >
        <div class="orderCodeDialog">
          <div class="codeImg">
            <my-Loading-Icon2
              v-if="!payCodeUrl && !iframeBody"
            ></my-Loading-Icon2>
            <!-- :callback="qrcode" -->
            <vue-qr v-if="payCodeUrl" :text="payCodeUrl" :size="280"></vue-qr>
            <iframe
              v-show="iframeBody"
              id="myIframe"
              width="305px"
              height="305px"
              frameborder="0"
            ></iframe>
          </div>
          <div class="tips">
            {{
              lanChange == "zh-cn"
                ? `扫描二维码进行付款`
                : `Scan the QR code for payment`
            }}
          </div>
          <div class="btnBox">
            <div @click="RefreshQR">
              {{ lanChange == "zh-cn" ? `刷新二维码` : `Refresh QR code` }}
            </div>
          </div>
        </div>
      </el-dialog>
    </el-dialog>

    <!-- 联系我们对话框 -->
    <talkUs
      :showTalkUsDialog="showTalkUsDialog"
      @updateShowTalkUsDialog="updateShowTalkUsDialog"
    ></talkUs>
  </div>
</template>

<script setup>
//#region 导入
import { getCurrentInstance, ref, onMounted } from "vue";
import { packageInfoApi } from "@/apis/myStore";
import { useI18n } from "vue-i18n";
import talkUs from "@/components/talkUs.vue";
import { useRoute, useRouter } from "vue-router";
import { createOrderApi, createPayApi, getOrderStatusApi } from "@/apis/pay";
import { orderDetailApi, findStatusApi } from '@/apis/myStore.js'

const route = useRoute();
const router = useRouter();
const { locale } = useI18n();
const lanChange = ref(locale);

const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
//#endregion ------------------------------------

//#region 各个套餐的逻辑
// const packageList = ref([
//   {
//     id: 1,
//     type: 1,
//     typeDesc: "基础版",
//     englishName: "Trial",
//     dollar: "0.00",
//     rmb: "0.00",
//     credit: 100,
//     validityDuration: 30,
//     inviteUserCredit: 10,
//     videoPrice: 10,
//     photoPrice: 10,
//     talkPrice: 20,
//     chargeTime: 60,
//     createDate: 1686814258000,
//     updateDate: 1686814258000,
//     isDel: 0,
//     color: "#f3af00",
//     userPackageDetails: [
//       {
//         id: 1,
//         detailType: 1,
//         detailTypeDesc: "照片说话",
//         packageId: 1,
//         watermark: 1,
//         watermarkDesc: "是",
//         language: 1,
//         languageDesc: "50+",
//         sound: 1,
//         soundDesc: "400+",
//         videoTime: 60,
//         aiPortrait: 0,
//         aiPortraitDesc: "否",
//         photoSing: 0,
//         photoSingDesc: "否",
//         aiCreateTime: 0,
//         resolutionRatio: 1,
//         resolutionRatioDesc: "720p",
//         createDate: 1686882177000,
//         updateDate: 1686882177000,
//         isDel: 0,
//       },
//       {
//         id: 4,
//         detailType: 2,
//         detailTypeDesc: "口播",
//         packageId: 1,
//         watermark: 1,
//         watermarkDesc: "是",
//         language: 1,
//         languageDesc: "50+",
//         sound: 1,
//         soundDesc: "400+",
//         videoTime: 60,
//         aiCreateTime: 0,
//         resolutionRatio: 1,
//         resolutionRatioDesc: "720p",
//         humanTemplate: 1,
//         humanTemplateDesc: "免费",
//         createDate: 1686882177000,
//         updateDate: 1686882177000,
//         isDel: 0,
//       },
//     ],
//   },
//   {
//     id: 2,
//     type: 2,
//     typeDesc: "专业版",
//     englishName: "Pro",
//     dollar: "7.99",
//     rmb: "49.99",
//     credit: 200,
//     validityDuration: 30,
//     inviteUserCredit: 10,
//     videoPrice: 6,
//     photoPrice: 6,
//     talkPrice: 16,
//     chargeTime: 60,
//     createDate: 1686814258000,
//     updateDate: 1686814258000,
//     isDel: 0,
//     color: "#c971ff",
//     userPackageDetails: [
//       {
//         id: 2,
//         detailType: 1,
//         detailTypeDesc: "照片说话",
//         packageId: 2,
//         watermark: 0,
//         watermarkDesc: "否",
//         language: 1,
//         languageDesc: "50+",
//         sound: 1,
//         soundDesc: "400+",
//         videoTime: 300,
//         aiPortrait: 1,
//         aiPortraitDesc: "是",
//         photoSing: 1,
//         photoSingDesc: "是",
//         aiCreateTime: 30,
//         resolutionRatio: 2,
//         resolutionRatioDesc: "1080p",
//         createDate: 1686882177000,
//         updateDate: 1686882177000,
//         isDel: 0,
//       },
//       {
//         id: 5,
//         detailType: 2,
//         detailTypeDesc: "口播",
//         packageId: 2,
//         watermark: 0,
//         watermarkDesc: "否",
//         language: 1,
//         languageDesc: "50+",
//         sound: 1,
//         soundDesc: "400+",
//         videoTime: 300,
//         aiCreateTime: 100,
//         resolutionRatio: 2,
//         resolutionRatioDesc: "1080p",
//         humanTemplate: 2,
//         humanTemplateDesc: "VIP",
//         createDate: 1686882177000,
//         updateDate: 1686882177000,
//         isDel: 0,
//       },
//     ],
//   },
//   {
//     id: 3,
//     type: 3,
//     typeDesc: "加强版",
//     englishName: "Advanced",
//     dollar: "39.99",
//     rmb: "279.99",
//     credit: 1200,
//     validityDuration: 30,
//     inviteUserCredit: 10,
//     videoPrice: 5,
//     photoPrice: 5,
//     talkPrice: 15,
//     chargeTime: 60,
//     createDate: 1686814258000,
//     updateDate: 1686814258000,
//     isDel: 0,
//     color: "#7b61ff",
//     userPackageDetails: [
//       {
//         id: 3,
//         detailType: 1,
//         detailTypeDesc: "照片说话",
//         packageId: 3,
//         watermark: 0,
//         watermarkDesc: "否",
//         language: 1,
//         languageDesc: "50+",
//         sound: 1,
//         soundDesc: "400+",
//         videoTime: 300,
//         aiPortrait: 1,
//         aiPortraitDesc: "是",
//         photoSing: 1,
//         photoSingDesc: "是",
//         aiCreateTime: 200,
//         resolutionRatio: 2,
//         resolutionRatioDesc: "1080p",
//         createDate: 1686882177000,
//         updateDate: 1686882177000,
//         isDel: 0,
//       },
//       {
//         id: 6,
//         detailType: 2,
//         detailTypeDesc: "口播",
//         packageId: 3,
//         watermark: 0,
//         watermarkDesc: "否",
//         language: 1,
//         languageDesc: "50+",
//         sound: 1,
//         soundDesc: "400+",
//         videoTime: 300,
//         aiCreateTime: 200,
//         resolutionRatio: 2,
//         resolutionRatioDesc: "1080p",
//         humanTemplate: 2,
//         humanTemplateDesc: "VIP",
//         createDate: 1686882177000,
//         updateDate: 1686882177000,
//         isDel: 0,
//       },
//     ],
//   },
// ]);
const packageList = ref([]);
async function getPackageList() {
  const res = await packageInfoApi();
  packageList.value = res.data;
}

const showPayDialog = ref(false); //套餐信息dialog显示隐藏
const presentItme = reactive({}); //点击的套餐项
// const presentItme = ref({}); //点击的套餐项
function clickPayDialog(item) {
  presentItme.value = item;
  showPayDialog.value = true;
}

//#endregion ------------------------------------

//#region 点击套餐内的支付
function showOrderCode(type) {
  orderCodeDialogShow.value = true;
  myPayVendor.value = type;
  createOrderFunc();
}
const orderCodeDialogShow = ref(false);
const orderCodeUrl = ref(null);
//#endregion ------------------------------------

//#region $t在script中的使用
// const {
//   appContext: {
//     config: { globalProperties },
//   },
// } = getCurrentInstance();

// const string = "createVideo.typeScript";
// const t = globalProperties.$t(string);
//#endregion ------------------------------------

//#region 页面滚动
const scrollContainerRef = ref(null);
function handleWheel(event) {
  const scrollContainer = scrollContainerRef.value; // 获取滚动容器的引用
  const scrollAmount = 150; // 每次滚动的距离
  // 检查滚动方向
  if (event.deltaY > 0) {
    // 向右滚动
    scrollContainer.scrollLeft += scrollAmount;
  } else {
    // 向左滚动
    scrollContainer.scrollLeft -= scrollAmount;
  }
  event.preventDefault(); // 防止页面上下滚动
}
//#endregion ------------------------------------

//#region 联系我们弹窗
const showTalkUsDialog = ref(false);
const updateShowTalkUsDialog = (newValue) => {
  showTalkUsDialog.value = newValue;
};
//#endregion ------------------------------------

//#region 页面初始化
onMounted(async () => {
  getPackageList();
  // createOrderFunc();
});
//#endregion ------------------------------------

//#region 支付
const myPayVendor = ref(null); // 2微信  4支付宝
const payCodeUrl = ref(null); //付款二维码地址
const payCodeImg = ref(null); //付款二维码图片
// 支付失败处理
function payErrorHandle() {
  orderCodeDialogShow.value = false;
  ElMessage.error(
    lanChange.value == "zh-cn"
      ? `获取订单失败,请重试`
      : `Failed to get the order, please try again`
  );
}
// 获取订单
const myOrderNumber = ref(null); //订单号
async function createOrderFunc() {
  const data = {
    productId: 30,
  };
  try {
    const res = await createOrderApi(data);
    if (res.code == 200) {
      myOrderNumber.value = res.data;
      createPayFunc(res.data);
    } else {
      payErrorHandle();
    }
  } catch (error) {
    payErrorHandle();
  }
}
// 获取订单详情
let iframeBody = ref(null);
const iframeDom = ref(null);
async function createPayFunc(orderNumber) {
  const data = {
    orderNumber,
    payVendor: myPayVendor.value,
  };
  try {
    const res = await createPayApi(data);
    if (res.code == 200) {
      // 支付宝获取iframe内容
      if (res.data.body) {
        iframeBody.value = res.data.body;
        iframeDom.value = document.getElementById("myIframe");
        iframeDom.value.srcdoc = iframeBody.value;
      }
      // 直接获取二维码
      if (res.data.codeUrl) {
        payCodeUrl.value = res.data.codeUrl;
      }
      await getStatusOfOrderFunc(orderNumber);
    } else {
      payErrorHandle();
    }
  } catch (error) {
    payErrorHandle();
  }
}
// 获取订单支付状态 payStatus 查询支付状态 0:待支付，2:支付中，3：已支付
async function getStatusOfOrderFunc(orderNumber) {
  if (
    route.path != "/myStore" ||
    orderCodeDialogShow.value == false ||
    orderNumber != myOrderNumber.value
  ) {
    return;
  }
  try {
    let payVendor = myPayVendor.value;
    const res = await getOrderStatusApi(orderNumber, payVendor);
    if (res.code == 200) {
      if (res.data.orderStatus == 3) {
        orderCodeDialogShow.value = false;
        ElMessage.success(
          lanChange.value == "zh-cn" ? `支付成功!` : `Payment is successful!`
        );
        return;
      } else {
        setTimeout(() => {
          getStatusOfOrderFunc(orderNumber);
        }, 3000);
      }
    } else {
      setTimeout(() => {
        getStatusOfOrderFunc(orderNumber);
      }, 3000);
    }
  } catch (error) {
    console.log(error, "error");
    ElMessage.error(
      lanChange.value == "zh-cn"
        ? `获取订单失败,请重试`
        : `Failed to get the order, please try again`
    );
  }
}
// 生成二维码
// function qrcode() {
//   return;
// }

// 关闭二维码弹窗
function clearCode() {
  myPayVendor.value = null; // 2微信  4支付宝
  payCodeUrl.value = null;
  iframeBody.value = null;
}
// 刷新二维码
function RefreshQR() {
  payCodeUrl.value = null;
  iframeBody.value = null;
  // createOrderFunc();
  createPayFunc(myOrderNumber.value);
}
//#endregion ------------------------------------

//#region

//#endregion ------------------------------------

// 创建订单
function createOrder(item) {
  createOrderApi({productId: item.id}).then(res => {
    createPayFunc(res.data);
  })
}

// 获取订单详情
function  getOrderDetail(item) {
  orderDetailApi(item.id).then(res => {
  })
}
//每隔一分钟运行一次保存方法
// const timer = setInterval(()=>{
//   findStatus()
// },1000)

function findStatus() {
  let data = {
    orderNumber: '',
    payVendor: ''
  }
  findStatusApi(data).then(res => {
    if (res.data !== 2) { // 如果是2就不停的调，直到返回1、3、4
      clearInterval(timer);
    }
  })
}
</script>

<style lang="scss" scoped>
.page {
  // min-width: calc(100vw - 210px);
  height: calc(100vh - 80px);
  width: 1690px;
  padding: 0px 20px 0 20px;
  background-color: #fff;
  border-radius: 25px 0 0;
  padding: 20px;
  user-select: none;
  overflow: hidden;
  ::-webkit-scrollbar {
    display: none;
  }
}
// 方案列表
.commoditylIst {
  display: flex;
  justify-content: flex-start;
  overflow-x: scroll;
  padding: 30px 20px 20px 10px;
  max-width: 100%;
  // height: 75%;
  // overflow: hidden;
  // overflow-x: scroll;
  // scrollbar-width: none; /* 隐藏滚动条（Chrome、Firefox） */
  // -ms-overflow-style: none; /* 隐藏滚动条（IE、Edge） */
  // &::-webkit-scrollbar {
  //   display: none; /* 隐藏滚动条（Safari、Chrome） */
  // }

  .item {
    position: relative;
    width: 480px;
    // height: 680px;
    margin-left: 45px;
    background-color: #fffefd;
    flex-shrink: 0; /* 防止缩小宽度 */
    border: 1px solid #c0bfbd;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
    &:hover {
      .mask {
        display: block;
      }
    }
    // 遮罩层
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
      line-height: 780px;
      font-size: 120px;
      font-weight: 900;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }
    .line {
      height: 20px;
      background-color: pink;
      cursor: pointer;
    }
    .info {
      padding: 20px;
      cursor: pointer;
      .content {
        // height: 220px;
        padding: 20px;
        border-bottom: 1px solid #c0bfbd;
        cursor: pointer;
        .titleBox {
          display: flex;
          justify-content: space-between;
        }
        .title {
          font-size: 30px;
          font-weight: 700;
          width: 100%;
          margin-bottom: 10px;
          cursor: pointer;
          text-align: center;
          .el-icon {
            line-height: 30px;
            width: 40px;
            height: 40px;
            font-size: 40px;
            color: #000;
            text-align: center;
            vertical-align: sub;
            cursor: pointer;
          }
        }
        .money {
          margin-bottom: 10px;
          font-size: 20px;
          color: #7c7c7a;
          cursor: pointer;
          text-align: end;
          .price {
            font-size: 30px;
            font-weight: 700;
            color: #242625;
            cursor: pointer;
          }
        }
        .time {
          text-align: end;
          margin-bottom: 10px;
          font-size: 20px;
          color: #7c7c7a;
          cursor: pointer;
          margin-bottom: 20px;
          span {
            font-weight: 700;
            color: #242625;
            cursor: pointer;
            margin-right: 5px;
          }
        }

        .button {
          width: 100%;
          height: 40px;
          font-size: 16px;
          border-radius: 10px;
          text-align: center;
          line-height: 40px;
          color: #fff;
          font-weight: 700;
          background-color: yellow;
          cursor: pointer;
        }
        .description {
          cursor: pointer;
          margin-top: 50px;
          margin-bottom: 30px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 18px;
          color: #7c7c7a;
          > div {
            cursor: pointer;
            margin-bottom: 20px;
          }
        }
      }
      .authority {
        margin-top: 10px;
        &-item {
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          font-weight: 400;
          font-size: 18px;
          padding: 5px 10px;
          color: #7c7c7a;

          span {
            cursor: pointer;
            color: #7c7c7a;
            margin-right: 30px;
          }
          i {
            font-size: 20px;
            font-style: normal;
            margin-right: 5px;
            background-image: -webkit-linear-gradient(
              left,
              #4b61dc,
              #15d1b8 25%,
              #4b61dc 50%,
              #15d1b8 75%,
              #4b61dc
            ) !important;
            -webkit-text-fill-color: transparent !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-background-size: 200% 100% !important;
            background-size: 200% 100% !important;
          }
        }
      }
    }
    &:hover {
      cursor: pointer;
      transform: translateY(-20px);
      box-shadow: #00000026 2px 2px 2px 2px;
    }
  }
}
// 支付弹窗
.payDialog {
  display: flex;
  position: relative;
  min-height: 500px;
  .left {
    width: 35%;
    border-right: 1px solid #7c7c7a;
    .title {
      color: #242625;
      font-weight: 700;
      font-size: 30px;
      text-align: center;
    }
    .money {
      text-align: center;
      span {
        font-size: 30px;
        font-weight: 700;
        color: #242625;
      }
    }
    .authority {
      margin-top: 10px;
      &-item {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        font-weight: 400;
        font-size: 14px;
        padding: 2px 3px;
        color: #7c7c7a;

        span {
          cursor: pointer;
          color: #7c7c7a;
          margin-right: 30px;
        }
        i {
          font-size: 20px;
          font-style: normal;
          margin-right: 5px;
          background-image: -webkit-linear-gradient(
            left,
            #4b61dc,
            #15d1b8 25%,
            #4b61dc 50%,
            #15d1b8 75%,
            #4b61dc
          ) !important;
          -webkit-text-fill-color: transparent !important;
          -webkit-background-clip: text !important;
          background-clip: text !important;
          -webkit-background-size: 200% 100% !important;
          background-size: 200% 100% !important;
        }
      }
    }
  }
  .right {
    width: 65%;
    position: absolute;
    top: 20%;
    right: 0%;
    padding-left: 20%;
    > div {
      width: 200px;
      height: 40px;
      // border: 1px solid #242625;
      border-radius: 10px;
      text-align: center;
      line-height: 40px;
      margin: 30px;
      color: #fff;
    }
  }
}
// 二维码弹窗
.orderCodeDialog {
  width: 100%;
  .codeImg {
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    align-items: center;
    width: 350px;
    height: 350px;
    border: 1px solid #ccc;
    border-radius: 15px;
    overflow: hidden;
    padding: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tips {
    padding-top: 10px;
    text-align: center;
  }
  .btnBox {
    padding: 15px 40px;
    display: flex;
    justify-content: space-evenly;
    > div {
      padding: 10px 20px;
      color: #000;
      background-color: #fff;
      border: #000 solid 1px;
      border-radius: 10px;
      transition: all 0.3s;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #000;
      }
    }
  }
}

// 联系我们弹窗
.TalkUsDialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  &-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    > div {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
        margin-bottom: 40px;
      }
    }
    .sendEmail {
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .close {
    margin-top: 50px;
    width: 100px;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    border-radius: 15px;
    border: 2px solid #ccc;
    cursor: pointer;
  }
}
</style>
