部分页面样式调整
This commit is contained in:
X1627315083
@@ -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{
|
||||
|
||||
Reference in New Issue
Block a user