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

214 lines
3.6 KiB
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;
}