Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite
This commit is contained in:
@@ -2132,7 +2132,7 @@ export default defineComponent({
|
||||
}
|
||||
> .routerView {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
> .router {
|
||||
|
||||
@@ -5,13 +5,7 @@
|
||||
<div class="title">Brand Information</div>
|
||||
<div class="tip">Share a few details to set up your seller profile</div>
|
||||
<div class="form">
|
||||
<a-form
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
layout="vertical"
|
||||
class="my-form"
|
||||
ref="formRef"
|
||||
>
|
||||
<a-form :model="formData" :rules="formRules" layout="vertical" ref="formRef">
|
||||
<a-form-item label="Store Name" name="storeName">
|
||||
<a-input
|
||||
v-model:value="formData.storeName"
|
||||
@@ -154,6 +148,7 @@
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/style/ant-from-style.less";
|
||||
.seller-apply {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -257,97 +252,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.my-form) {
|
||||
.form-group {
|
||||
display: flex;
|
||||
gap: 1.6rem;
|
||||
.ant-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 1.6rem;
|
||||
position: relative;
|
||||
.tip-length {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1.6rem;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1rem;
|
||||
color: #df2c2c;
|
||||
}
|
||||
.ant-form-item-explain,
|
||||
.ant-form-item-explain-connected {
|
||||
min-height: 0;
|
||||
}
|
||||
.ant-form-item-explain-error {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.ant-form-item-label {
|
||||
display: flex;
|
||||
padding: 0 0 0.6rem 0;
|
||||
> label {
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
|
||||
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: #df2c2c;
|
||||
font-size: 1.4rem;
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-form-item-control-input {
|
||||
.ant-input-affix-wrapper,
|
||||
textarea,
|
||||
input {
|
||||
border-radius: 1.2rem;
|
||||
border: 0.16rem solid #d1d1d1;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
padding: 1.6rem;
|
||||
&::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
margin-bottom: 0.6rem;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-input-prefix {
|
||||
width: 5.2rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
color: #000;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
border: none;
|
||||
height: 100%;
|
||||
padding: 0 1.6rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
input {
|
||||
height: 5rem;
|
||||
}
|
||||
textarea {
|
||||
height: 11rem;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
139
src/views/SellerDashboard/BrandProfile/brand-info.vue
Normal file
139
src/views/SellerDashboard/BrandProfile/brand-info.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="brand-info">
|
||||
<a-form :model="formData" :rules="isEdit ? formRules : {}" layout="vertical" ref="formRef">
|
||||
<div class="form-group">
|
||||
<a-form-item label="Store Name" name="storeName">
|
||||
<a-input
|
||||
v-model:value="formData.storeName"
|
||||
placeholder="Enter the store name"
|
||||
:maxlength="80"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
<span v-show="isEdit" class="tip-length"
|
||||
>{{ formData.storeName.length }}/80</span
|
||||
>
|
||||
</a-form-item>
|
||||
<a-form-item label="Owner’s Full Name" name="fullName">
|
||||
<a-input
|
||||
v-model:value="formData.fullName"
|
||||
placeholder="Enter store owner's full name"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<a-form-item label="Email" name="email">
|
||||
<a-input
|
||||
type="email"
|
||||
v-model:value="formData.email"
|
||||
placeholder="Enter email"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="Phone Number" name="phoneNumber">
|
||||
<a-input
|
||||
type="tel"
|
||||
v-model:value="formData.phoneNumber"
|
||||
placeholder="Enter phone number"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<a-form-item label="Portfoilo/Social Media Links">
|
||||
<a-input
|
||||
placeholder="https://"
|
||||
v-for="(v, i) in formData.links"
|
||||
:key="i"
|
||||
v-model:value="formData.links[i]"
|
||||
:readonly="!isEdit"
|
||||
>
|
||||
<template #prefix>Link {{ i + 1 }}</template>
|
||||
</a-input>
|
||||
<a-input
|
||||
placeholder="https://"
|
||||
v-model:value="newLink"
|
||||
@keyup.enter.prevent="addLink"
|
||||
v-if="isEdit"
|
||||
>
|
||||
<template #prefix>
|
||||
<span @click="addLink" style="cursor: pointer">
|
||||
<svg-icon name="seller-add" size="20" />
|
||||
</span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="Store Description" name="description">
|
||||
<a-textarea
|
||||
v-model:value="formData.description"
|
||||
placeholder="Briefly describe your design style and store features..."
|
||||
:maxlength="500"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
<span v-show="isEdit" class="tip-length"
|
||||
>{{ formData.description.length }}/500</span
|
||||
>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const formRules = {
|
||||
storeName: [{ required: true, message: "Enter the store name" }],
|
||||
fullName: [{ required: true, message: "Enter store owner's full name" }],
|
||||
email: [{ required: true, message: "Enter email" }],
|
||||
phoneNumber: [{ required: true, message: "Enter phone number" }],
|
||||
description: [{ required: true, message: "Enter store description" }]
|
||||
}
|
||||
|
||||
const formRef = ref(null)
|
||||
const formData = reactive({
|
||||
storeName: "",
|
||||
fullName: "",
|
||||
email: "",
|
||||
phoneNumber: "",
|
||||
description: "",
|
||||
links: ["", ""]
|
||||
})
|
||||
const newLink = ref("")
|
||||
const addLink = () => {
|
||||
formData.links.push(newLink.value)
|
||||
newLink.value = ""
|
||||
}
|
||||
watch(
|
||||
() => props.isEdit,
|
||||
(v) => (v ? edit() : cancel())
|
||||
)
|
||||
const edit = () => {}
|
||||
const cancel = () => {}
|
||||
const submit = async () => {
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return Promise.reject(false)
|
||||
console.log(valid)
|
||||
return valid
|
||||
}
|
||||
defineExpose({
|
||||
submit
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/style/ant-from-style.less";
|
||||
.brand-info {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
// padding: 0 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,183 @@
|
||||
<template>
|
||||
<div class="brand-profile-index">brand-profile-index</div>
|
||||
<div class="brand-profile-index">
|
||||
<div class="header">
|
||||
<div class="bg">
|
||||
<img v-if="banner" :src="banner" />
|
||||
<div v-else class="null">
|
||||
<span class="icon"><svg-icon name="seller-picture" size="60" /></span>
|
||||
<span class="tip">Your brand banner has not been set up yet.</span>
|
||||
</div>
|
||||
<button>Change Brand Banner</button>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<div class="avatar">
|
||||
<img v-if="avatar" :src="avatar" />
|
||||
<div v-else class="null">
|
||||
<svg-icon name="seller-user" size="48" />
|
||||
</div>
|
||||
<span class="icon">
|
||||
<svg-icon name="seller-camera" size="24" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<brand-info :is-edit="isEdit" ref="brandInfoRef" />
|
||||
</div>
|
||||
<div class="and-profile-footer">
|
||||
<template v-if="isEdit">
|
||||
<div class="btns">
|
||||
<button class="cancel" @click="onCancel">Cancel</button>
|
||||
<button class="submit" @click="onSubmit">Save Change</button>
|
||||
</div>
|
||||
<p class="tip">Changes will be reflected on your Stylish Parade brand page.</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="btns">
|
||||
<button class="edit" @click="onEdit">Edit</button>
|
||||
</div>
|
||||
<p class="tip"> </p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import BrandInfo from "./brand-info.vue"
|
||||
const banner = ref("http://118.31.39.42:3000/falls/5bd8065cbb396eb5a8ef0a142605139358734e57.png")
|
||||
const avatar = ref("http://118.31.39.42:3000/falls/20251024140128_10355_1.jpg")
|
||||
const isEdit = ref(false)
|
||||
const brandInfoRef = ref(null)
|
||||
const onEdit = () => {
|
||||
isEdit.value = true
|
||||
}
|
||||
const onCancel = () => {
|
||||
isEdit.value = false
|
||||
}
|
||||
const onSubmit = () => {
|
||||
brandInfoRef.value
|
||||
.submit()
|
||||
.then(() => {
|
||||
isEdit.value = false
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.seller-dashboard-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.brand-profile-index {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 8rem;
|
||||
margin: 0 7rem;
|
||||
> .header {
|
||||
position: relative;
|
||||
margin-bottom: 6rem;
|
||||
> .bg {
|
||||
position: relative;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 1.2rem;
|
||||
}
|
||||
> .null {
|
||||
width: 100%;
|
||||
height: 23rem;
|
||||
border-radius: 1.2rem;
|
||||
border: 1px dashed #b0b0b0;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .tip {
|
||||
margin-top: 1.2rem;
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
color: rgba(153, 153, 153, 0.6);
|
||||
}
|
||||
}
|
||||
> button {
|
||||
position: absolute;
|
||||
bottom: 1.6rem;
|
||||
right: 1.6rem;
|
||||
padding: 0 2.7rem;
|
||||
border-radius: 4rem;
|
||||
height: 4.5rem;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: 0.2rem 0.2rem 1.2rem 0 rgba(0, 0, 0, 0.1);
|
||||
font-family: pingfang_medium;
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .avatar {
|
||||
position: absolute;
|
||||
left: 6rem;
|
||||
bottom: -4rem;
|
||||
> img,
|
||||
> .null {
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
border-radius: 1.2rem;
|
||||
border: 0.15rem solid #919191;
|
||||
}
|
||||
> .null {
|
||||
background-color: #f2f1f1;
|
||||
}
|
||||
> .icon {
|
||||
position: absolute;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(146, 146, 146, 0.96);
|
||||
right: -1.6rem;
|
||||
bottom: -1.6rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.and-profile-footer {
|
||||
margin: 0 15rem;
|
||||
> .btns {
|
||||
margin-top: 3rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 1.6rem;
|
||||
gap: 1.3rem;
|
||||
> button {
|
||||
height: 6rem;
|
||||
border-radius: 6rem;
|
||||
padding: 0 4rem;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
font-size: 1.6rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
&:active:not(:disabled) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
> .cancel {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 0.15rem solid #000;
|
||||
}
|
||||
}
|
||||
> .tip {
|
||||
padding-right: 1.6rem;
|
||||
margin-top: 0.7rem;
|
||||
font-family: pingfang_regular;
|
||||
font-size: 1.4rem;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../seller-header.vue"
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerHeader from "../seller-header.vue"
|
||||
import sellerHeader from "../../seller-header.vue"
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
229
src/views/SellerDashboard/MyListings/main/content.vue
Normal file
229
src/views/SellerDashboard/MyListings/main/content.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<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{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
.listingsBox{
|
||||
background-color: #f9fafa;
|
||||
border-radius: 2rem;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
// overflow: hidden;
|
||||
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 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;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -12,17 +12,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<toolTipBox v-model:visible="visible" @close="()=>{}"></toolTipBox>
|
||||
<router-view></router-view>
|
||||
<toolTipBox v-model:visible="visible" @close="() => {}"></toolTipBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue"
|
||||
import { useRoute, useRouter } from "vue-router"
|
||||
import toolTipBox from './toolTipBox.vue'
|
||||
import toolTipBox from "./toolTipBox.vue"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const visible = ref(false)
|
||||
@@ -58,7 +56,6 @@
|
||||
.seller-dashboard-index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -67,6 +64,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3.6rem;
|
||||
margin-bottom: 4rem;
|
||||
> div {
|
||||
width: 18rem;
|
||||
height: 6rem;
|
||||
@@ -100,9 +98,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> .view {
|
||||
margin-top: 4rem;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<style scoped lang="less">
|
||||
.seller-header {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
min-height: 6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2.4rem;
|
||||
|
||||
@@ -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