营地2.0-活动中心-样式

3d175f38 · wuwangwolihui · e0bde720 · 3d175f38 · 3d175f38 · 3d175f38
Commit 3d175f38 authored Sep 12, 2023 by wuwangwolihui
6 changed files
--- a/src/assets/img/1.png
+++ b/src/assets/img/1.png
--- a/src/assets/img/footer/service.png
+++ b/src/assets/img/footer/service.png
--- a/src/assets/img/footer/wb.png
+++ b/src/assets/img/footer/wb.png
--- a/src/components/base/Footer.vue
+++ b/src/components/base/Footer.vue
@@ -3,20 +3,28 @@
  <!--底部-->
  <div class="footer">
    <div class="com-container content">
-      <ul class="contact_list">
+      <div class="contact_us">
-        <li>
+        <div class="contact_list">
-          <i class="el-icon-message"></i>
+          <div class="contact_list_item">
-          <span>联系邮箱</span>ydhdservice@163.com
+            <i class="el-icon-message"></i>
-        </li>
+            <span>联系邮箱</span>ydhdservice@163.com
-        <!-- <li>
+          </div>
-          <i class="el-icon-phone-outline"></i>
+          <div class="contact_list_item">
-          <span>联系电话</span>010-56218127
+            <i class="el-icon-aim"></i>
-        </li> -->
+            <span>工作时间</span>周一至周五 09:00 - 12:00，14:00 - 18:00
-        <li>
+          </div>
-          <i class="el-icon-aim"></i>
+        </div>
-          <span>工作时间</span>周一至周五 09:00 - 12:00，14:00 - 18:00
+        <div class="contact_qr">
-        </li>
+          <div class="contact_qr_item">
-      </ul>
+            <img src="../../assets/img/footer/service.png"/>
+            <div class="name">大中衔接人才培养</div>
+          </div>
+          <div class="contact_qr_item">
+            <img src="../../assets/img/footer/wb.png"/>
+            <div class="name">大中贯通人才培养</div>
+          </div>
+        </div>
+      </div>
      <div class="line"></div>
      <div class="copyRight">
        <div>
