UI 2.0

26984f6d · 王鹏飞 · 7a02fd42 · 26984f6d · 26984f6d · 26984f6d
--- a/src/api/index.js
+++ b/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')
+}
--- a/src/assets/css/base.css
+++ b/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: '';

--- a/src/assets/img/group_bg.png
+++ b/src/assets/img/group_bg.png
--- a/src/assets/img/home_activity_bg.png
+++ b/src/assets/img/home_activity_bg.png
--- a/src/assets/img/home_group_bg.png
+++ b/src/assets/img/home_group_bg.png
--- a/src/assets/img/my_bg.png
+++ b/src/assets/img/my_bg.png
--- a/src/assets/img/my_message.png
+++ b/src/assets/img/my_message.png
--- a/src/assets/img/my_settings.png
+++ b/src/assets/img/my_settings.png
--- a/src/assets/img/tab_home.png
+++ b/src/assets/img/tab_home.png
--- a/src/assets/img/tab_home_hover.png
+++ b/src/assets/img/tab_home_hover.png
--- a/src/assets/img/tab_my.png
+++ b/src/assets/img/tab_my.png
--- a/src/assets/img/tab_my_hover.png
+++ b/src/assets/img/tab_my_hover.png
--- a/src/assets/img/top_01.png
+++ b/src/assets/img/top_01.png
--- a/src/assets/img/top_02.png
+++ b/src/assets/img/top_02.png
--- a/src/assets/img/top_03.png
+++ b/src/assets/img/top_03.png
--- a/src/components/ActivityItem.vue
+++ b/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>
--- a/src/components/Card.vue
+++ b/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>
--- a/src/components/GroupItem.vue
+++ b/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;

--- a/src/components/GroupList.vue
+++ b/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()
    },
    // 刷新

--- a/src/components/MyActivityItem.vue
+++ b/src/components/MyActivityItem.vue
 <template>
  <div class="my-activity-item" @click="onClick">
    <div class="my-activity-item-bd">
-      <div class="my-activity-item-main">
-        <div class="my-activity-item-title">
-          {{ data.activity_demand_type_str }}
+      <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_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>
-        </div>
+          <p>{{ data.activity_city }} · {{data.initiator}} · {{ data.stu_nums }}人参与</p>
+          <p>{{ data.activity_time }}</p>
        </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>
--- a/src/components/MyGroupItem.vue
+++ b/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>
-        </div>
+          <p>人</p>
        </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>
--- a/src/components/MyGroupList.vue
+++ b/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">

--- a/src/components/SearchBar.vue
+++ b/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>
--- a/src/components/TabBar.vue
+++ b/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;

--- a/src/views/activity/Index.vue
+++ b/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: {

--- a/src/views/activity/Item.vue
+++ b/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
-        >
-      </div>
+        <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 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.activity_time">
-        <div class="detail-form__label">
-          <span class="detail-form-icon detail-form-icon__clock"></span>
-          时间：
+      <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">时间：</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">
-          <span class="detail-form-icon detail-form-icon__peoples"></span>
-          希望人数：
+      <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__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>
--- a/src/views/create/Activity.vue
+++ b/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',

--- a/src/views/group/Activity.vue
+++ b/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>
+  <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>
 </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()
    },
    // 刷新

--- a/src/views/group/Index.vue
+++ b/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>

--- a/src/views/group/Item.vue
+++ b/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>
-      </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>
+        >退出组织</h6>
      </template>
-              <template v-else>
-                {{ detail[item.name] }}
-              </template>
-            </div>
-          </div>
-        </template>
-      </div>
+      <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-info"
-          value="查看更多活动"
-          v-if="detail.button_show === 3"
-          @click="$router.push({ name: 'groupActivity', params: { id: pid } })"
-        />
      <!-- <input
          type="button"
          class="button button-primary"
@@ -44,7 +28,7 @@
              query: { org_id: detail.id }
            })
          "
-        /> -->
+      />-->
      <input
        type="button"
        class="button button-primary"
@@ -60,19 +44,19 @@
        @click="onCancelJoin"
      />
    </div>
-    </card>
  </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;

--- a/src/views/home/Index.vue
+++ b/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>
--- a/src/views/message/Index.vue
+++ b/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;
  }

--- a/src/views/my/Index.vue
+++ b/src/views/my/Index.vue
 <template>
  <div class="main my">
+    <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="13" />
+            <img src="~@/assets/img/my_message.png" width="20" />
          </li>
        </ul>
      </div>
@@ -15,12 +16,10 @@
          <img :src="user.avatar | avatar" />
        </div>
        <div class="user-content">
-        <div class="user-content__name">
-          {{ user.nickname || user.personal_name }}
-        </div>
+          <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">
+        <!-- <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;

--- a/src/views/my/MyGroup.vue
+++ b/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>

--- a/src/views/search/Index.vue
+++ b/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 {