Kaynağa Gözat

事项弹窗样式优化

cxmo 1 yıl önce
ebeveyn
işleme
57dc748dd0
1 değiştirilmiş dosya ile 12 ekleme ve 2 silme
  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" 
                 @click-item="clickItemHandle" 
             />
             />
         </Popup>
         </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">
             <div class="event-list-wrap">
                 <ul class="event-list">
                 <ul class="event-list">
                     <li class="event-item" v-for="(item,index) in eventList" :key="index" @click="handleClickEvent(item)">
                     <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);
         padding: var(--van-picker-action-padding);
         font-size: var(--van-picker-action-font-size);
         font-size: var(--van-picker-action-font-size);
         height: var(--van-picker-toolbar-height);
         height: var(--van-picker-toolbar-height);
-        .cancel {
+        .cancel,.btn{
             color: #969799;
             color: #969799;
         }
         }
         .ensure {
         .ensure {
             color: #576b95;
             color: #576b95;
         }
         }
+        .title{
+            font-weight: bold;
+        }
     }
     }
     .van-tree-select {
     .van-tree-select {
         ::v-deep(.van-sidebar-item--select:before) {
         ::v-deep(.van-sidebar-item--select:before) {
@@ -295,8 +302,11 @@ onMounted(()=>{
     .event-list-wrap{
     .event-list-wrap{
         font-size: var(--van-picker-action-font-size);
         font-size: var(--van-picker-action-font-size);
         padding: var(--van-padding-md);
         padding: var(--van-padding-md);
+        flex:1;
+        overflow-y: auto;
         .event-item{
         .event-item{
             margin-bottom: var(--van-padding-md);
             margin-bottom: var(--van-padding-md);
+            border-bottom: 1px solid #E7E7E7;
         }
         }
     }
     }
 }
 }