fix
This commit is contained in:
X1627315083@163.com
@@ -0,0 +1,227 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
const emit = defineEmits([
|
||||
'selectCollectionItem',
|
||||
])
|
||||
const current = ref(1)
|
||||
const list = ref([
|
||||
{
|
||||
imgList:[
|
||||
{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},
|
||||
],
|
||||
type:'Series',
|
||||
name:'Christmas',
|
||||
sketchNum: 7,
|
||||
date: 'today',
|
||||
id:'1',
|
||||
},{
|
||||
imgList:[
|
||||
{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},
|
||||
],
|
||||
type:'Series',
|
||||
name:'Christmas',
|
||||
sketchNum: 7,
|
||||
date: 'today',
|
||||
id:'2',
|
||||
},{
|
||||
imgList:[
|
||||
{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},
|
||||
],
|
||||
type:'Series',
|
||||
name:'Christmas',
|
||||
sketchNum: 7,
|
||||
date: 'today',
|
||||
id:'1',
|
||||
},{
|
||||
imgList:[
|
||||
{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},{
|
||||
url:'https://www.minio-api.aida.com.hk/aida-users/83/avatar/2b3d5756-ea29-4020-86a9-3b02cfc73b5a.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20260410%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260410T013002Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=eedfd4114bde66f0ff8fe5e4d7a7274d9007b25deb40ee82a19427f29601e89b',
|
||||
},
|
||||
],
|
||||
type:'Series',
|
||||
name:'Christmas',
|
||||
sketchNum: 7,
|
||||
date: 'today',
|
||||
id:'1',
|
||||
},
|
||||
])
|
||||
|
||||
const selectCollectionItem = (item:any)=>{
|
||||
emit('selectCollectionItem',item)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
</script>
|
||||
<template>
|
||||
<div class="historyList">
|
||||
<div class="list">
|
||||
<div v-for="(item,index) in list" :key="index" class="item" @click="selectCollectionItem(item)">
|
||||
<div class="imgList">
|
||||
<div v-for="(img,index) in item.imgList" :key="index" class="img">
|
||||
<img :src="img.url" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="name">{{item.name}}</div>
|
||||
<div class="bottom">
|
||||
<div>{{item.sketchNum}} sketchs</div>
|
||||
<div>{{item.date}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type" :class="item.type">
|
||||
{{item.type}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<a-pagination v-model:current="current" :pageSize="6" :showSizeChanger="false" show-quick-jumper :total="100" show-less-items />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.historyList{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 3rem;
|
||||
> .list{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
row-gap: 2.4rem; /* 垂直间距 3px */
|
||||
column-gap: 3.2rem; /* 横向间距 2px */
|
||||
align-content: start;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
> .item{
|
||||
width: 42.6rem;
|
||||
height: auto;
|
||||
// height: 27.6rem;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 2rem;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
> .imgList{
|
||||
background-color: #eaeaea;
|
||||
height: 19.2rem;
|
||||
padding: 1rem 1.3rem;
|
||||
display: flex;
|
||||
gap: .4rem;
|
||||
> .img{
|
||||
width: 9.7rem;
|
||||
height: 17.2rem;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
> img{
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .detail{
|
||||
padding: 2rem 2.4rem;
|
||||
> .name{
|
||||
font-family: pingfang_heavy;
|
||||
font-weight: 400;
|
||||
font-size: 1.797rem;
|
||||
line-height: 1;
|
||||
}
|
||||
> .bottom{
|
||||
display: flex;
|
||||
margin-top: .8rem;
|
||||
justify-content: space-between;
|
||||
> div{
|
||||
font-size: 1.2rem;
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
color: #585858;
|
||||
}
|
||||
> div:nth-child(2){
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .type{
|
||||
width: 7.6rem;
|
||||
height: 3rem;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid #727070;
|
||||
background: #7E7C7C;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.Series{
|
||||
|
||||
}
|
||||
&.Single{
|
||||
background-color: #ffffff;
|
||||
color: #727070;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 1.5px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .pagination{
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
import historyList from "./historyList.vue"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
const router = useRouter()
|
||||
let data = reactive({
|
||||
})
|
||||
const searchType = ref('all')
|
||||
const searchText = ref('')
|
||||
|
||||
const historyListRef = ref(null)
|
||||
const handleSearch = () => {
|
||||
}
|
||||
const selectCollectionItem = (item:any) => {
|
||||
router.push({path:'/home/seller/myListings/select/'+item.id})
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -26,7 +38,27 @@ const {} = toRefs(data);
|
||||
>
|
||||
</seller-header>
|
||||
<div class="content">
|
||||
1231222aaa
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div :class="{active:searchType == 'all'}" @click="searchType = 'all'">All</div>
|
||||
<div :class="{active:searchType == 'series'}" @click="searchType = 'series'">Series Design</div>
|
||||
<div :class="{active:searchType == 'single'}" @click="searchType = 'single'">Single Design</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="search_input flex flex-align-center">
|
||||
<input
|
||||
class="search_input_inner"
|
||||
v-model="searchText"
|
||||
:bordered="false"
|
||||
@keydown.enter="handleSearch"
|
||||
placeholder="123123"
|
||||
/>
|
||||
<!-- <SearchOutlined class="search_input_icon" @click="handleSearch" /> -->
|
||||
<SvgIcon name="CSearch" size="20" class="search_input_icon" @click="handleSearch" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<historyList ref="historyListRef" @selectCollectionItem="selectCollectionItem"></historyList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -42,6 +74,71 @@ const {} = toRefs(data);
|
||||
margin-top: 2rem;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 2.4rem 3rem;
|
||||
background-color: #f9fafa;
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
> div{
|
||||
min-width: 9rem;
|
||||
padding: .4rem 2.6rem;
|
||||
background-color: #fff;
|
||||
border-radius: 4rem;
|
||||
border: 1px solid #000000;
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
|
||||
}
|
||||
}
|
||||
> .active{
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
> .right{
|
||||
.search_input {
|
||||
height: 3.2rem;
|
||||
width: 27rem; // 默认宽度
|
||||
background-color: #fff;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3rem;
|
||||
// column-gap: 3rem;
|
||||
padding: 0 2rem;
|
||||
.search_input_inner {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: calc(100% - 2rem);
|
||||
padding: .6rem 0;
|
||||
font-size: 1.2rem;
|
||||
&::placeholder {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
&::-webkit-input-placeholder{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.search_input_icon {
|
||||
font-size: 1.6rem;
|
||||
color: #000;
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
import { VueDraggable } from "vue-draggable-plus"
|
||||
import selectMenu from '@/component/modules/selectMenu.vue'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -8,7 +10,101 @@ import sellerHeader from "../../seller-header.vue"
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const domSize = ref('Small')
|
||||
const domSizeList = ref([
|
||||
{
|
||||
label:'Small',
|
||||
value:'Small',
|
||||
},
|
||||
{
|
||||
label:'Medium',
|
||||
value:'Medium',
|
||||
},
|
||||
{
|
||||
label:'Large',
|
||||
value:'Large',
|
||||
},
|
||||
])
|
||||
const list = ref([
|
||||
{ id: "1" },
|
||||
{ id: "2" },
|
||||
{ id: "3" },
|
||||
{ id: "4" },
|
||||
{ id: "5" },
|
||||
{ id: "6" },
|
||||
{ id: "7" },
|
||||
{ id: "8" },
|
||||
{ id: "9" },
|
||||
{ id: "10" }
|
||||
])
|
||||
const chooseList = ref([])
|
||||
const chooseItem = (item:any)=>{
|
||||
chooseList.value.push(item)
|
||||
}
|
||||
|
||||
const next = ()=>{
|
||||
if(chooseList.value.length == 0)return
|
||||
}
|
||||
|
||||
const config = ref({
|
||||
"data-container-type": "root",
|
||||
"data-parent-id": "null",
|
||||
animation: 250,
|
||||
handle: ".item", // 可拖动的元素
|
||||
"ghost-class": "ghost", // 拖动时的类名
|
||||
"chosen-class": "chosen", // 选中时的类名
|
||||
"drag-class": "drag", // 拖动时的类名
|
||||
"swap-threshold": 0.5,
|
||||
"empty-insert-threshold": 5,
|
||||
"force-fallback": false,
|
||||
"fallback-tolerance": 3,
|
||||
"scroll-sensitivity": 100,
|
||||
"scroll-speed": 10,
|
||||
onEnd: (e) => {}
|
||||
})
|
||||
|
||||
|
||||
let resizeObserver = null as any
|
||||
|
||||
const gap = ref({
|
||||
Small: '16px',
|
||||
Medium: '24px',
|
||||
Large: '30px',
|
||||
})
|
||||
//根据宽度设置列表宽度
|
||||
let upDataDomWidthTime = null as any
|
||||
const listingsBoxRef = ref(null) as any
|
||||
const setDomSize = (width: number)=>{
|
||||
if(!listingsBoxRef.value)return
|
||||
let listDom = listingsBoxRef.value.querySelector('.list')
|
||||
let listItemDom = listDom.querySelector('.item')
|
||||
let offsetWidth = listItemDom.getBoundingClientRect().width
|
||||
let lineNum = Math.floor(width / offsetWidth)
|
||||
let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
|
||||
listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
|
||||
}
|
||||
|
||||
const changeDomSize = ()=>{
|
||||
setTimeout(()=>{
|
||||
setDomSize(listingsBoxRef.value.clientWidth)
|
||||
},350)
|
||||
}
|
||||
onMounted(()=>{
|
||||
// 创建观察器
|
||||
nextTick(()=>{
|
||||
resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
// 获取元素尺寸
|
||||
const width = entry.contentRect.width
|
||||
if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
|
||||
upDataDomWidthTime = setTimeout(()=>{
|
||||
setDomSize(width)
|
||||
},200)
|
||||
}
|
||||
})
|
||||
// 开始监听
|
||||
if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
@@ -25,9 +121,95 @@ const {} = toRefs(data);
|
||||
{title:'Select Sketch', name: 'myListingsSelectItem' }
|
||||
]"
|
||||
>
|
||||
<template #right>
|
||||
<div class="header-right">
|
||||
<div class="chooseNum">
|
||||
{{ chooseList.length }} sketches selected
|
||||
</div>
|
||||
<div class="button" @click="next">
|
||||
<span>Next</span>
|
||||
<div class="icon">
|
||||
<i class="fi fi-rr-arrow-small-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</seller-header>
|
||||
<div class="content">
|
||||
1231222aaa
|
||||
<div class="content" ref="listingsBoxRef">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<span>Active Listings</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="generalModel_state">
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
: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="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Filter') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
: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="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Size') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VueDraggable
|
||||
v-model="list"
|
||||
class="list"
|
||||
:class="domSize"
|
||||
v-bind="config"
|
||||
:style="{gap: gap[domSize] || '1.6rem'}"
|
||||
:group="{
|
||||
name: 'sortable',
|
||||
pull: false,
|
||||
put: true
|
||||
}"
|
||||
>
|
||||
<div v-for="v in list" :key="v.id"
|
||||
:draging="true"
|
||||
class="item"
|
||||
@click="chooseItem(v)"
|
||||
:class="{'active':chooseList.some(item => item.id === v.id)}"
|
||||
>
|
||||
<div class="choose">
|
||||
<i class="fi fi-rr-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -39,10 +221,125 @@ const {} = toRefs(data);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header-right{
|
||||
display: flex;
|
||||
.chooseNum{
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
line-height: 140%;
|
||||
margin-right: 2rem;
|
||||
line-height: 6rem;
|
||||
}
|
||||
.button {
|
||||
width: 12.3rem;
|
||||
height: 6rem;
|
||||
border-radius: 4rem;
|
||||
display: flex;
|
||||
border: 1.5px solid #000000;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
transition: all .3s;
|
||||
gap: .8rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
i{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
i{
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .content {
|
||||
margin-top: 2rem;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 2.4rem 3rem;
|
||||
background-color: #f9fafa;
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
> .left{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: pingfang_heavy;
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
line-height: 130%;
|
||||
letter-spacing: 0%;
|
||||
gap: 1.2rem;
|
||||
> i{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
align-content: flex-start;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&.Small{
|
||||
--itemWidth: 17rem;
|
||||
--itemHeight: 26.1rem;
|
||||
}
|
||||
> .item{
|
||||
width: var(--itemWidth);
|
||||
height: var(--itemHeight);
|
||||
border-radius: 2rem;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
// transition: all .3s;
|
||||
position: relative;
|
||||
> .choose{
|
||||
display: flex;
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 1.2rem;
|
||||
right: .9rem;
|
||||
> i{
|
||||
color: #fff;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
border: 1.5px solid #000;
|
||||
> .choose{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 1.5px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { VueDraggable } from "vue-draggable-plus"
|
||||
import contentItem from "./contentItem.vue"
|
||||
import selectMenu from '@/component/modules/selectMenu.vue'
|
||||
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -54,9 +57,75 @@ const config = ref({
|
||||
"scroll-speed": 10,
|
||||
onEnd: (e) => {}
|
||||
})
|
||||
const domSize = ref('Small')
|
||||
const domSizeList = ref([
|
||||
{
|
||||
label:'Small',
|
||||
value:'Small',
|
||||
},
|
||||
{
|
||||
label:'Medium',
|
||||
value:'Medium',
|
||||
},
|
||||
{
|
||||
label:'Large',
|
||||
value:'Large',
|
||||
},
|
||||
])
|
||||
const listingsBoxRef = ref(null) as any
|
||||
let resizeObserver = null as any
|
||||
|
||||
const gap = ref({
|
||||
Small: '16px',
|
||||
Medium: '24px',
|
||||
Large: '30px',
|
||||
})
|
||||
|
||||
|
||||
//根据宽度设置列表宽度
|
||||
let upDataDomWidthTime = null
|
||||
const setDomSize = (width: number)=>{
|
||||
if(!listingsBoxRef.value)return
|
||||
let listDom = listingsBoxRef.value.querySelector('.list')
|
||||
let listItemDom = listDom.querySelector('.item')
|
||||
let offsetWidth = listItemDom.getBoundingClientRect().width
|
||||
let lineNum = Math.floor(width / offsetWidth)
|
||||
let itemNum = Math.floor((width - (lineNum - 1) * parseInt(gap.value[domSize.value])) / offsetWidth)
|
||||
listDom.style.maxWidth = ((itemNum - 1) * parseInt(gap.value[domSize.value]) + itemNum * (offsetWidth)) + 'px'
|
||||
}
|
||||
|
||||
const changeDomSize = ()=>{
|
||||
setTimeout(()=>{
|
||||
setDomSize(listingsBoxRef.value.clientWidth)
|
||||
},350)
|
||||
}
|
||||
|
||||
const unfoldDrafits = ()=>{
|
||||
data.showDrafts = !data.showDrafts
|
||||
}
|
||||
onMounted(()=>{
|
||||
// 创建观察器
|
||||
nextTick(()=>{
|
||||
resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
// 获取元素尺寸
|
||||
const width = entry.contentRect.width
|
||||
const height = entry.contentRect.height
|
||||
const borderBoxSize = entry.borderBoxSize[0] // 包含边框
|
||||
const contentBoxSize = entry.contentBoxSize[0] // 内容区域
|
||||
if(upDataDomWidthTime)clearTimeout(upDataDomWidthTime)
|
||||
upDataDomWidthTime = setTimeout(()=>{
|
||||
setDomSize(width)
|
||||
},200)
|
||||
}
|
||||
})
|
||||
// 开始监听
|
||||
if(resizeObserver)resizeObserver.observe(listingsBoxRef.value)
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
// 停止监听
|
||||
if(listingsBoxRef?.value)resizeObserver?.unobserve(listingsBoxRef?.value)
|
||||
})
|
||||
defineExpose({})
|
||||
const { showDrafts } = toRefs(data);
|
||||
@@ -64,19 +133,62 @@ const { showDrafts } = toRefs(data);
|
||||
<template>
|
||||
<div class="listings">
|
||||
<div class="listingsBox listingsBox1">
|
||||
<div class="box">
|
||||
<div class="box" :class="domSize" ref="listingsBoxRef">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<span>Active Listings</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
||||
<div class="generalModel_state">
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
: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="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Filter') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
<div>
|
||||
<selectMenu
|
||||
:selectList="domSizeList"
|
||||
@change="changeDomSize"
|
||||
: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="domSize"
|
||||
>
|
||||
<template v-slot:btnText>
|
||||
{{ $t('Header.Size') }}
|
||||
</template>
|
||||
</selectMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VueDraggable
|
||||
v-model="list"
|
||||
class="list"
|
||||
:style="{gap: gap[domSize] || '1.6rem'}"
|
||||
v-bind="config"
|
||||
:group="{
|
||||
name: 'sortable',
|
||||
@@ -84,20 +196,25 @@ const { showDrafts } = toRefs(data);
|
||||
put: true
|
||||
}"
|
||||
>
|
||||
<div class="item" v-for="v in list" :key="v.id" :draging="true">
|
||||
{{ v.id }}
|
||||
</div>
|
||||
|
||||
<contentItem v-for="v in list" :key="v.id" type="listings" :domSize="domSize"/>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="showDrafts = !showDrafts">
|
||||
<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="unfoldDrafits">
|
||||
<span class="icon iconfont icon-xiala"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
|
||||
<div class="box">
|
||||
<div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
|
||||
<div class="box Small">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<i class="fi fi-rs-comments"></i>
|
||||
<span>Drafts</span>
|
||||
</div>
|
||||
</div>
|
||||
<VueDraggable
|
||||
v-model="list2"
|
||||
class="list"
|
||||
class="list2"
|
||||
v-bind="config"
|
||||
:group="{
|
||||
name: 'sortable',
|
||||
@@ -105,12 +222,10 @@ const { showDrafts } = toRefs(data);
|
||||
put: true
|
||||
}"
|
||||
>
|
||||
<div class="item" v-for="v in list" :key="v.id" :draging="true">
|
||||
{{ v.id }}
|
||||
</div>
|
||||
<contentItem v-for="v in list2" :key="v.id" domSize="Small" type="drafts"/>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
@@ -123,16 +238,19 @@ const { showDrafts } = toRefs(data);
|
||||
.listingsBox{
|
||||
background-color: #f9fafa;
|
||||
border-radius: 2rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
// overflow: hidden;
|
||||
display: flex;
|
||||
transition: all .3s;
|
||||
.box{
|
||||
width: 100%;
|
||||
padding: 2.4rem 4rem;
|
||||
padding: 2.4rem 0;
|
||||
padding-bottom: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2.4rem 4rem;
|
||||
> .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -148,6 +266,7 @@ const { showDrafts } = toRefs(data);
|
||||
line-height: 130%;
|
||||
letter-spacing: 0%;
|
||||
gap: 1.2rem;
|
||||
align-content: flex-start;
|
||||
> i{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -156,34 +275,30 @@ const { showDrafts } = toRefs(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
.list2{
|
||||
gap: 1.6rem;
|
||||
.item{
|
||||
width: 19.2rem;
|
||||
}
|
||||
}
|
||||
.list,.list2{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
.item{
|
||||
width: 197px;
|
||||
height: 249px;
|
||||
border-radius: 20px;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
&:hover{
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
// flex: 1;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.listingsBox1{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.box{
|
||||
.list{
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.listingsBox2{
|
||||
width: 48.8rem;
|
||||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
&.active{
|
||||
width: 0;
|
||||
|
||||
216
src/views/SellerDashboard/MyListings/main/contentItem.vue
Normal file
216
src/views/SellerDashboard/MyListings/main/contentItem.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
domSize: {
|
||||
type: String,
|
||||
default: 'Small'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'listings'
|
||||
}
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="item" :draging="true" :class="domSize">
|
||||
<div class="imgBox">
|
||||
<img src="" alt="">
|
||||
<div class="maskBtn">
|
||||
<div>
|
||||
<svgIcon name="seller-edit" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Edit</div>
|
||||
</div>
|
||||
<div v-if="type == 'listings'">
|
||||
<svgIcon name="seller-draft" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Draft</div>
|
||||
</div>
|
||||
<div v-else-if="type == 'drafts'">
|
||||
<svgIcon name="seller-share" :size="domSize == 'Small'?32:domSize == 'Medium'?40:48" />
|
||||
<div>Publish</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="left">
|
||||
<div class="name">item name</div>
|
||||
<div class="price">$1123</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="detailItem" v-if="type == 'listings'">
|
||||
<div class="shopping1">
|
||||
<i class="fi fi-rr-shopping-bag-add"></i>
|
||||
</div>
|
||||
<span>123</span>
|
||||
</div>
|
||||
<div class="detailItem" v-if="type == 'listings'">
|
||||
<div class="eye1">
|
||||
<i class="fi fi-rs-eye"></i>
|
||||
</div>
|
||||
<span>123</span>
|
||||
</div>
|
||||
<div class="detailItem drafts" v-if="type == 'drafts'">
|
||||
<div class="">
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.item{
|
||||
// height: 30.2rem;
|
||||
&.Small{
|
||||
--itemWidth: 19.7rem;
|
||||
--itemImgHeight: 24.9rem;
|
||||
--maskBtnGap: .8rem;
|
||||
--maskBtnWidth: 6rem;
|
||||
--maskBtnFS: 1.6rem;
|
||||
--detailPadding: .8rem 1.2rem;
|
||||
--detailLeftNameSize: 1.4rem;
|
||||
--detailLeftPriceSize: 1.2rem;
|
||||
--detailRightGap: .8rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 1.6rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
&.Medium{
|
||||
--itemWidth: 25.4rem;
|
||||
--itemImgHeight: 32.2rem;
|
||||
--maskBtnGap: 1rem;
|
||||
--maskBtnWidth: 7.6rem;
|
||||
--maskBtnFS: 2.07rem;
|
||||
--detailPadding: 1.2rem 1.4rem;
|
||||
--detailLeftNameSize: 1.6rem;
|
||||
--detailLeftPriceSize: 1.4rem;
|
||||
--detailRightGap: 1rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 2rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
&.Large{
|
||||
--itemWidth: 31.4rem;
|
||||
--itemImgHeight: 39.8rem;
|
||||
--maskBtnGap: 1.2rem;
|
||||
--maskBtnWidth: 7.6rem;
|
||||
--maskBtnFS: 2.56rem;
|
||||
--detailPadding: 1.2rem 1.6rem;
|
||||
--detailLeftNameSize: 1.98rem;
|
||||
--detailLeftPriceSize: 1.73rem;
|
||||
--detailRightGap: 1.2rem;
|
||||
--detailRightItemGap: .4rem;
|
||||
--detailRightItemIcon: 2.6rem;
|
||||
--detailRightItemDraftsIcon: 2rem;
|
||||
}
|
||||
width: var(--itemWidth);
|
||||
border-radius: 2rem;
|
||||
border: 1.5px solid #C7C7C7;
|
||||
overflow: hidden;
|
||||
.imgBox{
|
||||
position: relative;
|
||||
height: var(--itemImgHeight);
|
||||
width: 100%;
|
||||
> .maskBtn{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #00000066;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--maskBtnGap);
|
||||
> div{
|
||||
font-family: pingfang_bold;
|
||||
font-weight: 400;
|
||||
font-size: var(--maskBtnFS);
|
||||
line-height: 150%;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
width: var(--maskBtnWidth);
|
||||
text-align: center;
|
||||
> div{
|
||||
margin-top: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
padding: var(--detailPadding);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
--rightColor: #979797;
|
||||
.left{
|
||||
gap: var(--detailRightItemGap);
|
||||
.name{
|
||||
font-weight: 500;
|
||||
font-size: var(--detailLeftNameSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
.price{
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: var(--detailLeftPriceSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
gap: var(--detailRightGap);
|
||||
.detailItem{
|
||||
display: flex;
|
||||
gap: var(--detailRightItemGap);
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
> div{
|
||||
color: var(--rightColor);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> i{
|
||||
font-size: var(--detailRightItemIcon);
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
> span{
|
||||
color: var(--rightColor);
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: var(--detailLeftPriceSize);
|
||||
line-height: 150%;
|
||||
}
|
||||
&.drafts{
|
||||
justify-content: center;
|
||||
> div{
|
||||
> i{
|
||||
font-size: var(--detailRightItemDraftsIcon);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
border: 1.5px solid #000000;
|
||||
.imgBox{
|
||||
> .maskBtn{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
--rightColor: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
import sellerContent from "./content.vue"
|
||||
import myEvent from "@/tool/myEvents.js"
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -9,6 +10,9 @@ import sellerContent from "./content.vue"
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
const newListing = ()=>{
|
||||
myEvent.emit('newListing')
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -23,7 +27,7 @@ const {} = toRefs(data);
|
||||
tip="Active listings and unpublished inventory."
|
||||
>
|
||||
<template #right>
|
||||
<div class="button">
|
||||
<div class="button" @click="newListing">
|
||||
<span>New Listing</span>
|
||||
<div class="icon">
|
||||
<i class="fi fi-br-plus"></i>
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
import { ref, computed } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import toolTipBox from "./toolTipBox.vue"
|
||||
import myEvent from "@/tool/myEvents.js"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const visible = ref(false)
|
||||
@@ -51,6 +52,14 @@
|
||||
if (path === activePath.value) return
|
||||
router.push(path)
|
||||
}
|
||||
onMounted(()=>{
|
||||
myEvent.add('newListing',()=>{
|
||||
visible.value = true
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
myEvent.remove('newListing')
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.seller-dashboard-index {
|
||||
|
||||
@@ -4,7 +4,7 @@ import sellerToolTipImg1 from '@/assets/images/seller/sellerToolTip-1.png'
|
||||
import sellerToolTipImg2 from '@/assets/images/seller/sellerToolTip-2.png'
|
||||
import sellerToolTipImg3 from '@/assets/images/seller/sellerToolTip-3.png'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useRouter } from 'vue-router'
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
@@ -14,9 +14,9 @@ const props = defineProps({
|
||||
const emit = defineEmits([
|
||||
'update:visible','close'
|
||||
])
|
||||
const router = useRouter()
|
||||
const {t} = useI18n()
|
||||
let data = reactive({
|
||||
visible: props.visible,
|
||||
stepList: [
|
||||
{
|
||||
img: sellerToolTipImg1,
|
||||
@@ -44,6 +44,12 @@ const cleardata = ()=>{
|
||||
emit('close', data.showAgain)
|
||||
}
|
||||
|
||||
const getStarted = ()=>{
|
||||
emit('update:visible', false)
|
||||
router.push({path:'/home/seller/myListings/select'})
|
||||
}
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
@@ -55,7 +61,7 @@ const { showAgain } = toRefs(data);
|
||||
<div ref="toolTipBoxRef" class="toolTipBox" v-if="visible">
|
||||
<a-modal
|
||||
class="collection generalModel"
|
||||
v-model:visible="data.visible"
|
||||
v-model:visible="props.visible"
|
||||
:footer="null"
|
||||
:get-container="() => toolTipBoxRef"
|
||||
width="126.2rem"
|
||||
@@ -105,7 +111,7 @@ const { showAgain } = toRefs(data);
|
||||
{{t('SellerToolTip.showAgain')}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="gallery_btn" @click="cleardata()">
|
||||
<div class="gallery_btn" @click="getStarted">
|
||||
{{t('SellerToolTip.GetStarted')}}
|
||||
<i class="fi fi-rr-arrow-small-right"></i>
|
||||
</div>
|
||||
@@ -116,9 +122,9 @@ const { showAgain } = toRefs(data);
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.toolTipBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: relative;
|
||||
:deep(.generalModel){
|
||||
height: auto;
|
||||
.ant-modal-body{
|
||||
|
||||
Reference in New Issue
Block a user