4D_uniapp_service/common/global.scss

.content {
    :deep(.uni-card) {
        margin: 20upx !important;
        background-color: red;
    }

    .content_background {
        background: linear-gradient(180deg, #f7f8f900 0%, #f7f8f9ff 50%);
    }
}


/*	==================
		   通知
	==================	*/
.uni-noticebar {
    border-radius: 16upx;
    padding: 8upx 12upx !important;

    .notice_icon {
        width: 64upx;
        height: 64upx;
        border-radius: 16upx;
        margin-right: 20upx;
    }
}

/*	==================
		   导航
	==================	*/
.navigation_wrap {
    padding: 40upx 20upx 20upx;
    margin-bottom: 10px;
    background: #fff;
    position: sticky;
    top: 0px;
    z-index: 1;
    box-shadow: rgba(26, 26, 26, 0.1) 0px 0px 0.625rem 0px;

    .uni-scroll-view-content {
        display: flex;
        width: fit-content;
        min-width: 100%;

        uni-view {
            .tab_title {
                padding: 0 24upx;
                width: max-content;
                font-size: 26upx;
                font-weight: 400;
                color: #666666;
                line-height: 33upx;
                margin-bottom: 8upx;
            }

            .tab_line {
                width: 40upx;
                height: 4upx;
                border-radius: 2upx;
                margin: 0 auto;
            }

            &.active {
                .tab_title {
                    font-weight: bold;
                    color: #000000;
                }

                .tab_line {
                    background: #07d69e;
                }
            }
        }
    }
}

/*	==================
		   卡片
	==================	*/

.card {
    width: 710upx;
    background: #ffffff;
    border-radius: 16upx;
    margin: 10upx 20upx 10upx;
    // box-shadow: 0px 5px 5px 0px rgba(130, 130, 130, 0.1);
    box-shadow: 5upx 5upx 10upx 0upx rgba(26, 26, 26, 0.1);
}

/*	==================
		   项目列表
	==================	*/
.service_wrap {
    margin: 0 20upx 20upx;
    padding: 30upx 20upx;
    display: flex;

    .service_thumbnail {
        width: 250upx !important;
        height: 250upx !important;
        border-radius: 8upx;
        margin-right: 30upx;
    }

    .service_title {
        font-size: 32upx;
        font-weight: bold;
        color: #333333;

        display: flex;
        justify-content: space-between;
        align-items: center;

        .service_title_extra {
            font-size: 24upx;
            font-weight: 400;
            color: #ff490e;
			&.cannel_color {
				color: #999;
			}
			&.success_color {
				color: #07d69e;
			}
			&.warning_color {
				color: #F37B1D;
			}
        }
    }

    .service_detail {
        height: 70upx;
        margin: 26upx 0 0;
        font-size: 26upx;
        font-weight: 400;
        color: #999999;

        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .service_extra {
        margin: 16upx 0;
        display: flex;
        align-items: center;

        .service_extra_image {
            width: 30upx;
            height: 30upx;
            margin-right: 5upx;
        }

        .service_extra_text {
            width: 114upx;
            font-size: 26upx;
            font-weight: 400;
            color: #07d69e;

            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            overflow-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .service_extra_order {
            font-size: 26upx;
            font-weight: 400;
            color: #999999;

            .service_extra_order_num {
                font-size: 24upx;
                padding: 0 2upx;
            }
        }

        .service_extra_price {
            font-size: 42upx;
            font-weight: 400;
            color: #ff490e;

            .service_extra_price_prefix {
                font-size: 24upx;
            }
        }
    }

    .service_tag {
        .uni-tag {
            border: 0;
            background-color: #D2F1F0 !important;
            color: #1CBBB4 !important;
            margin-right: 20upx;

            &:nth-child(3n+2) {
                background-color: #FADBD9 !important;
                color: #E54D42 !important;
            }

            &:nth-child(3n) {
                background-color: #FDE6D2 !important;
                color: #F37B1D !important;
            }
        }
    }

    .service_footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .service_footer_price {
            font-size: 42upx;
            font-weight: 400;
            color: #ff490e;

            .service_footer_price_prefix {
                font-size: 24upx;
            }
        }
    }
}

/*	==================
			按键
	==================	*/
.submit_btn,
.cancel_btn,
.disabled_btn,
.busy_btn {
    width: 180upx;
    height: 56upx;
    background: linear-gradient(88deg, #37ecba 0%, #72afd3 100%);
    border-radius: 28upx;
    padding: 4upx 0 0;

    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;

    font-size: 28upx;
    margin: 0 6upx;
    box-shadow: 0 0 0.625rem 0 rgba(26, 26, 26, 0.1);

    &::after {
        border: 0;
    }
}

.cancel_btn {
    background: white;
    color: #666 !important;
    border: 1upx solid #999;
}

.disabled_btn {
    background: #ccc !important;
}

.busy_btn {
    background: #f49191
}


/* ==================
          头像
 ==================== */

.avatar {
    font-variant: small-caps;
    margin: 0;
    padding: 0;
    display: inline-flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    white-space: nowrap;
    position: relative;
    width: 64upx;
    height: 64upx;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
    font-size: 1.5em;

    .big {
        width: 240upx;
        height: 240upx;
        font-size: 2.5em;
    }
}

/*	==================
		   表单
	==================	*/
.uni-form {
    .uni-form-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 20upx;
        min-height: 90upx;
        border-bottom: 1upx solid #EEEEEE;
        padding-right: 20upx;

        &:last-child {
            border-bottom: 0;
        }

        .title {
            font-size: 26upx;
            font-weight: 400;
            color: #333333;
            display: flex;
            align-items: center;

            .form_item_icon {
                width: 40upx;
                height: 40upx;
                margin-right: 10upx;
            }
        }

        .uni-input {
            text-align: right;
            font-size: 26upx;
            width: 480upx;
        }

        .form_item_btn_icon {
            width: 28upx;
            height: 28upx;
            margin: 0 6upx 0 69upx;
        }
    }
}

/*	==================
		   底部按钮
	==================	*/
.footer_btn_wrap {
    width: 750upx;
    // height: 140upx;
    background: #ffffff;
    z-index: 9;
    position: sticky;
    bottom: 0;
    box-shadow: 5upx -5upx 10upx 0upx rgba(26, 26, 26, 0.1);
    padding: 20upx 0;
    /* 兼容 iOS 设备 */
    padding-bottom: calc(20upx + constant(safe-area-inset-bottom));
    /* 兼容 iPhone X 及以上设备 */
    padding-bottom: calc(20upx + env(safe-area-inset-bottom));

    .footer_btn {
        width: 630upx;
        height: 80upx;
        background: linear-gradient(90deg, #37ecba 0%, #72afd3 100%);
        border-radius: 16upx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;

        font-weight: bold;
        color: #ffffff;

        margin-bottom: 20upx;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .footer_btn_disabled {
        background: #CCCCCC;
    }

    .footer_btn_busy {
        background: #f49191
    }
}

/*	==================
		   底部
	==================	*/
.footer {
    display: flex;
    justify-content: center;
    padding: 100upx 0 80upx;
    background: #F7F8F9;

    uni-image {
        width: 594upx;
        height: 107upx;
        margin: 0 auto;
    }
}


/*	==================
		   警报
	==================	*/
.call_alarm_back {
	position: fixed;
	right: 20upx;
	bottom: 300upx;
	opacity: 0.6;
	z-index: 2;

	uni-image {
		width: 100upx;
		height: 100upx;
	}
}