xz_gangba/subpages/search/commonSearch.wxss
2023-03-15 17:58:44 +08:00

404 lines
5.9 KiB
Plaintext

.top-tab {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
overflow-x: hidden;
z-index: 100;
}
.search-box {
background: #f2f2f2;
border-radius: 30rpx;
padding: 5rpx;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 20rpx 30rpx;
}
.search-box image {
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
.search-box input {
font-size: 28rpx;
color: #242424;
margin-left: 20rpx;
width: 100%;
}
.type {
display: flex;
/* overflow-x: auto; */
/* 隐藏滚动条 */
/* scrollbar-width: none; */
/* firefox */
/* -ms-overflow-style: none; */
/* IE 10+ */
margin-left: 20rpx;
}
.tab-box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 13%;
min-width: fit-content;
position: relative;
height: 60rpx;
font-size: 30rpx;
color: #242424;
flex-shrink: 0;
}
.sel-line {
background-color: #9F1512;
width: 50%;
height: 5rpx;
border-radius: 3rpx;
}
.tab-box.active {
color: #9F1512;
}
.tab-box image {
width: 20rpx;
height: 40rpx;
}
.tab-box .txt {
padding: 0rpx 10rpx;
width: 100%;
text-align: center;
}
.tab-box .txt-active {
color: #9F1512;
}
.tab-box.active image {
display: block;
}
.tab-box image.selected-l {
left: 20rpx;
}
.tab-box image.selected-r {
right: 20rpx;
}
.search-init {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 99;
background: #ffffff;
}
.loading-page {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 99;
background: white;
}
.loading-page image {
width: 80rpx;
height: 80rpx;
}
.search-init image {
width: 80rpx;
height: 80rpx;
}
.loading-page text {
font-size: 28rpx;
margin-top: 20rpx;
color: #949494;
}
.search-init text {
font-size: 28rpx;
margin-top: 20rpx;
color: #949494;
}
/* =================================新闻======================================= */
.news {
padding: 30rpx;
border-bottom: 5px solid #FBFBFB;
}
.news-box {
padding: 30rpx 0;
border-bottom: 1px solid #EBEBEB;
display: flex;
flex-direction: column;
}
.news-title {
color: #242424;
font-size: 30rpx;
font-weight: bold;
}
.news-info {
color: #949494;
margin-top: 15rpx;
font-size: 24rpx;
}
.news-info text {
margin-right: 20rpx;
}
.voice-box {
padding-right: 30px;
position: relative;
}
.voice-img {
position: absolute;
right: 0;
width: 48rpx;
height: 48rpx;
}
.news-big-pic,
.news-small-pic {
margin-top: 10rpx;
}
.news-big-pic {
position: relative;
}
.news-big-pic image {
width: 100%;
height: 380rpx;
}
.news-big-pic image.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80rpx;
height: 80rpx;
}
.news-small-pic image {
width: 30%;
height: 150rpx;
margin-right: 20rpx;
}
.transverse-news {
flex-direction: row;
justify-content: space-between;
}
.news-row-img {
width: 30%;
height: 150rpx;
}
.news-row-img image {
width: 100%;
height: 100%;
}
.news-row-info {
width: 68%;
}
/* end */
/* 活动 */
.activity {
padding: 20rpx 30rpx 0;
}
.activity-box {
margin-bottom: 20rpx;
box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
overflow: hidden;
}
.activity-img {
height: 320rpx;
position: relative;
}
.activity-img image {
width: 100%;
height: 100%;
}
.corner {
position: absolute;
top: 20rpx;
right: 20rpx;
display: flex;
color: #fff;
}
.corner view {
padding: 0 10rpx;
background: rgba(0, 0, 0, 0.6);
line-height: 40rpx;
vertical-align: middle;
display: flex;
align-items: center;
border-radius: 5rpx;
}
.view-count {
margin-right: 20rpx;
}
.view-count image {
width: 40rpx;
height: 40rpx;
}
.activity-info {
padding: 15rpx 20rpx;
}
.title {
display: flex;
justify-content: space-between;
}
.activity-title {
width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 32rpx;
color: #242424;
line-height: 40rpx;
}
.sign {
background: rgba(159, 21, 18, .1);
color: #9F1512;
border-radius: 10rpx;
padding: 0 20rpx;
line-height: 40rpx;
font-size: 28rpx;
}
.date {
margin-top: 10rpx;
font-size: 24rpx;
color: #242424;
}
/* end */
/* ====================场馆==================== */
.venue {
height: 400rpx;
padding: 0 30rpx;
}
.venue-box {
box-shadow: 0 0 17rpx 0 rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
overflow: hidden;
margin-bottom: 15rpx;
}
.venue-img,
.venue-img image {
width: 100%;
height: 315rpx;
}
.venue-info {
padding: 15rpx 20rpx;
}
.name-distance {
display: flex;
justify-content: space-between;
height: 35rpx;
line-height: 35rpx;
}
.name {
font-size: 32rpx;
width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.distance {
padding: 0 10rpx;
background: rgba(159, 21, 18, .1);
color: #9F1512;
border-radius: 10rpx;
font-size: 28rpx;
}
.time {
font-size: 28rpx;
color: #242424;
margin-top: 10rpx;
}
/* =end= */
.empty-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 99;
background: white;
}
.empty-box image {
width: 128rpx;
height: 96rpx;
}
.empty-box text {
font-size: 28rpx;
margin-top: 20rpx;
color: gray;
}