4.14新增

src/App.vue

@@ -7,7 +7,7 @@
 		name: 'app',
 		components: {},
 		mounted() {
-			this.$router.push('/my/refund-application');
+			this.$router.push('/my/set-up');
 		},
 	}
 </script>

src/components/sub-header.vue

@@ -29,9 +29,29 @@
 							完成订单
 						</div>
 					</div>
-					<div style="width: 375px;" v-if="!hideAlert">
-						<el-alert title="限时30元购物券免费领，一人一次限领一张~" type="warning">
-						</el-alert>
+					<div style="width: 375px;" v-if="!hideAlert">
+						<el-alert title="限时30元购物券免费领，一人一次限领一张~" type="warning">
+						</el-alert>
+					</div>
+					<div class="step-wrap" v-if="hideStep">
+						<ul class="step-list">
+							<li>
+								<span class="circle-num">1</span>
+								买家申请退款退货
+							</li>
+							<li>
+								<span class="circle-num">2</span>
+								卖家处理退款申请
+							</li>
+							<li>
+								<span class="circle-num">3</span>
+								买家退货
+							</li>
+							<li class="gray">
+								<span class="circle-num">4</span>
+								退款完成
+							</li>
+						</ul>
 					</div>
 				</div>
 			</div>
@@ -52,11 +72,16 @@
 			hide: {
 				type: Boolean,
 				default: false,
-			},
-			//是否隐藏提示信息
-			hideAlert: {
-				type: Boolean,
-				default: false,
+			},
+			//是否隐藏提示信息
+			hideAlert: {
+				type: Boolean,
+				default: false,
+			},
+			//是否步骤信息
+			hideStep: {
+				type: Boolean,
+				default: true,
 			}
 		},
 		data() {
@@ -164,4 +189,107 @@
 	.process-item.active .circle-row {
 		background-color: #F2501A;
 	}
+
+	.step-wrap {
+		flex: 1;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.step-list {
+		display: flex;
+		align-items: center;
+	}
+
+	.step-list>li {
+		min-width: 240px;
+		height: 30px;
+		background-color: #F2501A;
+		color: #FFFFFF;
+		font-size: 14px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+	}
+
+	.step-list>li::before {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translate(0, -50%);
+		width: 0;
+		height: 0;
+		border: 15px solid transparent;
+		border-left-color: #FFFFFF;
+	}
+
+	.step-list>li:first-child::before {
+		border-left-color: #F2501A;
+	}
+
+	.step-list>li::after {
+		content: "";
+		display: block;
+		position: absolute;
+		right: 0;
+		top: 50%;
+		transform: translate(0, -50%);
+		width: 0;
+		height: 0;
+		border-top: 15px solid #FFFFFF;
+		border-bottom: 15px solid #FFFFFF;
+		border-left: 15px solid #F2501A;
+	}
+
+	.step-list>li:last-child::after {
+		border-top: 15px solid #F2501A;
+		border-bottom: 15px solid #F2501A;
+	}
+
+	.circle-num {
+		width: 17px;
+		height: 17px;
+		line-height: 17px;
+		font-size: 12px;
+		color: #F2501A;
+		border-radius: 50%;
+		background-color: #FFFFFF;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-right: 9px;
+	}
+
+	.step-list>li.gray {
+		color: #BBBBBB !important;
+		background-color: #EEEEEE !important;
+	}
+
+	.step-list>li.gray .circle-num {
+		color: #FFFFFF !important;
+		background-color: #BBBBBB !important;
+	}
+
+	.step-list>li.gray::before {
+		border-left-color: #FFFFFF;
+	}
+
+	.step-list>li.gray:first-child::before {
+		border-left-color: #EEEEEE;
+	}
+
+	.step-list>li.gray::after {
+		border-top: 15px solid #FFFFFF;
+		border-bottom: 15px solid #FFFFFF;
+		border-left: 15px solid #EEEEEE;
+	}
+
+	.step-list>li.gray:last-child::after {
+		border-top: 15px solid #EEEEEE;
+		border-bottom: 15px solid #EEEEEE;
+	}
 </style>

src/views/my/my.vue

@@ -47,7 +47,7 @@
 					<div class="rightsidebar-top-tabList">
 						<a href="javascript:void(0)">我的收货地址</a>
 						<a href="javascript:void(0)">我的卡券</a>
-						<a href="javascript:void(0)">我的粉丝</a>
+						<a href="javascript:void(0)" @click="$router.push('/my/my-fans')">我的粉丝</a>
 						<a href="javascript:void(0)">我的佣金</a>
 					</div>
 				</div>

src/views/my/refund-application.vue

@@ -4,7 +4,7 @@
 
 		<Header backgroundColor="#F2F2F2"></Header>
 
-		<Subheader title="" hide="true" hideAlert="true"></Subheader>
+		<Subheader title="" hide="true" hideAlert="true" hideStep="false"></Subheader>
 
 		<div class="box">
 			<div class="box-leftsidebar">