<template>
    <main>
        <!-- 借款流程 -->
        <section class="container">
            <div class="body">
                <div class="top-apply">
                    <div class="apply-left"></div>
                    <div class="apply-text">借款申请</div>
                </div>
                <section class="procedure">
                    <section class="big">
                        <div class="top-state">
                            <div class="state-topbig">
                                <div class="state-top">
                                    <div class="state-icon">
                                        <img src="~assets/images/icon-input.png" alt />
                                    </div>
                                    <div class="state-icon">
                                        <img src="~assets/images/icon-examine.png" />
                                    </div>
                                    <div class="state-icon">
                                        <img src="~assets/images/icon-sign.png" alt />
                                    </div>
                                    <div class="state-icon">
                                        <img src="~assets/images/icon-Loan2.png" alt />
                                    </div>
                                    <div class="state-icon">
                                        <img src="~assets/images/icon-complete2.png" alt />
                                    </div>
                                </div>
                            </div>
                            <div class="state-bottom">
                                <div class="content">
                                    <div class="biankuang"></div>
                                    <div class="state-text">输入意向借款金额</div>
                                </div>
                                <div class="content">
                                    <div class="biankuang"></div>
                                    <div class="state-text">等待审核</div>
                                </div>
                                <div class="content">
                                    <div class="biankuang"></div>
                                    <div class="state-text">签署支用合同</div>
                                </div>
                                <div class="content">
                                    <div class="state-text">等待放款</div>
                                </div>
                                <div class="content">
                                    <div class="state-text">借款审批完成</div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- 签合同 -->
                    <section class="signcontract">
                        <div class="signcontract-money">输入借款金额(元)</div>
                        <el-form :model="loaninputForm" ref="loaninputForm" :rules="loaninputRule">
                            <el-form-item prop="input">
                                <el-input
                                    type="amount-money"
                                    v-model="loaninputForm.input"
                                    placeholder="请输入金额"
                                    oninput="value=value.replace(/[^\d]/gi,'')"
                                    :disabled="confirmationSigned"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                        <div
                            class="bigmoney"
                        >（{{information.adoptAmt?"最大借款金额："+"￥"+information.adoptAmt:"最大借款金额："+"￥"+information.adoptAmt}}）</div>
                        <div class="signcontract-type">
                            <div class="signcontract-big">
                                <div class="earliest">最早还款日</div>
                                <div class="latest">最晚还款日</div>
                                <div class="interestrate">日利率及费率</div>
                                <div class="signcontract-mode">还款方式</div>
                            </div>
                        </div>
                        <div class="signcontract-data">
                            <div class="data-big">
                                <div class="earliestnumber">{{information.startDate}}</div>
                                <div class="latestnumber">{{information.endDate}}</div>
                                <div class="interestratenumber">{{information.interestRate}}%</div>
                                <div
                                    class="signcontract-modenumber"
                                >{{information.repayWay ? "结算单入账自动还款":"其他"}}</div>
                            </div>
                        </div>
                        <div
                            class="signcontract-determine"
                            @click="determine('loaninputForm')"
                            v-if="dialogFormVisiblestatues !=1"
                        >签署支用合同</div>
                        <div
                            class="signcontract-determinea"
                            v-if="dialogFormVisiblestatues == 1"
                        >签署支用合同</div>
                        <p class="sign-notice">*点击签署后，借款金额无法修改！</p>
                    </section>
                    <!-- 弹窗 -->
                    <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
                        <div class="head">
                            <img src="~assets/images/icon-writeht.png" alt />
                        </div>
                        <div class="text">请签署合同！</div>
                        <div class="tips">您有多份合同需要签署，请确认全部签署完成。</div>

                        <template v-if="statuew === 1">
                            <div class="writemenu" @click="write">立即签署</div>
                            <div class="nowritemenu" @click="nowrite">暂不签署</div>
                        </template>
                        <div class="writemenu" v-if="statuew ===  2" @click="write">签署成功</div>
                        <div class="writemenunowrite" v-if="statuew ===  0">签署成功</div>
                        <div
                            class="htstates"
                            v-loading="loading"
                        >{{information.signed}}/{{information.total}}</div>
                        <el-progress
                            :text-inside="false"
                            :percentage="writestates"
                            :show-text="false"
                        ></el-progress>
                    </el-dialog>
                </section>
            </div>
        </section>
    </main>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_findJsBankList } from "api/center.js";
