后台页面设计功能优化

components/page/diyComponents/navBar/index.vue

@@ -1,14 +1,14 @@
 <template>
   <!-- 导航组 -->
-  <view class="diy-navBar" :style="{ background: itemStyle.background, color: itemStyle.textColor }">
+  <view class="diy-navBar"
+    :style="{ padding: `${itemStyle.paddingTop}px 0`, background: itemStyle.background, color: itemStyle.textColor }">
     <view class="data-list" :class="[`avg-sm-${itemStyle.rowsNum}`]">
-      <view class="item-nav" v-for="(dataItem, index) in dataList" :key="index">
-        <view class="nav-to" @click="onLink(dataItem.link)">
-          <view class="item-image">
-            <image class="image" mode="widthFix" :src="dataItem.imgUrl"></image>
-          </view>
-          <view class="item-text oneline-hide">{{ dataItem.text }}</view>
+      <view class="item-nav" v-for="(dataItem, index) in dataList" :key="index" @click="onLink(dataItem.link)">
+        <view class="item-image">
+          <image class="image" :style="{ width: `${itemStyle.imageSize * 2}rpx`, height: `${itemStyle.imageSize * 2}rpx` }" mode="widthFix"
+            :src="dataItem.imgUrl"></image>
         </view>
+        <view class="item-text oneline-hide">{{ dataItem.text }}</view>
       </view>
     </view>
   </view>
@@ -50,38 +50,49 @@
     display: table;
   }
 
-  .item-nav {
-    float: left;
-    margin: 10px 0;
-    text-align: center;
+  .diy-navBar {
+    display: flex;
+    flex-direction: column;
 
-    .item-text {
-      font-size: 26rpx;
+    .data-list {
+      // margin-bottom: -20rpx;
     }
 
-    .item-image {
-      margin-bottom: 4px;
-      font-size: 0;
-    }
+    .item-nav {
+      float: left;
+      text-align: center;
+      // margin-bottom: 20rpx;
+      font-size: 26rpx;
 
-    .item-image .image {
-      width: 88rpx;
-      height: 88rpx;
-    }
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+      font-size: 13px;
 
-  }
 
-  /* 分列布局 */
+      .item-image {
+        text-align: center;
+        margin-bottom: 8rpx;
 
-  .diy-navBar .avg-sm-3>.item-nav {
-    width: 33.33333333%;
-  }
+        .image {
+          display: block;
+          width: 88rpx;
+          height: 88rpx;
+          margin: 0 auto;
+        }
+      }
+    }
 
-  .diy-navBar .avg-sm-4>.item-nav {
-    width: 25%;
-  }
+    // 分列布局
+    .avg-sm-3>.item-nav {
+      width: 33.33333333%;
+    }
+
+    .avg-sm-4>.item-nav {
+      width: 25%;
+    }
+
+    .avg-sm-5>.item-nav {
+      width: 20%;
+    }
 
-  .diy-navBar .avg-sm-5>.item-nav {
-    width: 20%;
   }
-</style>
+</style>

components/page/diyComponents/notice/index.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- 店铺公告 -->
-  <view class="diy-notice" :style="{ paddingTop: `${itemStyle.paddingTop * 2}rpx`, paddingBottom: `${itemStyle.paddingTop * 2}rpx` }"
+  <view class="diy-notice" :style="{ padding: `${itemStyle.paddingTop * 2}rpx 0` }"
     @click="onLink(params.link)">
     <u-notice-bar padding="10rpx 24rpx" :volume-icon="params.showIcon" :autoplay="params.scrollable"
-      :bg-color="itemStyle.background" :color="itemStyle.textColor" :list="[params.text]"></u-notice-bar>
+      :bg-color="itemStyle.background" :color="itemStyle.textColor" :list="[params.text]" :font-size="itemStyle.fontSize * 2"></u-notice-bar>
   </view>
 </template>
 

components/page/diyComponents/search/index.vue

@@ -1,8 +1,10 @@
 <template>
   <!-- 搜索框 -->
-  <view class="diy-search" :class="{ sticky: params.sticky }">
+  <view class="diy-search" :class="{ sticky: params.sticky }"
+    :style="{ background: itemStyle.background, padding: `${itemStyle.paddingY * 2}rpx ${itemStyle.paddingX * 2}rpx` }">
     <view class="inner" :class="itemStyle.searchStyle" @click="onTargetSearch">
-      <view class="search-input" :style="{ textAlign: itemStyle.textAlign }">
+      <view class="search-input"
+        :style="{ textAlign: itemStyle.textAlign, background: itemStyle.searchBg, color: itemStyle.searchFontColor }">
         <text class="search-icon iconfont icon-search"></text>
         <text> {{ params.placeholder }}</text>
       </view>
@@ -45,7 +47,6 @@
   .diy-search {
     background: #f1f1f2;
     padding: 20rpx 20rpx;
-    font-size: 26rpx;
 
     &.sticky {
       position: sticky;
@@ -66,17 +67,18 @@
     &.round {
       border-radius: 60rpx;
     }
-  }
 
-  .search-input {
-    height: 60rpx;
-    color: #999;
-    padding: 0 20rpx;
-    display: flex;
-    align-items: center;
+    .search-input {
+      height: 60rpx;
+      //width: 100%;
+      line-height: 60rpx;
+      color: #999999;
+      padding: 0 24rpx;
+      font-size: 26rpx;
 
-    .search-icon {
-      margin-right: 8rpx;
+      .search-icon {
+        margin-right: 12rpx;
+      }
     }
   }
 </style>

components/page/diyComponents/video/index.vue

@@ -1,6 +1,7 @@
 <template>
   <!-- 视频组 -->
-  <view class="diy-video" :style="{ padding: `${itemStyle.paddingTop * 2}rpx 0` }">
+  <view class="diy-video"
+    :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx`, background: itemStyle.background }">
     <video class="video" :style="{ height: `${itemStyle.height * 2}rpx` }" :src="params.videoUrl" :poster="params.poster"
       :autoplay="params.autoplay == 1" controls></video>
   </view>
@@ -35,4 +36,4 @@
     width: 100%;
     display: block;
   }
-</style>
+</style>