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

首页和library布局调整

Browse Source
This commit is contained in:
X1627315083
2024-12-31 11:40:40 +08:00
parent f21c98c623
commit c4bab3bf1e
24 changed files with 482 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/assets/style/style.css
View File

@@ -235,10 +235,10 @@ li {
.started_btn {
padding: 0 calc(1.8rem*1.2);
display: inline-block;
border-radius: calc(2rem*1.2);
border-radius: 4rem;
font-size: calc(1.2rem*1.2);
color: #fff;
background-color: #39215b;
background-color: #000000;
cursor: pointer;
height: 3.3rem;
line-height: 3.3rem;
@@ -263,6 +263,10 @@ li {
}
.el-popper {
padding: 0.5rem 1.1rem;
border: 2px solid;
}
.el-popper .el-popper__arrow {
display: none;
}
.hideEvents {
pointer-events: none !important;
@@ -1232,7 +1236,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
.libraryPageCascader .cascader_btn_max {
height: 4.5rem;
width: 100%;
border-bottom: 1px solid #e1e1e1;
display: flex;
align-items: center;
}
@@ -1755,8 +1758,7 @@ textarea:focus {
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
border-radius: 0.4rem;
border: solid 1px #39215b;
background-color: #8156bd;
background-color: #000000;
margin-right: 1rem;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
@@ -1779,18 +1781,21 @@ textarea:focus {
.productImg_modal .input_border .input_box_btnBox,
.accountEdit_page .input_border .input_box_btnBox,
.generalMenu_printModel_upload .input_border .input_box_btnBox {
border: calc(0.1rem*1.2) solid #F1F1F1;
border: 1px solid #000;
border-radius: 4rem;
width: var(--width);
display: flex;
float: left;
align-items: center;
padding: 1.5rem 2rem;
padding-right: 0;
}
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
.library_page .input_border .input_box_btnBox .ant-spin-text,
.productImg_modal .input_border .input_box_btnBox .ant-spin-text,
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text {
.collection_modal_body .input_border .input_box_btnBox border .ant-spin-text,
.design_detail_modal_component .input_border .input_box_btnBox border .ant-spin-text,
.library_page .input_border .input_box_btnBox border .ant-spin-text,
.productImg_modal .input_border .input_box_btnBox border .ant-spin-text,
.accountEdit_page .input_border .input_box_btnBox border .ant-spin-text,
.generalMenu_printModel_upload .input_border .input_box_btnBox border .ant-spin-text {
font-size: 1.2rem;
}
.collection_modal_body .input_border .input_box_btnBox .search_seed,
@@ -1805,6 +1810,29 @@ textarea:focus {
font-size: 1.2rem;
border-right: calc(0.1rem*1.2) solid #F1F1F1;
}
.collection_modal_body .input_border .input_box_btnBox .upload_item,
.design_detail_modal_component .input_border .input_box_btnBox .upload_item,
.library_page .input_border .input_box_btnBox .upload_item,
.productImg_modal .input_border .input_box_btnBox .upload_item,
.accountEdit_page .input_border .input_box_btnBox .upload_item,
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item {
width: 5.7rem;
}
.collection_modal_body .input_border .input_box_btnBox .upload_item .upload_file_item,
.design_detail_modal_component .input_border .input_box_btnBox .upload_item .upload_file_item,
.library_page .input_border .input_box_btnBox .upload_item .upload_file_item,
.productImg_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 5.7rem;
width: 5.7rem;
border-radius: 50%;
overflow: hidden;
}
.collection_modal_body .input_border input,
.design_detail_modal_component .input_border input,
.library_page .input_border input,
@@ -1816,7 +1844,9 @@ textarea:focus {
border: 1px solid rgba(0, 0, 0, 0.15);
padding-left: calc(1.5rem*1.2);
border: calc(0.1rem*1.2) solid #ffffff00;
font-size: calc(1.6rem*1.2);
font-size: 1.8rem;
height: 2.5rem;
line-height: 2.5rem;
font-weight: 400;
}
.collection_modal_body .input_border inputinput:-moz-placeholder,
@@ -2001,6 +2031,7 @@ textarea:focus {
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div {
background: #cccccc;
line-height: 2;
font-size: 1.8rem;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
@@ -2022,6 +2053,9 @@ textarea:focus {
.generalMenu_printModel_upload .input_border .generage_btn {
margin-left: 2rem;
display: flex;
font-size: 1.8rem;
padding: 1rem 2rem;
box-sizing: content-box;
}
.hideChecked {
user-select: none;

40
src/assets/style/style.less
View File

@@ -242,10 +242,10 @@ input:focus{
.started_btn{
padding: 0 calc(1.8rem*1.2);
display: inline-block;
border-radius: calc(2rem*1.2);
border-radius: 4rem;
font-size: calc(1.2rem*1.2);
color: #fff;
background-color: #39215b;
background-color: #000000;
cursor: pointer;
height: 3.3rem;
line-height: 3.3rem;
@@ -275,6 +275,10 @@ input:focus{
.el-popper{
padding: .5rem 1.1rem;
border: 2px solid;
.el-popper__arrow{
display: none;
}
}
.hideEvents{
@@ -1342,7 +1346,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
.cascader_btn_max{
height: 4.5rem;
width: 100%;
border-bottom: 1px solid rgb(225 225 225);
display: flex;
align-items: center;
.cascader_btn1{
@@ -1844,8 +1847,7 @@ textarea:focus{
}
.search_keyword_center_item{
border-radius: .4rem;
border: solid 1px #39215b;
background-color: #8156bd;
background-color: #000000;
margin-right: 1rem;
margin-bottom: 1rem;
padding: .5rem 1rem;
@@ -1860,11 +1862,15 @@ textarea:focus{
}
}
.input_box_btnBox{
border: calc(0.1rem*1.2) solid #F1F1F1;
border: 1px solid #000;
border-radius: 4rem;
width: var(--width);
display: flex;
float: left;
align-items: center;
padding: 1.5rem 2rem;
padding-right: 0;
border
.ant-spin-text{
font-size: 1.2rem;
}
@@ -1875,6 +1881,19 @@ textarea:focus{
font-size: 1.2rem;
border-right: calc(0.1rem* 1.2) solid #F1F1F1;
}
.upload_item{
width: 5.7rem;
.upload_file_item{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 5.7rem;
width: 5.7rem;
border-radius: 50%;
overflow: hidden;
}
}
}
input{
@@ -1884,7 +1903,9 @@ textarea:focus{
padding-left: calc(1.5rem*1.2);
border: calc(0.1rem*1.2) solid #ffffff00;
// border: calc(0.1rem*1.2) solid #F1F1F1;
font-size: calc(1.6rem*1.2);
font-size: 1.8rem;
height: 2.5rem;
line-height: 2.5rem;
font-weight: 400;
&input:-moz-placeholder{
color: rgba(0,0,0,.15);
@@ -1969,6 +1990,7 @@ textarea:focus{
position: relative;
display: flex;
align-items: center;
.icon-xiala{
margin-left: 1rem;
transition: all .3s;
@@ -1990,6 +2012,7 @@ textarea:focus{
>div{
background: #cccccc;
line-height: 2;
font-size: 1.8rem;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
@@ -2004,6 +2027,9 @@ textarea:focus{
// margin: 0 auto;
margin-left: 2rem;
display: flex;
font-size: 1.8rem;
padding: 1rem 2rem;
box-sizing: content-box;
}
}

4
src/component/Detail/DesignDetailAlter.vue
View File

@@ -1364,8 +1364,8 @@ export default defineComponent({
margin: 0;
margin-bottom: calc(2rem*1.2);
width: calc(9rem*1.2);
height: calc(9rem*1.2);
width: 10rem;
height: 10rem;
display: flex;
align-items: center;
justify-content: center;

4
src/component/HomePage/Generate.vue
View File

@@ -15,7 +15,7 @@
<div class="input_border" >
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'',driver__.driver?'showEvents':'']">
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
<div class="upload_item">
<div class="upload_item" v-show="sketchboardList?.length != 0">
<div
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
@@ -939,7 +939,7 @@ export default defineComponent({
position: relative;
// padding-top: calc(2.5rem*1.2);
.input_border{
padding-top: calc(2.5rem*1.2);
padding-top: 1rem;
}
.mark_loading{

4
src/component/HomePage/PrintboardUpload.vue
View File

@@ -737,8 +737,8 @@ export default defineComponent({
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;

4
src/component/HomePage/SketchboardUpload.vue
View File

@@ -701,8 +701,8 @@ export default defineComponent({
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
// margin: 0 2rem*1.2) 2rem*1.2) 0;
display: inline-block;
width: calc(10rem*1.2);
height: calc(10rem*1.2);
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;

6
src/component/HomePage/bindEmail.vue
View File

@@ -112,7 +112,7 @@
</template>
<script lang="ts">
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
import { defineComponent,ref,reactive,toRefs ,computed} from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { setCookie ,WriteCookie } from "@/tool/cookie";
@@ -132,7 +132,9 @@ export default defineComponent({
const {locale} = useI18n()
const store = useStore();
let register = reactive({
registerModel:false,
registerModel:computed(()=>{
return store.state.UserHabit.isBindEmail
}),
registerModelMask:true,
pageWidth:'45%'
})

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

@@ -426,7 +426,7 @@ export default defineComponent({
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0,0,0,.65);
z-index: 2;
z-index: 999;
align-items: center;
width: calc(35rem*1.2);
justify-content: space-between;

16
src/component/HomePage/generalMenu.vue
View File

@@ -200,14 +200,15 @@ import { message, Upload, Modal } from "ant-design-vue";
>div{
// display: flex;
display: block;
width: calc(13rem*1.2);
border-radius: calc(1rem*1.2);
width: 20rem;
border-radius: 4rem;
margin: 0;
border: 2px solid;
border: 1px solid;
cursor: pointer;
padding: 0 calc(1rem*1.2);
padding: 1.5rem 2rem;
text-align: center;
display: flex;
font-size: 1.8rem;
justify-content: space-around;
> span{
white-space: nowrap;
@@ -221,7 +222,8 @@ import { message, Upload, Modal } from "ant-design-vue";
}
ul{
position: absolute;
width: calc(13rem*1.2);
border: 1px solid;
width: 20rem;
text-align: center;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
@@ -229,7 +231,7 @@ import { message, Upload, Modal } from "ant-design-vue";
z-index: 3;
li{
// background: rgba(0,0,0,.2);
background: #cccccc;
background: #fff;
line-height: 2;
cursor: pointer;
white-space: nowrap;
@@ -257,7 +259,7 @@ import { message, Upload, Modal } from "ant-design-vue";
}
.printModel_item:hover{
// background: rgba(0,0,0,.4);
background: #999999;
background: #f3f3f6;
color: #000;
}
}

45
src/component/LoginPage/googleLogin.vue
View File

@@ -1,6 +1,10 @@
<template>
<div class="Container">
<!-- 谷歌登录 -->
<div class="icon">
<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
<span>{{ $props.text }}</span>
</div>
<div class="g_id_signin" id="g_id_signin">
<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
</div>
@@ -12,6 +16,12 @@
export default defineComponent({
name: "login",
emits: ['googelLogin'],
props: {
text: {
type: String,
default: 'Sign in with Google'
}
},
setup(props, { emit }) {
const handleCredentialResponse = async (response) => {
// 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
@@ -69,27 +79,50 @@
</script>
<style scoped lang="less">
.Container{
position: relative;
:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
justify-content: center;
.nsm7Bb-HzV7m-LgbsSe-Bz112c{
padding: 0;
}
}
.g_id_signin{
width: 40px;
height: 40px;
:deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK){
width: 100%;
}
.icon{
// width: 40px;
width: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dadce0;
border-radius: 50%;
border-radius: 4rem;
padding: .5rem 3rem;
cursor: pointer;
box-sizing: border-box;
&:hover{
background: #f8faff;
}
img{
width: 18px;
height: 18px;
width: 3.8rem;
height: 3.8rem;
}
span{
font-size: 1.4rem;
margin-left: 1.4rem;
}
}
.g_id_signin{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
&:hover{
.icon{
background: #f8faff;
}
}
}

23
src/component/LoginPage/weiXinLogin.vue
View File

@@ -2,6 +2,7 @@
<div class="Container">
<div class="icon" @click="openWeiXinModel">
<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
<span>{{ $props.text }}</span>
</div>
<weiXinModel ref="weiXinModel"></weiXinModel>
</div>
@@ -14,6 +15,12 @@
components: {
weiXinModel
},
props: {
text: {
type: String,
default: 'Sign in with Wechat'
}
},
setup() {
let weiXinDom = reactive({
weiXinModel:null
@@ -35,20 +42,26 @@
.Container{
position: relative;
.icon{
width: 40px;
height: 40px;
// width: 40px;
width: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dadce0;
border-radius: 50%;
border-radius: 4rem;
padding: .5rem 3rem;
cursor: pointer;
box-sizing: border-box;
&:hover{
background: #f8faff;
}
img{
width: 18px;
height: 18px;
width: 3.8rem;
height: 3.8rem;
}
span{
font-size: 1.4rem;
margin-left: 1.4rem;
}
}
&.Container:hover{

16
src/component/mainPage/signUp/registerModel.vue
View File

@@ -143,8 +143,8 @@
</label>
</div>
<div class="thirdPartyLogin marign_top30">
<googleLogin @googelLogin="googelLogin"></googleLogin>
<weiXinLogin></weiXinLogin>
<googleLogin @googelLogin="googelLogin" text="Register with Google"></googleLogin>
<weiXinLogin text="Register with wechat"></weiXinLogin>
<!-- <phoneLogin></phoneLogin> -->
</div>
<div
@@ -644,16 +644,14 @@ export default defineComponent({
.page_content {
// position: relative;
.login_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
// position: relative;
// top: 50%;
// left: 50%;
// transform: translate(-50%,-50%);
// width: 60rem;
width: 80%;
// width: 80%;
background: #FFFFFF;
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
border-radius: 1rem;
padding: 3rem 6rem 6.5rem;
box-sizing: border-box;
display: flex;

1
src/lang/cn.ts
View File

@@ -155,6 +155,7 @@ export default {
Design:'设计',
Redesign:'重新设计',
GeneratedDesign:'生成设计，请选择您最喜欢的设计',
recycleBin:'回收站',
SelectedDesign:'喜欢的设计',
Export:'导出',
moodboard:"情绪板",

1
src/lang/en.ts
View File

@@ -155,6 +155,7 @@ export default {
Design:'Design',
Redesign:'Redesign',
GeneratedDesign:'Generated Design，please choose your favorite design',
recycleBin:'Recycle Bin',
SelectedDesign:'Selected Design',
Export:'Export',
moodboard:"moodboard",

2
src/main.ts
View File

@@ -8,7 +8,7 @@ import './assets/iconfont2/iconfont.css'
import flexible from './tool/flexible.js'
import 'ant-design-vue/dist/antd.css';
import Antd from 'ant-design-vue';
// import (reference) './assets/style/style.less';
import './assets/style/style.less';
import VueLazyload from "vue-lazyload";
import i18n from './lang/index'
import { getBrowserInfo, murmur } from './tool/util'

13
src/store/homeStore/homeStore.ts
View File

@@ -4,6 +4,7 @@ import {RootState} from '../index'
interface DesignDetail{
designCollectionList:any,
likeDesignCollectionList:any,
deleteDesignCollectionList:any,
userGroupId:any,
designCollectionId:any,
templateId:any,
@@ -16,6 +17,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
state:{
designCollectionList:[],
likeDesignCollectionList:[],
deleteDesignCollectionList:[],
userGroupId:'',
designCollectionId:'',
templateId:'',
@@ -32,6 +34,16 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
},
setLikeDesignCollectionList(state,data){
state.likeDesignCollectionList = data
},
setDeleteDesignCollectionList(state,data){
let obj = state.designCollectionList.splice(data,1)
state.deleteDesignCollectionList.unshift(...obj)
},
cancelDeleteDesignCollectionList(state,data){
let obj = state.deleteDesignCollectionList.splice(data,1)
console.log(obj);
state.designCollectionList.unshift(...obj)
},
setSingleDesignCollectionList(state,data){
state.designCollectionList[data.index] = data.design
@@ -73,6 +85,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
state.designCollectionList=[]
state.likeDesignCollectionList = []
state.designCollectionId = ''
state.deleteDesignCollectionList = []
},
setTemplateData(state,data){
state.templateId=data.id

11
src/store/userHabit/userHabit.ts
View File

@@ -22,6 +22,7 @@ interface UserHabit{
messageSystem:any,
sex:any,
userDetail:any,
isBindEmail:any,
}
const userHabit : Module<UserHabit,RootState> = {
@@ -77,7 +78,8 @@ const userHabit : Module<UserHabit,RootState> = {
},
subscriptionType:null,
subscriptionId:null,
}
},
isBindEmail:false
},
mutations:{
res_clothingType(state,data){
@@ -175,10 +177,13 @@ const userHabit : Module<UserHabit,RootState> = {
//是否是affiliate用户
affiliate:false,
}
state.isBindEmail = false
},
setUserDetail(state,data){
console.log(data);
// console.log(data);
// console.log(data.email,state.userDetail.email);
if(!data.email && !state.userDetail.email)state.isBindEmail = true
// if(!data.email && !state.userDetail.email)state.isBindEmail = true
// state.userDetail = data
state.userDetail.email = data.email?data.email:'------'
state.userDetail.userName = data.userName//用户名

4
src/tool/flexible.js
View File

@@ -10,8 +10,8 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
if(width/height>1.98) width = height * 1.98;
width > maxWidth && (width = maxWidth);
width < minWidth && (width = minWidth);
var rem = width * 10 / designWidth;
// var rem = Math.round(width * 10 / designWidth);
// var rem = width * 10 / designWidth;
var rem = Math.round(width * 10 / designWidth);
docEl.style.fontSize = rem+'px'
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}

1
src/tool/mdEvent.js
View File

@@ -1,5 +1,6 @@
const getMousePosition = (e,bor,dom) => {
e.stopPropagation()
e.preventDefault();
if(bor){
const touch = e.changedTouches[0];
event = {

2
src/views/Administrator.vue
View File

@@ -214,7 +214,7 @@ export default defineComponent({
// },
],
},{
name:'Trial Affiliate',
name:'Approval Affiliate',
icon:'usetime',
route:'/administrator/affiliateAudit',
key:'sub10',

24
src/views/HomeMain.vue
View File

@@ -209,7 +209,6 @@ export default defineComponent({
let newPosted = ref(null)
let bindEmail = ref(null)
let getUnreadCount = ()=>{
Https.axiosGet(Https.httpUrls.getUnreadCount).then((rv)=>{
if(rv){
@@ -312,7 +311,6 @@ export default defineComponent({
messageType,
...toRefs(stateList),
newPosted,
bindEmail,
openNewPosted,
changeLanguage,
closeShowOperateContent,
@@ -322,8 +320,6 @@ export default defineComponent({
},
data() {
return {
bindEmailVisible: false,
bindEmailStep: 1,
email: "",
emailCode: ["", "", "", "", "", ""], //邮箱验证码
time: 60, //60秒倒计时
@@ -346,20 +342,6 @@ export default defineComponent({
],
};
},
watch: {
'userDetail.email':{
handler(newVal, oldVal){
nextTick(()=>{
if(newVal == '-------------'){
setTimeout(()=>{
this.setBindEmail()//如果没有绑定邮箱就弹窗
},1000)
}
})
},
immediate: true
},
},
directives:{
moveOpenDetal:{
mounted (el,binding) {
@@ -438,9 +420,6 @@ export default defineComponent({
this.openTask(data)
},
setBindEmail(){
this.bindEmail.init()
},
turnToPage(name) {
let noRefresh = name === "home" ? true : false;
this.$router.push({ name: name, params: { noRefresh: noRefresh } });
@@ -895,6 +874,9 @@ export default defineComponent({
// height: 3.2rem;
div{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}

432
src/views/HomeView/HomeView.vue
View File

@@ -57,7 +57,7 @@
</div>
<!-- 有图状态 end-->
</div>
<div class="home_page_left_bottom" @click="()=>domHidden = !domHidden" v-show="designCollectionId">
<div class="home_page_left_bottom" @click="setShowHide('domHidden')" v-show="designCollectionId">
<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
</div>
</div>
@@ -89,127 +89,120 @@
</div>
</div>
</div>
<div class="right_content_block">
<div class="right_content_header">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.GeneratedDesign') }}
</span>
<div class="right_content_block_box">
<div class="right_content_block">
<div class="right_content_header">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.GeneratedDesign') }}
</span>
</div>
</div>
</div>
<div class="right_content_body">
<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
<div class="right_content_img_item" ref="designImg">
<!-- <draggable
group="people" > -->
<div class="right_content_body">
<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
<div class="right_content_img_item" ref="designImg">
<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,likeDesignCollectionList)">
<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>
<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
<a-spin size="large"></a-spin>
</div>
<!-- </draggable> -->
<div class="content_img_block" :style="collStyle" draggable v-for="(
design, index
) in designCollectionList" :key="design?.designItemId">
<div class="content_img_flex"
:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
@click="
designDetail(
<div class="content_img_block active" :style="collStyle" @mousedown.stop="designMousedown(getMousePosition($event,false))" @touchstart.passive="designMousedown(getMousePosition($event,true))"
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
@click="designDetail(
design,
index,
designCollectionList,
'dislike'
)"
@dragstart="dragstart($event, index)"
@dragover.prevent
@drop="dragDrop($event, index,designCollectionList)">
<img class="content_img" :src="design.designOutfitUrl" />
</div>
<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
likeDesignCollection(
likeDesignCollectionList,
'like'
)">
<div class="content_img_flex">
<img class="content_img" :src="design.designOutfitUrl"
:key="design.designOutfitUrl" designType="like" :index="index"/>
</div>
<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
dislikeDesignCollection(
design,
index
)
">
)">
</div>
<i class="fi fi-rr-trash icon_delete" @click.stop="
deleteDesignCollection(
designCollectionList,
index
)
">
</i>
</div>
<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
<a-spin size="large" class="content_img_flex"></a-spin>
</div>
<div class="content_img_block" :style="collStyle" v-for="(
design, index
) in designCollectionList" :key="design?.designItemId" @mousedown.stop="designMousedown(getMousePosition($event,false))" @touchstart.passive="designMousedown(getMousePosition($event,true))">
<div class="content_img_flex"
:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
@click="
designDetail(
design,
index,
designCollectionList,
'dislike'
)">
<img class="content_img" :src="design.designOutfitUrl" designType="dislike" :index="index"/>
</div>
<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
likeDesignCollection(
design,
index
)
">
</div>
<i class="fi fi-rr-trash icon_delete" @click.stop="
setDeleteDesign(index)">
</i>
</div>
</div>
</div>
</div>
</div>
<!-- <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 class="right_content_block recycleBin" :class="{recycleBinShow:recycleDomHidden && designCollectionId}">
<div class="right_content_header">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.recycleBin') }}
</span>
</div>
</div>
<div class="right_content_export" v-show="likeDesignCollectionList.length">
<div class="right_content_body">
<div class="right_content_img_block scroll_style">
<div class="right_content_img_item">
<div class="content_img_block" v-for="(
design, index
) in deleteDesignCollectionList" :key="design?.designItemId">
<div class="content_img_flex"
@click="
designDetail(
design,
index,
designCollectionList,
'dislike'
)">
<img class="content_img" :src="design.designOutfitUrl" />
</div>
<div class="Dustbin" @click.stop="
cancelDeleteDesign(index)">
Dustbin
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right_content_body">
<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" 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>
</div>
</div>
</div> -->
<div class="home_page_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>
</div>
</div>
<teleport to="body">
<img class="moveDataImg" v-if="moveDataImg" :style="moveDataStyle" :src="moveDataImg" alt="">
</teleport>
<KeepAlive>
<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
</KeepAlive>
@@ -241,7 +234,7 @@
</template>
<script lang="ts">
import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount} from "vue";
import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount, toRef} from "vue";
// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
// import HeaderComponent from "@/component/HomePage/Header.vue";
import CollectionModal from "@/component/HomePage/collectionModal.vue";
@@ -258,11 +251,11 @@ import { useStore } from "vuex";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import draggable from 'vuedraggable'
// import JSZip, { forEach } from "jszip";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import i18n from "@/lang";
import { useI18n } from "vue-i18n";
import { getMousePosition } from "@/tool/mdEvent";
const FileSaver = require("file-saver");
export default defineComponent({
@@ -275,7 +268,6 @@ export default defineComponent({
DesignDetail,
ExportNewCoolection,
affiche,
draggable,
productImg,
generalCanvas
},
@@ -293,6 +285,9 @@ export default defineComponent({
let likeDesignCollectionList: any = computed(() => {
return store.state.HomeStoreModule.likeDesignCollectionList;
});
let deleteDesignCollectionList: any = computed(() => {
return store.state.HomeStoreModule.deleteDesignCollectionList;
});
let designCollectionList: any = computed(() => {
return store.state.HomeStoreModule.designCollectionList;
});
@@ -375,6 +370,9 @@ export default defineComponent({
collTime:null as any,
})
let designImg = ref()
let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
let recycleDomHidden = ref(JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false);
let getDesignTime = null as any;
const setSystemDesigner = (time:any)=>{
clearTimeout(collItemSize.collTime)
collItemSize.collTime = setTimeout(()=>{
@@ -390,18 +388,91 @@ export default defineComponent({
const setDesignImgWidth = ()=>{
nextTick(()=>{
let width = designImg.value.parentElement.offsetWidth
let sonDom = designImg.value.querySelectorAll('div')[0]
let sonDom = designImg.value.querySelectorAll('.content_img_block')[designImg.value.querySelectorAll('.content_img_block').length - 1]
if(Math.floor(width / (sonDom.offsetWidth+10 + 1)) > (likeDesignCollectionList.value.length + designCollectionList.value.length)){
designImg.value.style.width = 100+'%'
}else{
designImg.value.style.width = Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1) + 'px'
// let recycleBinW = recycleDomHidden.value?'53rem':0
designImg.value.style.width = Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1)+ 'px'
// designImg.value.style.width = `calc(${Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1)}px - ${recycleBinW})`
}
})
}
const setDeleteDesign = (index:any)=>{
store.commit("setDeleteDesignCollectionList",index);
}
const cancelDeleteDesign = (index:any)=>{
store.commit("cancelDeleteDesignCollectionList",index);
}
setSystemDesigner(0)
let moveData = reactive({
moveDataImg:'',
moveDataImg_:'',
moveDataStyle:{
position: 'absolute',
top: '0',
left: '0',
width:'',
height:'',
zIndex: 9,
opacity:.5,
pointerEvents:'none'
},
downIndex:-1,
downXy:{x:0,y:0},
})
const designMousedown = (e:any)=>{
if(e.target.getAttribute('index')){
moveData.downIndex = e.target.getAttribute('index');
moveData.moveDataImg_ = e.target.src
moveData.downXy.x = e.clientX
moveData.downXy.y = e.clientY
moveData.moveDataStyle.width = e.target.offsetWidth + 'px'
moveData.moveDataStyle.height = e.target.offsetHeight + 'px'
window.addEventListener('mousemove', mouseMove);
window.addEventListener('touchmove', touchmove);
window.addEventListener('mouseup', designMouseup);
window.addEventListener('touchend', designMouseup);
}
}
let mouseMove = function(event:any){
let e = getMousePosition(event,false)
desingMousemove(e)
}
let touchmove = function(event:any){
let e = getMousePosition(event,true)
desingMousemove(e)
}
const designMouseup = (e:any)=>{
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',designMouseup)
document.removeEventListener('touchend',designMouseup)
moveData.moveDataImg = ''
moveData.moveDataImg_ = ''
moveData.downXy = {x:0,y:0}
var type = e.target.getAttribute('designType');
var index = e.target.getAttribute('index');
if(index){
let arr = type == 'like'?likeDesignCollectionList.value:designCollectionList.value
// arr[index]
let item = arr.splice(moveData.downIndex, 1)
arr.splice(index, 0, ...item)
}
}
const desingMousemove = (e:any)=>{
if(!moveData.moveDataImg)moveData.moveDataImg = moveData.moveDataImg_
let width = moveData.moveDataStyle.width.split('px')[0]
let height = moveData.moveDataStyle.height.split('px')[0]
moveData.moveDataStyle.left = e.clientX - Number(width)/2+'px'
moveData.moveDataStyle.top = e.clientY - Number(height)/2+'px'
}
return {
store,
likeDesignCollectionList,
deleteDesignCollectionList,
designCollectionList,
userGroupId,
userDetail,
@@ -423,7 +494,16 @@ export default defineComponent({
setSystemDesigner,
...toRefs(collItemSize),
designImg,
domHidden,
recycleDomHidden,
getDesignTime,
setDesignImgWidth,
setDeleteDesign,
cancelDeleteDesign,
...toRefs(moveData),
designMousedown,
getMousePosition,
};
},
data() {
@@ -446,9 +526,7 @@ export default defineComponent({
likeLoading: false, //喜欢防抖
dragIdx:0,
designRandom:'',
domHidden:JSON.parse(sessionStorage.getItem('domHidden') as any) || false,
getDesignTime:null as any,
};
},
watch: {
@@ -467,6 +545,7 @@ export default defineComponent({
beforeUnmount(){
clearTimeout(this.getDesignTime);
sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
},
async mounted() {
@@ -614,17 +693,6 @@ export default defineComponent({
// affiche.afficheMask = true
},
dragstart (e:any, index:any) {
this.dragIdx = index
},
dragDrop (e:any, index:any,list:any) {
let _teams = list //将hotteams存起来
let _dragitem = _teams[this.dragIdx] //将被拖拽的那条数据存起来
if(!_dragitem)return
_teams.splice(this.dragIdx, 1) //删除被拖拽的那条数据
_teams.splice(index, 0, _dragitem) //将被拖拽的那条数据放到数组中指定的位置
},
//判断模特和当前start的sketch是否匹配
isMannequin(){
@@ -1264,6 +1332,11 @@ export default defineComponent({
this.$emit('setTask',data)
// this.exportModel()
},
setShowHide(str:string){
if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
if(str == 'domHidden')this.domHidden = !this.domHidden
this.setDesignImgWidth()
}
},
});
</script>
@@ -1278,8 +1351,10 @@ export default defineComponent({
// left: 50%;
// margin-left: -50%;
// transform: translateX(-50%);
.page_content {
position: relative;
.userSystem{
position: absolute;
width: 100%;
@@ -1293,6 +1368,31 @@ export default defineComponent({
font-weight: 600;
font-size: 4rem;
}
.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);
}
}
}
.page_content_body {
position: absolute;
width: 100%;
@@ -1316,31 +1416,7 @@ export default defineComponent({
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;
@@ -1439,10 +1515,27 @@ export default defineComponent({
// width: calc(100% - 44.4rem);
flex: 1;
height: 100%;
overflow: hidden;
width: 100%;
// overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
.home_page_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);
border: 2px solid;
border-left: none;
&.active{
right: 53rem;
transform: translate(0, -50%);
}
}
.right_top {
padding: 2rem 3.2rem 2rem 1.2rem;
display: flex;
@@ -1477,12 +1570,35 @@ export default defineComponent({
}
}
}
.right_content_block {
overflow-y: auto;
.right_content_block_box{
flex: 1;
display: flex;
overflow: hidden;
}
.right_content_block {
flex: 1;
display: flex;
width: 0;
flex-direction: column;
&.recycleBin{
flex: none;
margin-left: 0;
width: 0;
overflow: hidden;
&.recycleBinShow{
width: auto;
margin-left: 2rem;
}
.right_content_body {
width: 55rem;
.right_content_img_block{
.content_img_block{
width: 16rem;
height: 23rem;
}
}
}
}
&.right_content_block::-webkit-scrollbar{display: none;}
&.active{
overflow: hidden;
@@ -1616,7 +1732,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
&:hover .icon_like,&:hover .icon_delete {
&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
display: block;
}
@@ -1631,7 +1747,7 @@ export default defineComponent({
width: 100%;
height: 100%;
border-radius: 2rem;
border: 2px solid #E0E0E0;
}
&.active{
.icon_like,.icon_delete{
@@ -1648,7 +1764,19 @@ export default defineComponent({
// max-height: 100%;
object-fit: contain;
}
.Dustbin{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer;
color: #fff;
border-radius: 4rem;
font-size: 1.8rem;
padding: 1rem 1.5rem;
background: rgba(0, 0, 0, 0.7);
display: none;
}
.icon_like,.icon_delete {
font-size: 2.4rem;
top: 1rem;

8
src/views/HomeView/library.vue
View File

@@ -242,7 +242,7 @@
<div class="input_border">
<div class="input_box" :class="{active:inputShow}">
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
<div class="upload_item" v-show="selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
<div class="upload_item" v-show="selectGenerateList.length != 0 && selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
<div
class="upload_file_item"
v-for="(file, index) in selectGenerateList"
@@ -272,7 +272,6 @@
<input class="search_seed" max="9999" v-show="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
</a-popover> -->
<input
class="search_input "
@input="ifMaximumLength"
:maxlength='inputShow?0:9999'
@keydown.enter="getgenerate"
@@ -1872,7 +1871,10 @@ export default defineComponent({
.intersection{
cursor: pointer;
margin-right: 3rem;
font-size: 3rem;
>div{
font-size: 3rem;
font-weight: 900;
}
}
}