卖家控制台弹窗提示页面
This commit is contained in:
X1627315083@163.com
@@ -15,14 +15,17 @@
|
||||
<div class="view">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<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'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const visible = ref(false)
|
||||
const list = ref([
|
||||
{
|
||||
icon: "seller-brandProfile",
|
||||
|
||||
265
src/views/SellerDashboard/toolTipBox.vue
Normal file
265
src/views/SellerDashboard/toolTipBox.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import sellerToolTipImg1 from '@/assets/images/sellerToolTip/sellerToolTip-1.png'
|
||||
import sellerToolTipImg2 from '@/assets/images/sellerToolTip/sellerToolTip-2.png'
|
||||
import sellerToolTipImg3 from '@/assets/images/sellerToolTip/sellerToolTip-3.png'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:visible','close'
|
||||
])
|
||||
const {t} = useI18n()
|
||||
let data = reactive({
|
||||
visible: props.visible,
|
||||
stepList: [
|
||||
{
|
||||
img: sellerToolTipImg1,
|
||||
title: t('SellerToolTip.step1Title'),
|
||||
info: t('SellerToolTip.step1Info'),
|
||||
},{
|
||||
img: sellerToolTipImg2,
|
||||
title: t('SellerToolTip.step2Title'),
|
||||
info: t('SellerToolTip.step2Info'),
|
||||
},{
|
||||
img: sellerToolTipImg3,
|
||||
title: t('SellerToolTip.step3Title'),
|
||||
info: t('SellerToolTip.step3Info'),
|
||||
},{
|
||||
title: t('SellerToolTip.step4Title'),
|
||||
info: t('SellerToolTip.step4Info'),
|
||||
}
|
||||
],
|
||||
showAgain: false,
|
||||
})
|
||||
let toolTipBoxRef = ref(null)
|
||||
|
||||
const cleardata = ()=>{
|
||||
emit('update:visible', false)
|
||||
emit('close', data.showAgain)
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const { showAgain } = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div ref="toolTipBoxRef" class="toolTipBox" v-if="visible">
|
||||
<a-modal
|
||||
class="collection generalModel"
|
||||
v-model:visible="data.visible"
|
||||
:footer="null"
|
||||
:get-container="() => toolTipBoxRef"
|
||||
width="126.2rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="false"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cleardata()">
|
||||
<SvgIcon name="sellerToolTipClose" size="30"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="titleBox">
|
||||
<div class="title">
|
||||
{{t('SellerToolTip.title')}}
|
||||
</div>
|
||||
<div class="info">
|
||||
{{t('SellerToolTip.titleInfo')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stepBox">
|
||||
<div class="step" v-for="(item, index) in data.stepList" :key="index" :class="{'active': index === 2}">
|
||||
<div class="stepNum">
|
||||
<div class="num">
|
||||
{{index}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
{{item.title}}
|
||||
</div>
|
||||
<div class="info">
|
||||
{{item.info}}
|
||||
</div>
|
||||
<div class="imgBox" v-if="item.img">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="showAgain">
|
||||
<label>
|
||||
<input type="checkbox" v-model="showAgain">
|
||||
{{t('SellerToolTip.showAgain')}}
|
||||
</label>
|
||||
</div>
|
||||
<div class="gallery_btn" @click="cleardata()">
|
||||
{{t('SellerToolTip.GetStarted')}}
|
||||
<i class="fi fi-rr-arrow-small-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.toolTipBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
:deep(.generalModel){
|
||||
height: auto;
|
||||
.ant-modal-body{
|
||||
padding: 6.2rem 8rem;
|
||||
.generalModel_btn{
|
||||
.generalModel_closeIcon{
|
||||
transform: translate(0%, 0%);
|
||||
top: 4rem;
|
||||
right: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.titleBox{
|
||||
margin-bottom: 5.2rem;
|
||||
.title{
|
||||
font-size: 3.2rem;
|
||||
font-weight: 400;
|
||||
color:#000000;
|
||||
line-height: 130%;
|
||||
font-family: 'pingfang_semibold';
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.info{
|
||||
font-weight: 400;
|
||||
font-size: 2.4rem;
|
||||
line-height: 130%;
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
.stepBox{
|
||||
margin: 0 1.3rem;
|
||||
display: flex;
|
||||
gap: 7rem;
|
||||
margin-bottom: 9.7rem;
|
||||
.step{
|
||||
--itemWidth: 21.2rem;
|
||||
--textColor: #585858;
|
||||
--indexBgColor: #f6f6f6;
|
||||
--indexTextColor: #000000;
|
||||
--indexBorderColor: #C7C7C7;
|
||||
&:hover{
|
||||
--textColor: #000;
|
||||
--indexBgColor: #000;
|
||||
--indexTextColor: #fff;
|
||||
--indexBorderColor: #000;
|
||||
}
|
||||
width: var(--itemWidth);
|
||||
> div{
|
||||
transition: all .3s;
|
||||
}
|
||||
&.active{
|
||||
--itemWidth: 23.2rem;
|
||||
}
|
||||
.stepNum{
|
||||
width: 6.4rem;
|
||||
height: 6.4rem;
|
||||
margin-bottom: 2.6rem;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
font-size: 2.8rem;
|
||||
> .num{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: var(--indexTextColor);
|
||||
background-color: var(--indexBgColor);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--indexBorderColor);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all .3s;
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: calc(var(--itemWidth) + 8px);
|
||||
height: 1.5px;
|
||||
background-color: #C7C7C7;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate(0%,-50%);
|
||||
}
|
||||
}
|
||||
&:last-child .stepNum::after{
|
||||
display: none;
|
||||
}
|
||||
.title{
|
||||
font-weight: 500;
|
||||
font-size: 2.4rem;
|
||||
line-height: 130%;
|
||||
color: var(--textColor);
|
||||
margin-bottom: 2.6rem;
|
||||
}
|
||||
.info{
|
||||
font-weight: 400;
|
||||
font-size: 1.8rem;
|
||||
line-height: 120%;
|
||||
letter-spacing: -1%;
|
||||
color: var(--textColor);
|
||||
margin-bottom: 2.6rem;
|
||||
}
|
||||
.imgBox{
|
||||
width: 21.2rem;
|
||||
img{
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
display: flex;
|
||||
margin: 0 1.3rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.showAgain{
|
||||
> label{
|
||||
cursor: pointer;
|
||||
font-family: pingfang_regular;
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
line-height: 150%;
|
||||
letter-spacing: -1%;
|
||||
display: flex;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
}
|
||||
> .gallery_btn{
|
||||
padding: 0 3rem;
|
||||
display: flex;
|
||||
> i{
|
||||
margin-left: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user