lisenzhou 2 years ago
parent
commit
636e508578
4 changed files with 84 additions and 35 deletions
  1. 18
    17
      src/pages/pg1/P1.vue
  2. 5
    2
      src/pages/pg1/P2.vue
  3. 14
    15
      src/pages/pg1/P3.vue
  4. 47
    1
      src/pages/pg1/index.vue

+ 18
- 17
src/pages/pg1/P1.vue View File

2
   <div class="p1-box">
2
   <div class="p1-box">
3
     <div class="content-left">
3
     <div class="content-left">
4
       <CircleImg class="main-img" :animate="animate">
4
       <CircleImg class="main-img" :animate="animate">
5
-        <img
6
-          src="/images/pg1/earth.png"
7
-          alt=""
8
-        >
5
+        <img src="/images/pg1/earth.png" alt="" />
9
       </CircleImg>
6
       </CircleImg>
10
     </div>
7
     </div>
11
-    <div class="content-right txt">      
12
-      <p class="animate__animated animate__fadeInRight" style="animation-delay: 100ms">
13
-        2014年至今 <br>
14
-        一朵紫色的小花 <br>
15
-        在全球<strong>14个国家</strong>被点亮
16
-      </p>
8
+    <div class="content-right txt">
9
+      <div :class="{pulsatebck:animate}">
10
+        <p
11
+          class="animate__animated animate__fadeInRight"
12
+          style="animation-delay: 100ms"
13
+        >
14
+          2014年至今 <br />
15
+          一朵紫色的小花 <br />
16
+          在全球<strong>14个国家</strong>被点亮
17
+        </p>
18
+      </div>
17
     </div>
19
     </div>
18
   </div>
20
   </div>
19
 </template>
21
 </template>
20
 
22
 
21
 <script setup>
23
 <script setup>
22
-  import CircleImg from './CircleImg.vue';
23
-  
24
-  const props = defineProps({
25
-    animate: Boolean
26
-  });
24
+import CircleImg from "./CircleImg.vue";
25
+
26
+const props = defineProps({
27
+  animate: Boolean,
28
+});
27
 </script>
29
 </script>
28
 
30
 
29
 <style lang="less" scoped>
31
 <style lang="less" scoped>
39
       position: relative;
41
       position: relative;
40
       z-index: 10;
42
       z-index: 10;
41
     }
43
     }
42
-
43
   }
44
   }
44
 
45
 
45
   .content-right {
46
   .content-right {
52
     align-items: center;
53
     align-items: center;
53
   }
54
   }
54
 }
55
 }
55
-</style>
56
+</style>

+ 5
- 2
src/pages/pg1/P2.vue View File

8
         >
8
         >
9
       </CircleImg>
9
       </CircleImg>
10
     </div>
10
     </div>
11
-    <div class="content-left txt">      
12
-      <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 100ms">
11
+    <div class="content-left txt">    
12
+      <div :class="{pulsatebck:animate}">
13
+        <p class="animate__animated animate__fadeInRight" style="text-align: right; animation-delay: 100ms">
13
         <strong>近20万枚</strong> <br>
14
         <strong>近20万枚</strong> <br>
14
         紫金草徽章 <br>
15
         紫金草徽章 <br>
15
         佩戴在了人们的心口
16
         佩戴在了人们的心口
16
       </p>
17
       </p>
18
+      </div>  
19
+    
17
     </div>
20
     </div>
18
   </div>
21
   </div>
19
 </template>
22
 </template>

+ 14
- 15
src/pages/pg1/P3.vue View File

2
   <div class="p3-box">
2
   <div class="p3-box">
3
     <div class="content-left">
3
     <div class="content-left">
4
       <CircleImg class="main-img" :animate="animate">
4
       <CircleImg class="main-img" :animate="animate">
5
-        <img
6
-          src="/images/pg1/peace.png"
7
-          alt=""
8
-        >
5
+        <img src="/images/pg1/peace.png" alt="" />
9
       </CircleImg>
6
       </CircleImg>
10
     </div>
7
     </div>
11
-    <div class="content-right txt">      
12
-      <p class="animate__animated animate__fadeInLeft">
13
-        在<strong>2亿人</strong>心中 <br>
14
-        和平愿景被播撒
15
-      </p>
8
+    <div class="content-right txt">
9
+      <div :class="{pulsatebck:animate}">
10
+        <p class="animate__animated animate__fadeInLeft">
11
+          在<strong>2亿人</strong>心中 <br />
12
+          和平愿景被播撒
13
+        </p>
14
+      </div>
16
     </div>
15
     </div>
17
   </div>
16
   </div>
18
 </template>
17
 </template>
19
 
18
 
20
 <script setup>
19
 <script setup>
21
-  import CircleImg from './CircleImg.vue';
22
-  
23
-  const props = defineProps({
24
-    animate: Boolean
25
-  });
20
+import CircleImg from "./CircleImg.vue";
21
+
22
+const props = defineProps({
23
+  animate: Boolean,
24
+});
26
 </script>
25
 </script>
27
 
26
 
28
 <style lang="less" scoped>
27
 <style lang="less" scoped>
50
     align-items: center;
49
     align-items: center;
51
   }
50
   }
52
 }
51
 }
53
-</style>
52
+</style>

+ 47
- 1
src/pages/pg1/index.vue View File

112
     width: 100vw;
112
     width: 100vw;
113
     z-index: 10;
113
     z-index: 10;
114
   }
114
   }
115
-
116
 </style>
115
 </style>
116
+<style lang="less">
117
+
118
+.pulsatebck {
119
+	-webkit-animation: pulsate-bck 1.5s ease-in-out 0.5s infinite both;
120
+	        animation: pulsate-bck 1.5s ease-in-out 0.5s infinite both;
121
+}
122
+  /* ----------------------------------------------
123
+ * Generated by Animista on 2022-12-8 19:45:27
124
+ * Licensed under FreeBSD License.
125
+ * See http://animista.net/license for more info. 
126
+ * w: http://animista.net, t: @cssanimista
127
+ * ---------------------------------------------- */
128
+
129
+/**
130
+ * ----------------------------------------
131
+ * animation pulsate-bck
132
+ * ----------------------------------------
133
+ */
134
+@-webkit-keyframes pulsate-bck {
135
+  0% {
136
+    -webkit-transform: scale(1);
137
+            transform: scale(1);
138
+  }
139
+  50% {
140
+    -webkit-transform: scale(0.9);
141
+            transform: scale(0.9);
142
+  }
143
+  100% {
144
+    -webkit-transform: scale(1);
145
+            transform: scale(1);
146
+  }
147
+}
148
+@keyframes pulsate-bck {
149
+  0% {
150
+    -webkit-transform: scale(1);
151
+            transform: scale(1);
152
+  }
153
+  50% {
154
+    -webkit-transform: scale(0.9);
155
+            transform: scale(0.9);
156
+  }
157
+  100% {
158
+    -webkit-transform: scale(1);
159
+            transform: scale(1);
160
+  }
161
+}
162
+</style>