kxmh_wx/pages/index/index/index.wxss

/* .pageBox .swiperClass {margin: 0;margin-top: 40px;height: 608rpx;}
.pageBox .slide-image {width: 320px;
  height: 250px;border-radius: 10px;position: relative;box-shadow: 0 0 10rpx rgba(0, 0, 0, .8)}
.pageBox image.active {transform: none;transition: all 0.2s ease-in 0s;}
.pageBox image.quiet {transform: scale(0.8333333);transition: all 0.2s ease-in 0s;} */

.bannner {}

.banner .swiper {
    text-align: center;
    margin-top: 40rpx;
    height: 560rpx;
    display: flex;
    align-items: center;
}

.banner .swiper .swiper_item {
    width: 640rpx;
}

.banner .shadow {
    width: 550rpx;
    height: 212rpx;
    background: #7b7b7b;
    border-radius: 8rpx;
    opacity: 0.3;
    filter: blur(12px);
    position: absolute;
    left: 60rpx;
    top: 310rpx;
    z-index: -1;
}

.banner .swiper .active {}

.banner .swiper .quiet {
    /* transform: scale(0.8333333); */
}

.banner .swiper .swiper_item .img {
    width: 640rpx;
    height: 500rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
}

.banner .indicator_dsn {
    display: flex;
    justify-content: center;
    /* margin: 20rpx 0 40rpx 0; */
    position: absolute;
    top: 560rpx;
    left: 50%;
    transform: translate( -50%);
}

.banner .indicator_dsn .dot {
    width: 8rpx;
    height: 8rpx;
    margin: 0 10rpx;
    border-radius: 8rpx;
    background-color: #FFFFFF;
}

.banner .indicator_dsn .dot.active {
    width: 32rpx;
    background-color: #FF446B;
}

.search_area {
    display: flex;
    padding: 0 20rpx 20rpx 20rpx;
    align-items: center;
}

.search_area .cal {
    width: 60rpx;
    height: 60rpx;
    margin: 0 26rpx 0 6rpx;
    background: #FFFFFF;
    box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
    border: 2rpx solid #E9E9E9;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search_area ._search {
    display: flex;
    flex: 1;
    background-color: #ffffff;
    border-radius: 60rpx;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
    font-size: 24rpx;
    height: 64rpx;
    padding: 0 20rpx;
    margin-right: 10rpx;
    border: 2rpx solid #EBEBEB;
}

.search_area ._search ._search1 {
    display: flex;
    align-items: center;
    width: 100%;
}

.search_area ._search ._search1 .input {
    flex: 1;
}

.line {
    display: flex;
    margin-bottom: 20rpx;
}

.line .topLine {
    width: 33%;
    text-align: center;
    margin: 20rpx;
    color: #7B7B7B;
}

.line .topLine.active {
    position: relative;
    color: #181818;
    font-weight: bold;
}

.line .topLine.active:after {
    content: " ";
    width: 1rem;
    height: 0.12rem;
    background: #fff;
    position: absolute;
    /* bottom: -0.1rem; */
    bottom: -0.2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FF446B;
    border-radius: 0.12rem;
}

._list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

._list ._demo {
    margin: 0 0 40rpx 26rpx;
    width: 336rpx;
    background: #fff;
    border-radius: 16rpx;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

._list ._demo .list_img {
    width: 336rpx;
    height: 504rpx;
}

._list ._demo ._ln {
    margin: 4rpx 10rpx 12rpx 12rpx;
}

._list ._demo ._ln1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20rpx;
    color: #7B7B7B;
}

._list ._demo ._ln2 {
    margin: 5rpx 0;
    font-size: 28rpx;
    font-weight: bold;
    color: #181818;
}

._list ._demo ._ln3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16rpx;
}

._list ._demo ._ln3 ._ln4 {
    display: flex;
    align-items: center;
}

._list ._demo ._ln3 ._detail {
    font-size: 24rpx;
    white-space: nowrap;
    border-radius: 22rpx;
    text-align: center;
    margin: 0;
    background: linear-gradient(90deg, #FF4284 0%, #FF1D42 100%);
    color: #fff;
    line-height: 42rpx;
}

.more {
    color: #7B7B7B;
    text-align: center;
    margin: 70rpx 0 40rpx 0;
}

.fiexbox {
    width: 400rpx;
    border-radius: 4rpx;
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0;
    margin: auto;
    z-index: 100;
    height: 700rpx;
}

.fiexbox .box image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.fiexbox .box {
    width: 400rpx;
    height: 600rpx;
    margin-bottom: 10px;
    border-radius: 4rpx;
}

.fiexbox .btn {
    margin-top: 10px;
    border-radius: 50%;
    border: 1px solid #FFFAF0;
    color: #FFFAF0;
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    line-height: 50rpx;
    margin: 0 auto;
    background: rgba(228, 220, 220, 0.3) !important;
}

.markinfo {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background: rgba(0, 0, 0, 0.64) !important;
    z-index: 100;
}

.surprise {
    position: fixed;
    right: 10rpx;
    bottom: 0rpx;
    z-index: 100;
}

.surprise .img {
    width: 150rpx;
    height: 150rpx;
    text-align: center;
    line-height: 150rpx;
    background: url(https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61415f6cf0837b03af37cc5d456f21c901e1413071d7f.png);
    background-size: 150rpx 150rpx;
}

.surprise .img image {
    width: 100%;
    height: 100%;
}

.cton {
    background: yellow;
    color: #CCC;
    border-radius: 8rpx;
    width: 50rpx;
    /* margin: 0 auto; */
    text-align: center;
}