feat: base page

src/views/Part2.vue

@@ -52,7 +52,7 @@ export default {
 .grid {
   width: 50%;
   margin-top: 48px;
-  margin-left: 25%;
+  margin-left: 15%;
   position: absolute;
 }
 

src/views/Part3.vue

@@ -1,6 +1,38 @@
 <template>
   <div class="container">
-    p3
+    <div class="content">
+      <div class="right">
+        <img src="../assets/p3/00.jpg" width="100%"/>
+      </div>
+
+      <div class="right">
+        <video width="100%" autoplay controls>
+          <source src="https://files.minbb.cn/video/chen-20221229-1.mp4" type="video/mp4"/>
+        </video>
+      </div>
+
+      <div class="right">
+        <el-carousel indicator-position="outside" height="500px">
+          <el-carousel-item><img src="../assets/p3/11.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p3/12.jpg" width="100%"/></el-carousel-item>
+        </el-carousel>
+      </div>
+
+      <div>
+        <el-carousel indicator-position="outside" height="300px">
+          <el-carousel-item><img src="../assets/p3/21.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p3/22.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p3/23.jpg" width="100%"/></el-carousel-item>
+        </el-carousel>
+      </div>
+
+      <div style="display: flex; justify-content: right;">
+        <img src="../assets/p3/31.jpg" width="20%"/>
+        <video width="50%" autoplay controls>
+          <source src="https://files.minbb.cn/video/chen-20221229-1.mp4" type="video/mp4"/>
+        </video>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,5 +43,12 @@ export default {
 </script>
 
 <style scoped>
+.content {
+  padding: 48px 32px 32px;
+}
 
+.right {
+  width: 50%;
+  margin-left: auto;
+}
 </style>

src/views/Part4.vue

@@ -3,9 +3,18 @@
     <div class="content">
       <img src="../assets/p4/00.jpg" width="100%"/>
 
-      <div>视频</div>
+      <div>
+        <!--        <video width="100%" autoplay controls>-->
+        <!--          <source src="https://files.minbb.cn/video/chen-20221229-1.mp4" type="video/mp4"/>-->
+        <!--        </video>-->
+        <div style="padding:50% 0 0 0;position:relative;">
+          <iframe src="https://player.vimeo.com/video/784913121?h=4ebe2a0d90&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen
+                  style="position:absolute;top:0;left:0;width:100%;height:100%;" title="堤2021 La jet&amp;eacute;e 2021"></iframe>
+        </div>
+        <!-- <script src="https://player.vimeo.com/api/player.js"></script> -->
+      </div>
 
-      <el-carousel indicator-position="outside">
+      <el-carousel indicator-position="outside" height="500px">
         <el-carousel-item><img src="../assets/p4/01.jpg" width="100%"/></el-carousel-item>
         <el-carousel-item><img src="../assets/p4/02.jpg" width="100%"/></el-carousel-item>
         <el-carousel-item><img src="../assets/p4/03.jpg" width="100%"/></el-carousel-item>
@@ -29,6 +38,13 @@ export default {
   data() {
     return {}
   },
+
+  mounted() {
+    let script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://player.vimeo.com/api/player.js';
+    document.body.appendChild(script);
+  },
 }
 </script>
 

src/views/Part5.vue

@@ -6,7 +6,7 @@
 
     <div class="right">
       <div style="margin-top: 60px;">
-        <el-carousel indicator-position="outside">
+        <el-carousel indicator-position="outside" height="500px">
           <el-carousel-item><img src="../assets/p5/01.jpg" width="100%"/></el-carousel-item>
           <el-carousel-item><img src="../assets/p5/02.jpg" width="100%"/></el-carousel-item>
           <el-carousel-item><img src="../assets/p5/03.jpg" width="100%"/></el-carousel-item>
@@ -16,7 +16,11 @@
         </el-carousel>
       </div>
 
-      <div>视频</div>
+      <div>
+        <video width="100%" autoplay controls>
+          <source src="https://files.minbb.cn/video/chen-20221229-1.mp4" type="video/mp4"/>
+        </video>
+      </div>
 
       <div>
         <img src="../assets/p5/11.png" width="50%"/>

src/views/Part6.vue

@@ -2,22 +2,22 @@
   <div class="container">
     <div id="album">
       <div class="row" id="row1">
-        <img src="../assets/p6/01.jpg" width="60%" height="200"/>
-        <img src="../assets/p6/02.jpg" width="30%" height="140" style="margin-top: auto;"/>
+        <img @click="preview($event)" src="../assets/p6/01.jpg" width="60%" height="200"/>
+        <img @click="preview($event)" src="../assets/p6/02.jpg" width="30%" height="140" style="margin-top: auto;"/>
       </div>
       <div class="row" id="row2">
-        <img src="../assets/p6/03.jpg" width="32.5%" height="160"/>
-        <img src="../assets/p6/04.jpg" width="32.5%" height="160"/>
-        <img src="../assets/p6/05.jpg" width="32.5%" height="160"/>
+        <img @click="preview($event)" src="../assets/p6/03.jpg" width="32.5%" height="160"/>
+        <img @click="preview($event)" src="../assets/p6/04.jpg" width="32.5%" height="160"/>
+        <img @click="preview($event)" src="../assets/p6/05.jpg" width="32.5%" height="160"/>
       </div>
       <div class="row" id="row3">
-        <img src="../assets/p6/06.jpg" width="30%" height="140" style="margin-left: auto;"/>
-        <img src="../assets/p6/07.jpg" width="60%" height="200" style="margin-left: 0;"/>
+        <img @click="preview($event)" src="../assets/p6/06.jpg" width="30%" height="140" style="margin-left: auto;"/>
+        <img @click="preview($event)" src="../assets/p6/07.jpg" width="60%" height="200" style="margin-left: 0;"/>
       </div>
       <div class="row" id="row4">
-        <img src="../assets/p6/08.png" width="32.5%" height="140"/>
-        <img src="../assets/p6/09.jpg" width="32.5%" height="140"/>
-        <img src="../assets/p6/10.jpg" width="32.5%" height="140"/>
+        <img @click="preview($event)" src="../assets/p6/08.png" width="32.5%" height="140"/>
+        <img @click="preview($event)" src="../assets/p6/09.jpg" width="32.5%" height="140"/>
+        <img @click="preview($event)" src="../assets/p6/10.jpg" width="32.5%" height="140"/>
       </div>
     </div>
 
@@ -32,12 +32,28 @@
     <div style="position: fixed; left: 32px; bottom: 100px;">
       <img src="../assets/img-name.png"/>
     </div>
+
+    <el-dialog title="" :visible.sync="dialogVisible" center fullscreen>
+      <img id="preview" :src="srcPreview" width="100%"/>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Part6"
+  name: "Part6",
+  data() {
+    return {
+      dialogVisible: false,
+      srcPreview: '',
+    }
+  },
+  methods: {
+    preview(event) {
+      this.srcPreview = event.target.getAttribute('src');
+      this.dialogVisible = true;
+    }
+  },
 }
 </script>
 
@@ -46,7 +62,7 @@ export default {
 }
 
 #album {
-  background-color: white;
+  background-color: transparent;
   display: block;
   width: 60%;
   margin: 24px 32px 24px auto;
@@ -68,7 +84,8 @@ export default {
 }
 
 #album img:hover {
-  transform: scale(1.5);
+  cursor: pointer;
+  /*transform: scale(1.5);*/
 }
 
 #album2 img {
@@ -79,8 +96,4 @@ export default {
 #album2 img:hover {
   transform: scale(1.5);
 }
-
-#row1 {
-  /*justify-content: end;*/
-}
 </style>

src/views/Part7.vue

@@ -14,7 +14,6 @@
       </div>
       <div style="width: 50%;">
         <img src="../assets/p7/01.png" width="100%" style=""/>
-        <img src="../assets/p7/02.jpg" width="25%" style="position: absolute; right: 0; bottom: 60px;"/>
       </div>
     </div>
 

src/views/Part8.vue

@@ -6,7 +6,7 @@
         <img src="../assets/p8/00.png" width="100%"/>
 
         <div style="margin-top: 20px;">
-          <el-carousel indicator-position="outside">
+          <el-carousel indicator-position="outside" height="500px">
             <el-carousel-item><img src="../assets/p8/01.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/02.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/03.jpg" width="100%"/></el-carousel-item>
@@ -38,6 +38,14 @@ export default {
 </script>
 
 <style scoped>
+.container {
+  background-image: url("../assets/p8/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  background-clip: padding-box;
+}
+
 .section {
   display: flex;
 }