部分页面样式调整

This commit is contained in:
X1627315083
2025-06-30 10:53:25 +08:00
parent 6fc2a8fc57
commit 3ce63ea3a7
60 changed files with 1326 additions and 430 deletions

View File

@@ -900,7 +900,7 @@ export default defineComponent({
height: 100%;
display: flex;
flex-direction: column;
width: 24rem;
.upload_centetn{
height: 100%;
display: flex;

View File

@@ -185,6 +185,9 @@ export default defineComponent({
let modalImg:any= computed(()=>{
return store.state.UploadFilesModule.disposeMoodboard
})
let moodboarList=computed(()=>{
return store.state.UploadFilesModule?.moodboard
})
let uploading:any = ref([])
let edieShow:any = ref()
let {t} = useI18n()
@@ -205,6 +208,7 @@ export default defineComponent({
uploading,
edieShow,
t,
moodboarList,
};
},
data() {
@@ -226,9 +230,7 @@ export default defineComponent({
moodTemplateId: "", //模板id
store: useStore(),
moodb_:moodb.moodb_,
moodboarList:computed(()=>{
return useStore().state.UploadFilesModule?.moodboard
}),
};
},
// watcheffect(){

View File

@@ -221,6 +221,9 @@ export default defineComponent({
let printCatecoryList:any = computed(()=>{
return store.state.UserHabit.printType
})
let printboardList = computed(()=>{
return store.state.UploadFilesModule.printboard
})
return {
fileList,
printImgList,
@@ -235,6 +238,7 @@ export default defineComponent({
scene,
openMenu,
printCatecoryList,
printboardList,
}
},
computed:{
@@ -263,9 +267,7 @@ export default defineComponent({
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
currentFileNum:0, //当前上传的文件数
isUpload:false,
printboardList:computed(()=>{
return useStore().state.UploadFilesModule.printboard
}),
isTextarea:false,
isInputFocus:false,
}
@@ -607,6 +609,7 @@ export default defineComponent({
}
this.fileList.push(data)
}
console.log(this.fileList)
this.store.commit('setPrintboardFile',this.fileList)
},

View File

@@ -109,6 +109,7 @@ export default defineComponent({
font-size: 1.4rem;
// width: 12rem;
text-align: left;
z-index: 99;
> .item{
display: flex;
align-items: center;

View File

@@ -285,6 +285,7 @@ setup(props:any,{emit}) {
}
const setSpeed = (item:any)=>{
speed.speedData = item
document.removeEventListener('click',openSpeed)
speed.speedState = false
}
let scaleImage: any = ref(false);

View File

@@ -28,9 +28,6 @@
</div>
<!-- 有图状态 end-->
</div>
<div class="designPage_left_bottom" @click="setShowHide('domHidden')" >
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
</div>
</div>
<div class="designPage_right">
<div class="right_top">
@@ -39,14 +36,14 @@
<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
{{ $t('HomeView.Design') }}
</div>
<div class="generage_btn_box">
<div class="generage_btn_box white">
<div class="generage_btn started_btn" style="margin-left: 2rem;">
<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;">
{{ $t('Header.Tools') }}
</div>
<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" style="font-size: 1.6rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
<div v-for="item in speedList" :key="item.value" style="font-size: 1.4rem;" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
</div>
</div>
@@ -76,33 +73,80 @@
</span>
</div>
<div class="generalModel_state" v-show="likeDesignTools">
<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
<span>{{ $t('Header.Type') }} :</span>
<a-select
v-model:value="resultType"
size="large"
style="width: 15rem"
placeholder="Please select"
:options="resultTypeList"
@change="changeResultType"
>
</a-select>
<div>
<selectMenu
:selectList="resultTypeList"
@change="changeResultType"
:isBtnOpen='true'
:style="{
'border-radius':'0rem',
'border':'none',
'font-weight': '900',
'border-right':'2px solid rgba(0,0,0,.2)',
'line-height': '3rem',
'height': '3rem',
'background': 'rgba(0,0,0,0)',
}"
v-model:select="resultType"
>
<template v-slot:btnText>
Classify
</template>
</selectMenu>
</div>
<div class="generalModel_state_item smail" style="margin-right: 1rem;">
<div>
<selectMenu
:selectList="[
{
label:'Unfold',
value:true,
},
{
label:'Merge',
value:false,
},
]"
@change="setUnfold"
:isBtnOpen='true'
:style="{
'border-radius':'0rem',
'border':'none',
'font-weight': '900',
'border-right':'2px solid rgba(0,0,0,.2)',
'line-height': '3rem',
'height': '3rem',
'background': 'rgba(0,0,0,0)',
}"
v-model:select="isUnfold"
>
<template v-slot:btnText>
{{ $t('Header.Unfold') }}
</template>
</selectMenu>
</div>
<!-- <div class="generalModel_state_item smail" style="margin-right: 1rem;">
<span>{{ $t('Header.Unfold') }} :</span>
<a-switch v-model:checked="isUnfold" @change="setUnfold" />
</div>
<div class="generalModel_state_item smail" style="margin-right: 0;">
<span>{{ $t('Header.Size') }} :</span>
<a-select
v-model:value="widthValue.value"
size="large"
style="width: 15rem"
placeholder="Please select"
:options="widthList"
@change="setSystemDesigner(500)"
>
</a-select>
</div> -->
<div>
<selectMenu
:selectList="widthList"
@change="setSystemDesigner(500)"
:isBtnOpen='true'
:style="{
'border-radius':'0rem',
'border':'none',
'font-weight': '900',
'line-height': '3rem',
'height': '3rem',
'background': 'rgba(0,0,0,0)',
}"
v-model:select="widthValue.value"
>
<template v-slot:btnText>
{{ $t('Header.Size') }}
</template>
</selectMenu>
</div>
</div>
</div>
@@ -168,8 +212,15 @@
</div>
</div>
</div>
<div class="designPage_left_bottom left" @click="setShowHide('domHidden')" >
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
</div>
<div class="designPage_left_bottom right" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
</div>
</div>
<div class="right_content_block recycleBin" @mouseenter="mouseenter($event,'recycle')" :class="{recycleBinShow:recycleDomHidden}">
<div class="right_content_body">
<div class="right_content_header">
<div class="content_header_left">
@@ -218,9 +269,7 @@
</div>
</div>
<div class="designPage_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
</div>
</div>
</div>
</div>
@@ -294,6 +343,7 @@ import { getMousePosition } from "@/tool/mdEvent";
import { removeClass } from "element-plus/es/utils";
import collectionModal from './collection.vue'
import designTools from './tools.vue'
import selectMenu from '@/component/modules/selectMenu.vue'
export default defineComponent({
name: "homePage",
@@ -306,6 +356,7 @@ export default defineComponent({
DesignDetailcopy,
editDesignType,
designTools,
selectMenu,
},
emits:['setTask'],
activated() {
@@ -436,6 +487,7 @@ export default defineComponent({
}
const setSpeed = (item:any)=>{
speed.speedState = false
document.removeEventListener('click',openSpeed)
speed.speedData = item
}
const openEditTools = ()=>{
@@ -2002,35 +2054,7 @@ export default defineComponent({
position: relative;
.designPage_left_bottom{
position: absolute;
width: 3rem;
height: 7rem;
background: #fff;
border: 2px solid;
border-right: none;
border-radius: 2rem 0 0 2rem;
top: 50%;
transform: translate(-100%,-50%);
left: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
transition: width .3s;
&:hover{
width: 4rem;
}
>span{
transition: all .3s;
transform: rotate(90deg);
&.active{
transform: rotate(270deg);
}
}
}
.page_content_body {
position: absolute;
width: 100%;
@@ -2162,23 +2186,53 @@ export default defineComponent({
justify-content: space-between;
position: relative;
.designPage_left_bottom{
border-radius: 0 2rem 2rem 0rem;
left: 2rem;
top: 50%;
left: auto;
right: 0;
transform: translate(100%, -50%);
// top: calc(50% - 10.4rem / 2);
position: absolute;
width: 3rem;
height: 7rem;
background: #fff;
border: 2px solid;
border-left: none;
flex-direction: column;
&.active{
left: 44rem;
transform: translate(0, -50%);
border-right: none;
border-radius: 2rem 0 0 2rem;
top: 50%;
transform: translate(-100%,-50%);
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
transition: width .3s;
&:hover{
width: 4rem;
}
>span{
transition: all .3s;
transform: rotate(90deg);
&.active{
transform: rotate(270deg);
}
}
&.right{
border-radius: 0 2rem 2rem 0rem;
left: 2rem;
top: 50%;
left: auto;
right: 0;
transform: translate(100%, -50%);
// top: calc(50% - 10.4rem / 2);
border: 2px solid;
border-left: none;
flex-direction: column;
&.active{
// left: 44rem;
}
}
}
.right_top {
padding: 1rem 3.2rem 2rem 1.2rem;
padding-right: 0;
display: flex;
justify-content: space-between;
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
@@ -2214,11 +2268,11 @@ export default defineComponent({
.right_content_block_box{
flex: 1;
display: flex;
overflow: hidden;
}
.right_content_block {
flex: 1;
display: flex;
position: relative;
width: 0;
flex-direction: column;
&.recycleBin{