refactor: Improve code formatting and structure in main.ts and Login.vue
- Standardized import statements in main.ts for better readability. - Enhanced the structure of the Vue component in Login.vue for improved clarity. - Updated event handling and state management in Login.vue. - Adjusted CSS styles for consistency and better organization.
This commit is contained in:
bighuixiang
@@ -1,91 +1,157 @@
|
||||
<template>
|
||||
<div class="payMethod" ref="payMethod"></div>
|
||||
<a-modal
|
||||
class="generalModel"
|
||||
:get-container="() => $refs.payMethod"
|
||||
v-model:visible="payMethodModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="payMethodModelMask"
|
||||
: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="payMethodContent">
|
||||
<div class="generalModelTitle">
|
||||
{{ $t('upgradePlan.paymentmethod') }}
|
||||
</div>
|
||||
<div class="payMethod_list">
|
||||
<label class="payMethod_item" v-show="$props.type == 'credits'">
|
||||
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
|
||||
<img src="../../assets/images/homePage/paypal.svg" alt="">
|
||||
<span>PayPal</span>
|
||||
</label>
|
||||
<label class="payMethod_item">
|
||||
<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
|
||||
<img src="../../assets/images/homePage/stripe.svg" alt="">
|
||||
<span>Stripe ({{ $t('Renew.CreditCard') }}、{{ $t('Renew.Alipay') }})</span>
|
||||
</label>
|
||||
<label class="payMethod_item" v-show="$props.type == 'credits'">
|
||||
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
|
||||
<img src="../../assets/images/homePage/alipay.svg" alt="">
|
||||
<span>{{ $t('upgradePlan.Alipay') }}</span>
|
||||
<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
|
||||
<label>
|
||||
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
|
||||
<span>{{ $t('upgradePlan.HongKong') }}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
|
||||
<span>{{ $t('upgradePlan.MainlandChina') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</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="payMethod_payAffirm_btn">
|
||||
<div class="gallery_btn white" @click="cancelDsign">{{ $t('upgradePlan.Cancel') }}</div>
|
||||
<div class="gallery_btn" @click="payAffirm">{{ $t('upgradePlan.Payment') }}</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>
|
||||
|
||||
<div class="payMethod" ref="payMethod"></div>
|
||||
<a-modal
|
||||
class="generalModel"
|
||||
:get-container="() => $refs.payMethod"
|
||||
v-model:visible="payMethodModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="payMethodModelMask"
|
||||
: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="payMethodContent">
|
||||
<div class="generalModelTitle">
|
||||
{{ $t("upgradePlan.paymentmethod") }}
|
||||
</div>
|
||||
<div class="payMethod_list">
|
||||
<label class="payMethod_item" v-show="$props.type == 'credits'">
|
||||
<input
|
||||
name="payAffirm"
|
||||
type="radio"
|
||||
value="paypal"
|
||||
v-model="modeOfPayment"
|
||||
/>
|
||||
<img src="../../assets/images/homePage/paypal.svg" alt="" />
|
||||
<span>PayPal</span>
|
||||
</label>
|
||||
<label class="payMethod_item">
|
||||
<input
|
||||
name="Stripe"
|
||||
type="radio"
|
||||
value="stripe"
|
||||
v-model="modeOfPayment"
|
||||
/>
|
||||
<img src="../../assets/images/homePage/stripe.svg" alt="" />
|
||||
<span
|
||||
>Stripe ({{ $t("Renew.CreditCard") }}、{{
|
||||
$t("Renew.Alipay")
|
||||
}})</span
|
||||
>
|
||||
</label>
|
||||
<label class="payMethod_item" v-show="$props.type == 'credits'">
|
||||
<input
|
||||
name="payAffirm"
|
||||
type="radio"
|
||||
value="alipay"
|
||||
v-model="modeOfPayment"
|
||||
/>
|
||||
<img src="../../assets/images/homePage/alipay.svg" alt="" />
|
||||
<span>{{ $t("upgradePlan.Alipay") }}</span>
|
||||
<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
|
||||
<label>
|
||||
<input
|
||||
name="location"
|
||||
type="radio"
|
||||
value="ALIPAYHK"
|
||||
v-model="modeOfPaymentDetail"
|
||||
/>
|
||||
<span>{{ $t("upgradePlan.HongKong") }}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
name="location"
|
||||
type="radio"
|
||||
value="ALIPAYCN"
|
||||
v-model="modeOfPaymentDetail"
|
||||
/>
|
||||
<span>{{ $t("upgradePlan.MainlandChina") }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</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="payMethod_payAffirm_btn">
|
||||
<div class="gallery_btn white" @click="cancelDsign">
|
||||
{{ $t("upgradePlan.Cancel") }}
|
||||
</div>
|
||||
<div class="gallery_btn" @click="payAffirm">
|
||||
{{ $t("upgradePlan.Payment") }}
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
|
||||
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { isEmail } from "@/tool/util";
|
||||
import { message } from "ant-design-vue";
|
||||
@@ -93,284 +159,296 @@ import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.v
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { setLang } from "@/tool/guide";
|
||||
const md5 = require("md5");
|
||||
import md5 from "md5";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
props:{
|
||||
type:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
emits: ['completePayment'],
|
||||
setup(prop,{emit}){
|
||||
const store = useStore();
|
||||
let payMethod = reactive({
|
||||
payMethodModel:false,
|
||||
payMethodModelMask:true,
|
||||
pageWidth:'50%'
|
||||
})
|
||||
let payMethodData = reactive({
|
||||
modeOfPayment:prop.type == 'credits'?'paypal':'stripe',
|
||||
modeOfPaymentDetail:'ALIPAYHK',
|
||||
labelDisclaimer:null,//dom
|
||||
payAffirmData:{} as any,
|
||||
clause:false,
|
||||
newWindow:null as any,
|
||||
isShowMark:false,
|
||||
isShowMark_:false,
|
||||
})
|
||||
const init = (data:any)=>{
|
||||
payMethod.payMethodModel = true
|
||||
payMethodData.payAffirmData = data
|
||||
}
|
||||
const cancelDsign = () => {
|
||||
payMethod.payMethodModel = false
|
||||
}
|
||||
const payAffirm = () => {
|
||||
if(!payMethodData.clause){
|
||||
let labelDisclaimer:any = payMethodData.labelDisclaimer
|
||||
if(!labelDisclaimer.classList.contains('animation')){
|
||||
labelDisclaimer.classList.add('animation')
|
||||
setTimeout(() => {
|
||||
labelDisclaimer.classList.remove('animation')
|
||||
}, 1000);
|
||||
}
|
||||
return
|
||||
}
|
||||
payMethodData.isShowMark_ = true
|
||||
let httpsUrl
|
||||
let url = window.location.origin+'/paySucceed'
|
||||
let payAffirmData = payMethodData.payAffirmData
|
||||
let data = {
|
||||
autoRenewal:payAffirmData.autoRenewal,//false为不自动续费
|
||||
productName:payAffirmData.productName,
|
||||
quantity:payAffirmData.quantity?payAffirmData.quantity:1,
|
||||
returnUrl:url,
|
||||
subscribeType:payAffirmData.subscribeType?payAffirmData.subscribeType:'',//yearly为年费，monthly为月费
|
||||
wallet:payMethodData.modeOfPaymentDetail,
|
||||
}
|
||||
if(payMethodData.modeOfPayment == 'paypal'){
|
||||
httpsUrl = Https.httpUrls.payPaypal
|
||||
}else if (payMethodData.modeOfPayment == 'stripe') {
|
||||
httpsUrl = Https.httpUrls.payStripe
|
||||
// data.
|
||||
}else{
|
||||
httpsUrl = Https.httpUrls.payAlipayHK
|
||||
}
|
||||
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
|
||||
if(payMethodData.modeOfPayment == 'paypal'){
|
||||
// 在新窗口中写入内容
|
||||
herf = rv.approve;
|
||||
// payMethodData.newWindow.location.href = rv.approve;
|
||||
}else if(payMethodData.modeOfPayment == 'stripe'){
|
||||
herf = rv
|
||||
// payMethodData.newWindow.location.href = rv
|
||||
}else{
|
||||
let data = JSON.parse(rv)
|
||||
herf = `${data.url}?${data.alipay_order_string}`
|
||||
// payMethodData.newWindow.location.href = herf;
|
||||
}
|
||||
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
|
||||
});
|
||||
}
|
||||
const setPaidBack = ()=>{
|
||||
payMethod.payMethodModel = false
|
||||
payMethodData.isShowMark = false
|
||||
payMethodData.clause = false
|
||||
payMethodData.modeOfPayment = prop.type == 'credits'?'paypal':'stripe'
|
||||
payMethodData.modeOfPaymentDetail = 'ALIPAYHK'
|
||||
}
|
||||
const completePayment = ()=>{
|
||||
setPaidBack()
|
||||
emit('completePayment')
|
||||
}
|
||||
return{
|
||||
store,
|
||||
...toRefs(payMethod),
|
||||
...toRefs(payMethodData),
|
||||
init,
|
||||
cancelDsign,
|
||||
payAffirm,
|
||||
setPaidBack,
|
||||
completePayment,
|
||||
},
|
||||
emits: ["completePayment"],
|
||||
setup(prop, { emit }) {
|
||||
const store = useStore();
|
||||
let payMethod = reactive({
|
||||
payMethodModel: false,
|
||||
payMethodModelMask: true,
|
||||
pageWidth: "50%",
|
||||
});
|
||||
let payMethodData = reactive({
|
||||
modeOfPayment: prop.type == "credits" ? "paypal" : "stripe",
|
||||
modeOfPaymentDetail: "ALIPAYHK",
|
||||
labelDisclaimer: null, //dom
|
||||
payAffirmData: {} as any,
|
||||
clause: false,
|
||||
newWindow: null as any,
|
||||
isShowMark: false,
|
||||
isShowMark_: false,
|
||||
});
|
||||
const init = (data: any) => {
|
||||
payMethod.payMethodModel = true;
|
||||
payMethodData.payAffirmData = data;
|
||||
};
|
||||
const cancelDsign = () => {
|
||||
payMethod.payMethodModel = false;
|
||||
};
|
||||
const payAffirm = () => {
|
||||
if (!payMethodData.clause) {
|
||||
let labelDisclaimer: any = payMethodData.labelDisclaimer;
|
||||
if (!labelDisclaimer.classList.contains("animation")) {
|
||||
labelDisclaimer.classList.add("animation");
|
||||
setTimeout(() => {
|
||||
labelDisclaimer.classList.remove("animation");
|
||||
}, 1000);
|
||||
}
|
||||
return;
|
||||
}
|
||||
payMethodData.isShowMark_ = true;
|
||||
let httpsUrl;
|
||||
let url = window.location.origin + "/paySucceed";
|
||||
let payAffirmData = payMethodData.payAffirmData;
|
||||
let data = {
|
||||
autoRenewal: payAffirmData.autoRenewal, //false为不自动续费
|
||||
productName: payAffirmData.productName,
|
||||
quantity: payAffirmData.quantity ? payAffirmData.quantity : 1,
|
||||
returnUrl: url,
|
||||
subscribeType: payAffirmData.subscribeType
|
||||
? payAffirmData.subscribeType
|
||||
: "", //yearly为年费，monthly为月费
|
||||
wallet: payMethodData.modeOfPaymentDetail,
|
||||
};
|
||||
if (payMethodData.modeOfPayment == "paypal") {
|
||||
httpsUrl = Https.httpUrls.payPaypal;
|
||||
} else if (payMethodData.modeOfPayment == "stripe") {
|
||||
httpsUrl = Https.httpUrls.payStripe;
|
||||
// data.
|
||||
} else {
|
||||
httpsUrl = Https.httpUrls.payAlipayHK;
|
||||
}
|
||||
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;
|
||||
if (payMethodData.modeOfPayment == "paypal") {
|
||||
// 在新窗口中写入内容
|
||||
herf = rv.approve;
|
||||
// payMethodData.newWindow.location.href = rv.approve;
|
||||
} else if (payMethodData.modeOfPayment == "stripe") {
|
||||
herf = rv;
|
||||
// payMethodData.newWindow.location.href = rv
|
||||
} else {
|
||||
let data = JSON.parse(rv);
|
||||
herf = `${data.url}?${data.alipay_order_string}`;
|
||||
// payMethodData.newWindow.location.href = herf;
|
||||
}
|
||||
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;
|
||||
});
|
||||
};
|
||||
const setPaidBack = () => {
|
||||
payMethod.payMethodModel = false;
|
||||
payMethodData.isShowMark = false;
|
||||
payMethodData.clause = false;
|
||||
payMethodData.modeOfPayment =
|
||||
prop.type == "credits" ? "paypal" : "stripe";
|
||||
payMethodData.modeOfPaymentDetail = "ALIPAYHK";
|
||||
};
|
||||
const completePayment = () => {
|
||||
setPaidBack();
|
||||
emit("completePayment");
|
||||
};
|
||||
return {
|
||||
store,
|
||||
...toRefs(payMethod),
|
||||
...toRefs(payMethodData),
|
||||
init,
|
||||
cancelDsign,
|
||||
payAffirm,
|
||||
setPaidBack,
|
||||
completePayment,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
turnToWindow(url: any) {
|
||||
window.open(url);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
turnToWindow(url:any) {
|
||||
window.open(url);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.payMethod {
|
||||
.payMethodContent{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 60rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.generalModelTitle,.generalModelInfo{
|
||||
width: 100%;
|
||||
}
|
||||
.payMethod_list{
|
||||
margin-bottom: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
>label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 3rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid #EFEFEF;
|
||||
border-radius: 2rem;
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
img{
|
||||
margin: 0rem 2rem;
|
||||
// max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
.payAffirm_detail{
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
>label{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
span{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
>label:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_clause{
|
||||
margin-bottom: 4rem;
|
||||
label{
|
||||
cursor: pointer;
|
||||
input{
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span{
|
||||
vertical-align: top;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
>div{
|
||||
width: 29rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
.mark_loading_title{
|
||||
font-size: 3rem;
|
||||
// text-decoration: underline;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
// 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;
|
||||
}
|
||||
.payMethodContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 60rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.generalModelTitle,
|
||||
.generalModelInfo {
|
||||
width: 100%;
|
||||
}
|
||||
.payMethod_list {
|
||||
margin-bottom: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
> label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 3rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid #efefef;
|
||||
border-radius: 2rem;
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
img {
|
||||
margin: 0rem 2rem;
|
||||
// max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
.payAffirm_detail {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
> label {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> label:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_clause {
|
||||
margin-bottom: 4rem;
|
||||
label {
|
||||
cursor: pointer;
|
||||
input {
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
vertical-align: top;
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
> div {
|
||||
width: 29rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mark_loading {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
.mark_loading_title {
|
||||
font-size: 3rem;
|
||||
// text-decoration: underline;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
.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: #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>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user