Browse Source

事项弹窗样式优化

cxmo 1 year ago
parent
commit
57dc748dd0
1 changed files with 12 additions and 2 deletions
  1. 12 2
      src/views/hzyb/forexCalendar/Index.vue

+ 12 - 2
src/views/hzyb/forexCalendar/Index.vue

@@ -222,7 +222,11 @@ onMounted(()=>{
                 @click-item="clickItemHandle" 
             />
         </Popup>
-        <Popup v-model:show="showEventList" position="bottom" :style="{ height: '30%' }">
+        <Popup v-model:show="showEventList" position="bottom" :style="{ height: '50%',display: 'flex',flexDirection: 'column' }">
+            <div class="select-header">
+                <span class="title">{{ currentDay }}{{ permissionName }}事项</span>
+                <span class="btn" @click="showEventList=false"><van-icon name="cross" size="16"/></span>
+            </div>
             <div class="event-list-wrap">
                 <ul class="event-list">
                     <li class="event-item" v-for="(item,index) in eventList" :key="index" @click="handleClickEvent(item)">
@@ -272,12 +276,15 @@ onMounted(()=>{
         padding: var(--van-picker-action-padding);
         font-size: var(--van-picker-action-font-size);
         height: var(--van-picker-toolbar-height);
-        .cancel {
+        .cancel,.btn{
             color: #969799;
         }
         .ensure {
             color: #576b95;
         }
+        .title{
+            font-weight: bold;
+        }
     }
     .van-tree-select {
         ::v-deep(.van-sidebar-item--select:before) {
@@ -295,8 +302,11 @@ onMounted(()=>{
     .event-list-wrap{
         font-size: var(--van-picker-action-font-size);
         padding: var(--van-padding-md);
+        flex:1;
+        overflow-y: auto;
         .event-item{
             margin-bottom: var(--van-padding-md);
+            border-bottom: 1px solid #E7E7E7;
         }
     }
 }