<template>
  <div class="renew" ref="renew"></div>
  <a-modal
    class="generalModel"
    :get-container="() => $refs.renew"
    v-model:visible="renewModel"
    :footer="null"
    width="110rem"
    height="auto"
    :maskClosable="false"
    :centered="true"
    :closable="false"
    :mask="renewModelMask"
    :keyboard="false"
    :destroyOnClose="true"
    :zIndex="1000"
  >
    <div class="generalModel_btn">
      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
        <!-- <i class="fi fi-rr-cross-small"></i> -->
        <svg
          width="100%"
          height="100%"
          viewBox="0 0 46 46"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="23" cy="23" r="23" fill="black" fill-opacity="0.3" />
          <rect
            x="32.5063"
            y="12"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(45 32.5063 12)"
            fill="white"
          />
          <rect
            x="34.6274"
            y="32.5059"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(135 34.6274 32.5059)"
            fill="white"
          />
        </svg>
      </div>
    </div>
    <div class="renewContent">
      <div class="left">
        <div class="video">
          <video
            autoplay
            loop
            muted
            playsinline
            src="@/assets/images/icon/paymentVideo.mp4"
          ></video>
          <div class="mask"></div>
        </div>
        <div class="title">{{ $t('Renew.Strengths') }}</div>
        <div class="content">
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
                <img src="@/assets/images/icon/paymentIntroduce1.png" alt="" />
              </div>
              <div class="text">
                <p class="title">
                  {{ $t('Renew.StrengthsTitle1') }}
                  <br />
                  {{ $t('Renew.StrengthsTitle1_1') }}
                </p>
                <p class="info">
                  {{ $t('Renew.StrengthsInfo1') }}
                  <br />
                  {{ $t('Renew.StrengthsInfo1_1') }}
                </p>
              </div>
            </div>
          </div>
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
                <img src="@/assets/images/icon/paymentIntroduce2.png" alt="" />
              </div>
              <div class="text">
                <p class="title">
                  {{ $t('Renew.StrengthsTitle2') }}
                  <br />
                  {{ $t('Renew.StrengthsTitle2_1') }}
                </p>
                <p class="info">
                  {{ $t('Renew.StrengthsInfo2') }}
                  <br />
                  {{ $t('Renew.StrengthsInfo2_1') }}
                </p>
              </div>
            </div>
          </div>
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
                <img src="@/assets/images/icon/paymentIntroduce3.png" alt="" />
              </div>
              <div class="text">
                <p class="title"></p>
                <p class="title">
                  {{ $t('Renew.StrengthsTitle3') }}
                  <br />
                  {{ $t('Renew.StrengthsTitle3_1') }}
                </p>
                <p class="info">
                  {{ $t('Renew.StrengthsInfo3') }}
                  <br />
                  {{ $t('Renew.StrengthsInfo3_1') }}
                  <br />
                  {{ $t('Renew.StrengthsInfo3_2') }}
                </p>
              </div>
            </div>
          </div>
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
                <img src="@/assets/images/icon/paymentIntroduce4.png" alt="" />
              </div>
              <div class="text">
                <p class="title">
                  {{ $t('Renew.StrengthsTitle4') }}
                  <br />
                  {{ $t('Renew.StrengthsTitle4_1') }}
                </p>
                <p class="info">
                  {{ $t('Renew.StrengthsInfo4') }}
                  <br />
                  {{ $t('Renew.StrengthsInfo4_1') }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          {{ $t('Renew.title') }}
        </div>
        <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
        <div class="content">
          <div
            class="productItem"
            :class="{
              active: item.price == current.price,
              sellWell: item.sellWell
            }"
            v-for="item in personage"
            :key="item.price"
            @click="setPromotionData(item)"
          >
            <div class="popular" v-show="item.sellWell">
              {{ $t('Renew.MOSTPOPULAR') }}
            </div>
            <div class="priceBox">
              <div class="left">
                <p class="productType">1 {{ item.type.label }}</p>
                <p class="price">HK $ {{ item.price }}</p>
              </div>
              <div class="right">
                <div class="promotion">
                  <div class="succeed" v-show="item.promotionData.error == 'true'">
                    {{ item.promotionData.code }}
                    <i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
                  </div>
                  <div
                    class="input"
                    @click.stop
                    v-show="
                      !item.promotionData.error || item.promotionData.error == 'false'
                    "
                  >
                    <input
                      type="text"
                      :placeholder="$t('Renew.promotionCode')"
                      v-model="item.promotionData.code"
                    />
                    <div class="apply-btn" @click="examine(item)">
                      {{ $t('Renew.use') }}
                    </div>
                  </div>
                  <div class="error" v-show="item.promotionData.error == 'false'">
                    {{ item.promotionData.str }}
                  </div>
                </div>
                <p
                  class="discountsPrice"
                  v-show="item.promotionData.price"
                  style="text-align: center"
                >
                  ${{ item.promotionData.price }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="payment">
          <div class="allocation">
            <div class="selectType">
              <div class="text">{{ $t('Renew.Payment') }}:</div>
              <label>
                <input
                  name="payment"
                  type="radio"
                  value="CreditCard"
                  v-model="PaymentType"
                  @change="setPaymentType('CreditCard')"
                />
                {{ $t('Renew.CreditCard') }}
              </label>
              <label>
                <input
                  name="payment"
                  type="radio"
                  value="Alipay"
                  v-model="PaymentType"
                  @change="setPaymentType('Alipay')"
                />
                {{ $t('Renew.Alipay') }}
              </label>
            </div>
          </div>
          <div class="gallery_btn gallery_btn_radius" @click="payment">
            {{ $t('upgradePlan.Continue') }}
          </div>
          <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
            <label>
              <!-- <input type="checkbox" v-model="clause" /> -->
              <span class="generalModelDescription">
                {{ $t('upgradePlan.policy') }}
                <a
                  href="https://code-create.com.hk/aida-terms-and-conditions/"
                  target="_blank"
                >
                  {{ $t('upgradePlan.policy1') }}
                </a>
                &
                <a
                  href="https://code-create.com.hk/aida-subscription-agreement/"
                  target="_blank"
                >
                  {{ $t('upgradePlan.policy2') }}
                </a>
                <!-- . * -->
              </span>
            </label>
            <label class="secure">
              <span>
                <i class="fi fi-rr-shield-check"></i>
                Pay safe & secure
              </span>
            </label>
            <label class="payIcon">
              <img class="stripe" src="@/assets/images/icon/stripe.svg" alt="" />
              <img class="alipay" src="@/assets/images/icon/alipay.svg" alt="" />
              <img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="" />
              <img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="" />
              <img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="" />
              <img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="" />
            </label>
          </div>
          <!-- <div class="paySecure">
						  <svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
						  <span>Pay safe & secure </span>
					  </div> -->
        </div>
      </div>
    </div>
    <div class="mark_loading" v-show="isShowMark_">
      <a-spin size="large" />
    </div>
    <div class="mark_loading" v-show="isShowMark" state="true">
      <div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
      <div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
      <div class="mark_loading_title_box">
        <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
          {{ $t('upgradePlan.Back') }}
        </div>
        <div class="mark_loading_btn" @click="completePayment">OK</div>
      </div>
    </div>
  </a-modal>
  <payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount
} from 'vue'
import { message } from 'ant-design-vue'
import payMethod from '@/component/Pay/payMethod.vue'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
import { Https } from '@/tool/https'
import md5 from 'md5'
export default defineComponent({
  components: {
    payMethod
  },
  setup() {
    const store = useStore()
    const { t } = useI18n()
    let renew = reactive({
      renewModel: false,
      renewModelMask: true,
      pageWidth: '50%'
    })
    let payMethodData = reactive({
      clause: false,
      labelDisclaimer: null as any,
      newWindow: null as any,
      isShowMark: false,
      isShowMark_: false
    })
    let renewData = reactive({
      personage: [
        {
          price: '100',
          sellWell: true,
          activity: false, //活动打折
          type: {
            value: 'EcoMonth',
            label: computed(() => t('Renew.Monthly'))
          },
          //   PaymentType: "CreditCard",
          promotionData: {
            code: '',
            error: '',
            str: '',
            price: ''
          }
        },
        {
          price: '500',
          sellWell: false,
          activity: false, //活动打折
          type: {
            value: 'Month',
            label: computed(() => t('Renew.Monthly'))
          },
          //   PaymentType: "CreditCard",
          promotionData: {
            code: '',
            error: '',
            str: '',
            price: ''
          }
        },
        {
          price: '5,000',
          sellWell: false,
          activity: false, //活动打折
          typeValue: 'year',
          type: {
            value: 'Year',
            label: computed(() => t('Renew.Yearly'))
          },
          //   PaymentType: "CreditCard",
          promotionData: {
            code: '',
            error: '',
            str: '',
            price: ''
          }
        }
      ],
      // personage:computed(()=>{
      //     return {
      // 		title:t('Renew.PersonalVersion'),
      // 		price:{
      // 			monthly:'500',
      // 			year:'5,000',
      // 		},
      // 		unit:{
      // 			monthly:t('Renew.HKDMonth'),
      // 			year:t('Renew.HKDYear'),
      // 		},
      // 		type:'monthly',
      // 		PaymentType:'',
      // 		typeList:['monthly','year'],
      // 		info:'Tax, VAT not included.',
      // 	}
      // }),
      firm: computed(() => {
        return {
          title: 'Education Edition',
          price: {
            year: '500'
          },
          unit: {
            year: 'HKD / Year'
          },
          type: 'year',
          autoRenewal: {
            text: t('Renew.automatically'),
            value: true
          },
          typeList: ['year'],
          info: 'Customised plan'
        }
      }),
      education: computed(() => {
        return {
          title: 'Enterprise Edition',
          price: {
            year: '500'
          },
          unit: {
            year: 'HKD / Year'
          },
          type: 'year',
          autoRenewal: {
            text: t('Renew.automatically'),
            value: true
          },
          typeList: ['year'],
          info: 'Customised plan'
        }
      }),
      current: {} as any,
      payMethod: null as any,
      PaymentType: 'CreditCard'
    })
    const init = () => {
      renew.renewModel = true
      renewData.current = renewData.personage[1]
    }
    const cancelDsign = () => {
      renew.renewModel = false
      store.dispatch('getUserDetail')
    }
    const setPaymentType = (str: any) => {
      renewData.PaymentType = str
    }
    const payment = () => {
      //   if (!payMethodData.clause) {
      //     let labelDisclaimer: any = payMethodData.labelDisclaimer;
      //     if (!labelDisclaimer.classList.contains("animation")) {
      //       labelDisclaimer.classList.add("animation");
      //       setTimeout(() => {
      //         labelDisclaimer.classList.remove("animation");
      //       }, 1000);
      //     }
      //     return;
      //   }
      if (!renewData.PaymentType) return message.info(t('Renew.PleaseSelectPayment'))
      let url = window.location.origin + '/paySucceed'
      let data = {
        autoRenewal: renewData.PaymentType != 'Alipay', //false为不自动续费
        productName: 'Subscription',
        quantity: 1,
        returnUrl: url,
        subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
        wallet: 'ALIPAYHK',
        promotionCode: renewData.current.promotionData.code
      }
      let httpsUrl = Https.httpUrls.payStripe
      payMethodData.isShowMark_ = true
      Https.axiosPost(httpsUrl, data)
        .then((rv: any) => {
          var width = 800
          var height = 600
          var left = (screen.width - width) / 2
          var top = (screen.height - height) / 2
          payMethodData.newWindow = window.open(
            '',
            '_blank',
            'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top
          )
          let herf = rv
          if (payMethodData.newWindow) {
            payMethodData.newWindow.location.href = herf
          } else {
            // window.open(herf, '_blank');
            window.location.href = herf
          }
          payMethodData.newWindow = null
          payMethodData.isShowMark = true
          payMethodData.isShowMark_ = false
        })
        .catch(res => {
          payMethodData.isShowMark_ = false
        })

      // renewData.payMethod.init(data)
    }
    const setPaidBack = () => {
      payMethod.payMethodModel = false
      payMethodData.isShowMark = false
      payMethodData.clause = false
    }
    const completePayment = () => {
      renew.renewModel = false
      setPaidBack()
    }
    const examine = (item: any) => {
      // renewData.promotionData.error
      let price = item?.price
      const normalNumber = Number(price.replace(/,/g, ''))
      if (!item.promotionData.code) {
        return
      }
      let data = {
        promotionCode: item.promotionData.code,
        price: normalNumber
      }
      Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then((rv: any) => {
        if (rv) {
          renewData.personage.forEach((personageItem: any) => {
            if (personageItem.price == item.price) {
              if (rv.status == 'valid') {
                item.promotionData.error = 'true'
                item.promotionData.price = Number(rv.discountedPrice).toLocaleString()
              } else {
                item.promotionData.error = 'false'
                item.promotionData.str = rv.message
              }
            }
          })
        } else {
        }
      })
    }
    const clearPromotionCode = () => {
      renewData.current.promotionData.error = ''
      renewData.current.promotionData.code = ''
      renewData.current.promotionData.price = ''
    }
    const setPromotionData = (item: any) => {
      renewData.current = item
    }
    return {
      store,
      ...toRefs(renew),
      ...toRefs(renewData),
      ...toRefs(payMethodData),
      init,
      cancelDsign,
      setPaymentType,
      payment,
      setPaidBack,
      completePayment,
      examine,
      clearPromotionCode,
      setPromotionData
    }
  },
  data() {
    return {}
  },
  methods: {
    turnToWindow(url: any) {
      window.open(url)
    }
  }
})
</script>
<style lang="less" scoped>
.renew {
  :deep(.ant-modal-body) {
    padding: 0;
  }
  .renewContent {
    display: flex;
    border-radius: 3rem;
    overflow: hidden;
    > .left,
    > .right {
      > .title {
        text-align: center;
        font-size: 3.2rem;
        font-weight: 600;
        line-height: 4rem;
        position: relative;
      }
      > .info {
        text-align: center;
        opacity: 0.6;
        font-weight: 400;
        margin-top: 0.8rem;
        font-size: 1.6rem;
        position: relative;
      }
      > .content {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        position: relative;
      }
    }
    > .left {
      width: 50%;
      background: #0f0f0f;
      color: #fff;
      padding: 4rem 3.2rem;
      position: relative;
      display: flex;
      flex-direction: column;
      > .video {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        > video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        > .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background: rgba(0, 0, 0, 0.5);
        }
      }

      > .title {
        opacity: 1;
        // color: #fff;
      }
      > .content {
        flex-wrap: wrap;
        flex-direction: row;
        flex: 1;
        align-content: center;
        align-items: center;
        justify-content: center;
        > .benefitsItem {
          display: flex;
          width: 50%;
        }

        > .benefitsItem {
          border-radius: 2.4rem;
          margin-bottom: 1.6rem;
          padding: 1.6rem;
          justify-content: center;
          > .describe {
            display: flex;
            align-items: center;
            flex-direction: column;
            > .icon {
              //   border: 1px solid #27272a;
              //   background: linear-gradient(#1d1d1d, #000);
              //   border-radius: 1.4rem;
              //   margin-right: 1.6rem;
              //   padding: 1.4rem;
              > img {
                width: 12rem;
                height: 12rem;
              }
            }
            > .text {
              text-align: center;
              > p {
                margin: 0;
              }
              > .title {
                font-size: 2.1rem;
                font-weight: 600;
                line-height: 1;
              }
              > .info {
                font-weight: 600;
                margin-top: 0.4rem;
                font-size: 1.2rem;
                // opacity: 0.5;
              }
            }
          }
        }
      }
    }
    > .right {
      width: 50%;
      flex-direction: column;
      align-items: center;
      padding: 4rem 3.2rem;
      > .content {
        margin-top: 2rem;
        > .productItem {
          margin-bottom: 1rem;
          border-radius: 1rem;
          overflow: hidden;
          border: 1.5px solid #e7ebff;
          cursor: pointer;

          > .popular {
            background: #1b223c;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            padding: 0.8rem 1.2rem;
          }
          > .priceBox {
            height: 11rem;
            padding: 1rem 1.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            > .left,
            > .right {
              p {
                margin: 0;
              }
              > .discountsPrice,
              > .price {
                font-size: 1.8rem;
                margin-top: 0.4rem;
                // opacity: 0.4;
                font-weight: 500;
              }
            }
            > .left {
              > p:nth-child(1) {
                font-size: 2rem;
                // opacity: 0.7;
                font-weight: 700;
              }
            }
            > .right {
              > .promotion {
                display: flex;
                align-items: center;
                flex-direction: column;
                > .text {
                  font-size: 1.4rem;
                  font-weight: 600;
                  margin-right: 2rem;
                }
                > .succeed {
                  padding: 1rem;
                  display: flex;
                  align-items: center;
                  border-radius: 1rem;
                  background: #eee;
                  // color: #fff;
                  // font-weight: 600;
                  > i {
                    display: flex;
                    margin-left: 1rem;
                    cursor: pointer;
                  }
                }
                > .input {
                  display: flex;
                  align-items: center;
                  border-radius: 2rem;
                  border: 1.5px solid rgb(216, 218, 220);
                  overflow: hidden;
                  padding: 0 1rem;
                  background-color: #fff;
                  input {
                    border: none;
                    height: 3rem;
                    width: 10rem;
                    font-size: 1.2rem;
                    background: rgba(0, 0, 0, 0);
                    &::placeholder {
                      color: #c4c4c4;
                    }
                  }
                  .apply-btn {
                    cursor: pointer;
                    background-color: rgb(27, 34, 60);
                    font-size: 0.8rem;
                    color: #fff;
                    width: 3.3rem;
                    height: 1.4rem;
                    line-height: 1.4rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                }
                > .error {
                  color: red;
                  text-align: center;
                  font-size: 1.2rem;
                }
              }
              > .discountsPrice {
                font-weight: 600;
                color: red;
              }
            }
          }
          &.active,
          &:hover {
            // 40% opacity
            background: rgba(231, 235, 255, 0.4);
            // border: 2px solid #0ea982;
          }
          &.sellWell {
            // border: 2px solid #0ea982;
          }
        }
        > .productItem:last-child {
          margin-bottom: 2rem;
        }
      }
      > .payment {
        margin-top: auto;
        > .allocation {
          // border-radius: 1rem;
          // border: 2px solid #eaecf0;
          // padding: 1rem 1.2rem;

          > .selectType {
            display: flex;
            > .text {
              font-size: 1.4rem;
              font-weight: 600;
              margin-right: 2rem;
            }
            label {
              margin-right: 1rem;
              display: flex;
              cursor: pointer;
              input {
                margin-right: 0.5rem;
              }
            }
          }
        }

        > .gallery_btn {
          width: 100%;
          margin: 2rem 0;
          margin-bottom: 0.5rem;
          margin-top: 1rem;
          background: #1b223c;
          color: #fff;
          // width: 41.8rem;
          height: 4rem;
          box-sizing: border-box;
          line-height: 4rem;
          border-radius: 0.6rem;
        }
        > .payMethod_payAffirm_clause {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          label {
            input {
              margin-right: 1rem;
              cursor: pointer;
              vertical-align: middle;
            }
            span {
              vertical-align: top;
              font-size: 1.4rem;
              a {
                color: #000;
                text-decoration: underline;
              }
            }
          }
          > .secure {
            border: 1px solid #ededed;
            background: #f1fbf9;
            color: #1cb36c;
            padding: 0.4rem 0.8rem;
            border-radius: 0.5rem;
            margin-top: 4rem;
            > span {
              display: flex;
              align-items: center;
            }
            i {
              display: flex;
              margin-right: 0.5rem;
            }
          }
          > .payIcon {
            height: 2rem;
            margin-top: 1rem;
            img {
              margin: 0 0.3rem;
              height: 100%;
            }
          }
          &.animation {
            animation: shake 0.3s linear;
            @keyframes shake {
              0% {
                transform: translateX(0px);
              }
              25% {
                transform: translateX(-10px);
              }
              50% {
                transform: translateX(10px);
              }
              75% {
                transform: translateX(-10px);
              }
              100% {
                transform: translateX(0px);
              }
            }
          }
        }
        // > .paySecure{
        // 	display: flex;
        // 	margin-top: 1rem;
        // 	> svg{
        // 		width: 1.6rem;
        // 		height: 1.6rem;
        // 	}
        // 	> span{
        // 		font-weight: 600;
        // 		font-size: 1.4rem;
        // 	}
        // }
      }
    }
    // .login_footer_item_text{
    // 	text-align: center;
    // 	margin-bottom: 1.5rem;
    // 	text-decoration: underline;
    // }
    // .login_footer_item_text:last-child{
    // 	margin-bottom: 0rem;
    // }
  }
  .mark_loading {
    position: absolute;
    z-index: 2;
    background: #fff;
    border-radius: 3rem;
    .mark_loading_title {
      font-size: 3rem;
      // text-decoration: underline;
      font-weight: 600;
      margin-bottom: 2rem;
      overflow: hidden;
      // color: #fff;
    }
    .mark_loading_intro {
      color: rgba(0, 0, 0, 0.6);
      font-size: 1.4rem;
      margin-bottom: 2rem;
      text-align: center;
      width: 80%;
    }
    .mark_loading_title_box {
      display: flex;
    }

    .mark_loading_btn,
    .mark_loading_btn2 {
      // border: #000;
      // color: #fff;
      display: flex;
      margin-top: 10px;
      text-align: center;
      border: 2px solid;
      padding: 0 20px;
      border-radius: 10px;
      cursor: pointer;
      padding: 0.3rem 4rem;
      background: #000;
      color: #fff;
      border: none;
      margin: 0 2rem;
      align-items: center;
    }
    .mark_loading_btn2 {
      border: 2px solid #000;
      color: #000;
      background: rgba(0, 0, 0, 0);
    }
  }
}
</style>
