fix

public/css/pingfang.css

@@ -13,6 +13,11 @@
 	font-weight: normal;
 	src: url('pingfang/pingfang-regular.ttf') format('truetype');
 }
+@font-face {
+	font-family: 'pingfang_heavy';
+	font-weight: normal;
+	src: url('pingfang/pingfang-heavy.ttf') format('truetype');
+}
 @font-face {
 	font-family: 'satoshi_light';
 	font-weight: normal;

src/views/HomeMain.vue

@@ -2132,7 +2132,7 @@ export default defineComponent({
       }
       > .routerView {
         position: relative;
-        overflow: hidden;
+        overflow-y: hidden;
         flex: 1;
         display: flex;
         > .router {

src/views/SellerDashboard/MyListings/main/content.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { VueDraggable } from "vue-draggable-plus"
+
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+	showDrafts: false,
+})
+const list = ref([
+	{ id: "1" },
+	{ id: "2" },
+	{ id: "3" },
+	{ id: "4" },
+	{ id: "5" },
+	{ id: "6" },
+	{ id: "7" },
+	{ id: "8" },
+	{ id: "9" },
+	{ id: "9" },
+	{ id: "9" },
+	{ id: "9" },
+	{ id: "9" },
+	{ id: "9" },
+	{ id: "10" }
+])
+const list2 = ref([
+	{ id: "1" },
+	{ id: "2" },
+	{ id: "3" },
+	{ id: "4" },
+	{ id: "5" },
+	{ id: "6" },
+	{ id: "7" },
+	{ id: "8" },
+	{ id: "9" },
+	{ id: "10" }
+])
+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) => {}
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const { showDrafts } = toRefs(data);
+</script>
+<template>
+	<div class="listings">
+		<div class="listingsBox listingsBox1">
+			<div class="box">
+				<div class="title">
+					<div class="left">
+						<i class="fi fi-rs-comments"></i>
+						<span>Active Listings</span>
+					</div>
+					<div class="right">
+
+					</div>
+				</div>
+				<VueDraggable
+					v-model="list"
+					class="list"
+					v-bind="config"
+					:group="{
+						name: 'sortable',
+						pull: false,
+						put: true
+					}"
+				>
+					<div class="item" v-for="v in list" :key="v.id" :draging="true">
+						{{ v.id }}
+					</div>
+				</VueDraggable>
+			</div>
+			<div class="openOrCloseDrafts" :class="{'active': showDrafts}" @click="showDrafts = !showDrafts">
+				<span class="icon iconfont icon-xiala"></span>
+			</div>
+		</div>
+		<!-- <div class="listingsBox listingsBox2" :class="{'active': showDrafts}">
+			<div class="box">
+				<VueDraggable
+					v-model="list2"
+					class="list"
+					v-bind="config"
+					:group="{
+						name: 'sortable',
+						pull: true,
+						put: true
+					}"
+				>
+					<div class="item" v-for="v in list" :key="v.id" :draging="true">
+						{{ v.id }}
+					</div>
+				</VueDraggable>
+			</div>
+		</div> -->
+	</div>
+</template>
+<style lang="less" scoped>
+	.listings{
+		flex: 1;
+		position: relative;
+		display: flex;
+		gap: 2rem;
+		.listingsBox{
+			background-color: #f9fafa;
+			border-radius: 2rem;
+			position: relative;
+			display: flex;
+			.box{
+				width: 100%;
+				padding: 2.4rem 4rem;
+				padding-bottom: 0;
+				flex-direction: column;
+				flex: 1;
+				> .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-wrap: wrap;
+					gap: 20px;
+					.item{
+						width: 197px;
+						height: 249px;
+						border-radius: 20px;
+						border: 1.5px solid #C7C7C7;
+						&:hover{
+							border: 2px solid #000000;
+						}
+					}
+				}
+			}
+		}
+		.listingsBox1{
+			flex: 1;
+			.box{
+				.list{
+					justify-content: center;
+				}
+			}
+
+		}
+		.listingsBox2{
+			width: 48.8rem;
+			transition: all .3s;
+			overflow: hidden;
+			&.active{
+				width: 0;
+			}
+			.box{
+				width: 48.8rem;
+			}
+		}
+		.openOrCloseDrafts{
+			position: absolute;
+			width: 3.4rem;
+			height: 8rem;
+			border-top-right-radius: 2rem;
+			border-bottom-right-radius: 2rem;
+			border-width: 1.5px, 1.5px, 1.5px, 0px;
+			border-style: solid;
+			border-color: #000000;
+			right: 1.5px;
+			top: 50%;
+			transform: translate(100%,-50%);
+			cursor: pointer;
+			transition: all 0.3s ease-in-out;
+			border-left: none;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			background-color: #fff;
+			z-index: 2;
+			> span{
+				transform: rotate(-90deg);
+				transition: all .3s;
+			}
+			&.active{
+				> span{
+					transform: rotate(90deg);
+				}
+			}
+			&:hover{
+				width: 4.5rem;
+			}
+		}
+	}
+</style>

src/views/SellerDashboard/MyListings/main/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import sellerHeader from "../../seller-header.vue"
+import sellerContent from "./content.vue"
 
 //const props = defineProps({
 //})
@@ -31,21 +32,20 @@ const {} = toRefs(data);
 			</template>
 		</seller-header>
 		<div class="content">
-			123122222s
+			<sellerContent></sellerContent>
 		</div>
 	</div>
 </template>
 <style scoped lang="less">
 	.myListings-seller {
-		width: 100%;
+		flex: 1;
-		height: 100%;
+		// overflow: hidden;
-		overflow: hidden;
 		position: relative;
 		display: flex;
 		flex-direction: column;
 		.button {
 			width: 16rem;
-			line-height: 6rem;
+			height: 6rem;
 			border-radius: 4rem;
 			display: flex;
 			border: 1.5px solid #000000;
@@ -73,7 +73,7 @@ const {} = toRefs(data);
 		> .content {
 			margin-top: 2rem;
 			flex: 1;
-			overflow: hidden;
+			display: flex;
 		}
 	}
 </style>

src/views/SellerDashboard/toolTipBox.vue

@@ -139,7 +139,7 @@ const { showAgain } = toRefs(data);
 				font-weight: 400;
 				color:#000000;
 				line-height: 130%;
-				font-family: 'pingfang_semibold';
+				font-family: pingfang_heavy;
 				margin-bottom: 1.2rem;
 			}
 			.info{
@@ -214,6 +214,7 @@ const { showAgain } = toRefs(data);
 					font-size: 2.4rem;
 					line-height: 130%;
 					color: var(--textColor);
+					font-family: pingfang_heavy;
 					margin-bottom: 2.6rem;
 				}
 				.info{