MP-zxs/pages/index/index.wxss

/* pages/index/index.wxss */
page {
    background: linear-gradient(179deg, #cce1ff 0%, #ffffff 53%, #f9fbff 78%, #f8fbff 100%);
}

.custom-navigation {
    width: calc(100% - 40rpx);
    padding-left: 40rpx;
    display: flex;
    align-items: center;
}

.custom-navigation>text:nth-child(1) {
    margin-top: -5rpx;
    font-size: 40rpx;
    color: #3470E9;
    font-family: "自由行星体";
    font-weight: bold;
}

.custom-navigation>text:nth-child(2) {
    position: relative;
    padding-left: 30rpx;
    margin-left: 20rpx;
    font-family: "苹方R";
    font-size: 28rpx;
    color: #000000;
}

.custom-navigation>text:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 5rpx);
    width: 10rpx;
    height: 10rpx;
    background: #000;
    border-radius: 50%;
}

.search-box {
    padding: 40rpx 30rpx;
    width: calc(100% - 60rpx);
    height: 70rpx;
    display: flex;
    align-items: center;
}

.search-box .icon {
    width: 66rpx;
    height: 66rpx;
    border-radius: 50%;
}

.search-box .icon:nth-child(1) {
    width: 70rpx;
    height: 70rpx;
}

.search-box .icon image {
    width: 100%;
    height: auto;
}

.icon-special {
    position: relative;
}

.icon-special>.jiaobiao {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    z-index: 9;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    font-family: "苹方M";
    font-size: 18rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FD9671;
}

.search-input-box {
    position: relative;
    margin: 0 26rpx;
    width: 0;
    flex: 1;
    height: 70rpx;
    background: rgba(255, 255, 255, 0.60);
    border: 0.6px solid #336fe9;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
}

.search-input-box .input-icon {
    padding: 0 15rpx;
    width: 36rpx;
    height: 100%;
    display: flex;
    align-items: center;
}

.search-input-box .input-icon>image {
    width: 100%;
    height: auto;
}

.search-input-box .input {
    width: 0;
    flex: 1;
    height: 100%;
}

.search-input-box .input>input {
    width: 100%;
    height: 100%;
    font-family: "苹方R";
    font-size: 24rpx;
}

.movable {
    width: 100%;
}

.movable-view {
    position: absolute;
    z-index: 99;
    width: 100rpx;
    height: fit-content;
}

.znzx-image {
    width: 100%;
    height: auto;
}

.other-container {
    padding-bottom: 20rpx;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.info-card {
    position: relative;
    z-index: 1;
    margin: 0 28rpx;
    width: calc(100% - 56rpx);
    height: 275rpx;
    overflow: hidden;
}

.info-card .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: auto;
}

.info-card>.shiming {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 140rpx;
    height: 60rpx;
    border-top-right-radius: 15rpx;
    border-bottom-left-radius: 15rpx;
    background: #bdd9fe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shiming>.shiming-icon {
    margin-right: 12rpx;
    width: 26rpx;
    display: flex;
    align-items: center;
}

.shiming>.shiming-icon>image {
    width: 100%;
    height: auto;
}

.shiming>.shiming-name {
    font-family: "苹方M";
    font-size: 24rpx;
    color: #3A7AF7;
}

