feats

src/pages/bk1/pg2.vue

@@ -2,19 +2,20 @@
   <div class="page pg-bg bk-pg2">
     <div class="content">
       <div class="header-img">
-        <img src="/images/bk1/pg2/header.png" alt="">
+        <img src="/images/bk1/pg2/header.png" alt />
         <div ref="flowerRef" class="flower" />
       </div>
-      <br>
-      <img class="badge-img" src="/images/bk1/pg2/badge.png" alt="">
+      <br />
+      <img class="badge-img" src="/images/bk1/pg2/badge.png" alt />
 
       <p class="txt animate__animated animate__fadeIn">
-        2014年，<br>
-        南京广电集团以“紫金草”为原型，<br>
-        制作紫金草徽章发放给市民。<br>
-        9年来，20万人加入“紫金草行动”，<br>
-        把紫金草徽章佩戴在离心脏最近的地方。<br>
-        在2亿人心中，和平的愿景被播撒。<br>
+        2014年，
+        <br />南京广电集团以“紫金草”为原型，
+        <br />制作紫金草徽章发放给市民。
+        <br />9年来，20万人加入“紫金草行动”，
+        <br />把紫金草徽章佩戴在离心脏最近的地方。
+        <br />在2亿人心中，和平的愿景被播撒。
+        <br />
       </p>
     </div>
 
@@ -24,35 +25,34 @@
 </template>
 
 <script setup>
-  import { computed, onMounted, ref } from 'vue';
-  import Dot from './Dot.vue';
-  import FlipIcon from './FlipIcon.vue';
-  import useSerial from './useSerial';
+import { computed, onMounted, ref } from 'vue'
+import Dot from './Dot.vue'
+import FlipIcon from './FlipIcon.vue'
+import useSerial from './useSerial'
 
-  const props = defineProps({
-    active: Boolean,
-  });
+const props = defineProps({
+  active: Boolean
+})
 
-  const flowerRef = ref();
-  const ready = computed(() => props.active);
+const flowerRef = ref()
+const ready = computed(() => props.active)
 
-  console.log('-----<>', ready);
-  
-  useSerial((t) => {
-    const maxHeight = 11200;
-    const rawHeight = 700;
-    const flower = flowerRef.value;
-    const height = flower.offsetHeight;
-    const pos = t * rawHeight;
+console.log('-----<>', ready)
 
-    const backgroundPosition = `0 -${pos * height / rawHeight}px`;
-    flower.style.backgroundPosition = backgroundPosition;
+useSerial((t) => {
+  const maxHeight = 11200
+  const rawHeight = 700
+  const flower = flowerRef.value
+  const height = flower.offsetHeight
+  const pos = t * rawHeight
 
-    if (pos >= (maxHeight - rawHeight)) {
-      return true;
-    }
-  }, ready);
+  const backgroundPosition = `0 -${(pos * height) / rawHeight}px`
+  flower.style.backgroundPosition = backgroundPosition
 
+  if (pos >= maxHeight - rawHeight) {
+    return true
+  }
+}, ready)
 </script>
 
 <style lang="less" scoped>
@@ -77,7 +77,7 @@
         left: calc(50% - 20vw);
         top: 0;
         background-image: url(/images/bk1/flower.png);
-        background-repeat:no-repeat;
+        background-repeat: no-repeat;
         background-position: 0 0;
         background-size: 100% auto;
       }

src/pages/pg2-2/index.vue

@@ -8,11 +8,12 @@
         85年前，
         <br />日本侵略者制造了惨绝人寰的南京大屠杀，
         <br />30多万生灵涂炭。
+        <br />战后的紫金山废墟下，片片紫色小花密密开放。
         <br />
       </p>
     </div>
     <div class="bk-pd content">
-      <img src="/images/pg2-2/废墟.png" />
+      <img class="ruins-img" src="/images/pg2-2/废墟.png" />
     </div>
     <div class="bk-pd content">
       <p class="txt">
@@ -21,6 +22,7 @@
         <br />并取名“紫金草”。
         <br />在他的眼中，当年的紫金山上，
         <br />每一朵花就是一个在战争中丧生的灵魂。
+        <br />
         <br />此后几十年，这名军医和家人
         <br />在各地播种紫金草悼念亡灵，
         <br />反对战争，呼吁和平。
@@ -28,7 +30,7 @@
       </p>
     </div>
     <div class="bk-pd content">
-      <img src="/images/pg2-2/色相饱和度2拷贝.png" />
+      <img class="cp1-img" src="/images/pg2-2/色相饱和度2拷贝.png" />
     </div>
     <div class="bk-pd content">
       <p class="txt">
@@ -37,6 +39,7 @@
         <br />蕴含着无穷的草根力量，
         <br />寄托了对战争的反省和对和平的祈愿。
         <br />“紫金草行动”由此而来。
+        <br />
         <br />小小紫金草，悠悠寄哀思。
         <br />让和平中长大的年轻人保持“痛”感，
         <br />让更多的人主动追问、不断提起那段历史，
@@ -46,7 +49,7 @@
       </p>
     </div>
     <div class="bk-pd content">
-      <img src="/images/pg2-2/Flag_mockup_拷贝.png" />
+      <img class="cp2-img" src="/images/pg2-2/Flag_mockup_拷贝.png" />
     </div>
     <div class="bk-pd content">
       <p class="txt">
@@ -61,19 +64,46 @@
       </p>
     </div>
     <div class="bk-pd content">
-      <img src="/images/pg2-2/紫金草徽章拷贝3.png" />
+      <img class="cp3-img" src="/images/pg2-2/紫金草徽章拷贝3.png" />
     </div>
   </div>
 </template>
 
 <style lang="less" scoped>
-.bk-pg {
+.pg2-2 {
   .content {
     text-align: center;
+    .head-img {
+      margin: 1em auto;
+      width: 74%;
+      display: inline-block;
+    }
   }
-  .head-img {
-    width: 24vw;
-    height: 24vw;
+  .content {
+    .ruins-img {
+      width: 84%;
+      display: inline-block;
+    }
+  }
+  .content {
+    .cp1-img {
+      width: 20%;
+      height: 50%;
+      display: inline-block;
+    }
+  }
+  .content {
+    .cp2-img {
+      width: 84%;
+      display: inline-block;
+    }
+  }
+  .content {
+    .cp3-img {
+      margin: 1em auto;
+      width: 38%;
+      display: inline-block;
+    }
   }
 }
 .txt {