首页

src/router/base/myInfo.js

+export default [{
+  path: '/signUpList',
+  name: 'signUpList',
+  component: () => import(/* webpackChunkName: "login" */ 'v/base/myInfo/signUp.vue'),
+  meta: {
+    title: '我的报名'
+  }
+},
+
+]

src/router/index.js

@@ -5,7 +5,6 @@ import VueRouter from 'vue-router';
 import store from '@/store';
 
 import indexLogin from './index/login';
-import indexCamp from './index/camp';
 import indexHome from './base/home';
 import indexActive from './base/active';
 import {getCam} from "r/index/login";
@@ -37,15 +36,31 @@ const routes = [
     children: [...indexLogin]
   },
   {
-    path: '/',
-    name: 'cerificateIndex',
+    path: '/myInfo',
+    name: 'myInfoIndex',
     meta: {
-      title: '营地报名'
+      title: '个人中心'
     },
-    // redirect: '/cerificate/signUp',
-    component: () => import('v/index/camp/Index.vue'),
-    children: [...indexCamp]
+    component: () => import('v/base/myInfo/index.vue'),
+    children: [{
+      path: '/signUpList',
+      name: 'signUpList',
+      component: () => import(/* webpackChunkName: "login" */ 'v/base/myInfo/signUp.vue'),
+      meta: {
+        title: '我的报名'
+      }
+    }]
   },
