岗位选择

h5app/src/components/postSelection.vue

@@ -61,6 +61,26 @@ ion-segment-button {
 /*  --border-radius: 0px;*/
 /*  --border-width: 0 0 0 0;*/
 /*}*/
+
+.custom-scroll {
+  overflow-y: auto; /* 显示垂直滚动条 */
+  max-height: 200px; /* 设置最大高度，超出部分会出现滚动条 */
+}
+
+/* 可以根据需要自定义滚动条的样式 */
+.custom-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 4px;
+}
+
+.custom-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+
 </style>
 
 <template>
@@ -84,7 +104,7 @@ ion-segment-button {
           </ion-item>
           <ion-item>
             <ion-segment value="0">
-              <ion-segment-button v-for="(item) in selectModelList" @click="onSelectType(item.index)"
+              <ion-segment-button v-for="(item,key) in selectModelList" :key="key" @click="onSelectType(item.index)"
                                   :disabled="item.disabled" :value="item.index">
                 <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}">{{ item.name }}</ion-label>
               </ion-segment-button>
@@ -93,7 +113,7 @@ ion-segment-button {
         </ion-toolbar>
         <div class="bw-vue-list">
           <div class="list-content">
-            <ion-list v-show="selectModelList[selectType.one].isSelect">
+            <ion-list class="custom-scroll" v-show="selectModelList[selectType.one].isSelect">
               <ion-item v-for="(item, index) in selectModelList[selectType.one].professionList" :key="index">
                 <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}"
                            @click="onSelect(item,selectType.one)">
@@ -101,7 +121,7 @@ ion-segment-button {
                 </ion-label>
               </ion-item>
             </ion-list>
-            <ion-list v-show="selectModelList[selectType.two].isSelect">
+            <ion-list class="custom-scroll" v-show="selectModelList[selectType.two].isSelect">
               <ion-item v-for="(item, index) in selectModelList[selectType.two].professionList" :key="index">
                 <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}"
                            @click="onSelect(item,selectType.two)">
@@ -109,7 +129,7 @@ ion-segment-button {
                 </ion-label>
               </ion-item>
             </ion-list>
-            <ion-list v-show="selectModelList[selectType.three].isSelect">
+            <ion-list class="custom-scroll" v-show="selectModelList[selectType.three].isSelect">
               <ion-item v-for="(item, index) in selectModelList[selectType.three].professionList" :key="index">
                 <ion-label :style="{color:item.isSelect?'#1a65eb':'#000000'}"
                            @click="onSelect(item,selectType.three)">

h5app/src/views/pages/post/edit.vue

@@ -195,20 +195,16 @@ import {useRoute, useRouter} from "vue-router";
 import {alertController, onIonViewDidEnter} from "@ionic/vue";
 import {useVuelidate} from "@vuelidate/core";
 import {getPostByID, savePost} from "@/api/post";
-import {minLength, required} from "@vuelidate/validators";
+import { required} from "@vuelidate/validators";
 import {getSysDictionaryList} from "@/api/system/dictionary";
 import {getCompanyBySiteID} from "@/api/company";
 import {useUserStore} from '@/store/modules/user';
 import dayjs from "dayjs";
-import Picker from "@/components/picker.vue";
 import PostSelection from "@/components/postSelection.vue";
 
 export default defineComponent({
   name: 'PostEdit',
-  components:{
-    PostSelection,
-    Picker
-  },
+  components:{PostSelection},
   setup() {
     const router = useRouter();
     const route = useRoute();