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.
126 lines
2.7 KiB
126 lines
2.7 KiB
1 week ago
|
page {
|
||
|
|
background-color: #f7fafc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-title {
|
||
|
|
width: 266rpx;
|
||
|
|
height: 58rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page {
|
||
|
|
padding-bottom: 230rpx;
|
||
|
|
.page-header {
|
||
|
|
margin: 42rpx 30rpx 0;
|
||
|
|
.search {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 16rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 180rpx;
|
||
|
|
padding: 0 32rpx;
|
||
|
|
.icon {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
}
|
||
|
|
.input {
|
||
|
|
flex: 1;
|
||
|
|
padding: 18rpx 0;
|
||
|
|
line-height: 40rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: rgba(30, 41, 59, 1);
|
||
|
|
}
|
||
|
|
.place-input {
|
||
|
|
color: rgba(148, 163, 184, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.type-navbar {
|
||
|
|
padding: 48rpx 0 24rpx 30rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
gap: 12rpx;
|
||
|
|
overflow-x: auto;
|
||
|
|
overflow-y: hidden;
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.type {
|
||
|
|
flex-shrink: 0;
|
||
|
|
padding: 12rpx 32rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: rgba(71, 85, 105, 1);
|
||
|
|
background-color: #fff;
|
||
|
|
border: 1px solid rgba(241, 245, 249, 1);
|
||
|
|
border-radius: 80rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
&.active {
|
||
|
|
color: #fff;
|
||
|
|
background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
gap: 48rpx 30rpx;
|
||
|
|
.card {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
.photo {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 442rpx;
|
||
|
|
border-radius: 32rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
.p-img {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.stat {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 12rpx;
|
||
|
|
height: 104rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: linear-gradient(180deg, rgba(2, 2, 2, 0) 0%, rgba(3, 3, 3, 0.11) 20.97%, #090909 100%);
|
||
|
|
backdrop-filter: opacity(67%);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 8rpx;
|
||
|
|
.s-item {
|
||
|
|
padding: 48rpx 12rpx 24rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: rgba(255, 255, 255, 1);
|
||
|
|
.icon {
|
||
|
|
width: 32rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
margin-top: 24rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
padding: 0 12rpx;
|
||
|
|
color: #2a3544;
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|