首页

src/project/fengdu/AppHome/AppHome.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="page">
-    <div class="search-wrap">
+    <u-navbar :is-back="false" title="首页" title-color="#000" title-width="300" title-size="32" :background="backgroundNavbar" :title-bold="true"></u-navbar>
-      <div class="search fill" @click="$linkTo('/mods/AppContent/contentManager?moduleId=' + search.moduleId)">
-        <u-icon name="search" color="#ffffff" size="40"></u-icon>
-        <span class="desc">请输入需要搜索的内容</span>
-      </div>
-    </div>
-    <div class="header-bg"></div>
-    <img class="border" :src="`${cdn}/border.png`" alt="">
     <div class="swiper-content">
       <u-swiper :list="swiperList" mode="none" height="240" bg-color="none" @click="handleBannerClick"/>
     </div>
@@ -25,47 +18,14 @@
       <u-notice-bar mode="vertical" color="#4181FF" style="flex: 1;" :volume-icon="false" :is-circular="false"
                     duration="5000" speed="5000" :list="noticeList" @click="clickNotice"/>
     </div>
-    <template v-if="activeList.length>0">
+
-      <header>推荐专题</header>
+    <div class="card">
-      <scroll-view :scroll-x="true" style="width: 100%" class="scroll-wrap">
+      <img class="card-left" src="./img/img-fengshouyinhang.png" alt="">
-        <div class="scroll-card"
+      <div class="card-right">
-             :style="{background:'url(' + item.pictureUrl + ') no-repeat no-repeat;background-size:100% 100%;'}"
+        <img src="./img/img-fengduxinnongren.png" alt="">
-             v-for="(item,index) in activeList" :key="index" @click="handleActive(item)"/>
+        <img src="./img/ic-jiaoyuhuzhu.png" alt="">
-      </scroll-view>
-    </template>
-    <template v-if="categorys&&categorys.length>0">
-      <u-tabs :list="categorys.map(e=>({name:e.categoryName}))" font-size="40" bg-color="transparent"
-              inactive-color="#999999" :active-item-style="active"
-              :is-scroll="true" :current="index" @change="tabChange"/>
-      <div class="list-wrap" v-if="categoryList && categoryList.length>0">
-        <div class="list-card" v-for="(category,index) in categoryList" :key="index"
-             @click="$linkTo('/mods/AppContent/contentDetail?id='+category.id)">
-          <div class="header">{{ category.title }}</div>
-          <div class="content-wrap"
-               v-if="category.contentType==0 && category.files && category.files.length<3&&category.files.length>0">
-            <img class="img" :src="item.url" v-for="(item,index) in category.files.slice(0,1)" :key="index.id">
-          </div>
-          <div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length >= 3">
-            <img class="min-img" :src="item.url" v-for="(item,index) in  category.files.slice(0,3)" :key="index.id">
-          </div>
-          <div class="content-wrap" v-if="category.contentType == 1">
-            <img class="img" :src="category.pictureUrl" alt=""/>
-            <img class="play-icon" :src="`${cdn}/play.png`" alt=""/>
-          </div>
-          <div class="bottom">
-            <div class="left">
-              <div class="tag">{{ category.categoryName }}</div>
-              {{ category.createTime }}
-            </div>
-            <div class="right">
-              <em>{{ category.viewCount }}</em>
-              人看过
     </div>
     </div>
-        </div>
-      </div>
-      <AiEmpty v-else/>
-    </template>
     <AiLogin ref="login"/>
   </div>
 </template>
