企业信息页面样式调整

front-vue/src/App.vue

@@ -320,4 +320,28 @@ export default {
     font-size: 14px;
     color: #999999;
 }
+.zap-form-text{
+    display: flex;
+    align-items: center;
+    height: 36px;
+    margin-top: 20px;
+    font-size: 14px;
+    color: #333333;
+}
+.zap-form-text__label{
+    width: 112px;
+    margin-right: 16px;
+    text-align: right;
+}
+.zap-form-text__file{
+    display: flex;
+    align-items: center;
+    width: 264px;
+    height: 36px;
+    line-height: 14px;
+    padding: 0 12px;
+    background-color: #F4F5F6;
+    border-radius: 4px;
+    border: 1px solid #EBEBEB;
+}
 </style>

front-vue/src/views/service/companyInformation/companyInformation.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="app-container zap-main">
-    <div class="zap-content">
+    <div class="zap-content" style="min-height: calc(100vh - 200px)">
         <el-tabs v-model="activeName" style="margin:2px">
             <!--———————————————————————————————————— 附件信息 ————————————————————————————————————————————————-->
             <el-tab-pane v-if="companyType != '03'" label="附件信息" name="first">
@@ -166,59 +166,80 @@
             </el-tab-pane>
             <!--——————————————————————————————————————————基本信息————————————————————————————————————————————————————-->
             <el-tab-pane v-if="form.scyType !='03'" label="基本信息" name="fourth">
