瀏覽代碼

feat: base page

WangYumin 2 年之前
父節點
當前提交
f83d15f838
共有 3 個文件被更改,包括 32 次插入20 次删除
  1. 12 5
      src/views/Part3.vue
  2. 12 10
      src/views/Part4.vue
  3. 8 5
      src/views/Part8.vue

+ 12 - 5
src/views/Part3.vue

@@ -5,10 +5,11 @@
         <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 class="right" style="margin-top: 32px; margin-bottom: 32px;">
+        <div style="padding:56.25% 0 0 0;position:relative;">
+          <iframe src="https://player.vimeo.com/video/784954483?h=5239c00251&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="《最后一英里》.mov"></iframe>
+        </div>
       </div>
 
       <div class="right">
@@ -38,7 +39,13 @@
 
 <script>
 export default {
-  name: "Part3"
+  name: "Part3",
+  mounted() {
+    let script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://player.vimeo.com/api/player.js';
+    document.body.appendChild(script);
+  },
 }
 </script>
 

+ 12 - 10
src/views/Part4.vue

@@ -3,7 +3,7 @@
     <div class="content">
       <img src="../assets/p4/00.jpg" width="100%"/>
 
-      <div>
+      <div style="margin-top: 32px;">
         <!--        <video width="100%" autoplay controls>-->
         <!--          <source src="https://files.minbb.cn/video/chen-20221229-1.mp4" type="video/mp4"/>-->
         <!--        </video>-->
@@ -14,16 +14,18 @@
         <!-- <script src="https://player.vimeo.com/api/player.js"></script> -->
       </div>
 
-      <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>
-        <el-carousel-item><img src="../assets/p4/04.jpg" width="100%"/></el-carousel-item>
-        <el-carousel-item><img src="../assets/p4/05.jpg" width="100%"/></el-carousel-item>
-        <el-carousel-item><img src="../assets/p4/06.jpg" width="100%"/></el-carousel-item>
-      </el-carousel>
+      <div style="margin-top: 32px;">
+        <el-carousel indicator-position="outside" height="400px">
+          <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>
+          <el-carousel-item><img src="../assets/p4/04.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p4/05.jpg" width="100%"/></el-carousel-item>
+          <el-carousel-item><img src="../assets/p4/06.jpg" width="100%"/></el-carousel-item>
+        </el-carousel>
+      </div>
 
-      <div>
+      <div style="margin-bottom: 32px;">
         <img src="../assets/p4/11.jpg" width="33.33%"/>
         <img src="../assets/p4/12.jpg" width="33.33%"/>
         <img src="../assets/p4/13.jpg" width="33.33%"/>

+ 8 - 5
src/views/Part8.vue

@@ -3,29 +3,32 @@
     <div class="section">
       <div style="width: 50%;"></div>
       <div style="width: 50%; margin: 64px 32px 0 0;">
-        <img src="../assets/p8/00.png" width="100%"/>
+        <div style="width: 60%; margin-left: auto;">
+          <img src="../assets/p8/06.jpg" width="100%"/>
+        </div>
 
         <div style="margin-top: 20px;">
           <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/13.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>
             <el-carousel-item><img src="../assets/p8/04.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/05.jpg" width="100%"/></el-carousel-item>
-            <el-carousel-item><img src="../assets/p8/06.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/07.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/08.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/09.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/10.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/11.jpg" width="100%"/></el-carousel-item>
             <el-carousel-item><img src="../assets/p8/12.jpg" width="100%"/></el-carousel-item>
-            <el-carousel-item><img src="../assets/p8/13.jpg" width="100%"/></el-carousel-item>
+            <el-carousel-item><img src="../assets/p8/01.jpg" width="100%"/></el-carousel-item>
           </el-carousel>
         </div>
+
+        <img src="../assets/p8/00.png" width="100%" style="margin: 20px 0;"/>
       </div>
     </div>
 
-    <div style="position: absolute; left: 32px; bottom: 100px;">
+    <div style="position: fixed; left: 32px; bottom: 100px;">
       <img src="../assets/img-name.png"/>
     </div>
   </div>