aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
李志鹏
2025-12-12 10:34:12 +08:00
parent ed83044f81 9cb6be3098
commit 84175e94d1
2 changed files with 983 additions and 952 deletions
Download Patch File Download Diff File Expand all files Collapse all files

459
src/component/HomePage/renew.vue
View File

@@ -19,7 +19,8 @@
<div class="generalModel_closeIcon" @click.stop="cancelDsign()"> <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<!-- <i class="fi fi-rr-cross-small"></i> --> <!-- <i class="fi fi-rr-cross-small"></i> -->
<svg <svg
width="100%" height="100%" width="100%"
height="100%"
viewBox="0 0 46 46" viewBox="0 0 46 46"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -49,20 +50,32 @@
<div class="renewContent"> <div class="renewContent">
<div class="left"> <div class="left">
<div class="video"> <div class="video">
<video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video> <video
autoplay
loop
muted
playsinline
src="@/assets/images/icon/paymentVideo.mp4"
></video>
<div class="mask"></div> <div class="mask"></div>
</div> </div>
<div class="title">{{ $t("Renew.Strengths") }}</div> <div class="title">{{ $t('Renew.Strengths') }}</div>
<div class="content"> <div class="content">
<div class="benefitsItem"> <div class="benefitsItem">
<div class="describe"> <div class="describe">
<div class="icon"> <div class="icon">
<img src="@/assets/images/icon/paymentIntroduce1.png" alt=""> <img src="@/assets/images/icon/paymentIntroduce1.png" alt="" />
</div> </div>
<div class="text"> <div class="text">
<p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p> <p class="title">
{{ $t('Renew.StrengthsTitle1') }}
<br />
{{ $t('Renew.StrengthsTitle1_1') }}
</p>
<p class="info"> <p class="info">
{{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }} {{ $t('Renew.StrengthsInfo1') }}
<br />
{{ $t('Renew.StrengthsInfo1_1') }}
</p> </p>
</div> </div>
</div> </div>
@@ -70,12 +83,18 @@
<div class="benefitsItem"> <div class="benefitsItem">
<div class="describe"> <div class="describe">
<div class="icon"> <div class="icon">
<img src="@/assets/images/icon/paymentIntroduce2.png" alt=""> <img src="@/assets/images/icon/paymentIntroduce2.png" alt="" />
</div> </div>
<div class="text"> <div class="text">
<p class="title">{{ $t("Renew.StrengthsTitle2") }}<br>{{ $t("Renew.StrengthsTitle2_1") }}</p> <p class="title">
{{ $t('Renew.StrengthsTitle2') }}
<br />
{{ $t('Renew.StrengthsTitle2_1') }}
</p>
<p class="info"> <p class="info">
{{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }} {{ $t('Renew.StrengthsInfo2') }}
<br />
{{ $t('Renew.StrengthsInfo2_1') }}
</p> </p>
</div> </div>
</div> </div>
@@ -83,13 +102,21 @@
<div class="benefitsItem"> <div class="benefitsItem">
<div class="describe"> <div class="describe">
<div class="icon"> <div class="icon">
<img src="@/assets/images/icon/paymentIntroduce3.png" alt=""> <img src="@/assets/images/icon/paymentIntroduce3.png" alt="" />
</div> </div>
<div class="text"> <div class="text">
<p class="title"></p> <p class="title"></p>
<p class="title">{{ $t("Renew.StrengthsTitle3") }}<br>{{ $t("Renew.StrengthsTitle3_1") }}</p> <p class="title">
{{ $t('Renew.StrengthsTitle3') }}
<br />
{{ $t('Renew.StrengthsTitle3_1') }}
</p>
<p class="info"> <p class="info">
{{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }} {{ $t('Renew.StrengthsInfo3') }}
<br />
{{ $t('Renew.StrengthsInfo3_1') }}
<br />
{{ $t('Renew.StrengthsInfo3_2') }}
</p> </p>
</div> </div>
</div> </div>
@@ -97,12 +124,18 @@
<div class="benefitsItem"> <div class="benefitsItem">
<div class="describe"> <div class="describe">
<div class="icon"> <div class="icon">
<img src="@/assets/images/icon/paymentIntroduce4.png" alt=""> <img src="@/assets/images/icon/paymentIntroduce4.png" alt="" />
</div> </div>
<div class="text"> <div class="text">
<p class="title">{{ $t("Renew.StrengthsTitle4") }}<br>{{ $t("Renew.StrengthsTitle4_1") }}</p> <p class="title">
{{ $t('Renew.StrengthsTitle4') }}
<br />
{{ $t('Renew.StrengthsTitle4_1') }}
</p>
<p class="info"> <p class="info">
{{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }} {{ $t('Renew.StrengthsInfo4') }}
<br />
{{ $t('Renew.StrengthsInfo4_1') }}
</p> </p>
</div> </div>
</div> </div>
@@ -111,7 +144,7 @@
</div> </div>
<div class="right"> <div class="right">
<div class="title"> <div class="title">
{{ $t("Renew.title") }} {{ $t('Renew.title') }}
</div> </div>
<!-- <div class="info">{{ $t("Renew.unlimited") }}</div> --> <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
<div class="content"> <div class="content">
@@ -119,36 +152,31 @@
class="productItem" class="productItem"
:class="{ :class="{
active: item.price == current.price, active: item.price == current.price,
sellWell: item.sellWell, sellWell: item.sellWell
}" }"
v-for="item in personage" v-for="item in personage"
:key="item.price" :key="item.price"
@click="setPromotionData(item)" @click="setPromotionData(item)"
> >
<div class="popular" v-show="item.sellWell">{{ $t("Renew.MOSTPOPULAR") }}</div> <div class="popular" v-show="item.sellWell">
{{ $t('Renew.MOSTPOPULAR') }}
</div>
<div class="priceBox"> <div class="priceBox">
<div class="left"> <div class="left">
<p class="productType">1 {{ item.type.label }}</p> <p class="productType">1 {{ item.type.label }}</p>
<p class="price">${{ item.price }}</p> <p class="price">HK $ {{ item.price }}</p>
</div> </div>
<div class="right"> <div class="right">
<div class="promotion"> <div class="promotion">
<div <div class="succeed" v-show="item.promotionData.error == 'true'">
class="succeed"
v-show="item.promotionData.error == 'true'"
>
{{ item.promotionData.code }} {{ item.promotionData.code }}
<i <i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
class="fi fi-sr-times-hexagon"
@click="clearPromotionCode"
></i>
</div> </div>
<div <div
class="input" class="input"
@click.stop @click.stop
v-show=" v-show="
!item.promotionData.error || !item.promotionData.error || item.promotionData.error == 'false'
item.promotionData.error == 'false'
" "
> >
<input <input
@@ -156,14 +184,11 @@
:placeholder="$t('Renew.promotionCode')" :placeholder="$t('Renew.promotionCode')"
v-model="item.promotionData.code" v-model="item.promotionData.code"
/> />
<div style="cursor: pointer; background-color: #000; font-size: 1.2rem; color: #fff; padding: 0 .5rem;" @click="examine(item)"> <div class="apply-btn" @click="examine(item)">
{{ $t("Renew.use") }} {{ $t('Renew.use') }}
</div> </div>
</div> </div>
<div <div class="error" v-show="item.promotionData.error == 'false'">
class="error"
v-show="item.promotionData.error == 'false'"
>
{{ item.promotionData.str }} {{ item.promotionData.str }}
</div> </div>
</div> </div>
@@ -181,7 +206,7 @@
<div class="payment"> <div class="payment">
<div class="allocation"> <div class="allocation">
<div class="selectType"> <div class="selectType">
<div class="text">{{ $t("Renew.Payment") }}:</div> <div class="text">{{ $t('Renew.Payment') }}:</div>
<label> <label>
<input <input
name="payment" name="payment"
@@ -190,7 +215,7 @@
v-model="PaymentType" v-model="PaymentType"
@change="setPaymentType('CreditCard')" @change="setPaymentType('CreditCard')"
/> />
{{ $t("Renew.CreditCard") }} {{ $t('Renew.CreditCard') }}
</label> </label>
<label> <label>
<input <input
@@ -200,43 +225,47 @@
v-model="PaymentType" v-model="PaymentType"
@change="setPaymentType('Alipay')" @change="setPaymentType('Alipay')"
/> />
{{ $t("Renew.Alipay") }} {{ $t('Renew.Alipay') }}
</label> </label>
</div> </div>
</div> </div>
<div class="gallery_btn gallery_btn_radius" @click="payment"> <div class="gallery_btn gallery_btn_radius" @click="payment">
{{ $t("upgradePlan.Continue") }} {{ $t('upgradePlan.Continue') }}
</div> </div>
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer"> <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
<label> <label>
<!-- <input type="checkbox" v-model="clause" /> --> <!-- <input type="checkbox" v-model="clause" /> -->
<span class="generalModelDescription" <span class="generalModelDescription">
>{{ $t("upgradePlan.policy")}} {{ $t('upgradePlan.policy') }}
<a <a
href="https://code-create.com.hk/aida-terms-and-conditions/" href="https://code-create.com.hk/aida-terms-and-conditions/"
target="_blank"> target="_blank"
{{ $t("upgradePlan.policy1") }} >
{{ $t('upgradePlan.policy1') }}
</a> </a>
& &
<a <a
href="https://code-create.com.hk/aida-subscription-agreement/" href="https://code-create.com.hk/aida-subscription-agreement/"
target="_blank"> target="_blank"
{{ $t("upgradePlan.policy2") }} >
{{ $t('upgradePlan.policy2') }}
</a> </a>
<!-- . * --> <!-- . * -->
</span </span>
>
</label> </label>
<label class="secure"> <label class="secure">
<span><i class="fi fi-rr-shield-check"></i>Pay safe & secure</span> <span>
<i class="fi fi-rr-shield-check"></i>
Pay safe & secure
</span>
</label> </label>
<label class="payIcon"> <label class="payIcon">
<img class="stripe" src="@/assets/images/icon/stripe.svg" alt=""> <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/alipay.svg" alt="" />
<img class="alipay" src="@/assets/images/icon/jcbPay.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/mastercardPay.svg" alt="" />
<img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt=""> <img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="" />
<img class="alipay" src="@/assets/images/icon/visaPay.svg" alt=""> <img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="" />
</label> </label>
</div> </div>
<!-- <div class="paySecure"> <!-- <div class="paySecure">
@@ -250,101 +279,104 @@
<a-spin size="large" /> <a-spin size="large" />
</div> </div>
<div class="mark_loading" v-show="isShowMark" state="true"> <div class="mark_loading" v-show="isShowMark" state="true">
<div class="mark_loading_title">{{ $t("upgradePlan.completed") }}</div> <div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
<div class="mark_loading_intro">{{ $t("upgradePlan.hint") }}</div> <div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
<div class="mark_loading_title_box"> <div class="mark_loading_title_box">
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack"> <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
{{ $t("upgradePlan.Back") }} {{ $t('upgradePlan.Back') }}
</div> </div>
<div class="mark_loading_btn" @click="completePayment">OK</div> <div class="mark_loading_btn" @click="completePayment">OK</div>
</div> </div>
</div> </div>
</a-modal> </a-modal>
<payMethod <payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
ref="payMethod"
@completePayment="cancelDsign"
type="renew"
></payMethod>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, computed, reactive, toRefs, onMounted, onBeforeUnmount } from "vue"; import {
import { message } from "ant-design-vue"; defineComponent,
import payMethod from "@/component/Pay/payMethod.vue"; computed,
import { useStore } from "vuex"; reactive,
import { useI18n } from "vue-i18n"; toRefs,
import { Https } from "@/tool/https"; onMounted,
import md5 from "md5"; 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({ export default defineComponent({
components: { components: {
payMethod, payMethod
}, },
setup() { setup() {
const store = useStore(); const store = useStore()
const { t } = useI18n(); const { t } = useI18n()
let renew = reactive({ let renew = reactive({
renewModel: false, renewModel: false,
renewModelMask: true, renewModelMask: true,
pageWidth: "50%", pageWidth: '50%'
}); })
let payMethodData = reactive({ let payMethodData = reactive({
clause: false, clause: false,
labelDisclaimer: null as any, labelDisclaimer: null as any,
newWindow: null as any, newWindow: null as any,
isShowMark: false, isShowMark: false,
isShowMark_: false, isShowMark_: false
}); })
let renewData = reactive({ let renewData = reactive({
personage: [ personage: [
{ {
price: "100", price: '100',
sellWell: true, sellWell: true,
activity: false, //活动打折 activity: false, //活动打折
type: { type: {
value: "EcoMonth", value: 'EcoMonth',
label: computed(()=>t("Renew.Monthly")), label: computed(() => t('Renew.Monthly'))
}, },
// PaymentType: "CreditCard", // PaymentType: "CreditCard",
promotionData: { promotionData: {
code: "", code: '',
error: "", error: '',
str: "", str: '',
price: "", price: ''
}, }
}, },
{ {
price: "500", price: '500',
sellWell: false, sellWell: false,
activity: false, //活动打折 activity: false, //活动打折
type: { type: {
value: "Month", value: 'Month',
label: computed(()=>t("Renew.Monthly")), label: computed(() => t('Renew.Monthly'))
}, },
// PaymentType: "CreditCard", // PaymentType: "CreditCard",
promotionData: { promotionData: {
code: "", code: '',
error: "", error: '',
str: "", str: '',
price: "", price: ''
}, }
}, },
{ {
price: "5,000", price: '5,000',
sellWell: false, sellWell: false,
activity: false, //活动打折 activity: false, //活动打折
typeValue: "year", typeValue: 'year',
type: { type: {
value: "Year", value: 'Year',
label: computed(()=>t("Renew.Yearly")), label: computed(() => t('Renew.Yearly'))
}, },
// PaymentType: "CreditCard", // PaymentType: "CreditCard",
promotionData: { promotionData: {
code: "", code: '',
error: "", error: '',
str: "", str: '',
price: "", price: ''
}, }
}, }
], ],
// personage:computed(()=>{ // personage:computed(()=>{
// return { // return {
@@ -365,55 +397,55 @@
// }), // }),
firm: computed(() => { firm: computed(() => {
return { return {
title: "Education Edition", title: 'Education Edition',
price: { price: {
year: "500", year: '500'
}, },
unit: { unit: {
year: "HKD / Year", year: 'HKD / Year'
}, },
type: "year", type: 'year',
autoRenewal: { autoRenewal: {
text: t("Renew.automatically"), text: t('Renew.automatically'),
value: true, value: true
}, },
typeList: ["year"], typeList: ['year'],
info: "Customised plan", info: 'Customised plan'
}; }
}), }),
education: computed(() => { education: computed(() => {
return { return {
title: "Enterprise Edition", title: 'Enterprise Edition',
price: { price: {
year: "500", year: '500'
}, },
unit: { unit: {
year: "HKD / Year", year: 'HKD / Year'
}, },
type: "year", type: 'year',
autoRenewal: { autoRenewal: {
text: t("Renew.automatically"), text: t('Renew.automatically'),
value: true, value: true
}, },
typeList: ["year"], typeList: ['year'],
info: "Customised plan", info: 'Customised plan'
}; }
}), }),
current: {} as any, current: {} as any,
payMethod: null as any, payMethod: null as any,
PaymentType: "CreditCard", PaymentType: 'CreditCard'
}); })
const init = () => { const init = () => {
renew.renewModel = true; renew.renewModel = true
renewData.current = renewData.personage[1]; renewData.current = renewData.personage[1]
}; }
const cancelDsign = () => { const cancelDsign = () => {
renew.renewModel = false; renew.renewModel = false
store.dispatch('getUserDetail') store.dispatch('getUserDetail')
}; }
const setPaymentType = (str: any) => { const setPaymentType = (str: any) => {
renewData.PaymentType = str; renewData.PaymentType = str
}; }
const payment = () => { const payment = () => {
// if (!payMethodData.clause) { // if (!payMethodData.clause) {
// let labelDisclaimer: any = payMethodData.labelDisclaimer; // let labelDisclaimer: any = payMethodData.labelDisclaimer;
@@ -425,104 +457,92 @@
// } // }
// return; // return;
// } // }
if (!renewData.PaymentType) if (!renewData.PaymentType) return message.info(t('Renew.PleaseSelectPayment'))
return message.info(t("Renew.PleaseSelectPayment")); let url = window.location.origin + '/paySucceed'
let url = window.location.origin + "/paySucceed";
let data = { let data = {
autoRenewal: renewData.PaymentType != "Alipay", //false为不自动续费 autoRenewal: renewData.PaymentType != 'Alipay', //false为不自动续费
productName: "Subscription", productName: 'Subscription',
quantity: 1, quantity: 1,
returnUrl: url, returnUrl: url,
subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费 subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
wallet: "ALIPAYHK", wallet: 'ALIPAYHK',
promotionCode: renewData.current.promotionData.code, promotionCode: renewData.current.promotionData.code
}; }
let httpsUrl = Https.httpUrls.payStripe; let httpsUrl = Https.httpUrls.payStripe
payMethodData.isShowMark_ = true; payMethodData.isShowMark_ = true
Https.axiosPost(httpsUrl, data) Https.axiosPost(httpsUrl, data)
.then((rv: any) => { .then((rv: any) => {
var width = 800; var width = 800
var height = 600; var height = 600
var left = (screen.width - width) / 2; var left = (screen.width - width) / 2
var top = (screen.height - height) / 2; var top = (screen.height - height) / 2
payMethodData.newWindow = window.open( payMethodData.newWindow = window.open(
"", '',
"_blank", '_blank',
"width=" + 'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top
width + )
", height=" + let herf = rv
height +
", left=" +
left +
", top=" +
top
);
let herf = rv;
if (payMethodData.newWindow) { if (payMethodData.newWindow) {
payMethodData.newWindow.location.href = herf; payMethodData.newWindow.location.href = herf
} else { } else {
// window.open(herf, '_blank'); // window.open(herf, '_blank');
window.location.href = herf; window.location.href = herf
} }
payMethodData.newWindow = null; payMethodData.newWindow = null
payMethodData.isShowMark = true; payMethodData.isShowMark = true
payMethodData.isShowMark_ = false; payMethodData.isShowMark_ = false
})
.catch(res => {
payMethodData.isShowMark_ = false
}) })
.catch((res) => {
payMethodData.isShowMark_ = false;
});
// renewData.payMethod.init(data) // renewData.payMethod.init(data)
}; }
const setPaidBack = () => { const setPaidBack = () => {
payMethod.payMethodModel = false; payMethod.payMethodModel = false
payMethodData.isShowMark = false; payMethodData.isShowMark = false
payMethodData.clause = false; payMethodData.clause = false
}; }
const completePayment = () => { const completePayment = () => {
renew.renewModel = false; renew.renewModel = false
setPaidBack(); setPaidBack()
}; }
const examine = (item: any) => { const examine = (item: any) => {
// renewData.promotionData.error // renewData.promotionData.error
let price = item?.price; let price = item?.price
const normalNumber = Number(price.replace(/,/g, "")); const normalNumber = Number(price.replace(/,/g, ''))
if (!item.promotionData.code) { if (!item.promotionData.code) {
return; return
} }
let data = { let data = {
promotionCode: item.promotionData.code, promotionCode: item.promotionData.code,
price: normalNumber, price: normalNumber
}; }
Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then( Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then((rv: any) => {
(rv: any) => {
if (rv) { if (rv) {
renewData.personage.forEach((personageItem: any) => { renewData.personage.forEach((personageItem: any) => {
if (personageItem.price == item.price) { if (personageItem.price == item.price) {
if (rv.status == "valid") { if (rv.status == 'valid') {
item.promotionData.error = "true"; item.promotionData.error = 'true'
item.promotionData.price = Number( item.promotionData.price = Number(rv.discountedPrice).toLocaleString()
rv.discountedPrice
).toLocaleString();
} else { } else {
item.promotionData.error = "false"; item.promotionData.error = 'false'
item.promotionData.str = rv.message; item.promotionData.str = rv.message
} }
} }
}); })
} else { } else {
} }
})
} }
);
};
const clearPromotionCode = () => { const clearPromotionCode = () => {
renewData.current.promotionData.error = ""; renewData.current.promotionData.error = ''
renewData.current.promotionData.code = ""; renewData.current.promotionData.code = ''
renewData.current.promotionData.price = ""; renewData.current.promotionData.price = ''
}; }
const setPromotionData = (item: any) => { const setPromotionData = (item: any) => {
renewData.current = item; renewData.current = item
}; }
return { return {
store, store,
...toRefs(renew), ...toRefs(renew),
@@ -536,18 +556,18 @@
completePayment, completePayment,
examine, examine,
clearPromotionCode, clearPromotionCode,
setPromotionData, setPromotionData
}; }
}, },
data() { data() {
return {}; return {}
}, },
methods: { methods: {
turnToWindow(url: any) { turnToWindow(url: any) {
window.open(url); window.open(url)
}, }
}, }
}); })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.renew { .renew {
@@ -560,6 +580,18 @@
overflow: hidden; overflow: hidden;
> .left, > .left,
> .right { > .right {
.apply-btn {
cursor: pointer;
background-color: rgb(27, 34, 60);
font-size: 0.8rem;
color: #fff;
padding: 0 0.5rem;
width: 3.3rem;
height: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
}
> .title { > .title {
text-align: center; text-align: center;
font-size: 3.2rem; font-size: 3.2rem;
@@ -607,7 +639,7 @@
height: 100%; height: 100%;
left: 0; left: 0;
top: 0; top: 0;
background: rgba(0,0,0,.5); background: rgba(0, 0, 0, 0.5);
} }
} }
@@ -679,11 +711,11 @@
margin-bottom: 1rem; margin-bottom: 1rem;
border-radius: 1rem; border-radius: 1rem;
overflow: hidden; overflow: hidden;
border: 1.5px solid #E7EBFF; border: 1.5px solid #e7ebff;
cursor: pointer; cursor: pointer;
> .popular { > .popular {
background: #1B223C; background: #1b223c;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -745,7 +777,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 2rem; border-radius: 2rem;
border: 2px solid #000; border: 1.5px solid rgb(216, 218, 220);
overflow: hidden; overflow: hidden;
padding: 0 1rem; padding: 0 1rem;
input { input {
@@ -768,11 +800,11 @@
} }
} }
} }
&.active,&:hover { &.active,
&:hover {
// 40% opacity // 40% opacity
background: rgba(231, 235, 255, 0.4); background: rgba(231, 235, 255, 0.4);
// border: 2px solid #0ea982; // border: 2px solid #0ea982;
} }
&.sellWell { &.sellWell {
// border: 2px solid #0ea982; // border: 2px solid #0ea982;
@@ -810,9 +842,9 @@
> .gallery_btn { > .gallery_btn {
width: 100%; width: 100%;
margin: 2rem 0; margin: 2rem 0;
margin-bottom: .5rem; margin-bottom: 0.5rem;
margin-top: 1rem; margin-top: 1rem;
background: #1B223C; background: #1b223c;
color: #fff; color: #fff;
} }
> .payMethod_payAffirm_clause { > .payMethod_payAffirm_clause {
@@ -839,8 +871,8 @@
border: 1px solid #ededed; border: 1px solid #ededed;
background: #f1fbf9; background: #f1fbf9;
color: #1cb36c; color: #1cb36c;
padding: .4rem .8rem; padding: 0.4rem 0.8rem;
border-radius: .5rem; border-radius: 0.5rem;
margin-top: 4rem; margin-top: 4rem;
> span { > span {
display: flex; display: flex;
@@ -848,14 +880,14 @@
} }
i { i {
display: flex; display: flex;
margin-right: .5rem; margin-right: 0.5rem;
} }
} }
> .payIcon { > .payIcon {
height: 2rem; height: 2rem;
margin-top: 1rem; margin-top: 1rem;
img { img {
margin: 0 .3rem; margin: 0 0.3rem;
height: 100%; height: 100%;
} }
} }
@@ -953,4 +985,3 @@
} }
} }
</style> </style>

2
src/lang/en.ts
View File

@@ -959,7 +959,7 @@ export default {
MOSTPOPULAR: 'MOST POPULAR', MOSTPOPULAR: 'MOST POPULAR',
Monthly: 'Monthly', Monthly: 'Monthly',
Yearly: 'Yearly', Yearly: 'Yearly',
promotionCode: 'Coupon', promotionCode: 'Coupon Code',
use: 'Apply', use: 'Apply',
PromoCodeError: PromoCodeError:
'Please check if the promo code is correct or if the date has expired', 'Please check if the promo code is correct or if the date has expired',