
            /* 设置日历主题样式 */
            .tianyu-calendar {
                --calendar-color: var(--theme-color); /* 定义日历颜色变量，默认空白颜色 */
                box-shadow: 0 0 10px var(--main-shadow); /* 添加阴影效果 */
                border-radius: 10px; /* 圆角边框 */
                overflow: hidden; /* 隐藏溢出内容 */
                user-select: none; /* 禁止所有文本被选中 */
            }

            /* 根据子比主题 全局颜色 改变 会覆盖默认颜色 */
            .tianyu-calendar.blue { --calendar-color: #2e8fff; }
            .tianyu-calendar.grey { --calendar-color: #7f7f7f; }
            .tianyu-calendar.red { --calendar-color: #f96056; }
            .tianyu-calendar.green { --calendar-color: #5fce64; }
            .tianyu-calendar.orange { --calendar-color: #ff9501; }
            .tianyu-calendar.purple { --calendar-color: #973ac2; }

            /* 设置日历内 当前日期的样式 */
            .Tianyu-calendar-body-header .calendar-current-day {
                background-color: var(--calendar-color); /* 背景颜色使用日历颜色变量 */
                color: #fff; /* 文字颜色为白色 */
                border-radius: 4px; /* 圆角边框 */
            }

            /* 设置日历主体头部列表的样式 */
            .Tianyu-calendar-body-header ul {
                display: grid; /* 使用网格布局 */
                column-gap: 5px; /* 横向间距 */
                row-gap: 5px; /* 竖向间距 */
                grid-template-columns: repeat(7, 1fr); /* 7列等宽布局 */

            }

            /* 设置日历列表项的样式 */
            .Tianyu-calendar-body-header ul li {
                text-align: center; /* 文字居中对齐 */
                padding: 2px 0; /* 垂直内边距 */
                font-size: 16px; /* 字体大小 */
            }

            /* 设置农历日期的样式 */
            .calendar-lunar-date {
                color: #9999AA; /* 文字颜色 */
                font-size: 10px; /* 字体大小 */
                
            }

            /* 设置农历今日的样式 */
            .calendar-lunar-date-day {
                color: #fff; /* 文字颜色 */
                font-size: 10px; /* 字体大小 */
                
            }

            /* 设置日历内 上月+下月日期的样式 */
            .Tianyu-calendar-body-header .calendar-other-month {
                color: #9999AA; /* 文字颜色 */
                font-size: 14px; /* 字体大小 */
            }

            /* 定义日历头部样式 */
            .tianyu-calendar .Tianyu-calendar-header {
                background-color: var(--calendar-color); /* 头部背景颜色使用日历颜色变量 */
                display: flex; /* 使用弹性布局 */
                align-items: center; /* 垂直居中对齐 */
                justify-content: space-between; /* 水平空间分布对齐 */
                color: #fff; /* 文字颜色为白色 */
                position: relative; /* 定位方式为相对定位 */
            }

            /* 设置日历左上角标题样式 */
            .Tianyu-calendar-header .Tianyu-calendar-title {
                font-size: 25px; /* 标题字体大小 */
                padding-left: 20px; /* 左内边距 */
            }

            /* 设置头部右侧区域样式 */
            .Tianyu-calendar-header .Tianyu-calendar-header-right {
                display: flex; /* 使用弹性布局 */
                gap: 10px; /* 元素间距 */
                align-items: center; /* 垂直居中对齐 */
                padding-right: 10px; /* 右内边距 */
            }

            /* 定义头部图标位置和大小 */
            .Tianyu-calendar-img-1,
            .Tianyu-calendar-img-2,
            .Tianyu-calendar-img-3 {
                position: absolute; /* 定位方式为绝对定位 */
                max-width: 100%; /* 最大宽度 */
                max-height: 100%; /* 最大高度 */
            }

            /* 分别设置每个图标的具体位置 */
            .Tianyu-calendar-img-1 { left: -220px; top: -60px; }
            .Tianyu-calendar-img-2 { left: -44px; }
            .Tianyu-calendar-img-3 { left: -170px; bottom: -90px; }
            
            /* 设置月份和星期的样式 */
            .Tianyu-calendar-header .Tianyu-calendar-month-week {
                text-align: right; /* 文字右对齐 */
            }

            /* 设置当前日数字的样式 */
            .Tianyu-calendar-header .Tianyu-calendar-number {
                font-size: 48px; /* 字体大小 */
            }

            /* 定义日历主体样式 */
            .tianyu-calendar .Tianyu-calendar-main {
                position: relative; /* 定位方式为相对定位 */
                background-color: var(--main-bg-color); /* 背景颜色使用主背景颜色变量 */
                padding: 0px 15px 15px 15px; /* 上、右、下、左的内边距 */
            }


            /* 定义日期+翻页主体样式 */
            .Tianyu-calendar-bottom {          /* 容器样式 */
                position: relative;     /* 使用相对定位，允许内部元素进行绝对定位 */
                display: flex;          /* 使用弹性布局来排列子元素 */
                justify-content: center;/* 水平居中对齐子元素 */
                align-items: center;    /* 垂直居中对齐子元素 */
                background-color: var(--main-bg-color); /* 背景颜色使用自定义变量 */
                padding: 10px;          /* 内边距为10像素 */
            }

            /* 设置左右箭头的位置 */
            .Tianyu-calendar-left,
            .Tianyu-calendar-right {
                position: absolute; /* 绝对定位 */
                cursor: pointer; /* 鼠标悬停时显示手型光标 */
                font-size: 20px; /* 字体大小 */
                transition: color 0.3s ease-in-out; /* 颜色过渡动画效果 */
            }

            /* 左箭头位置 */
            .Tianyu-calendar-left {
                left: 22px; /* 左边距 */
            }

            /* 右箭头位置 */
            .Tianyu-calendar-right {
                right: 22px; /* 右边距 */
            }

            /* 设置日期居中 */
            .Tianyu-calendar-middle {
                text-align: center; /* 文本水平居中 */
                flex-grow: 1; /* 在弹性布局中尽可能占据空间 */
                font-size: 18px; /* 字体大 */
            }

            /* 添加鼠标悬停效果 */
            .Tianyu-calendar-left:hover, /* 鼠标悬停在左箭头上时 */
            .Tianyu-calendar-right:hover { /* 鼠标悬停在右箭头上时 */
                color: var(--calendar-color); /* 改变颜色为日历主题颜色 */
            }

            /* 设置星期样式 */
            .Tianyu-calendar-text {
                font-weight: bold;
                margin-bottom: 5px; /* 调整下间距 */
            }