@@ -45,34 +53,61 @@ export default {
 .footer {
  font-family: PingFang SC;
  font-size: 14px;
-  height: 169px;
+  /*height: 169px;*/
  background: #000000;
  opacity: 0.9;
  line-height: 60px;
  border-top: 1px solid #ccc;
  .content {
-    .contact_list {
+    .contact_us{
      display: flex;
      flex-flow: row;
+      justify-content: space-between;
      align-items: center;
-      height: 88px;
+      padding: 20px 0 10px;
-      margin: 0;
+      .contact_list {
-      padding: 0;
+        display: flex;
-      li {
+        flex-flow: column;
-        font-size: 12px;
+        align-items: flex-start;
-        height: 14px;
+        margin: 0;
-        line-height: 14px;
+        padding: 0;
-        font-family: PingFang SC;
+        .contact_list_item {
-        font-weight: 500;
+          font-size: 14px;
-        color: #ffffff;
+          height: 24px;
-        list-style: none;
+          line-height: 24px;
-        margin-right: 40px;
+          font-family: PingFang SC;
-        span {
+          font-weight: 500;
-          margin: 0 15px 0 7px;
+          color: #ffffff;
+          span {
+            margin: 0 15px 0 7px;
+          }
+          &:last-child {
+            margin-right: 0;
+          }
        }
-        &:last-child {
+      }
-          margin-right: 0;
+      .contact_qr{
+        display: flex;
+        flex-flow: row;
+        align-items: center;
+        .contact_qr_item{
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          justify-content: center;
+          margin-left: 20px;
+          img{
+            width: 88px;
+          }
+          .name{
+            font-size: 14px;
+            line-height: 24px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+          }
        }
      }
    }
@@ -90,7 +125,7 @@ export default {
      margin: 0;
      padding: 0;
      a {
-        font-size: 12px;
+        font-size: 14px;
        font-weight: 400;
        margin-right: 20px;
        color: #FFFFFF;

--- a/src/views/base/active/Active.vue
+++ b/src/views/base/active/Active.vue
 <template>
-  <div class="com-container active-container">
+  <div class="com-container active-container" v-loading="loading">
    <div class="active-search">
      <div class="active-search-title">活动筛选</div>
      <div class="active-search-content">
        <div class="content-item" v-for="(item, index) in labelList" :key="index">
          <div class="content-item-tit">{{item.categoryName}}</div>
          <el-checkbox
+            class="is-check-all"
            v-model="checkAll[index]"
            @change="handleCheckAllChange($event,1, item.labelLists, index)"
          >全部
@@ -15,7 +16,6 @@
            <el-checkbox v-for="(item2, index2) in item.labelLists"
                         :key="index2"
                         :label="item2.lableId"
-                         :class="checkAll[index]?'is-check-all':''"
                         border>{{item2.lableName}}
            </el-checkbox>
          </el-checkbox-group>
@@ -40,6 +40,7 @@
        <div class="content-item">
          <div class="content-item-tit">本站报名</div>
          <el-checkbox
+            class="is-check-all"
            v-model="checkAllSupp"
            @change="handleCheckAllChange($event,2, supportList)"
          >全部
@@ -49,12 +50,13 @@
            <el-checkbox v-for="(item, index) in supportList"
                         :key="index"
                         :label="item.lableId"
-                         :class="checkAllSupp?'is-check-all':''"
                         border>{{item.lableName}}
            </el-checkbox>
          </el-checkbox-group>
-          <el-button @click="resetHandle">重置</el-button>
+          <div class="btn-area">
-          <el-button @click="searchHandle">确定</el-button>
+            <el-button @click="resetHandle">重置</el-button>
+            <el-button @click="searchHandle">确定</el-button>
+          </div>
        </div>
      </div>
    </div>
@@ -122,20 +124,8 @@
            lableName: '不支持'
          },
        ],
-        selectIds: {
+        selectIds: {},
-          0: [],
+        checkAll: {},
-          1: [],
-          2: [],
-          3: [],
-          4: [],
-        },
-        checkAll: {
-          0: false,
-          1: false,
-          2: false,
-          3: false,
-          4: false,
-        },
        isSupport: [],
        checkAllSupp: false,
      }
@@ -206,7 +196,17 @@
          return false;
        }
        this.loading = true;
-        HotList(this.queryForm).then(res => {
+        let queryForm = JSON.parse(JSON.stringify(this.queryForm));
+        let flag = true;
+        for (let key in queryForm['ids']) {
+          if (!this.checkAll[key]) {
+            flag = false;
+          }
+        }
+        if (flag) {
+          queryForm['ids'] = {};
+        }
+        HotList(queryForm).then(res => {
          console.log(res)
          if (res.data.code != 200) {
            this.loading = false;
@@ -225,11 +225,20 @@
      // 获取筛选标签列表
      getLabelType() {
        LabelType({}).then(res => {
+          console.log(res)
          if (res.data.code != 200) {
            return this.$message.error(res.data.msg);
          }
-          this.labelList = res.data.data;
+          let labelList = res.data.data;
-          console.log(res)
+          let selectIds = {};
+          let checkAll = {};
+          labelList.forEach((item, index) => {
+            selectIds[index] = [];
+            checkAll[index] = false;
+          })
+          this.selectIds = selectIds;
+          this.checkAll = checkAll;
+          this.labelList = labelList;
        }).catch(err => {
          console.log(err)
        })
@@ -329,11 +338,11 @@
              }
            }
-            /*&.is-check-all {*/
+            &.is-check-all.is-checked {
-            /*  .el-checkbox__label {*/
+              .el-checkbox__label {
-            /*    color: #333333 !important;*/
+                font-weight: bold;
-            /*  }*/
+              }
-            /*}*/
+            }
          }
          ::v-deep .el-input {
@@ -365,20 +374,24 @@
            display: inline-block;
          }
-          .el-button {
+          .btn-area {
-            height: 36px;
+            /*margin-left: 130px;*/
-            color: #333333;
+            .el-button {
-            border-color: #333333;
+              height: 36px;
-            background-color: #ffffff;
+              color: #333333;
-            margin-left: 15px;
+              border-color: #333333;
-            &:hover {
-              color: var(--all_color);
-              border-color: var(--all_color);
              background-color: #ffffff;
+              margin-left: 15px;
+              &:hover {
+                color: var(--all_color);
+                border-color: var(--all_color);
+                background-color: #ffffff;
+              }
            }
          }
        }
      }
    }
@@ -419,7 +432,8 @@
          .active-list-item-bg {
            width: 100%;
-            height: 163px;
+            height: 13.6vw;
+            min-height: 163px;
            overflow: hidden;
            background-color: #D8D8D8;
            border-radius: 4px 4px 0px 0px;
@@ -446,7 +460,6 @@
          .active-list-item-cont {
            flex: 1;
-            /*height: 240px;*/
            padding: 10px 20px 0;
            background-color: #ffffff;
            border-radius: 0 0 4px 4px;
@@ -458,13 +471,13 @@
              flex-flow: row;
              align-items: center;
              line-height: 28px;
-              margin: 10px 0 5px;
+              margin: 0.8vw 0 0.4vw;
              .label {
                font-size: 12px;
                > span {
-                  padding: 0 10px;
+                  padding: 5px 10px;
                  border-radius: 8px;
                  color: #ffffff;
                  background-color: var(--all_color);
@@ -480,19 +493,22 @@
            .active-list-item-cont-txt1 {
              font-size: 16px;
-              line-height: 32px;
+              line-height: 28px;
+              margin: 0.4vw 0;
            }
            .active-list-item-cont-txt2 {
              font-size: 14px;
              color: #999999;
              line-height: 24px;
+              margin: 0.4vw 0;
            }
            .active-list-item-cont-txt3 {
              font-size: 15px;
              color: #EC808D;
-              line-height: 32px;
+              line-height: 28px;
+              margin: 0.4vw 0;
            }
            .active-list-item-cont-bottom {
@@ -501,10 +517,10 @@
              align-items: center;
              justify-content: space-between;
              border-top: 1px solid #cccccc;
-              margin-top: 10px;
+              margin-top: 1vw;
+              padding: 1vw 0;
              font-size: 14px;
-              height: 50px;
+              line-height: 32px;
-              line-height: 50px;
              cursor: pointer;
              .el-icon-right {

--- a/src/views/base/active/ActiveInfo.vue
+++ b/src/views/base/active/ActiveInfo.vue
@@ -27,9 +27,9 @@
          </div>
        </div>
        <div>
-          <el-button>报名未开放</el-button>
+          <el-button :disabled="true">报名未开放</el-button>
-          <el-button>立即报名</el-button>
+          <el-button @click="signUp">立即报名</el-button>
-          <el-button>报名已截止</el-button>
+          <el-button :disabled="true">报名已截止</el-button>
          <el-button :disabled="true">已结营</el-button>
        </div>
      </div>
@@ -132,8 +132,6 @@
 </template>
 <script>
-  import img from "../../../assets/img/recruit.png";
  export default {
    name: "ActiveInfo",
    data() {
@@ -161,6 +159,15 @@
      this.getInfo()
    },
    methods: {
+      // 立即报名按钮
+      signUp() {
+        let allToken = window.localStorage.getItem('index-token-all');
+        if (allToken) {
+          this.$router.push('/signUp/examInfo?code=' + this.activeInfo.code);
+        } else {
+          this.$router.push('/baseLogin');
+        }
+      },
      // 去活动详情页面（当前活动/往期活动回顾区域）
      toActiveInfo(type, id) {
        this.$router.push('/active/' + type + '/' + id);
@@ -208,7 +215,8 @@
        this.activeContent = 1;
        this.activeInfo = {
          id: 1,
-          cover: img,
+          code: '0e2a2be59c33479ca91a0e3b0df88744',
+          cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
          label: '线上',
          name: '2023年寒假历史营地',
          school: ['南开大学', '历史学', '大学生'],
@@ -239,7 +247,7 @@
          this.backList = [
            {
              id: 1,
-              cover: img,
+              cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
              label: '线上',
              name: '2023年寒假历史营地1',
              school: ['南开大学', '历史学', '大学生'],
@@ -252,7 +260,7 @@
            },
            {
              id: 2,
-              cover: img,
+              cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
              label: '线上',
              name: '2023年寒假历史营地2',
              school: ['南开大学', '历史学', '大学生'],
@@ -268,7 +276,7 @@
          this.nowList = [
            {
              id: 3,
-              cover: img,
+              cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
              label: '线上',
              name: '2023年寒假历史营地3',
              school: ['南开大学', '历史学', '大学生'],
@@ -281,7 +289,7 @@
            },
            {
              id: 4,
-              cover: img,
+              cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
              label: '线上',
              name: '2023年寒假历史营地4',
              school: ['南开大学', '历史学', '大学生'],
@@ -344,7 +352,7 @@
      .active-info-cover {
        flex: 1;
-        max-height: 300px;
+        max-height: 340px;
        overflow: hidden;
        border-radius: 4px;
@@ -455,6 +463,7 @@
          &.is-disabled {
            color: #333333;
            border-color: #333333;
+            opacity: 0.5;
          }
        }
      }
@@ -529,6 +538,7 @@
              &:hover {
                border-bottom: 2px solid #eeeeee;
              }
              &.is-active {
                border-bottom: 2px solid var(--all_color);
              }
@@ -543,7 +553,7 @@
      .right-area {
        flex: 1.5;
-        min-width: 290px;
+        min-width: 320px;
        .question-area {