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>
|
||||
Reference in New Issue
Block a user