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

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,174 +55,177 @@
 
 <script>
 
-  const myFooter = () => import( "./common/myFooter");
-  const photo = () => import( "./common/photo");
-  const proTag = () => import( "./common/proTag");
-
-  export default {
-    components: {
-      photo,
-      proTag,
-      myFooter
+const myFooter = () => import( "./common/myFooter");
+const photo = () => import( "./common/photo");
+const proTag = () => import( "./common/proTag");
+
+export default {
+  components: {
+    photo,
+    proTag,
+    myFooter
+  },
+
+  data() {
+    return {
+      photoPagination: {
+        current: 1,
+        size: 10,
+        total: 0,
+        resourceType: "lovePhoto",
+        classify: ""
+      },
+      photoTitleList: [
+        { classify: "公益计划", count: 6 },
+        { classify: "科研项目", count: 2 },
+      ],
+      photoList: []
+    }
+  },
+
+  computed: {},
+
+  watch: {},
+
+  created() {
+    this.getPhotoTitles();
+  },
+
+  mounted() {
+
+  },
+
+  methods: {
+    getPhotoTitles() {
+      this.$http.get(this.$constant.baseURL + "/webInfo/listAdminLovePhoto")
+        .then((res) => {
+          if (!this.$common.isEmpty(res.data)) {
+            this.photoTitleList = res.data;
+            this.photoPagination = {
+              current: 1,
+              size: 10,
+              total: 0,
+              resourceType: "lovePhoto",
+              classify: this.photoTitleList[0].classify
+            };
+            this.changePhoto();
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: error.message,
+            type: "error"
+          });
+        });
     },
-
-    data() {
-      return {
-        photoPagination: {
+    changePhotoTitle(classify) {
+      if (classify !== this.photoPagination.classify) {
+        this.photoPagination = {
           current: 1,
           size: 10,
           total: 0,
           resourceType: "lovePhoto",
-          classify: ""
-        },
-        photoTitleList: [],
-        photoList: []
+          classify: classify
+        };
+        this.photoList = [];
+        this.changePhoto();
       }
     },
-
-    computed: {},
-
-    watch: {},
-
-    created() {
-      this.getPhotoTitles();
-    },
-
-    mounted() {
-
+    pagePhotos() {
+      this.photoPagination.current = this.photoPagination.current + 1;
+      this.changePhoto();
     },
-
-    methods: {
-      getPhotoTitles() {
-        this.$http.get(this.$constant.baseURL + "/webInfo/listAdminLovePhoto")
-          .then((res) => {
-            if (!this.$common.isEmpty(res.data)) {
-              this.photoTitleList = res.data;
-              this.photoPagination = {
-                current: 1,
-                size: 10,
-                total: 0,
-                resourceType: "lovePhoto",
-                classify: this.photoTitleList[0].classify
-              };
-              this.changePhoto();
-            }
-          })
-          .catch((error) => {
-            this.$message({
-              message: error.message,
-              type: "error"
-            });
-          });
-      },
-      changePhotoTitle(classify) {
-        if (classify !== this.photoPagination.classify) {
-          this.photoPagination = {
-            current: 1,
-            size: 10,
-            total: 0,
-            resourceType: "lovePhoto",
-            classify: classify
-          };
-          this.photoList = [];
-          this.changePhoto();
-        }
-      },
-      pagePhotos() {
-        this.photoPagination.current = this.photoPagination.current + 1;
-        this.changePhoto();
-      },
-      changePhoto() {
-        this.$http.post(this.$constant.baseURL + "/webInfo/listResourcePath", this.photoPagination)
-          .then((res) => {
-            if (!this.$common.isEmpty(res.data)) {
-              this.photoList = this.photoList.concat(res.data.records);
-              this.photoPagination.total = res.data.total;
-            }
-          })
-          .catch((error) => {
-            this.$message({
-              message: error.message,
-              type: "error"
-            });
+    changePhoto() {
+      this.$http.post(this.$constant.baseURL + "/webInfo/listResourcePath", this.photoPagination)
+        .then((res) => {
+          if (!this.$common.isEmpty(res.data)) {
+            this.photoList = this.photoList.concat(res.data.records);
+            this.photoPagination.total = res.data.total;
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            message: error.message,
+            type: "error"
           });
-      }
+        });
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .travel-container {
-    padding: 25px;
-    background: var(--favoriteBg);
-  }
-
-  .travel-header {
-    margin: 60px auto 30px;
-    height: 300px;
-    position: relative;
-    overflow: hidden;
-    border-radius: 20px;
-    max-width: 1200px;
-    color: var(--white);
-    user-select: none;
-  }
-
-  .index-video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    background: var(--lightGreen);
-  }
-
-  .travel-content {
-    margin: 0 auto;
-    max-width: 1200px;
-  }
-
+.travel-container {
+  padding: 25px;
+  background: var(--favoriteBg);
+}
+
+.travel-header {
+  margin: 60px auto 30px;
+  height: 400px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px;
+  max-width: 1200px;
+  color: var(--white);
+  user-select: none;
+}
+
+.index-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: var(--lightGreen);
+}
+
+.travel-content {
+  margin: 0 auto;
+  max-width: 1200px;
+}
+
+.photo-title-warp {
+  max-width: 1150px;
+  margin: 50px auto;
+  padding: 20px;
+  border-radius: 10px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.isActive {
+  animation: scale 2.5s ease-in-out infinite;
+}
+
+.photo-title {
+  text-align: center;
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 80px;
+  letter-spacing: 2px;
+}
+
+.pagination-wrap {
+  display: flex;
+  justify-content: center;
+  margin-top: 40px;
+}
+
+.pagination {
+  padding: 13px 15px;
+  border: 1px solid var(--lightGray);
+  border-radius: 3rem;
+  color: var(--greyFont);
+  width: 100px;
+  user-select: none;
+  cursor: pointer;
+  text-align: center;
+}
+
+@media screen and (max-width: 1150px) {
   .photo-title-warp {
-    max-width: 1150px;
-    margin: 50px auto;
-    padding: 20px;
-    border-radius: 10px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .isActive {
-    animation: scale 2.5s ease-in-out infinite;
-  }
-
-  .photo-title {
-    text-align: center;
-    font-size: 30px;
-    font-weight: 700;
-    line-height: 80px;
-    letter-spacing: 2px;
-  }
-
-  .pagination-wrap {
-    display: flex;
-    justify-content: center;
-    margin-top: 40px;
-  }
-
-  .pagination {
-    padding: 13px 15px;
-    border: 1px solid var(--lightGray);
-    border-radius: 3rem;
-    color: var(--greyFont);
-    width: 100px;
-    user-select: none;
-    cursor: pointer;
-    text-align: center;
-  }
-
-  @media screen and (max-width: 1150px) {
-    .photo-title-warp {
-      max-width: 780px;
-    }
+    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",