【类 型】：feat

【原  因】：
【过  程】：订单列表页ui tab标签切换组件设计
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

App.vue

@@ -62,6 +62,10 @@
 	.fr {
 		text-align: right;
 	}
+	
+	.animation {
+	  transition: all 0.2s ease;
+	}
 
 	.checkBox {
 		weight: 40rpx;

pages/main/order.vue

@@ -1,6 +1,22 @@
 <template>
 	<view>
-		<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
+		<!-- topbar -->
+		<u-navbar title="确认订单" bgColor="#d43030" :titleStyle="{ color: '#FFF'}" :autoBack="true" placeholder>
+			<view class="u-nav-slot" slot="left">
+				<u-icon name="arrow-left" color="#fff" size="19"></u-icon>
+			</view>
+		</u-navbar>
+		<!-- tab -->
+		<view class="tabListBox m-l-24 m-r-24 m-t-24 flex msb">
+			<view class="tabBox flex mac mc fz32" v-for="(tab,index) in tabList" :key="index" @click="handlerTab(index)"
+				:class="current===index?'fb':''">
+				{{tab}}
+			</view>
+		</view>
+		<!-- tabLine -->
+		<view class="tabLineBox flex mac mc" :style="{ left: tabLineLeft + 'rpx' }">
+			<view class="tabLine rad8 bg-m"></view>
+		</view>
 	</view>
 </template>
 
@@ -8,15 +24,43 @@
 	export default {
 		data() {
 			return {
-				list: [{
+				tabList: ['待支付', '已付款', '退款售后'], // tab标签
-					name: '待收货'
+				current: 0, //当前激活标签
-				}, {
+				tabLineLeft: 24 //tabLine 样式表的left值
-					name: '待付款'
+			}
-				}, {
+		},
-					name: '待评价',
+		methods: {
-					count: 5
+			handlerTab(index) {
-				}],
+				this.current = index
+				// 计算每个 tabLine 的left值
+				const tabWidth = 200
+				const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
+				1) // 750是屏幕宽度，48是左右边距
+				this.tabLineLeft = 24 + index * (tabWidth + spacing) // 计算新的 left 值
 			}
 		}
 	}
-</script>
+</script>
+
+<style lang="scss" scoped>
+	.tabListBox {
+		height: 77rpx;
+	}
+
+	.tabBox {
+		width: 200rpx;
+		height: 77rpx;
+	}
+
+	.tabLineBox {
+		width: 200rpx;
+		height: 8rpx;
+		position: absolute;
+		transition: all .5s ease;
+	}
+
+	.tabLine {
+		width: 70rpx;
+		height: 8rpx;
+	}
+</style>