UI 2.0

src/api/index.js

@@ -277,3 +277,8 @@ export function getMessage(id) {
 export function readMessage(id) {
   return httpRequest.post(`/api/alumni/v1/student/messages/read/${id}`)
 }
+
+// 获取热门推荐
+export function getPopular() {
+  return httpRequest.get('/api/alumni/v1/organization/recommend')
+}

src/assets/css/base.css

@@ -92,9 +92,8 @@ html {
 body {
   font-size: 14px;
   line-height: 1.4;
-  color: #222;
-  font-family: -apple-system-font, 'Helvetica Neue', 'PingFang SC',
-    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  color: #1b1b1b;
+  font-family: -apple-system-font, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
   background-color: #f4f4f4;
 }
 input[type='search']::-webkit-search-cancel-button {
@@ -124,11 +123,7 @@ input[type='search']::-webkit-search-cancel-button {
   line-height: 40px;
   text-align: center;
   color: #fff;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 201, 44, 1) 0%,
-    rgba(255, 116, 42, 1) 100%
-  );
+  background: #af1b40;
   border-radius: 20px;
   cursor: pointer;
 }
@@ -139,17 +134,14 @@ input[type='search']::-webkit-search-cancel-button {
   line-height: 40px;
   text-align: center;
   color: #fff;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 201, 44, 1) 0%,
-    rgba(255, 116, 42, 1) 100%
-  );
+  background: #af1b40;
   border-radius: 20px;
   cursor: pointer;
 }
 .empty {
-  margin-top: 50px;
+  margin: 20px 0;
   padding-top: 170px;
+  padding-bottom: 20px;
   font-size: 14px;
   color: #999;
   background: url('~@/assets/img/icon_empty.png') no-repeat center top;
@@ -201,7 +193,7 @@ input[type='search']::-webkit-search-cancel-button {
   border-color: #f1f1f1;
 }
 .van-tabs__line {
-  background-color: #ff6767;
+  background-color: #af1b40;
 }
 
 .van-popup--bottom {
@@ -224,7 +216,7 @@ input[type='search']::-webkit-search-cancel-button {
 } */
 
 .main {
-  margin: 0 20px;
+  margin: 0 15px;
 }
 .main::after {
   content: '';

src/components/ActivityItem.vue

 <template>
   <div class="activity-item" @click="onClick">
-    <div class="activity-item-index" :class="topClass" v-if="showIndex">
-      <template v-if="!topClass">
-        {{ currentIndex }}
-      </template>
-    </div>
-    <div class="activity-item-pic" v-if="data.activity_image">
-      <img :src="data.activity_image" />
+    <div class="activity-item-index" :class="topClass" v-if="showIndex && index < 3"></div>
+    <div class="activity-item-pic">
+      <img :src="data.activity_image" v-if="data.activity_image" />
     </div>
     <div class="activity-item-main">
       <div class="activity-item-title">{{ data.activity_name }}</div>
       <div class="activity-item-content">
-        <p class="activity-item-content__city">{{ data.activity_city }}</p>
-        <p class="activity-item-content__ft">
-          <span>{{ data.activity_time | dateFormat }}</span>
-          <span>{{ data.stu_nums }}人报名</span>
-        </p>
+        <p>{{ data.activity_city }} · {{data.initiator}} · {{ data.stu_nums }}人参与</p>
+        <p>{{ data.activity_time | dateFormat }}</p>
       </div>
+      <div class="status" v-html="statusText"></div>
     </div>
   </div>
 </template>
@@ -37,6 +31,11 @@ export default {
     },
     topClass() {
       return this.currentIndex <= 3 ? `top${this.currentIndex}` : ''
+    },
+    statusText() {
+      return dayjs().isAfter(dayjs(this.data.activity_time), 'day')
+        ? '<span class="is-finish">已结束</span>'
+        : '<span class="is-processing">进行中</span>'
     }
   },
   filters: {
@@ -53,15 +52,16 @@ export default {
 </script>
 <style lang="scss" scoped>
 .activity-item {
+  position: relative;
   display: flex;
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-  border-bottom: 1px solid #f5f5f5;
+  margin-bottom: 15px;
 }
 .activity-item-pic {
   width: 120px;
-  height: 62px;
-  margin-right: 10px;
+  height: 75px;
+  margin-right: 15px;
+  background-color: #f3f4f5;
+  border-radius: 4px;
   overflow: hidden;
   img {
     width: 100%;
@@ -75,30 +75,31 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
+  padding: 10px 0;
 }
 .activity-item-title {
-  font-size: 14px;
-  color: #222;
+  font-size: 15px;
+  color: #1b1b1b;
+  line-height: 1;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 .activity-item-content {
   p {
-    color: #999;
+    margin-top: 8px;
+    font-size: 12px;
+    color: #a0a0a0;
+    line-height: 1;
   }
 }
-.activity-item-content__ft {
-  display: flex;
-  justify-content: space-between;
-}
 .activity-item-index {
+  position: absolute;
+  left: 3px;
+  top: 3px;
   width: 25px;
-  margin-right: 10px;
-  font-size: 14px;
-  color: #999;
-  line-height: 62px;
-  text-align: center;
+  height: 25px;
+  z-index: 2;
 }
 .top1 {
   background: url('~@/assets/img/top_01.png') no-repeat center;
@@ -112,4 +113,26 @@ export default {
   background: url('~@/assets/img/top_03.png') no-repeat center;
   background-size: contain;
 }
+.status {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  ::v-deep span {
+    height: 15px;
+    padding: 0 4px;
+    font-size: 12px;
+    line-height: 15px;
+    border-radius: 2px;
+    display: inline-block;
+  }
+  ::v-deep .is-finish {
+    color: #ce0022;
+    background: #ffedf0;
+  }
+  ::v-deep .is-processing {
+    color: #1f78d4;
+    background: #e2f0ff;
+  }
+}
 </style>

src/components/Card.vue

@@ -2,7 +2,9 @@
   <div class="card">
     <div class="card-hd">
       <h3 class="card-hd__title">{{ title }}</h3>
-      <div class="card-hd__aside"><slot name="aside"></slot></div>
+      <div class="card-hd__aside">
+        <slot name="aside"></slot>
+      </div>
     </div>
     <div class="card-bd">
       <slot></slot>
@@ -20,20 +22,14 @@ export default {
 </script>
 
 <style lang="scss">
-.card {
-}
 .card-hd {
   display: flex;
   justify-content: space-between;
-  padding: 10px 0 20px;
+  padding: 10px 0;
 }
 .card-hd__title {
-  padding-bottom: 5px;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 3px solid #ff6767;
-}
-.card-bd {
+  font-size: 17px;
+  font-weight: 500;
+  color: #1b1b1b;
 }
 </style>

src/components/GroupItem.vue

 <template>
   <div class="group-item" @click="onClick">
-    <div class="group-item-index" :class="topClass" v-if="showIndex">
-      <template v-if="!topClass">
-        {{ currentIndex }}
-      </template>
-    </div>
-    <div class="group-item-pic" v-if="data.logo">
-      <img :src="data.logo" />
+    <div class="group-item-index" :class="topClass" v-if="showIndex && index < 3"></div>
+    <div class="group-item-pic">
+      <img :src="data.logo" v-if="data.logo" />
     </div>
     <div class="group-item-main">
       <div class="group-item-title line-clamp">{{ data.org_name }}</div>
-      <div class="group-item-content">
-        <p class="group-item-content__num">
-          <template v-if="data.num">{{ data.num }}人</template>
-        </p>
-        <p class="group-item-content__city">{{ data.org_city }}</p>
-        <p class="group-item-content__hot">{{ data.hot }}</p>
-      </div>
+      <div class="group-item-content">{{ data.num }}成员 · {{ data.hot }}热度</div>
     </div>
   </div>
 </template>
@@ -46,20 +36,21 @@ export default {
 </script>
 <style lang="scss" scoped>
 .group-item {
+  position: relative;
   display: flex;
-  padding-bottom: 20px;
-  margin-bottom: 20px;
-  border-bottom: 1px solid #f5f5f5;
+  margin-bottom: 15px;
 }
 .group-item-pic {
   width: 120px;
-  height: 62px;
-  margin-right: 10px;
+  height: 75px;
+  margin-right: 15px;
+  background-color: #f3f4f5;
+  border-radius: 4px;
   overflow: hidden;
   img {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
   }
 }
 .group-item-main {
@@ -68,37 +59,25 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
+  padding: 10px 0;
 }
 .group-item-title {
-  font-size: 14px;
-  color: #222;
+  font-size: 15px;
+  color: #1b1b1b;
+  line-height: 1;
 }
 .group-item-content {
-  display: flex;
-  color: #999;
-}
-.group-item-content__num {
-  flex: 1;
-}
-.group-item-content__city {
-  margin: 0 10px;
-  max-width: 70px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.group-item-content__hot {
-  background: url('~@/assets/img/icon_hot.png') no-repeat left center;
-  background-size: 8px auto;
-  padding-left: 10px;
+  font-size: 12px;
+  color: #a0a0a0;
+  line-height: 1;
 }
 .group-item-index {
+  position: absolute;
+  left: 3px;
+  top: 3px;
   width: 25px;
-  margin-right: 10px;
-  font-size: 14px;
-  color: #999;
-  line-height: 62px;
-  text-align: center;
+  height: 25px;
+  z-index: 2;
 }
 .top1 {
   background: url('~@/assets/img/top_01.png') no-repeat center;

src/components/GroupList.vue

 <template>
   <div class="list">
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      @load="onLoad"
-      v-if="list.length"
-    >
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
       <group-item
         v-for="(item, index) in list"
         :data="item"
@@ -70,8 +65,7 @@ export default {
         })
     },
     onLoad() {
-      this.requestParams.offset =
-        this.requestParams.offset + this.requestParams.limit
+      this.requestParams.offset = this.requestParams.offset + this.requestParams.limit
       this.getList()
     },
     // 刷新

src/components/MyActivityItem.vue

 <template>
   <div class="my-activity-item" @click="onClick">
     <div class="my-activity-item-bd">
+      <div class="my-activity-item-pic">
+        <img :src="data.activity_image" v-if="data.activity_image" />
+      </div>
       <div class="my-activity-item-main">
-        <div class="my-activity-item-title">
-          {{ data.activity_demand_type_str }}
-        </div>
+        <div class="my-activity-item-title">{{ data.activity_name }}</div>
         <div class="my-activity-item-content">
-          <p>
-            <b>地点:</b><span>{{ data.activity_city }}</span>
-          </p>
-          <p>
-            <b>时间:</b><span>{{ data.activity_time }}</span>
-          </p>
-          <p>
-            <b>主题:</b><span>{{ data.activity_name }}</span>
-          </p>
-          <p>
-            <b>审核状态:</b
-            ><span :class="statusClass">{{ data.approve_status_str }}</span>
-          </p>
+          <p>{{ data.activity_city }} · {{data.initiator}} · {{ data.stu_nums }}人参与</p>
+          <p>{{ data.activity_time }}</p>
         </div>
-      </div>
-      <div class="my-activity-item-pic" v-if="data.activity_image">
-        <img :src="data.activity_image" />
+        <div class="status" v-html="statusText"></div>
       </div>
     </div>
-    <div class="my-activity-item-ft">
+    <!-- <div class="my-activity-item-ft">
       <ul>
         <li v-if="data.is_mine && data.approve_status !== '1'">
           <div
@@ -33,9 +21,7 @@
             @click.stop="
               $router.push({ name: 'activityUpdate', params: { id: data.id } })
             "
-          >
-            管理
-          </div>
+          >管理</div>
         </li>
         <li v-else>
           <div class="button default-button">详情</div>
@@ -46,16 +32,16 @@
             @click.stop="
               $router.push({ name: 'activityMember', params: { id: data.id } })
             "
-          >
-            成员列表
-          </div>
+          >成员列表</div>
         </li>
       </ul>
-    </div>
+    </div>-->
   </div>
 </template>
 
 <script>
+import dayjs from 'dayjs'
+
 export default {
   name: 'MyActivityItem',
   props: { data: Object, isCheck: Boolean },
@@ -67,6 +53,11 @@ export default {
         'status-success': status === '1' || status === '2',
         'status-warning': status === '0'
       }
+    },
+    statusText() {
+      return dayjs().isAfter(dayjs(this.data.activity_time), 'day')
+        ? '<span class="is-finish">已结束</span>'
+        : '<span class="is-processing">进行中</span>'
     }
   },
   methods: {
@@ -78,49 +69,50 @@ export default {
 </script>
 <style lang="scss" scoped>
 .my-activity-item {
-  margin-bottom: 10px;
-  padding: 20px;
-  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 6px;
+  position: relative;
+  display: flex;
+  margin-bottom: 15px;
 }
 .my-activity-item-bd {
   display: flex;
   overflow: hidden;
 }
+
+.my-activity-item-pic {
+  width: 120px;
+  height: 75px;
+  margin-right: 15px;
+  background-color: #f3f4f5;
+  border-radius: 4px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
 .my-activity-item-main {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 10px 0;
 }
 .my-activity-item-title {
   font-size: 15px;
-  color: #222;
+  color: #1b1b1b;
+  line-height: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .my-activity-item-content {
-  color: #999;
   p {
-    margin-top: 10px;
-    display: flex;
-    b {
-      color: #999;
-      white-space: nowrap;
-    }
-    span {
-      margin-left: 5px;
-      flex: 1;
-      color: #222;
-      overflow: 1;
-    }
-  }
-}
-.my-activity-item-pic {
-  width: 100px;
-  height: 100px;
-  margin-left: 10px;
-  border-radius: 6px;
-  overflow: hidden;
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+    margin-top: 8px;
+    font-size: 12px;
+    color: #a0a0a0;
+    line-height: 1;
   }
 }
 .my-activity-item-ft {
@@ -145,11 +137,29 @@ export default {
     font-size: 12px;
     color: #fff;
     line-height: 30px;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 201, 44, 1) 0%,
-      rgba(255, 116, 42, 1) 100%
-    );
+    background: linear-gradient(180deg, rgba(255, 201, 44, 1) 0%, rgba(255, 116, 42, 1) 100%);
+  }
+}
+.status {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  ::v-deep span {
+    height: 15px;
+    padding: 0 4px;
+    font-size: 12px;
+    line-height: 15px;
+    border-radius: 2px;
+    display: inline-block;
+  }
+  ::v-deep .is-finish {
+    color: #ce0022;
+    background: #ffedf0;
+  }
+  ::v-deep .is-processing {
+    color: #1f78d4;
+    background: #e2f0ff;
   }
 }
 </style>

src/components/MyGroupItem.vue

 <template>
   <div class="my-group-item" @click="onClick">
     <div class="my-group-item-bd">
+      <div class="my-group-item-pic">
+        <img :src="data.logo" v-if="data.logo" />
+      </div>
       <div class="my-group-item-main">
         <div class="my-group-item-title line-clamp">{{ data.org_name }}</div>
         <div class="my-group-item-content">
-          <p>
-            <b>类型:</b>
-            <span>{{ data.org_type_str }}</span>
-          </p>
-          <p v-if="data.org_city">
-            <b>地点:</b>
-            <span>{{ data.org_city }}</span>
-          </p>
-          <p v-if="data.industry">
-            <b>行业:</b>
-            <span>{{ data.industry }}</span>
-          </p>
-          <p v-if="data.purpose">
-            <b>宗旨:</b>
-            <span>{{ data.purpose }}</span>
-          </p>
-          <p>
-            <b>审核状态:</b>
-            <span :class="statusClass">{{ data.approve_status_str }}</span>
-          </p>
+          <p>人</p>
         </div>
       </div>
-      <div class="my-group-item-pic" v-if="data.logo">
-        <img :src="data.logo" />
-      </div>
+      <div class="hot">活跃度</div>
     </div>
-    <div class="my-group-item-ft">
+    <!-- <div class="my-group-item-ft">
       <ul>
         <li v-if="data.is_mine && data.approve_status === '-1'">
           <div
@@ -38,9 +20,7 @@
             @click.stop="
               $router.push({ name: 'groupUpdate', params: { id: data.id } })
             "
-          >
-            编辑
-          </div>
+          >编辑</div>
         </li>
         <li v-else>
           <div class="button default-button">详情</div>
@@ -48,16 +28,8 @@
         <li>
           <div
             class="button default-button"
-            @click.stop="
-              $router.push({
-                name: 'groupMember',
-                params: { id: data.id },
-                query: { is_mine: `${data.is_mine}` }
-              })
-            "
-          >
-            成员列表
-          </div>
+            @click.stop="$router.push({ name: 'groupMember', params: { id: data.id }, query: { is_mine: `${data.is_mine}` } })"
+          >成员列表</div>
         </li>
         <li>
           <div
@@ -65,30 +37,18 @@
             @click.stop="
               $router.push({ name: 'groupActivity', params: { id: data.id } })
             "
-          >
-            活动
-          </div>
+          >活动</div>
         </li>
       </ul>
-    </div>
+    </div>-->
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Card',
-  props: {
-    data: Object,
-    index: Number,
-    showIndex: { type: Boolean, default: false }
-  },
+  name: 'MyGroupItem',
+  props: { data: Object },
   computed: {
-    currentIndex() {
-      return this.index + 1
-    },
-    topClass() {
-      return this.currentIndex <= 3 ? `top${this.currentIndex}` : ''
-    },
     statusClass() {
       const status = this.data.approve_status
       return {
@@ -107,52 +67,47 @@ export default {
 </script>
 <style lang="scss" scoped>
 .my-group-item {
-  margin-bottom: 10px;
-  padding: 20px;
-  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
-  border-radius: 6px;
+  position: relative;
+  display: flex;
+  margin-bottom: 15px;
 }
 .my-group-item-bd {
   display: flex;
-  // align-items: flex-start;
   overflow: hidden;
 }
+
+.my-group-item-pic {
+  width: 120px;
+  height: 75px;
+  margin-right: 15px;
+  background-color: #f3f4f5;
+  border-radius: 4px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
 .my-group-item-main {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 10px 0;
 }
 .my-group-item-title {
   font-size: 15px;
-  color: #222;
+  color: #1b1b1b;
+  line-height: 1;
 }
 .my-group-item-content {
-  color: #999;
-  p {
-    margin-top: 10px;
-    display: flex;
-    b {
-      color: #999;
-      white-space: nowrap;
-    }
-    span {
-      margin-left: 5px;
-      flex: 1;
-      color: #222;
-      overflow: 1;
-    }
-  }
-}
-.my-group-item-pic {
-  width: 100px;
-  height: 100px;
-  margin-left: 10px;
-  border-radius: 6px;
-  overflow: hidden;
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
+  font-size: 12px;
+  color: #a0a0a0;
+  line-height: 1;
 }
+
 .my-group-item-ft {
   margin-top: 20px;
   ul {
@@ -175,11 +130,20 @@ export default {
     font-size: 12px;
     color: #fff;
     line-height: 30px;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 201, 44, 1) 0%,
-      rgba(255, 116, 42, 1) 100%
-    );
+    background: linear-gradient(180deg, rgba(255, 201, 44, 1) 0%, rgba(255, 116, 42, 1) 100%);
   }
 }
+.hot {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 15px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 15px;
+  border-radius: 2px;
+  color: #ce0022;
+  background: #ffedf0;
+}
 </style>

src/components/MyGroupList.vue

 <template>
   <div class="list">
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      @load="onLoad"
-      v-if="list.length"
-    >
-      <my-group-item
-        v-for="item in list"
-        :data="item"
-        :key="item.id"
-      ></my-group-item>
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <my-group-item v-for="item in list" :data="item" :key="item.id"></my-group-item>
     </van-list>
     <template v-else>
       <slot name="empty">

src/components/SearchBar.vue

 <template>
   <div class="search-bar">
-    <form action="" @submit.prevent="onSearch">
+    <form action @submit.prevent="onSearch">
       <input
         type="search"
         class="search-input"
+        :class="classes"
         :placeholder="placeholder"
         v-model="currentValue"
         v-bind="$attrs"
@@ -19,7 +20,7 @@ export default {
   props: {
     value: String,
     focus: { type: Boolean, default: false },
-    placeholder: { type: String, default: '搜索' }
+    placeholder: { type: String, default: '' }
   },
   data() {
     return {
@@ -35,6 +36,11 @@ export default {
   computed: {
     formInput() {
       return this.$refs.formInput
+    },
+    classes() {
+      return {
+        'is-focus': this.currentValue
+      }
     }
   },
   methods: {
@@ -57,17 +63,19 @@ export default {
 
 <style lang="scss">
 .search-bar {
-  padding: 10px 0;
+  padding: 10px 0 15px;
 }
 .search-input {
   display: block;
   width: 100%;
-  height: 32px;
-  line-height: 32px;
-  background: url('~@/assets/img/icon_search.png') no-repeat 22px center;
-  background-size: 16px;
-  padding-left: 50px;
-  border: 1px solid #f1f1f1;
-  border-radius: 16px;
+  height: 30px;
+  line-height: 30px;
+  background: #f3f4f5 url('~@/assets/img/icon_search.png') no-repeat center center;
+  background-size: 15px;
+  padding: 0 20px;
+  border-radius: 15px;
+  &.is-focus {
+    background: #f3f4f5;
+  }
 }
 </style>

src/components/TabBar.vue

@@ -6,26 +6,15 @@
           class="tab-bar-item tab-bar-item__home"
           :class="{ 'is-active': isActive('home') }"
           @click="$router.push('home')"
-        >
-          首页
-        </li>
-        <li
-          class="tab-bar-item"
-          @click="$router.push({ name: 'createActivity' })"
-          v-if="hasCreate"
-        >
-          <div class="tab-bar-item-create">
-            <div class="tab-bar-item-create__icon"></div>
-            <div class="tab-bar-item-create__title">创建</div>
-          </div>
+        >首页</li>
+        <li class="tab-bar-item" @click="$router.push({ name: 'createActivity' })" v-if="hasCreate">
+          <div class="tab-bar-item-create"></div>
         </li>
         <li
           class="tab-bar-item tab-bar-item__my"
           :class="{ 'is-active': isActive('my') }"
           @click="$router.push('my')"
-        >
-          我的
-        </li>
+        >我的</li>
       </ul>
     </div>
   </div>
@@ -67,7 +56,7 @@ export default {
 
 <style lang="scss">
 .tab-bar {
-  height: 80px;
+  height: 50px;
 }
 .tab-bar-inner {
   position: fixed;
@@ -80,34 +69,30 @@ export default {
   margin: 0 auto;
   padding-bottom: env(safe-area-inset-bottom);
   box-sizing: content-box;
-  box-shadow: 0px -8px 16px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: 0px -3px 8px 0px rgba(0, 0, 0, 0.2);
 }
 .tab-bar-list {
   display: flex;
+  padding-top: 5px;
 }
 .tab-bar-item {
   flex: 1;
   font-size: 12px;
-  color: #999;
+  color: #444;
   text-align: center;
+  line-height: 1;
 }
 .tab-bar-item.is-active {
-  color: #ff6767;
+  color: #af1b40;
 }
 .tab-bar-item-create {
-  margin: -20px auto 0;
-}
-.tab-bar-item-create__icon {
-  width: 60px;
-  height: 60px;
+  width: 40px;
+  height: 40px;
   margin: 0 auto;
   background: #fff url('~@/assets/img/tab_create.png') no-repeat center center;
   background-size: 100%;
   border-radius: 50%;
 }
-.tab-bar-item-create__title {
-  margin-top: -10px;
-}
 .tab-bar-item__home {
   padding-top: 30px;
   background: url('~@/assets/img/tab_home.png') no-repeat center 2px;

src/views/activity/Index.vue

@@ -3,7 +3,7 @@
     <!-- 搜索 -->
     <search-bar readonly @click.native="onSearch"></search-bar>
     <card :title="title">
-      <activity-list :show-index="!type" :params="{ type }"></activity-list>
+      <activity-list :show-index="!type" :params="{ type }" :showIndex="true"></activity-list>
     </card>
   </div>
 </template>
@@ -31,7 +31,7 @@ export default {
         4: '找工作',
         5: '运动家'
       }
-      return typeMap[this.type] || '活动热度榜'
+      return typeMap[this.type] || '活动排行榜'
     }
   },
   methods: {

src/views/activity/Item.vue

 <template>
-  <div class="detail">
+  <div class="main">
+    <!-- 封面 -->
+    <div class="detail-pic" v-if="detail.activity_image">
+      <img :src="detail.activity_image" />
+    </div>
     <!-- 标题 -->
     <div class="detail-title">
       <h1>{{ detail.activity_name }}</h1>
     </div>
     <!-- 作者 -->
-    <div class="detail-user" v-if="detail.initiator">
+    <!-- <div class="detail-user" v-if="detail.initiator">
       <div class="detail-user__pic">
         <img :src="detail.initiator.avatar | avatar" />
       </div>
@@ -14,59 +18,49 @@
         <p>{{ datetimeText }}</p>
       </div>
       <div class="detail-user__tool" v-if="canJoin">
-        <span
-          class="join-button"
-          @click="joinActivity"
-          v-if="detail.button_show === 1"
-          >报名</span
-        >
-        <span
-          class="join-button"
-          v-if="detail.button_show === 2"
-          @click="cancelJoinActivity"
-          >已报名</span
-        >
+        <span class="join-button" @click="joinActivity" v-if="detail.button_show === 1">报名</span>
+        <span class="join-button" v-if="detail.button_show === 2" @click="cancelJoinActivity">已报名</span>
       </div>
-    </div>
-    <!-- 封面 -->
-    <div class="detail-pic" v-if="detail.activity_image">
-      <img :src="detail.activity_image" />
-    </div>
-    <!-- 内容 -->
-    <div class="detail-content" v-html="contentHtml"></div>
+    </div>-->
     <div class="detail-form" v-if="detail.activity_type === '10'">
+      <div class="detail-form__item" v-if="detail.initiator">
+        <div class="detail-form__label">组织：</div>
+        <div class="detail-form__content">{{ detail.initiator.nickname }}</div>
+      </div>
       <div class="detail-form__item" v-if="detail.activity_time">
-        <div class="detail-form__label">
-          <span class="detail-form-icon detail-form-icon__clock"></span>
-          时间：
-        </div>
+        <div class="detail-form__label">时间：</div>
         <div class="detail-form__content">{{ detail.activity_time }}</div>
       </div>
       <div class="detail-form__item" v-if="detail.activity_address">
-        <div class="detail-form__label">
-          <span class="detail-form-icon detail-form-icon__address"></span>
-          地点：
-        </div>
-        <div class="detail-form__content">{{ detail.activity_address }}</div>
+        <div class="detail-form__label">地点：</div>
+        <div class="detail-form__content">{{detail.activity_city}} · {{ detail.activity_address }}</div>
+      </div>
+      <div class="detail-form__item" v-if="detail.participator_limit">
+        <div class="detail-form__label">人数：</div>
+        <div class="detail-form__content">{{ detail.participator_limit }}人</div>
       </div>
-      <!-- <div class="detail-form__item" v-if="detail.participator_limit">
-        <div class="detail-form__label">
-          <span class="detail-form-icon detail-form-icon__peoples"></span>
-          希望人数：
-        </div>
-        <div class="detail-form__content">
-          {{ detail.participator_limit }}人
-        </div>
-      </div> -->
     </div>
+    <!-- 内容 -->
+    <div class="detail-content" v-html="contentHtml"></div>
     <!-- 评论 -->
     <div class="detail-comments" v-if="hasComment">
-      <comment-list
-        relatedType="1"
-        :activityId="pid"
-        :data="commentList"
-        @update="getCommentList"
-      ></comment-list>
+      <comment-list relatedType="1" :activityId="pid" :data="commentList" @update="getCommentList"></comment-list>
+    </div>
+    <div class="buttons" v-if="canJoin">
+      <input
+        type="button"
+        class="button button-primary"
+        value="报名"
+        @click="joinActivity"
+        v-if="detail.button_show === 1"
+      />
+      <input
+        type="button"
+        class="button button-default"
+        value="已报名"
+        v-if="detail.button_show === 2"
+        @click="cancelJoinActivity"
+      />
     </div>
   </div>
 </template>
@@ -100,7 +94,8 @@ export default {
       return !!this.detail.is_mine
     },
     hasComment() {
-      return this.detail.comment_switch === '1'
+      // return this.detail.comment_switch === '1'
+      return false
     },
     contentHtml() {
       const content = this.detail.activity_contents || ''
@@ -108,11 +103,7 @@ export default {
     },
     canJoin() {
       // 1显示报名2显示取消3均不显示
-      return (
-        this.isPass &&
-        !this.isMyPublished &&
-        [1, 2].includes(this.detail.button_show)
-      )
+      return this.isPass && !this.isMyPublished && [1, 2].includes(this.detail.button_show)
     }
   },
   methods: {
@@ -159,12 +150,11 @@ export default {
 
 <style lang="scss" scoped>
 .detail {
-  padding: 10px 20px;
+  margin: 0 20px;
 }
 .detail-pic {
-  margin-left: -20px;
-  margin-right: -20px;
-  margin-top: 20px;
+  margin-left: -15px;
+  margin-right: -15px;
   img {
     width: 100%;
   }
@@ -199,39 +189,36 @@ export default {
   padding: 0 20px;
   line-height: 30px;
   color: #fff;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 201, 44, 1) 0%,
-    rgba(255, 116, 42, 1) 100%
-  );
+  background: linear-gradient(180deg, rgba(255, 201, 44, 1) 0%, rgba(255, 116, 42, 1) 100%);
   box-shadow: 0px 5px 20px 0px rgba(253, 3, 20, 0.3);
   border-radius: 20px;
   cursor: pointer;
 }
 .detail-title {
+  padding: 18px 0 6px;
   h1 {
-    font-size: 18px;
-    color: #333;
-    line-height: 26px;
+    font-size: 17px;
+    color: #313131;
+    line-height: 2;
   }
 }
 .detail-content {
-  margin-top: 10px;
-  font-size: 15px;
-  color: #222;
-  line-height: 30px;
+  margin-top: 12px;
+  padding: 16px 0;
+  font-size: 13px;
+  color: #313131;
+  line-height: 18px;
+  border-top: 1px solid #c9c9c9;
   p {
-    font-size: 14px;
-    color: #222;
-    line-height: 30px;
-    text-indent: 2em;
+    font-size: 13px;
+    color: #313131;
+    line-height: 18px;
   }
 }
 .detail-form__item {
   display: flex;
-  align-items: flex-start;
-  margin-top: 20px;
-  line-height: 20px;
+  font-size: 12px;
+  line-height: 18px;
 }
 .detail-form__label {
   display: flex;
@@ -240,22 +227,28 @@ export default {
   flex: 1;
   overflow: hidden;
 }
-.detail-form-icon {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
+.buttons {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 34px;
+  text-align: center;
 }
-.detail-form-icon__clock {
-  background: url('~@/assets/img/icon_clock.png') no-repeat center;
-  background-size: contain;
+.button {
+  display: inline-block;
+  min-width: 200px;
+  height: 40px;
+  padding: 0 16px;
+  line-height: 40px;
+  color: #fff;
+  text-align: center;
+  border-radius: 20px;
+  margin: 0 10px;
 }
-.detail-form-icon__address {
-  background: url('~@/assets/img/icon_address.png') no-repeat center;
-  background-size: contain;
+.button-default {
+  background: #ccc;
 }
-.detail-form-icon__peoples {
-  background: url('~@/assets/img/icon_peoples.png') no-repeat center;
-  background-size: contain;
+.button-primary {
+  background: #af1b40;
 }
 </style>

src/views/create/Activity.vue

@@ -2,12 +2,7 @@
   <div class="main">
     <card title="创建活动">
       <v-form ref="form" :model="formModel" :fields="fields" @submit="onSubmit">
-        <input
-          type="button"
-          value="确认创建，提交审核"
-          class="submit-button"
-          @click="handleSubmit"
-        />
+        <input type="button" value="确认创建，提交审核" class="submit-button" @click="handleSubmit" />
       </v-form>
     </card>
   </div>
@@ -37,7 +32,8 @@ export default {
           name: 'activity_image',
           label: '封面',
           required: true,
-          placeholder: '请上传活动封面'
+          placeholder: '请上传活动封面',
+          rules: [{ required: true, message: '请上传活动封面' }]
         },
         {
           type: 'textarea',

src/views/group/Activity.vue

 <template>
-  <div class="main">
-    <card title="活动列表">
-      <van-list
-        v-model="loading"
-        :finished="finished"
-        @load="onLoad"
-        v-if="list.length"
-      >
-        <activity-item
-          v-for="item in list"
-          :data="item"
-          :key="item.id"
-        ></activity-item>
-      </van-list>
-      <div class="empty" v-else>暂时没有内容哦，去别处看看吧～</div>
-    </card>
-  </div>
+  <card title="举办活动">
+    <van-list v-model="loading" :finished="finished" @load="onLoad" v-if="list.length">
+      <activity-item v-for="item in list" :data="item" :key="item.id"></activity-item>
+    </van-list>
+    <div class="empty" v-else>暂时没有内容哦，去别处看看吧～</div>
+  </card>
 </template>
 
 <script>
@@ -56,8 +45,7 @@ export default {
         })
     },
     onLoad() {
-      this.requestParams.offset =
-        this.requestParams.offset + this.requestParams.limit
+      this.requestParams.offset = this.requestParams.offset + this.requestParams.limit
       this.getList()
     },
     // 刷新

src/views/group/Index.vue

 <template>
   <div class="main">
     <!-- 搜索 -->
-    <search-bar
-      readonly
-      @click.native="$router.push({ name: 'search' })"
-    ></search-bar>
+    <search-bar readonly @click.native="$router.push({ name: 'search' })"></search-bar>
     <card title="组织排行榜">
       <group-list :show-index="true"></group-list>
     </card>

src/views/group/Item.vue

 <template>
   <div class="main">
-    <card title="组织详情" v-if="detail">
+    <div class="bg">
+      <img :src="detail.logo" class="group-avatar" />
+      <h1 class="group-name">{{detail.org_name}}</h1>
+    </div>
+    <card :title="detail.org_name">
       <template #aside>
         <h6
           class="leave-group"
           v-if="detail.button_show === 3 && !detail.is_mine"
           @click="onLeave"
-        >
-          退出组织
-        </h6>
+        >退出组织</h6>
       </template>
-      <div class="info">
-        <template v-for="item in fields">
-          <div class="info-item" :key="item.name" v-if="detail[item.name]">
-            <div class="info-item__label">{{ item.label }}</div>
-            <div class="info-item__content">
-              <template v-if="item.computed">
-                <div v-html="item.computed(detail[item.name], detail)"></div>
-              </template>
-              <template v-else>
-                {{ detail[item.name] }}
-              </template>
-            </div>
-          </div>
-        </template>
-      </div>
-      <div class="buttons">
-        <input
-          type="button"
-          class="button button-info"
-          value="查看更多活动"
-          v-if="detail.button_show === 3"
-          @click="$router.push({ name: 'groupActivity', params: { id: pid } })"
-        />
-        <!-- <input
+      <div class="group-count">活动 · 成员 · 热度</div>
+      <div class="group-info">{{detail.goal}}</div>
+    </card>
+    <group-activity></group-activity>
+    <div class="buttons">
+      <!-- <input
           type="button"
           class="button button-primary"
           value="创建活动"
@@ -44,35 +28,35 @@
               query: { org_id: detail.id }
             })
           "
-        /> -->
-        <input
-          type="button"
-          class="button button-primary"
-          value="申请加入"
-          @click="joinGroup"
-          v-if="detail.button_show === 1"
-        />
-        <input
-          type="button"
-          class="button button-default"
-          value="已申请，等待审核"
-          v-if="detail.button_show === 2"
-          @click="onCancelJoin"
-        />
-      </div>
-    </card>
+      />-->
+      <input
+        type="button"
+        class="button button-primary"
+        value="申请加入"
+        @click="joinGroup"
+        v-if="detail.button_show === 1"
+      />
+      <input
+        type="button"
+        class="button button-default"
+        value="已申请，等待审核"
+        v-if="detail.button_show === 2"
+        @click="onCancelJoin"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import Card from '@/components/Card'
+import GroupActivity from './Activity'
 import * as api from '@/api'
 export default {
   name: 'Group',
-  components: { Card },
+  components: { Card, GroupActivity },
   data() {
     return {
-      detail: null,
+      detail: {},
       fields: [
         { name: 'org_name', label: '名称' },
         { name: 'org_type_str', label: '类型' },
@@ -83,14 +67,7 @@ export default {
         { name: 'goal', label: '目的' },
         { name: 'initiator', label: '主要发起人' },
         { name: 'rules', label: '组织章程' },
-        { name: 'plan', label: '活动计划' },
-        {
-          name: 'logo',
-          label: '头像',
-          computed(value) {
-            return `<img src="${value}" class="group-avatar">`
-          }
-        }
+        { name: 'plan', label: '活动计划' }
       ]
     }
   },
@@ -156,6 +133,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.bg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 2.1rem;
+  margin-left: -15px;
+  margin-right: -15px;
+  background: url('~@/assets/img/group_bg.png') no-repeat;
+  background-size: cover;
+}
+.group-avatar {
+  width: 1.12rem;
+  height: 1.12rem;
+  object-fit: cover;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.group-name {
+  margin-top: 0.18rem;
+  font-size: 0.17rem;
+  color: #fff;
+}
+.group-count {
+  font-size: 12px;
+  color: #a0a0a0;
+  line-height: 2;
+  border-bottom: 1px solid #c9c9c9;
+}
+.group-info {
+  padding: 14px 0;
+  font-size: 13px;
+  color: #313131;
+  line-height: 18px;
+}
 .info-item {
   margin-bottom: 20px;
   display: flex;
@@ -172,15 +184,18 @@ export default {
   margin-left: 20px;
 }
 .buttons {
-  margin: 20px 0;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 34px;
   text-align: center;
 }
 .button {
   display: inline-block;
-  min-width: 128px;
-  height: 30px;
+  min-width: 200px;
+  height: 40px;
   padding: 0 16px;
-  line-height: 30px;
+  line-height: 40px;
   color: #fff;
   text-align: center;
   border-radius: 20px;
@@ -190,24 +205,7 @@ export default {
   background: #ccc;
 }
 .button-primary {
-  background: linear-gradient(
-    180deg,
-    rgba(2, 236, 228, 1) 0%,
-    rgba(18, 186, 244, 1) 100%
-  );
-}
-.button-info {
-  background: linear-gradient(
-    180deg,
-    rgba(255, 201, 44, 1) 0%,
-    rgba(255, 116, 42, 1) 100%
-  );
-}
-::v-deep .group-avatar {
-  width: 100px;
-  height: 100px;
-  border-radius: 6px;
-  object-fit: contain;
+  background: #af1b40;
 }
 .leave-group {
   font-size: 12px;

src/views/home/Index.vue

 <template>
   <div class="main">
     <!-- 搜索 -->
-    <search-bar
-      readonly
-      @click.native="$router.push({ name: 'search' })"
-    ></search-bar>
+    <search-bar readonly @click.native="$router.push({ name: 'search' })"></search-bar>
     <!-- banner -->
-    <div class="banner"><img src="img/home_banner.png" /></div>
+    <div class="banner">
+      <img src="img/home_banner.png" />
+    </div>
     <!-- 导航 -->
     <div class="nav">
       <ul class="nav-list">
@@ -16,7 +15,9 @@
           :key="index"
           @click="handleNavClick(item)"
         >
-          <div class="pic"><img :src="item.url" /></div>
+          <div class="pic">
+            <img :src="item.url" />
+          </div>
           <div class="title">{{ item.title }}</div>
         </li>
       </ul>
@@ -24,20 +25,23 @@
     <!-- 排行榜 -->
     <div class="top-bar">
       <ul class="top-bar-list">
-        <li
-          class="top-bar-item top-bar-item__group"
-          @click="$router.push({ name: 'group' })"
-        >
-          组织排行榜
-        </li>
+        <li class="top-bar-item top-bar-item__group" @click="$router.push({ name: 'group' })">组织排行</li>
         <li
           class="top-bar-item top-bar-item__activity"
           @click="$router.push({ name: 'activity' })"
-        >
-          活动热度榜
-        </li>
+        >活动排行</li>
       </ul>
     </div>
+    <card title="热门推荐">
+      <div class="popular-list">
+        <div class="popular-item" v-for="item in popularList" :key="item.id">
+          <div class="popular-item-pic">
+            <img :src="item.logo" />
+          </div>
+          <div class="popular-item-main">{{item.org_name}}</div>
+        </div>
+      </div>
+    </card>
     <card title="最新活动">
       <activity-list :params="{ newest: 1 }"></activity-list>
     </card>
@@ -51,9 +55,12 @@ import SearchBar from '@/components/SearchBar'
 import TabBar from '@/components/TabBar'
 import Card from '@/components/Card'
 import ActivityList from '@/components/ActivityList'
+import * as api from '@/api'
+
 export default {
   name: 'HomeIndex',
   components: { SearchBar, TabBar, Card, ActivityList },
+
   data() {
     return {
       navList: [
@@ -62,32 +69,45 @@ export default {
         { url: 'img/home_nav_03.png', title: '直播课', type: 3 },
         // { url: 'img/home_nav_04.png', title: '找工作', type: 4 },
         { url: 'img/home_nav_04.png', title: '运动家', type: 5 }
-      ]
+      ],
+      popularList: []
     }
   },
+
   methods: {
     handleNavClick({ type }) {
       this.$router.push({ name: 'activity', query: { type } })
+    },
+    getPopular() {
+      api.getPopular().then(response => {
+        this.popularList = response
+      })
     }
+  },
+
+  beforeMount() {
+    this.getPopular()
   }
 }
 </script>
 
 <style lang="scss">
 .banner {
-  margin: 10px 0;
+  margin: 0 -15px;
   img {
     width: 100%;
   }
 }
 .nav {
-  padding: 10px 0;
+  padding: 30px 0 20px;
 }
 .nav-list {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
 }
 .nav-item {
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -103,38 +123,63 @@ export default {
     color: #666;
   }
 }
-.top-bar {
-  padding: 20px 0;
-}
 .top-bar-list {
+  margin-bottom: 10px;
   display: flex;
   justify-content: space-between;
 }
 .top-bar-item {
-  width: 42%;
-  height: 40px;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 40px;
+  flex: 1;
+  height: 70px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 70px;
   color: #fff;
   text-align: center;
-  border-radius: 40px;
   cursor: pointer;
 }
 .top-bar-item__group {
-  background: linear-gradient(
-    180deg,
-    rgba(255, 201, 44, 1) 0%,
-    rgba(255, 116, 42, 1) 100%
-  );
-  box-shadow: 0px 5px 20px 0px rgba(253, 3, 20, 0.3);
+  background: url('~@/assets/img/home_group_bg.png') no-repeat center;
+  background-size: cover;
 }
 .top-bar-item__activity {
-  background: linear-gradient(
-    180deg,
-    rgba(2, 236, 228, 1) 0%,
-    rgba(18, 186, 244, 1) 100%
-  );
-  box-shadow: 0px 5px 20px 0px rgba(17, 187, 243, 0.3);
+  background: url('~@/assets/img/home_activity_bg.png') no-repeat center;
+  background-size: cover;
+}
+.popular-list {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin-left: -15px;
+  margin-right: -15px;
+  -webkit-overflow-scrolling: touch;
+}
+.popular-item {
+  flex-shrink: 0;
+  margin-bottom: 18px;
+  margin-right: 15px;
+  width: 165px;
+  height: 140px;
+  background: #ffffff;
+  box-shadow: 0px 2px 6px 0px rgba(74, 9, 25, 0.05);
+  border-radius: 6px;
+  overflow: hidden;
+  &:first-child {
+    margin-left: 15px;
+  }
+}
+.popular-item-pic {
+  height: 95px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+.popular-item-main {
+  font-size: 13px;
+  color: #1b1b1b;
+  text-align: center;
+  padding: 8px 10px;
 }
 </style>

src/views/message/Index.vue

@@ -115,7 +115,7 @@ export default {
     color: #fff;
     line-height: 20px;
     text-align: center;
-    background-color: #ff6767;
+    background-color: #AF1B40;
     border-radius: 50%;
     overflow: hidden;
   }

src/views/my/Index.vue

 <template>
   <div class="main my">
-    <div class="tools">
-      <ul class="tools-list">
-        <li class="tools-item" @click="$router.push({ name: 'settings' })">
-          <img src="~@/assets/img/my_settings.png" width="20" />
-        </li>
-        <li class="tools-item" @click="$router.push({ name: 'message' })">
-          <img src="~@/assets/img/my_message.png" width="13" />
-        </li>
-      </ul>
-    </div>
-    <div class="user">
-      <div class="user-avatar">
-        <img :src="user.avatar | avatar" />
+    <div class="my-header">
+      <div class="tools">
+        <ul class="tools-list">
+          <li class="tools-item" @click="$router.push({ name: 'settings' })">
+            <img src="~@/assets/img/my_settings.png" width="20" />
+          </li>
+          <li class="tools-item" @click="$router.push({ name: 'message' })">
+            <img src="~@/assets/img/my_message.png" width="20" />
+          </li>
+        </ul>
       </div>
-      <div class="user-content">
-        <div class="user-content__name">
-          {{ user.nickname || user.personal_name }}
+      <div class="user">
+        <div class="user-avatar">
+          <img :src="user.avatar | avatar" />
         </div>
-        <div class="user-content__info">{{ user.class_name }}</div>
-      </div>
-      <div class="user-aside">
+        <div class="user-content">
+          <div class="user-content__name">{{ user.nickname || user.personal_name }}</div>
+          <div class="user-content__info">{{ user.class_name }}</div>
+        </div>
+        <!-- <div class="user-aside">
         <dl @click="$router.push({ name: 'myGroup' })">
           <dt>{{ detail.org_stu_total }}</dt>
           <dd>组织</dd>
@@ -29,20 +28,29 @@
           <dt>{{ detail.act_stu_total }}</dt>
           <dd>活动</dd>
         </dl>
-        <!-- <dl @click="$router.push({ name: 'myApprove' })">
+        <dl @click="$router.push({ name: 'myApprove' })">
           <dt>
             {{ detail.act_check_total }}
             <span class="badge" v-if="hasBadge"></span>
           </dt>
           <dd>审批</dd>
-        </dl>-->
+        </dl>
+        </div>-->
       </div>
     </div>
-    <van-tabs v-model="tabActive" :line-height="2">
-      <van-tab title="我的组织" name="0">
+    <van-tabs v-model="tabActive" class="my-tab" :ellipsis="false">
+      <van-tab name="0">
+        <template #title>
+          <div class="name">我的组织</div>
+          <div class="num">{{ detail.org_stu_total }}</div>
+        </template>
         <my-group-list></my-group-list>
       </van-tab>
-      <van-tab title="我的活动" name="1">
+      <van-tab name="1">
+        <template #title>
+          <div class="name">我的活动</div>
+          <div class="num">{{ detail.act_stu_total }}</div>
+        </template>
         <my-activity-list></my-activity-list>
       </van-tab>
       <!-- <van-tab title="我的审批" name="2">
@@ -108,14 +116,22 @@ export default {
 </script>
 
 <style lang="scss">
+.my-header {
+  margin-left: -15px;
+  margin-right: -15px;
+  padding: 0 20px;
+  height: 190px;
+  background: url('~@/assets/img/my_bg.png') no-repeat center top;
+  background-size: cover;
+}
 .tools-list {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 10px 0 20px;
+  padding: 20px 0;
 }
 .tools-item {
-  margin-left: 30px;
+  margin-left: 20px;
 }
 .user {
   display: flex;
@@ -139,15 +155,17 @@ export default {
   height: 60px;
   flex: 1;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   margin-left: 10px;
+  color: #fff;
+  line-height: 1;
 }
 .user-content__name {
-  font-size: 17px;
-  color: #222;
+  font-size: 15px;
 }
 .user-content__info {
-  color: #999;
+  margin-top: 6px;
+  font-size: 12px;
 }
 .user-aside {
   display: flex;
@@ -166,8 +184,41 @@ export default {
     top: -15px;
   }
 }
+.my-tab {
+  margin-top: -50px;
+  .van-tabs__nav {
+    background-color: transparent;
+  }
+  &.van-tabs--line .van-tabs__wrap {
+    height: 50px;
+  }
+  .van-tabs__wrap--scrollable .van-tabs__nav--complete {
+    padding: 0;
+  }
+  .van-tabs__line {
+    display: none;
+  }
+  .van-tab {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    background-color: #eaeef0;
+  }
+  .van-tab--active {
+    background-color: #fff;
+  }
+  .name {
+    font-size: 12px;
+    color: #707070;
+    text-align: center;
+  }
+  .num {
+    font-size: 24px;
+    color: #313131;
+    text-align: center;
+  }
+}
 .my .list {
-  margin-top: 20px;
+  padding: 40px 0;
 }
 .badge {
   position: relative;

src/views/my/MyGroup.vue

@@ -10,11 +10,10 @@
         >
           <i class="icon"></i>
           <span>创建新组织</span>
-        </div> -->
+        </div>-->
         <p class="tips">
-          没有更多啦，<router-link :to="{ name: 'group' }"
-            >去逛逛排行榜吧～</router-link
-          >
+          没有更多啦，
+          <router-link :to="{ name: 'group' }">去逛逛排行榜吧～</router-link>
         </p>
       </template>
     </card>

src/views/search/Index.vue

 <template>
   <div class="main">
-    <search-bar
-      placeholder=""
-      :focus="true"
-      v-model="searchValue"
-      @search="onSearch"
-      ref="searchBar"
-    ></search-bar>
+    <search-bar placeholder :focus="true" v-model="searchValue" @search="onSearch" ref="searchBar"></search-bar>
     <van-tabs v-model="tabActive" :line-height="2" @click="onTabClick">
+      <div class="line"></div>
       <van-tab title="组织" name="0">
         <group-list
           :params="{ keywords: searchValue }"
           ref="list"
-          v-if="tabActive === '0'"
+          v-if="tabActive === '0' && searchValue"
         >
           <template #empty>
             <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
@@ -31,31 +26,32 @@
                   >我的组织～</router-link
                 >
               </p>
-            </div> -->
+            </div>-->
           </template>
         </group-list>
       </van-tab>
-      <van-tab title="个人" name="1">
-        <member-list
+
+      <van-tab title="活动" name="2">
+        <activity-list
           :params="{ keywords: searchValue }"
           ref="list"
-          v-if="tabActive === '1'"
+          v-if="tabActive === '2' && searchValue"
         >
           <template #empty>
             <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
           </template>
-        </member-list>
+        </activity-list>
       </van-tab>
-      <van-tab title="活动" name="2">
-        <activity-list
+      <van-tab title="个人" name="1">
+        <member-list
           :params="{ keywords: searchValue }"
           ref="list"
-          v-if="tabActive === '2'"
+          v-if="tabActive === '1' && searchValue"
         >
           <template #empty>
             <div class="search-empty">暂时没有内容哦，换个搜索词试试吧～</div>
           </template>
-        </activity-list>
+        </member-list>
       </van-tab>
     </van-tabs>
   </div>
@@ -124,9 +120,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.line {
+  height: 1px;
+  background-color: #dcdcdc;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-top: -1px;
+}
 ::v-deep .list {
   margin-top: 20px;
 }
+::v-deep .van-tab {
+  flex: inherit;
+  margin-right: 30px;
+  font-size: 15px;
+  color: #313131;
+}
+::v-deep .van-tab--active {
+  font-size: 18px;
+  color: #af1b40;
+}
+::v-deep .van-tabs__nav {
+  background-color: transparent;
+}
 .search-empty {
   margin-top: 50px;
   padding-top: 200px;
@@ -156,11 +172,7 @@ export default {
     line-height: 30px;
     color: #fff;
     text-align: center;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 201, 44, 1) 0%,
-      rgba(255, 116, 42, 1) 100%
-    );
+    background: linear-gradient(180deg, rgba(255, 201, 44, 1) 0%, rgba(255, 116, 42, 1) 100%);
     border-radius: 20px;
   }
   .button:disabled {