uniapp-Clothscan/unpackage/dist/dev/mp-weixin/pages/index/index.wxss

.image-bg {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


.nav-list.data-v-57280228 {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 12rpx 0px;
    justify-content: space-between;
}
.nav-li.data-v-57280228 {
    padding: 30rpx;
    border-radius: 12rpx;
    width: 46%;
    margin: 0 2% 40rpx;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}
.nav-li.data-v-57280228::after {
    content: '';
    position: absolute;
    z-index: -1;
    background-color: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -5%;
    border-radius: 10rpx;
    opacity: 0.1;
    -webkit-transform: scale(0.92, 1);
            transform: scale(0.92, 1);
}
.nav-li.cur.data-v-57280228 {
    color: #fff;
    background: rgb(94, 185, 94);
    box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
}
.nav-title.data-v-57280228 {
    font-size: 36rpx;
    font-weight: 300;
}
.nav-title.data-v-57280228::first-letter {
    font-size: 42rpx;
    margin-right: 4rpx;
}
.nav-name.data-v-57280228 {
    font-size: 42rpx;
    text-transform: Capitalize;
    padding: 10rpx 0;
    position: relative;
}
.nav-name.data-v-57280228::before {
    content: '';
    position: absolute;
    display: block;
    width: 50rpx;
    height: 6rpx;
    background: #fff;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}
.nav-name.data-v-57280228::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background: #fff;
    bottom: 0;
    left: 0rpx;
    opacity: 0.3;
}
.nav-name.data-v-57280228::first-letter {
    font-weight: 600;
    font-size: 46rpx;
    margin-right: 1px;
}
.nav-li text.data-v-57280228 {
    position: absolute;
    right: 0rpx;
    top: 30rpx;
    font-size: 100rpx;
    width: 108rpx;
    height: 108rpx;
    text-align: center;
    line-height: 60rpx;
    opacity: 0.8;
    color: #fff;
}
.text-light.data-v-57280228 {
    font-weight: 300;
}
.nav-li.data-v-57280228 {
    padding: 120rpx 30rpx 40rpx 30rpx;
    border-radius: 12rpx;
    width: 100%;
    margin: 0 18rpx 40rpx;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 99;
}
.nav-li.data-v-57280228::after {
    content: '';
    z-index: -1;
    background-image: inherit;
    width: 100%;
    height: 8%;
    left: 0;
    bottom: -5%;
    border-radius: 10rpx;
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    background-size: 100% 100%;
}
.nav-li .cu-avatar.data-v-57280228 {
    position: absolute;
    right: 50rpx;
    top: 62rpx;
    font-size: 85rpx;
    width: 132rpx;
    height: 132rpx;
    text-align: center;
    line-height: 132rpx;
    opacity: 0.8;
}
.bg-kuxuan1.data-v-57280228::after {
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 10rpx;
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
}
.bg-kuxuan2.data-v-57280228::after {
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 10rpx;
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
}
.bg-kuxuan3.data-v-57280228::after {
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 10rpx;
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
}
.bg-kuxuan4.data-v-57280228::after {
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0%;
    border-radius: 10rpx;
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
}
.bg-kuxuan5.data-v-57280228::after {
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0%;
    border-radius: 10rpx;
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
}
.bg-kuxuan6.data-v-57280228::after {
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0%;
    border-radius: 10rpx;
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
}
.nav-li.cur.data-v-57280228 {
    color: #fff;
    background: rgb(94, 185, 94);
    box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
}
.nav-title.data-v-57280228 {
    font-size: 36rpx;
    font-weight: 300;
    color: #fff;
}
.nav-title.data-v-57280228::first-letter {
    font-size: 42rpx;
    margin-right: 4rpx;
}
.nav-link.data-v-57280228 {
    font-size: 42rpx;
    text-transform: Capitalize;
    padding: 10rpx 0 18rpx 0;
    position: relative;
}
.nav-link.data-v-57280228::before {
    content: '';
    position: absolute;
    display: block;
    width: 50rpx;
    height: 6rpx;
    background: #fff;
    bottom: 0;
    left: 0;
    opacity: 0.2;
}
.nav-link.data-v-57280228::after {
    content: '';
    position: absolute;
    display: block;
    width: 72%;
    height: 1px;
    background: #fff;
    bottom: 0;
    left: 0rpx;
    opacity: 0.08;
}
.nav-link.data-v-57280228::first-letter {
    font-weight: 600;
    font-size: 46rpx;
    margin-right: 1px;
}
.nav-li text.data-v-57280228 {
    position: absolute;
    right: 50rpx;
    top: 80rpx;
    font-size: 100rpx;
    width: 108rpx;
    height: 108rpx;
    text-align: center;
    line-height: 60rpx;
    opacity: 0.1;
}
.bg-kuxuan1.data-v-57280228 {
    background-image: repeating-linear-gradient(45deg, #fe5e9c, #f1aa76);
    color: #fff;
}
.bg-kuxuan2.data-v-57280228 {
    background-image: repeating-linear-gradient(45deg, #00d1ff, #69ff97);
    color: #fff;
}
.bg-kuxuan3.data-v-57280228 {
    background-image: repeating-linear-gradient(45deg, #209cff, #68e0cf);
    color: #fff;
}
.bg-kuxuan4.data-v-57280228 {
    background-image: repeating-linear-gradient(45deg, #ed1c24, #fece12);
    color: #fff;
}
.bg-kuxuan5.data-v-57280228 {
    background-image: repeating-linear-gradient(45deg, #ca26ff, #fff3b0);
    color: #fff;
}
.bg-kuxuan6.data-v-57280228 {
    background-image: repeating-linear-gradient(45deg, #0fd850, #f9f047);
    color: #fff;
}