|
@@ -1,10 +1,8 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div style="background-color:#c1172d; height:100vh; width:100%;">
|
3
|
|
- <div
|
4
|
|
- class="backhome"
|
5
|
|
- :style="`background:url('${backimg}');background-size: 100% auto;`"
|
6
|
|
- @click="()=>{}"
|
7
|
|
- ></div>
|
|
3
|
+ <router-link :to="{path:'/'}">
|
|
4
|
+ <div class="backhome" :style="`background:url('${backimg}');background-size: 100% auto;`"></div>
|
|
5
|
+ </router-link>
|
8
|
6
|
|
9
|
7
|
<div>
|
10
|
8
|
<div v-if="item==0">
|
|
@@ -23,7 +21,13 @@
|
23
|
21
|
</div>
|
24
|
22
|
<div v-else>
|
25
|
23
|
<!-- 挂历 -->
|
26
|
|
- <div class="main5 flex-col" :style="`background-image: url(${shaerButRed});`"></div>
|
|
24
|
+ <div class="wrap3 flex-col">
|
|
25
|
+ <img src class="subhaibao" />
|
|
26
|
+ </div>
|
|
27
|
+ <div class="wrap5 flex-col">
|
|
28
|
+ <span class="txt1" :style="`background-image: url(${pressLucky});`"></span>
|
|
29
|
+ <div class="main5 flex-col" :style="`background-image: url(${shaerButRed});`"></div>
|
|
30
|
+ </div>
|
27
|
31
|
</div>
|
28
|
32
|
</div>
|
29
|
33
|
</div>
|
|
@@ -39,7 +43,8 @@ export default {
|
39
|
43
|
backimg: require('../assets/saverShaerImg/back.png'),
|
40
|
44
|
shaerBut: require('../assets/saverShaerImg/shaerLucky.png'),
|
41
|
45
|
pressImage: require('../assets/saverShaerImg/PressImage.png'),
|
42
|
|
- shaerButRed: require('../assets/saverShaerImg/shaerLuckyRed.png')
|
|
46
|
+ shaerButRed: require('../assets/saverShaerImg/shaerLuckyRed.png'),
|
|
47
|
+ pressLucky: require('../assets/saverShaerImg/PressLucky.png')
|
43
|
48
|
}
|
44
|
49
|
},
|
45
|
50
|
|
|
@@ -119,8 +124,41 @@ export default {
|
119
|
124
|
}
|
120
|
125
|
}
|
121
|
126
|
}
|
|
127
|
+.wrap3 {
|
|
128
|
+ z-index: 13;
|
|
129
|
+ position: relative;
|
|
130
|
+ width: 98vw;
|
|
131
|
+ overflow: hidden;
|
|
132
|
+ align-self: center;
|
|
133
|
+ margin-top: 1vw;
|
|
134
|
+ margin-left: 0;
|
|
135
|
+ .subhaibao {
|
|
136
|
+ position: absolute;
|
|
137
|
+ width: 100%;
|
|
138
|
+ left: 0;
|
|
139
|
+ top: 0;
|
|
140
|
+ }
|
|
141
|
+}
|
|
142
|
+.wrap5 {
|
|
143
|
+ height: 137px;
|
|
144
|
+ background-color: #efe9e0;
|
|
145
|
+ margin-top: 19px;
|
|
146
|
+ width: 100vw;
|
|
147
|
+ justify-content: center;
|
|
148
|
+ align-items: center;
|
|
149
|
+ display: flex;
|
|
150
|
+ .txt1 {
|
|
151
|
+ background-size: 100% auto;
|
|
152
|
+ background-repeat: no-repeat;
|
|
153
|
+ width: 112px;
|
|
154
|
+ height: 18px;
|
|
155
|
+ margin-bottom: 80px;
|
|
156
|
+ }
|
|
157
|
+}
|
122
|
158
|
|
123
|
159
|
.main5 {
|
|
160
|
+ background-size: 100% auto;
|
|
161
|
+ background-repeat: no-repeat;
|
124
|
162
|
height: 48px;
|
125
|
163
|
border-radius: 8px;
|
126
|
164
|
margin-top: 11px;
|