470 lines
7.1 KiB
CSS
470 lines
7.1 KiB
CSS
.container {
|
||
padding: 0 15rpx;
|
||
background-color: whte;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
/* 位置和搜索样式 */
|
||
.location-search {
|
||
display: flex;
|
||
padding: 16rpx 30rpx;
|
||
background-color: #f5f7fb;
|
||
border-radius: 60rpx;
|
||
gap: 16rpx;
|
||
height: 35rpx;
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.location {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding-right: 16rpx;
|
||
border-right: 2rpx solid #eee;
|
||
}
|
||
|
||
.location-text {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.arrow-down {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.search-box {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
background-color: #f5f7fb;
|
||
border-radius: 60rpx;
|
||
padding: 14rpx 24rpx;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 25rpx;
|
||
height: 25rpx;
|
||
margin-right: 5rpx;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.search-placeholder {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 服务分类样式 */
|
||
.service-category {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 20rpx;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.category-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.category-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.category-name {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
/* 公告样式 */
|
||
.announcement {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16rpx 20rpx;
|
||
background-color: #f4f4f4;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.announcement-flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.announcement-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #FF512A;
|
||
}
|
||
|
||
.announcement-img {
|
||
width: 25rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.hrStyle {
|
||
margin: 0 15rpx;
|
||
color: #c5c5c5;
|
||
}
|
||
|
||
.announcement-content {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.arrow-right {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
/* 广告横幅样式 */
|
||
.banner-container {
|
||
padding: 0 20rpx 20rpx;
|
||
}
|
||
|
||
.banner-swiper {
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.banner-img {
|
||
width: 100%;
|
||
}
|
||
|
||
.serverList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.serverItem {
|
||
border-radius: 30rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
color: #222222;
|
||
position: relative;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.serverList_left {
|
||
display: block;
|
||
width: 260rpx;
|
||
height: 350rpx;
|
||
margin-right: 17rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.serverList_left image {
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.serverList_right {
|
||
width: 445rpx;
|
||
height: 350rpx;
|
||
}
|
||
|
||
.serverItem1 {
|
||
width: 440rpx;
|
||
height: 170rpx;
|
||
}
|
||
|
||
.serverItem2 {
|
||
width: 440rpx;
|
||
height: 170rpx;
|
||
}
|
||
|
||
/* 立即联系样式 */
|
||
.contact-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
padding: 24rpx;
|
||
background-color: #fcf4f0;
|
||
margin: 20rpx 0;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.contact-icon2 {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.contact-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.contact-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.contact-subtitle {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* */
|
||
.interval {
|
||
width: 100vw;
|
||
height: 20rpx;
|
||
background-color: #f7f6fb;
|
||
margin-left: calc(-50vw + 50%);
|
||
margin-right: calc(-50vw + 50%);
|
||
}
|
||
|
||
/* 热门服务样式 */
|
||
.hot-services {
|
||
padding: 20rpx;
|
||
border: 1rpx solid #e8e8e8;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.section-arrow {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.service-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.service-card {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 服务信息样式 */
|
||
.service-info {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
width: 100%;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.service-info-left {
|
||
width: 60%;
|
||
}
|
||
|
||
.service-info-left-top {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.service-info-right {
|
||
width: 35%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.service-footer {
|
||
align-items: center;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.service-image {
|
||
width: 100%;
|
||
height: 240rpx;
|
||
}
|
||
|
||
.service-image2 {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
|
||
.service-badge {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
left: 20rpx;
|
||
background-color: #FF512A;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.service-name {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 4rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.service-tag {
|
||
display: inline-block;
|
||
color: #e1ca9b;
|
||
font-size: 22rpx;
|
||
padding: 2rpx 0;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.service-desc {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-bottom: 20rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.service-count {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-left: 15rpx;
|
||
}
|
||
|
||
.service-button {
|
||
background-color: #FF512A;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
padding: 12rpx 36rpx;
|
||
border-radius: 60rpx;
|
||
}
|
||
|
||
/* 回到顶部 */
|
||
.toUp {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
position: fixed;
|
||
right: 33rpx;
|
||
bottom: 320rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
.toUp image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* swiperBox 样式 - 与 localLife 页面保持一致 */
|
||
/* swiperBox 样式 - 每行展示5个，平均分配空间 */
|
||
.swiperBox {
|
||
height: 350rpx;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.swiper {
|
||
height: 350rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.navList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
box-sizing: border-box;
|
||
height: 350rpx;
|
||
width: 100%;
|
||
padding: 30rpx 20rpx;
|
||
background-color: #fff;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.navItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20%; /* 每行5个，平均分配宽度 */
|
||
height: 105rpx;
|
||
margin-bottom: 43rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.navItemImg {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.navItem image {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.dot {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 20rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 25rpx;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.dotItem {
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 50%;
|
||
background-color: #E6E6E6;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.actives {
|
||
width: 20rpx;
|
||
height: 8rpx;
|
||
background: #FF370B;
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
} |