style(tabBar): 优化折叠面板缩进样式

pages/tabBar/API.uvue

@@ -14,16 +14,20 @@
       <uni-collapse>
         <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
           class="item">
-         <view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item"  hover-class="is--active"
-           @click="goPage(`/${page.path}`)">
-           <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{page.style["navigationBarTitleText"]}}</text>
+          <view style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item"
+            hover-class="is--active" @click="goPage(`/${page.path}`)">
+            <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
+                page.style["navigationBarTitleText"]
+              }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
           </view>
           <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
-           <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
-             <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
-               :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
-               <text class="uni-navigate-text">{{
+            <uni-collapse-item :title="childMenu.name" class="item"
+              style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;">
+              <view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active"
+                v-for="childPage in childMenu.pages" :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
+                <text class="uni-navigate-text"
+                  :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
                     childPage.style["navigationBarTitleText"]
                   }}</text>
                 <image :src="arrowRightIcon" class="uni-icon-size"></image>
@@ -56,10 +60,10 @@
       }
     },
     computed: {
-      hasLeftWin():boolean{
+      hasLeftWin() : boolean {
         return !state.noMatchLeftWindow
       },
-      leftWinActive():string{
+      leftWinActive() : string {
         return state.leftWinActive.slice(1)
       }
     },
@@ -82,7 +86,7 @@
       }
     },
     // #ifdef WEB
-    watch:{
+    watch: {
       $route: {
         immediate: true,
         handler(newRoute) {

pages/tabBar/CSS.uvue

@@ -14,18 +14,20 @@
       <uni-collapse>
         <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
           class="item">
-          <view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
-            @click="goPage(`/${page.path}`)">
+          <view style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item"
+            hover-class="is--active" @click="goPage(`/${page.path}`)">
             <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
                 page.style["navigationBarTitleText"]
               }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
           </view>
           <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
-            <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
-              <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
-                :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
-                <text class="uni-navigate-text">{{
+            <uni-collapse-item :title="childMenu.name" class="item"
+              style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;">
+              <view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active"
+                v-for="childPage in childMenu.pages" :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
+                <text class="uni-navigate-text"
+                  :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
                     childPage.style["navigationBarTitleText"]
                   }}</text>
                 <image :src="arrowRightIcon" class="uni-icon-size"></image>
@@ -53,10 +55,10 @@
       }
     },
     computed: {
-      hasLeftWin():boolean{
+      hasLeftWin() : boolean {
         return !state.noMatchLeftWindow
       },
-      leftWinActive():string{
+      leftWinActive() : string {
         return state.leftWinActive.slice(1)
       }
     },
@@ -66,7 +68,7 @@
       },
     },
     // #ifdef WEB
-    watch:{
+    watch: {
       $route: {
         immediate: true,
         handler(newRoute) {

pages/tabBar/component.uvue

@@ -14,18 +14,20 @@
       <uni-collapse>
         <uni-collapse-item ref="category" v-for="menuItem in menu" :key="menuItem!.id" :title="menuItem.name"
           class="item">
-          <view v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item" hover-class="is--active"
-            @click="goPage(`/${page.path}`)">
+          <view style='padding-left:18px;' v-for="page in menuItem.pages" :key="page!.path" class="uni-navigate-item"
+            hover-class="is--active" @click="goPage(`/${page.path}`)">
             <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.path && hasLeftWin}">{{
                 page.style["navigationBarTitleText"]
               }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>
           </view>
           <uni-collapse style="width: 100%" v-for="childMenu in menuItem.children" :key="childMenu!.id">
-            <uni-collapse-item :title="childMenu.name" class="item" style="margin-bottom: 0">
-              <view class="uni-navigate-item" hover-class="is--active" v-for="childPage in childMenu.pages"
-                :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
-                <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
+            <uni-collapse-item :title="childMenu.name" class="item"
+              style="margin-bottom: 0;padding-left: 5px;padding-right: 5px;">
+              <view style='padding-left: 18px;' class="uni-navigate-item" hover-class="is--active"
+                v-for="childPage in childMenu.pages" :key="childPage!.path" @click="goPage(`/${childPage.path}`)">
+                <text class="uni-navigate-text"
+                  :class="{'left-win-active': leftWinActive === childPage.path && hasLeftWin}">{{
                     childPage.style["navigationBarTitleText"]
                   }}</text>
                 <image :src="arrowRightIcon" class="uni-icon-size"></image>
@@ -61,10 +63,10 @@
       }
     },
     computed: {
-      hasLeftWin():boolean{
+      hasLeftWin() : boolean {
         return !state.noMatchLeftWindow
       },
-      leftWinActive():string{
+      leftWinActive() : string {
         return state.leftWinActive.slice(1)
       }
     },
@@ -86,7 +88,7 @@
       // #endif
     },
     // #ifdef WEB
-    watch:{
+    watch: {
       $route: {
         immediate: true,
         handler(newRoute) {

pages/tabBar/template.uvue

@@ -23,7 +23,7 @@
           </image>
         </view>
         <view v-if="item.open">
-          <view class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
+          <view style="padding-left: 18px;" class="uni-navigate-item" :hover-class="page.enable == false ? '' : 'is--active'"
             v-for="(page, key) in item.pages" :key="key" @click="goDetailPage(page)">
             <text class="uni-navigate-text" :class="{'left-win-active': leftWinActive === page.url  && hasLeftWin,'text-disabled' : page.enable == false}">{{ page.name }}</text>
             <image :src="arrowRightIcon" class="uni-icon-size"></image>