活动介绍

src/router/index.js

@@ -63,6 +63,7 @@ const routes = [
     component: () => import('v/index/login/Index.vue'),
     children: [...indexLogin]
   },
+
   {
     path: '/Info',
     name: 'Info',

src/views/base/active/Active.vue

@@ -61,7 +61,7 @@
       </div>
     </div>
 
-    <div class="active-list" v-if="activeList.length>0">
+    <div class="active-list" v-if="activeList.length>0"left-area>
       <div class="active-list-item" v-for="(item, index) in activeList" :key="index"
            :style="{
         '-webkit-animation-delay': (index+1)*0.1+'s',

src/views/base/myInfo/index.vue

@@ -81,7 +81,6 @@
       window.removeEventListener("resize", this.onResize, true);
     },
     methods: {
-
       ToSignUp(index) {
         console.log(index, 'index')
         this.campindex_type = index;

src/views/index/recruit/Index.vue

@@ -4,7 +4,7 @@
       <Header :typeFu="2"></Header>
       <div class="notify flex" v-if="$store.state.isDisplay_num == 1">
         <div class="flex">
-          <img class="notify_img" src="../../../assets/img/notify.png" alt=""/>
+          <img alt="" class="notify_img" src="../../../assets/img/notify.png"/>
         </div>
         <div>注意：本次活动报名有人数限制，当前共有{{ info.order_num }}人申请，剩余名额为{{info.student_num}}人</div>
       </div>
@@ -13,40 +13,30 @@
     <el-container>
       <div class="com-container index-container">
         <div class="title">{{ info.name }}</div>
-        <!-- <div class="time">发布时间：{{ info.update_time }}</div> -->
-        <div v-html="info.student_recruitment_brochure"></div>
-        <!-- <div class="part">
-          <span>第一部分</span>
-          <p>
-            南开大学是教育部直属重点综合性大学，是敬爱的周恩来总理的母校。新中国成立以来，学校发展始终得到党和国家的亲切关怀。毛泽东主席题写校名、亲临视察；周恩来总理三回母校指导；邓小平同志会见数学大师陈省身，批示成立南开数学研究所；江泽民同志、胡锦涛同志先后视察南开。特别是党的十八大以来，习近平总书记多次对南开的发展给予肯定，并对相关工作回信和勉励，更在百年校庆之际亲临南开视察。
-          </p>
+        <!--        <div v-html="info.student_recruitment_brochure"></div>-->
+        <!--        <div class="btn" v-if="info.name">-->
+        <!--          <el-button @click="toLogin()">立即报名</el-button>-->
+        <!--        </div>-->
+        <div class="active-area">
+          <div class="left-area card-box">
+            <ul v-if="anchorList.length>0">
+              <li :key="index" v-for="(item,index) in anchorList">
+                <a @click="anchorSkip(item.id)">{{item.name}}</a>
+              </li>
+            </ul>
+            <ul v-else>
+              <li>暂无锚点</li>
+            </ul>
           </div>
-        <div class="part">
-          <span>第二部分</span>
-          <p>
-            南开大学由严修、张伯苓秉承教育救国理念创办，肇始于1904年，成立于1919年。1937年校园遭侵华日军炸毁，学校南迁。1938年与北京大学、清华大学合组西南联合大学，被誉为“学府北辰”。1946年回津复校并改为国立。
-          </p>
-          <p>
-            新中国成立后，经历高等教育院系调整，成为文理并重的全国重点大学。改革开放以来，天津对外贸易学院、中国旅游管理干部学院相继并入，经教育部与天津市共建支持，学校发展成为国家“211工程”和“985工程”重点建设的综合性研究型大学。2015年9月，新校区建成启用后，初步形成了八里台校区、津南校区、泰达学院“一校三区”办学格局。2017年9月，入选国家42所世界一流大学建设高校，且为36所A类高校之一。
-          </p>
+          <div :style="{
+          'min-height':minHeight+'px'
+        }" class="center-area card-box">
+            <div class="center-area-cont">
+              <div v-html="info.student_recruitment_brochure"></div>
             </div>
-        <div class="paper">
-          <img src="../../../assets/img/recruit.png" alt="" />
           </div>
-        <div class="part">
-          <span>第三部分</span>
-          <p>
-            南开大学坚持“允公允能，日新月异”的校训，弘扬“爱国、敬业、创新、乐群”的传统和“文以治国、理以强国、商以富国”的理念，以“知中国，服务中国”为宗旨，以杰出校友周恩来为楷模，作育英才，繁荣学术，强国兴邦，传承文明，努力建设世界一流大学。
-          </p>
-
-          <p>
-            南开大学占地443.12万平方米，其中八里台校区占地121.60万平方米，津南校区占地245.89万平方米，泰达学院占地6.72万平方米。校舍建筑总面积195.19万平方米。按照“独立办学、紧密合作”的原则，与天津大学全面合作办学。
-          </p>
-        </div> -->
-
-        <div class="btn" v-if="info.name">
-          <el-button @click="toLogin()">立即报名</el-button>
         </div>
+
       </div>
       <Footer></Footer>
     </el-container>
@@ -54,26 +44,27 @@
 </template>
 <script>
   /* eslint-disable */
-
   import Header from "@/components/Header.vue";
   import Footer from "@/components/Footer.vue";
   import {getCamInfo} from "r/index/login";
-  import {setLogs} from "@/common/utils";
-  import {Notification} from "element-ui";
 
   export default {
     name: "recruit",
     data() {
       return {
         info: {},
+        anchorList: [],
+        minHeight: '339',
       };
     },
     created() {
       this.info = this.$store.state.info;
-      console.log(this.$store.state.indexIdentity)
+      setTimeout(()=>{
+        this.anchorList = this.getAnchor(this.info.student_recruitment_brochure);
+      },1000)
       let code = this.$store.state.indexIdentity;
       //判断是否关闭了营地(关闭了不需要调用setlog)
-      let isCloseCamp = this.$store.state.info.on_off
+      let isCloseCamp = this.$store.state.info.on_off;
       if (isCloseCamp == 1) {
         getCamInfo(code).then((res) => {
           document.title = res.data.name;
@@ -81,6 +72,9 @@
         });
         this.commonApi(29)
       }
+
+    },
+    mounted() {
     },
     methods: {
       toLogin() {
@@ -91,6 +85,44 @@
           this.$router.push("/signUp/examInfo?code=" + code);
         }
       },
+      // 锚点跳转方法
+      anchorSkip(id) {
+        document.querySelector(id).scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      },
+      // 分离获取html中的锚点
+      getAnchor(content) {
+        console.log(content)
+        if (!content) return [];
+        let attrAndValueArr = content.match(/<a id=\"(.*?)\"><\/a>/g);
+        let valueArr = [] // 放所有该属性的值
+        let anchorList = [];
+        if (attrAndValueArr && attrAndValueArr.length > 0) {
+          for (let i = 0; i < attrAndValueArr.length; i++) {
+            valueArr.push(attrAndValueArr[i]
+              .replace(/<a id=/g, '')
+              .replace(/\"/g, '')
+              .replace(/><\/a>/g, ''));
+          }
+          console.log(valueArr)
+          valueArr.forEach((item, index) => {
+            console.log(item)
+            console.log(document.getElementById(item).parentNode)
+            let father = document.getElementById(item).parentNode;
+            let value = father.innerHTML.replace(/<(.*?)>/g, '').replace(/<\/(.*?)>/g, '');
+            if (value && value.length < 10) {
+              anchorList.push({
+                id: '#' + item,
+                name: value,
+              })
+            }
+          })
+          return anchorList;
+        }
+        return [];
+      },
     },
     components: {
       Header,
@@ -201,4 +233,220 @@
       }
     }
   }
+
+  .active-area {
+    display: flex;
+    flex-flow: row;
+    align-items: self-start;
+    justify-content: space-between;
+
+    .left-area {
+      flex: 1;
+      min-width: 200px;
+
+      ul {
+        padding: 20px 10px;
+      }
+
+      li {
+        list-style: none;
+
+        a {
+          display: inline-block;
+          text-decoration: none;
+          color: #333333;
+          width: 100%;
+          font-size: 18px;
+          /*height: 44px;*/
+          line-height: 44px;
+          margin: 10px 0;
+          text-align: center;
+          border-bottom: 1px solid #cccccc;
+          cursor: pointer;
+
+          &:hover,
+          &.is-active {
+            color: var(--all_color);
+            background-color: #f5f5f5;
+            border-left: 4px solid var(--all_color);
+          }
+        }
+
+      }
+
+    }
+
+    .center-area {
+      flex: 4;
+      margin: 0 20px;
+
+      .center-area-title {
+        text-align: center;
+        font-size: 22px;
+        font-weight: 500;
+        height: 50px;
+        padding: 10px 20px 0;
+
+        .center-area-title-box {
+          height: 50px;
+          display: flex;
+          flex-flow: row;
+          justify-content: left;
+          border-bottom: 1px solid #cccccc;
+
+          .center-area-title-box-item {
+            margin: 0 20px;
+            height: 40px;
+            line-height: 40px;
+            cursor: pointer;
+
+            &:hover {
+              border-bottom: 2px solid #eeeeee;
+            }
+
+            &.is-active {
+              border-bottom: 2px solid var(--all_color);
+            }
+          }
+        }
+      }
+
+      .center-area-cont {
+        padding: 20px 30px;
+        min-height: 238px;
+      }
+    }
+
+    .right-area {
+      flex: 1.5;
+      min-width: 320px;
+
+      .question-area {
+
+        .question-area-title {
+          text-align: center;
+          font-size: 22px;
+          font-weight: 500;
+          line-height: 50px;
+          padding: 10px 20px 0;
+
+          .question-area-title-box {
+            border-bottom: 1px solid #cccccc;
+          }
+        }
+
+        .question-area-cont {
+          padding: 10px 25px 20px;
+
+          .ask-answer-item {
+            padding: 10px 5px;
+            font-size: 14px;
+            line-height: 30px;
+            border-bottom: 1px solid #cccccc;
+          }
+
+          ::v-deep .el-empty {
+            padding: 10px 0;
+
+            .el-empty__image {
+              width: 100px;
+            }
+          }
+
+          .question-email {
+            font-size: 14px;
+            line-height: 30px;
+            margin-top: 20px;
+          }
+        }
+      }
+
+      .back-area {
+        .back-area-title {
+          text-align: center;
+          font-size: 22px;
+          font-weight: 500;
+          line-height: 50px;
+          padding: 10px 20px 0;
+        }
+
+        .back-area-item {
+          padding: 15px 10px;
+          display: flex;
+          flex-flow: row;
+          margin-bottom: 10px;
+
+          .back-area-item-cover {
+            flex: 1;
+            height: 88px;
+            overflow: hidden;
+            border-radius: 4px;
+
+            ::v-deep .el-image {
+              width: 100%;
+              height: 100%;
+              border-radius: 4px;
+              transition: all .5s;
+              -webkit-transition: all .5s;
+
+              .el-image__error {
+                background-color: #D8D8D8;
+              }
+            }
+          }
+
+          .back-area-item-cont {
+            flex: 1;
+            margin-left: 10px;
+            display: flex;
+            flex-flow: column;
+            justify-content: space-around;
+
+            .back-area-item-cont-txt {
+              font-size: 12px;
+              line-height: 18px;
+
+              &.color_2 {
+                color: #999999;
+              }
+
+              &.color_3 {
+                color: #EC808D;
+              }
+
+              .sign-box {
+                display: inline-block;
+
+                .sign {
+                  display: inline-block;
+                  padding: 0 10px;
+                  border-radius: 4px;
+                  background-color: #eeeeee;
+                  margin: 2px 4px 2px 0;
+
+                  &:last-child {
+                    margin-right: 0;
+                  }
+                }
+              }
+
+            }
+          }
+
+          &:hover {
+            cursor: pointer;
+            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);
+            }
+          }
+        }
+      }
+    }
+  }
 </style>