.info-card-container {
    position: absolute;
    z-index: 1;
    padding: 20rpx 36rpx;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.info-card-list1 {
    width: 100%;
    height: 56rpx;
    display: flex;
    align-items: flex-start;
}

.info-card-list1>span {
    display: block;
}

.list1-name {
    width: 0;
    max-width: fit-content;
    flex: 1;
    font-family: "苹方R";
    font-size: 40rpx;
    color: #ffffff;
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}

.list1-type {
    position: relative;
    top: 10rpx;
    margin: 0 20rpx;
    padding: 0 20rpx;
    width: max-content;
    height: 40rpx;
    font-family: "苹方R";
    font-size: 20rpx;
    color: #ffffff;
    text-align: center;
    line-height: 40rpx;
    background: #6eadff;
    border-radius: 0 10rpx 0 10rpx;
    backdrop-filter: blur(30px);
}

.list1-icon {
    margin-right: 150rpx;
    position: relative;
    top: 10rpx;
    width: 30rpx;
}

.list1-icon>image {
    width: 100%;
    height: auto;
}

.list2 {
    margin-top: 28rpx;
    width: 100%;
    font-family: "苹方R";
    font-size: 28rpx;
    color: #FFFFFF;
}

.list3 {
    margin-top: 14rpx;
    width: 100%;
    font-family: "苹方R";
    font-size: 28rpx;
    color: #FFFFFF;
}

.list4 {
    margin-top: 14rpx;
    width: 100%;
    font-family: "苹方R";
    font-size: 28rpx;
    line-height: 42rpx;
    color: #FFFFFF;
}

.list4>image {
    position: relative;
    top: -5rpx;
    margin-left: 14rpx;
    width: 20rpx;
    height: auto;
}

.hall {
    margin: 36rpx 28rpx 0 28rpx;
    width: calc(100% - 56rpx);
    background: #ffffff;
    border-radius: 20rpx 20rpx 0 0;
    box-shadow: 0 0 16rpx 0 rgba(209, 209, 209, 0.53);
    overflow: hidden;
}

.hall-other-box {
    padding: 23rpx 0 11rpx 22.5rpx;
    width: 100%;
    height: 74rpx;
    background: linear-gradient(180deg, #fff2d1be 0%, #ffffff 100%);
    box-sizing: border-box;
}

.hall-other-box-image {
    width: auto;
    height: 100%;
}

.hall-info-box {
    width: 100%;
    min-height: 230rpx;
    display: flex;
}

.hall-map {
    width: 210rpx;
    height: 230rpx;
}

.hall-map>map {
    width: 100%;
    height: 100%;
}

.hall-info {
    padding: 20rpx 16rpx 16rpx 28rpx;
    width: 0;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
}

.hall-info-list1 {
    width: 100%;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hall-info-list1>view:nth-child(1) {
    width: max-content;
    font-family: "苹方M";
    font-size: 34rpx;
    color: #3470E9;
    font-weight: 550;
}

.hall-info-list1>view:nth-child(2) {
    width: 170rpx;
    height: 44rpx;
    border-radius: 22rpx;
    background: #f1f6ff;
    border: 0.7px solid #3470e9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.hall-info-list1>view:nth-child(2)>span {
    display: block;
}

.hall-info-list1>view:nth-child(2)>span:nth-child(1) {
    width: 22rpx;
    height: 100%;
    display: flex;
    align-items: center;
}

.hall-info-list1>view:nth-child(2)>span:nth-child(1)>image {
    width: 100%;
    height: auto;
}

.hall-info-list1>view:nth-child(2)>span:nth-child(2) {
    margin-left: 10rpx;
    font-family: "苹方R";
    font-size: 24rpx;
    color: #477EEB;
}

.hall-info-list2 {
    margin-top: 20rpx;
    font-family: "苹方R";
    font-size: 28rpx;
    color: #000000;
}

.hall-info-list3 {
    margin-top: 20rpx;
    font-family: "苹方R";
    font-size: 24rpx;
    color: #585858;
}

.hall-info-list3>span {
    margin-left: 20rpx;
    padding: 2rpx 5rpx;
    background: #F2F2F2;
}

.menu-cards {
    position: relative;
    margin: 46rpx 28rpx 0 28rpx;
    width: calc(100% - 56rpx);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.menu-card {
    margin-bottom: 20rpx;
    position: relative;
    width: 336rpx;
}

.menu-card>.bg {
    width: 100%;
    height: auto;
    border-radius: 14rpx;
    box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.15);
}

.menu-card>.content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 20rpx 16rpx;
    width: 100%;
    height: calc(100% - 10rpx);
    box-sizing: border-box;
}

.menu-card>.yyqh {
    color: #ffffff;
}

.menu-card>.wdyy {
    color: #ffffff;
}

.menu-card>.ssqh {
    color: #4B3C7C;
}

.menu-card>.jdck {
    color: #EE7920;
}

.menu-card>.content>.title {
    padding-top: 10rpx;
    font-family: "苹方M";
    font-size: 36rpx;
    text-shadow: 0px 6rpx 20rpx 0px rgba(59, 122, 221, 0.80);
}

.menu-card>.content>.wdyyTitle {
    height: 40rpx;
    display: flex;
    align-items: center;
}

.menu-card>.content>.wdyyTitle>view:nth-child(1) {
    margin-right: 5rpx;
    width: 26rpx;
    height: 100%;
    display: flex;
    align-items: center;
}

.menu-card>.content>.wdyyTitle>view:nth-child(2) {
    font-family: "苹方M";
    font-size: 26rpx;
    text-shadow: 0px 6rpx 20rpx 0px rgba(59, 122, 221, 0.80);
}

.menu-card>.content>.introduce {
    padding-top: 15rpx;
    padding-right: 100rpx;
    font-family: "苹方R";
    font-size: 22rpx;
    text-shadow: 0px 6rpx 20rpx 0px rgba(59, 122, 221, 0.80);
}

.menu-card>.content>.wdyyIntroduce {
    padding-top: 15rpx;
    width: 100%;
    height: calc(100% - 40rpx);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.menu-card>.content>.wdyyIntroduce>.wdyyNone {
    padding-left: 30rpx;
    font-family: "苹方R";
    font-size: 26rpx;
    box-sizing: border-box;
    text-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
}

.wdyyDate {
    padding-bottom: 15rpx;
    font-family: "苹方R";
    font-size: 26rpx;
    text-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.5);
}

.wdyyHall {
    font-family: "苹方R";
    font-size: 26rpx;
    text-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, 0.5);
}


.carousel-box {
    margin: 20rpx 28rpx 0 28rpx;
    width: calc(100% - 56rpx);
}

.swiper {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.swiper-image {
    width: 100%;
    height: 100%;
}

.lbImg {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
    box-sizing: border-box;
}

.carousel-docs {
    width: 100%;
    height: 25rpx;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.carousel-doc {
    margin: 0 4rpx;
    width: 8rpx;
    height: 8rpx;
    border-radius: 4rpx;
    background: #C2D8FF;
    transition: all 0.35s;
}

.carousel-doc-active {
    width: 26rpx;
    background: #4584F6;
}

.ywList {
    margin: 40rpx 28rpx 0 28rpx;
    width: calc(100% - 56rpx);
}

.list-top {
    padding-bottom: 32rpx;
    width: 100%;
    height: 44rpx;
    display: flex;
    align-items: center;
}

.lt-border {
    width: 8rpx;
    height: 30rpx;
    border-radius: 4rpx;
    background: #4584F6;
}

.lt-name {
    margin-left: 6rpx;
    width: 0;
    flex: 1;
    font-size: 32rpx;
    font-family: "苹方M";
    color: #3B3B3B;
}

.lt-button {
    width: 120rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.lt-button-span {
    width: fit-content;
    font-size: 20rpx;
    font-family: "苹方R";
    color: #979797;
}

.lt-button-icon {
    margin-left: 10rpx;
    width: 10rpx;
    height: 100%;
    display: flex;
    align-items: center;
}

.lt-button-icon>image {
    width: 100%;
    height: auto;
}

.list-bottom {
    padding: 0 20rpx;
    width: 100%;
    height: 170rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.lb-list {
    width: 110rpx;
    height: 100%;
}

.lb-icon {
    margin: auto;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lb-name {
    margin-top: 10rpx;
    width: 100%;
    height: 72rpx;
    font-size: 24rpx;
    color: #3B3B3B;
    line-height: 36rpx;
    font-family: "苹方R";
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.lb-icon>image {
    width: 100%;
}







.pop1Contain {
    position: relative;
    width: 100%;
    height: calc(100% - 80rpx);
}

.pop1-title {
    position: sticky;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 80rpx;
    text-align: center;
    line-height: 60rpx;
    font-family: "苹方M";
    font-size: 32rpx;
    color: #313131;
    background: #ffffff;
}

.pop1list {

    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-family: "苹方R";
    font-size: 28rpx;
    color: #313131;
    border-bottom: 1px solid #eeeeee;
}

.buttonActive {
    opacity: 0.6;
}



.active {
    opacity: 0.6;
}