营地2.0-整合修改

src/components/base/myInfo/campList.vue

 <template>
   <div>
     <template v-if="activeList.length>0">
-      <div :key="index" class="campList" v-for="(item,index) in activeList">
-        <el-card  class="box-card">
-          <div class="flex list_item" @click="toSignUp(item.identity)">
-            <div class="item_img">
-              <img :src="item.activityCover"/>
-            </div>
-            <div class="right">
-              <div>
-                <div class="item_title">{{item.schoolName}}</div>
-                <div class="item_tag">{{item.activityLabel}}</div>
-                <div class="item_time">活动时间：{{formatYMD(item.activityStartTime)}} 至 {{formatYMD(item.activityEndTime)}}
+      <div class="campList" v-for="(item,index) in activeList" :key="index">
+        <div @click="toSignUp(item.identity)">
+          <el-card>
+            <div class="flex list_item">
+              <div class="item_img">
+                <el-image :src="item.activityCover" fit="cover"/>
+              </div>
+              <div class="right">
+                <div>
+                  <div class="item_title">{{item.schoolName}}</div>
+                  <div class="item_tag">{{item.activityLabel}}</div>
+                  <div class="item_time">活动时间：{{formatYMD(item.activityStartTime)}} 至
+                    {{formatYMD(item.activityEndTime)}}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </el-card>
+          </el-card>
+        </div>
+
       </div>
     </template>
-    <div class="noCamp" v-else> 暂无营地</div>
+    <div class="noCamp" v-else>暂无营地</div>
   </div>
 </template>
 
@@ -74,19 +78,48 @@
   }
 
   .campList {
-    margin: 10px 0;
+    margin: 20px 0;
+
+    ::v-deep .el-card {
+      cursor: pointer;
+
+      .el-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+        transition: all .5s;
+        -webkit-transition: all .5s;
+
+        .el-image__error {
+          background-color: #D8D8D8;
+        }
+      }
+
+      &:hover {
+        box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.1);
+
+        .el-image {
+          transform: scale(1.1);
+          -ms-transform: scale(1.1); /* IE 9 */
+          -moz-transform: scale(1.1); /* Firefox */
+          -webkit-transform: scale(1.1); /* Safari 和 Chrome */
+          -o-transform: scale(1.1);
+        }
+      }
+    }
 
     .list_item {
+      display: flex;
+      flex-flow: row;
+
       .item_img {
         width: 30%;
         margin-right: 10%;
-
-        img {
-          width: 100%;
-        }
+        overflow: hidden;
       }
 
       .right {
+        flex: 1;
         display: flex;
         align-items: center;
 

src/request/network.js

@@ -60,6 +60,7 @@ const reqList = []
  * @param {string} errorMessage - 请求中断时需要显示的错误信息
  */
 const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
+  console.log(reqList)
   const errorMsg = errorMessage || ''
   for (let i = 0; i < reqList.length; i++) {
     if (reqList[i] === url) {
@@ -67,7 +68,7 @@ const stopRepeatRequest = function (reqList, url, cancel, errorMessage) {
       return
     }
   }
-  reqList.push(url)
+  reqList.push(url);
 }
 /**
  * 允许某个请求可以继续进行
@@ -139,13 +140,11 @@ export function request(config) {
 
       let cancel
       // 设置cancelToken对象
-      config.cancelToken = new axios.CancelToken(function (c) {
+      config.cancelToken = new axios.CancelToken((c) => {
         cancel = c
       })
-      if (
-        config.url.indexOf('/web/config/getUniversity') == -1 &&
-        config.url.indexOf('/web/config/getProfession') == -1
-      ) {
+      if (config.url.indexOf('/web/config/getUniversity') == -1 &&
+        config.url.indexOf('/web/config/getProfession') == -1) {
         // 阻止重复请求。当上个请求未完成时，相同的请求不会进行
         stopRepeatRequest(
           reqList,

src/router/index.js

@@ -196,7 +196,6 @@ function checkCam(code, cb) {
 }
 
 router.beforeEach((to, from, next) => {
-  console.log(to)
   if (from.fullPath != '/') {
     store.commit('setFullPath', from.fullPath);
   }

src/store/mutations.js

@@ -27,7 +27,6 @@ export default {
     window.localStorage.setItem('index-active-path', key);
   },
   setFullPath(state, path){
-    console.log(state, path)
     state.fullPath = path;
     window.localStorage.setItem('index-fullPath', path);
   },

src/store/time.js

@@ -45,11 +45,12 @@ export function formatYMD(data) {
   return (y + "-" + add0(m) + "-" + add0(d));
 }
 
-// 2023年1月1日
+// 2023年1月1日1点
 export function formatYMDChina(data) {
   let time = new Date(data);
   let y = time.getFullYear();
   let m = time.getMonth() + 1;
   let d = time.getDate();
-  return (y + "年" + m + "月" + d + "日");
+  let h = time.getHours();
+  return (y + "年" + m + "月" + d + "日" + h + "点");
 }

src/views/base/myInfo/signUp.vue

@@ -9,22 +9,22 @@
       </el-tab-pane>
       <el-tab-pane label="即将开营" name="2">
         <template v-if="campStatus==2">
-        <campList :typeFu="campStatus"></campList>
+          <campList :typeFu="campStatus"></campList>
         </template>
       </el-tab-pane>
       <el-tab-pane label="开营中" name="3">
         <template v-if="campStatus==3">
-        <campList :typeFu="campStatus"></campList>
+          <campList :typeFu="campStatus"></campList>
         </template>
       </el-tab-pane>
       <el-tab-pane label="已结营" name="4">
         <template v-if="campStatus==4">
-        <campList :typeFu="campStatus"></campList>
+          <campList :typeFu="campStatus"></campList>
         </template>
       </el-tab-pane>
       <el-tab-pane label="已退营" name="5">
         <template v-if="campStatus==5">
-        <campList :typeFu="campStatus"></campList>
+          <campList :typeFu="campStatus"></campList>
         </template>
       </el-tab-pane>
     </el-tabs>
@@ -49,7 +49,7 @@
     },
     methods: {
       handleClick(tab, event) {
-        this.campStatus=tab.name;
+        this.campStatus = tab.name;
       },
 
     }
@@ -63,8 +63,26 @@
   }
 
   .signUp {
-    margin: 10px 80px 10px 31px;
+    margin: 20px 30px;
+
+    ::v-deep .el-tabs {
+      .el-tabs__active-bar {
+        background-color: var(--color);
 
+      }
 
+      .el-tabs__item {
+        font-size: 18px;
+
+        &:hover,
+        &.is-active {
+          color: var(--color);
+        }
+      }
+
+      .el-tabs__content {
+        padding: 20px;
+      }
+    }
   }
 </style>