From b0603133113f6ffab5bd2813a1045b18c84f07a7 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Sat, 20 Jan 2024 16:34:12 +0800
Subject: [PATCH] =?UTF-8?q?components:=20rpx=20to=20px;=20=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84display:=20flex;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/api-set-tabbar/api-set-tabbar.vue  | 292 +++++++++---------
 components/boolean-data/boolean-data.vue      |  74 ++---
 components/enum-data/enum-data.vue            |   2 +-
 components/input-data/input-data.vue          |   7 +-
 components/page-head/page-head.vue            |   4 +-
 components/u-link/u-link.vue                  | 116 +++----
 .../uni-collapse-item/uni-collapse-item.vue   | 250 +++++++--------
 components/uni-collapse/uni-collapse.vue      |  76 ++---
 .../uni-navbar-lite/uni-navbar-lite.uvue      |   3 -
 .../uni-navbar-lite/uni-navbar-lite.vue       | 157 +++++-----
 10 files changed, 488 insertions(+), 493 deletions(-)

diff --git a/components/api-set-tabbar/api-set-tabbar.vue b/components/api-set-tabbar/api-set-tabbar.vue
index 2d5186b2..f69939ac 100644
--- a/components/api-set-tabbar/api-set-tabbar.vue
+++ b/components/api-set-tabbar/api-set-tabbar.vue
@@ -1,156 +1,156 @@
 <template>
