997 lines
28 KiB
Vue
997 lines
28 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="100%"
|
||
height="100%"
|
||
viewBox="0 0 46 46"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<circle cx="23" cy="23" r="23" fill="black" fill-opacity="0.3" />
|
||
<rect
|
||
x="32.5063"
|
||
y="12"
|
||
width="3"
|
||
height="29"
|
||
rx="1.5"
|
||
transform="rotate(45 32.5063 12)"
|
||
fill="white"
|
||
/>
|
||
<rect
|
||
x="34.6274"
|
||
y="32.5059"
|
||
width="3"
|
||
height="29"
|
||
rx="1.5"
|
||
transform="rotate(135 34.6274 32.5059)"
|
||
fill="white"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="renewContent">
|
||
<div class="left">
|
||
<div class="video">
|
||
<video
|
||
autoplay
|
||
loop
|
||
muted
|
||
playsinline
|
||
src="@/assets/images/icon/paymentVideo.mp4"
|
||
></video>
|
||
<div class="mask"></div>
|
||
</div>
|
||
<div class="title">{{ $t('Renew.Strengths') }}</div>
|
||
<div class="content">
|
||
<div class="benefitsItem">
|
||
<div class="describe">
|
||
<div class="icon">
|
||
<img src="@/assets/images/icon/paymentIntroduce1.png" alt="" />
|
||
</div>
|
||
<div class="text">
|
||
<p class="title">
|
||
{{ $t('Renew.StrengthsTitle1') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsTitle1_1') }}
|
||
</p>
|
||
<p class="info">
|
||
{{ $t('Renew.StrengthsInfo1') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsInfo1_1') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="benefitsItem">
|
||
<div class="describe">
|
||
<div class="icon">
|
||
<img src="@/assets/images/icon/paymentIntroduce2.png" alt="" />
|
||
</div>
|
||
<div class="text">
|
||
<p class="title">
|
||
{{ $t('Renew.StrengthsTitle2') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsTitle2_1') }}
|
||
</p>
|
||
<p class="info">
|
||
{{ $t('Renew.StrengthsInfo2') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsInfo2_1') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="benefitsItem">
|
||
<div class="describe">
|
||
<div class="icon">
|
||
<img src="@/assets/images/icon/paymentIntroduce3.png" alt="" />
|
||
</div>
|
||
<div class="text">
|
||
<p class="title"></p>
|
||
<p class="title">
|
||
{{ $t('Renew.StrengthsTitle3') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsTitle3_1') }}
|
||
</p>
|
||
<p class="info">
|
||
{{ $t('Renew.StrengthsInfo3') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsInfo3_1') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsInfo3_2') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="benefitsItem">
|
||
<div class="describe">
|
||
<div class="icon">
|
||
<img src="@/assets/images/icon/paymentIntroduce4.png" alt="" />
|
||
</div>
|
||
<div class="text">
|
||
<p class="title">
|
||
{{ $t('Renew.StrengthsTitle4') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsTitle4_1') }}
|
||
</p>
|
||
<p class="info">
|
||
{{ $t('Renew.StrengthsInfo4') }}
|
||
<br />
|
||
{{ $t('Renew.StrengthsInfo4_1') }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="title">
|
||
{{ $t('Renew.title') }}
|
||
</div>
|
||
<!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
|
||
<div class="content">
|
||
<div
|
||
class="productItem"
|
||
:class="{
|
||
active: item.price == current.price,
|
||
sellWell: item.sellWell
|
||
}"
|
||
v-for="item in personage"
|
||
:key="item.price"
|
||
@click="setPromotionData(item)"
|
||
>
|
||
<div class="popular" v-show="item.sellWell">
|
||
{{ $t('Renew.MOSTPOPULAR') }}
|
||
</div>
|
||
<div class="priceBox">
|
||
<div class="left">
|
||
<p class="productType">1 {{ item.type.label }}</p>
|
||
<p class="price">HK $ {{ item.price }}</p>
|
||
</div>
|
||
<div class="right">
|
||
<div class="promotion">
|
||
<div class="succeed" v-show="item.promotionData.error == 'true'">
|
||
{{ item.promotionData.code }}
|
||
<i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
|
||
</div>
|
||
<div
|
||
class="input"
|
||
@click.stop
|
||
v-show="
|
||
!item.promotionData.error || item.promotionData.error == 'false'
|
||
"
|
||
>
|
||
<input
|
||
type="text"
|
||
:placeholder="$t('Renew.promotionCode')"
|
||
v-model="item.promotionData.code"
|
||
/>
|
||
<div class="apply-btn" @click="examine(item)">
|
||
{{ $t('Renew.use') }}
|
||
</div>
|
||
</div>
|
||
<div class="error" v-show="item.promotionData.error == 'false'">
|
||
{{ item.promotionData.str }}
|
||
</div>
|
||
</div>
|
||
<p
|
||
class="discountsPrice"
|
||
v-show="item.promotionData.price"
|
||
style="text-align: center"
|
||
>
|
||
${{ item.promotionData.price }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="payment">
|
||
<div class="allocation">
|
||
<div class="selectType">
|
||
<div class="text">{{ $t('Renew.Payment') }}:</div>
|
||
<label>
|
||
<input
|
||
name="payment"
|
||
type="radio"
|
||
value="CreditCard"
|
||
v-model="PaymentType"
|
||
@change="setPaymentType('CreditCard')"
|
||
/>
|
||
{{ $t('Renew.CreditCard') }}
|
||
</label>
|
||
<label>
|
||
<input
|
||
name="payment"
|
||
type="radio"
|
||
value="Alipay"
|
||
v-model="PaymentType"
|
||
@change="setPaymentType('Alipay')"
|
||
/>
|
||
{{ $t('Renew.Alipay') }}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="gallery_btn gallery_btn_radius" @click="payment">
|
||
{{ $t('upgradePlan.Continue') }}
|
||
</div>
|
||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||
<label>
|
||
<!-- <input type="checkbox" v-model="clause" /> -->
|
||
<span class="generalModelDescription">
|
||
{{ $t('upgradePlan.policy') }}
|
||
<a
|
||
href="https://code-create.com.hk/aida-terms-and-conditions/"
|
||
target="_blank"
|
||
>
|
||
{{ $t('upgradePlan.policy1') }}
|
||
</a>
|
||
&
|
||
<a
|
||
href="https://code-create.com.hk/aida-subscription-agreement/"
|
||
target="_blank"
|
||
>
|
||
{{ $t('upgradePlan.policy2') }}
|
||
</a>
|
||
<!-- . * -->
|
||
</span>
|
||
</label>
|
||
<label class="secure">
|
||
<span>
|
||
<i class="fi fi-rr-shield-check"></i>
|
||
Pay safe & secure
|
||
</span>
|
||
</label>
|
||
<label class="payIcon">
|
||
<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="" />
|
||
<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="" />
|
||
<img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="" />
|
||
<img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="" />
|
||
<img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="" />
|
||
<img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="" />
|
||
</label>
|
||
</div>
|
||
<!-- <div class="paySecure">
|
||
<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
|
||
<span>Pay safe & secure </span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mark_loading" v-show="isShowMark_">
|
||
<a-spin size="large" />
|
||
</div>
|
||
<div class="mark_loading" v-show="isShowMark" state="true">
|
||
<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
|
||
<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
|
||
<div class="mark_loading_title_box">
|
||
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
|
||
{{ $t('upgradePlan.Back') }}
|
||
</div>
|
||
<div class="mark_loading_btn" @click="completePayment">OK</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
<payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import {
|
||
defineComponent,
|
||
computed,
|
||
reactive,
|
||
toRefs,
|
||
onMounted,
|
||
onBeforeUnmount
|
||
} from 'vue'
|
||
import { message } from 'ant-design-vue'
|
||
import payMethod from '@/component/Pay/payMethod.vue'
|
||
import { useStore } from 'vuex'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { Https } from '@/tool/https'
|
||
import md5 from 'md5'
|
||
export default defineComponent({
|
||
components: {
|
||
payMethod
|
||
},
|
||
setup() {
|
||
const store = useStore()
|
||
const { t } = useI18n()
|
||
let renew = reactive({
|
||
renewModel: false,
|
||
renewModelMask: true,
|
||
pageWidth: '50%'
|
||
})
|
||
let payMethodData = reactive({
|
||
clause: false,
|
||
labelDisclaimer: null as any,
|
||
newWindow: null as any,
|
||
isShowMark: false,
|
||
isShowMark_: false
|
||
})
|
||
let renewData = reactive({
|
||
personage: [
|
||
{
|
||
price: '100',
|
||
sellWell: true,
|
||
activity: false, //活动打折
|
||
type: {
|
||
value: 'EcoMonth',
|
||
label: computed(() => t('Renew.Monthly'))
|
||
},
|
||
// PaymentType: "CreditCard",
|
||
promotionData: {
|
||
code: '',
|
||
error: '',
|
||
str: '',
|
||
price: ''
|
||
}
|
||
},
|
||
{
|
||
price: '500',
|
||
sellWell: false,
|
||
activity: false, //活动打折
|
||
type: {
|
||
value: 'Month',
|
||
label: computed(() => t('Renew.Monthly'))
|
||
},
|
||
// PaymentType: "CreditCard",
|
||
promotionData: {
|
||
code: '',
|
||
error: '',
|
||
str: '',
|
||
price: ''
|
||
}
|
||
},
|
||
{
|
||
price: '5,000',
|
||
sellWell: false,
|
||
activity: false, //活动打折
|
||
typeValue: 'year',
|
||
type: {
|
||
value: 'Year',
|
||
label: computed(() => t('Renew.Yearly'))
|
||
},
|
||
// PaymentType: "CreditCard",
|
||
promotionData: {
|
||
code: '',
|
||
error: '',
|
||
str: '',
|
||
price: ''
|
||
}
|
||
}
|
||
],
|
||
// personage:computed(()=>{
|
||
// return {
|
||
// title:t('Renew.PersonalVersion'),
|
||
// price:{
|
||
// monthly:'500',
|
||
// year:'5,000',
|
||
// },
|
||
// unit:{
|
||
// monthly:t('Renew.HKDMonth'),
|
||
// year:t('Renew.HKDYear'),
|
||
// },
|
||
// type:'monthly',
|
||
// PaymentType:'',
|
||
// typeList:['monthly','year'],
|
||
// info:'Tax, VAT not included.',
|
||
// }
|
||
// }),
|
||
firm: computed(() => {
|
||
return {
|
||
title: 'Education Edition',
|
||
price: {
|
||
year: '500'
|
||
},
|
||
unit: {
|
||
year: 'HKD / Year'
|
||
},
|
||
type: 'year',
|
||
autoRenewal: {
|
||
text: t('Renew.automatically'),
|
||
value: true
|
||
},
|
||
typeList: ['year'],
|
||
info: 'Customised plan'
|
||
}
|
||
}),
|
||
education: computed(() => {
|
||
return {
|
||
title: 'Enterprise Edition',
|
||
price: {
|
||
year: '500'
|
||
},
|
||
unit: {
|
||
year: 'HKD / Year'
|
||
},
|
||
type: 'year',
|
||
autoRenewal: {
|
||
text: t('Renew.automatically'),
|
||
value: true
|
||
},
|
||
typeList: ['year'],
|
||
info: 'Customised plan'
|
||
}
|
||
}),
|
||
current: {} as any,
|
||
payMethod: null as any,
|
||
PaymentType: 'CreditCard'
|
||
})
|
||
const init = () => {
|
||
renew.renewModel = true
|
||
renewData.current = renewData.personage[1]
|
||
}
|
||
const cancelDsign = () => {
|
||
renew.renewModel = false
|
||
store.dispatch('getUserDetail')
|
||
}
|
||
const setPaymentType = (str: any) => {
|
||
renewData.PaymentType = str
|
||
}
|
||
const payment = () => {
|
||
// if (!payMethodData.clause) {
|
||
// let labelDisclaimer: any = payMethodData.labelDisclaimer;
|
||
// if (!labelDisclaimer.classList.contains("animation")) {
|
||
// labelDisclaimer.classList.add("animation");
|
||
// setTimeout(() => {
|
||
// labelDisclaimer.classList.remove("animation");
|
||
// }, 1000);
|
||
// }
|
||
// return;
|
||
// }
|
||
if (!renewData.PaymentType) return message.info(t('Renew.PleaseSelectPayment'))
|
||
let url = window.location.origin + '/paySucceed'
|
||
let data = {
|
||
autoRenewal: renewData.PaymentType != 'Alipay', //false为不自动续费
|
||
productName: 'Subscription',
|
||
quantity: 1,
|
||
returnUrl: url,
|
||
subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
|
||
wallet: 'ALIPAYHK',
|
||
promotionCode: renewData.current.promotionData.code
|
||
}
|
||
let httpsUrl = Https.httpUrls.payStripe
|
||
payMethodData.isShowMark_ = true
|
||
Https.axiosPost(httpsUrl, data)
|
||
.then((rv: any) => {
|
||
var width = 800
|
||
var height = 600
|
||
var left = (screen.width - width) / 2
|
||
var top = (screen.height - height) / 2
|
||
payMethodData.newWindow = window.open(
|
||
'',
|
||
'_blank',
|
||
'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top
|
||
)
|
||
let herf = rv
|
||
if (payMethodData.newWindow) {
|
||
payMethodData.newWindow.location.href = herf
|
||
} else {
|
||
// window.open(herf, '_blank');
|
||
window.location.href = herf
|
||
}
|
||
payMethodData.newWindow = null
|
||
payMethodData.isShowMark = true
|
||
payMethodData.isShowMark_ = false
|
||
})
|
||
.catch(res => {
|
||
payMethodData.isShowMark_ = false
|
||
})
|
||
|
||
// renewData.payMethod.init(data)
|
||
}
|
||
const setPaidBack = () => {
|
||
payMethod.payMethodModel = false
|
||
payMethodData.isShowMark = false
|
||
payMethodData.clause = false
|
||
}
|
||
const completePayment = () => {
|
||
renew.renewModel = false
|
||
setPaidBack()
|
||
}
|
||
const examine = (item: any) => {
|
||
// renewData.promotionData.error
|
||
let price = item?.price
|
||
const normalNumber = Number(price.replace(/,/g, ''))
|
||
if (!item.promotionData.code) {
|
||
return
|
||
}
|
||
let data = {
|
||
promotionCode: item.promotionData.code,
|
||
price: normalNumber
|
||
}
|
||
Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then((rv: any) => {
|
||
if (rv) {
|
||
renewData.personage.forEach((personageItem: any) => {
|
||
if (personageItem.price == item.price) {
|
||
if (rv.status == 'valid') {
|
||
item.promotionData.error = 'true'
|
||
item.promotionData.price = Number(rv.discountedPrice).toLocaleString()
|
||
} else {
|
||
item.promotionData.error = 'false'
|
||
item.promotionData.str = rv.message
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
}
|
||
})
|
||
}
|
||
const clearPromotionCode = () => {
|
||
renewData.current.promotionData.error = ''
|
||
renewData.current.promotionData.code = ''
|
||
renewData.current.promotionData.price = ''
|
||
}
|
||
const setPromotionData = (item: any) => {
|
||
renewData.current = item
|
||
}
|
||
return {
|
||
store,
|
||
...toRefs(renew),
|
||
...toRefs(renewData),
|
||
...toRefs(payMethodData),
|
||
init,
|
||
cancelDsign,
|
||
setPaymentType,
|
||
payment,
|
||
setPaidBack,
|
||
completePayment,
|
||
examine,
|
||
clearPromotionCode,
|
||
setPromotionData
|
||
}
|
||
},
|
||
data() {
|
||
return {}
|
||
},
|
||
methods: {
|
||
turnToWindow(url: any) {
|
||
window.open(url)
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.renew {
|
||
:deep(.ant-modal-body) {
|
||
padding: 0;
|
||
}
|
||
.renewContent {
|
||
display: flex;
|
||
border-radius: 3rem;
|
||
overflow: hidden;
|
||
> .left,
|
||
> .right {
|
||
> .title {
|
||
text-align: center;
|
||
font-size: 3.2rem;
|
||
font-weight: 600;
|
||
line-height: 4rem;
|
||
position: relative;
|
||
}
|
||
> .info {
|
||
text-align: center;
|
||
opacity: 0.6;
|
||
font-weight: 400;
|
||
margin-top: 0.8rem;
|
||
font-size: 1.6rem;
|
||
position: relative;
|
||
}
|
||
> .content {
|
||
margin-top: 2rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
}
|
||
> .left {
|
||
width: 50%;
|
||
background: #0f0f0f;
|
||
color: #fff;
|
||
padding: 4rem 3.2rem;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
> .video {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
> video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
> .mask {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
> .title {
|
||
opacity: 1;
|
||
// color: #fff;
|
||
}
|
||
> .content {
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
flex: 1;
|
||
align-content: center;
|
||
align-items: center;
|
||
justify-content: center;
|
||
> .benefitsItem {
|
||
display: flex;
|
||
width: 50%;
|
||
}
|
||
|
||
> .benefitsItem {
|
||
border-radius: 2.4rem;
|
||
margin-bottom: 1.6rem;
|
||
padding: 1.6rem;
|
||
justify-content: center;
|
||
> .describe {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
> .icon {
|
||
// border: 1px solid #27272a;
|
||
// background: linear-gradient(#1d1d1d, #000);
|
||
// border-radius: 1.4rem;
|
||
// margin-right: 1.6rem;
|
||
// padding: 1.4rem;
|
||
> img {
|
||
width: 12rem;
|
||
height: 12rem;
|
||
}
|
||
}
|
||
> .text {
|
||
text-align: center;
|
||
> p {
|
||
margin: 0;
|
||
}
|
||
> .title {
|
||
font-size: 2.1rem;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
> .info {
|
||
font-weight: 600;
|
||
margin-top: 0.4rem;
|
||
font-size: 1.2rem;
|
||
// opacity: 0.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
> .right {
|
||
width: 50%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 4rem 3.2rem;
|
||
> .content {
|
||
margin-top: 2rem;
|
||
> .productItem {
|
||
margin-bottom: 1rem;
|
||
border-radius: 1rem;
|
||
overflow: hidden;
|
||
border: 1.5px solid #e7ebff;
|
||
cursor: pointer;
|
||
|
||
> .popular {
|
||
background: #1b223c;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
padding: 0.8rem 1.2rem;
|
||
}
|
||
> .priceBox {
|
||
height: 11rem;
|
||
padding: 1rem 1.2rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
> .left,
|
||
> .right {
|
||
p {
|
||
margin: 0;
|
||
}
|
||
> .discountsPrice,
|
||
> .price {
|
||
font-size: 1.8rem;
|
||
margin-top: 0.4rem;
|
||
// opacity: 0.4;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
> .left {
|
||
> p:nth-child(1) {
|
||
font-size: 2rem;
|
||
// opacity: 0.7;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
> .right {
|
||
> .promotion {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
> .text {
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
margin-right: 2rem;
|
||
}
|
||
> .succeed {
|
||
padding: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 1rem;
|
||
background: #eee;
|
||
// color: #fff;
|
||
// font-weight: 600;
|
||
> i {
|
||
display: flex;
|
||
margin-left: 1rem;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
> .input {
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 2rem;
|
||
border: 1.5px solid rgb(216, 218, 220);
|
||
overflow: hidden;
|
||
padding: 0 1rem;
|
||
background-color: #fff;
|
||
input {
|
||
border: none;
|
||
height: 3rem;
|
||
width: 10rem;
|
||
font-size: 1.2rem;
|
||
background: rgba(0, 0, 0, 0);
|
||
&::placeholder {
|
||
color: #c4c4c4;
|
||
}
|
||
}
|
||
.apply-btn {
|
||
cursor: pointer;
|
||
background-color: rgb(27, 34, 60);
|
||
font-size: 0.8rem;
|
||
color: #fff;
|
||
width: 3.3rem;
|
||
height: 1.4rem;
|
||
line-height: 1.4rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
> .error {
|
||
color: red;
|
||
text-align: center;
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
> .discountsPrice {
|
||
font-weight: 600;
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
&.active,
|
||
&:hover {
|
||
// 40% opacity
|
||
background: rgba(231, 235, 255, 0.4);
|
||
// border: 2px solid #0ea982;
|
||
}
|
||
&.sellWell {
|
||
// border: 2px solid #0ea982;
|
||
}
|
||
}
|
||
> .productItem:last-child {
|
||
margin-bottom: 2rem;
|
||
}
|
||
}
|
||
> .payment {
|
||
margin-top: auto;
|
||
> .allocation {
|
||
// border-radius: 1rem;
|
||
// border: 2px solid #eaecf0;
|
||
// padding: 1rem 1.2rem;
|
||
|
||
> .selectType {
|
||
display: flex;
|
||
> .text {
|
||
font-size: 1.4rem;
|
||
font-weight: 600;
|
||
margin-right: 2rem;
|
||
}
|
||
label {
|
||
margin-right: 1rem;
|
||
display: flex;
|
||
cursor: pointer;
|
||
input {
|
||
margin-right: 0.5rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
> .gallery_btn {
|
||
width: 100%;
|
||
margin: 2rem 0;
|
||
margin-bottom: 0.5rem;
|
||
margin-top: 1rem;
|
||
background: #1b223c;
|
||
color: #fff;
|
||
// width: 41.8rem;
|
||
height: 4rem;
|
||
box-sizing: border-box;
|
||
line-height: 4rem;
|
||
border-radius: 0.6rem;
|
||
}
|
||
> .payMethod_payAffirm_clause {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
label {
|
||
input {
|
||
margin-right: 1rem;
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
}
|
||
span {
|
||
vertical-align: top;
|
||
font-size: 1.4rem;
|
||
a {
|
||
color: #000;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
> .secure {
|
||
border: 1px solid #ededed;
|
||
background: #f1fbf9;
|
||
color: #1cb36c;
|
||
padding: 0.4rem 0.8rem;
|
||
border-radius: 0.5rem;
|
||
margin-top: 4rem;
|
||
> span {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
i {
|
||
display: flex;
|
||
margin-right: 0.5rem;
|
||
}
|
||
}
|
||
> .payIcon {
|
||
height: 2rem;
|
||
margin-top: 1rem;
|
||
img {
|
||
margin: 0 0.3rem;
|
||
height: 100%;
|
||
}
|
||
}
|
||
&.animation {
|
||
animation: shake 0.3s linear;
|
||
@keyframes shake {
|
||
0% {
|
||
transform: translateX(0px);
|
||
}
|
||
25% {
|
||
transform: translateX(-10px);
|
||
}
|
||
50% {
|
||
transform: translateX(10px);
|
||
}
|
||
75% {
|
||
transform: translateX(-10px);
|
||
}
|
||
100% {
|
||
transform: translateX(0px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// > .paySecure{
|
||
// display: flex;
|
||
// margin-top: 1rem;
|
||
// > svg{
|
||
// width: 1.6rem;
|
||
// height: 1.6rem;
|
||
// }
|
||
// > span{
|
||
// font-weight: 600;
|
||
// font-size: 1.4rem;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
// .login_footer_item_text{
|
||
// text-align: center;
|
||
// margin-bottom: 1.5rem;
|
||
// text-decoration: underline;
|
||
// }
|
||
// .login_footer_item_text:last-child{
|
||
// margin-bottom: 0rem;
|
||
// }
|
||
}
|
||
.mark_loading {
|
||
position: absolute;
|
||
z-index: 2;
|
||
background: #fff;
|
||
border-radius: 3rem;
|
||
.mark_loading_title {
|
||
font-size: 3rem;
|
||
// text-decoration: underline;
|
||
font-weight: 600;
|
||
margin-bottom: 2rem;
|
||
overflow: hidden;
|
||
// color: #fff;
|
||
}
|
||
.mark_loading_intro {
|
||
color: rgba(0, 0, 0, 0.6);
|
||
font-size: 1.4rem;
|
||
margin-bottom: 2rem;
|
||
text-align: center;
|
||
width: 80%;
|
||
}
|
||
.mark_loading_title_box {
|
||
display: flex;
|
||
}
|
||
|
||
.mark_loading_btn,
|
||
.mark_loading_btn2 {
|
||
// border: #000;
|
||
// color: #fff;
|
||
display: flex;
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
border: 2px solid;
|
||
padding: 0 20px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
padding: 0.3rem 4rem;
|
||
background: #000;
|
||
color: #fff;
|
||
border: none;
|
||
margin: 0 2rem;
|
||
align-items: center;
|
||
}
|
||
.mark_loading_btn2 {
|
||
border: 2px solid #000;
|
||
color: #000;
|
||
background: rgba(0, 0, 0, 0);
|
||
}
|
||
}
|
||
}
|
||
</style>
|