import {
    api_loan_loanContract,
    api_loan_condition,
    api_loan_signContract,
    api_loan_signVerification
} from "api/loan.js";
import utils from "utils/utils.js";
let host = process.env.NODE_ENV == "development" ? "/api" : "";
export default {
    data() {
        var checknumber = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入借款金额"));
            } else if(value == 0) {
                callback(new Error("输入值不能等于0"));
            } else if(value < 0) {
                callback(new Error("输入值不能小于0"));
            }
            else {
                callback();
            }
        };
        return {
            dialogFormVisible: false,
            data: 60,
            writestates: "",
            dialogFormVisiblestatues: "",
            loading: false,
            information: {
                adoptAmt: 0,
                loanNo: ""
            },
            privateBankList: [],
            bank: [],
            statuew: "",
            writecomplete:false,
            htstatues: "",
            signed: 0,
            nowritestates: "",
            total: 0,
            loaninputForm: {
                money: "",
                loanDay: 60,
                input: ""
            },
            loaninputRule: {
                input: [{ validator: checknumber, trigger: "blur" }]
            },
            confirmationSigned: false
        }
    },
    name: "borrowMoneywrite",
    computed: {
        loaninputForm_input() {
            return this.loaninputForm.input;
        }
    },
    watch: {
        loaninputForm_input(oldvalue, newvalue) {
            if (
                oldvalue > this.information.adoptAmt ||
                newvalue > this.information.adoptAmt
            ) {
                this.loaninputForm.input = this.information.adoptAmt;
            }
        }
    },
    methods: {
        getinfoemation() {
            let signContractData = {
                data: {
                    loanNo: this.loanNo, //贷款申请编号
                    realAmt: this.loaninputForm.input
                }
            };
            api_loan_signContract(signContractData).then(res => {
                if (res.success) {
                    var link = res.data.urls[0];
                    window.open(link, "_blank");
                    this.information.signed = res.data.signed + 1;
                    var signed = parseInt(res.data.signed) + 1;
                    var total = parseInt(res.data.total);
                    this.information.total = parseInt(res.data.total);
                    this.writestates = (this.information.signed / total) * 100;
                    // this.total = res.data.total;
                    // this.htstatues = res.data.urls[0];
                    this.statuew = 1;
                    this.loading = false;
                    this.dialogFormVisible = true;
                } else {
                    this.dialogFormVisiblestatues = "";
                    this.$message.error(res.msg);
                }
            });
        },
        determine(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 合同签署
                    if(this.loaninputForm.input < 100){
                        this.confirmationSigned = false;
                    }else{
                        this.confirmationSigned = true;
                        this.dialogFormVisiblestatues = "1";
                        this.getinfoemation();
                    }
                } else {
                    console.log("error submit!!");
                }
            });
        },
        nowrite() {
            this.dialogFormVisible = false;
        },
        write() {
            // 合同归档
            let signVerificationData = {
                params: {
                    loanNo: this.loanNo //贷款申请编号
                }
            };
            api_loan_signVerification(signVerificationData).then(res => {
                if (res.success) {
                    if (res.data !== null) {
                        var link = res.data.urls[0];
                        window.open(link, "_blank");
                        if (res.data.signed + 1 == res.data.total) {
                            this.writestates = 100;
                            this.information.signed = this.information.total;
                            this.statuew = 2;
                        } else {
                            this.information.signed = res.data.signed + 1;
                            this.statuew = 1;
                            var signed = parseInt(res.data.signed) + 1;
                            var total = parseInt(res.data.total);
                            this.information.total = parseInt(res.data.total);
                            this.writestates =
                                (this.information.signed / total) * 100;
                        }
                    } else {
                        this.statuew = 0;
                        this.complete();
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        complete() {
            this.$router.replace({
                path: "/loan/borrowMoneymake"
            });
        }
    },
    created() {
        document.getElementsByTagName("html")[0].style.background = "#f7f7f7";
        let applicationparams = {
            params: {}
        };
        api_loan_condition(applicationparams).then(res => {
            if (res.success) {
                let loanContractParams = {
                    params: {
                        loanNo: res.data.loanNo
                    }
                };
                api_loan_loanContract(loanContractParams).then(res => {
                    if (res.success) {
                        this.information = res.data;
                        this.loanNo = res.data.loanNo;
                        this.loaninputForm.input = res.data.realAmt;
                        this.information.interestRate = this.information.interestRate*100;
                        this.status = res.data.status;
                        if (res.data.status == 0 ||this.loaninputForm.input < 100) {
                            this.confirmationSigned = false;
                            this.dialogFormVisible = false;
                        } else {
                            this.dialogFormVisiblestatues = "1";
                            this.confirmationSigned = true;
                            this.dialogFormVisible = true;
                            var signed = parseInt(res.data.signed);
                            var total = parseInt(res.data.total);
                            this.writestates = (signed / total) * 100;
                            if (
                                this.information.signed ==
                                    this.information.total &&
                                this.information.status == 1
                            ) {
                                this.writestates = 100;
                                this.information.signed = this.information.total;
                                this.statuew = 2;
                                this.information.signed = res.data.signed;
                            } else {
                                this.information.signed = res.data.signed;
                                this.statuew = 1;
                            }
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            } else {
                this.$message.error(res.msg);
            }
        });
        let findJsBankListParams = {
            params: {}
        };
        api_findJsBankList(findJsBankListParams).then(res => {
            if (res.success) {
                this.privateBankList = res.data;
            } else {
                this.$message.error(res.msg);
            }
        });
    }
};
</script>

<style lang="less" scoped>
main {
    display: block;
    margin: 40px 0 49px 0;
    .container {
        width: 100%;
        padding: 30px 0 0 0;
        .body {
            width: 1080px;
            height: auto;
            margin: 0 auto 0;
            left: 50%;
            background: #ffffff;
            padding-bottom: 55px;
            .top-apply {
                width: 100%;
                .apply-left {
                    width: 4px;
                    height: 20px;
                    float: left;
                    background: #3d86e9;
                    margin-right: 18px;
                    transform: translateY(27.3px);
                }
                .apply-text {
                    margin: 0 0 0 16px;
                    font-size: 18px;
                    font-weight: bold;
                    border-bottom: 1px solid #eaeaea;
                    width: 1040px;
                    height: 22px;
                    transform: translateY(-0.7px);
                    text-align: left;
                    padding: 28px 0 10px 0;
                }
            }
            .procedure {
                .big {
                    width: 960px;
                    margin: auto;
                    padding-top: 31px;
                    .top-state {
                        width: 960px;
                        margin: 0 auto 45px;
                        text-align: center;
                        .state-topbig {
                            width: 960px;
                            height: auto;
                            border-bottom: 1px solid #e6e6e6;
                            .state-top {
                                width: 840px;
                                margin: auto;
                                padding-bottom: 9px;
                                height: 40px;
                                .state-icon {
                                    width: 163px;
                                    display: inline-block;
                                    text-align: center;
                                    img {
                                        width: 40px;
                                        height: 40px;
                                    }
                                }
                            }
                        }
                        .state-bottom {
                            width: 840px;
                            margin: -1px auto 0;
                            .content {
                                width: 163px;
                                display: inline-block;
                                .biankuang {
                                    width: 110px;
                                    margin: auto;
                                    border-top: 1px solid rgba(61, 134, 233, 1);
                                }
                                .state-text {
                                    text-align: center;
                                    font-size: 14px;
                                    font-weight: 400;
                                    color: rgba(51, 51, 51, 1);
                                    padding-top: 20px;
                                }
                            }
                        }
                    }
                }
                .moble {
                    width: 1040px;
                    margin: auto;
                    text-align: left;
                    .moble-content {
                        width: 960px;
                        padding: 0 40px 0 40px;
                        padding-bottom: 40px;
                        border-bottom: 1px solid #eaeaea;
                        .amount {
                            font-size: 14px;
                            color: #333333;
                            /deep/.el-input {
                                display: inline-block;
                                height: 46px;
                                line-height: 46px;
                                width: 330px;
                                margin: 15px 0 15px 59px;
                                background: rgba(247, 247, 247, 0.4);
                                font-size: 14px;
                                span {
                                    color: #333333;
                                    font-size: 18px;
                                    transform: translateX(-3px);
                                    // padding-right: 10px;
                                    float: right;
                                }
                            }
                        }
                        .endtime {
                            padding: 15px 0 15px 0;
                            font-size: 14px;
                            color: #333333;
                            span {
                                font-size: 18px;
                                color: #333333;
                                width: 159px;
                                margin: 31px;
                                p {
                                    font-size: 14px;
                                    color: #999999;
                                    display: inline-block;
                                    margin-left: 17px;
                                }
                            }
                        }
                        .payment-method {
                            margin: 13px 0 13px 0;
                            font-size: 14px;
                            color: rgba(51, 51, 51, 1);
                            span {
                                font-size: 18px;
                                margin-left: 58px;
                                width: 100px;
                            }
                            img {
                                width: 20px;
                                height: 20px;
                                margin: 0 0 0 10px;
                                transform: translateY(3.7px);
                            }
                            .payment-tex {
                                display: none;
                            }
                        }
                        .collect {
                            font-size: 14px;
                            padding: 15px 0 15px 0;
                            color: rgba(51, 51, 51, 1);
                            .collectmenu {
                                width: 330px;
                                height: 46px;
                                margin-left: 69px;
                                display: inline-block;
                                .el-select {
                                    color: rgba(65, 136, 233, 1);
                                    font-size: 14px;
                                    width: 330px;
                                    height: 46px;
                                }
                            }
                        }
                        .card-big {
                            width: 450px;
                            border: 1px solid rgba(234, 234, 234, 1);
                            border-radius: 4px;
                            height: 90px;
                            border: 1px solid #eaeaea;
                            margin: 15px 0 15px 132px;
                            display: inline-block;
                            .card-top {
                                width: 100%;
                                margin: 0 20px 0 0;
                                height: 43px;
                                line-height: 43px;
                                background: #f6f6f6;
                                border-radius: 4px 4px 0 0;
                                .card-icon {
                                    width: 28px;
                                    height: 27px;
                                    border-radius: 50%;
                                    margin-left: 20px;
                                    padding: 8px 0 8px 0;
                                    float: left;
                                    img {
                                        width: 28px;
                                        height: 27px;
                                    }
                                }
                                .card-text {
                                    text-align: left;
                                    float: left;
                                    overflow: hidden;
                                    .card-left {
                                        font-size: 14px;
                                        color: rgba(51, 51, 51, 1);
                                        float: left;
                                        padding: 0 10px 0 0;
                                        margin-left: 13px;
                                    }
                                    .card-cent {
                                        width: 1px;
                                        height: 16px;
                                        background: #cccccc;
                                        float: left;
                                        transform: translateY(12px);
                                    }
                                    .card-right {
                                        font-size: 14px;
                                        color: rgba(51, 51, 51, 1);
                                        float: left;
                                        padding: 0 16px 0 16px;
                                    }
                                }
                            }
                            .card-bottom {
                                height: 47px;
                                line-height: 47px;
                                width: 387px;
                                padding-left: 63px;
                                font-size: 14px;
                                color: rgba(153, 153, 153, 1);
                            }
                        }
                        /deep/.el-dialog {
                            width: 960px;
                            height: 568px;
                        }
                        /deep/.el-dialog__header {
                            padding: 0;
                        }
                        /deep/.el-dialog__body {
                            padding: 1px 20px;
                        }
                        .head {
                            height: 57px;
                            line-height: 57px;
                            width: 920px;
                            border-bottom: 1px solid #eaeaea;
                            font-family: "MicrosoftYaHei";
                            span {
                                font-size: 18px;
                                font-weight: bold;
                                p {
                                    display: inline-block;
                                    color: #cc6666;
                                    font-size: 14px;
                                    font-weight: normal;
                                    margin-left: 12px;
                                }
                            }
                        }
                        .bankname {
                            width: 295px;
                            height: 46px;
                            line-height: 46px;
                            font-size: 18px;
                            border-radius: 4px;
                            display: block;
                            background: #f5f5f5;
                            color: #333333;
                            margin-top: 59px;
                            padding: 0 18px 0 18px;
                        }
                        .name {
                            width: 307px;
                            height: 46px;
                            line-height: 46px;
                            border-radius: 4px;
                            color: #333333;
                            font-size: 18px;
                            display: block;
                            background: #f5f5f5;
                            margin-top: 25px;
                            padding: 0 12px 0 12px;
                        }
                        .el-input {
                            margin-top: 26px;
                        }
                        .yyang {
                            width: 331px;
                            height: 46px;
                            display: block;
                        }
                        .verificat {
                            width: 221px;
                            height: 46px;
                        }
                        .verificationbutton {
                            display: inline-block;
                            width: 100px;
                            height: 46px;
                            line-height: 46px;
                            background: #3d86e9;
                            border-radius: 4px;
                            transform: translateY(2px);
                            margin-left: 20px;
                            text-align: center;
                            font-size: 14px;
                            color: #ffffff;
                        }
                        .addtobutton {
                            width: 331px;
                            height: 46px;
                            line-height: 46px;
                            background: #3d86e9;
                            border-radius: 4px;
                            text-align: center;
                            color: #ffffff;
                            font-size: 14px;
                            margin-top: 40px;
                        }
                        .el-input {
                            font-size: 14px;
                        }
                        .rule {
                            overflow: hidden;
                            margin-top: 15px;
                            .rule-left {
                                font-size: 14px;
                                float: left;
                                margin-top: 20px;
                            }
                            .rule-right {
                                float: left;
                                width: 796px;
                                background: #fef6ea;
                                border-radius: 6px;
                                overflow: hidden;
                                margin-left: 60px;
                                .icon {
                                    float: left;
                                    width: 20px;
                                    height: 20px;
                                    margin-left: 11px;
                                    margin-top: 17px;
                                    transform: translateY(2px);
                                }
                                .rule-lei {
                                    float: left;
                                    padding: 20px;
                                    .title {
                                        font-size: 18px;
                                        padding-bottom: 10px;
                                    }
                                    .rule-text {
                                        p {
                                            color: #666666;
                                            padding: 0 0 5px 0;
                                            font-size: 12px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .menu {
                        width: 331px;
                        height: 46px;
                        background: rgba(61, 134, 233, 1);
                        border-radius: 4px;
                        text-align: center;
                        line-height: 46px;
                        margin: 70px auto 0;
                        color: rgba(255, 255, 255, 1);
                        cursor: pointer;
                    }
                }
                .toexamine {
                    width: 960px;
                    margin: 9px auto 0;
                    .toexamine-icon {
                        width: 276px;
                        height: 158px;
                        line-height: 158px;
                        margin: 0 auto 3px;
                        img {
                            width: 243px;
                            height: 126px;
                            margin: 16px auto 0;
                        }
                    }
                    .toexamine-texto {
                        font-size: 24px;
                        color: rgba(61, 134, 233, 1);
                        margin: 40px auto;
                        text-align: center;
                    }
                    .toexamine-textc {
                        font-size: 24px;
                        color: rgba(61, 134, 233, 1);
                        margin: 40px auto;
                        text-align: center;
                    }
                    .toexamine-menuo {
                        border-radius: 4px;
                        background: rgba(204, 204, 204, 1);
                        width: 331px;
                        height: 46px;
                        margin: 0 auto 220px;
                        text-align: center;
                        line-height: 46px;
                        color: #ffffff;
                    }
                    .toexamine-menuc {
                        border-radius: 4px;
                        background: rgba(61, 134, 233, 1);
                        width: 331px;
                        height: 46px;
                        margin: 0 auto 44px;
                        text-align: center;
                        line-height: 46px;
                        color: #ffffff;
                        cursor: pointer;
                    }
                }
                .signcontract {
                    width: 1080px;
                    text-align: center;
                    .signcontract-money {
                        font-size: 18px;
                        color: rgba(51, 51, 51, 1);
                        margin: 10px auto;
                        text-align: center;
                    }
                    .el-input {
                        width: 331px;
                        height: 46px;
                        line-height: 46px;
                        font-size: 24px;
                        color: #333333;
                        text-align: center;
                        /deep/.el-input__inner {
                            text-align: center;
                        }
                        /deep/.el-input__inner::-webkit-input-placeholder {
                            font-size: 16px;
                        }
                    }
                    .bigmoney {
                        margin-top: 16px;
                        font-size: 14px;
                        color: rgba(153, 153, 153, 1);
                        text-align: center;
                    }
                    .signcontract-type {
                        width: 1038px;
                        background: #f5f5f5;
                        margin: 44px auto 0;
                        .signcontract-big {
                            width: 950px;
                            height: 36px;
                            line-height: 36px;
                            margin: auto;
                            .earliest {
                                width: 231px;
                                font-size: 14px;
                                color: rgba(51, 51, 51, 1);
                                display: inline-block;
                                text-align: center;
                            }
                            .latest {
                                width: 231px;
                                font-size: 14px;
                                color: rgba(51, 51, 51, 1);
                                display: inline-block;
                                text-align: center;
                            }
                            .interestrate {
                                width: 231px;
                                font-size: 14px;
                                color: rgba(51, 51, 51, 1);
                                display: inline-block;
                                text-align: center;
                            }
                            .signcontract-mode {
                                width: 231px;
                                font-size: 14px;
                                color: rgba(51, 51, 51, 1);
                                display: inline-block;
                                text-align: center;
                            }
                        }
                    }
                    .signcontract-data {
                        width: 1038px;
                        height: 36px;
                        height: 36px;
                        margin: 10px auto;
                        .data-big {
                            width: 950px;
                            height: 36px;
                            line-height: 36px;
                            margin: auto;
                            .earliestnumber {
                                width: 231px;
                                font-size: 14px;
                                color: rgba(51, 51, 51, 1);
                                display: inline-block;
                                text-align: center;
                            }
                            .latestnumber {
                                width: 231px;
                                font-size: 14px;
                                color: rgba(51, 51, 51, 1);
                                display: inline-block;
                                text-align: center;
                            }
                            .interestratenumber {
                                width: 231px;
                                font-size: 14px;
                                color: rgba(51, 51, 51, 1);
                                display: inline-block;
                                text-align: center;
                            }
                            .signcontract-modenumber {
                                width: 231px;
                                font-size: 14px;
                                color: rgba(51, 51, 51, 1);
                                display: inline-block;
                                text-align: center;
                            }
                        }
                    }
                    .signcontract-determine {
                        width: 331px;
                        height: 46px;
                        font-size: 18px;
                        line-height: 46px;
                        border-radius: 4px;
                        background: rgba(61, 134, 233, 1);
                        margin: 53px auto 0;
                        text-align: center;
                        color: rgba(255, 255, 255, 1);
                        cursor: pointer;
                    }
                    .signcontract-determinea {
                        width: 331px;
                        height: 46px;
                        font-size: 18px;
                        line-height: 46px;
                        border-radius: 4px;
                        background: #cccccc;
                        margin: 53px auto 0;
                        text-align: center;
                        color: rgba(255, 255, 255, 1);
                        cursor: pointer;
                    }
                }
                // 弹窗样式
                /deep/.el-dialog {
                    width: 600px;
                    height: 470px;
                    border-radius: 4px;
                }
                /deep/.el-dialog__header {
                    padding: 0;
                }
                /deep/.el-dialog__body {
                    padding: 1px 20px;
                }
                /deep/.el-dialog__headerbtn .el-dialog__close {
                    transform: translateY(-49px) translateX(14px);
                    border: 1px solid;
                    border-radius: 50%;
                    color: #787878;
                }
                .el-dialog__body {
                    .el-form-item__error {
                        left: 0;
                    }
                }
                .head {
                    margin: auto;
                    width: 276px;
                    height: 158px;
                }
                .text {
                    color: #3d86e9;
                    text-align: center;
                    font-size: 20px;
                    margin-top: 17px;
                }
                .tips {
                    color: #999999;
                    font-size: 14px;
                    text-align: center;
                    margin-top: 20px;
                }
                .writemenu {
                    width: 261px;
                    height: 46px;
                    line-height: 46px;
                    text-align: center;
                    font-size: 18px;
                    color: #ffffff;
                    margin: 35px auto 19px;
                    background: #3d86e9;
                    border-radius: 4px;
                    cursor: pointer;
                }
                .writemenunowrite {
                    width: 261px;
                    height: 46px;
                    line-height: 46px;
                    text-align: center;
                    font-size: 18px;
                    color: #ffffff;
                    margin: 35px auto 19px;
                    background: #cccccc;
                    border-radius: 4px;
                    cursor: pointer;
                }
                .nowritemenu {
                    text-align: center;
                    font-size: 18px;
                    color: #666666;
                    cursor: pointer;
                }
                .htstates {
                    text-align: center;
                    margin: 52px 0 17px 0;
                }
                /deep/.el-progress-bar__outer {
                    width: 261px;
                    margin: auto;
                }
            }
        }
    }
    /deep/.el-input__inner {
        height: 46px;
    }
    /deep/.el-form-item__content {
        margin-left: 0 !important;
    }
    /deep/.el-form-item {
        margin-bottom: 0px;
    }
    /deep/.el-form-item__error {
        padding-top: 0px;
        line-height: 0;
        left: 499px;
        transform: translateY(46px);
        font-size: 14px;
    }
    /deep/.el-table__body-wrapper {      
        background: #ffffff;
    }
    /deep/.el-table__row {
        height: 55px;
    }
    /deep/.el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        background-color: #ffffff;
    }
}
.sign-notice {
    margin-top: 10px;
    font-size: 16px;
    color: #cc3333;
}
</style>
