供应商我的链属详情页样式调整

front-vue/src/views/service/rel/detailCompany.vue

@@ -1,65 +1,91 @@
 <template>
-    <el-tabs v-model="activeName" style="margin:2px">
+<div class="app-container zap-main">
+    <el-tabs v-model="activeName" class="zap-bg">
         <!--——————————————————————————————————————————基本信息————————————————————————————————————————————————————-->
         <el-tab-pane label="基本信息" name="first">
-            <el-form ref="form" :model="form" label-width="130px" :inline="true">
-                <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="scyRegisteredCapital">
-                    <el-input v-model="form.scyRegisteredCapital" disabled />
-                </el-form-item>
-                <el-form-item label="联系方式" prop="scyPhone">
-                    <el-input v-model="form.scyPhone" disabled />
-                </el-form-item>
-            </el-form>
-            <div style="margin-top: 100px; margin-left:45%">
-                <el-button type="info" @click="cancel">取消</el-button>
+            <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.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-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.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.scyPhone}}</div>
+                    </div>
+                </el-col>
+            </el-row>
+            <div style="margin-top: 100px; margin-left:45%;padding-bottom: 50px;">
+                <el-button type="plain" @click="cancel">取消</el-button>
                 <!-- <el-button type="success" @click="submitForm"
                     >提交</el-button> -->
             </div>
         </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>
-            <div style="margin-top: 100px; margin-left:45%">
-                <el-button type="info" @click="cancel">取消</el-button>
+              <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>
+            <div style="margin-top: 100px; margin-left:45%;padding-bottom: 50px;">
+                <el-button type="plain" @click="cancel">取消</el-button>
                 <!-- <el-button type="success" @click="submitForm"
                     >提交</el-button> -->
             </div>
         </el-tab-pane>
     </el-tabs>
+</div>
 </template>
+
 <script>
 import {
     companyQuery
 } from "@/api/service/company/company";
-import { getToken } from "@/utils/auth";
+import {
+    getToken
+} from "@/utils/auth";
 export default {
     name: "detailComPany",
     components: {},
@@ -130,10 +156,10 @@ export default {
         },
         //取消按钮
         cancel() {
-                (this.form.scyIndustry = null),
-                (this.form.scyScale = null),
-                (this.form.scyOrganization = null),
-                (this.form.scyManager = null);
+            (this.form.scyIndustry = null),
+            (this.form.scyScale = null),
+            (this.form.scyOrganization = null),
+            (this.form.scyManager = null);
             this.$store.dispatch("tagsView/delView", this.$route);
             this.$router.go(-1);
         },
@@ -166,7 +192,7 @@ export default {
             var a = document.createElement('a');
             var event = new MouseEvent('click');
             a.download = file.name;
-            a.href = file.url+'/'+getToken();
+            a.href = file.url + '/' + getToken();
             a.dispatchEvent(event);
             console.log(file)
         },
@@ -193,10 +219,10 @@ export default {
                 row.launchScrStatus
             );
         },
-        scyScaleFormat(scyScale){
+        scyScaleFormat(scyScale) {
             return this.selectDictLabel(this.scyScaleOptions, scyScale);
         },
-        scyOrganizationFormat(scyOrganization){
+        scyOrganizationFormat(scyOrganization) {
             return this.selectDictLabel(this.scyOrganizationOptions, scyOrganization);
         },
 
@@ -404,12 +430,14 @@ export default {
     },
 };
 </script>
+
 <style lang="scss">
 .uoloadSty .el-upload--picture-card {
     width: 110px;
     height: 110px;
     line-height: 110px;
 }
+
 .disUoloadSty .el-upload--picture-card {
     display: none;
 }