update

src/packages/mobile/components/layouts/block/index.less

@@ -0,0 +1,27 @@
+.app-block {
+    padding: .2rem;
+    padding-bottom: 0;
+
+    &:last-of-type {
+        padding-bottom: .2rem;
+    }
+
+    &__wrapper {
+        background-color: #fff;
+        border-radius: .1rem;
+        overflow: hidden;
+    }
+
+    &.bg &__wrapper {
+        background: #fff url('@mobile/assets/images/block-bg.png') no-repeat center bottom;
+        background-size: 100%;
+    }
+
+    &.flex &__wrapper {
+        display: flex;
+    }
+
+    &.flex--column &__wrapper {
+        flex-direction: column;
+    }
+}

src/packages/mobile/components/layouts/block/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="app-block">
+        <div class="app-block__wrapper">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/mobile/components/layouts/index.ts

@@ -5,6 +5,7 @@ import AppScrollView from './scroll-view/index.vue'
 import AppStatusbar from './statusbar/index.vue'
 import AppNavbar from './navbar/index.vue'
 import AppFooter from './footer/index.vue'
+import AppBlock from './block/index.vue'
 
 const components = {
     AppPage,
@@ -13,6 +14,7 @@ const components = {
     AppScrollView,
     AppStatusbar,
     AppNavbar,
+    AppBlock,
 }
 
 const install = (app: App) => {

src/packages/mobile/components/layouts/page/index.backup.less

@@ -0,0 +1,37 @@
+.route-in-enter-from {
+    z-index: 1;
+    transform: translate3d(100%, 0, 0);
+}
+
+.route-out-enter-from {
+    z-index: 1;
+    transform: translate3d(-100%, 0, 0);
+}
+
+.route-in-enter-active,
+.route-in-leave-active,
+.route-out-enter-active,
+.route-out-leave-active {
+    pointer-events: none;
+    position: absolute;
+    will-change: transform;
+    transition: transform 200ms;
+    background-color: #fff;
+}
+
+.route-out-leave-active {
+    //transition-delay: 35ms;
+    transform: translate3d(100%, 0, 0);
+}
+
+.route-in-leave-active {
+    //transition-delay: 35ms;
+    transform: translate3d(-100%, 0, 0);
+}
+
+.app-page {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    background-color: #f6f6f6;
+}

src/packages/mobile/views/credit/signin/index.vue

@@ -89,7 +89,7 @@
                 <dd class="list-item" v-if="false">
                     <div class="list-item__title">
                         <div class="title-icon">
-                            <img src="@mobile/assets/icons/order.png" />
+                            <img src="@mobile/assets/icons/goods.png" />
                         </div>
                         <div class="title-content">
                             <span>供求下单每次</span>

src/packages/mobile/views/home/components/main/index.less

@@ -6,10 +6,6 @@
         padding: .2rem;
     }
 
-    &__container {
-        padding: .2rem;
-    }
-
     &__banner {
         .van-swipe {
             background-color: #ddd;
@@ -40,8 +36,6 @@
         }
 
         &--body {
-            margin-bottom: .2rem;
-
             .van-swipe {
                 min-height: 1.5rem;
                 border-radius: .1rem;
@@ -54,16 +48,15 @@
     }
 
     &__iconbar {
-        border-radius: .1rem;
-        overflow: hidden;
-        padding-bottom: .24rem;
-        margin-bottom: .2rem;
-
         ul {
             display: flex;
             flex-wrap: wrap;
             padding-top: .24rem;
 
+            &:last-child {
+                padding-bottom: .24rem;
+            }
+
             li {
                 display: flex;
                 flex-direction: column;
@@ -81,26 +74,9 @@
                 }
             }
         }
-
-        .app-iconfont {
-            &__icon {
-                font-size: .72rem;
-            }
-
-            &__label {
-                font-size: .24rem;
-                margin-top: .08rem;
-            }
-        }
     }
 
     &__market {
-        display: flex;
-        align-items: center;
-        background-color: #fff;
-        padding: .16rem;
-        margin-bottom: .2rem;
-
         .left {
             display: flex;
             flex-direction: column;
@@ -150,9 +126,6 @@
     }
 
     &__news {
-        border-radius: .1rem;
-        overflow: hidden;
-
         .titlebar {
             &-title {
                 display: flex;

src/packages/mobile/views/home/components/main/index.vue

@@ -13,7 +13,7 @@
       </div>
     </app-statusbar>
     <PullRefresh class="home-main__container" v-model="refreshing" @refresh="onRefresh">
-      <div class="home-main__iconbar g-block--bg">
+      <app-block class="home-main__iconbar bg">
         <ul>
           <li @click="routerTo('product')">
             <img src="@mobile/assets/icons/cpjs.png" />
@@ -42,8 +42,8 @@
             <span>仓储物流</span>
           </li>
         </ul>
-      </div>
-      <div class="home-main__market" v-if="false">
+      </app-block>
+      <app-block class="home-main__market flex" v-if="false">
         <div class="left">
           <h2>合金指数</h2>
           <span>{{ formatDate(marketRun.tradedate, "YYYY-MM-DD") }}</span>
@@ -64,23 +64,23 @@
             </SwipeItem>
           </Swipe>
         </div>
-      </div>
-      <div class="home-main__banner home-main__banner--body" v-if="false">
+      </app-block>
+      <app-block class="home-main__banner home-main__banner--body" v-if="false">
         <Swipe :autoplay="5000" indicator-color="white" lazy-render>
           <SwipeItem v-for="(item, index) in bodyBanners" :key="index">
             <img :src="getImageUrl(item.imagepath)" />
           </SwipeItem>
         </Swipe>
-      </div>
-      <div class="home-main__news">
-        <Cell class="titlebar" title-class="titlebar-title" value-class="titlebar-more" value="更多"
-          :to="{ name: 'news-list' }" is-link>
-          <template #title>
-            <img src="@mobile/assets/icons/fire.png" />
-            <span>市场资讯</span>
-          </template>
-        </Cell>
+      </app-block>
+      <app-block class="home-main__news">
         <CellGroup class="article">
+          <Cell class="titlebar" title-class="titlebar-title" value-class="titlebar-more" value="更多"
+            :to="{ name: 'news-list' }" is-link>
+            <template #title>
+              <img src="@mobile/assets/icons/fire.png" />
+              <span>市场资讯</span>
+            </template>
+          </Cell>
           <template v-for="(item, index) in newsList" :key="index">
             <Cell class="article-item" title-class="article-item__title" value-class="article-item__time"
               :title="item.title" :value="formatDate(item.creaedate, 'MM/DD')" :to="{
@@ -89,7 +89,7 @@
               }" />
           </template>
         </CellGroup>
-      </div>
+      </app-block>
     </PullRefresh>
   </app-scroll-view>
 </template>

src/packages/mobile/views/mine/main/index.less

@@ -15,7 +15,6 @@
         background-color: #fff;
         background-image: @backgroundImage;
         padding: 0 .36rem;
-        margin-bottom: .2rem;
 
         &__wrapper {
             background-color: #fff;
@@ -121,12 +120,10 @@
     }
 
     &-iconbar {
-        background-color: #fff;
-        padding: .24rem;
-        margin-bottom: .2rem;
-
         ul {
             display: flex;
+            background-color: #fff;
+            padding: .24rem;
 
             li {
                 flex: 1;
@@ -134,15 +131,14 @@
                 flex-direction: column;
                 align-items: center;
 
-                .app-iconfont {
-                    &__icon {
-                        font-size: .48rem;
-                    }
+                img {
+                    width: .8rem;
+                    height: .8rem;
+                }
 
-                    &__label {
-                        font-size: .24rem;
-                        margin-top: .12rem;
-                    }
+                span {
+                    font-size: .24rem;
+                    margin-top: .08rem;
                 }
             }
         }

src/packages/mobile/views/mine/main/index.vue

@@ -48,20 +48,23 @@
         </div>
       </div>
     </div>
-    <div class="mine-iconbar">
+    <app-block class="mine-iconbar">
       <ul>
         <li @click="routerTo('mine-generalize')">
-          <app-iconfont icon="icon-wodetuiguang" label-direction="bottom">我的推广</app-iconfont>
+          <img src="@mobile/assets/icons/generalize.png" />
+          <span>我的推广</span>
         </li>
         <li @click="routerTo('my-order')">
-          <app-iconfont icon="icon-wodedingdan" label-direction="bottom">我的订单</app-iconfont>
+          <img src="@mobile/assets/icons/order.png" />
+          <span>我的订单</span>
         </li>
         <li @click="routerTo('my-wareorder')">
-          <app-iconfont icon="icon-wodecangdan" label-direction="bottom">我的仓单</app-iconfont>
+          <img src="@mobile/assets/icons/wareorder.png" />
+          <span>我的仓单</span>
         </li>
       </ul>
-    </div>
-    <div class="g-navmenu">
+    </app-block>
+    <app-block class="g-navmenu">
       <CellGroup>
         <Cell is-link :to="{ name: 'account-certification' }"
           v-if="[AuthStatus.Uncertified, AuthStatus.Rejected].includes(authStatus)">
@@ -105,7 +108,7 @@
           </template>
         </Cell>
       </CellGroup>
-    </div>
+    </app-block>
     <div class="mine-footer">
       <Button class="button-logout" type="primary" size="small" round @click="userLogout">退出登录</Button>
     </div>