From 0f76dc0da4ef954b4e14fce50a1f5363abd56ec6 Mon Sep 17 00:00:00 2001
From: fanfan <franceesfan@163.com>
Date: Wed, 17 Apr 2024 15:47:01 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue                         |   4 +-
 .../components/u-subsection/u-subsection.vue  | 788 +++++++++---------
 2 files changed, 403 insertions(+), 389 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index b61c2be..54aabe8 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -2,7 +2,7 @@
 	<view class="index">
 		<view class="navbarContent">
 			<u-navbar :is-back="false" title="" :background="background" :border-bottom="false">
-				<image :src="logoImage" mode="heightFix" class="logo"></image>
+				<image v-if="logoImage" :src="logoImage" mode="heightFix" class="logo"></image>
 				<view class="slot-wrap">
 					<u-subsection active-color="#FB213D" inactive-color="#000000" height="60" @change="changeHome"
 						:bold="false" button-color="#fff" :list="list" :current="current"></u-subsection>
@@ -1097,7 +1097,7 @@
 		onLoad() {
 			this.getTypeList()
 			this.getSeckill()
-			this.getSuggest()
+			this.getSuggest()//根据数据格式需要分页
 			this.getCityInfo()
 			this.getCoupons();
 			this.getServeList();
diff --git a/uni_modules/vk-uview-ui/components/u-subsection/u-subsection.vue b/uni_modules/vk-uview-ui/components/u-subsection/u-subsection.vue
index 7915516..a513263 100644
--- a/uni_modules/vk-uview-ui/components/u-subsection/u-subsection.vue
+++ b/uni_modules/vk-uview-ui/components/u-subsection/u-subsection.vue
@@ -1,402 +1,416 @@
 <template>
-	<view class="u-subsection" :style="[subsectionStyle]">
-		<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
-		 v-for="(item, index) in listInfo" :key="index">
-			<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
-			<u-badge v-if="item.num > 0" :count="item.num" :offset="offset" size="mini"></u-badge>
-		</view>
-		<view class="u-item-bg" :style="[itemBarStyle]"></view>
-	</view>
+  <view class="u-subsection" :style="[subsectionStyle]">
+    <view
+      class="u-item u-line-1"
+      :style="[itemStyle(index)]"
+      @tap="click(index)"
+      :class="[noBorderRight(index), 'u-item-' + index]"
+      v-for="(item, index) in listInfo"
+      :key="index"
+    >
+      <view :style="[textStyle(index)]" class="u-item-text u-line-1">{{
+        item.name
+      }}</view>
+      <u-badge
+        v-if="item.num > 0"
+        :count="item.num"
+        :offset="offset"
+        size="mini"
+      ></u-badge>
+    </view>
+    <view class="u-item-bg" :style="[itemBarStyle]"></view>
+  </view>
 </template>
 
 <script>
-	/**
-	 * subsection 分段器
-	 * @description 该分段器一般用于用户从几个选项中选择某一个的场景
-	 * @tutorial https://www.uviewui.com/components/subsection.html
-	 * @property {Array} list 选项的数组，形式见上方"基本使用"
-	 * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
-	 * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
-	 * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
-	 * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
-	 * @property {String Number} font-size 字体大小，单位rpx（默认28）
-	 * @property {String Number} height 组件高度，单位rpx（默认70）
-	 * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
-	 * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
-	 * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
-	 * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
-	 * @event {Function} change 分段器选项发生改变时触发
-	 * @example <u-subsection active-color="#ff9900"></u-subsection>
-	 */
-	export default {
-		name: "u-subsection",
-		emits: ["change","update:modelValue", "input"],
-		props: {
-			// tab的数据
-			list: {
-				type: Array,
-				default () {
-					return [];
-				}
-			},
-			value: {
-				type: [String, Number],
-				default: 0
-			},
-			modelValue: {
-				type: [String, Number],
-				default: 0
-			},
-			// 当前活动的tab的index
-			current: {
-				type: [Number, String],
-				default: 0
-			},
-			// 激活的颜色
-			activeColor: {
-				type: String,
-				default: '#303133'
-			},
-			// 未激活的颜色
-			inactiveColor: {
-				type: String,
-				default: '#606266'
-			},
-			// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
-			mode: {
-				type: String,
-				default: 'button'
-			},
-			// 字体大小，单位rpx
-			fontSize: {
-				type: [Number, String],
-				default: 28
-			},
-			// 是否开启动画效果
-			animation: {
-				type: Boolean,
-				default: true
-			},
-			// 组件的高度，单位rpx
-			height: {
-				type: [Number, String],
-				default: 70
-			},
-			// 激活tab的字体是否加粗
-			bold: {
-				type: Boolean,
-				default: true
-			},
-			// mode=button时，组件背景颜色
-			bgColor: {
-				type: String,
-				default: '#eeeeef'
-			},
-			// mode = button时，滑块背景颜色
-			buttonColor: {
-				type: String,
-				default: '#ffffff'
-			},
-			// 在切换分段器的时候，是否让设备震一下
-			vibrateShort: {
-				type: Boolean,
-				default: false
-			},
-			offset: {
-				type: Array,
-				default: function(){
-					return [0,0]
-				}
-			},
-		},
-		data() {
-			return {
-				itemBgStyle: {
-					width: 0,
-					left: 0,
-					backgroundColor: '#ffffff',
-					height: '100%',
-					transition: ''
-				},
-				currentIndex: this.current,
-				buttonPadding: 3, // mode = button 时，组件的内边距
-				borderRadius: 5, // 圆角值
-				firstTimeVibrateShort: true ,// 组件初始化时，会触发current变化，此时不应震动
-				listInfo:[]
-			};
-		},
-		watch: {
-			valueCom: {
-				immediate: true,
-				handler(nVal) {
-					if (!nVal) nVal = 0;
-					this.currentIndex = nVal;
-					this.changeSectionStatus(nVal);
-				}
-			},
-			current: {
-				immediate: true,
-				handler(nVal) {
-					if (!nVal) nVal = this.valueCom || 0;
-					this.currentIndex = nVal;
-					this.changeSectionStatus(nVal);
-				}
-			},
-			list: {
-				deep:true,
-				handler(nVal=[]) {
-					this.listInfoFn();
-					setTimeout(() => {
-						this.getTabsInfo();
-					}, 10);
-				}
-			},
-			
-		},
-		computed: {
-			valueCom() {
-				// #ifndef VUE3
-				return this.value;
-				// #endif
-			
-				// #ifdef VUE3
-				return this.modelValue;
-				// #endif
-			},
-			// 设置mode=subsection时，滑块特有的样式
-			noBorderRight() {
-				return index => {
-					if (this.mode != 'subsection') return;
-					let classs = '';
-					// 不显示右边的边框
-					if (index < this.list.length - 1) classs += ' u-none-border-right';
-					// 显示整个组件的左右边圆角
-					if (index == 0) classs += ' u-item-first';
-					if (index == this.list.length - 1) classs += ' u-item-last';
-					return classs;
-				};
-			},
-			// 文字的样式
-			textStyle() {
-				return index => {
-					let style = {};
-					// 设置字体颜色
-					if (this.mode == 'subsection') {
-						if (index == this.currentIndex) {
-							style.color = '#ffffff';
-						} else {
-							style.color = this.activeColor;
-						}
-					} else {
-						if (index == this.currentIndex) {
-							style.color = this.activeColor;
-						} else {
-							style.color = this.inactiveColor;
-						}
-					}
-					// 字体加粗
-					if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
-					// 文字大小
-					style.fontSize = this.fontSize + 'rpx';
-					return style;
-				};
-			},
-			// 每个分段器item的样式
-			itemStyle() {
-				return index => {
-					let style = {};
-					if (this.mode == 'subsection') {
-						// 设置border的样式
-						style.borderColor = this.activeColor;
-						style.borderWidth = '1px';
-						style.borderStyle = 'solid';
-					}
-					return style;
-				};
-			},
-			// mode=button时，外层view的样式
-			subsectionStyle() {
-				let style = {};
-				style.height = uni.upx2px(this.height) + 'px';
-				if (this.mode == 'button') {
-					style.backgroundColor = this.bgColor;
-					style.padding = `${this.buttonPadding}px`;
-					style.borderRadius = `${this.borderRadius}px`;
-				}
-				return style;
-			},
-			// 滑块的样式
-			itemBarStyle() {
-				let style = {};
-				style.backgroundColor = this.activeColor;
-				style.zIndex = 1;
-				if (this.mode == 'button') {
-					style.backgroundColor = this.buttonColor;
-					style.borderRadius = `${this.borderRadius}px`;
-					style.bottom = `${this.buttonPadding}px`;
-					style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px';
-					style.zIndex = 0;
-				}
-				return Object.assign(this.itemBgStyle, style);
-			}
-		},
-		mounted() {
-			this.listInfoFn();
-			setTimeout(() => {
-				this.getTabsInfo();
-			}, 10);
-		},
-		methods: {
-			listInfoFn(){
-				let { list =[] } = this;
-				this.listInfo = this.list.map((val, index) => {
-					if (typeof val != 'object') {
-						let obj = {
-							width: 0,
-							name: val,
-						};
-						return obj;
-					} else {
-						return val;
-					}
-				});
-				return this.listInfo;
-			},
-			// 改变滑块的样式
-			changeSectionStatus(nVal) {
-				if (this.mode == 'subsection') {
-					// 根据滑块在最左边和最右边时，显示左边和右边的圆角
-					if (nVal == this.list.length - 1) {
-						this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
-					}
-					if (nVal == 0) {
-						this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
-					}
-					if (nVal > 0 && nVal < this.list.length - 1) {
-						this.itemBgStyle.borderRadius = '0';
-					}
-				}
-				// 更新滑块的位置
-				setTimeout(() => {
-					this.itemBgLeft();
-				}, 10);
-				if (this.vibrateShort && !this.firstTimeVibrateShort) {
-					// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
-					// #ifndef H5
-					uni.vibrateShort();
-					// #endif
-				}
-				// 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
-				this.firstTimeVibrateShort = false;
-			},
-			click(index) {
-				// 不允许点击当前激活选项
-				if (index == this.currentIndex) return;
-				this.currentIndex = index;
-				this.changeSectionStatus(index);
-				this.$emit('change', Number(index));
-				this.$emit("input", Number(index));
-				this.$emit("update:modelValue", Number(index));
-			},
-			// 获取各个tab的节点信息
-			getTabsInfo() {
-				let view = uni.createSelectorQuery().in(this);
-				for (let i = 0; i < this.list.length; i++) {
-					view.select('.u-item-' + i).boundingClientRect();
-				}
-				view.exec(res => {
-					if (!res.length) {
-						setTimeout(() => {
-							this.getTabsInfo();
-							return;
-						}, 10);
-					}
-					// 将分段器每个item的宽度，放入listInfo数组
-					res.map((val, index) => {
-						this.listInfo[index].width = val.width;
-					});
-					// 初始化滑块的宽度
-					if (this.mode == 'subsection') {
-						this.itemBgStyle.width = this.listInfo[0].width + 'px';
-					} else if (this.mode == 'button') {
-						this.itemBgStyle.width = this.listInfo[0].width + 'px';
-					}
-					// 初始化滑块的位置
-					this.itemBgLeft();
-				});
-			},
-			itemBgLeft() {
-				// 根据是否开启动画效果，
-				if (this.animation) {
-					this.itemBgStyle.transition = 'all 0.35s';
-				} else {
-					this.itemBgStyle.transition = 'all 0s';
-				}
-				let left = 0;
-				// 计算当前活跃item到组件左边的距离
-				this.listInfo.map((val, index) => {
-					if (index < this.currentIndex) left += val.width;
-				});
-				// 根据mode不同模式，计算滑块需要移动的距离
-				if (this.mode == 'subsection') {
-					this.itemBgStyle.left = left + 'px';
-				} else if (this.mode == 'button') {
-					this.itemBgStyle.left = left + this.buttonPadding + 'px';
-				}
-			}
-		}
-	};
+/**
+ * subsection 分段器
+ * @description 该分段器一般用于用户从几个选项中选择某一个的场景
+ * @tutorial https://www.uviewui.com/components/subsection.html
+ * @property {Array} list 选项的数组，形式见上方"基本使用"
+ * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
+ * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
+ * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
+ * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
+ * @property {String Number} font-size 字体大小，单位rpx（默认28）
+ * @property {String Number} height 组件高度，单位rpx（默认70）
+ * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
+ * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
+ * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
+ * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
+ * @event {Function} change 分段器选项发生改变时触发
+ * @example <u-subsection active-color="#ff9900"></u-subsection>
+ */
+export default {
+  name: "u-subsection",
+  emits: ["change", "update:modelValue", "input"],
+  props: {
+    // tab的数据
+    list: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+    modelValue: {
+      type: [String, Number],
+      default: 0,
+    },
+    // 当前活动的tab的index
+    current: {
+      type: [Number, String],
+      default: 0,
+    },
+    // 激活的颜色
+    activeColor: {
+      type: String,
+      default: "#303133",
+    },
+    // 未激活的颜色
+    inactiveColor: {
+      type: String,
+      default: "#606266",
+    },
+    // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+    mode: {
+      type: String,
+      default: "button",
+    },
+    // 字体大小，单位rpx
+    fontSize: {
+      type: [Number, String],
+      default: 28,
+    },
+    // 是否开启动画效果
+    animation: {
+      type: Boolean,
+      default: true,
+    },
+    // 组件的高度，单位rpx
+    height: {
+      type: [Number, String],
+      default: 70,
+    },
+    // 激活tab的字体是否加粗
+    bold: {
+      type: Boolean,
+      default: true,
+    },
+    // mode=button时，组件背景颜色
+    bgColor: {
+      type: String,
+      default: "#eeeeef",
+    },
+    // mode = button时，滑块背景颜色
+    buttonColor: {
+      type: String,
+      default: "#ffffff",
+    },
+    // 在切换分段器的时候，是否让设备震一下
+    vibrateShort: {
+      type: Boolean,
+      default: false,
+    },
+    offset: {
+      type: Array,
+      default: function () {
+        return [0, 0];
+      },
+    },
+  },
+  data() {
+    return {
+      itemBgStyle: {
+        width: 0,
+        left: 0,
+        backgroundColor: "#ffffff",
+        height: "100%",
+        transition: "",
+      },
+      currentIndex: this.current,
+      buttonPadding: 3, // mode = button 时，组件的内边距
+      borderRadius: 5, // 圆角值
+      firstTimeVibrateShort: true, // 组件初始化时，会触发current变化，此时不应震动
+      listInfo: [],
+    };
+  },
+  watch: {
+    valueCom: {
+      immediate: true,
+      handler(nVal) {
+        if (!nVal) nVal = 0;
+        this.currentIndex = nVal;
+        this.changeSectionStatus(nVal);
+      },
+    },
+    current: {
+      immediate: true,
+      handler(nVal) {
+        if (!nVal) nVal = this.valueCom || 0;
+        this.currentIndex = nVal;
+        this.changeSectionStatus(nVal);
+      },
+    },
+    list: {
+      deep: true,
+      handler(nVal = []) {
+        this.listInfoFn();
+        setTimeout(() => {
+          this.getTabsInfo();
+        }, 10);
+      },
+    },
+  },
+  computed: {
+    valueCom() {
+      // #ifndef VUE3
+      return this.value;
+      // #endif
+
+      // #ifdef VUE3
+      return this.modelValue;
+      // #endif
+    },
+    // 设置mode=subsection时，滑块特有的样式
+    noBorderRight() {
+      return (index) => {
+        if (this.mode != "subsection") return;
+        let classs = "";
+        // 不显示右边的边框
+        if (index < this.list.length - 1) classs += " u-none-border-right";
+        // 显示整个组件的左右边圆角
+        if (index == 0) classs += " u-item-first";
+        if (index == this.list.length - 1) classs += " u-item-last";
+        return classs;
+      };
+    },
+    // 文字的样式
+    textStyle() {
+      return (index) => {
+        let style = {};
+        // 设置字体颜色
+        if (this.mode == "subsection") {
+          if (index == this.currentIndex) {
+            style.color = "#ffffff";
+          } else {
+            style.color = this.activeColor;
+          }
+        } else {
+          if (index == this.currentIndex) {
+            style.color = this.activeColor;
+          } else {
+            style.color = this.inactiveColor;
+          }
+        }
+        // 字体加粗
+        if (index == this.currentIndex && this.bold) style.fontWeight = "bold";
+        // 文字大小
+        style.fontSize = this.fontSize + "rpx";
+        return style;
+      };
+    },
+    // 每个分段器item的样式
+    itemStyle() {
+      return (index) => {
+        let style = {};
+        if (this.mode == "subsection") {
+          // 设置border的样式
+          style.borderColor = this.activeColor;
+          style.borderWidth = "1px";
+          style.borderStyle = "solid";
+        }
+        return style;
+      };
+    },
+    // mode=button时，外层view的样式
+    subsectionStyle() {
+      let style = {};
+      style.height = uni.upx2px(this.height) + "px";
+      if (this.mode == "button") {
+        style.backgroundColor = this.bgColor;
+        style.padding = `${this.buttonPadding}px`;
+        style.borderRadius = `${this.borderRadius}px`;
+      }
+      return style;
+    },
+    // 滑块的样式
+    itemBarStyle() {
+      let style = {};
+      style.backgroundColor = this.activeColor;
+      style.zIndex = 1;
+      if (this.mode == "button") {
+        style.backgroundColor = this.buttonColor;
+        style.borderRadius = `${this.borderRadius}px`;
+        style.bottom = `${this.buttonPadding}px`;
+        style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + "px";
+        style.zIndex = 0;
+      }
+      return Object.assign(this.itemBgStyle, style);
+    },
+  },
+  mounted() {
+    this.listInfoFn();
+    setTimeout(() => {
+      this.getTabsInfo();
+    }, 10);
+  },
+  methods: {
+    listInfoFn() {
+      let { list = [] } = this;
+      this.listInfo = this.list.map((val, index) => {
+        if (typeof val != "object") {
+          let obj = {
+            width: 0,
+            name: val,
+          };
+          return obj;
+        } else {
+          return val;
+        }
+      });
+      return this.listInfo;
+    },
+    // 改变滑块的样式
+    changeSectionStatus(nVal) {
+      if (this.mode == "subsection") {
+        // 根据滑块在最左边和最右边时，显示左边和右边的圆角
+        if (nVal == this.list.length - 1) {
+          this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
+        }
+        if (nVal == 0) {
+          this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
+        }
+        if (nVal > 0 && nVal < this.list.length - 1) {
+          this.itemBgStyle.borderRadius = "0";
+        }
+      }
+      // 更新滑块的位置
+      setTimeout(() => {
+        this.itemBgLeft();
+      }, 10);
+      if (this.vibrateShort && !this.firstTimeVibrateShort) {
+        // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
+        // #ifndef H5
+        uni.vibrateShort();
+        // #endif
+      }
+      // 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
+      this.firstTimeVibrateShort = false;
+    },
+    click(index) {
+      // 不允许点击当前激活选项
+      if (index == this.currentIndex) return;
+      this.currentIndex = index;
+      this.changeSectionStatus(index);
+      this.$emit("change", Number(index));
+      this.$emit("input", Number(index));
+      this.$emit("update:modelValue", Number(index));
+    },
+    // 获取各个tab的节点信息
+    getTabsInfo() {
+      let view = uni.createSelectorQuery().in(this);
+      for (let i = 0; i < this.list.length; i++) {
+        view.select(".u-item-" + i).boundingClientRect();
+      }
+      view.exec((res) => {
+        if (!res.length) {
+          setTimeout(() => {
+            this.getTabsInfo();
+            return;
+          }, 10);
+        }
+        // 将分段器每个item的宽度，放入listInfo数组
+        res.map((val, index) => {
+          this.listInfo[index].width = val.width;
+        });
+        // 初始化滑块的宽度
+        if (this.listInfo) {
+          if (this.mode == "subsection") {
+            this.itemBgStyle.width = this.listInfo[0].width + "px";
+          } else if (this.mode == "button") {
+            this.itemBgStyle.width = this.listInfo[0].width + "px";
+          }
+        }
+        // 初始化滑块的位置
+        this.itemBgLeft();
+      });
+    },
+    itemBgLeft() {
+      // 根据是否开启动画效果，
+      if (this.animation) {
+        this.itemBgStyle.transition = "all 0.35s";
+      } else {
+        this.itemBgStyle.transition = "all 0s";
+      }
+      let left = 0;
+      // 计算当前活跃item到组件左边的距离
+      this.listInfo.map((val, index) => {
+        if (index < this.currentIndex) left += val.width;
+      });
+      // 根据mode不同模式，计算滑块需要移动的距离
+      if (this.mode == "subsection") {
+        this.itemBgStyle.left = left + "px";
+      } else if (this.mode == "button") {
+        this.itemBgStyle.left = left + this.buttonPadding + "px";
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	@import "../../libs/css/style.components.scss";
+@import "../../libs/css/style.components.scss";
 
-	.u-subsection {
-		@include vue-flex;
-		align-items: center;
-		overflow: hidden;
-		position: relative;
-	}
+.u-subsection {
+  @include vue-flex;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
 
-	.u-item {
-		flex: 1;
-		text-align: center;
-		font-size: 26rpx;
-		height: 100%;
-		@include vue-flex;
-		align-items: center;
-		justify-content: center;
-		color: $u-main-color;
-		padding: 0 6rpx;
-		position: relative;
-	}
+.u-item {
+  flex: 1;
+  text-align: center;
+  font-size: 26rpx;
+  height: 100%;
+  @include vue-flex;
+  align-items: center;
+  justify-content: center;
+  color: $u-main-color;
+  padding: 0 6rpx;
+  position: relative;
+}
 
-	.u-item-bg {
-		background-color: $u-type-primary;
-		position: absolute;
-		z-index: -1;
-	}
+.u-item-bg {
+  background-color: $u-type-primary;
+  position: absolute;
+  z-index: -1;
+}
 
-	.u-none-border-right {
-		border-right: none !important;
-	}
+.u-none-border-right {
+  border-right: none !important;
+}
 
-	.u-item-first {
-		border-top-left-radius: 8rpx;
-		border-bottom-left-radius: 8rpx;
-	}
+.u-item-first {
+  border-top-left-radius: 8rpx;
+  border-bottom-left-radius: 8rpx;
+}
 
-	.u-item-last {
-		border-top-right-radius: 8rpx;
-		border-bottom-right-radius: 8rpx;
-	}
+.u-item-last {
+  border-top-right-radius: 8rpx;
+  border-bottom-right-radius: 8rpx;
+}
 
-	.u-item-text {
-		transition: all 0.35s;
-		color: $u-main-color;
-		@include vue-flex;
-		align-items: center;
-		position: relative;
-		z-index: 3;
-	}
+.u-item-text {
+  transition: all 0.35s;
+  color: $u-main-color;
+  @include vue-flex;
+  align-items: center;
+  position: relative;
+  z-index: 3;
+}
 </style>