|
|
@@ -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>
|
