Pārlūkot izejas kodu

fix: 采购订单和销售发货tab栏显示问题

liujt 3 dienas atpakaļ
vecāks
revīzija
3f3e0ed9fd

+ 39 - 2
pages/home/wt/components/purchaseOrder/taskForm.vue

@@ -1,8 +1,17 @@
 <template>
 	<view class="">
 		<u-sticky offset-top="50">
-			<u-subsection fontSize='25' mode='subsection' :list="list" :current="curNow" @change="sectionChange"
-				activeColor='#157A2C'></u-subsection>
+			<view class="subsection-bar">
+				<view
+					v-for="(item, index) in list"
+					:key="index"
+					class="subsection-item"
+					:class="{ 'subsection-item-active': curNow === index }"
+					@click="sectionChange(index)"
+				>
+					<text class="subsection-text">{{ item }}</text>
+				</view>
+			</view>
 		</u-sticky>
 
 		<view v-show='curNow===0'>
@@ -259,4 +268,32 @@
 </script>
 
 <style>
+.subsection-bar {
+	display: flex;
+	background-color: #fff;
+	/* padding: 0 16rpx; */
+	margin: 16rpx;
+	border: 1px solid #ebedf0;
+	border-radius: 8rpx;
+	overflow: hidden;
+}
+.subsection-item {
+	flex: 1;
+	text-align: center;
+	padding: 12rpx 0;
+	margin: 0 4rpx;
+	border-bottom: 4rpx solid transparent;
+	transition: all 0.3s;
+}
+.subsection-item-active {
+	color: #fff;
+	background-color: #157A2C;
+}
+.subsection-text {
+	font-size: 25rpx;
+	color: #323233;
+}
+.subsection-item-active .subsection-text {
+	color: #fff;
+}
 </style>

+ 37 - 3
pages/home/wt/components/salesDelivery/taskForm.vue

@@ -1,8 +1,17 @@
 <template>
 	<view class="task-form-container">
 		<u-sticky offset-top="50">
-			<u-subsection fontSize='25' mode='subsection' :list="list" :current="curNow" @change="sectionChange"
-				activeColor='#157A2C' bgColor='#fff'></u-subsection>
+			<view class="subsection-bar">
+				<view
+					v-for="(item, index) in list"
+					:key="index"
+					class="subsection-item"
+					:class="{ 'subsection-item-active': curNow === index }"
+					@click="sectionChange(index)"
+				>
+					<text class="subsection-text">{{ item }}</text>
+				</view>
+			</view>
 		</u-sticky>
 
 		<view v-show='curNow===0'>
@@ -1092,8 +1101,33 @@
 .tab-content {
 	padding-top: 20rpx;
 }
-.u-subsection--subsection {
+.subsection-bar {
+	display: flex;
 	background-color: #fff;
+	/* padding: 0 16rpx; */
+	margin: 16rpx;
+	border: 1px solid #ebedf0;
+	border-radius: 8rpx;
+	overflow: hidden;
+}
+.subsection-item {
+	flex: 1;
+	text-align: center;
+	padding: 12rpx 0;
+	margin: 0 4rpx;
+	border-bottom: 4rpx solid transparent;
+	transition: all 0.3s;
+}
+.subsection-item-active {
+	color: #fff;
+	background-color: #157A2C;
+}
+.subsection-text {
+	font-size: 25rpx;
+	color: #323233;
+}
+.subsection-item-active .subsection-text {
+	color: #fff;
 }
 .assetType_box {
 	padding: 12rpx 18rpx;