802 lines
20 KiB
Vue
802 lines
20 KiB
Vue
<template>
|
||
<div class="renew" ref="renew"></div>
|
||
<a-modal
|
||
class="generalModel"
|
||
:get-container="() => $refs.renew"
|
||
v-model:visible="renewModel"
|
||
:footer="null"
|
||
width="130rem"
|
||
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="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="23" cy="23" r="23" fill="white" 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="title">Unlock the Pro Advantage</div>
|
||
<div class="content">
|
||
<div class="benefits">
|
||
<div>Benefits</div>
|
||
<div class="contrast">
|
||
<div>Free</div>
|
||
<div>PRO</div>
|
||
</div>
|
||
</div>
|
||
<div class="benefitsItem">
|
||
<div class="describe">
|
||
<div class="icon">
|
||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
||
</div>
|
||
<div class="text">
|
||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||
<p class="info">More accurate answers with multiple latest AI models</p>
|
||
</div>
|
||
</div>
|
||
<div class="contrast">
|
||
<div>√</div>
|
||
<div>×</div>
|
||
</div>
|
||
</div>
|
||
<div class="benefitsItem">
|
||
<div class="describe">
|
||
<div class="icon">
|
||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
||
</div>
|
||
<div class="text">
|
||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||
<p class="info">More accurate answers with multiple latest AI models</p>
|
||
</div>
|
||
</div>
|
||
<div class="contrast">
|
||
<div>√</div>
|
||
<div>×</div>
|
||
</div>
|
||
</div>
|
||
<div class="benefitsItem">
|
||
<div class="describe">
|
||
<div class="icon">
|
||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
||
</div>
|
||
<div class="text">
|
||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||
<p class="info">More accurate answers with multiple latest AI models</p>
|
||
</div>
|
||
</div>
|
||
<div class="contrast">
|
||
<div>√</div>
|
||
<div>×</div>
|
||
</div>
|
||
</div>
|
||
<div class="benefitsItem">
|
||
<div class="describe">
|
||
<div class="icon">
|
||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
||
</div>
|
||
<div class="text">
|
||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||
<p class="info">More accurate answers with multiple latest AI models</p>
|
||
</div>
|
||
</div>
|
||
<div class="contrast">
|
||
<div>√</div>
|
||
<div>×</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="title">
|
||
{{ $t('Renew.title') }}
|
||
</div>
|
||
<div class="info">Get started today for unlimited access!</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">MOST POPULAR</div>
|
||
<div class="priceBox">
|
||
<div class="left">
|
||
<p class="productType">1 {{ item.type.label }}</p>
|
||
<p class="price">${{ 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 style="cursor: pointer;" @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="current.PaymentType" @change="setPaymentType('CreditCard')">
|
||
{{ $t('Renew.CreditCard') }}
|
||
</label>
|
||
<label>
|
||
<input name="payment" type="radio" value="Alipay" v-model="current.PaymentType" @change="setPaymentType('Alipay')">
|
||
{{ $t('Renew.Alipay') }}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="gallery_btn gallery_btn_radius" @click="payment">
|
||
Continue
|
||
</div>
|
||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||
<label>
|
||
<input type="checkbox" v-model="clause">
|
||
<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
|
||
</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} 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";
|
||
const md5 = require("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:'500',
|
||
sellWell:true,
|
||
activity:false,//活动打折
|
||
type:{
|
||
value:'Month',
|
||
label:'Month',
|
||
},
|
||
PaymentType:'',
|
||
promotionData:{
|
||
code:'',
|
||
error:'',
|
||
str:'',
|
||
price:'',
|
||
},
|
||
},
|
||
{
|
||
price:'5,000',
|
||
sellWell:false,
|
||
activity:false,//活动打折
|
||
typeValue:'year',
|
||
type:{
|
||
value:'Year',
|
||
label:'Year',
|
||
},
|
||
PaymentType:'',
|
||
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,
|
||
})
|
||
const init = ()=>{
|
||
renew.renewModel = true
|
||
renewData.current = renewData.personage[0]
|
||
}
|
||
const cancelDsign = () => {
|
||
renew.renewModel = false
|
||
}
|
||
const setPaymentType = (str:any)=>{
|
||
renewData.current.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.current.PaymentType)return message.info(t('Renew.PleaseSelectPayment'))
|
||
// let data = {
|
||
// autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
|
||
// productName:'Subscription',
|
||
// subscribeType,//yearly为年费，monthly为月费
|
||
// }
|
||
let url = window.location.origin+'/paySucceed'
|
||
let data = {
|
||
autoRenewal:renewData.current.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;
|
||
}
|
||
> .info{
|
||
text-align: center;
|
||
opacity: .6;
|
||
font-weight: 400;
|
||
margin-top: .8rem;
|
||
font-size: 1.6rem;
|
||
}
|
||
> .content{
|
||
margin-top: 2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
> .left{
|
||
width: 60%;
|
||
background: #0f0f0f;
|
||
color: #fff;
|
||
padding: 4rem 3.2rem;
|
||
> .title{
|
||
opacity: .6;
|
||
}
|
||
> .content{
|
||
> .benefits,> .benefitsItem{
|
||
display: flex;
|
||
> .contrast{
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
> div{
|
||
width: 8rem;
|
||
text-align: center;
|
||
}
|
||
> div:nth-child(1){
|
||
margin-right: 2.4rem;
|
||
opacity: .5;
|
||
}
|
||
> div:nth-child(2){
|
||
opacity: 1;
|
||
color: #38c793;
|
||
text-shadow: 0 4px 27.1px #38c793b3;
|
||
}
|
||
}
|
||
}
|
||
> .benefits{
|
||
> div:nth-child(1){
|
||
opacity: .5;
|
||
}
|
||
font-weight: 600;
|
||
font-size: 2rem;
|
||
margin: 1rem 0;
|
||
padding: 0 1.6rem;
|
||
}
|
||
> .benefitsItem{
|
||
border: 1px solid #27272a;
|
||
border-radius: 2.4rem;
|
||
margin-bottom: 1.6rem;
|
||
padding: 1.6rem;
|
||
> .describe{
|
||
display: flex;
|
||
align-items: center;
|
||
> .icon{
|
||
border: 1px solid #27272a;
|
||
background: linear-gradient(#1d1d1d,#000);
|
||
border-radius: 1.4rem;
|
||
margin-right: 1.6rem;
|
||
padding: 1.4rem;
|
||
> img{
|
||
width: 3.5rem;
|
||
height: 3.5rem;
|
||
}
|
||
}
|
||
> .text{
|
||
> p{
|
||
margin: 0;
|
||
}
|
||
> .title{
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
}
|
||
> .info{
|
||
font-weight: 400;
|
||
margin-top: .4rem;
|
||
font-size: 1.6rem;
|
||
opacity: .5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
> .right{
|
||
width: 40%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 4rem 3.2rem;
|
||
> .content{
|
||
margin-top: 2rem;
|
||
> .productItem{
|
||
margin-bottom: 1rem;
|
||
border-radius: 1rem;
|
||
overflow: hidden;
|
||
border: 2px solid #eaecf0;
|
||
|
||
> .popular{
|
||
background: #2d9f75;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
padding: .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: .4rem;
|
||
opacity: .4;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
> .left{
|
||
> p:nth-child(1){
|
||
font-size: 2rem;
|
||
opacity: .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: 2px solid #000;
|
||
overflow: hidden;
|
||
padding: 0 1rem;
|
||
input{
|
||
border: none;
|
||
height: 3rem;
|
||
width: 10rem;
|
||
font-size: 1.2rem;
|
||
background: rgba(0, 0, 0, 0);
|
||
}
|
||
}
|
||
> .error{
|
||
color: red;
|
||
text-align: center;
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
> .discountsPrice{
|
||
font-weight: 600;
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
&.active{
|
||
background: #0ea98233;
|
||
border: 2px solid #0ea982;
|
||
> .priceBox{
|
||
> .left{
|
||
> p:nth-child(1){
|
||
opacity: 1;
|
||
}
|
||
}
|
||
> .right{
|
||
> .discountsPrice{
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.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: .5rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
> .gallery_btn{
|
||
width: 100%;
|
||
margin: 2rem 0;
|
||
margin-top: 1rem;
|
||
}
|
||
> .payMethod_payAffirm_clause{
|
||
label{
|
||
input{
|
||
margin-right: 1rem;
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
}
|
||
span{
|
||
vertical-align: top;
|
||
font-size: 1.4rem;
|
||
a{
|
||
color: #000;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
&.animation{
|
||
animation: shake .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: .3rem 4rem;
|
||
background: #39215b;
|
||
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> |