日历样式

src/views/hzyb/forexCalendar/Index.vue

@@ -1,10 +1,9 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import {Popup,DatetimePicker,TreeSelect } from 'vant'
+import {Popup,DatetimePicker,TreeSelect,Icon as VanIcon } from 'vant'
 import BaseCalendar from './components/BaseCalendar.vue'
 let baseCalendarRef = ref(null)
 function dateClick(info){
-    //页面旋转后失效
     console.log('dateClick',info)
 }
 function eventClick(info){
@@ -41,8 +40,8 @@ function typeSelectPick(){
 <template>
     <div class="forex-calendar-wrap" @click="handleClick">
         <div class="calendar-header">
-            <span @click.stop="dateSelectPick">日期</span>
-            <span @click.stop="typeSelectPick">列表</span>
+            <span @click.stop="dateSelectPick"><img src="@/assets/hzyb/chart/calendar.png">选择日期</span>
+            <span @click.stop="typeSelectPick"><van-icon name="bars" color="#E3B377" size="16"/>其他品种</span>
         </div>
         <BaseCalendar 
             ref="baseCalendarRef"
@@ -79,6 +78,23 @@ function typeSelectPick(){
     bottom:0;
     .calendar-header{
         font-size: 16px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        height:40px;
+        span{
+            margin-right: 40px;
+            display: flex;
+            align-items: center;
+            gap:5px;
+            i{
+                font-size: 18px !important;
+            }
+            img{
+                width:15px;
+                height:15px;
+            }
+        }
     }
 }
 </style>

src/views/hzyb/forexCalendar/components/BaseCalendar.vue

@@ -38,8 +38,8 @@ let calendarOptions = ref({
     },
     events:[{
         id:1,
-        title:'我是默认事件', //事件名称
-        start:'2024-03-26',//日期,默认是全天事件
+        title:'RAG Storage Pool', //事件名称
+        start:'2024-04-01',//日期,默认是全天事件
         textColor:'#000',//字体颜色
         backgroundColor:'#ffc0cb',//背景色
         borderColor:'#ffc0cb',//边框色
@@ -51,7 +51,7 @@ let calendarOptions = ref({
     },{
         id:2,
         title:'我是默认事件2名字很长很长', //事件名称
-        start:'2024-03-26',//日期,默认是全天事件
+        start:'2024-0-02',//日期,默认是全天事件
         textColor:'#000',//字体颜色
         backgroundColor:'#ffc0cb',//背景色
         borderColor:'#ffc0cb',//边框色
@@ -123,7 +123,9 @@ defineExpose({ calendarApi });
             width:100% !important;
         } */
         :deep(.fc-daygrid-day-number){
-            font-size: 14px;
+            font-size: 12px;
+            line-height: 12px;
+            padding:0 2px;
         }
         :deep(.fc-scrollgrid-sync-inner){
             width: 100%;
@@ -135,7 +137,7 @@ defineExpose({ calendarApi });
             display: block;
         }
         :deep(.fc-col-header-cell-cushion ){
-            font-size: 14px;
+            font-size: 12px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -146,6 +148,26 @@ defineExpose({ calendarApi });
                 width: 0;
             }
         }
+        :deep(.fc-scrollgrid){
+            border:none;
+            .fc-scrollgrid-section-header{
+                th{
+                    border:none !important;
+                }
+                .fc-col-header-cell{
+                    //font-weight: 500;
+                    .fc-scrollgrid-sync-inner{
+                        justify-content: flex-start;
+                    }
+                }
+            }
+            .fc-scrollgrid-section-body{
+                td{
+                    border: none !important;
+                    border-left:3px solid #E3B377 !important;
+                }
+            }
+        }
         :deep(.fc-daygrid-day-events){
             min-height: 1em !important;
             margin-top: 0 !important;

src/views/hzyb/forexCalendar/transIndex.vue

@@ -45,7 +45,7 @@ onMounted(()=>{
 <template>
     <!-- 直接将旋转作用在Index.vue上会导致日历插件dateClick不触发,vant组件滑动手势x,y轴相反 -->
     <!-- 包一层,iframe为可替换元素,内部元素不受父级样式影响,但overflow-x,overflow-y判断会对调 -->
-    <iframe src="http://192.168.77.18:3000/xcx_h5/hzyb/forex/index" class="iframe-class"></iframe>
+    <iframe src="/xcx_h5/hzyb/forex/index" class="iframe-class"></iframe>
 </template>
 
 <style scoped lang="scss">