初始化项目

src/components/photo.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="photo-content">
+    <div class="photo-border-box photo-01 animate__animated animate__rollIn">
+      <img :src="require('@/assets/img/IMG_1354.jpg')" />
+    </div>
+
+    <div class="text-box">
+      <p class="text-01 animate__animated animate__fadeInUp">
+        嘿！我的花子同学，生日快乐！
+      </p>
+      <p class="text-02 animate__animated animate__fadeInUp">
+        噢~还有，新年好！
+      </p>
+      <p class="text-03 animate__animated animate__fadeInUp">
+        祝愿你···
+      </p>
+      <p class="text-04 animate__animated animate__fadeInUp">
+        生活里有热汤和甜食
+      </p>
+      <p class="text-05 animate__animated animate__fadeInUp">
+        背包里有书本和远方
+      </p>
+      <p class="text-06 animate__animated animate__fadeInUp">
+        当然~
+      </p>
+      <p ref="text-07" class="text-07 animate__animated animate__fadeInUp">
+        也有我 ＞ω＜
+      </p>
+    </div>
+
+    <div class="pic-01 animate__animated animate__fadeInUp">
+      <img :src="require('@/assets/img/jiandaoshou.png')" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "photo"
+};
+</script>
+
+<style scoped lang="scss">
+.photo-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url(../assets/img/5fc7076cc7715.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.photo-border-box {
+  padding: 30px;
+  background-color: #fff;
+  box-shadow: #bbb 10px 10px 10px;
+}
+.photo-01 {
+  width: 360px;
+  height: 387px;
+  position: absolute;
+  left: 50%;
+  top: 40px;
+  margin-left: -200px;
+}
+
+.text-box {
+  width: 100%;
+  //  height: 500px;
+  position: absolute;
+  top: 550px;
+  left: 0;
+  & > p {
+    width: 100%;
+    color: #8e5e7d;
+    font-size: 30px;
+    text-align: center;
+    padding-bottom: 36px;
+  }
+}
+.text-01 {
+  animation-delay: 1.5s;
+}
+.text-02 {
+  animation-delay: 3.5s;
+}
+.text-03 {
+  animation-delay: 5.5s;
+}
+.text-04 {
+  animation-delay: 7.5s;
+}
+.text-05 {
+  animation-delay: 9.5s;
+}
+.text-06 {
+  animation-delay: 11.5s;
+}
+.text-07 {
+  animation-delay: 13.5s;
+}
+
+.pic-01 {
+  width: 270px;
+  height: 264px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  animation-delay: 15s;
+}
+</style>