JIALDemo/target/classes/static/style/css/index.css

.container {
    position: relative;
}

.avatar {
    border-radius: 50%;
    width: 160px;
    right: 100px;
}

.clock-wrapper {
    position: absolute;
    width: 200px;
    height: 100px;
    left: -340px;

}

.clock-wrapper .el-card {
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1); /* 透明度 */
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}



.weather-wrapper {
    position: absolute;
    left: 700px;

}

.weather-wrapper .weather-title {
    text-align: center;
}

.weather-wrapper .weather-title .el-input {
    width: 90px;
}

.weather-wrapper .el-card {
    background-color: rgba(255, 255, 255, 0.1);
    width: 300px;
    height: 250px;
}

.weather-wrapper .el-card .weather-info {
    margin-top: 20px;
}

.weather-wrapper .el-card .weather-info div {
    font-size: 15px;
    margin: 10px 20px 10px 25px;
    color: #666; /* 文本颜色可调节 */
}

.weather-wrapper .weather-title .el-input__inner  {
    height: 25px;
}

.calendar-wrapper {
    position: absolute;
    width: 430px;
    top: 140px;
    left: -440px;

}

.calendar-wrapper .el-calendar {
    background-color: rgba(255, 255, 255, 0.3); /* 设置背景透明度 */

}

.calendar-wrapper .el-calendar .el-calendar-day {
    font-size:10px; /* 设置字体大小，根据需要调整 */
    height: 55px;
}

.el-button-group>.el-button {
    width: 60px;
    background-color: rgba(255, 255, 255, 0.3); /* 设置背景透明度 */
}

/**隐藏上一月、本月、下一月*/
.el-calendar__button-group {
    left: 240px;
    position: absolute;

    /*display: none;*/
}
/**月份居中*/
.el-calendar__title {
    width: 100%;

    text-align: left;

}
/**日期div的样式*/
.el-calendar-table tr td:first-child {
    border-left: 0px;
}
.el-calendar-table td {
    min-height: 0px;
    min-width: 0px;
    border-right: 0px;
}
.el-calendar-table td.is-selected {
    background-color: white;
}
.el-calendar-table .el-calendar-day {
    height: 100%;
    width: 100%;
    text-align: center;
}
.el-calendar-table .el-calendar-day > div {
    height: 104px;
}
/**日期div的样式-公历*/
.el-calendar-table .el-calendar-day > div .solar {
    padding-top: 0px;
}
/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day > div .lunar {
    padding-top: 8px;
}
/**日期div的样式-选中*/
.el-calendar-table .el-calendar-day > div.selected {
    background-color: #fef2f2;
    border: 3px solid #fb0;
    border-radius: 20px;
}

/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n+2) .solar {
    color: red;
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
    color: #606266;
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
    color: red;
}
/**禁用点击效果*/
/*.el-calendar-table td {*/
/*pointer-events: none;*/
/*}*/

.clock-digits {
    font-size: 40px;
    color: #333;
}

li {
    float: left;
    list-style-type: none;
    padding: 15px;
    margin-top: 20px;
}

::selection {
    background: rgba(0,149,255,.1);
    color: #6F8EC5;
}

p {
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    text-decoration: none;
    color: inherit;
}

.bio {
    color: rgba(51,51,51,0.54);
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bio > span {
    font-weight: 300;
    letter-spacing: 1.4px;
    opacity: 0;
    transition: all 1s .5s;
}

.bio > span.emphasis {
    font-size: 20px;
    letter-spacing: 2px;
}

.bio.ready > span {
    opacity: 1;
}

.content-container {
    position: relative;
    text-align: center;
}