lisenzhou 2 years ago
parent
commit
34b6056433

BIN
public/images/pg2/cloud-left.png View File


BIN
public/images/pg2/cloud-right.png View File


BIN
public/images/pg2/flower/1-1.png View File


BIN
public/images/pg2/flower/1-2.png View File


BIN
public/images/pg2/flower/1-3.png View File


BIN
public/images/pg2/flower/1-4.png View File


BIN
public/images/pg2/flower/右-小.png View File


BIN
public/images/pg2/flower/左-小.png View File


BIN
public/images/pg2/footer.png View File


BIN
public/images/pg2/mountain.png View File


BIN
public/images/pg2/persons.png View File


BIN
public/images/pg2/ruins-bak.png View File


BIN
public/images/pg2/ruins.png View File


BIN
public/images/pg2/stele.png View File


BIN
public/images/pg2/story.png View File


+ 1
- 55
src/pages/pg2/index.vue View File

2
   <div class="page pg-bg pg2" parallax ref="pgRef">
2
   <div class="page pg-bg pg2" parallax ref="pgRef">
3
     <div class="bg">
3
     <div class="bg">
4
       <div>
4
       <div>
5
-        <!-- <img src="/images/pg2/content-bg.png" parallax-offset='200' alt="" /> -->
6
         <Animate
5
         <Animate
7
           comp="img"
6
           comp="img"
8
           name="animate__fadeInLeft"
7
           name="animate__fadeInLeft"
11
         />
10
         />
12
       </div>
11
       </div>
13
     </div>
12
     </div>
14
-    <!-- <Cloud class="cloud abs" /> -->
15
     <div class="content">
13
     <div class="content">
16
       <div>
14
       <div>
17
         <Animate
15
         <Animate
22
           delay="1000ms"
20
           delay="1000ms"
23
           :ready="show"
21
           :ready="show"
24
         />
22
         />
25
-        <!-- <img class="year" src="/images/pg2/1939年.png" alt="" /> -->
26
       </div>
23
       </div>
27
-      <!-- 1939年 -->
28
       <div>
24
       <div>
29
-        <!-- <img class="text1" src="/images/pg2/text1.png" alt="" /> -->
30
         <Animate
25
         <Animate
31
           class="text1"
26
           class="text1"
32
           comp="img"
27
           comp="img"
45
           delay="3000ms"
40
           delay="3000ms"
46
           :ready="show"
41
           :ready="show"
47
         />
42
         />
48
-        <!-- <img class="text2" src="/images/pg2/text2.png" alt="" /> -->
49
       </div>
43
       </div>
50
-      <!-- </Animate> -->
51
-      <!-- <Animate
52
-        @click="onClick"
53
-        class="story"
54
-        comp="img"
55
-        name="animate__fadeInDown"
56
-        delay="600ms"
57
-        src="./images/pg2/story.png"
58
-        alt
59
-        :ready="show"
60
-      /> -->
44
+
61
     </div>
45
     </div>
62
 
46
 
63
     <div class="groups abs">
47
     <div class="groups abs">
83
       了解故事
67
       了解故事
84
       <img src="/images/pg2/箭头-右.png" alt />
68
       <img src="/images/pg2/箭头-右.png" alt />
85
     </div>
69
     </div>
86
-    <!-- <img class="footer abs" src="/images/pg2/footer.png" alt /> -->
87
-
88
-    <!-- <div class="flower abs">
89
-      <Animate class="flower1 abs" :comp="Flower1" :name="flowerAnimate.left" :ready="show" />
90
-      <Animate class="flower2 abs" :comp="Flower2" :name="flowerAnimate.right" :ready="show" />
91
-      <Animate class="flower3 abs" :comp="Flower3" :name="flowerAnimate.left" :ready="show" />
92
-    </div> -->
93
   </div>
70
   </div>
94
 </template>
71
 </template>
95
 
72
 
140
 <style lang="less" scoped>
117
 <style lang="less" scoped>
141
 .pg2 {
118
 .pg2 {
142
   overflow: hidden;
119
   overflow: hidden;
143
-  // margin-top: -80px;
144
   .bg {
120
   .bg {
145
     position: absolute;
121
     position: absolute;
146
     z-index: 0;
122
     z-index: 0;
147
     width: 50%;
123
     width: 50%;
148
-    // height: 100%;
149
     left: 0;
124
     left: 0;
150
     top: 0;
125
     top: 0;
151
     & > div {
126
     & > div {
153
     }
128
     }
154
   }
129
   }
155
 
130
 
156
-  .bell {
157
-    top: 30px;
158
-    right: 30px;
159
-  }
160
-
161
-  .cloud {
162
-    top: 0;
163
-    left: 0;
164
-    width: 100vw;
165
-  }
166
-
167
-  .hill {
168
-    top: 30vh;
169
-    z-index: 2;
170
-  }
171
-
172
   .content {
131
   .content {
173
     z-index: 10;
132
     z-index: 10;
174
     width: 80vw;
133
     width: 80vw;
207
       position: relative;
166
       position: relative;
208
     }
167
     }
209
 
168
 
210
-    .persons {
211
-      z-index: 3;
212
-      position: absolute;
213
-      bottom: -50%;
214
-    }
215
-
216
     .ruins {
169
     .ruins {
217
       z-index: 2;
170
       z-index: 2;
218
       position: relative;
171
       position: relative;
219
     }
172
     }
220
-
221
-    img {
222
-      filter: gray;
223
-    }
224
   }
173
   }
225
   .flower1 {
174
   .flower1 {
226
     position: absolute;
175
     position: absolute;
227
     z-index: 20;
176
     z-index: 20;
228
     width: 50%;
177
     width: 50%;
229
-    // height: 100%;
230
     left: 50px;
178
     left: 50px;
231
     top: 500px;
179
     top: 500px;
232
     & > div {
180
     & > div {
239
   .flower2 {
187
   .flower2 {
240
     position: absolute;
188
     position: absolute;
241
     z-index: 20;
189
     z-index: 20;
242
-
243
-    // height: 100%;
244
     right: 0;
190
     right: 0;
245
     top: 250px;
191
     top: 250px;
246
     img {
192
     img {