MiniProgramPopup.vue
1.52 KB
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
<template>
<div id="mini_program">
<img src="../assets/success.png" alt="">
<p class="title">激活成功</p>
<p class="content">请点击下方按钮直接进入<br>（学事通升学汇志愿填报系统）登录</p>
<div class="btn_box">
<p class="text">点击进入</p>
<wx-open-launch-weapp id="launch-btn" username="gh_c0f904a5ee0c" path="pages/index/index?type=zkedt">
<script type="text/wxtag-template">
<style>.mini_btn { width:500px;height:500px;background:transparent;border:0; }</style>
<button class="mini_btn"></button>
</script>
</wx-open-launch-weapp>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
#mini_program {
background: #fff;
border-radius: 10px;
padding: 60px 40px;
img {
width: 342px;
display: block;
margin: 0 auto;
}
.title {
font-size: 40px;
font-weight: bold;
text-align: center;
padding: 20px 0;
color: rgb(8, 130, 250);
}
.content {
white-space: nowrap;
font-size: 32px;
text-align: center;
line-height: 50px;
padding: 40px 0;
}
.btn_box {
width: 300px;
height: 100px;
border-radius: 50px;
background: rgb(8, 130, 250);
display: block;
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 1;
.text {
font-size: 4.3vw;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
}
}
</style>