|
@@ -4,7 +4,7 @@
|
|
<div class="nav-icons">
|
|
<div class="nav-icons">
|
|
<i v-if="showNavIcons" class="icon-menu" @click="showMenu = true"></i>
|
|
<i v-if="showNavIcons" class="icon-menu" @click="showMenu = true"></i>
|
|
<router-link class="icon-logo" to="/"></router-link>
|
|
<router-link class="icon-logo" to="/"></router-link>
|
|
- <i v-if="showNavIcons" class="icon-mine" @click="onClickMine"></i>
|
|
|
|
|
|
+ <i v-if="showNavIcons" class="icon-mine" @click.stop="onClickMine"></i>
|
|
</div>
|
|
</div>
|
|
<transition
|
|
<transition
|
|
v-if="showNavIcons"
|
|
v-if="showNavIcons"
|
|
@@ -35,7 +35,7 @@
|
|
</transition>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
<div v-if="showNavIcons" class="nav-bar-right">
|
|
<div v-if="showNavIcons" class="nav-bar-right">
|
|
- <div class="user pointer flex-ac" @click="onClickMine">
|
|
|
|
|
|
+ <div class="user pointer flex-ac" @click.stop="onClickMine">
|
|
<template v-if="state.userInfo">
|
|
<template v-if="state.userInfo">
|
|
<i class="icon-mine"></i>
|
|
<i class="icon-mine"></i>
|
|
<span class="user-name">{{
|
|
<span class="user-name">{{
|
|
@@ -64,7 +64,7 @@
|
|
<i class="close" @click="showMine = false"></i>
|
|
<i class="close" @click="showMine = false"></i>
|
|
</div>
|
|
</div>
|
|
<div class="nav-menu-body">
|
|
<div class="nav-menu-body">
|
|
- <div class="info">
|
|
|
|
|
|
+ <div class="info" @click.stop>
|
|
<div class="p1">
|
|
<div class="p1">
|
|
<p class="name">Hi, {{ state.userInfo.name }}</p>
|
|
<p class="name">Hi, {{ state.userInfo.name }}</p>
|
|
<p class="intro">
|
|
<p class="intro">
|
|
@@ -83,21 +83,25 @@
|
|
<strong class="primary">Buy now ></strong>
|
|
<strong class="primary">Buy now ></strong>
|
|
</div>
|
|
</div>
|
|
<div class="swiper">
|
|
<div class="swiper">
|
|
- <div
|
|
|
|
- v-for="(item, index) of state.userInfo.orders"
|
|
|
|
- :key="index"
|
|
|
|
- class="swiper-item"
|
|
|
|
- >
|
|
|
|
- <div class="service">
|
|
|
|
- <div class="service-title">
|
|
|
|
- <i class="service-icon icon-lite"></i>
|
|
|
|
- <div class="service-type">{{ item.product_name }}</div>
|
|
|
|
- <div class="service-period">
|
|
|
|
- {{ item.start_time }} to {{ item.end_time }}
|
|
|
|
|
|
+ <div class="swiper-wrapper">
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item, index) of state.userInfo.orders"
|
|
|
|
+ :key="index"
|
|
|
|
+ class="swiper-slide"
|
|
|
|
+ >
|
|
|
|
+ <div class="service">
|
|
|
|
+ <div class="service-title">
|
|
|
|
+ <i class="service-icon icon-lite fls0"></i>
|
|
|
|
+ <div class="service-type fls0">
|
|
|
|
+ {{ item.product_name }}
|
|
|
|
+ </div>
|
|
|
|
+ <div class="service-period">
|
|
|
|
+ {{ item.start_time }} to {{ item.end_time }}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="service-model tac">{{ item.phone_info }}</div>
|
|
|
|
+ <div class="service-code tac">{{ item.phone_imei }}</div>
|
|
</div>
|
|
</div>
|
|
- <div class="service-model tac">{{ item.phone_info }}</div>
|
|
|
|
- <div class="service-code tac">{{ item.phone_imei }}</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -105,7 +109,7 @@
|
|
<i
|
|
<i
|
|
v-for="n of state.userInfo.orders.length"
|
|
v-for="n of state.userInfo.orders.length"
|
|
:key="n"
|
|
:key="n"
|
|
- class="dot active"
|
|
|
|
|
|
+ :class="['dot', { active: slideIdx === n - 1 }]"
|
|
></i>
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -149,10 +153,12 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import { ref, watch } from 'vue'
|
|
|
|
|
|
+import { ref, watch, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { state, logout } from '@/store'
|
|
import { state, logout } from '@/store'
|
|
import Dialog from '@/components/dialog'
|
|
import Dialog from '@/components/dialog'
|
|
|
|
+import Swiper from 'swiper'
|
|
|
|
+import 'swiper/css'
|
|
|
|
|
|
interface Props {
|
|
interface Props {
|
|
showNavIcons?: boolean
|
|
showNavIcons?: boolean
|
|
@@ -165,6 +171,21 @@ const router = useRouter()
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
const showMenu = ref(false)
|
|
const showMenu = ref(false)
|
|
const showMine = ref(false)
|
|
const showMine = ref(false)
|
|
|
|
+const slideIdx = ref(0)
|
|
|
|
+
|
|
|
|
+document.addEventListener('click', () => (showMine.value = false))
|
|
|
|
+
|
|
|
|
+onMounted(() => {
|
|
|
|
+ new Swiper('.swiper', {
|
|
|
|
+ slidesPerView: 1.08,
|
|
|
|
+ spaceBetween: 15,
|
|
|
|
+ on: {
|
|
|
|
+ slideChange(swiper) {
|
|
|
|
+ slideIdx.value = swiper.realIndex
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ })
|
|
|
|
+})
|
|
|
|
|
|
watch(
|
|
watch(
|
|
() => route.fullPath,
|
|
() => route.fullPath,
|
|
@@ -453,8 +474,8 @@ async function signOut() {
|
|
}
|
|
}
|
|
|
|
|
|
.info {
|
|
.info {
|
|
- margin: 20px auto 24px;
|
|
|
|
- width: 678px;
|
|
|
|
|
|
+ margin: 20px 36px 24px;
|
|
|
|
+ // width: 678px;
|
|
}
|
|
}
|
|
.p1 {
|
|
.p1 {
|
|
padding: 48px 0 0 50px;
|
|
padding: 48px 0 0 50px;
|
|
@@ -516,16 +537,17 @@ async function signOut() {
|
|
|
|
|
|
.swiper {
|
|
.swiper {
|
|
padding-left: 44px;
|
|
padding-left: 44px;
|
|
|
|
+ padding-right: 36px;
|
|
}
|
|
}
|
|
.service {
|
|
.service {
|
|
padding: 26px 18px;
|
|
padding: 26px 18px;
|
|
- width: 526px;
|
|
|
|
|
|
+ // width: 526px;
|
|
height: 266px;
|
|
height: 266px;
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
&-title {
|
|
&-title {
|
|
display: flex;
|
|
display: flex;
|
|
- align-items: center;
|
|
|
|
|
|
+ // align-items: center;
|
|
font-size: 28px;
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
&-icon {
|
|
&-icon {
|