-                <el-form ref="form" :model="form" label-width="130px" :inline="true">
-                    <!-- <el-form-item label="所属行业" prop="scyIndustry">
-                        <el-input v-model="form.scyIndustry" placeholder="请输入所属行业" maxlength="20" show-word-limit disabled />
-                    </el-form-item>
-                    <el-form-item label="企业规模" prop="scyScale">
-                        <el-select v-model="form.scyScale" placeholder="企业规模" clearable size="small" disabled>
-                            <el-option v-for="dict in scyScaleOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="机构性质" prop="scyOrganization">
-                        <el-select v-model="form.scyOrganization" placeholder="机构性质" clearable size="small" disabled>
-                            <el-option v-for="dict in scyOrganizationOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
-                        </el-select>
-                    </el-form-item> -->
-                    <el-form-item label="企业类型" prop="scyType">
-                        <el-input :value= scyTypeFormat(form.scyType) disabled></el-input>
-                    </el-form-item>
-                    <!-- <el-form-item label="客户经理" prop="scyManager">
-                        <el-input v-model="form.scyManager" placeholder="请输入客户经理" maxlength="20" show-word-limit />
-                    </el-form-item> -->
-                    <el-form-item label="机构名称" prop="scyName">
-                        <el-input v-model="form.scyName" disabled />
-                    </el-form-item>
-                    <el-form-item label="机构代码" prop="scySocialCode">
-                        <el-input v-model="form.scySocialCode" disabled />
-                    </el-form-item>
-                    <el-form-item label="证件注册日" prop="scyStartTime">
-                        <el-input v-model="form.scyStartTime" disabled />
-                    </el-form-item>
-                    <el-form-item label="注册地址" prop="scyAddress">
-                        <el-input v-model="form.scyAddress" disabled />
-                    </el-form-item>
-                    <el-form-item label="证件到期日" prop="scyEndTime">
-                        <el-input v-model="form.scyEndTime" disabled />
-                    </el-form-item>
-                    <el-form-item label="注册资本" prop="scyRegisteredCapital">
-                        <el-input v-model="form.scyRegisteredCapital" disabled />
-                    </el-form-item>
-                    <el-form-item label="法人姓名" prop="scyLegal">
-                        <el-input v-model="form.scyLegal" disabled />
-                    </el-form-item>
-                    <el-form-item label="证件类型" prop="scyLegal">
-                        <el-input value="身份证" disabled />
-                    </el-form-item>
-                    <el-form-item label="联系方式" prop="scyPhone">
-                        <el-input v-model="form.scyPhone" disabled />
-                    </el-form-item>
-                    <el-form-item label="证件号码" prop="scyLegalId">
-                        <el-input v-model="form.scyLegalId" disabled />
-                    </el-form-item>
-                    <!-- <el-button type="primary" @click="submitForm">确 定</el-button>
-                    <el-button @click="cancel">取 消</el-button> -->
-                </el-form>
+                <el-row>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">企业类型</span>
+                            <div class="zap-form-text__file">{{scyTypeFormat(form.scyType)}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">机构名称</span>
+                            <div class="zap-form-text__file">{{form.scyName}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">机构代码</span>
+                            <div class="zap-form-text__file">{{form.scySocialCode}}</div>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">证件注册日</span>
+                            <div class="zap-form-text__file">{{form.scyStartTime}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">注册地址</span>
+                            <div class="zap-form-text__file">{{form.scyAddress}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">证件到期日</span>
+                            <div class="zap-form-text__file">{{form.scyEndTime}}</div>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">注册资本</span>
+                            <div class="zap-form-text__file">{{form.scyRegisteredCapital}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">法人姓名</span>
+                            <div class="zap-form-text__file">{{form.scyLegal}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">证件类型</span>
+                            <div class="zap-form-text__file">身份证</div>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">联系方式</span>
+                            <div class="zap-form-text__file">{{form.scyPhone}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">证件号码</span>
+                            <div class="zap-form-text__file">{{form.scyLegalId}}</div>
+                        </div>
+                    </el-col>
+                </el-row>
             </el-tab-pane>
             <el-tab-pane v-if="companyType =='03'" label="基本信息" name="first">
                 <el-form ref="form" :model="form" label-width="130px" :inline="true">
@@ -277,69 +298,69 @@
             </el-tab-pane>
             <!--————————————————————————————————————联系人信息————————————————————————————————————————————————-->
             <el-tab-pane label="联系人信息" name="second">
-                <div><span style="color:#409EFF">▋</span> 经办人信息</div>
-                <el-form ref="contactsForm" :model="contactsForm" label-width="130px" :inline="true">
-                    <el-row>
-                        <el-col :span="8" style="margin-top:2%">
-                            姓名:
-                            <el-input v-model="contactsForm.nickName" disabled style=" width:50%"></el-input>
-                        </el-col>
-                        <el-col :span="8" style="margin-top:2%">
-                            移动电话:
-                            <el-input v-model="contactsForm.userName" disabled style="width:50%"></el-input>
-                        </el-col>
-                        <el-col :span="8" style="margin-top:2%">
-                            邮箱:
-                            <el-input v-model="contactsForm.email" disabled style=" width:50%"></el-input>
-                        </el-col>
-                    </el-row>
-                </el-form>
+                <el-row>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">姓名</span>
+                            <div class="zap-form-text__file">{{contactsForm.nickName}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">移动电话</span>
+                            <div class="zap-form-text__file">{{contactsForm.userName}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">邮箱</span>
+                            <div class="zap-form-text__file">{{contactsForm.email}}</div>
+                        </div>
+                    </el-col>
+                </el-row>
             </el-tab-pane>
             <!--———————————————————————————————————— 发票信息 ————————————————————————————————————————————————-->
             <el-tab-pane v-if="companyType != '03'" label="发票信息" name="third">
-                <div><span style="color:#409EFF">▋</span>开票信息</div>
-                <el-form ref="invoiceForm" :model="invoiceForm" label-width="130px" :inline="true">
-                    <el-row>
-                        <el-col :span="2" style="margin-top:2%;line-height: 34px;    text-align: right;">
-                                                单位名称:
-                                            </el-col>
-                        <el-col :span="6" style="margin-top:2%;">
-                            <el-input v-model="invoiceForm.scyName" disabled style=" width:75%"></el-input>
-                        </el-col>
-                        <el-col :span="2" style="margin-top:2%;line-height: 34px;    text-align: right;">
-                            税号:
-                        </el-col>
-                        <el-col :span="6" style="margin-top:2%;">
-                            <el-input v-model="invoiceForm.scySocialCode" disabled style=" width:75%"></el-input>
-                        </el-col>
-                        <el-col :span="2" style="margin-top:2%;line-height: 34px;    text-align: right;">
-                            单位地址:
-                        </el-col>
-                        <el-col :span="6" style="margin-top:2%;">
-                            <el-input v-model="invoiceForm.ziaAddress" disabled style=" width:75%"></el-input>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="2" style="margin-top:2%;line-height: 34px;    text-align: right;">
-                            电话号码:
-                        </el-col>
-                        <el-col :span="6" style="margin-top:2%;">
-                            <el-input v-model="invoiceForm.ziaContactsPhone" disabled style=" width:75%"></el-input>
-                        </el-col>
-                        <el-col :span="2" style="margin-top:2%;line-height: 34px;    text-align: right;">
-                            开户银行:
-                        </el-col>
-                        <el-col :span="6" style="margin-top:2%;">
-                            <el-input v-model="invoiceForm.pbaiBankName" disabled style=" width:75%"></el-input>
-                        </el-col>
-                        <el-col :span="2" style="margin-top:2%;line-height: 34px;    text-align: right;">
-                            开户账号:
-                        </el-col>
-                        <el-col :span="6" style="margin-top:2%;">
-                            <el-input v-model="invoiceForm.pbaiBankaccountId" disabled style=" width:75%"></el-input>
-                        </el-col>
-                    </el-row>
-                </el-form>
+                <el-row>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">单位名称</span>
+                            <div class="zap-form-text__file">{{invoiceForm.scyName}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">税号</span>
+                            <div class="zap-form-text__file">{{invoiceForm.scySocialCode}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">单位地址</span>
+                            <div class="zap-form-text__file">{{invoiceForm.ziaAddress}}</div>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">电话号码</span>
+                            <div class="zap-form-text__file">{{invoiceForm.ziaContactsPhone}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">开户银行</span>
+                            <div class="zap-form-text__file">{{invoiceForm.pbaiBankName}}</div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="zap-form-text">
+                            <span class="zap-form-text__label">开户账号</span>
+                            <div class="zap-form-text__file">{{invoiceForm.pbaiBankaccountId}}</div>
+                        </div>
+                    </el-col>
+                </el-row>
             </el-tab-pane>
             <!--———————————————————————————————————— 链属关系 ————————————————————————————————————————————————-->
             <el-tab-pane v-if="companyType != '03'" label="链属关系" name="Section">