2024-12-11 16:26:36 +08:00
|
|
|
|
<template>
|
2025-12-12 10:04:28 +08:00
|
|
|
|
<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>
|
2025-12-12 10:35:41 +08:00
|
|
|
|
<p class="price">HK $ {{ item.price }}</p>
|
2025-12-12 10:04:28 +08:00
|
|
|
|
</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">
|
2025-11-11 16:21:40 +08:00
|
|
|
|
<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> -->
|
2025-12-12 10:04:28 +08:00
|
|
|
|
</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;
|
2025-12-12 10:35:41 +08:00
|
|
|
|
background-color: #fff;
|
2025-12-12 10:04:28 +08:00
|
|
|
|
input {
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
height: 3rem;
|
|
|
|
|
|
width: 10rem;
|
|
|
|
|
|
font-size: 1.2rem;
|
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
2025-12-12 10:58:14 +08:00
|
|
|
|
&::placeholder {
|
|
|
|
|
|
color: #c4c4c4;
|
|
|
|
|
|
}
|
2025-12-12 10:04:28 +08:00
|
|
|
|
}
|
2025-12-12 10:35:41 +08:00
|
|
|
|
.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;
|
|
|
|
|
|
}
|
2025-12-12 10:04:28 +08:00
|
|
|
|
}
|
|
|
|
|
|
> .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;
|
2025-12-12 10:35:41 +08:00
|
|
|
|
// width: 41.8rem;
|
|
|
|
|
|
height: 4rem;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
line-height: 4rem;
|
2025-12-12 10:04:28 +08:00
|
|
|
|
}
|
|
|
|
|
|
> .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);
|
|
|
|
|
|
}
|
2025-06-18 21:47:27 +08:00
|
|
|
|
}
|
2025-12-12 10:04:28 +08:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|
