支付页面
This commit is contained in:
X1627315083
@@ -40,6 +40,13 @@
|
||||
>
|
||||
Trial Approval
|
||||
</div>
|
||||
<div
|
||||
class="trialApproval button_second"
|
||||
@click="UpgradePlan()"
|
||||
>
|
||||
Upgrade Plan
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<nav class="header_nav_content">
|
||||
<div
|
||||
@@ -166,6 +173,7 @@
|
||||
<!-- 绑定邮箱第一步 end -->
|
||||
</div>
|
||||
</a-modal>
|
||||
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
|
||||
</div>
|
||||
</template>
|
||||
<script >
|
||||
@@ -174,6 +182,7 @@ import { isEmail } from "@/tool/util";
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
import Habit from "@/component/Detail/habit.vue";
|
||||
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
@@ -184,6 +193,7 @@ export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
Habit,
|
||||
UpgradePlan,
|
||||
},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
@@ -255,7 +265,10 @@ export default defineComponent({
|
||||
let noRefresh = name === "home" ? true : false;
|
||||
this.$router.push({ name: name, params: { noRefresh: noRefresh } });
|
||||
},
|
||||
|
||||
UpgradePlan(){
|
||||
let UpgradePlan = this.$refs.UpgradePlan
|
||||
UpgradePlan.init()
|
||||
},
|
||||
//点击下拉图标出现操作
|
||||
changeShowOperateContent() {
|
||||
this.isShowOperate = !this.isShowOperate;
|
||||
|
||||
512
src/component/HomePage/UpgradePlan.vue
Normal file
512
src/component/HomePage/UpgradePlan.vue
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<a-modal class="modal_component UpgradePlan_modal"
|
||||
v-model:visible="showUpgradePlan"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="UpgradePlan_closeIcon">
|
||||
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
</div>
|
||||
<div class="UpgradePlan_content">
|
||||
<div>Upgrade your Account Subscription Plan</div>
|
||||
</div>
|
||||
<div v-show="stepNum == 0" class="UpgradePlan_nav">
|
||||
<div class="UpgradePlan_nav_content">
|
||||
<div :class="[planNum == 0 ? 'active':'']" @click="setPlan(0)">Monthly</div>
|
||||
<div :class="[planNum == 1 ? 'active':'']" @click="setPlan(1)">Annual(save 20%)</div>
|
||||
<div :class="[planNum == 2 ? 'active':'']" @click="setPlan(2)">Buy Credits</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="stepNum == 0" class="UpgradePlan_payList">
|
||||
<div v-show="planNum == 0" class="UpgradePlan_payList0">
|
||||
<div class="UpgradePlan_payList-item" v-for="item in productList">
|
||||
<div class="UpgradePlan_payList-item-price">$99/month</div>
|
||||
<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
|
||||
<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
|
||||
<ul class="UpgradePlan_payList-item-content">
|
||||
<li>
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<span>22500 Images per month</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="planNum == 1" class="UpgradePlan_payList1">
|
||||
<div class="UpgradePlan_payList-item" v-for="item in productList">
|
||||
<div class="UpgradePlan_payList-item-price">$99/month</div>
|
||||
<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
|
||||
<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
|
||||
<ul class="UpgradePlan_payList-item-content">
|
||||
<li>
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<span>22500 Images per month</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="planNum == 2" class="UpgradePlan_payList2">
|
||||
<div class="UpgradePlan_payList-item">
|
||||
<div class="UpgradePlan_payList2_img">
|
||||
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_premium_thumb-300x300.jpg" alt="">
|
||||
</div>
|
||||
<div class="UpgradePlan_payList2_name">{{ price.credits * price.num }} credits</div>
|
||||
<div class="UpgradePlan_payList2_unitPrice">${{ price.price * price.num }} <span @click="setUnit">USD</span></div>
|
||||
<div class="UpgradePlan_payList2_input">
|
||||
<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
|
||||
<input type="number" v-model="price.num">
|
||||
<div class="UpgradePlan_payList2_input_remo" @click="removePriceNum">-</div>
|
||||
</div>
|
||||
<div class="UpgradePlan_payList2_describe">All credits are shared within the {{ }} name organization</div>
|
||||
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade">UPGRADE NOW</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
|
||||
<div class="UpgradePlan_payAffirm_title">Select payment method</div>
|
||||
<div class="UpgradePlan_payAffirm_content">
|
||||
<label>
|
||||
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
|
||||
<img src="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
|
||||
PayPal
|
||||
</label>
|
||||
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
|
||||
|
||||
</div>
|
||||
<label>
|
||||
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
|
||||
支付宝
|
||||
</label>
|
||||
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="UpgradePlan_payAffirm_clause">
|
||||
<label>
|
||||
<input type="checkbox" v-model="clause">
|
||||
<span>I acknowledge that I have read, understand, and agree with the <a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">Terms and Conditions</a> (including the Scope of service) and the <a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">Subscription Agreement</a>. *</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="UpgradePlan_payList_item_upgrade_btn">
|
||||
<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">Cancel</div>
|
||||
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<div>Has it been paid?</div>
|
||||
<div>
|
||||
<div @click="getTradeQuery">Yes</div>
|
||||
<div @click="getTradeQuery">No</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { message, Upload } from "ant-design-vue";
|
||||
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import GO from "@/tool/GO";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
// import { forEach } from "jszip";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
scaleImage,
|
||||
},
|
||||
props: ["msg",'sketchCatecoryList'],
|
||||
setup() {
|
||||
// console.log(prop.msg);
|
||||
let showUpgradePlan = ref(false)
|
||||
let planNum = ref(0)
|
||||
let stepNum = ref(0)
|
||||
let price = ref({
|
||||
num:1,
|
||||
price:15,
|
||||
credits:115,
|
||||
})
|
||||
let modeOfPayment = ref('alipay')
|
||||
let clause = ref(false)//同意条款
|
||||
let productList = ref([])
|
||||
let payIndex = ref(0)
|
||||
let isShowMark = ref(false)
|
||||
return {
|
||||
showUpgradePlan,
|
||||
planNum,
|
||||
stepNum,
|
||||
price,
|
||||
modeOfPayment,
|
||||
clause,
|
||||
productList,
|
||||
payIndex,
|
||||
isShowMark,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getProductList()
|
||||
},
|
||||
watch:{
|
||||
// driver__:{
|
||||
// handler(newVal,oldVal){
|
||||
// if(this.type_.type2 == 'Printboard'){
|
||||
// if(newVal.index >= 14 && newVal.index < 15){
|
||||
// this.setKeyword(newVal.index-14)
|
||||
// }else{
|
||||
// }
|
||||
// }else if(this.type_.type2 == 'Sketchboard'){
|
||||
|
||||
// }
|
||||
|
||||
// }
|
||||
// },
|
||||
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.showUpgradePlan = true
|
||||
},
|
||||
setPlan(num:any){
|
||||
this.planNum = num
|
||||
},
|
||||
upgrade(index:any){
|
||||
this.stepNum = 1
|
||||
this.payIndex = index
|
||||
},
|
||||
getProductList(){
|
||||
Https.axiosGet(Https.httpUrls.productList).then((rv) => {
|
||||
if (rv) {
|
||||
this.productList = rv
|
||||
// this.disignTypeList = rv
|
||||
}
|
||||
})
|
||||
},
|
||||
addPriceNum(){//数量减减
|
||||
this.price.num++
|
||||
},
|
||||
removePriceNum(){//数量加加
|
||||
if(this.price.num > 1){
|
||||
this.price.num--
|
||||
}
|
||||
},
|
||||
payment(){//付款
|
||||
console.log(this.modeOfPayment,'alipay','paypal');
|
||||
if(!this.clause){
|
||||
return
|
||||
}
|
||||
let url = window.location.href
|
||||
url = url.replace(/\/[^/]+$/, '') + '/paySucceed';
|
||||
Https.axiosPost(Https.httpUrls.pagePay+`/${this.payIndex}?returnUrl=${url}`, {returnUrl:url}).then(
|
||||
(rv: any) => {
|
||||
// var newWindow:any = window.open();
|
||||
// newWindow.document.write(rv);
|
||||
document.write(rv);
|
||||
// this.isShowMark = true
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
//查询是否支付
|
||||
// getTradeQuery(){
|
||||
// let params = 1
|
||||
// Https.axiosGet(Https.httpUrls.tradeQuery,{params:{enumName:params}}).then((rv) => {
|
||||
// if (rv) {
|
||||
// console.log(rv);
|
||||
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
cancel(){//取消
|
||||
this.stepNum = 0
|
||||
this.modeOfPayment = 'alipay'
|
||||
this.clause = false
|
||||
},
|
||||
//设置单位
|
||||
setUnit(){
|
||||
|
||||
},
|
||||
cancelDsign(){
|
||||
this.showUpgradePlan = false
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.UpgradePlan_modal {
|
||||
flex: 1;
|
||||
// height: 30rem;
|
||||
// overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
.UpgradePlan_content{
|
||||
font-size: var(--aida-fsize2);
|
||||
font-weight: 900;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.UpgradePlan_nav{
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
.UpgradePlan_nav_content{
|
||||
background: #eaecf0;
|
||||
display: flex;
|
||||
padding: .5rem 2rem;
|
||||
border-radius: 5rem;
|
||||
margin: 2rem 0;
|
||||
div{
|
||||
border-radius: 2rem;
|
||||
padding: .5rem 2rem;
|
||||
margin: 0 1rem;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
div:hover{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList{
|
||||
flex: 1;
|
||||
.UpgradePlan_payList0,.UpgradePlan_payList1,.UpgradePlan_payList2{
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.UpgradePlan_payList-item{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList0,.UpgradePlan_payList1{
|
||||
.UpgradePlan_payList-item{
|
||||
width: 35rem;
|
||||
padding: 3rem;
|
||||
border: .5rem solid #edeff2;
|
||||
border-radius: 2rem;
|
||||
margin-right: 2rem;
|
||||
&.UpgradePlan_payList-item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
.UpgradePlan_payList-item-price{
|
||||
font-weight: 600;
|
||||
font-size: var(--aida-fsize2);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.UpgradePlan_payList-item-plan{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.UpgradePlan_payList-item-content{
|
||||
margin-top: 1.2rem;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.UpgradePlan_payList-item-upgrade{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.UpgradePlan_payList2{
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
.UpgradePlan_payList-item{
|
||||
justify-content: space-between;
|
||||
padding: 3rem;
|
||||
align-items: center;
|
||||
margin-top: 5rem;
|
||||
.UpgradePlan_payList2_img{
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList2_name,.UpgradePlan_payList2_unitPrice{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.UpgradePlan_payList2_name{
|
||||
font-weight: 900;
|
||||
}
|
||||
.UpgradePlan_payList2_input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div{
|
||||
font-size: 4rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
input{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: .2rem solid #f4f4f7;
|
||||
margin: 0 2rem;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList2_describe{
|
||||
background: #f2f2f4;
|
||||
padding: 1rem 3rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.UpgradePlan_payList-item-upgrade{
|
||||
position: initial;
|
||||
transform: translate(0,0);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payAffirm{
|
||||
width: 50rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 5rem;
|
||||
.UpgradePlan_payAffirm_title{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payAffirm_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 3rem 0;
|
||||
label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
border: .5rem solid #efefef;
|
||||
border-radius: 2rem;
|
||||
img{
|
||||
margin: 0rem 2rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payAffirm_clause{
|
||||
margin-bottom: 1.5rem;
|
||||
label{
|
||||
cursor: pointer;
|
||||
input{
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
span{
|
||||
vertical-align: top;
|
||||
a{
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList_item_upgrade_btn{
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
>div{
|
||||
position: relative;
|
||||
left: 0;
|
||||
transform: none;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.UpgradePlan_payList_item_upgrade1{
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 2px solid;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_closeIcon{
|
||||
top: calc(2rem*1.2);
|
||||
right: calc(2rem*1.2);
|
||||
cursor: pointer;
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
.fi-rr-cross-small::before{
|
||||
padding: calc(.2rem*1.2);
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
.UpgradePlan_modal,.layout_modal{
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
.ant-modal-header{
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(5rem*1.2) calc(5rem*1.2) !important;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: calc(65rem*1.2);
|
||||
}
|
||||
//进度完成字体颜色
|
||||
.ant-progress-circle.ant-progress-status-success .ant-progress-text{
|
||||
color: #000;
|
||||
}
|
||||
.ant-progress-circle .ant-progress-text{
|
||||
color:rgba(0, 0, 0, 0.55);
|
||||
font-size: calc(1.6rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="collection_closeIcon" :class="[driver__.driver?'hideEvents':'']">
|
||||
<div class="collection_closeIcon closeIcon" :class="[driver__.driver?'hideEvents':'']">
|
||||
<!-- <div class="header_right_block" @click.stop="">
|
||||
<div class="header_cancel_button" >Cancel</div>
|
||||
</div> -->
|
||||
@@ -338,26 +338,7 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
.collection_closeIcon{
|
||||
top: calc(2rem*1.2);
|
||||
right: calc(2rem*1.2);
|
||||
cursor: pointer;
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.fi-rr-cross-small::before{
|
||||
padding: calc(.2rem*1.2);
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
}
|
||||
.collection_page{
|
||||
left: 50%;
|
||||
@@ -427,7 +408,7 @@ export default defineComponent({
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.collection_modal,.layout_modal{
|
||||
.collection_modal,.layout_modal,{
|
||||
// max-width: 1200px ;
|
||||
// max-width: 1150px ;
|
||||
.ant-modal-content{
|
||||
@@ -453,8 +434,4 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
// .ant-progress-circle .ant-progress-inner{
|
||||
// width: 8rem !important;
|
||||
// height: 8rem !important;
|
||||
// }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user