detail preview可以设置空颜色
This commit is contained in:
X1627315083
@@ -5,7 +5,7 @@
|
||||
:get-container="() => $refs.renew"
|
||||
v-model:visible="renewModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
width="130rem"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -27,80 +27,136 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="renewContent">
|
||||
<div class="generalModelTitle">
|
||||
{{ $t('Renew.title') }}
|
||||
<div class="left">
|
||||
<div class="title">Unlock the Pro Advantage</div>
|
||||
<div class="content">
|
||||
<div class="benefits">
|
||||
<div>Benefits</div>
|
||||
<div class="contrast">
|
||||
<div>Free</div>
|
||||
<div>PRO</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||
<p class="info">More accurate answers with multiple latest AI models</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast">
|
||||
<div>√</div>
|
||||
<div>×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||
<p class="info">More accurate answers with multiple latest AI models</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast">
|
||||
<div>√</div>
|
||||
<div>×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||
<p class="info">More accurate answers with multiple latest AI models</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast">
|
||||
<div>√</div>
|
||||
<div>×</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
|
||||
<p class="info">More accurate answers with multiple latest AI models</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrast">
|
||||
<div>√</div>
|
||||
<div>×</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="renew_detail">
|
||||
<div class="name generalModelTitle">{{ current?.title }}</div>
|
||||
<div class="price_box">
|
||||
<div class="price">
|
||||
<sub>$</sub>
|
||||
{{ current?.price[current?.type] }} <span>{{ current?.unit[current?.type] }}</span>
|
||||
</div>
|
||||
<div class="type" v-if="current.typeList.length > 1">
|
||||
<label>
|
||||
<input name="pric" type="radio" value="monthly" v-model="current.type" @change="setPricType('monthly')">
|
||||
{{ $t('Renew.Monthly') }}
|
||||
</label>
|
||||
<label>
|
||||
<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
|
||||
{{ $t('Renew.Yearly') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="type promotion">
|
||||
<div class="text">{{ $t('Renew.promotionCode') }}:</div>
|
||||
<div class="succeed" v-show="promotionData.error == 'true'">
|
||||
{{promotionData.code}}
|
||||
<i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
{{ $t('Renew.title') }}
|
||||
</div>
|
||||
<div class="info">Get started today for unlimited access!</div>
|
||||
<div class="content">
|
||||
<div class="productItem" :class="{active:item.price == current.price,sellWell:item.sellWell}" v-for="item in personage" :key="item.price" @click="setPromotionData(item)">
|
||||
<div class="popular" v-show="item.sellWell">MOST POPULAR</div>
|
||||
<div class="priceBox">
|
||||
<div class="left">
|
||||
<p class="productType">1 {{ item.type.label }}</p>
|
||||
<p class="price">${{ item.price }}</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="promotion">
|
||||
<div class="succeed" v-show="item.promotionData.error == 'true'">
|
||||
{{item.promotionData.code}}
|
||||
<i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
|
||||
</div>
|
||||
<div class="input" @click.stop v-show="!item.promotionData.error || item.promotionData.error == 'false'">
|
||||
<input type="text" :placeholder="$t('Renew.promotionCode')" v-model="item.promotionData.code">
|
||||
<div style="cursor: pointer;" @click="examine(item)">{{ $t('Renew.use') }}</div>
|
||||
</div>
|
||||
<div class="error" v-show="item.promotionData.error == 'false'">{{item.promotionData.str}}</div>
|
||||
</div>
|
||||
<p class="discountsPrice" v-show="item.promotionData.price" style="text-align: center;">${{ item.promotionData.price }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input" v-show="!promotionData.error || promotionData.error == 'false'">
|
||||
<input type="text" v-model="promotionData.code">
|
||||
<div style="cursor: pointer;" @click="examine">{{ $t('Renew.use') }}</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 class="error" v-show="promotionData.error == 'false'">{{promotionData.str}}</div>
|
||||
</div>
|
||||
<div class="type payment">
|
||||
<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 class="gallery_btn gallery_btn_radius" @click="payment">
|
||||
Continue
|
||||
</div>
|
||||
<!-- <div class="autoRenewal">
|
||||
<label>
|
||||
{{ current.autoRenewal.text }} :
|
||||
<a-switch v-model:checked="current.autoRenewal.value" />
|
||||
</label>
|
||||
</div> -->
|
||||
<div class="info">{{ current?.info }}</div>
|
||||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||||
<label>
|
||||
<input type="checkbox" v-model="clause">
|
||||
<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- <div class="paySecure">
|
||||
<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
|
||||
<span>Pay safe & secure </span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="login_footer_item_text"
|
||||
@click="turnToWindow(
|
||||
'https://code-create.com.hk/aida-terms-and-conditions/'
|
||||
)"
|
||||
>
|
||||
Terms&Conditions
|
||||
</div>
|
||||
<div
|
||||
class="login_footer_item_text"
|
||||
@click="turnToWindow(
|
||||
'https://code-create.com.hk/aida-subscription-agreement/'
|
||||
)"
|
||||
>
|
||||
Privacy Policy
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark_">
|
||||
@@ -140,35 +196,65 @@ export default defineComponent({
|
||||
})
|
||||
let payMethodData = reactive({
|
||||
clause:false,
|
||||
labelDisclaimer:null,
|
||||
labelDisclaimer:null as any,
|
||||
newWindow:null as any,
|
||||
isShowMark:false,
|
||||
isShowMark_:false,
|
||||
})
|
||||
let renewData = reactive({
|
||||
promotionData:{
|
||||
code:'',
|
||||
error:'',
|
||||
str:'',
|
||||
oldPrice:'',
|
||||
},
|
||||
personage:computed(()=>{
|
||||
return {
|
||||
title:t('Renew.PersonalVersion'),
|
||||
price:{
|
||||
monthly:'500',
|
||||
year:'5,000',
|
||||
|
||||
personage:[
|
||||
{
|
||||
price:'500',
|
||||
sellWell:true,
|
||||
activity:false,//活动打折
|
||||
type:{
|
||||
value:'Month',
|
||||
label:'Month',
|
||||
},
|
||||
PaymentType:'',
|
||||
promotionData:{
|
||||
code:'',
|
||||
error:'',
|
||||
str:'',
|
||||
price:'',
|
||||
},
|
||||
},
|
||||
unit:{
|
||||
monthly:t('Renew.HKDMonth'),
|
||||
year:t('Renew.HKDYear'),
|
||||
{
|
||||
price:'5,000',
|
||||
sellWell:false,
|
||||
activity:false,//活动打折
|
||||
typeValue:'year',
|
||||
type:{
|
||||
value:'Year',
|
||||
label:'Year',
|
||||
},
|
||||
PaymentType:'',
|
||||
promotionData:{
|
||||
code:'',
|
||||
error:'',
|
||||
str:'',
|
||||
price:'',
|
||||
},
|
||||
},
|
||||
type:'monthly',
|
||||
PaymentType:'',
|
||||
typeList:['monthly','year'],
|
||||
info:'Tax, VAT not included.',
|
||||
}
|
||||
}),
|
||||
],
|
||||
// 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',
|
||||
@@ -185,6 +271,7 @@ export default defineComponent({
|
||||
},
|
||||
typeList:['year'],
|
||||
info:'Customised plan',
|
||||
|
||||
}
|
||||
}),
|
||||
education:computed(()=>{
|
||||
@@ -212,14 +299,11 @@ export default defineComponent({
|
||||
})
|
||||
const init = ()=>{
|
||||
renew.renewModel = true
|
||||
renewData.current = renewData.personage
|
||||
renewData.current = renewData.personage[0]
|
||||
}
|
||||
const cancelDsign = () => {
|
||||
renew.renewModel = false
|
||||
}
|
||||
const setPricType=(str:any)=>{
|
||||
renewData.current.type = str
|
||||
}
|
||||
const setPaymentType = (str:any)=>{
|
||||
renewData.current.PaymentType = str
|
||||
}
|
||||
@@ -234,10 +318,7 @@ export default defineComponent({
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
let subscribeType = 'Year'
|
||||
if(!renewData.current.PaymentType)return message.info(t('Renew.PleaseSelectPayment'))
|
||||
if(renewData.current.type == 'monthly')subscribeType= 'Month'
|
||||
// let data = {
|
||||
// autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
|
||||
// productName:'Subscription',
|
||||
@@ -249,9 +330,9 @@ export default defineComponent({
|
||||
productName:'Subscription',
|
||||
quantity:1,
|
||||
returnUrl:url,
|
||||
subscribeType:subscribeType,//yearly为年费，monthly为月费
|
||||
subscribeType:renewData.current.type.value,//yearly为年费，monthly为月费
|
||||
wallet:'ALIPAYHK',
|
||||
promotionCode:renewData.promotionData.code,
|
||||
promotionCode:renewData.current.promotionData.code,
|
||||
}
|
||||
let httpsUrl = Https.httpUrls.payStripe
|
||||
payMethodData.isShowMark_ = true
|
||||
@@ -288,37 +369,41 @@ export default defineComponent({
|
||||
renew.renewModel = false
|
||||
setPaidBack()
|
||||
}
|
||||
const examine = ()=>{
|
||||
const examine = (item:any)=>{
|
||||
// renewData.promotionData.error
|
||||
let price = renewData.current?.price[renewData.current?.type]
|
||||
let price = item?.price
|
||||
const normalNumber = Number(price.replace(/,/g, ''));
|
||||
if(!renewData.promotionData.code){
|
||||
if(!item.promotionData.code){
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
promotionCode:renewData.promotionData.code,
|
||||
promotionCode:item.promotionData.code,
|
||||
price:normalNumber,
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.checkCoupon,{params:data}).then((rv:any)=>{
|
||||
if(rv){
|
||||
if(rv.status == "valid"){
|
||||
renewData.promotionData.error = 'true'
|
||||
renewData.promotionData.oldPrice = renewData.current?.price[renewData.current?.type]
|
||||
renewData.current.price[renewData.current.type] = (Number(rv.discountedPrice)).toLocaleString()
|
||||
|
||||
}else{
|
||||
renewData.promotionData.error = 'false'
|
||||
renewData.promotionData.str = rv.message
|
||||
}
|
||||
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.promotionData.error = '';
|
||||
renewData.promotionData.code = ''
|
||||
renewData.current.price[renewData.current.type] = renewData.promotionData.oldPrice
|
||||
renewData.promotionData.oldPrice = ''
|
||||
renewData.current.promotionData.error = '';
|
||||
renewData.current.promotionData.code = ''
|
||||
renewData.current.promotionData.price = ''
|
||||
}
|
||||
const setPromotionData = (item:any)=>{
|
||||
renewData.current = item
|
||||
}
|
||||
return{
|
||||
store,
|
||||
@@ -327,13 +412,13 @@ export default defineComponent({
|
||||
...toRefs(payMethodData),
|
||||
init,
|
||||
cancelDsign,
|
||||
setPricType,
|
||||
setPaymentType,
|
||||
payment,
|
||||
setPaidBack,
|
||||
completePayment,
|
||||
examine,
|
||||
clearPromotionCode,
|
||||
setPromotionData
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -350,159 +435,332 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.renew {
|
||||
:deep(.ant-modal-body){
|
||||
padding: 0;
|
||||
}
|
||||
.renewContent{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.generalModelTitle{
|
||||
text-align: center;
|
||||
}
|
||||
.renew_detail{
|
||||
width: 58rem;
|
||||
height: 60rem;
|
||||
// height: 53rem;
|
||||
border-radius: 3rem;
|
||||
margin-bottom: 5rem;
|
||||
border: 2px solid #000;
|
||||
padding: 6rem 3rem 5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.price_box{
|
||||
display: flex;
|
||||
border-radius: 3rem;
|
||||
overflow: hidden;
|
||||
> .left,> .right{
|
||||
> .title{
|
||||
text-align: center;
|
||||
font-size: 3.2rem;
|
||||
font-weight: 600;
|
||||
line-height: 4rem;
|
||||
}
|
||||
> .info{
|
||||
text-align: center;
|
||||
opacity: .6;
|
||||
font-weight: 400;
|
||||
margin-top: .8rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
> .content{
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.price{
|
||||
font-size: 6rem;
|
||||
sub{
|
||||
font-size: 2rem;
|
||||
top: -3rem;
|
||||
}
|
||||
span{
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
> .left{
|
||||
width: 60%;
|
||||
background: #0f0f0f;
|
||||
color: #fff;
|
||||
padding: 4rem 3.2rem;
|
||||
> .title{
|
||||
opacity: .6;
|
||||
}
|
||||
.type{
|
||||
display: flex;
|
||||
&.promotion{
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> .succeed{
|
||||
padding: 1rem;
|
||||
> .content{
|
||||
> .benefits,> .benefitsItem{
|
||||
display: flex;
|
||||
> .contrast{
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 1rem;
|
||||
background: #eee;
|
||||
> i{
|
||||
> div{
|
||||
width: 8rem;
|
||||
text-align: center;
|
||||
}
|
||||
> div:nth-child(1){
|
||||
margin-right: 2.4rem;
|
||||
opacity: .5;
|
||||
}
|
||||
> div:nth-child(2){
|
||||
opacity: 1;
|
||||
color: #38c793;
|
||||
text-shadow: 0 4px 27.1px #38c793b3;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .benefits{
|
||||
> div:nth-child(1){
|
||||
opacity: .5;
|
||||
}
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
margin: 1rem 0;
|
||||
padding: 0 1.6rem;
|
||||
}
|
||||
> .benefitsItem{
|
||||
border: 1px solid #27272a;
|
||||
border-radius: 2.4rem;
|
||||
margin-bottom: 1.6rem;
|
||||
padding: 1.6rem;
|
||||
> .describe{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon{
|
||||
border: 1px solid #27272a;
|
||||
background: linear-gradient(#1d1d1d,#000);
|
||||
border-radius: 1.4rem;
|
||||
margin-right: 1.6rem;
|
||||
padding: 1.4rem;
|
||||
> img{
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
> .text{
|
||||
> p{
|
||||
margin: 0;
|
||||
}
|
||||
> .title{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .info{
|
||||
font-weight: 400;
|
||||
margin-top: .4rem;
|
||||
font-size: 1.6rem;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
width: 40%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4rem 3.2rem;
|
||||
> .content{
|
||||
margin-top: 2rem;
|
||||
> .productItem{
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
border: 2px solid #eaecf0;
|
||||
|
||||
> .popular{
|
||||
background: #2d9f75;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
padding: .8rem 1.2rem;
|
||||
}
|
||||
> .priceBox{
|
||||
height: 11rem;
|
||||
padding: 1rem 1.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .left,> .right{
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
> .discountsPrice ,> .price{
|
||||
font-size: 1.8rem;
|
||||
margin-top: .4rem;
|
||||
opacity: .4;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
> .left{
|
||||
> p:nth-child(1){
|
||||
font-size: 2rem;
|
||||
opacity: .7;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
> .promotion{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> .text{
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
> .succeed{
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 1rem;
|
||||
background: #eee;
|
||||
// color: #fff;
|
||||
// font-weight: 600;
|
||||
> i{
|
||||
display: flex;
|
||||
margin-left: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #000;
|
||||
overflow: hidden;
|
||||
padding: 0 1rem;
|
||||
input{
|
||||
border: none;
|
||||
height: 3rem;
|
||||
width: 10rem;
|
||||
font-size: 1.2rem;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
> .error{
|
||||
color: red;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
> .discountsPrice{
|
||||
font-weight: 600;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
background: #0ea98233;
|
||||
border: 2px solid #0ea982;
|
||||
> .priceBox{
|
||||
> .left{
|
||||
> p:nth-child(1){
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
> .discountsPrice{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sellWell{
|
||||
border: 2px solid #0ea982;
|
||||
}
|
||||
}
|
||||
> .productItem:last-child{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
> .payment{
|
||||
margin-top: auto;
|
||||
> .allocation{
|
||||
// border-radius: 1rem;
|
||||
// border: 2px solid #eaecf0;
|
||||
// padding: 1rem 1.2rem;
|
||||
|
||||
> .selectType{
|
||||
display: flex;
|
||||
> .text{
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
label{
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
margin-left: 1rem;
|
||||
cursor: pointer;
|
||||
input{
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #000;
|
||||
overflow: hidden;
|
||||
padding: 0 1rem;
|
||||
input{
|
||||
border: none;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
> .error{
|
||||
color: red;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
> .text{
|
||||
margin-right: 2rem;
|
||||
// font-weight: 600;
|
||||
}
|
||||
|
||||
label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 3rem;
|
||||
input{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .gallery_btn{
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
&.payment{
|
||||
> .payMethod_payAffirm_clause{
|
||||
label{
|
||||
margin-right: 1rem;
|
||||
input{
|
||||
margin-right: .5rem;
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span{
|
||||
vertical-align: top;
|
||||
font-size: 1.4rem;
|
||||
a{
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.animation{
|
||||
animation: shake .3s linear;
|
||||
@keyframes shake {
|
||||
0%{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
25%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
50%{
|
||||
transform: translateX(10px);
|
||||
}
|
||||
75%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
100%{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
label:last-child{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login_footer_item_text{
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.login_footer_item_text:last-child{
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
.payMethod_payAffirm_clause{
|
||||
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);
|
||||
}
|
||||
}
|
||||
// > .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{
|
||||
|
||||
Reference in New Issue
Block a user