task 银农手机端工作台顶部账套所属切换

src/views/yinnong/workbench.vue

@@ -1,40 +1,43 @@
 <template>
     <div class="app-container">
-      <van-sticky>
-      <van-nav-bar
-        title=""
-      >
-        <template #left>
-            <van-icon name="location" color="3A80FB" size="16"/>
+<!--      <van-sticky>-->
+<!--      <van-nav-bar-->
+<!--        title=""-->
+<!--      >-->
+<!--        <template #left>-->
+      <div style="width: 96%;margin: 0 auto;display: flex;flex-direction: column;align-items: start;">
+          <div style="margin-top:.8vh;display: flex;align-items: center;padding: .8vh 1.6vh;background-color: rgba(255,255,255,.5);border-radius: 100vh;">
+            <van-icon name="location" color="#3A80FB" size="16"/>
             <p  style="color: #878787;margin-left: 5px" @click="selectDept">{{deptName}}</p>
-          <van-popup v-model="villageVisbile" round position="bottom" get-container="#app">
-            <van-cascader
-              v-model="villageValue"
-              title="请选择所在村"
-              :options="hcAreaInfoOption"
-              @close="hcAreaInfoClose"
-              @finish="hcAreaInfoFinish"
-              active-color="#1989fa"
-              :field-names="hcAreaInfoFieldName"
-            />
-          </van-popup>
-        </template>
-        <template #right>
-<!--          <van-icon name="wap-nav" color="#000" size="18"/>-->
-          <p  style="color: #878787;margin-left: 5px" @click="bookVisbile = true">{{bookName}}</p>
-          <van-popup v-model="bookVisbile" round position="bottom" get-container="#app">
-            <van-picker
-              title="请选择账套"
-              show-toolbar
-              :columns="bookList"
-              @confirm="onConfirmBook"
-              @cancel="onCancelBook"
-              value-key="bookName"
-            />
-          </van-popup>
-        </template>
-      </van-nav-bar>
-      </van-sticky>
+            <van-popup v-model="villageVisbile" round position="bottom" get-container="#app">
+              <van-cascader
+                v-model="villageValue"
+                title="请选择所在村"
+                :options="hcAreaInfoOption"
+                @close="hcAreaInfoClose"
+                @finish="hcAreaInfoFinish"
+                active-color="#1989fa"
+                :field-names="hcAreaInfoFieldName"
+              />
+            </van-popup>
+          </div>
+          <div style="margin-top:.8vh;padding: .8vh 1.6vh;background-color: rgba(255,255,255,.5);border-radius: 100vh;">
+            <p  style="color: #878787;margin-left: 5px" @click="bookVisbile = true">{{bookName}}</p>
+            <van-popup v-model="bookVisbile" round position="bottom" get-container="#app">
+              <van-picker
+                title="请选择账套"
+                show-toolbar
+                :columns="bookList"
+                @confirm="onConfirmBook"
+                @cancel="onCancelBook"
+                value-key="bookName"
+              />
+            </van-popup>
+          </div>
+      </div>
+<!--        </template>-->
+<!--      </van-nav-bar>-->
+<!--      </van-sticky>-->
       <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="width: 96%;margin: 2%;height:150px;border-radius: 6px;">
         <van-swipe-item v-for="(image,index) in images" :key="index">
           <img :src="image" style="width:100%;height: 150px"/>
@@ -315,6 +318,9 @@
     align-items: center;
     justify-content: center;
   }
+  >>> .van-nav-bar__left{
+    flex-direction: column;
+  }
   >>> .icon.all img{
     width: 80px;
     /* padding: 0; */