fix
This commit is contained in:
X1627315083
@@ -181,6 +181,11 @@ export default defineComponent({
|
||||
Sketch,
|
||||
selectImgList,
|
||||
},
|
||||
props: {
|
||||
collectionStep: {
|
||||
type: Number,
|
||||
}
|
||||
},
|
||||
setup(){
|
||||
// console.log(isMoible());
|
||||
let fileList = ref([])
|
||||
@@ -236,6 +241,33 @@ export default defineComponent({
|
||||
// this.setColorboardList(colorList)
|
||||
// // this.clearSelectColor()
|
||||
// },
|
||||
collectionStep:{
|
||||
handler(newVal,oldVal){
|
||||
if(newVal != 3)return
|
||||
const backIcon = document.createElement('div');
|
||||
if(backIcon.classList.contains('vc-sketch-color-wrap'))return
|
||||
backIcon.classList.add('vc-sketch-color-wrap')
|
||||
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
|
||||
dropperDom.appendChild(backIcon);
|
||||
backIcon.addEventListener('click', async ()=>{
|
||||
try {
|
||||
const dropper = new EyeDropper();
|
||||
const result = await dropper.open();
|
||||
let hex = result.sRGBHex.replace("#", "");
|
||||
// 将十六进制颜色码拆分成红、绿、蓝三个部分
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
|
||||
// 返回RGB格式的字符串
|
||||
// return `rgb(${r}, ${g}, ${b})`;
|
||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||
} catch (e) {
|
||||
message.info(this.t('ColorboardUpload.jsContent1'))
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
selectColor:{
|
||||
handler(newVal,oldVal){
|
||||
if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
|
||||
@@ -328,31 +360,12 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
const backIcon = document.createElement('div');
|
||||
backIcon.classList.add('vc-sketch-color-wrap')
|
||||
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
|
||||
dropperDom.appendChild(backIcon);
|
||||
|
||||
|
||||
backIcon.addEventListener('click', async ()=>{
|
||||
try {
|
||||
const dropper = new EyeDropper();
|
||||
const result = await dropper.open();
|
||||
let hex = result.sRGBHex.replace("#", "");
|
||||
// 将十六进制颜色码拆分成红、绿、蓝三个部分
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
|
||||
// 返回RGB格式的字符串
|
||||
// return `rgb(${r}, ${g}, ${b})`;
|
||||
// box.style.backgroundColor = label.textContent = result.sRGBHex;
|
||||
} catch (e) {
|
||||
message.info(this.t('ColorboardUpload.jsContent1'))
|
||||
}
|
||||
nextTick(()=>{
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
|
||||
})
|
||||
|
||||
// this.clearSelectColor()
|
||||
// if ("EyeDropper" in window) {
|
||||
// console.log(true);
|
||||
@@ -932,6 +945,9 @@ export default defineComponent({
|
||||
box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
>div,>span{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.upload_file_item_show:hover{
|
||||
border-bottom: none;
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<a-modal class="modal_component cut_pricture_modal"
|
||||
<div ref="cutPrictureModal">
|
||||
<a-modal class="generalModel cut_pricture_modal"
|
||||
v-model:visible="cutPicuterModal"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.cutPrictureModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -30,6 +32,7 @@
|
||||
:outputType="option.outputType"
|
||||
:auto-crop="option.autoCrop"
|
||||
:fixedBox="!isRound"
|
||||
:movable="true"
|
||||
:fixed="isRound"
|
||||
:auto-crop-width="option.autoCropWidth"
|
||||
:auto-crop-height="option.autoCropWidth"
|
||||
@@ -70,6 +73,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,inject } from 'vue'
|
||||
@@ -168,20 +172,6 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.component_modal{
|
||||
|
||||
}
|
||||
.cut_pricture_modal{
|
||||
.ant-modal-content{
|
||||
// transform: scale(1.2);
|
||||
// transform-origin: center !important;
|
||||
}
|
||||
*{
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.cut_pricture_modal{
|
||||
|
||||
@@ -190,7 +180,7 @@ export default defineComponent({
|
||||
.collection_title{
|
||||
position: absolute;
|
||||
width: calc(100% - 10rem*1.2);
|
||||
top: calc(4rem*1.2);
|
||||
top: calc(3rem*1.2);
|
||||
display: flex;
|
||||
font-size: var(--aida-fsize2);
|
||||
font-weight: 900;
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div ref="ExportModal">
|
||||
<a-modal
|
||||
class="modal_component Export generalModelOperate"
|
||||
class="modal_component Export generalModel"
|
||||
v-model:visible="showUpgradePlan"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.ExportModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -10,10 +12,16 @@
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="UpgradePlan_closeIcon generalModelOperate_closeIcon ">
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
</div>
|
||||
<div class="UpgradePlan_content generalModelOperate">
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="UpgradePlan_content">
|
||||
<div>{{ $t('exportModel.EditExport') }}</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
@@ -239,7 +247,7 @@
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="showSRExport"
|
||||
class="modal_component SRExport generalModelOperate"
|
||||
class="modal_component SRExport generalModel"
|
||||
width="48%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -248,9 +256,11 @@
|
||||
:footer="null"
|
||||
:mask="false"
|
||||
>
|
||||
<div class="generalModelOperate_closeIcon">
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelSRExport()"></i>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
|
||||
<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits',{data:(allExportSR.filter(item=> item.checked ).length*5)}) }}</div>
|
||||
@@ -286,9 +296,10 @@
|
||||
<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<publish ref="publish" @setPublish="setSubmit"></publish>
|
||||
<publish ref="publish" ></publish>
|
||||
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
|
||||
@@ -318,7 +329,7 @@ export default defineComponent({
|
||||
publish,
|
||||
liquefaction,
|
||||
},
|
||||
props: ["msg", "sketchCatecoryList"],
|
||||
props: ["msg", "sketchCatecoryList",'setTask'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
@@ -2227,10 +2238,18 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.Export {
|
||||
:deep(.Export) {
|
||||
flex: 1;
|
||||
// height: 30rem;
|
||||
// overflow-x: hidden;
|
||||
>.ant-modal-content {
|
||||
.ant-modal-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f9fafb;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
.icon{
|
||||
transition: all .3s;
|
||||
}
|
||||
@@ -2256,7 +2275,6 @@ export default defineComponent({
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
position: sticky;
|
||||
background: #f9fafb;
|
||||
z-index: 2;
|
||||
align-items: flex-start;
|
||||
margin: 0 2rem;
|
||||
|
||||
@@ -47,6 +47,7 @@
|
||||
v-model="searchPictureName"
|
||||
@keydown.enter="getgenerate()"
|
||||
@click="inputFocus()"
|
||||
@paste="onPaste"
|
||||
/>
|
||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
||||
<a-upload
|
||||
@@ -737,10 +738,10 @@ export default defineComponent({
|
||||
file.id_ = GO.id++;
|
||||
file.categoryValue = category?.value;
|
||||
file.category = category?.name;
|
||||
let fileList = this.sketchboardList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
this.sketchboardList = fileList
|
||||
//判断是否粘贴来的图片
|
||||
let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
|
||||
if(paste.length == 0)this.sketchboardList.push(file);
|
||||
this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext()
|
||||
@@ -851,6 +852,32 @@ export default defineComponent({
|
||||
// this.myMaterialModalShow = false
|
||||
this.searchPictureName = "";
|
||||
},
|
||||
onPaste(e:any){
|
||||
if(e.clipboardData.items[0] && !this.isTextarea && this.upload.level1Type !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
|
||||
let param = new FormData();
|
||||
param.append('inPin','0')
|
||||
param.append('gender',this.upload.gender)
|
||||
param.append('level1Type',this.upload.level1Type)
|
||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
||||
param.append('file',e.clipboardData.files[0]);
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
|
||||
let value = {data:v,errCode : 0}
|
||||
v.status = 'done'
|
||||
let data = {
|
||||
file:{
|
||||
status: 'done',
|
||||
xhr:{
|
||||
response:JSON.stringify(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.fileUploadChange(data)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -149,7 +149,6 @@
|
||||
|
||||
</div>
|
||||
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
|
||||
<layoutMobile ref="layoutMobile" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layoutMobile>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -165,14 +164,13 @@ import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
|
||||
import layout from "@/component/HomePage/layout.vue";
|
||||
import layoutMobile from "@/component/HomePage/layoutMobile.vue";
|
||||
import domTurnImg from '@/tool/domTurnImg'
|
||||
import GO from "@/tool/GO";
|
||||
import moodb from "@/tool/moodb";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
export default defineComponent({
|
||||
components: { Material, MoodTemplate, Generate,layout,layoutMobile },
|
||||
components: { Material, MoodTemplate, Generate,layout },
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let lessenList: any = ref([]);
|
||||
@@ -437,7 +435,6 @@ export default defineComponent({
|
||||
|
||||
async changeTemplateModal() {
|
||||
if(this.modalImg[0]?.id){
|
||||
// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
|
||||
let layout:any = this.$refs.layout
|
||||
if(this.layoutList.length <= 0){
|
||||
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
|
||||
|
||||
@@ -210,8 +210,7 @@ export default defineComponent({
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.img_block_item{
|
||||
|
||||
@@ -1,60 +1,32 @@
|
||||
<template>
|
||||
<div class="upgradePlan" ref="upgradePlan">
|
||||
<!-- 如果需要套餐就78 -->
|
||||
<a-modal class="modal_component UpgradePlan_modal"
|
||||
<a-modal class="generalModel UpgradePlan_modal"
|
||||
v-model:visible="showUpgradePlan"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.upgradePlan"
|
||||
width="35%"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
:destroyOnClose ='true'
|
||||
>
|
||||
<div class="UpgradePlan_closeIcon">
|
||||
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="UpgradePlan_content">
|
||||
<div>{{ $t('upgradePlan.BuyCredlts') }}</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" v-for="item in productList">
|
||||
<div class="UpgradePlan_payList2_img">
|
||||
@@ -72,7 +44,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
|
||||
<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
|
||||
|
||||
<!-- <div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
|
||||
<div class="UpgradePlan_payAffirm_title">{{ $t('upgradePlan.payment') }}</div>
|
||||
<div class="UpgradePlan_payAffirm_content">
|
||||
<label>
|
||||
@@ -130,21 +104,21 @@
|
||||
<div class="mark_loading_btn" @click="getTradeQuery">OK</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
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 { useI18n } from "vue-i18n";
|
||||
import payMethod from "@/component/Pay/payMethod.vue";
|
||||
// import { forEach } from "jszip";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
scaleImage,
|
||||
payMethod,
|
||||
},
|
||||
props: ["msg",'sketchCatecoryList'],
|
||||
setup() {
|
||||
@@ -159,11 +133,11 @@ export default defineComponent({
|
||||
price:2,
|
||||
credits:45,
|
||||
})
|
||||
let payMethod:any = ref(null)
|
||||
let modeOfPayment = ref('paypal')
|
||||
let modeOfPaymentDetail = ref('ALIPAYHK')
|
||||
let clause = ref(false)//同意条款
|
||||
let productList:any = ref([])
|
||||
let payIndex = ref(0)
|
||||
let isShowMark = ref(false)
|
||||
let newWindow:any = ref()
|
||||
return {
|
||||
@@ -172,12 +146,12 @@ export default defineComponent({
|
||||
showUpgradePlan,
|
||||
planNum,
|
||||
stepNum,
|
||||
payMethod,
|
||||
price,
|
||||
modeOfPayment,
|
||||
modeOfPaymentDetail,
|
||||
clause,
|
||||
productList,
|
||||
payIndex,
|
||||
isShowMark,
|
||||
newWindow,
|
||||
};
|
||||
@@ -209,8 +183,12 @@ export default defineComponent({
|
||||
this.planNum = num
|
||||
},
|
||||
upgrade(index:any){
|
||||
this.stepNum = 1
|
||||
this.payIndex = index
|
||||
let data = {
|
||||
autoRenewal:true,//one_time为不自动续费
|
||||
productName:'CreditsPurchase',
|
||||
quantity:this.price.num,
|
||||
}
|
||||
this.payMethod.init(data)
|
||||
},
|
||||
getProductList(){
|
||||
Https.axiosGet(Https.httpUrls.productList).then((rv) => {
|
||||
@@ -315,7 +293,7 @@ export default defineComponent({
|
||||
<style lang="less" scoped>
|
||||
.UpgradePlan_modal {
|
||||
flex: 1;
|
||||
height: 30rem;
|
||||
// height: 30rem;
|
||||
// overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -357,51 +335,7 @@ export default defineComponent({
|
||||
}
|
||||
.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;
|
||||
@@ -465,168 +399,5 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
}
|
||||
.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;
|
||||
// height: 20rem;
|
||||
// overflow-y: auto;
|
||||
>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;
|
||||
width: 4rem;
|
||||
}
|
||||
.UpgradePlan_payAffirm_content_detail{
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
>label{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
span{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
>label:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payAffirm_clause{
|
||||
margin-bottom: 1.5rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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(55rem*1.2);
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_modal{
|
||||
.ant-modal-content{
|
||||
|
||||
.ant-modal-body{
|
||||
padding: calc(5rem*1.2) calc(5rem*1.2) !important;
|
||||
height: calc(55rem*1.2);
|
||||
// height: calc(65rem*1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div v-if="showCollectionModal">
|
||||
<a-modal class="modal_component collection_modal Guide_1_2"
|
||||
<div ref="collection_modal"></div>
|
||||
<a-modal class="modal_component collection_modal generalModel Guide_1_2"
|
||||
v-model:visible="showCollectionModal"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:get-container="() => $refs.collection_modal"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
@@ -27,11 +29,15 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="collection_closeIcon closeIcon" :class="[driver__.driver?'hideEvents':'']">
|
||||
<!-- <div class="header_right_block" @click.stop="">
|
||||
<div class="header_cancel_button" >Cancel</div>
|
||||
</div> -->
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
<div class="generalModel_btn" :class="[driver__.driver?'hideEvents':'']">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection_page" :class="[driver__.driver?'hideEvents':'']">
|
||||
<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
|
||||
@@ -46,7 +52,7 @@
|
||||
<div class="collection_modal_body">
|
||||
<MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
|
||||
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
|
||||
<ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
|
||||
<ColorboardUpload ref="ColorboardUpload" :collectionStep="collectionStep" v-show="collectionStep === 3"></ColorboardUpload>
|
||||
<SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
|
||||
<!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
|
||||
</div>
|
||||
@@ -373,8 +379,44 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-modal-body){
|
||||
padding: calc(8rem*1.2) calc(5rem*1.2) !important;
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: calc(65rem*1.2);
|
||||
.ant-progress-circle .ant-progress-text{
|
||||
color:rgba(0, 0, 0, 0.55);
|
||||
font-size: calc(1.6rem*1.2);
|
||||
}
|
||||
}
|
||||
.collection_modal{
|
||||
// max-width: 120rem;
|
||||
|
||||
.ant-upload-select-picture-card{
|
||||
background: #FFFFFF;
|
||||
width: calc(6rem*1.2);
|
||||
height: calc(6rem*1.2);
|
||||
border: calc(0.3rem*1.2) solid #ededed;
|
||||
border-radius: calc(1rem*1.2);
|
||||
margin: 0;
|
||||
.upload_tip_block{
|
||||
.icon-jiahao{
|
||||
font-size: calc(3.2rem*1.2);
|
||||
color: #B7B7B7;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-upload-text{
|
||||
font-size: calc(1.6rem*1.2);
|
||||
color: #B7B7B7;
|
||||
}
|
||||
}
|
||||
.ant-upload-list-picture-card-container{
|
||||
display: none !important;
|
||||
}
|
||||
.ant-upload-picture-card-wrapper{
|
||||
width: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
.collection_title,.collection_closeIcon,.collection_page{
|
||||
position: absolute;
|
||||
}
|
||||
@@ -480,31 +522,3 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.collection_modal,.layout_modal,.layoutMobile_modal{
|
||||
// max-width: 1200px ;
|
||||
// max-width: 1150px ;
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
.ant-modal-header{
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: calc(8rem*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>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div ref="clearSloganModal"></div>
|
||||
<a-modal
|
||||
class="clearSlogan_modal generalModel"
|
||||
v-model:visible="showPayOrder"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.clearSloganModal"
|
||||
width="50%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -13,7 +15,11 @@
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -400,11 +406,8 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.clearSlogan_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.clearSlogan_center{
|
||||
position: relative;
|
||||
// width: calc(512px / 2);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="modal_component generalModel_modal"
|
||||
class="modal_component generalModel"
|
||||
v-model:visible="showPayOrder"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
@@ -11,8 +11,10 @@
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="generalModel_page ">
|
||||
<div class="closeIcon">
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="creditsDetail_table_search generalModel_table_search">
|
||||
<div class="creditsDetail_state generalModel_state">
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="layoutModal">
|
||||
<a-modal
|
||||
class="layout_modal generalModel"
|
||||
v-model:visible="layout"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.layoutModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -20,7 +21,11 @@
|
||||
</div>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_nav">
|
||||
@@ -858,7 +863,7 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.layout_modal {
|
||||
user-select: none; /* 对现代浏览器有效 */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div ref="productImgModal">
|
||||
<a-modal
|
||||
class="productImg_modal generalModel"
|
||||
v-model:visible="productImg"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.productImgModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -13,7 +15,11 @@
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productImg_content">
|
||||
@@ -232,6 +238,7 @@
|
||||
}"
|
||||
:isProductimg="true"></scaleImage>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -258,6 +265,7 @@ export default defineComponent({
|
||||
scaleImage,
|
||||
generalMenu,
|
||||
},
|
||||
props: ['setTask'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n()
|
||||
@@ -883,12 +891,12 @@ methods: {
|
||||
.Guide_1_32{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 1rem;
|
||||
&.Guide_1_32::-webkit-scrollbar{display: none;}
|
||||
}
|
||||
.upload_file_item{
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
width: auto !important;
|
||||
height: 14rem !important;
|
||||
border: none !important;
|
||||
&.upload_file_item:last-child{
|
||||
@@ -925,7 +933,7 @@ methods: {
|
||||
}
|
||||
.productImg_content_item_Direction{
|
||||
padding-bottom: calc(2rem* 1.2);
|
||||
.ant-select{
|
||||
:deep(.ant-select){
|
||||
font-size: 1.6rem;
|
||||
.ant-select-selector::after{
|
||||
line-height: 1;
|
||||
|
||||
240
src/component/HomePage/renew.vue
Normal file
240
src/component/HomePage/renew.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="renew" ref="renew"></div>
|
||||
<a-modal
|
||||
class="generalModel"
|
||||
:get-container="() => $refs.renew"
|
||||
v-model:visible="renewModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="renewModelMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="renewContent">
|
||||
<div class="generalModelTitle">
|
||||
Select The Best Plan For Your Needs
|
||||
</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')">
|
||||
Monthly
|
||||
</label>
|
||||
<label>
|
||||
<input name="pric" type="radio" value="year" v-model="current.type" @change="setPricType('year')">
|
||||
Yearly
|
||||
</label>
|
||||
</div>
|
||||
<div class="info">{{ current.info }}</div>
|
||||
</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="payment">Subscribe Now</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>
|
||||
</a-modal>
|
||||
<payMethod ref="payMethod" @completePayment="cancelDsign"></payMethod>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import payMethod from "@/component/Pay/payMethod.vue";
|
||||
import { useStore } from "vuex";
|
||||
const md5 = require("md5");
|
||||
export default defineComponent({
|
||||
components: {
|
||||
payMethod,
|
||||
},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
let renew = reactive({
|
||||
renewModel:false,
|
||||
renewModelMask:true,
|
||||
pageWidth:'50%'
|
||||
})
|
||||
let renewData = reactive({
|
||||
personage:{
|
||||
title:'Personal version',
|
||||
price:{
|
||||
monthly:'500',
|
||||
year:'5,000',
|
||||
},
|
||||
unit:{
|
||||
monthly:'HKD / Month',
|
||||
year:'HKD / Year',
|
||||
},
|
||||
type:'monthly',
|
||||
typeList:['monthly','year'],
|
||||
info:'Tax, VAT not included.',
|
||||
},
|
||||
firm:{
|
||||
title:'Education Edition',
|
||||
price:{
|
||||
year:'500',
|
||||
},
|
||||
unit:{
|
||||
year:'HKD / Year',
|
||||
},
|
||||
type:'year',
|
||||
typeList:['year'],
|
||||
info:'Customised plan',
|
||||
},
|
||||
education:{
|
||||
title:'Enterprise Edition',
|
||||
price:{
|
||||
year:'500',
|
||||
},
|
||||
unit:{
|
||||
year:'HKD / Year',
|
||||
},
|
||||
type:'year',
|
||||
typeList:['year'],
|
||||
info:'Customised plan',
|
||||
},
|
||||
current:{
|
||||
|
||||
} as any,
|
||||
payMethod:null as any,
|
||||
})
|
||||
const init = ()=>{
|
||||
renew.renewModel = true
|
||||
renewData.current = renewData.personage
|
||||
}
|
||||
const cancelDsign = () => {
|
||||
renew.renewModel = false
|
||||
}
|
||||
const setPricType=(str:any)=>{
|
||||
renewData.current.type = str
|
||||
}
|
||||
const payment = ()=>{
|
||||
let subscribeType = 'Year'
|
||||
if(renewData.current.type == 'monthly')subscribeType= 'Month'
|
||||
let data = {
|
||||
autoRenewal:true,//one_time为不自动续费
|
||||
productName:'Subscription',
|
||||
subscribeType,//yearly为年费，monthly为月费
|
||||
}
|
||||
renewData.payMethod.init(data)
|
||||
}
|
||||
return{
|
||||
store,
|
||||
...toRefs(renew),
|
||||
...toRefs(renewData),
|
||||
init,
|
||||
cancelDsign,
|
||||
setPricType,
|
||||
payment,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
turnToWindow(url:any) {
|
||||
window.open(url);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.renew {
|
||||
.renewContent{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.generalModelTitle{
|
||||
text-align: center;
|
||||
}
|
||||
.renew_detail{
|
||||
width: 58rem;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.type{
|
||||
display: flex;
|
||||
label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 3rem;
|
||||
input{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div ref="scaleImageModal">
|
||||
<a-modal
|
||||
class="scaleImage_modal generalModel"
|
||||
v-model:visible="scaleImage"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.scaleImageModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -12,10 +14,14 @@
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon left" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="generalModel_closeIcon" @click.stop="download()">
|
||||
<div class="generalModel_closeIcon download" @click.stop="download()">
|
||||
<i class="fi fi-rr-down-to-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,6 +134,7 @@
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -476,7 +483,7 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
<style scoped>
|
||||
.scaleImage_modal{
|
||||
overflow: visible !important;
|
||||
}
|
||||
@@ -487,6 +494,10 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.scaleImage_content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -495,16 +506,34 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.productImg_modal{
|
||||
position: absolute;
|
||||
position: relative;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
.productImg_left{
|
||||
width: 100%;
|
||||
.input_box_btnBox{
|
||||
width: 100%;
|
||||
}
|
||||
.input_box{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.productImg_content_item_generate_btn{
|
||||
transform: translateY(100%);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.productImg_content_item_similarity{
|
||||
padding-bottom: 2.4rem;
|
||||
display: flex;
|
||||
input{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -525,7 +554,7 @@ export default defineComponent({
|
||||
img{
|
||||
// width: 50%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.img_operate_block{
|
||||
|
||||
@@ -1,20 +1,27 @@
|
||||
<template>
|
||||
<div class="selectImgListModal" ref="selectImgListModal">
|
||||
<a-modal
|
||||
class="selectImgList_modal generalModel"
|
||||
v-model:visible="selectImgList"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
height="78rem"
|
||||
:get-container="() => $refs.selectImgListModal"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="selectImgListMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1050"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectImgList_content">
|
||||
@@ -41,6 +48,7 @@
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -115,11 +123,11 @@ methods: {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.selectImgList_modal {
|
||||
&.generalModel{
|
||||
.ant-modal-body {
|
||||
height: calc(55rem*1.2);
|
||||
// height: calc(55rem*1.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user