fix
This commit is contained in:
X1627315083@163.com
@@ -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;
|
||||
|
||||
BIN
public/css/pingfang/pingfang-heavy.ttf
Normal file
BIN
public/css/pingfang/pingfang-heavy.ttf
Normal file
Binary file not shown.
@@ -2132,7 +2132,7 @@ export default defineComponent({
|
||||
}
|
||||
> .routerView {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
> .router {
|
||||
|
||||
226
src/views/SellerDashboard/MyListings/main/content.vue
Normal file
226
src/views/SellerDashboard/MyListings/main/content.vue
Normal file
@@ -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>
|
||||
@@ -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%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
// 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>
|
||||
@@ -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{
|
||||
|
||||
Reference in New Issue
Block a user