@@ -75,17 +35,18 @@ import {mapActions, mapState} from 'vuex'
 export default {
   name: 'AppHome',
   appName: "首页",
+  customNavigation: true,
   data() {
     return {
       cdn: "https://cdn.cunwuyun.cn/wxmp",
       swiperList: [],
       index: 0,
       grids: [],
-      activeList: [],
       notices: [],
-      categorys: [],
-      categoryList: [],
       search: {areaId: ''},
+      backgroundNavbar: {
+        // background: linear - gradient(138.6deg, #e3e8fbff 0%, #ecf4fdff 48%, #ffffffff 95%)
+      }
     }
   },
   computed: {
@@ -107,41 +68,12 @@ export default {
   onLoad() {
     this.autoLogin().then(() => {
       this.getSwiperList();
-      this.getName();
       this.getGrids();
-      this.getActive();
       this.getNotice();
     })
   },
   methods: {
     ...mapActions(['autoLogin', 'authCheck']),
-    getName() {
-      this.$instance.post("/app/appcontentmoduleinfo/listByName", null, {
-        params: {names: "新闻发布"},
-        withoutToken: true
-      }).then(res => {
-        if (res?.data[0]?.categoryList?.length) {
-          this.categorys = res.data[0]["categoryList"];
-          this.search.moduleId = res.data[0]['id']
-          this.search.categoryId = res.data[0]['categoryList'][0]['id']
-          this.getCategoryList()
-        }
-      })
-    },
-    tabChange(idx) {
-      this.index = idx
-      this.search.categoryId = this.categorys[idx]['id']
-      this.getCategoryList()
-    },
-    getCategoryList() {
-      this.$instance.post("/app/appcontentinfo/list", null, {
-        params: {...this.search, size: 100}
-      }).then(res => {
-        if (res?.data) {
-          this.categoryList = res.data.records;
-        }
-      })
-    },
     clickNotice(val) {
       const id = this.notices[val]["id"];
       if (id) {
@@ -150,13 +82,6 @@ export default {
         })
       }
     },
-    handleActive({type, appId, url}) {
-      if (type == 0) {
-        uni.navigateToMiniProgram({appId})
-      } else if (type == 1) {
-        this.$linkTo("/subPages/h5/webview?link=" + url);
-      }
-    },
     getNotice() {
       this.$instance.post("/app/appmininotice/list", null, {
         params: {size: 999},
@@ -167,16 +92,6 @@ export default {
         }
       })
     },
-    getActive() {
-      this.$instance.post("/app/appminitopicconfig/list", null, {
-        params: {size: 999},
-        withoutToken: true
-      }).then(res => {
-        if (res?.data) {
-          this.activeList = res.data.records;
-        }
-      })
-    },
     /**
      * 获取顶部九宫格
      */
@@ -252,75 +167,20 @@ export default {
 .page {
   width: 100%;
   min-height: 100%;
-  background-color: #F3F6F9;
+  // background-color: #F3F6F9;
+  // background: url('./img/img-bg2.png') no-repeat;
   position: relative;
-
-  .search-wrap {
-    width: 750px;
-    height: 112px;
-    box-sizing: border-box;
-    padding: 0 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #4181FF;
-
-    .search {
-      width: 100%;
-      height: 64px;
-      background: #000000;
-      border-radius: 32px;
-      opacity: 0.2;
-      box-sizing: border-box;
-      padding: 0 32px;
-      display: flex;
-      align-items: center;
-
-      .desc {
-        font-size: 28px;
-        color: #FFFFFF;
-        margin-left: 16px;
-      }
-    }
-  }
-
-  .area-content {
-    height: 96px;
-    line-height: 96px;
-    background-color: #2d80fb;
-
-    .area-ai {
-      display: block;
-      width: 200px;
-      margin-left: 34px;
-      text-align: left;
-    }
-
-    .picker-location {
-      text-align: left;
-    }
-  }
-
-  .header-bg {
-    width: 100%;
-    height: 160px;
-    background-color: #4181FF;
-  }
-
-  .border {
-    width: 100%;
-    height: 40px;
-  }
-
   .swiper-content {
-    width: 686px;
+    width: 100%;
-    height: 240px;
+    height: 292px;
-    margin: -176px auto 24px;
+    padding: 20px 32px 32px;
+    box-sizing: border-box;
+    background: #FFF;
   }
 
   .grid-content {
     box-sizing: border-box;
-
+    background: #FFF;
     .grid-item {
       img {
         width: 108px;
@@ -338,11 +198,11 @@ export default {
   }
 
   ::v-deep .notice {
-    width: 686px;
+    width: 684px;
     height: 88px;
     box-sizing: border-box;
     padding: 0 24px;
-    margin: 30px auto 48px;
+    margin: 30px auto 30px;
     background: #FFFFFF;
     box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
     border-radius: 16px;
@@ -361,129 +221,27 @@ export default {
       white-space: nowrap;
     }
   }
-
+  .card {
-  .list-wrap {
+    background: #FFF;
-    box-sizing: border-box;
     padding: 32px;
-
-    .list-card {
-      width: 100%;
-      min-height: 100px;
-      background: #FFFFFF;
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
-      border-radius: 16px;
     box-sizing: border-box;
-      padding: 32px;
-      margin-bottom: 24px;
-
-      .header {
-        font-size: 36px;
-        font-weight: 600;
-        color: #333333;
-        line-height: 50px;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-      }
-
-      .content-wrap {
     display: flex;
-        gap: 4px;
-        flex-wrap: wrap;
-        margin-top: 24px;
-        position: relative;
-
-        .img {
-          width: 100%;
-          height: 350px;
-        }
-
-        .min-img {
-          width: 204px;
-          height: 204px;
-        }
-
-        .play-icon {
-          width: 80px;
-          height: 80px;
-          border-radius: 50%;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-        }
-      }
-
-      .bottom {
-        display: flex;
-        align-items: center;
     justify-content: space-between;
-        margin-top: 24px;
-
-        .left {
-          display: flex;
-          align-items: center;
-          font-size: 28px;
-          font-weight: 400;
-          color: #999999;
-
-          .tag {
-            width: 144px;
-            height: 48px;
-            background: #EEEEEE;
-            border-radius: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 28px;
-            font-weight: 400;
-            color: #999999;
-            margin-right: 16px;
-          }
-        }
-
-        .right {
-          font-size: 28px;
-          font-weight: 400;
-          color: #999999;
-          display: flex;
-          align-items: center;
-
-          em {
-            font-style: normal;
-            color: #4181FF;
-          }
-        }
-      }
-    }
-  }
-
-  header {
-    font-size: 44px;
-    font-weight: 600;
-    color: #333333;
-    padding: 0 32px;
-    margin-bottom: 32px;
-  }
-
-  .scroll-wrap {
-    box-sizing: border-box;
-    padding: 0 32px;
     width: 100%;
-    white-space: nowrap;
+    .card-left {
-    margin-bottom: 24px;
+      width: 322px;
+      height: 462px;
+    }
+    .card-right {
+      width: 334px;
+      height: 462px;
 
-    .scroll-card {
+      img {
-      display: inline-block;
+        width: 334px;
-      width: 440px;
+        height: 216px;
-      height: 240px;
+      }
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+      img:last-child {
-      border-radius: 16px;
+        margin-top: 24px;
-      margin-right: 32px;
-
-      &:last-child {
-        margin-right: 0;
       }
     }
   }