feat: base page

src/views/Part2.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="container">
     <div style="padding: 72px 32px 0;">
-      <img src="../assets/p2/10.png" width="100%"/>
+      <div style="width: 50%; margin-left: auto;">
+        <div style="padding:50% 0 0 0;position:relative;">
+          <iframe src="https://player.vimeo.com/video/784946797?h=60009c5fe3&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="他者视角 The Perspective of The Other"></iframe>
+        </div>
+      </div>
+      <img src="../assets/p2/10.png" width="100%" style="margin-top: 64px;"/>
       <img src="../assets/p2/20.jpg" width="35%" style="float: right; margin-top: 48px;"/>
 
       <div class="grid">
@@ -36,7 +42,13 @@
 
 <script>
 export default {
-  name: "Part2"
+  name: "Part2",
+  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/Part6.vue

@@ -2,22 +2,22 @@
   <div class="container">
     <div id="album">
       <div class="row" id="row1">
-        <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;"/>
+        <img @click="preview($event)" src="../assets/p6/01.jpg" width="60%"/>
+        <img @click="preview($event)" src="../assets/p6/02.jpg" width="30%" style="margin-top: auto;"/>
       </div>
       <div class="row" id="row2">
-        <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"/>
+        <img @click="preview($event)" src="../assets/p6/03.jpg" width="32.5%"/>
+        <img @click="preview($event)" src="../assets/p6/04.jpg" width="32.5%"/>
+        <img @click="preview($event)" src="../assets/p6/05.jpg" width="32.5%"/>
       </div>
       <div class="row" id="row3">
-        <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;"/>
+        <img @click="preview($event)" src="../assets/p6/06.jpg" height="240px" style="margin-left: auto;"/>
+        <img @click="preview($event)" src="../assets/p6/07.jpg" width="60%" style="margin-left: 0;"/>
       </div>
       <div class="row" id="row4">
-        <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"/>
+        <img @click="preview($event)" src="../assets/p6/08.png" width="32.5%"/>
+        <img @click="preview($event)" src="../assets/p6/09.jpg" width="32.5%"/>
+        <img @click="preview($event)" src="../assets/p6/10.jpg" width="32.5%"/>
       </div>
     </div>
 
@@ -57,6 +57,12 @@ export default {
 }
 </script>
 
+<style>
+.el-dialog {
+  background: transparent;
+}
+</style>
+
 <style scoped>
 .container {
 }