AppActive

src/apps/AppActive/Add.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="Add">Add</div>
+</template>
+
+<script>
+export default {
+  name: 'Add',
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.Add {
+  height: 100%;
+}
+</style>

src/apps/AppActive/AppActive.vue

@@ -1,14 +1,45 @@
 <template>
   <div class="AppActive">
-    <div class="header-top">
-      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+    <div class="dataTop">
+      <div class="dataLeft">活动列表</div>
+
+      <div class="dataRight">
+        <span>共</span>
+        <span class="specialColor">12</span>
+        <span>个活动</span>
+      </div>
     </div>
 
-    <div class="header-middle">
-      <div class="currentLeft" v-if="currentTabs == 0">0</div>
+    <template v-if="datas.length < 1">
+      <AiCard v-for="(item, i) in 6" :key="i" @click.native="toDetail(item, 1)">
+        <template #custom>
+          <div class="left">
+            <div class="titles">【敬老爱幼】带你在洞庭湖兜兜风 寻觅江豚的身影</div>
 
-      <div class="currentLeft" v-if="currentTabs == 1">1</div>
-    </div>
+            <div class="nums">
+              <span class="specialColor">6人</span>
+              <span>已报名</span>
+            </div>
+
+            <div class="times">
+              <span class="timesCont">2021-12-16</span>
+
+              <span>| 2天</span>
+            </div>
+
+            <div class="areaNmae">湖南省岳阳市岳阳县荣家湾镇六…湖南省岳阳市岳阳县荣家湾镇六…</div>
+          </div>
+
+          <img src="./yan.jpg" alt="" />
+        </template>
+      </AiCard>
+    </template>
+
+    <AiFixedBtn>
+      <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()" />
+    </AiFixedBtn>
   </div>
 </template>
 
@@ -23,10 +54,10 @@ export default {
       datas: [],
       tabList: [
         {
-          name: '全部',
+          name: '全部活动',
         },
         {
-          name: '我的走访',
+          name: '我发布的',
         },
       ],
       currentTabs: 0,
@@ -46,6 +77,15 @@ export default {
       this.currentTabs = index
       this.getList()
     },
+
+    toAdd() {
+      uni.navigateTo({ url: `./Add` })
+    },
+
+    toDetail(item) {
+      uni.navigateTo({ url: `./Detail` })
+      // uni.navigateTo({ url: `./Detail?id=${item.id}` })
+    },
   },
   onReachBottom() {
     this.current = this.current + 1
@@ -60,6 +100,95 @@ uni-page-body {
 }
 .AppActive {
   height: 100%;
-  background: #fff;
+  background: #f3f6f9;
+
+  .dataTop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 48px;
+    margin-bottom: 8px;
+    padding: 0 32px;
+    .dataLeft {
+      font-size: 38px;
+      font-weight: 600;
+    }
+    .dataRight {
+      font-size: 28px;
+      color: #666666;
+      .specialColor {
+        color: #4181ff;
+      }
+    }
+  }
+
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      background: #fff;
+      padding: 32px;
+      border-radius: 16px;
+      .fill {
+        display: flex;
+        justify-content: space-between;
+        // align-items: center;
+        .left {
+          width: calc(100% - 205px);
+          // background: pink;
+          .titles {
+            margin-bottom: 8px;
+            color: #333333;
+            font-weight: 500;
+            font-size: 30px;
+            line-height: 1.3;
+            word-break: break-all;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+          .nums {
+            .specialColor {
+              color: #4181ff;
+            }
+          }
+          .times {
+            .timesCont {
+              margin-right: 10px;
+            }
+          }
+          .areaNmae {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        img {
+          width: 182px;
+          height: 182px;
+        }
+      }
+    }
+  }
+
+  .AiFixedBtn {
+    .movableArea {
+      .addBtn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 96px;
+        height: 96px;
+        flex-shrink: 0;
+        background: $uni-color-primary;
+        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        font-size: 48px;
+        background: #fff;
+        color: #1365dd;
+        border-radius: 50%;
+      }
+    }
+  }
 }
 </style>

src/apps/AppActive/Detail.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="Detail">Detail</div>
+</template>
+
+<script>
+export default {
+  name: 'Detail',
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.Detail {
+  height: 100%;
+}
+</style>