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.
553 lines
9.4 KiB
553 lines
9.4 KiB
page {
|
|
width: 100%;
|
|
height: auto;
|
|
overflow-y: auto;
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.header .header-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 10;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
|
|
|
|
.header .navigation {
|
|
/* width: calc(100% - 46rpx);
|
|
margin-left: 46rpx; */
|
|
display: flex;
|
|
align-items: center;
|
|
/* justify-content: center; */
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header .navigation .goback {
|
|
width: 40rpx;
|
|
padding-left: 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.header .navigation .goback image {
|
|
width: 16rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.header .navigation .title {
|
|
display: flex;
|
|
align-items: center;
|
|
/* justify-content: center; */
|
|
width: calc(100% - 46rpx);
|
|
margin-left: 46rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 32rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.header .navigation .title .title-right {
|
|
/* margin-right: 46rpx; */
|
|
}
|
|
|
|
.home {
|
|
width: 100%;
|
|
}
|
|
|
|
.belong-grid {
|
|
width: 100%;
|
|
height: 138rpx;
|
|
box-sizing: border-box;
|
|
padding-top: 16rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.belong-grid .newbelong-grid {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.belong-grid .belong-grid-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.belong-grid .newbelong-grid .grid {
|
|
margin-left: 28rpx;
|
|
/* width: 90%; */
|
|
width: calc(100% - 234rpx);
|
|
height: 62rpx;
|
|
position: relative;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.belong-grid .newbelong-grid .grid image {
|
|
width: 532rpx;
|
|
height: 66rpx;
|
|
}
|
|
|
|
.belong-grid .newbelong-grid .volunteer {
|
|
margin-right: 15rpx;
|
|
width: 108rpx;
|
|
height: 68rpx;
|
|
position: relative;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.belong-grid .newbelong-grid .volunteer image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* banner 样式 */
|
|
.banner-main {
|
|
position: absolute;
|
|
width: calc(100% - 60rpx);
|
|
height: 300rpx;
|
|
margin-left: 30rpx;
|
|
background-color: #fff;
|
|
z-index: 997;
|
|
margin-top: -36rpx;
|
|
box-shadow: 0px 6px 21px 0px rgba(122, 122, 122, 0.23);
|
|
border-radius: 17rpx;
|
|
}
|
|
|
|
|
|
.page-body {
|
|
/* padding-top: 30rpx; */
|
|
/* background: #fff; */
|
|
}
|
|
|
|
.page-section {
|
|
width: 100%;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.page-section_center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.page-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.page-section-gap {
|
|
box-sizing: border-box;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.page-section-spacing {
|
|
box-sizing: border-box;
|
|
/* padding: 0 20rpx; */
|
|
height: 300rpx;
|
|
}
|
|
|
|
swiper {
|
|
height: 300rpx;
|
|
}
|
|
|
|
.page-section-title {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-bottom: 10rpx;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
}
|
|
|
|
.page-section-gap .page-section-title {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.demo-text-1 {
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #1aad19;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.demo-text-1:before {
|
|
content: 'A';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.demo-text-2 {
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #2782d7;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.demo-text-2:before {
|
|
content: 'B';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.demo-text-3 {
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f1f1f1;
|
|
color: #353535;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.demo-text-3:before {
|
|
content: 'C';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
button {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
button:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.page-section-title {
|
|
padding: 0;
|
|
}
|
|
|
|
.swiper-item {
|
|
display: block;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.banner {
|
|
overflow: hidden;
|
|
height: 300rpx;
|
|
display: flex;
|
|
width: 100%;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: -23rpx;
|
|
z-index: 999;
|
|
position: relative;
|
|
|
|
/* padding-bottom: 10rpx; */
|
|
}
|
|
|
|
.dots .dot {
|
|
width: 20rpx;
|
|
height: 6rpx;
|
|
margin-left: 8rpx;
|
|
background: rgba(247, 247, 247, 1);
|
|
opacity: 0.38;
|
|
border-radius: 3rpx;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.dots .dot.active {
|
|
width: 20rpx;
|
|
background: rgba(247, 247, 247, 1);
|
|
border-radius: 3rpx;
|
|
opacity: 1;
|
|
/* background-image: linear-gradient(90deg, #fc5555 58%, #fc5555 100%); */
|
|
}
|
|
|
|
/* banner end */
|
|
|
|
/* 拼团购/顺道捎 左侧按钮 */
|
|
.tab-left {
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 997;
|
|
margin-top: 36rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tab-left image {
|
|
width: 186rpx;
|
|
height: 102rpx;
|
|
}
|
|
.tab-left .tab {
|
|
position: relative;
|
|
}
|
|
.tab-left .tab .tab-text {
|
|
position: absolute;
|
|
left: 40rpx;
|
|
top: 26rpx;
|
|
color: white;
|
|
font-size: 34rpx;
|
|
}
|
|
/* 拼团购/顺道捎 右侧按钮 */
|
|
.tab-right {
|
|
position: fixed;
|
|
right: 0;
|
|
z-index: 997;
|
|
margin-top: 36rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tab-right image {
|
|
width: 186rpx;
|
|
height: 102rpx;
|
|
}
|
|
.tab-right .tab {
|
|
position: relative;
|
|
}
|
|
.tab-right .tab .tab-text {
|
|
position: absolute;
|
|
left: 40rpx;
|
|
top: 26rpx;
|
|
color: white;
|
|
font-size: 34rpx;
|
|
}
|
|
.tab-all {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 370rpx;
|
|
background-color: #fff;
|
|
z-index: 996;
|
|
}
|
|
|
|
|
|
.tab-bar {
|
|
margin-top: 278rpx;
|
|
width: 100%;
|
|
height: 92rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.tab-bar-fixed {
|
|
position: fixed;
|
|
top: 0rpx;
|
|
}
|
|
.tab-bar .tab {
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
/* color: rgba(171, 171, 171, 1); */
|
|
color: rgba(0, 0, 0, 1);
|
|
width: 25%;
|
|
height: 100%;
|
|
line-height: 92rpx;
|
|
/* text-indent: 20rpx; */
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tab-bar .tab.select {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: rgba(229, 15, 0, 1);
|
|
}
|
|
|
|
.tab-bar .select-bar {
|
|
position: absolute;
|
|
left: 14rpx;
|
|
bottom: 0rpx;
|
|
width: 30rpx;
|
|
height: 8rpx;
|
|
border-radius: 4rpx;
|
|
background: #fc5555;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tab-bar .tab0.select-bar {
|
|
left: calc(12.5% - 15rpx);
|
|
transition: left 0.3s linear;
|
|
}
|
|
|
|
.tab-bar .tab1.select-bar {
|
|
left: calc(37.5% - 15rpx);
|
|
transition: left 0.3s linear;
|
|
}
|
|
|
|
.tab-bar .tab2.select-bar {
|
|
left: calc(62.5% - 15rpx);
|
|
transition: left 0.3s linear;
|
|
}
|
|
|
|
.tab-bar .tab3.select-bar {
|
|
left: calc(87.5% - 15rpx);
|
|
transition: left 0.3s linear;
|
|
}
|
|
|
|
.tab-bar .hover-tab {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
|
|
/* 内容 */
|
|
.details-top {
|
|
margin-top: 385rpx;
|
|
}
|
|
.top-box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.reg-count {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 28rpx;
|
|
width: 270rpx;
|
|
margin-top: 26rpx;
|
|
}
|
|
.scroll-tag {
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.volunteer-tag {
|
|
background: rgba(255, 255, 255, 1);
|
|
display: flex;
|
|
white-space: nowrap;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 10rpx 0rpx;
|
|
height: 80rpx;
|
|
}
|
|
.volunteer-tag .tag {
|
|
border: 1px solid #999999;
|
|
border-radius: 32rpx;
|
|
padding: 10rpx;
|
|
margin: 0 10rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
min-width: 140rpx;
|
|
text-align: center;
|
|
}
|
|
.volunteer-tag .sel {
|
|
border: 1px solid #da433d;
|
|
background-color: #da433d;
|
|
color: #fff;
|
|
}
|
|
.volunteer-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 0rpx 40rpx 19rpx 40rpx;
|
|
}
|
|
.show {
|
|
padding: 0rpx 40rpx;
|
|
height: 24rpx;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
font-weight: 500;
|
|
color: #C5C5C5;
|
|
}
|
|
|
|
/* 搜索志愿者 start */
|
|
.search {
|
|
/* margin-top: 17rpx; */
|
|
height: 66rpx;
|
|
width: 410rpx;
|
|
background: #f7f7f7;
|
|
border-radius: 33rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 26rpx;
|
|
}
|
|
|
|
.search .item-all {
|
|
height: 30rpx;
|
|
width: 100%;
|
|
width: calc(100% - 60rpx);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.search .item-all .item-left {
|
|
/* background: red; */
|
|
width: calc(100% - 73rpx);
|
|
height: 30rpx;
|
|
border-right: 1rpx solid #BFBFBF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.search .item-all .item-left image {
|
|
width: 30rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.search .item-all .item-left input {
|
|
width: calc(100% - 41rpx);
|
|
height: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.placeholder-style {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: rgba(168, 168, 168, 1);
|
|
}
|
|
|
|
.search .item-all .item-right {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: rgba(51, 51, 51, 1);
|
|
background-color: #f7f7f7;
|
|
}
|
|
.search button {
|
|
width: 100rpx;
|
|
height: 58rpx;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
line-height: 58rpx;
|
|
}
|
|
|
|
.search button::after {
|
|
border-radius: 0px;
|
|
border: none;
|
|
}
|
|
/* 搜索志愿者 end */
|