-	<view class="uni-padding-wrap">
-		<page-head :title="title"></page-head>
-		<button class="button" @click="setTabBarBadge">{{ !hasSetTabBarBadge ? '设置tab徽标' : '移除tab徽标' }}</button>
-		<button class="button" @click="showTabBarRedDot">{{ !hasShownTabBarRedDot ?  '显示红点' : '移除红点'}}</button>
-		<button class="button" @click="customStyle">{{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}</button>
-		<button class="button" @click="customItem">{{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}</button>
-		<button class="button" @click="hideTabBar">{{ !hasHiddenTabBar ? '隐藏TabBar' : '显示TabBar' }}</button>
-		<view class="btn-area">
-			<!-- <button class="button" type="primary" @click="navigateBack">关闭</button> -->
-		</view>
-	</view>
+  <view class="uni-padding-wrap">
+    <page-head :title="title"></page-head>
+    <button class="button" @click="setTabBarBadge">{{ !hasSetTabBarBadge ? '设置tab徽标' : '移除tab徽标' }}</button>
+    <button class="button" @click="showTabBarRedDot">{{ !hasShownTabBarRedDot ?  '显示红点' : '移除红点'}}</button>
+    <button class="button" @click="customStyle">{{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}</button>
+    <button class="button" @click="customItem">{{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}</button>
+    <button class="button" @click="hideTabBar">{{ !hasHiddenTabBar ? '隐藏TabBar' : '显示TabBar' }}</button>
+    <view class="btn-area">
+      <!-- <button class="button" type="primary" @click="navigateBack">关闭</button> -->
+    </view>
+  </view>
 </template>
 
 <script lang="uts">
-	export default {
-		data() {
-			return {
-				title: 'tababr',
-				hasSetTabBarBadge: false,
-				hasShownTabBarRedDot: false,
-				hasCustomedStyle: false,
-				hasCustomedItem: false,
-				hasHiddenTabBar: false
-			}
-		},
-		destroyed() {
-			if (this.hasSetTabBarBadge) {
-				uni.removeTabBarBadge({
-					index: 1
-				})
-			}
-			if (this.hasShownTabBarRedDot) {
-				uni.hideTabBarRedDot({
-					index: 1
-				})
-			}
-			if (this.hasHiddenTabBar) {
-				uni.showTabBar()
-			}
-			if (this.hasCustomedStyle) {
-				uni.setTabBarStyle({
-					color: '#7A7E83',
-					selectedColor: '#007AFF',
-					backgroundColor: '#F8F8F8',
-					borderStyle: 'black'
-				})
-			}
+  export default {
+    data() {
+      return {
+        title: 'tababr',
+        hasSetTabBarBadge: false,
+        hasShownTabBarRedDot: false,
+        hasCustomedStyle: false,
+        hasCustomedItem: false,
+        hasHiddenTabBar: false
+      }
+    },
+    destroyed() {
+      if (this.hasSetTabBarBadge) {
+        uni.removeTabBarBadge({
+          index: 1
+        })
+      }
+      if (this.hasShownTabBarRedDot) {
+        uni.hideTabBarRedDot({
+          index: 1
+        })
+      }
+      if (this.hasHiddenTabBar) {
+        uni.showTabBar()
+      }
+      if (this.hasCustomedStyle) {
+        uni.setTabBarStyle({
+          color: '#7A7E83',
+          selectedColor: '#007AFF',
+          backgroundColor: '#F8F8F8',
+          borderStyle: 'black'
+        })
+      }
 
-			if (this.hasCustomedItem) {
-				let tabBarOptions = {
-					index: 1,
-					text: '接口',
-					iconPath: '/static/api.png',
-					selectedIconPath: '/static/apiHL.png'
-				}
-				uni.setTabBarItem(tabBarOptions)
-			}
-		},
-		methods: {
-			navigateBack() {
-				this.$emit('unmount')
-			},
-			setTabBarBadge() {
-				if(this.hasShownTabBarRedDot){
-					uni.hideTabBarRedDot({
-						index: 1
-					})
-					this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
-				}
-				if (!this.hasSetTabBarBadge) {
-					uni.setTabBarBadge({
-						index: 1,
-						text: '1'
-					})
-				} else {
-					uni.removeTabBarBadge({
-						index: 1
-					})
-				}
-				this.hasSetTabBarBadge = !this.hasSetTabBarBadge
-			},
-			showTabBarRedDot() {
-				if(this.hasSetTabBarBadge) {
-					uni.removeTabBarBadge({
-						index: 1
-					})
-					this.hasSetTabBarBadge = !this.hasSetTabBarBadge
-				}
-				if (!this.hasShownTabBarRedDot) {
-					uni.showTabBarRedDot({
-						index: 1
-					})
-				} else {
-					uni.hideTabBarRedDot({
-						index: 1
-					})
-				}
-				this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
-			},
-			hideTabBar() {
-				if (!this.hasHiddenTabBar) {
-					uni.hideTabBar()
-				} else {
-					uni.showTabBar()
-				}
-				this.hasHiddenTabBar = !this.hasHiddenTabBar
-			},
-			customStyle() {
-				if (this.hasCustomedStyle) {
-					uni.setTabBarStyle({
-						color: '#7A7E83',
-						selectedColor: '#007AFF',
-						backgroundColor: '#F8F8F8',
-						borderStyle: 'black'
-					})
-				} else {
-					uni.setTabBarStyle({
-						color: '#FFF',
-						selectedColor: '#007AFF',
-						backgroundColor: '#000000',
-						borderStyle: 'black'
-					})
-				}
-				this.hasCustomedStyle = !this.hasCustomedStyle
-			},
-			customItem() {
-				let tabBarOptions = {
-					index: 1,
-					text: '接口',
-					iconPath: '/static/api.png',
-					selectedIconPath: '/static/apiHL.png'
-				} as SetTabBarItemOptions
-				if (this.hasCustomedItem) {
-					uni.setTabBarItem(tabBarOptions)
-				} else {
-					tabBarOptions.text = 'API'
-					uni.setTabBarItem(tabBarOptions)
-				}
-				this.hasCustomedItem = !this.hasCustomedItem
-			}
-		}
-	}
+      if (this.hasCustomedItem) {
+        let tabBarOptions = {
+          index: 1,
+          text: '接口',
+          iconPath: '/static/api.png',
+          selectedIconPath: '/static/apiHL.png'
+        }
+        uni.setTabBarItem(tabBarOptions)
+      }
+    },
+    methods: {
+      navigateBack() {
+        this.$emit('unmount')
+      },
+      setTabBarBadge() {
+        if (this.hasShownTabBarRedDot) {
+          uni.hideTabBarRedDot({
+            index: 1
+          })
+          this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
+        }
+        if (!this.hasSetTabBarBadge) {
+          uni.setTabBarBadge({
+            index: 1,
+            text: '1'
+          })
+        } else {
+          uni.removeTabBarBadge({
+            index: 1
+          })
+        }
+        this.hasSetTabBarBadge = !this.hasSetTabBarBadge
+      },
+      showTabBarRedDot() {
+        if (this.hasSetTabBarBadge) {
+          uni.removeTabBarBadge({
+            index: 1
+          })
+          this.hasSetTabBarBadge = !this.hasSetTabBarBadge
+        }
+        if (!this.hasShownTabBarRedDot) {
+          uni.showTabBarRedDot({
+            index: 1
+          })
+        } else {
+          uni.hideTabBarRedDot({
+            index: 1
+          })
+        }
+        this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
+      },
+      hideTabBar() {
+        if (!this.hasHiddenTabBar) {
+          uni.hideTabBar()
+        } else {
+          uni.showTabBar()
+        }
+        this.hasHiddenTabBar = !this.hasHiddenTabBar
+      },
+      customStyle() {
+        if (this.hasCustomedStyle) {
+          uni.setTabBarStyle({
+            color: '#7A7E83',
+            selectedColor: '#007AFF',
+            backgroundColor: '#F8F8F8',
+            borderStyle: 'black'
+          })
+        } else {
+          uni.setTabBarStyle({
+            color: '#FFF',
+            selectedColor: '#007AFF',
+            backgroundColor: '#000000',
+            borderStyle: 'black'
+          })
+        }
+        this.hasCustomedStyle = !this.hasCustomedStyle
+      },
+      customItem() {
+        let tabBarOptions = {
+          index: 1,
+          text: '接口',
+          iconPath: '/static/api.png',
+          selectedIconPath: '/static/apiHL.png'
+        } as SetTabBarItemOptions
+        if (this.hasCustomedItem) {
+          uni.setTabBarItem(tabBarOptions)
+        } else {
+          tabBarOptions.text = 'API'
+          uni.setTabBarItem(tabBarOptions)
+        }
+        this.hasCustomedItem = !this.hasCustomedItem
+      }
+    }
+  }
 </script>
 
 <style>
-	.button {
-		margin-top: 30rpx;
-        margin-left: 0;
-        margin-right: 0;
-	}
+  .button {
+    margin-top: 15px;
+    margin-left: 0;
+    margin-right: 0;
+  }
 
-	.btn-area {
-		padding-top: 30rpx;
-	}
+  .btn-area {
+    padding-top: 15px;
+  }
 </style>
diff --git a/components/boolean-data/boolean-data.vue b/components/boolean-data/boolean-data.vue
index b14942b2..dc7f12bf 100644
--- a/components/boolean-data/boolean-data.vue
+++ b/components/boolean-data/boolean-data.vue
@@ -1,45 +1,45 @@
 <script lang="uts">
-	export default {
+  export default {
     emits: ['change'],
-		props: {
-			title: {
-				type: String,
-				default: ''
-			},
-			defaultValue: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				_checked: false
-			}
-		},
-		created() {
-			this._checked = this.defaultValue
-		},
-		methods: {
-			// @ts-ignore
-			_change(e : SwitchChangeEvent) {
-				this._checked = e.detail.value;
-				this.$emit('change', this._checked)
-			}
-		}
-	}
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      defaultValue: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        _checked: false
+      }
+    },
+    created() {
+      this._checked = this.defaultValue
+    },
+    methods: {
+      // @ts-ignore
+      _change(e : SwitchChangeEvent) {
+        this._checked = e.detail.value;
+        this.$emit('change', this._checked)
+      }
+    }
+  }
 </script>
 
 <template>
-	<view class="button-data-main uni-flex">
-		<view class="uni-title" style="width:80%">{{ title }}</view>
-		<switch :checked="_checked" @change="_change" />
-	</view>
+  <view class="button-data-main uni-flex">
+    <view class="uni-title" style="width:80%">{{ title }}</view>
+    <switch :checked="_checked" @change="_change" />
+  </view>
 </template>
 
 <style>
-	.button-data-main {
-		justify-content: space-between;
-		padding: 20rpx;
-		border-bottom: 1px solid rgba(0,0,0,.06);
-	}
-</style>
\ No newline at end of file
+  .button-data-main {
+    justify-content: space-between;
+    padding: 10px;
+    border-bottom: 1px solid rgba(0, 0, 0, .06);
+  }
+</style>
diff --git a/components/enum-data/enum-data.vue b/components/enum-data/enum-data.vue
index 5cbf838d..00f263a1 100644
--- a/components/enum-data/enum-data.vue
+++ b/components/enum-data/enum-data.vue
@@ -21,7 +21,7 @@
     methods: {
       // @ts-ignore
       _change(e : RadioGroupChangeEvent) {
-        const selected = this.items.find((item: ItemType) : boolean => {
+        const selected = this.items.find((item : ItemType) : boolean => {
           return item.name == e.detail.value
         })
         if (selected != null) {
diff --git a/components/input-data/input-data.vue b/components/input-data/input-data.vue
index 74b8baa6..7ba87459 100644
--- a/components/input-data/input-data.vue
+++ b/components/input-data/input-data.vue
@@ -82,7 +82,8 @@
     </view>
   </view>
   <view class="input-wrapper">
-    <input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur" @focus="focus" />
+    <input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur"
+      @focus="focus" />
     <image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
     </image>
   </view>
@@ -95,7 +96,7 @@
     flex-direction: row;
     justify-content: center;
     padding: 0;
-    margin: 0 20rpx;
+    margin: 0 10px;
     flex-direction: row;
     flex-wrap: nowrap;
     background-color: #ffffff;
@@ -105,6 +106,6 @@
     width: 22px;
     height: 22px;
     align-self: center;
-    margin-right: 10rpx;
+    margin-right: 5px;
   }
 </style>
diff --git a/components/page-head/page-head.vue b/components/page-head/page-head.vue
index 23b6af42..5c419e69 100644
--- a/components/page-head/page-head.vue
+++ b/components/page-head/page-head.vue
@@ -18,11 +18,11 @@
 </script>
 <style>
   .common-page-head {
-    padding: 20px;
+    padding: 20px;
     align-items: center;
   }
 
-  .common-page-head-title-box {
+  .common-page-head-title-box {
     padding: 0 20px;
     border-bottom: 1px solid #D8D8D8;
   }
diff --git a/components/u-link/u-link.vue b/components/u-link/u-link.vue
index 045ded60..be7e8302 100644
--- a/components/u-link/u-link.vue
+++ b/components/u-link/u-link.vue
@@ -1,66 +1,66 @@
 <template>
-    <view class="uni-row">
-        <text class="text" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</text>
-    </view>
+  <view class="uni-row">
+    <text class="text" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</text>
+  </view>
 </template>
 
 <script lang="uts">
-	/**
-	 * @description u-link是一个外部网页超链接组件，在小程序内打开内部web-view组件或复制url，在app内打开外部浏览器，在h5端打开新网页
-	 * @property {String} href 点击后打开的外部网页url，小程序中必须以https://开头
-	 * @property {String} text 显示的文字
-	 * @property {Boolean} inWhiteList 是否在小程序白名单中，如果在的话，在小程序端会直接打开内置web-view，否则会只会复制url，提示在外部打开
-	 * @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
-	 */
-	export default {
-		name: 'u-link',
-		props: {
-			href: {
-				type: String,
-				default: ''
-			},
-			text: {
-				type: String,
-				default: ''
-			},
-			inWhiteList: {
-				type: Boolean,
-				default: false
-			}
-		},
-		methods: {
-			openURL() {
-				// // #ifdef APP-PLUS
-				// plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
-				// // #endif
-				// // #ifdef H5
-				// window.open(this.href)
-				// // #endif
-				// // #ifdef MP
-				// if (this.inWhiteList) { //如果在小程序的网址白名单中，会走内置webview打开，否则会复制网址提示在外部浏览器打开
-				// 	uni.navigateTo({
-				// 		url: '/pages/component/web-view/web-view?url=' + this.href
-				// 	});
-				// } else {
-				// 	uni.setClipboardData({
-				// 		data: this.href
-				// 	});
-				// 	uni.showModal({
-				// 		content: '本网址无法直接在小程序内打开。已自动复制网址，请在手机浏览器里粘贴该网址',
-				// 		showCancel: false
-				// 	});
-				// }
-				// // #endif
-			}
-		}
-	}
+  /**
+   * @description u-link是一个外部网页超链接组件，在小程序内打开内部web-view组件或复制url，在app内打开外部浏览器，在h5端打开新网页
+   * @property {String} href 点击后打开的外部网页url，小程序中必须以https://开头
+   * @property {String} text 显示的文字
+   * @property {Boolean} inWhiteList 是否在小程序白名单中，如果在的话，在小程序端会直接打开内置web-view，否则会只会复制url，提示在外部打开
+   * @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
+   */
+  export default {
+    name: 'u-link',
+    props: {
+      href: {
+        type: String,
+        default: ''
+      },
+      text: {
+        type: String,
+        default: ''
+      },
+      inWhiteList: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      openURL() {
+        // // #ifdef APP-PLUS
+        // plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
+        // // #endif
+        // // #ifdef H5
+        // window.open(this.href)
+        // // #endif
+        // // #ifdef MP
+        // if (this.inWhiteList) { //如果在小程序的网址白名单中，会走内置webview打开，否则会复制网址提示在外部浏览器打开
+        // 	uni.navigateTo({
+        // 		url: '/pages/component/web-view/web-view?url=' + this.href
+        // 	});
+        // } else {
+        // 	uni.setClipboardData({
+        // 		data: this.href
+        // 	});
+        // 	uni.showModal({
+        // 		content: '本网址无法直接在小程序内打开。已自动复制网址，请在手机浏览器里粘贴该网址',
+        // 		showCancel: false
+        // 	});
+        // }
+        // // #endif
+      }
+    }
+  }
 </script>
 
 <style>
-    .text {
-        color: #7A7E83;
-        font-size: 14px;
-        line-height: 20px;
-        /* border-bottom: 1px solid #7A7E83; */
-    }
+  .text {
+    color: #7A7E83;
+    font-size: 14px;
+    line-height: 20px;
+    /* border-bottom: 1px solid #7A7E83; */
+  }
 </style>
diff --git a/components/uni-collapse-item/uni-collapse-item.vue b/components/uni-collapse-item/uni-collapse-item.vue
index 6d5ff955..f8d5dce3 100644
--- a/components/uni-collapse-item/uni-collapse-item.vue
+++ b/components/uni-collapse-item/uni-collapse-item.vue
@@ -1,140 +1,140 @@
 <template>
-	<view class="uni-collapse-item">
-		<view class="uni-collapse-item__title" @click="openCollapse(!is_open)">
-			<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
-			<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
-		</view>
-		<view ref="boxRef" class="uni-collapse-item__content">
-			<view ref="contentRef" class="uni-collapse-item__content-box">
-				<slot></slot>
-			</view>
-		</view>
-	</view>
+  <view class="uni-collapse-item">
+    <view class="uni-collapse-item__title" @click="openCollapse(!is_open)">
+      <text class="uni-collapse-item__title-text"
+        :class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
+      <view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
+    </view>
+    <view ref="boxRef" class="uni-collapse-item__content">
+      <view ref="contentRef" class="uni-collapse-item__content-box">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script lang="uts">
-	import { $dispatch } from './util.uts'
-	export default {
-		name: "UniCollapseItem",
-		props: {
-			// 列表标题
-			title: {
-				type: String,
-				default: ''
-			},
-			open: {
-				type: Boolean,
-				default: false
-			},
-			disabled: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				height: 0,
-				is_open: this.open as boolean,
-				boxNode: null as Element | null,
-				contentNode: null as Element | null,
-			};
-		},
-		watch: {
-			open(value: boolean) {
-				// this.is_open = value
-				if (this.boxNode != null) {
-					this.openCollapse(value)
-				}
-			}
-		},
-		created() {
-			$dispatch(this, 'UniCollapse', 'init', this)
-		},
-		mounted() {
-			this.boxNode = this.$refs['boxRef'] as Element;
-			this.contentNode = this.$refs['contentRef'] as Element;
-			// this.openCollapse(this.open)
-		},
-		methods: {
-			// 开启或关闭折叠面板
-			openCollapse(open: boolean) {
-				if (this.disabled) return
-				// 关闭其他已打开
-				$dispatch(this, 'UniCollapse', 'cloceAll')
-				this.is_open = open
-				this.openOrClose(open)
-			},
-			openOrClose(open: boolean) {
-				const boxNode = this.boxNode?.style!;
-				const contentNode = this.contentNode?.style!;
-				let hide = open ? 'flex' : 'none';
-				const opacity = open ? "1" : "0"
-				let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
-				boxNode.setProperty('display', hide);
-				this.$nextTick(() => {
-					contentNode.setProperty('transform', ani_transform);
-					contentNode.setProperty('opacity', opacity);
-				})
-			}
-		}
-	}
+  import { $dispatch } from './util.uts'
+  export default {
+    name: "UniCollapseItem",
+    props: {
+      // 列表标题
+      title: {
+        type: String,
+        default: ''
+      },
+      open: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        height: 0,
+        is_open: this.open as boolean,
+        boxNode: null as Element | null,
+        contentNode: null as Element | null,
+      };
+    },
+    watch: {
+      open(value : boolean) {
+        // this.is_open = value
+        if (this.boxNode != null) {
+          this.openCollapse(value)
+        }
+      }
+    },
+    created() {
+      $dispatch(this, 'UniCollapse', 'init', this)
+    },
+    mounted() {
+      this.boxNode = this.$refs['boxRef'] as Element;
+      this.contentNode = this.$refs['contentRef'] as Element;
+      // this.openCollapse(this.open)
+    },
+    methods: {
+      // 开启或关闭折叠面板
+      openCollapse(open : boolean) {
+        if (this.disabled) return
+        // 关闭其他已打开
+        $dispatch(this, 'UniCollapse', 'cloceAll')
+        this.is_open = open
+        this.openOrClose(open)
+      },
+      openOrClose(open : boolean) {
+        const boxNode = this.boxNode?.style!;
+        const contentNode = this.contentNode?.style!;
+        let hide = open ? 'flex' : 'none';
+        const opacity = open ? "1" : "0"
+        let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
+        boxNode.setProperty('display', hide);
+        this.$nextTick(() => {
+          contentNode.setProperty('transform', ani_transform);
+          contentNode.setProperty('opacity', opacity);
+        })
+      }
+    }
+  }
 </script>
 
 <style scoped>
-	.uni-collapse-item {
-		background-color: #fff;
-	}
-	.uni-collapse-item__title {
-		flex-direction: row;
-		align-items: center;
-		padding: 12px;
-		background-color: #fff;
-	}
+  .uni-collapse-item {
+    background-color: #fff;
+  }
 
+  .uni-collapse-item__title {
+    flex-direction: row;
+    align-items: center;
+    padding: 12px;
+    background-color: #fff;
+  }
 
+  .down_arrow {
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+    border-right: 1px #999 solid;
+    border-bottom: 1px #999 solid;
+    margin-top: -3px;
+    transition-property: transform;
+    transition-duration: 0.2s;
+  }
 
-	.down_arrow {
-		width: 8px;
-		height: 8px;
-		transform: rotate(45deg);
-		border-right: 1px #999 solid;
-		border-bottom: 1px #999 solid;
-		margin-top: -3px;
-		transition-property: transform;
-		transition-duration: 0.2s;
-	}
+  .down_arrow--active {
+    transform: rotate(-135deg);
+    margin-top: 0px;
+  }
 
-	.down_arrow--active {
-		transform: rotate(-135deg);
-		margin-top: 0px;
-	}
+  .uni-collapse-item__title-text {
+    flex: 1;
+    color: #000;
+    font-size: 14px;
+    font-weight: 400;
+  }
 
-	.uni-collapse-item__title-text {
-		flex: 1;
-		color: #000;
-		font-size: 14px;
-		font-weight: 400;
-	}
+  .open--active {
+    /* background-color: #f0f0f0; */
+    color: #bbb;
+  }
 
-	.open--active {
-		/* background-color: #f0f0f0; */
-		color: #bbb;
-	}
+  .is-disabled {
+    color: #999;
+  }
 
-	.is-disabled {
-		color: #999;
-	}
+  .uni-collapse-item__content {
+    display: none;
+    position: relative;
+  }
 
-	.uni-collapse-item__content {
-		display: none;
-		position: relative;
-	}
-
-	.uni-collapse-item__content-box {
-		width: 100%;
-		transition-property: transform , opacity;
-		transition-duration: 0.2s;
-		transform: translateY(-100%);
-		opacity: 0;
-	}
-</style>
+  .uni-collapse-item__content-box {
+    width: 100%;
+    transition-property: transform, opacity;
+    transition-duration: 0.2s;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+</style>
diff --git a/components/uni-collapse/uni-collapse.vue b/components/uni-collapse/uni-collapse.vue
index 672a78d9..ca8fe82d 100644
--- a/components/uni-collapse/uni-collapse.vue
+++ b/components/uni-collapse/uni-collapse.vue
@@ -1,46 +1,46 @@
 <template>
-	<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
-	<view>
-		<slot></slot>
-	</view>
+  <!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
+  <view>
+    <slot></slot>
+  </view>
 </template>
 
 <script lang="uts">
-	export default {
-		name: "UniCollapse",
-		props: {
-			// 是否开启手风琴效果
-			accordion: {
-				type: Boolean,
-				default: true
-			}
-		},
-		data() {
-			return {
-				child_nodes: [] as Array<ComponentPublicInstance>
-			};
-		},
+  export default {
+    name: "UniCollapse",
+    props: {
+      // 是否开启手风琴效果
+      accordion: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        child_nodes: [] as Array<ComponentPublicInstance>
+      };
+    },
 
-		methods: {
-			init(child: ComponentPublicInstance) {
-				this.child_nodes.push(child)
-			},
-			// 关闭所有
-			cloceAll() {
-				// 开启手风琴效果才回关闭其他
-				if (this.accordion && this.child_nodes.length > 0) {
-					this.child_nodes.forEach((item) => {
-						const is_open = item.$data['is_open'] as boolean
-						// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
-						if (is_open) {
-							item.$data['is_open'] = false
-							item.$callMethod('openOrClose', false)
-						}
-					})
-				}
-			}
-		}
-	}
+    methods: {
+      init(child : ComponentPublicInstance) {
+        this.child_nodes.push(child)
+      },
+      // 关闭所有
+      cloceAll() {
+        // 开启手风琴效果才回关闭其他
+        if (this.accordion && this.child_nodes.length > 0) {
+          this.child_nodes.forEach((item) => {
+            const is_open = item.$data['is_open'] as boolean
+            // TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
+            if (is_open) {
+              item.$data['is_open'] = false
+              item.$callMethod('openOrClose', false)
+            }
+          })
+        }
+      }
+    }
+  }
 </script>
 
 <style>
diff --git a/components/uni-navbar-lite/uni-navbar-lite.uvue b/components/uni-navbar-lite/uni-navbar-lite.uvue
index b0cee2df..ae87e082 100644
--- a/components/uni-navbar-lite/uni-navbar-lite.uvue
+++ b/components/uni-navbar-lite/uni-navbar-lite.uvue
@@ -95,7 +95,6 @@
 
   .uni-navbar-inner {
     position: relative;
-    display: flex;
     flex-direction: row;
     justify-content: space-between;
     height: 45px;
@@ -103,7 +102,6 @@
 
   .left-content,
   .right-content {
-    display: flex;
     justify-content: center;
     align-items: center;
     width: 45px;
@@ -117,7 +115,6 @@
     bottom: 0;
     left: 45px;
     right: 45px;
-    display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
diff --git a/components/uni-navbar-lite/uni-navbar-lite.vue b/components/uni-navbar-lite/uni-navbar-lite.vue
index 5efd192f..550ec7dc 100644
--- a/components/uni-navbar-lite/uni-navbar-lite.vue
+++ b/components/uni-navbar-lite/uni-navbar-lite.vue
@@ -1,94 +1,91 @@
 <template>
-    <view class="uni-navbar">
-        <view class="uni-navbar-inner" :style="navbarStyle">
-            <view class="left-content" @click="back">
-                <text class="uni-icons uniui-back"></text>
-            </view>
-            <view class="uni-navbar-content">
-                <slot>{{title}}</slot>
-            </view>
-            <view class="right-content">
-                <slot name="right"></slot>
-            </view>
-        </view>
+  <view class="uni-navbar">
+    <view class="uni-navbar-inner" :style="navbarStyle">
+      <view class="left-content" @click="back">
+        <text class="uni-icons uniui-back"></text>
+      </view>
+      <view class="uni-navbar-content">
+        <slot>{{title}}</slot>
+      </view>
+      <view class="right-content">
+        <slot name="right"></slot>
+      </view>
     </view>
+  </view>
 </template>
 
 <script>
-    export default {
-        name: "uni-navbar",
-        props: {
-            title: {
-                type: String,
-                default: ''
-            }
-        },
-        data() {
-            return {
-                statusBarHeight: 0
-            };
-        },
-        computed: {
-            navbarStyle() {
-                return `margin-top:${this.statusBarHeight}px`
-            },
-        },
-        created() {
-            const sys = uni.getSystemInfoSync()
-            const statusBarHeight = sys.statusBarHeight
-            this.statusBarHeight = statusBarHeight
-        },
-        methods: {
-            back() {
-                uni.navigateBack({})
-            }
-        },
-    }
+  export default {
+    name: "uni-navbar",
+    props: {
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        statusBarHeight: 0
+      };
+    },
+    computed: {
+      navbarStyle() {
+        return `margin-top:${this.statusBarHeight}px`
+      },
+    },
+    created() {
+      const sys = uni.getSystemInfoSync()
+      const statusBarHeight = sys.statusBarHeight
+      this.statusBarHeight = statusBarHeight
+    },
+    methods: {
+      back() {
+        uni.navigateBack({})
+      }
+    },
+  }
 </script>
 
 <style>
-    @import './uni-icons.css';
+  @import './uni-icons.css';
 
-    .uni-icons {
-        font-family: UniIconsLight;
-        text-decoration: none;
-        text-align: center;
-        font-size: 22px;
-        font-style: normal;
-        color: #333;
-    }
+  .uni-icons {
+    font-family: UniIconsLight;
+    text-decoration: none;
+    text-align: center;
+    font-size: 22px;
+    font-style: normal;
+    color: #333;
+  }
 
-    .uni-navbar {
-        border: 1px #eee solid;
-        background-color: #fff;
-    }
+  .uni-navbar {
+    border: 1px #eee solid;
+    background-color: #fff;
+  }
 
-    .uni-navbar-inner {
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        height: 45px;
-    }
+  .uni-navbar-inner {
+    position: relative;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 45px;
+  }
 
-    .left-content,
-    .right-content {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 45px;
-        height: 100%;
-    }
+  .left-content,
+  .right-content {
+    justify-content: center;
+    align-items: center;
+    width: 45px;
+    height: 100%;
+  }
 
-    .uni-navbar-content {
-        position: absolute;
-        height: 100%;
-        top: 0;
-        bottom: 0;
-        left: 45px;
-        right: 45px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+  .uni-navbar-content {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 45px;
+    right: 45px;
+    justify-content: center;
+    align-items: center;
+  }
 </style>
-- 
GitLab