修改样式

src/main.js

@@ -9,7 +9,7 @@ import { Button, Icon, Tag, Swipe, SwipeItem, Popup, Picker,
     Collapse, CollapseItem, Tab, Tabs, Row, Col, Cell, CellGroup,
     Circle, Field, DatetimePicker, Image, Loading,
     ActionSheet, RadioGroup, Radio, Checkbox, CheckboxGroup,
-    CountDown, Panel, Dialog, Sticky, Rate, Switch, ImagePreview} from 'vant'
+    CountDown, Panel, Dialog, Sticky, Rate, Switch, ImagePreview, NavBar} from 'vant'
 Vue.use(Button).use(Icon).use(Tag).use(Swipe).use(SwipeItem)
    .use(Popup).use(Picker).use(DropdownMenu).use(DropdownItem).use(Search)
    .use(PullRefresh).use(Toast).use(List).use(Collapse).use(CollapseItem)
@@ -17,6 +17,7 @@ Vue.use(Button).use(Icon).use(Tag).use(Swipe).use(SwipeItem)
    .use(Circle).use(Field).use(DatetimePicker).use(Image).use(Loading)
    .use(ActionSheet).use(RadioGroup).use(Radio).use(Checkbox).use(CheckboxGroup)
    .use(CountDown).use(Panel).use(Dialog).use(Sticky).use(Rate).use(Switch).use(ImagePreview)
+   .use(NavBar)
 Vue.config.productionTip = false
 
 // import Vconsole from 'vconsole'

src/views/teacher/order.vue

@@ -1,10 +1,25 @@
 <template>
     <div class="order">
-        <header>缴费详情
+        <!-- <header>
+            <van-icon name="arrow-left" />
+            缴费详情
             <van-dropdown-menu>
                 <van-dropdown-item @change="onChange" v-model="voicyPart" :options="voicyPartList" />
             </van-dropdown-menu>
-        </header>
+        </header> -->
+        <van-nav-bar
+            title="缴费详情"
+            right-text="按钮"
+            :left-arrow="plat == 'manager' ? true : false"
+            z-index="999"
+            @click-left="onClickLeft"
+        >
+            <template #right>
+                <van-dropdown-menu z-index="999">
+                    <van-dropdown-item @change="onChange" v-model="voicyPart" :options="voicyPartList" />
+                </van-dropdown-menu>
+            </template>
+        </van-nav-bar>
         <h2>{{musicGroupName}}</h2>
         <van-tabs color="#01C1B5">
             <van-tab title="缴费信息">
@@ -126,9 +141,11 @@ import cleanDeep from 'clean-deep'
 export default {
     name: 'order',
     data() {
+        let query = this.$route.query
         return {
-            musicGroupId: this.$route.query.musicGroupId,
-            musicGroupName: this.$route.query.musicGroupName,
+            musicGroupId: query.musicGroupId,
+            musicGroupName: query.musicGroupName,
+            plat: query.plat,
             dataList: {}, // 订单列表
             amountCount: 0, // 总额
             studentList: {}, // 学生列表
@@ -178,6 +195,9 @@ export default {
         this.getRegisterOrPreList()
     },
     methods: {
+        onClickLeft() {
+            window.location.go(-1)
+        },
         adjust(item) {
             // 开始调剂
             if(item.paymentStatus != 2) {
@@ -312,18 +332,18 @@ export default {
 header {
     height: .40rem;
     line-height: .40rem;
-    color: #000;
+    color: #fff;
     font-size: .17rem;
-    background: #fff;
+    background: #14928a;
     box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.07);
     text-align: center;
 }
 h2 {
     font-size: .16rem;
-    color: #fff;
+    color: #000;
     padding: .1rem 0;
     text-align: center;
-    background: #14928a;
+    background: #fff;
 }
 
 
@@ -357,14 +377,29 @@ h2 {
     }
 }
 /deep/.van-dropdown-menu {
-    height: .4rem;
-    position: absolute;
-    right: .15rem;
-    top: 0;
+    height: 46px;
+    // position: absolute;
+    // right: .15rem;
+    background: #14928a;
+    // top: 0;
     .van-dropdown-menu__bar {
         height: .4rem;
         box-shadow: none;
     }
+    .van-dropdown-menu__title {
+        color: #fff;
+    }
+}
+
+/deep/.van-nav-bar {
+    background: #14928a;
+    .van-icon {
+        font-size: .18rem;
+        color: #fff;
+    }
+    .van-nav-bar__title {
+        color: #fff;
+    }
 }
 
 /deep/.van-col {