照片（公益计划和科研项目）

src/components/travel.vue

@@ -5,14 +5,13 @@
       <div class="travel-header my-animation-slide-top">
         <!-- 背景图片 -->
         <video class="index-video" autoplay="autoplay" muted="muted" loop="loop"
-               :src="$constant.favoriteVideo">
+               :src="$constant.favoriteVideo2">
         </video>
         <div style="position: absolute;left: 20px;top: 20px">
           <!-- 标题 -->
           <div style="margin: 10px">
-
             <div style="font-size: 36px;font-weight: bold;line-height: 1.5;margin-top: 20px">
-              著名制药公司
+              让照片留下医药学的足迹
             </div>
           </div>
         </div>
@@ -33,7 +32,6 @@
 
         <div class="photo-title">
           {{photoPagination.classify}}
-          qqqqqqqqqqqqqqqqqqqqqqqqqq
         </div>
 
         <photo :resourcePathList="photoList"></photo>
@@ -57,11 +55,11 @@
 
 <script>
 
-  const myFooter = () => import( "./common/myFooter");
+const myFooter = () => import( "./common/myFooter");
-  const photo = () => import( "./common/photo");
+const photo = () => import( "./common/photo");
-  const proTag = () => import( "./common/proTag");
+const proTag = () => import( "./common/proTag");
 
-  export default {
+export default {
   components: {
     photo,
     proTag,
@@ -77,7 +75,10 @@
         resourceType: "lovePhoto",
         classify: ""
       },
-        photoTitleList: [],
+      photoTitleList: [
+        { classify: "公益计划", count: 6 },
+        { classify: "科研项目", count: 2 },
+      ],
       photoList: []
     }
   },
@@ -150,67 +151,67 @@
         });
     }
   }
-  }
+}
 </script>
 
 <style scoped>
 
-  .travel-container {
+.travel-container {
   padding: 25px;
   background: var(--favoriteBg);
-  }
+}
 
-  .travel-header {
+.travel-header {
   margin: 60px auto 30px;
-    height: 300px;
+  height: 400px;
   position: relative;
   overflow: hidden;
   border-radius: 20px;
   max-width: 1200px;
   color: var(--white);
   user-select: none;
-  }
+}
 
-  .index-video {
+.index-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   background: var(--lightGreen);
-  }
+}
 
-  .travel-content {
+.travel-content {
   margin: 0 auto;
   max-width: 1200px;
-  }
+}
 
-  .photo-title-warp {
+.photo-title-warp {
   max-width: 1150px;
   margin: 50px auto;
   padding: 20px;
   border-radius: 10px;
   display: flex;
   flex-wrap: wrap;
-  }
+}
 
-  .isActive {
+.isActive {
   animation: scale 2.5s ease-in-out infinite;
-  }
+}
 
-  .photo-title {
+.photo-title {
   text-align: center;
   font-size: 30px;
   font-weight: 700;
   line-height: 80px;
   letter-spacing: 2px;
-  }
+}
 
-  .pagination-wrap {
+.pagination-wrap {
   display: flex;
   justify-content: center;
   margin-top: 40px;
-  }
+}
 
-  .pagination {
+.pagination {
   padding: 13px 15px;
   border: 1px solid var(--lightGray);
   border-radius: 3rem;
@@ -219,12 +220,12 @@
   user-select: none;
   cursor: pointer;
   text-align: center;
-  }
+}
 
-  @media screen and (max-width: 1150px) {
+@media screen and (max-width: 1150px) {
   .photo-title-warp {
     max-width: 780px;
   }
-  }
+}
 
 </style>

src/utils/constant.js

@@ -20,8 +20,8 @@ export default {
   qiniuUrl: "https://upload.qiniup.com",
   qiniuDownload: "http://s6q4ppvdk.hd-bkt.clouddn.com/",
 
-  favoriteVideo: "$$$$自己找一个视频链接作为百宝箱的封面",
+  favoriteVideo: "",
-
+  favoriteVideo2: "http://s6q4ppvdk.hd-bkt.clouddn.com/images/340c8040d037c2f3217e8a1ade444fc8.mp4",
   loveWeiYan: "https://s1.ax1x.com/2022/12/04/zsKgDs.jpg",
   loveMessage: "https://s1.ax1x.com/2022/12/04/zsKgDs.jpg",
   lovePhoto: "https://s1.ax1x.com/2022/12/04/zsKh5V.jpg",