+  // {
+  //   path: '/',
+  //   name: 'cerificateIndex',
+  //   meta: {
+  //     title: '营地报名'
+  //   },
+  //   // redirect: '/cerificate/signUp',
+  //   component: () => import('v/index/camp/Index.vue'),
+  //   children: [...indexCamp]
+  // },
   {
     path: '/:code',
     name: 'recruit',
@@ -69,7 +84,7 @@ const routes = [
 const router = new VueRouter({
   mode: 'history',
   // base: process.env.BASE_URL,
-  routes
+  routes: routes //原因
 })
 
 
@@ -128,12 +143,15 @@ function checkCam(code, cb) {
 }
 
 router.beforeEach((to, from, next) => {
+  console.log(to)
   let
     toLogin = "/login",
     toRegister = "/register",
     toReset = "/reset",
     toHome = "/home",
     toActive = "/active";
+  let toMyInfo;
+  toMyInfo = "/myInfo";
   let code = false;
   document.title = to.meta.title;
   if (to.path == toLogin || to.path == toRegister || to.path == toReset) {
@@ -150,7 +168,7 @@ router.beforeEach((to, from, next) => {
     //   }
     // });
     return next();
-  } else if (to.path == toHome || to.path == toActive || to.path.indexOf(toActive) != -1) {
+  } else if (to.path == toMyInfo || to.path == toHome || to.path == toActive || to.path.indexOf(toActive) != -1) {
     return next();
   } else if (to.name == "recruit") {
     code = to.params.code;

src/views/base/home/Home.vue

@@ -3,7 +3,7 @@
     <div>
       <el-carousel height="300px">
         <el-carousel-item :key="index" v-for="(item,index) in bannerlist">
-          <img :src="item.url" class="small"/>
+          <img :src="item.url" class="small" style="width: 100%;"/>
         </el-carousel-item>
       </el-carousel>
     </div>
@@ -39,7 +39,11 @@
         </div>
       </div>
     </div>
-
+    <!--查看更多-->
+    <div class="flex line">
+      <div class="line"></div>
+      <span>查看更多</span>
+    </div>
     <!-- 学生感想和体会   -->
     <div>
       <div class="home_title">
@@ -53,13 +57,21 @@
               {{item2}}
             </div>
             <div class="item_name">
-              {{item.name}}
+              <div>
+                <div class="name">
+                  {{item.name}}
+                </div>
+                <div class="name_line">
+                </div>
+              </div>
+
             </div>
           </div>
           <div>
             <div class="item_text">
               {{item.think}}
             </div>
+
           </div>
 
           <div></div>
@@ -71,15 +83,16 @@
 
 <script>
   import img from "../../../assets/img/recruit.png";
+  import banner from "../../../assets/img/Banner/banner@2x.png";
 
   export default {
     name: "Home",
     data() {
       return {
         bannerlist: [{
-          // url: require("@/assets/img/Banner/banner@2x.png")
+          url: banner
         }, {
-          // url: require("@/assets/img/Banner/banner@2x.png")
+          url: banner
         }],
         activeList: [
           {
@@ -155,7 +168,7 @@
           tag: ['北京市第八中序', '2023南开历史营']
         },
           {
-            name: '同学',
+            name: '同学同学同学同学',
             think: '2222222',
             tag: ['北京市第八中序', '2023南开历史营']
           },
@@ -376,6 +389,22 @@
     font-family: "PingFang SC";
   }
 
+  .line {
+    align-items: center;
+
+    div {
+      width: 100%;
+      border-bottom: 1px solid #D7D7D7;
+    }
+
+    span {
+      color: #333333;
+      font-size: 14px;
+      width: 74px;
+      margin-left: 20px;
+    }
+  }
+
   .reflectionList {
     /*margin-top: 30px;*/
     display: flex;
@@ -383,13 +412,14 @@
     font-size: 12px;
 
     .reflections_item {
-      flex-basis: 31%;
+      flex-basis: 46%;
       margin: 1.75% 0;
       background-color: #ffffff;
       height: 163px;
       position: relative;
       width: 200px;
-      &:nth-child(3n+2) {
+
+      &:nth-child(2n+2) {
         margin: 1.75% 3.5%;
       }
 
@@ -397,7 +427,7 @@
         display: flex;
         position: absolute;
         top: -10%;
-        margin-left: 10px;
+        margin-left: 8%;
 
         .tag {
           display: flex;
@@ -407,7 +437,17 @@
         }
 
         .item_name {
+          display: flex;
+          align-items: end;
+        }
+
+        .name {
+          margin-bottom: 10px;
+        }
+
+        .name_line {
           border-bottom: 2px solid #D7D7D7;
+
         }
       }
 

src/views/base/myInfo/index.vue

+<template>
+  <div class="camp-index">
+    <el-header height="104px">
+      <Header></Header>
+      <div class="bg-top"></div>
+    </el-header>
+    <div class="com-container">
+      <div class="index-container">
+        <div class="camp_left" ref="leftBoxFu">
+          <ul
+            :class="{
+              'is-fixed': isPosition == 1,
+              'is-absolute': isPosition == 2,
+            }"
+            class="camp_left_box"
+            ref="leftBox"
+          >
+            <li
+              :class="{ active: campindex_type === index }"
+              :key="index"
+              @click="ToSignUp(index)"
+              v-for="(item, index) in tabs"
+            >
+              <img :src="item.url"/>
+              {{ item.desc }}
+            </li>
+          </ul>
+        </div>
+
+        <div class="camp_right" ref="rightBox">
+          <signUpList v-if="this.campindex_type==0"></signUpList>
+<!--          <router-view></router-view>-->
+        </div>
+      </div>
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+  /* eslint-disable */
+  import Header from "@/components/index/SignUp/Header.vue";
+  import Footer from "@/components/index/Footer.vue";
+  import svg1 from '@/assets/img/signUp/icon.svg';
+  import signUpList from '../myInfo/signUp.vue';
+
+  export default {
+    name: "myInfoIndex",
+    components: {
+      Header,
+      Footer,
+      signUpList
+    },
+    // props:{}
+    data() {
+      return {
+        index: 0,
+        isPosition: 0, // 左侧box是否浮动
+        pageYOffset: 0, // 左侧box浮动时，滚动的高度
+        scorllHeight: 0, // 最大滚动高度
+        tabs: [
+          {
+            id: "0",
+            desc: "我的报名",
+            icon: "icon-icon1",
+            url: svg1
+          },
+
+        ],
+        campindex_type: 0,
+      };
+    },
+    watch: {},
+    created() {
+      this.ToSignUp(this.campindex_type)
+    },
+    mounted() {
+      window.addEventListener("scroll", this.handleScrollX, true);
+      window.addEventListener("resize", this.onResize, true);
+    },
+    beforeDestroy() {
+      window.removeEventListener("scroll", this.handleScrollX, true);
+      window.removeEventListener("resize", this.onResize, true);
+    },
+    methods: {
+      ToSignUp(index) {
+        console.log(index, 'index')
+        this.campindex_type = index;
+        if (this.campindex_type == 0) {
+          this.$router.push({path: '/signUpList'});
+        }
+      },
+      onResize() {
+        const refLeft = this.$refs["leftBox"];
+        const leftBoxFu = this.$refs["leftBoxFu"];
+        refLeft.style.width = leftBoxFu.offsetWidth + "px";
+      },
+      // 页面滚动事件
+      handleScrollX() {
+        const top = document.documentElement.scrollTop || document.body.scrollTop;
+        const refLeft = this.$refs["leftBox"];
+        const leftBoxFu = this.$refs["leftBoxFu"];
+        const refRight = this.$refs["rightBox"];
+        if (top > 0) {
+          if (this.isPosition == 0) {
+            this.scorllHeight = refRight.offsetHeight - refLeft.offsetHeight;
+            refLeft.style.width = leftBoxFu.offsetWidth + "px";
+          }
+          this.isPosition = 1;
+        } else {
+          if ((this.isPosition = 1)) {
+            this.isPosition = 0;
+          }
+        }
+        if (top >= this.scorllHeight) {
+          if (this.isPosition == 1) {
+            this.isPosition = 2;
+          }
+        } else if (top < this.scorllHeight) {
+          if (this.isPosition == 2) {
+            this.isPosition = 1;
+            refLeft.style.width = leftBoxFu.offsetWidth + "px";
+          }
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import "a/scss/common";
+  @import "a/scss/index";
+  @import "a/style";
+
+  @font-face {
+    font-family: "icomoon";
+    src: url("../../../assets/fonts/icomoon.eot?dcunb6");
+    src: url("../../../assets/fonts/icomoon.eot?dcunb6#iefix") format("embedded-opentype"),
+    url("../../../assets/fonts/icomoon.ttf?dcunb6") format("truetype"),
+    url("../../../assets/fonts/icomoon.woff?dcunb6") format("woff"),
+    url("../../../assets/fonts/icomoon.svg?dcunb6#icomoon") format("svg");
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+  }
+
+  .camp_left i {
+    font-family: "icomoon";
+  }
+
+  .camp-index {
+    background: #f8f8f8;
+
+    .el-header {
+      position: fixed;
+      width: 100%;
+      padding: 0;
+      background-color: #ffffff;
+      z-index: 2000; //消息提示框z-index=2019
+
+      .bg-top {
+        height: 24px;
+        background-color: #f8f8f8;
+      }
+    }
+
+    // .com-container {
+    //   height: calc(100% - 100px);
+    // }
+    .index-container {
+      padding: 104px 0 70px 0;
+      display: flex;
+      flex-flow: row;
+
+      .camp_left {
+        //  width: 100px;
+        height: 100%;
+        position: relative;
+        width: 22%;
+        max-width: 280px;
+        min-width: 200px;
+        //  width: calc(100% - 100px);
+        height: 300px;
+
+        background-color: #ffffff;
+        border-radius: 8px;
+        padding: 20px 0;
+        margin-right: 25px;
+
+        .camp_left_box {
+          padding-inline-start: 0 !important;
+        }
+
+        &.is-fixed {
+          position: fixed;
+          top: 104px;
+          /*width: 14.4%;*/
+          max-width: 280px;
+          min-width: 216px;
+        }
+
+        &.is-absolute {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+        }
+      }
+
+      li {
+        position: relative;
+        padding: 0 23px 0 51px;
+        height: 44px;
+        line-height: 44px;
+        margin: 10px 0;
+        font-size: 15px;
+        list-style: none;
+
+        img {
+          vertical-align: middle;
+          margin: -3px 8px 0 0;
+          width: 20px;
+          position: absolute;
+          left: -1000px;
+          filter: drop-shadow(var(--color) 1023px 13px) !important;
+        }
+
+        &.active,
+        &:hover {
+          cursor: pointer;
+          background-color: #f8f8f8;
+        }
+      }
+    }
+
+    .camp_right {
+      flex: 1;
+      // width: calc(100% - 100px);
+      // height: 100%;
+      // overflow: auto;
+      border-radius: 8px;
+      background-color: #ffffff;
+    }
+  }
+</style>

src/views/base/myInfo/signUp.vue

+<template>
+  <div class="signUp">
+    <el-tabs @tab-click="handleClick" v-model="activeName">
+      <el-tab-pane label="正在报名" name="1">
+
+        111
+      </el-tab-pane>
+      <el-tab-pane label="即将开营" name="2">
+
+        <div :key="index" v-for="(item,index) in List"  class="campList" >
+          <el-card class="box-card">
+            <div class="flex list_item">
+              <div class="item_img">
+                <img :src="item.url"/>
+              </div>
+              <div >
+                <div class="item_title">{{item.name}}</div>
+                <div class="item_tag">{{item.tag}}</div>
+                <div class="item_time">活动时间：{{item.time}}</div>
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="开营中" name="3">开营中</el-tab-pane>
+      <el-tab-pane label="已结营" name="4">已结营</el-tab-pane>
+      <el-tab-pane label="已退营" name="5">已退营</el-tab-pane>
+    </el-tabs>
+
+  </div>
+</template>
+
+<script>
+  import img from "../../../assets/img/recruit.png";
+
+  export default {
+    name: "signUpList",
+    data() {
+      return {
+        activeName: '2',
+        List: [{
+          url: img,
+          name: 'XX大学暑期营',
+          tag: '线下活动',
+          time: '2023-07-23至2023-07-27',
+        }, {
+          url: img,
+          name: 'XX大学暑期营',
+          tag: '线下活动',
+          time: '2023-07-23至2023-07-27',
+        }]
+      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .flex{
+    display: flex;
+  }
+  .signUp {
+    margin: 10px 80px 10px 31px;
+    .campList{
+      margin: 10px 0;
+      .list_item{
+        .item_img{
+          width: 30%;
+          margin-right: 10%;
+          img{
+            width: 100%;
+          }
+
+        }
+        .item_title{
+
+        }
+    }
+
+    }
+  }
+</style>

src/views/index/camp/Index.vue

@@ -28,12 +28,8 @@
         </div>
 
         <div class="camp_right" ref="rightBox">
-          <router-view 
-     
+          <router-view
           @getStatus="getStatus"
-         
-          
-          
            />
         </div>
       </div>