wxd / MShopWeApp

/* packageB/pages/AI-test-skin/success_result/success_result.wxss */
page {
    width: 100%;
    height: 100%;
    background: #e6f4fa;
}

.tab_scroll {
    display: flex;
    height: 100rpx;
}

.tab_scroll_item {
    position: relative;
    padding: 3% 6%;
    white-space: nowrap;
    background-color: #fff;
}

.tab_scroll_item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 6rpx;
    background-color: #333333;
}

.analyse {
    display: flex;
    align-items: center;
    margin-top: 50rpx;
    /* justify-content: space-evenly; */
}

.analyse .mark {
    padding: 4rpx 12rpx;
    font-size: 28rpx;
    background: #fff;
    border-radius: 20rpx;
}

.analyse .analyse_left {
    position: relative;
    right: -70rpx;
    z-index: 2;
}

.analyse .analyse_center {
    position: relative;
    background: #c9f0f9;
    border-radius: 50%;
    width: 400rpx;
    height: 400rpx;
}

.analyse_center .lianxian {
    position: absolute;
    width: 2rpx;
    height: 100rpx;
    bottom: 0rpx;
    right: 30px;
    transform: rotate(-65deg);
    background-color: #999;
}

.analyse_center .lianxian1 {
    position: absolute;
    width: 2rpx;
    height: 120rpx;
    top: -30rpx;
    right: 20px;
    transform: rotate(-125deg);
    background-color: #999;
}

.analyse_center .lianxian2 {
    position: absolute;
    width: 2rpx;
    height: 120rpx;
    top: 30rpx;
    left: 0px;
    transform: rotate(-74deg);
    background-color: #999;
}

.analyse .analyse_right {
    position: relative;
    right: 70rpx;
    z-index: 2;
}

.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
	bottom: 0;
	left: 0;
	right: 0;
    background-color: rgba(0, 0, 0, .6);
}
.ll::after {
    content: "\e650";
}
.analyse .analyse_center image {
    height: 100%;
    width: 100%;
}

.score {
    display: flex;
    margin-top: 25rpx;
    justify-content: space-evenly;
}

.score .shuxian {
    margin-top: 15rpx;
    width: 2rpx;
    height: 60rpx;
    background: #482121;
}

.score .icon-zuojiantou:before {
    content: "\e625";
    transform: rotate(-90deg);
}

.icon-xia::before {
    margin-bottom: 14rpx;
    display: inline-block;
    transform: rotate(-90deg);
    font-size: 18rpx;
}

.icon-zuojiantou::before {
    color: #f1585d;
    display: inline-block;
    transform: rotate(90deg);
}

.bg_white {
    background-color: #fff;
}

.mt10 {
    margin-top: 10rpx;
}

.mb_b5 {
    margin-bottom: 5%;
}

.mt_b5 {
    margin-top: 5%;
}

.mt_b10 {
    margin-top: 10%;
}

.c_666 {
    color: #666;
}

.mt20 {
    margin-top: 20rpx;
}

.ml20 {
    margin-left: 20rpx;
}

.mr20 {
    margin-right: 20rpx;
}

.mgb30 {
    margin-bottom: 30rpx;
}

.content {
    width: 100%;
    padding: 5% 5% 5%;
    box-sizing: border-box;
}

.analyse_result {
    display: flex;
    padding: 50rpx 30rpx 50rpx 20rpx;
    border-radius: 30rpx;
    background-color: #fff;
}

.img {
    width: 200rpx;
    height: 200rpx;
    /* border-radius: 50%; */
}

.bold {
    font-weight: 600;
}


.analyse_result .gan::before {
    margin-right: 10rpx;
    content: "";
    display: inline-block;
    width: 15rpx;
    height: 15rpx;
    background-color: #c0e2b7;
}

.analyse_result .you::before {
    margin-right: 10rpx;
    content: "";
    display: inline-block;
    width: 15rpx;
    height: 15rpx;
    background-color: #ffd6bd;
}

.analyse_classify {
    border-radius: 30rpx;
    padding: 50rpx 30rpx 50rpx 30rpx;
}

.analyse_classify_header .analyse_classify_header_item {
    display: flex;
    border: 2px solid #f6f6f6;
    border-radius: 10px;
    align-items: center;
}

.analyse_classify_header .analyse_classify_header_img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 200rpx;
    background: #f6f6f6;
}

.analyse_classify_header .analyse_classify_header_img image {
    width: 150rpx;
    height: 150rpx;
}

.fenxi {
    position: relative;
    /* z-index: 99; */
}

.fenxi1 {
    position: relative;
    /* z-index: 99; */
}

.fenxi::after {
    position: absolute;
    content: "";
    bottom: 0;
    display: block;
    width: 130rpx;
    height: 20rpx;
    background-color: rgb(193 235 241 / 50%)
}

.fenxi1::after {
    position: absolute;
    content: "";
    bottom: 0;
    display: block;
    width: 58rpx;
    height: 20rpx;
    background-color: rgb(193 235 241 / 50%)
}

.analyse_classify_foot .shoushu {
    padding: 5%;
    display: flex;
    width: 70%;
    border-radius: 30rpx;
    background-color: #fff;
}

.analyse_classify_foot .info {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-size: 28rpx;
}

.analyse_classify_foot .product_item {
    display: flex;
    margin-right: 30rpx;
    flex-direction: column;
    border-radius: 30rpx;
    width: 40%;
    padding: 5%;
    background-color: #fff;
}

.guige {
    padding: 2%;
    background: #f6f6f6;
}

.product_item .mm {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #45d4eb;
    padding: 2%;
    border-radius: 50%;
    width: 50rpx;
    height: 50rpx;
    color: #fff;
}

.jiankang {
    font-size: 28rpx;
    color: #d3d3d3;
}

.zhouwen {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.heiyanquan {
    width: 125px;
    height: 125px;
    margin: 5% auto;
    margin-top: 10%;
}

.leixing {
    display: flex;
    justify-content: space-around;
}

.leixing ._img {
    display: flex;
    /* width: 160rpx; */
    flex-direction: column;
    align-items: center;
}