From 35451cb5b6b4cb2f1ee10bcc5139a0912cd640c9 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Mon, 5 Jun 2023 10:07:13 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E8=90=A5=E5=B9=B3=E5=8F=B0=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=EF=BC=8C=E6=96=B0=E9=97=BB=E9=A1=B5=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/project/oms/AppContent/AppContent.vue     | 224 ++++++++
 src/project/oms/AppContent/contentDetail.vue  |  55 ++
 src/project/oms/AppContent/contentManager.vue | 103 ++++
 src/project/oms/AppHome/AppHome.vue           | 491 ++++++++++++++++++
 src/project/oms/AppHome/home.png              | Bin 0 -> 965 bytes
 src/project/oms/AppHome/home_selected.png     | Bin 0 -> 1000 bytes
 6 files changed, 873 insertions(+)
 create mode 100644 src/project/oms/AppContent/AppContent.vue
 create mode 100644 src/project/oms/AppContent/contentDetail.vue
 create mode 100644 src/project/oms/AppContent/contentManager.vue
 create mode 100644 src/project/oms/AppHome/AppHome.vue
 create mode 100644 src/project/oms/AppHome/home.png
 create mode 100644 src/project/oms/AppHome/home_selected.png

diff --git a/src/project/oms/AppContent/AppContent.vue b/src/project/oms/AppContent/AppContent.vue
new file mode 100644
index 0000000..30f3267
--- /dev/null
+++ b/src/project/oms/AppContent/AppContent.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="wrapper" :style="{ paddingTop: categorys.length ? '54px' : '10px' }" v-if="pageShow">
+    <div class="tabs">
+      <u-tabs
+          :list="categorys && categorys.map(e=>({name:e.categoryName}))"
+          font-size="36"
+          bg-color="transparent"
+          :bold="false"
+          inactive-color="#ccddff"
+          :is-scroll="true"
+          :gutter="16"
+          active-color="#fff"
+          :current="index"
+          @change="tabChange">
+      </u-tabs>
+    </div>
+    <div class="list-wrap" v-if="categoryList && categoryList.length">
+      <div class="list-card" hover-class="bg-hover" v-for="(category,index) in categoryList" :key="index"
+           @click="$linkTo('./contentDetail?id='+category.id)">
+        <div class="header">{{ category.title }}</div>
+        <div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length == 1">
+          <img class="img" :src="item.url" v-for="(item,index) in category.files" :key="index.id" alt="">
+        </div>
+        <div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length > 1">
+          <img class="min-img" :src="item.url" v-for="(item,index) in category.files && category.files.slice(0,3)"
+               :key="index.id" alt="">
+        </div>
+        <div class="content-wrap" v-if="category.contentType==1">
+          <img class="img" :src="category.pictureUrl" alt="">
+          <img class="play-icon" src="https://cdn.cunwuyun.cn/AppContent/play.png" alt="">
+        </div>
+        <div class="bottom">
+          <div class="left">
+            <div class="tag">{{ category.categoryName || names }}</div>
+            {{ category.createTime }}
+          </div>
+          <div class="right">
+            <em>{{ category.viewCount }}</em>
+            人看过
+          </div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-else></AiEmpty>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "AppContent",
+  appName: "内容管理",
+  data() {
+    return {
+      index: 0,
+      names: "",
+      categorys: [],
+      categoryList: [],
+      pageShow: false,
+      search: {}
+    }
+  },
+  onLoad(option) {
+    this.$loading()
+    this.names = option.names;
+    this.search.areaId = option.areaId || this.user.areaId || ""
+    this.getName();
+    if (option.names) {
+      uni.setNavigationBarTitle({
+        title: option.names
+      })
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    active() {
+      return {
+        fontSize: "22px",
+        color: "#fff",
+      };
+    },
+  },
+  methods: {
+    getName() {
+      this.$instance.post("/app/appcontentmoduleinfo/listByName", null, {
+        params: {names: this.names}
+      }).then(res => {
+        if (res?.data) {
+          this.categorys = res.data?.[0]?.categoryList || [];
+          this.search.moduleId = res.data?.[0]?.id || "";
+          this.search.categoryId = res.data?.[0]?.categoryList?.[0]?.id || "";
+          this.getCategoryList();
+        } else {
+          this.$hideLoading()
+        }
+      })
+    },
+    tabChange(e) {
+      this.index = e
+      this.search.categoryId = this.categorys?.[e]?.id
+      this.getCategoryList();
+    },
+    getCategoryList() {
+      this.$instance.post("/app/appcontentinfo/list", null, {
+        params: {...this.search, size: 10}
+      }).then(res => {
+        if (res?.data) {
+          this.categoryList = this.current > 1 ? [...this.categoryList, ...res.data.records] : res.data.records;
+        }
+        this.pageShow = true
+        this.$hideLoading()
+      })
+    },
+  },
+  onReachBottom() {
+    this.current++;
+    this.getCategoryList();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  padding-top: 100px;
+
+  .list-wrap {
+    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;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/oms/AppContent/contentDetail.vue b/src/project/oms/AppContent/contentDetail.vue
new file mode 100644
index 0000000..f1df58a
--- /dev/null
+++ b/src/project/oms/AppContent/contentDetail.vue
@@ -0,0 +1,55 @@
+<template>
+  <section class="contentDetail">
+    <AiDetail :detail="detail" :props="props"/>
+    <u-gap height="16"/>
+    <AiComment v-if="detail.id&&detail.isComment==1" :bid="detail.id"/>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "contentDetail",
+  appName: "内容详情",
+  data() {
+    return {
+      detail: {title: "内容详情"},
+      props: {
+        count: "viewCount"
+      },
+      id: "",
+    }
+  },
+  onLoad({id}) {
+    if (id) {
+      this.id = id;
+      this.getDetail(id);
+    }
+  },
+  methods: {
+    getDetail(id) {
+      this.$instance.post(`/app/appcontentinfo/queryDetailById`, null, {
+        params: {id},  withoutToken: true
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data
+        }
+      })
+    },
+  },
+  onShareAppMessage() {
+    return {
+      title: this.detail.title,
+      path: '/mods/AppContent/contentDetail?id=' + this.id
+    };
+  },
+  onReachBottom() {
+    uni.$emit("moreComments")
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contentDetail {
+}
+</style>
diff --git a/src/project/oms/AppContent/contentManager.vue b/src/project/oms/AppContent/contentManager.vue
new file mode 100644
index 0000000..c759ca6
--- /dev/null
+++ b/src/project/oms/AppContent/contentManager.vue
@@ -0,0 +1,103 @@
+<template>
+  <section class="contentManager">
+    <AiNewsList :list="list" :loadmore="loadmore" @select="showDetail">
+      <template #header>
+        <div class="search-wrap">
+          <div class="search">
+            <u-icon name="search" color="rgba(255,255,255,0.5)" size="40"></u-icon>
+            <input placeholder="请输入需要搜索的内容" class="desc" placeholder-style="color:rgba(255,255,255,0.5);"
+                   confirm-type="search" @change="onChange"/>
+          </div>
+        </div>
+      </template>
+    </AiNewsList>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "contentManager",
+  appName: "搜索结果",
+  computed: {
+    ...mapState(['user']),
+    loadmore() {
+      return this.pages <= this.current ? 'loading ' : 'nomore'
+    }
+  },
+  data() {
+    return {
+      list: [],
+      current: 1,
+      pages: 0,
+      name: "",
+    }
+  },
+  onLoad(params) {
+    if (params.moduleId) {
+      this.moduleId = params.moduleId
+      this.getData(params.moduleId)
+    }
+  },
+  methods: {
+    onChange(val) {
+      this.current = 1;
+      this.getData(val.detail.value);
+    },
+    getData(title = "") {
+      let {current} = this
+      this.moduleId && this.$instance.post("/app/appcontentinfo/list", null, {
+        params: {moduleId: this.moduleId, current, size: 10, title}
+      }).then(res => {
+        if (res?.data) {
+          this.list = current > 1 ? [...this.list, ...res.data.records] : res.data.records
+          this.pages = res.data.pages
+        }
+      })
+    },
+    handleSelectArea(e) {
+      this.search.areaId = e.id
+      this.getData()
+    },
+    showDetail(row) {
+      uni.navigateTo({url: `./contentDetail?id=${row.id}`})
+    },
+  },
+  onReachBottom() {
+    this.current++;
+    this.getData()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .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: rgba(0, 0, 0, .2);
+    border-radius: 32px;
+    box-sizing: border-box;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+
+    .desc {
+      flex: 1;
+      font-size: 28px;
+      color: #FFFFFF;
+      margin-left: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/project/oms/AppHome/AppHome.vue b/src/project/oms/AppHome/AppHome.vue
new file mode 100644
index 0000000..8cd4c8b
--- /dev/null
+++ b/src/project/oms/AppHome/AppHome.vue
@@ -0,0 +1,491 @@
+<template>
+  <div class="page">
+    <div class="search-wrap">
+      <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>
+    <div class="grid-content">
+      <u-grid :col="4" hover-class="text-hover" :border="false">
+        <u-grid-item v-for="(item, index) in grids" :key="index" :custom-style="{padding:'8px 0'}" bg-color="none"
+                     class="grid-item" @click="handleClick(item)">
+          <img :src="item.pictureUrl" alt=""/>
+          <div class="grid-text">{{ item.name }}</div>
+        </u-grid-item>
+      </u-grid>
+    </div>
+    <div class="notice">
+      <img :src="`${cdn}/notice-new.png`" alt="">
+      <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>
+      <scroll-view :scroll-x="true" style="width: 100%" class="scroll-wrap">
+        <div class="scroll-card"
+             :style="{background:'url(' + item.pictureUrl + ') no-repeat no-repeat;background-size:100% 100%;'}"
+             v-for="(item,index) in activeList" :key="index" @click="handleActive(item)"/>
+      </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>
+<script>
+import {mapActions, mapState} from 'vuex'
+
+export default {
+  name: 'AppHome',
+  appName: "首页",
+  data() {
+    return {
+      cdn: "https://cdn.cunwuyun.cn/wxmp",
+      swiperList: [],
+      index: 0,
+      grids: [],
+      activeList: [],
+      notices: [],
+      categorys: [],
+      categoryList: [],
+      search: {areaId: ''},
+    }
+  },
+  computed: {
+    ...mapState(['user', 'token']),
+    active() {
+      return {
+        fontSize: '22px',
+        color: '#333333',
+      }
+    },
+    noticeList() {
+      let {notices} = this
+      return notices?.length > 0 ? notices?.map(e => e.title) || ['暂无公告'] : ['暂无公告']
+    }
+  },
+  onReady() {
+    uni.setNavigationBarTitle({title: "数字乡村"})
+  },
+  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) {
+        uni.navigateTo({
+          url: "/mods/AppNotice/AppNotice?id=" + id
+        })
+      }
+    },
+    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},
+        withoutToken: true
+      }).then(res => {
+        if (res?.data) {
+          this.notices = res.data.records;
+        }
+      })
+    },
+    getActive() {
+      this.$instance.post("/app/appminitopicconfig/list", null, {
+        params: {size: 999},
+        withoutToken: true
+      }).then(res => {
+        if (res?.data) {
+          this.activeList = res.data.records;
+        }
+      })
+    },
+    /**
+     * 获取顶部九宫格
+     */
+    getGrids() {
+      this.$instance.post("/app/appminihomeconfig/list", null, {
+        params: {picked: 1},
+        withoutToken: true
+      }).then(res => {
+        if (res?.data) {
+          this.grids = res.data.records;
+        }
+      })
+    },
+    getSwiperList() {
+      this.$instance.post('/app/appbanner/listForWx', null, {
+        withoutToken: true
+      }).then((res) => {
+        if (res?.data) {
+          this.swiperList = res.data?.map((e) => ({...e, image: e.imgUrl})) || []
+        }
+      })
+    },
+    handleClick({type, appId, modulePath, url, checkType, corpId}) {
+      //先判读是不是系统应用
+      if (type != "0") {
+        if (type == "1") {
+          uni.navigateToMiniProgram({appId});
+        } else if (type == "2") {
+          uni.navigateTo({url: "/subPages/h5/webview?link=" + url});
+        } else if (type == "3") {
+          this.$linkTo(url);
+        } else if (type == "4") {
+          uni.openCustomerServiceChat({
+            extInfo: {url: url},
+            corpId: corpId,
+            fail: () => {
+              this.$u.toast('请使用普通微信打开小程序进行咨询');
+            }
+          });
+        }
+      } else if (type && type == "0") {
+        uni.showLoading({title: '正在进入应用...'})
+        this.authCheck({checkType, modulePath}).finally(() => uni.hideLoading())
+      }
+    },
+    handleBannerClick(index) {
+      if (!this.swiperList[index].linkUrl) return
+
+      if (this.swiperList[index].type == '0') {  //0 h5链接； 1 小程序链接； 2外部小程序
+        this.$linkTo(`/subPages/h5/webview?link=${this.swiperList?.[index]?.linkUrl}&title=${this.swiperList?.[index]?.title}`)
+      } else if (this.swiperList[index].type == '1') {
+        this.$linkTo(`${this.swiperList?.[index]?.linkUrl}`)
+      } else {
+        wx.navigateToMiniProgram({
+          appId: this.swiperList[index].linkUrl
+        })
+      }
+    },
+  },
+
+  onShareAppMessage() {
+    return {
+      title: '欢迎使用数字乡村治理服务一体化平台~',
+      path: `/pages/AppHome/AppHome`
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import "~dvcp-wui/common";
+
+.page {
+  width: 100%;
+  min-height: 100%;
+  background-color: #F3F6F9;
+  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;
+    height: 240px;
+    margin: -176px auto 24px;
+  }
+
+  .grid-content {
+    box-sizing: border-box;
+
+    .grid-item {
+      img {
+        width: 108px;
+        height: 108px;
+        object-fit: fill;
+      }
+
+      .grid-text {
+        font-size: 26px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 36px;
+      }
+    }
+  }
+
+  ::v-deep .notice {
+    width: 686px;
+    height: 88px;
+    box-sizing: border-box;
+    padding: 0 24px;
+    margin: 30px auto 48px;
+    background: #FFFFFF;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > img {
+      width: 128px;
+      height: 52px;
+    }
+
+    .u-news-item {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  .list-wrap {
+    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;
+    margin-bottom: 24px;
+
+    .scroll-card {
+      display: inline-block;
+      width: 440px;
+      height: 240px;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 16px;
+      margin-right: 32px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/oms/AppHome/home.png b/src/project/oms/AppHome/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..c39927f8123adbc9e7835c14ace6b7610b25a863
GIT binary patch
literal 965
zcmV;$13LVPP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91FrWhf1ONa40RR91FaQ7m0NXcg3;+NFFG)l}RA>e5Sv_bIVHm#rp}{1S
zfZz~t5e$hClT-&M2P?RUn^QXpf@2FJ3Q`0|yLAv;q(c!31swzx?BJyNF<?RlAqW8#
zp-Tc8LK2@>E|<&Ya^HKo@6t%`;Ap<@d*A2heZTujqbT0tRp5A6z~_eja=Cn|*XwNp
zJFnsw1A)M1Hk<t-n@_rdVzKxLBA*Nf1HWFZ&*$r7{5YS_Kh@7W{Vdf$p-^}RLF)oh
zTg%JK8-f`2vJ?YUZB+g_Snn{IU!W6r)vhp8%)=ZTK-EJKvI7&h%_+=hk@E^UtLR48
zJc2hnwoiE}qo_usaT23_yW$B!&DmEmMxZu7&D?={y&i41+pocQ)h4Gg{2&sE+)O5u
zE#m@bJd=THwHohqI&VR6nM1;e`5X?1Z=}=dLq_aah;0K9e+J^;1LeXPlJmhgm{@^{
zUv{8u87P%XXR&ub;5=uCgd2+s`#a8Sxm@lCH-~)@S1OhB{eJ(GTjEJDVG{>&aSgCK
zfLDWy0DcF8(_CODap=Myzu$iyuO44TIKmD<{1u4*I4|)en7D|OxE&b)z=~S=B@vM9
zb(mNpZqi_dJ+%XP!rlVF8vvcM0&sJUxJd(PnZ{#k0C$^JB<um;#I(eD&8r&rR814K
z69(Y+9+F-nGB6Q+bQ1y6MB0oJ#tb0f0RpxW%(^=n!Q33HnzmJq8kHs#En3HZqxboR
zKX8lPz{75fglZjt_=gLxTotI-su{q;<M;n!K(AFZ0P$;BsNkgUt_yjPHqr=jYeRwB
zH87ko{>4QzFwV_$jBjj~8ucBRr!Hw+o&jm4oDnEEW1eMNC=^l>iG&i3M*qdNS}mp7
zY%1NZqklk{a!NNq;!~-V5)6)@<MFr>i^Y^$ttQ=s^lN}BuNOZo8_m(0>_fVN;kGdo
zYPDt-&zX~MfVR-I!)k3>j%Z%G0TH3>b<cq8irU5VI$*bAvg1cj8%fCcp+gc959U~G
zp`W~3xDqAg=5*k|6=^(BA-B)~o}Tx?W&4K*o<7T{LzUYyNN6CF$ut3!0m?2;VM{I9
nc#FibOPs{bOYx$Pt^$7nuyhx>ozM>600000NkvXXu0mjfxI2~?

literal 0
HcmV?d00001

diff --git a/src/project/oms/AppHome/home_selected.png b/src/project/oms/AppHome/home_selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..a37c2179d635368976b7fcb1d7b6ff8c52cc4f84
GIT binary patch
literal 1000
zcmV<E0~h>>P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91FrWhf1ONa40RR91FaQ7m0NXcg3;+NFQb|NXRA>e5SxsmYK@@(ITGAkq
zq8@sv^q}HJupsr|K}^yhS|}a_PZfn?#A6GssHtgU4+_mquu@R*AVN=-TKsE@f(J!V
z@FIE%7OWs5<WQwF&-bc{+s*FmY%<#fx&tA*@9+D*nYTZa0Qke7fsH)_!VCGaG<G3C
zifZrwSN|;mrJj$7H@fk(3y5a$5)>g#0s=;|1XLu;$Xrs48SS+mYZVYl<2WD;NJ$CE
z=0?PzG{%Kfi+~hj;6(-|5TRcMTL_pul!Qb|h@wioET(1wXD6`v(<0m>kdrbX3*Up?
zZP0fsA(kzC%BGqGoW6}M`7ba<ZPTNSXbcoE)3F0i+&LqD8O?5vs}|6E4a0@sFiqqS
zy8*0-6)+zTLhtmjC{*|q3{?p@lEtmd1(>Bf%>e}r#}Fd%x;YF-9}kEhj=`n?*8+}R
z$F`*<cuIBlnrhX0`XLm8_@g1Q=%$b>0nw}2fh+Kg0Cu?naS{7jG(q>=Wsz6SQ5F!%
z;2wGuG5L1Y;#I~i&;zeKmlPjW^4B~q?GoZ+*hv@bOY(b7o+-35)+(kQA%op<1*mNf
zQrpZ>POBkrJq~|TJM~aIy^?`RS0FZuacY|<bs*22TN!(mgG7O?fLI2PqkxC>dazlN
z@2QKinFDjN1F{rAZPQ1|Q}hYiC9ap9IWQOIWQAEFfZpZLV-fCBQj=9eJ#5T{IWadg
z{u%+%G+rno+@QOF<Hc<*<oP*qVs6aQh*c&^>INua+~{o7<A8uc+TCTDUwH-Sz2;)0
z5;pTPaxDv>w)tibY}j)H*RlY*U7ezx(tGNuns-TF31@E1k-3&I%GW^2VE&Gb(mkM#
zBX@-;OGbGGBry%`@&(j;c{X`LV0#!K5eMk(_*?y59$<p@aNn!i^~xD)7r^8v&jD-+
z{RfWG=Cf-jK>tnsBD7xvJo85KB^hjEpYEYuK&fr4h{}9c@hUd$0=7{L*$tV`F2~8P
zU4RpyZoe-;_l&x&=dXa<8PgrF{XrH@>!v8Lw*gv6z*qSkc<5EYc3c60Fz+EnX=xQ~
zM*+bW7@{qa>pvc(%oLoA$=FVzjsj+f#R3)DM+NWGuSMRs6JanGV=}gr0N-El8TbQH
WuGuxqORIJO0000<MNUMnLSTY2BB9Ix

literal 0
HcmV?d00001