1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
<div class="app">
<router-view v-slot="{ Component }">
<keep-alive :include="['home', 'category', 'user']">
<component :is="Component" />
</keep-alive>
</router-view>
<page-loading />
<van-popup v-model:show="show" :style="{ padding: '20px 0 50px' }">
<img class="yjbg123" src="@/static/yj.png" alt="">
<div class="yjwarp">
<var-button class="varbtn11" @click="eventBus.popupVisible = false" block>我知道了</var-button>
<var-button class="varbtn11" @click="gotoyj" block>去填写邮寄信息</var-button>
</div>
</van-popup>
<van-popup v-model:show="show1" :style="{ padding: '20px 0 50px',background:'transparent' }">
<div class="yjbg34">
<img src="@/static/active34/1.png" alt="">
<div class="yjwarp">
<img src="@/static/active34/2.png" @click="eventBus.popupVisible1 = false" alt="">
<img src="@/static/active34/3.png" @click="gotoyj" alt="">
</div>
</div>
</van-popup>
</div>
</template>
<script lang="ts" setup>
import eventBus from '@/utils/eventBus';
import PageLoading from '@/components/PageLoading.vue'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const gotoyj = ()=>{
eventBus.popupVisible = false
eventBus.popupVisible1 = false
router.push('/kpsl/cardsl')
}
const show = computed(()=>eventBus.popupVisible && route?.path != '/kpsl/cardsl')
const show1 = computed(()=>eventBus.popupVisible1 && (!['/kpsl/cardsl','/kpsl/cardActive'].includes(route?.path)))
</script>
<style lang="scss">
.yjbg123{
width: 100%;
height: auto;
}
.yjwarp{
display: flex;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
padding: 0 20px;
.varbtn11{
width: 45%;
background: #3a9256;
color: #fff;
font-size: 16px;
font-weight: 700;
}
}
.yjbg34{
position: relative;
img{
width: 100%;
height: auto;
}
.yjwarp{
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
img{
width: 45%;
}
}
}
// <div class="yjbg34">
// <img src="@/static/active34/1.png" alt="">
// <div class="yjwarp">
// <var-button class="varbtn11" @click="eventBus.popupVisible = false" block>我知道了</var-button>
// <var-button class="varbtn11" @click="gotoyj" block>去填写邮寄信息</var-button>
// </div>
// </div>
/* 移动端适配 */
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
*{
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
user-select: none;
-webkit-user-select: none;
}
.app {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
/* 适配刘海屏 */
@supports (padding-top: constant(safe-area-inset-top)) {
.app {
padding-top: constant(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
}
}
@supports (padding-top: env(safe-area-inset-top)) {
.app {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
}
</style>