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

commit 8.5

Browse Source
This commit is contained in:
WangXiaoDong
2023-08-05 12:52:56 +08:00
parent 913b100ac9
commit b28d6585fa
21 changed files with 2020 additions and 772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/component/HomePage/collectionModal.vue
View File

@@ -6,21 +6,37 @@
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
>
<template #title>
<div v-show="collectionStep === 1">Moodboard</div>
<div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard</div>
<div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard</div>
<div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard</div>
<div v-show="collectionStep === 5"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Markets Sketch</div>
</template>
<template #closeIcon>
<div class="header_right_block" @click.stop="">
<div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div>
<div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div>
<div class="header_cancel_button" @click.stop="cancelDsign()">Cancel</div>
</div>
</template>
<div class="collection_title">
<div class="collection_title_text">
<div v-show="collectionStep === 1">Moodboard</div>
<div v-show="collectionStep === 2">Printboard</div>
<div v-show="collectionStep === 3">Colorboard</div>
<div v-show="collectionStep === 4">Sketchboard</div>
<div v-show="collectionStep === 5">Markets Sketch</div>
<div class="collection_title_text_intro">select moodboard for your collection</div>
</div>
<div>
<a-progress :strokeWidth= 13 :width= 60 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
</div>
</div>
<div class="collection_closeIcon" @click.stop="cancelDsign()">
<!-- <div class="header_right_block" @click.stop="">
<div class="header_cancel_button" >Cancel</div>
</div> -->
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="collection_page">
<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
<i v-else class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i>
<!-- <span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->
</div>
<div class="collection_modal_body">
<MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
@@ -34,6 +50,8 @@
</template>
<script lang="ts">
import { defineComponent ,createVNode } from 'vue'
import Generate from '@/component/HomePage/Generate.vue'
import MoodboardUpload from '@/component/HomePage/MoodboardUpload.vue'
import PrintboardUpload from '@/component/HomePage/PrintboardUpload.vue'
import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
@@ -44,6 +62,7 @@ import { Modal,message } from 'ant-design-vue';
import {useStore} from 'vuex'
export default defineComponent({
components:{
Generate,
MoodboardUpload,
PrintboardUpload,
ColorboardUpload,
@@ -89,6 +108,7 @@ export default defineComponent({
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
onOk() {
_this.showCollectionModal = false
@@ -114,6 +134,70 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.collection_modal{
// max-width: 120rem;
.collection_title,.collection_closeIcon,.collection_page{
position: absolute;
}
.collection_title{
top: 4rem;
display: flex;
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: 4rem;
}
.collection_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.collection_closeIcon{
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
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%;
transform: translateX(-50%);
bottom: 3rem;
.fi-rr-arrow-small-left{
margin-right: 10rem;
}
.fi{
cursor: pointer;
}
.fi::before{
padding: 5px;
border-radius: 50%;
color: rgba(0, 0, 0, 0.55);
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
}
.fi:hover.fi::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.header_icon_fanhui{
margin-right: 1rem;
font-size: 2rem;
@@ -155,3 +239,20 @@ export default defineComponent({
}
}
</style>
<style lang="less">
.collection_modal{
max-width: 1200px ;
.ant-modal-content{
border-radius: 10px;
overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
}
.ant-modal-body{
padding: 8rem 5rem !important;
height: calc(60vh - 6.4rem);
}
}
}
</style>