<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ">
    <title id=" idtitle"> 薪必果签约 </title>
    <link rel="stylesheet" href="/css/ele/chalk.css">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/autocomplete.css">

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/vue/vue-router.min.js"></script>
    <script src="/js/vue/vuex.min.js"></script>
    <script src="/js/ele/index.js"></script>
    <style>
        body {
            padding: 0px;
            margin: 0px;
        }

        #loading {
            background-color: #2c3e50;
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: 9999;
            margin-top: 0px;
            top: 0px;
        }

        #loading-center {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #loading-center-absolute {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 50px;
            width: 50px;
            margin-top: -25px;
            margin-left: -25px;
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-animation: loading-center-absolute 1.5s infinite;
            animation: loading-center-absolute 1.5s infinite;

        }

        .object {
            width: 25px;
            height: 25px;
            background-color: #FFF;
            float: left;

        }

        #object_one {
            -webkit-animation: object_one 1.5s infinite;
            animation: object_one 1.5s infinite;
        }

        #object_two {
            -webkit-animation: object_two 1.5s infinite;
            animation: object_two 1.5s infinite;
        }

        #object_three {
            -webkit-animation: object_three 1.5s infinite;
            animation: object_three 1.5s infinite;
        }

        #object_four {
            -webkit-animation: object_four 1.5s infinite;
            animation: object_four 1.5s infinite;
        }


        @-webkit-keyframes loading-center-absolute {
            100% {
                -webkit-transform: rotate(-45deg);
            }

        }

        @keyframes loading-center-absolute {
            100% {
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
            }
        }

        @-webkit-keyframes object_one {
            25% {
                -webkit-transform: translate(0, -50px) rotate(-180deg);
            }

            100% {
                -webkit-transform: translate(0, 0) rotate(-180deg);
            }

        }

        @keyframes object_one {
            25% {
                transform: translate(0, -50px) rotate(-180deg);
                -webkit-transform: translate(0, -50px) rotate(-180deg);
            }

            100% {
                transform: translate(0, 0) rotate(-180deg);
                -webkit-transform: translate(0, 0) rotate(-180deg);
            }
        }

        @-webkit-keyframes object_two {
            25% {
                -webkit-transform: translate(50px, 0) rotate(-180deg);
            }

            100% {
                -webkit-transform: translate(0, 0) rotate(-180deg);
            }
        }

        {
        "icon": "tool-order", "title":"商标列表", "type":"default", "key":"myTmList", "isOnGrid":true
        }

        ,

        @keyframes object_two {
            25% {
                transform: translate(50px, 0) rotate(-180deg);
                -webkit-transform: translate(50px, 0) rotate(-180deg);
            }

            100% {
                transform: translate(0, 0) rotate(-180deg);
                -webkit-transform: translate(0, 0) rotate(-180deg);
            }
        }

        @-webkit-keyframes object_three {
            25% {
                -webkit-transform: translate(-50px, 0) rotate(-180deg);
            }

            100% {
                -webkit-transform: translate(0, 0) rotate(-180deg);
            }
        }

        @keyframes object_three {
            25% {
                transform: translate(-50px, 0) rotate(-180deg);
                -webkit-transform: translate(-50px, 0) rotate(-180deg);
            }

            100% {
                transform: translate(0, 0) rotate(-180deg);
                -webkit-transform: rtranslate(0, 0) rotate(-180deg);
            }
        }

        @-webkit-keyframes object_four {
            25% {
                -webkit-transform: translate(0, 50px) rotate(-180deg);
            }

            100% {
                -webkit-transform: translate(0, 0) rotate(-180deg);
            }
        }

        @keyframes object_four {
            25% {
                transform: translate(0, 50px) rotate(-180deg);
                -webkit-transform: translate(0, 50px) rotate(-180deg);
            }

            100% {
                transform: translate(0, 0) rotate(-180deg);
                -webkit-transform: translate(0, 0) rotate(-180deg);
            }
        }

        .el-input__inner {
            border: none;
            border-radius: 0px;
            padding: 0px;
            color: #ddd
        }
        .el-input__inner {
            color: #2F2F2F;
        }
        .page_header {
            width:100%;
            text-align: center;
        }

        .modifybtn {
            margin: 20px auto;
            width:300px;
            height:40px;
            text-align: center;
            background:#2b85e4;
            border-radius:20px;
            font-size:16px;
            font-family:HiraginoSansGB-W3;
            font-weight:normal;
            color: #fff;
        }
    </style>
</head>

<body style="overflow: auto;">
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="object_one"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_four"></div>
        </div>
    </div>
</div>
<div id="app">
    <el-container>
        <div style="margin-top:10px;text-align: center;width: 100%;line-height: 40px;">
            <div style="width:100%;border-bottom:solid 1px #eee;padding-bottom: 5px;">
                <span  style="width:300px;color: #000000;font-size: 18px;font-weight: 700;text-align: center;"> 薪必果签约 </span>
            </div>
            <div style="margin-top:15px;width:100%;text-align: center;">
                <div style="width: 300px;text-align: center;margin: 0 auto">
                    <span id="companyTitle" style="padding-left:5px;color:#222222;font-size: 15px;float:left;"></span>
                </div>
                <div style="clear:both;"></div>
                <el-form :model="wxuser" label-position="left" status-icon :rules="rules" ref="wxuserform" style="width: 300px;text-align: center;margin: 0 auto;">
                    <el-form-item label="" prop="id_name"  >
                        <el-row gutter="1" style="border-bottom:solid 1px #eee;">
                            <el-col :span="2"><img src="/imgs/h5/icon_cell_ name.png" style="margin-top:5px"/></el-col>
                            <el-col v-if="isIdNameEdit" :span="22" style="text-align:left">
                                <el-input  v-model="wxuser.id_name" placeHolder="请输入真实姓名" autocomplete="off" style="padding-left:5px;"></el-input>
                            </el-col>
                            <el-col v-if="!isIdNameEdit" :span="22" style="text-align:left">
                                <span style="padding-left:5px;">{{wxuser.id_name}}</span>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="" prop="id_no">
                        <el-row gutter="1" style="border-bottom:solid 1px #eee">
                            <el-col :span="2"><img src="/imgs/h5/icon_cell_IDnumber.png" style="margin-top:5px"/></el-col>
                            <el-col v-if="isIdNoEdit" :span="22" style="text-align:left">
                                <el-input v-model="wxuser.id_no" placeHolder="请输入您的身份证号" autocomplete="off" style="padding-left:5px;"></el-input>
                            </el-col>
                            <el-col v-if="!isIdNoEdit" :span="22" style="text-align:left">
                                <span style="padding-left:5px;">{{wxuser.id_no}}</span>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <div style="float:left;">
                        <el-checkbox style="float:left" v-model="isaggree"  >我已知悉并同意</el-checkbox>
                        <a @click.stop="showaggreement" href="javascript:;"
                           style="float:left;text-decoration:none;color:blue;font-size: 13px;
							padding-top: 1px;" target="_blank">《薪必果分包协议》</a>
                    </div>

                    <el-button :disabled="!isaggree" :loading="btnloading" class="modifybtn" @click="save"  type="primary">提交信息</el-button>
                </el-form>
            </div>
        </div>
    </el-container>
</div>
<script src="/js/vue/jquery.min.js"></script>
<script src="/js/vue/base64.js"></script>
<script src="/js/vue/axios.min.js"></script>
<script src="/js/bpoent.js"></script>
</html>
