940 lines
26 KiB
Vue
940 lines
26 KiB
Vue
<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="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="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">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">
|
||
{{ $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 } 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: "500",
|
||
sellWell: true,
|
||
activity: false, //活动打折
|
||
type: {
|
||
value: "Month",
|
||
label: "Monthly",
|
||
},
|
||
PaymentType: "CreditCard",
|
||
promotionData: {
|
||
code: "",
|
||
error: "",
|
||
str: "",
|
||
price: "",
|
||
},
|
||
},
|
||
{
|
||
price: "5,000",
|
||
sellWell: false,
|
||
activity: false, //活动打折
|
||
typeValue: "year",
|
||
type: {
|
||
value: "Year",
|
||
label: "Yearly",
|
||
},
|
||
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 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;
|
||
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;
|
||
> .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,.5);
|
||
}
|
||
}
|
||
|
||
> .title {
|
||
opacity: 1;
|
||
// color: #fff;
|
||
}
|
||
> .content {
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
> .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: 2px solid #eaecf0;
|
||
|
||
> .popular {
|
||
background: #2d9f75;
|
||
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: 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: 0.5rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
> .gallery_btn {
|
||
width: 100%;
|
||
margin: 2rem 0;
|
||
margin-bottom: .5rem;
|
||
margin-top: 1rem;
|
||
}
|
||
> .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: .4rem .8rem;
|
||
border-radius: .5rem;
|
||
margin-top: 4rem;
|
||
> span{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
i{
|
||
display: flex;
|
||
margin-right: .5rem;
|
||
}
|
||
}
|
||
> .payIcon{
|
||
height: 2rem;
|
||
margin-top: 1rem;
|
||
img{
|
||
margin: 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>
|