|
|
|
|
@@ -7,8 +7,8 @@
|
|
|
|
|
<!-- <img class="page_content_bg" src="@/assets/images/homePage/bg.png" /> -->
|
|
|
|
|
<div class="page_content_body">
|
|
|
|
|
<div class="home_page_body">
|
|
|
|
|
<div class="home_page_left">
|
|
|
|
|
<div class="home_page_left_content">
|
|
|
|
|
<div class="home_page_left" ref="hidden">
|
|
|
|
|
<div class="home_page_left_content" :class="{'active':domHidden}">
|
|
|
|
|
<!-- 空状态 start-->
|
|
|
|
|
<div class="home_left_null" v-show="!isHaveReviewCollection">
|
|
|
|
|
<div>
|
|
|
|
|
@@ -32,10 +32,10 @@
|
|
|
|
|
<!-- <div class="button_second" @click="startNewCollection()">
|
|
|
|
|
{{ $t('HomeView.Start') }}
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="button_first button_margin" @click="recollection()">
|
|
|
|
|
<div class="gallery_btn white button_margin" @click="recollection()">
|
|
|
|
|
{{ $t('HomeView.Edit') }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button_first button_margin" @click="resetCollection()">
|
|
|
|
|
<div class="gallery_btn white button_margin" @click="resetCollection()">
|
|
|
|
|
{{ $t('HomeView.Reset') }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -52,20 +52,37 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 有图状态 end-->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="home_page_left_bottom" @click="()=>domHidden = !domHidden" v-show="designCollectionId">
|
|
|
|
|
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="home_page_right">
|
|
|
|
|
|
|
|
|
|
<div class="right_top">
|
|
|
|
|
<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
|
|
|
|
|
<div class="right_top_left">
|
|
|
|
|
<div class="button_second Guide_1_15" @click="designNewCollection()">
|
|
|
|
|
<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
|
|
|
|
|
{{ $t('HomeView.Design') }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="button_first button_margin_14 Guide_1_30" v-show="designCollectionId"
|
|
|
|
|
<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
|
|
|
|
|
@click="resDesignCollection()">
|
|
|
|
|
{{ $t('HomeView.Redesign') }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="silder button_margin_14" v-show="designCollectionId">
|
|
|
|
|
<div class="text">Small</div>
|
|
|
|
|
<a-slider id="system_silder"
|
|
|
|
|
class="system_silder"
|
|
|
|
|
v-model:value="collValue"
|
|
|
|
|
@afterChange="setSystemDesigner"
|
|
|
|
|
:tooltipVisible="false"
|
|
|
|
|
>
|
|
|
|
|
</a-slider>
|
|
|
|
|
<div class="text">Big</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
|
|
|
|
|
<!-- {{ $t('HomeView.Export') }} -->
|
|
|
|
|
{{$t('HomeView.FinalizeCollection')}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -79,11 +96,35 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="right_content_body">
|
|
|
|
|
<div class="right_content_img_block scroll_style Guide_1_17 active" v-mousewheel :class="[driver__.driver?'showEvents':'']">
|
|
|
|
|
<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
|
|
|
|
|
<div class="right_content_img_item">
|
|
|
|
|
<!-- <draggable
|
|
|
|
|
group="people" > -->
|
|
|
|
|
<div class="content_img_block" v-for="(
|
|
|
|
|
|
|
|
|
|
<div class="content_img_block active" :style="collStyle" draggable
|
|
|
|
|
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
|
|
|
|
|
@click="designDetail(
|
|
|
|
|
design,
|
|
|
|
|
index,
|
|
|
|
|
likeDesignCollectionList,
|
|
|
|
|
'like'
|
|
|
|
|
)"
|
|
|
|
|
@dragstart="dragstart($event, index)"
|
|
|
|
|
@dragover.prevent
|
|
|
|
|
@drop="dragDrop($event, index)">
|
|
|
|
|
<div class="content_img_flex">
|
|
|
|
|
<img class="content_img" :src="design.designOutfitUrl"
|
|
|
|
|
:key="design.designOutfitUrl" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
|
|
|
|
|
dislikeDesignCollection(
|
|
|
|
|
design,
|
|
|
|
|
index
|
|
|
|
|
)">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </draggable> -->
|
|
|
|
|
<div class="content_img_block" :style="collStyle" v-for="(
|
|
|
|
|
design, index
|
|
|
|
|
) in designCollectionList" :key="design?.designItemId">
|
|
|
|
|
<div class="content_img_flex"
|
|
|
|
|
@@ -106,64 +147,28 @@
|
|
|
|
|
">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- </draggable> -->
|
|
|
|
|
|
|
|
|
|
<div class="content_img_block" v-show="showDesignMark">
|
|
|
|
|
<div class="content_img_flex" >
|
|
|
|
|
<!-- <img class="content_img" v-lazy="''" /> -->
|
|
|
|
|
<img class="content_img" src="@/assets/images/homePage/loading.gif" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="right_content_header">
|
|
|
|
|
<!-- <div class="right_content_header">
|
|
|
|
|
<div class="content_header_left">
|
|
|
|
|
<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right_content_export" v-show="likeDesignCollectionList.length">
|
|
|
|
|
<!-- <div class="button_second Guide_1_31" @click="exportCanvas()"> -->
|
|
|
|
|
<div class="button_second Guide_1_31" @click="exportModel()">
|
|
|
|
|
<!-- {{ $t('HomeView.Export') }} -->
|
|
|
|
|
{{$t('HomeView.FinalizeCollection')}}
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div
|
|
|
|
|
:class="[
|
|
|
|
|
'icon',
|
|
|
|
|
'iconfont',
|
|
|
|
|
'icon-xiala',
|
|
|
|
|
isShowOperate ? 'icon_rotate' : '',
|
|
|
|
|
]"
|
|
|
|
|
@click.stop="changeShowOperateContent()"
|
|
|
|
|
></div> -->
|
|
|
|
|
<!-- <div class="export_nav" v-show="isShowOperate" @click.stop="">
|
|
|
|
|
<a-checkbox v-for="item in exportNav" v-model:checked="item.change" :disabled='item.noChange'>
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
</a-checkbox>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="right_content_body">
|
|
|
|
|
<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:likeDesignCollectionList.length != 0}">
|
|
|
|
|
<div class="right_content_img_block scroll_style" :class="{active:likeDesignCollectionList.length != 0}">
|
|
|
|
|
<div class="right_content_img_item" id="right_content_img_block">
|
|
|
|
|
<!-- <div class="content_img_block" v-for="(
|
|
|
|
|
design, index
|
|
|
|
|
) in likeDesignCollectionList" :key="design?.id" @click="
|
|
|
|
|
designDetail(
|
|
|
|
|
design,
|
|
|
|
|
index,
|
|
|
|
|
likeDesignCollectionList,
|
|
|
|
|
'like'
|
|
|
|
|
)
|
|
|
|
|
">
|
|
|
|
|
<div class="content_img_flex">
|
|
|
|
|
<img class="content_img" v-lazy="design.designOutfitUrl"
|
|
|
|
|
:key="design.designOutfitUrl" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
|
|
|
|
|
dislikeDesignCollection(
|
|
|
|
|
design,
|
|
|
|
|
index
|
|
|
|
|
)
|
|
|
|
|
"></div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="content_img_block" draggable
|
|
|
|
|
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
|
|
|
|
|
@click="designDetail(
|
|
|
|
|
@@ -188,7 +193,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -200,6 +205,7 @@
|
|
|
|
|
<productImg ref="productImg" @setTask="setTask"></productImg>
|
|
|
|
|
<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
|
|
|
|
|
<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
|
|
|
|
|
|
|
|
|
|
<!-- 导出缩略图的蒙层 start-->
|
|
|
|
|
<div class="mark_loading" v-show="isShowMark || getLangIsShowMark">
|
|
|
|
|
<a-spin size="large" />
|
|
|
|
|
@@ -207,14 +213,15 @@
|
|
|
|
|
<!-- 导出缩略图的蒙层 end-->
|
|
|
|
|
|
|
|
|
|
<!-- design collection的进度蒙层 start-->
|
|
|
|
|
<div class="progress_mark" v-show="showDesignMark">
|
|
|
|
|
|
|
|
|
|
<!-- <div class="progress_mark" v-show="showDesignMark">
|
|
|
|
|
<div class="mark_content Guide_1_16">
|
|
|
|
|
<a-progress type="circle" :percent="designProgress" strokeColor="#341e57" :width="200" />
|
|
|
|
|
<div>
|
|
|
|
|
<a-spin :indicator="indicator" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- design collection的进度蒙层 end-->
|
|
|
|
|
<affiche ref="affiche"></affiche>
|
|
|
|
|
<!-- <RobotAssist></RobotAssist> -->
|
|
|
|
|
@@ -224,7 +231,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode} from "vue";
|
|
|
|
|
import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode} from "vue";
|
|
|
|
|
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
// import HeaderComponent from "@/component/HomePage/Header.vue";
|
|
|
|
|
import CollectionModal from "@/component/HomePage/collectionModal.vue";
|
|
|
|
|
@@ -240,7 +247,6 @@ import html2canvas from "html2canvas";
|
|
|
|
|
import { message,Modal } from "ant-design-vue";
|
|
|
|
|
import { useStore } from "vuex";
|
|
|
|
|
import { Https } from "@/tool/https";
|
|
|
|
|
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
|
|
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
|
|
|
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
|
|
|
|
import draggable from 'vuedraggable'
|
|
|
|
|
@@ -344,6 +350,25 @@ export default defineComponent({
|
|
|
|
|
return store.state.UploadFilesModule.chooseIsDesign})
|
|
|
|
|
let portfolio:any = ref({})
|
|
|
|
|
provide('portfolio',portfolio)
|
|
|
|
|
|
|
|
|
|
const collItemSize = reactive({
|
|
|
|
|
collValue:40,
|
|
|
|
|
collStyle:{
|
|
|
|
|
width:'24rem',
|
|
|
|
|
height:'37rem'
|
|
|
|
|
},
|
|
|
|
|
collTime:null as any,
|
|
|
|
|
})
|
|
|
|
|
const setSystemDesigner = ()=>{
|
|
|
|
|
clearTimeout(collItemSize.collTime)
|
|
|
|
|
collItemSize.collTime = setTimeout(()=>{
|
|
|
|
|
let wScale = 60,hScale = 92.5
|
|
|
|
|
let num = collItemSize.collValue
|
|
|
|
|
let {width,height} = collItemSize.collStyle
|
|
|
|
|
collItemSize.collStyle.width = wScale * ((num<20?20:num) / 100) + 'rem'
|
|
|
|
|
collItemSize.collStyle.height = hScale * ((num<20?20:num) / 100) + 'rem'
|
|
|
|
|
},500)
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
store,
|
|
|
|
|
likeDesignCollectionList,
|
|
|
|
|
@@ -365,6 +390,8 @@ export default defineComponent({
|
|
|
|
|
isMannequinShow,
|
|
|
|
|
chooseIsDesign,
|
|
|
|
|
portfolio,
|
|
|
|
|
setSystemDesigner,
|
|
|
|
|
...toRefs(collItemSize),
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
@@ -387,6 +414,9 @@ export default defineComponent({
|
|
|
|
|
likeLoading: false, //喜欢防抖
|
|
|
|
|
dragIdx:0,
|
|
|
|
|
designRandom:'',
|
|
|
|
|
domHidden:false,
|
|
|
|
|
|
|
|
|
|
getDesignTime:null as any,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
@@ -401,6 +431,9 @@ export default defineComponent({
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
beforeUnmount(){
|
|
|
|
|
clearTimeout(this.getDesignTime);
|
|
|
|
|
},
|
|
|
|
|
async mounted() {
|
|
|
|
|
// if(JSON.parse( getCookie('isFirst') as any)){
|
|
|
|
|
// }
|
|
|
|
|
@@ -645,38 +678,63 @@ export default defineComponent({
|
|
|
|
|
);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
clearTimeout(this.getDesignTime);
|
|
|
|
|
let data = this.getDesignData("");
|
|
|
|
|
if(this.driver__.driver){
|
|
|
|
|
nextTick().then(()=>{
|
|
|
|
|
driverObj__.moveNext();
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.isShowMark = true
|
|
|
|
|
Https.axiosPost(Https.httpUrls.designCollection, data)
|
|
|
|
|
|
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
if (rv) {
|
|
|
|
|
this.store.commit(
|
|
|
|
|
"setDesignCollectionList",
|
|
|
|
|
rv.designCollectionItems
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
let value = {
|
|
|
|
|
objectSignList:data.requestIdList.join(),
|
|
|
|
|
requestId:rv
|
|
|
|
|
}
|
|
|
|
|
this.store.commit("setLikeDesignCollectionList", []);
|
|
|
|
|
this.store.commit("deleteUserGroupId");
|
|
|
|
|
this.store.commit(
|
|
|
|
|
"setDesignCollectionId",
|
|
|
|
|
rv.collectionId
|
|
|
|
|
);
|
|
|
|
|
this.store.commit("setDesignId", rv.designId);
|
|
|
|
|
// this.designProgress = 0;
|
|
|
|
|
this.getDesignResult(value,'newDesign')
|
|
|
|
|
this.startDesignType = "design";
|
|
|
|
|
}
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
})
|
|
|
|
|
.catch((res) => {
|
|
|
|
|
this.showDesignMark = false;
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
})
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
this.getDesignProcess(this.designRandom);
|
|
|
|
|
// }, 1000);
|
|
|
|
|
// this.getDesignProcess(this.designRandom);
|
|
|
|
|
},
|
|
|
|
|
getDesignResult(data:any,str:any){
|
|
|
|
|
this.showDesignMark = true
|
|
|
|
|
Https.axiosGet(Https.httpUrls.getDesignResult,{params:data})
|
|
|
|
|
.then((rv)=>{
|
|
|
|
|
if(rv.designCollectionItems){
|
|
|
|
|
this.store.commit("setDesignCollectionList",rv.designCollectionItems);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(rv.unfinishedList.length == 0){
|
|
|
|
|
this.showDesignMark = false
|
|
|
|
|
if(str == 'newDesign'){
|
|
|
|
|
if(rv.designCollectionItems){
|
|
|
|
|
this.store.commit("deleteUserGroupId");
|
|
|
|
|
this.store.commit(
|
|
|
|
|
"setDesignCollectionId",
|
|
|
|
|
rv.collectionId
|
|
|
|
|
);
|
|
|
|
|
this.store.commit("setDesignId", rv.designId);
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
// this.designProgress = 0,
|
|
|
|
|
this.store.commit("setDesignId", rv.designId);
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
this.getDesignTime = setTimeout(()=>{
|
|
|
|
|
data.objectSignList = rv.unfinishedList.join()
|
|
|
|
|
this.getDesignResult(data,str)
|
|
|
|
|
},1000)
|
|
|
|
|
}
|
|
|
|
|
}).catch(()=>this.showDesignMark = false)
|
|
|
|
|
},
|
|
|
|
|
//重新设计collection
|
|
|
|
|
resDesignCollection() {
|
|
|
|
|
@@ -693,25 +751,25 @@ export default defineComponent({
|
|
|
|
|
driverObj__.moveNext();
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
clearTimeout(this.getDesignTime);
|
|
|
|
|
this.isShowMark = true
|
|
|
|
|
let data = this.getDesignData(this.designCollectionId);
|
|
|
|
|
Https.axiosPost(Https.httpUrls.reDesignCollection, data)
|
|
|
|
|
.then((rv: any) => {
|
|
|
|
|
if (rv) {
|
|
|
|
|
this.store.commit(
|
|
|
|
|
"setDesignCollectionList",
|
|
|
|
|
rv.designCollectionItems
|
|
|
|
|
);
|
|
|
|
|
// this.designProgress = 0,
|
|
|
|
|
let value = {
|
|
|
|
|
objectSignList:data.requestIdList.join(),
|
|
|
|
|
requestId:rv
|
|
|
|
|
}
|
|
|
|
|
this.getDesignResult(value,'resDesign')
|
|
|
|
|
this.startDesignType = "resDesign";
|
|
|
|
|
this.store.commit("setDesignId", rv.designId);
|
|
|
|
|
this.isShowMark = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((res) => {
|
|
|
|
|
this.showDesignMark = false;
|
|
|
|
|
this.isShowMark = false;
|
|
|
|
|
});
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
this.getDesignProcess(this.designRandom);
|
|
|
|
|
// }, 1000);
|
|
|
|
|
// this.getDesignProcess(this.designRandom);
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@@ -754,9 +812,15 @@ export default defineComponent({
|
|
|
|
|
data.collectionId = designCollectionId;
|
|
|
|
|
}
|
|
|
|
|
if(!isLoad){
|
|
|
|
|
this.designProgress = 0;
|
|
|
|
|
this.showDesignMark = true;
|
|
|
|
|
// this.designProgress = 0;
|
|
|
|
|
// this.isShowMark = true;
|
|
|
|
|
}
|
|
|
|
|
let arr = []
|
|
|
|
|
for (let index = 0; index < 8; index++) {
|
|
|
|
|
let floor = Math.floor(Math.random() * 90000000) + 10000000
|
|
|
|
|
arr.push(floor)
|
|
|
|
|
}
|
|
|
|
|
data.requestIdList = arr
|
|
|
|
|
return data;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@@ -1142,8 +1206,8 @@ export default defineComponent({
|
|
|
|
|
.home_page {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 0 9rem;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: 0 6rem;
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
// min-width: 1440px;
|
|
|
|
|
position: relative;
|
|
|
|
|
// left: 50%;
|
|
|
|
|
@@ -1164,18 +1228,51 @@ export default defineComponent({
|
|
|
|
|
display: flex;
|
|
|
|
|
// padding-left: 0.7rem;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.home_page_left {
|
|
|
|
|
// width: 44.4rem;
|
|
|
|
|
width: 55rem;
|
|
|
|
|
height: 100%;
|
|
|
|
|
padding: 2rem 0 0 0;
|
|
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.home_page_left_bottom{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 4rem;
|
|
|
|
|
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;
|
|
|
|
|
>span{
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
transform: rotate(90deg);
|
|
|
|
|
&.active{
|
|
|
|
|
transform: rotate(270deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.home_page_left_content {
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
width: 55rem;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
padding-right: 1.2rem;
|
|
|
|
|
&.active{
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
width: 0;
|
|
|
|
|
}
|
|
|
|
|
.home_left_null {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@@ -1185,7 +1282,6 @@ export default defineComponent({
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: #f7f8fa;
|
|
|
|
|
border: 1px solid #f2f2f9;
|
|
|
|
|
border-radius: 2rem;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
@@ -1275,21 +1371,40 @@ export default defineComponent({
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
|
|
|
|
|
background: rgba(255, 255, 255, 0.4);
|
|
|
|
|
|
|
|
|
|
transition: all .3s;
|
|
|
|
|
&.active{
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding-top: 0;
|
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
}
|
|
|
|
|
.right_top_left {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
.button_margin_14 {
|
|
|
|
|
margin-left: 1.4rem;
|
|
|
|
|
}
|
|
|
|
|
.silder{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.text{
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 1.8rem;
|
|
|
|
|
}
|
|
|
|
|
.system_silder{
|
|
|
|
|
margin: 0 3rem;
|
|
|
|
|
width: 12rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right_content_block {
|
|
|
|
|
height: calc(100% - 8.584rem);
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
&.right_content_block::-webkit-scrollbar{display: none;}
|
|
|
|
|
&.active{
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
@@ -1351,11 +1466,11 @@ export default defineComponent({
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right_content_body {
|
|
|
|
|
padding: 0 1.8rem 0 1.2rem;
|
|
|
|
|
// padding: 0 1.8rem 0 1.2rem;
|
|
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
height: calc(50% - 4.5rem);
|
|
|
|
|
// min-height: 280px;
|
|
|
|
|
|
|
|
|
|
// height: calc(50% - 4.5rem);
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
.right_content_img_block {
|
|
|
|
|
// overflow-y: auto;
|
|
|
|
|
background: #f6f6fa;
|
|
|
|
|
@@ -1399,18 +1514,18 @@ export default defineComponent({
|
|
|
|
|
}
|
|
|
|
|
>div{
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 0 2.8rem 0 0.9rem;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
// padding: 0 2.8rem 0 0.9rem;
|
|
|
|
|
height: 100%;
|
|
|
|
|
align-items: center;
|
|
|
|
|
align-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
.content_img_block {
|
|
|
|
|
// width: 20.1rem;
|
|
|
|
|
width: auto;
|
|
|
|
|
width: 24rem;
|
|
|
|
|
height: 37rem;
|
|
|
|
|
// height: 29.5rem;
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
// margin-bottom: 1rem;
|
|
|
|
|
min-width: 127px;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
// min-height: 271px;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
|
|
|
|
|
@@ -1423,9 +1538,9 @@ export default defineComponent({
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:nth-child(4n) {
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
}
|
|
|
|
|
// &:nth-child(4n) {
|
|
|
|
|
// margin-right: 0;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
.content_img_flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
@@ -1433,8 +1548,17 @@ export default defineComponent({
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius: 2rem;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
&.active{
|
|
|
|
|
.icon_like{
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.content_img_flex {
|
|
|
|
|
border: 2px solid #000;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content_img {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
@@ -1454,7 +1578,8 @@ export default defineComponent({
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
.icon-jushoucanggift {
|
|
|
|
|
color: rgba(52, 53, 121, 1);
|
|
|
|
|
// color: rgba(52, 53, 121, 1);
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|