You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
271 lines
3.7 KiB
271 lines
3.7 KiB
5 years ago
|
page {
|
||
|
background: #fff;
|
||
|
}
|
||
|
|
||
|
.title {
|
||
|
margin: 20rpx;
|
||
|
}
|
||
|
|
||
|
.banner {
|
||
|
width: 100%;
|
||
|
height: 250rpx;
|
||
|
border-radius: 15rpx;
|
||
|
}
|
||
|
|
||
|
.banner-bg {
|
||
|
width: calc(100% - 39rpx);
|
||
|
height: 250rpx !important;
|
||
|
z-index: 1;
|
||
|
position: absolute;
|
||
|
}
|
||
|
|
||
|
/* 网格 */
|
||
|
|
||
|
.info {
|
||
|
position: absolute;
|
||
|
width: calc(100% - 39rpx);
|
||
|
height: 36rpx;
|
||
|
z-index: 2;
|
||
|
margin-top: 75rpx;
|
||
|
}
|
||
|
|
||
|
.info .name {
|
||
|
height: 36rpx;
|
||
|
line-height: 36rpx;
|
||
|
font-size: 36rpx;
|
||
|
font-weight: bold;
|
||
|
color: rgba(255, 255, 255, 1);
|
||
|
margin-left: 30rpx;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
.info .icon {
|
||
|
height: 34rpx;
|
||
|
width: 34rpx;
|
||
|
float: right;
|
||
|
margin-top: 1rpx;
|
||
|
}
|
||
|
|
||
|
.info .icon image {
|
||
|
width: 34rpx;
|
||
|
height: 34rpx;
|
||
|
}
|
||
|
|
||
|
.info .icon-right-1 {
|
||
|
margin-right: 20rpx;
|
||
|
}
|
||
|
|
||
|
.info .icon-right-2 {
|
||
|
margin-right: 49rpx;
|
||
|
}
|
||
|
|
||
|
/* 查看提示 */
|
||
|
|
||
|
.explain {
|
||
|
position: absolute;
|
||
|
width: calc(100% - 39rpx);
|
||
|
height: 24rpx;
|
||
|
z-index: 2;
|
||
|
margin-top: 136rpx;
|
||
|
}
|
||
|
|
||
|
.explain .icon {
|
||
|
width: 20rpx;
|
||
|
height: 24rpx;
|
||
|
float: left;
|
||
|
margin-left: 30rpx;
|
||
|
}
|
||
|
|
||
|
.explain .explain-name {
|
||
|
float: left;
|
||
|
line-height: 24rpx;
|
||
|
font-size: 22rpx;
|
||
|
font-weight: 500;
|
||
|
color: rgba(255, 255, 255, 1);
|
||
|
opacity: 0.5;
|
||
|
margin-left: 10rpx;
|
||
|
}
|
||
|
|
||
|
/* 切换 */
|
||
|
|
||
|
.switch {
|
||
|
position: absolute;
|
||
|
width: calc(100% - 39rpx);
|
||
|
height: 52rpx;
|
||
|
z-index: 2;
|
||
|
margin-top: 167rpx;
|
||
|
}
|
||
|
|
||
|
.switch .img-bg {
|
||
|
width: 130rpx;
|
||
|
height: 52rpx;
|
||
|
float: right;
|
||
|
}
|
||
|
|
||
|
.switch .img-bg image {
|
||
|
z-index: 3;
|
||
|
position: absolute;
|
||
|
width: 130rpx;
|
||
|
height: 52rpx;
|
||
|
}
|
||
|
|
||
|
.switch .qh {
|
||
|
position: absolute;
|
||
|
width: 130rpx;
|
||
|
height: 52rpx;
|
||
|
line-height: 52rpx;
|
||
|
z-index: 4;
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.switch .qh image {
|
||
|
width: 30rpx;
|
||
|
height: 30rpx;
|
||
|
margin-left: -30rpx;
|
||
|
}
|
||
|
|
||
|
.switch .qh text {
|
||
|
font-size: 26rpx;
|
||
|
font-weight: 500;
|
||
|
color: rgba(255, 255, 255, 1);
|
||
|
margin-left: 30rpx;
|
||
|
}
|
||
|
|
||
|
/* 文字样式 */
|
||
|
|
||
|
.detailed {
|
||
|
width: 100%;
|
||
|
border-top: 10rpx solid #f6f8f8;
|
||
|
padding: 30rpx 0;
|
||
|
}
|
||
|
|
||
|
.detailed .detailed-name {
|
||
|
font-size: 34rpx;
|
||
|
font-weight: bold;
|
||
|
color: rgba(51, 51, 51, 1);
|
||
|
margin-left: 20rpx;
|
||
|
}
|
||
|
|
||
|
/** 九宫格*/
|
||
|
|
||
|
.sudoku {
|
||
|
height: auto;
|
||
|
background-color: red;
|
||
|
box-sizing: border-box;
|
||
|
margin-top: 38rpx;
|
||
|
}
|
||
|
|
||
|
.sudoku .content {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
background: #fff;
|
||
|
display: grid;
|
||
|
grid-template-columns: repeat(4, 1fr);
|
||
|
align-content: center;
|
||
|
grid-row-gap: 10%;
|
||
|
box-sizing: border-box;
|
||
|
padding: 0 20rpx;
|
||
|
}
|
||
|
|
||
|
.sudoku .item {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
.sudoku .item image {
|
||
|
width: 64rpx;
|
||
|
height: 64rpx;
|
||
|
object-fit: contain;
|
||
|
}
|
||
|
|
||
|
.sudoku .item .name {
|
||
|
font-size: 24rpx;
|
||
|
color: #666;
|
||
|
line-height: 60rpx;
|
||
|
}
|
||
|
|
||
|
.grid-hover {
|
||
|
background: #f7f7f7;
|
||
|
}
|
||
|
|
||
|
/* 新增书记在线 */
|
||
|
|
||
|
.clerkOnline {
|
||
|
display: flex;
|
||
|
position: relative;
|
||
|
margin-left: 10rpx;
|
||
|
}
|
||
|
|
||
|
.but {
|
||
|
position: absolute;
|
||
|
height: 140rpx;
|
||
|
width: 25%;
|
||
|
}
|
||
|
|
||
|
.button {
|
||
|
width: 100%;
|
||
|
position: absolute;
|
||
|
left: 0;
|
||
|
background: rgba(255, 255, 255, 0);
|
||
|
z-index: 10;
|
||
|
height: 140rpx;
|
||
|
}
|
||
|
|
||
|
.button-left {
|
||
|
margin-left: 0%;
|
||
|
}
|
||
|
.button-weekly{
|
||
|
margin-left: 0%;
|
||
|
}
|
||
|
.button-monthly{
|
||
|
margin-left: 0%;
|
||
|
}
|
||
|
.button::after {
|
||
|
border: none;
|
||
|
}
|
||
|
|
||
|
/* 标签 */
|
||
|
|
||
|
.number {
|
||
|
padding: 0 10rpx;
|
||
|
background: #ff5553;
|
||
|
border-top-left-radius: 15rpx;
|
||
|
border-top-right-radius: 15rpx;
|
||
|
border-bottom-right-radius: 15rpx;
|
||
|
min-width: 30rpx;
|
||
|
text-align: center;
|
||
|
font-size: 22rpx;
|
||
|
font-weight: 500;
|
||
|
position: absolute;
|
||
|
color: rgba(255, 255, 255, 1);
|
||
|
}
|
||
|
|
||
|
.number-left-2 {
|
||
|
margin-left: 62rpx;
|
||
|
margin-top: 5rpx;
|
||
|
}
|
||
|
|
||
|
.number-left-3 {
|
||
|
margin-left: 72rpx;
|
||
|
margin-top: 5rpx;
|
||
|
}
|
||
|
|
||
|
.number-left-4 {
|
||
|
margin-left: 82rpx;
|
||
|
margin-top: 5rpx;
|
||
|
}
|
||
|
|
||
|
.number-left-5 {
|
||
|
margin-left: 92rpx;
|
||
|
margin-top: 5rpx;
|
||
|
}
|
||
|
|
||
|
.number-left-6 {
|
||
|
margin-left: 102rpx;
|
||
|
margin-top: 5rpx;
|
||
|
}
|