src/App.vue

@@ -72,6 +72,27 @@
       </div>
     </div>
     <CenterNav />
+    <div class="center_bottom">
+      <div class="center_bottom_core">
+        <div class="core_list">
+          <div class="list_list">
+            <p>主办单位：贵州省人力资源和社会保障厅</p>
+            <p>地址：贵州省贵阳市延安中路20号</p>
+            <p>邮编：550001</p>
+          </div>
+          <div class="list_list">
+            <p>技术支持：创智和宇信息技术股份有限公司</p>
+            <p>地址：湖南省长沙市高新开发区欣盛路159号</p>
+            <p>邮编：410000</p>
+          </div>
+          <div class="list_list">
+            <p>业务咨询服务热线：0851-85837326</p>
+            <p>备案号：黔ICP备19004957号</p>
+            <p>&nbsp;</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -175,5 +196,36 @@ ul {
       }
     }
   }
+  .center_bottom {
+    display: relative;
+    width: 100%;
+    height: 200px;
+    background-color: #0e1d43;
+    .center_bottom_core {
+      width: 1182px;
+      height: 200px;
+      position: absolute;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      // background-color: yellow;
+      .core_list {
+        display: flex;
+        justify-content: space-between;
+        .list_list {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          width: 320px;
+          height: 200px;
+          p {
+            padding: 4px 0;
+            font-size: 16px;
+            color: hsla(0, 0%, 100%, 0.8);
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/components/CenterNav.vue

@@ -13,61 +13,245 @@
             <el-form
               :inline="true"
               :model="formInline"
+              ref="formInline"
               class="demo-form-inline"
             >
-              <el-form-item label="姓名" size="small ">
+              <el-form-item label="姓名" size="small " prop="name">
                 <el-input
-                  v-model="formInline.user"
+                  v-model="formInline.name"
+                  clearable
                   placeholder="请输入"
                   style="width: 90%"
                 ></el-input>
               </el-form-item>
-              <el-form-item label="证件号码" size="small ">
+              <el-form-item
+                label="证件号码"
+                size="small "
+                style="margin-left: -20px"
+                prop="idNumber"
+              >
                 <el-input
-                  v-model="formInline.user"
+                  v-model="formInline.idNumber"
+                  clearable
                   placeholder="请输入"
                   style="width: 90%"
                 ></el-input>
               </el-form-item>
-              <el-form-item label="证件编号" size="small">
+              <el-form-item
+                label="证件编号"
+                size="small"
+                style="margin-left: 63px"
+                prop="certificateNumber"
+              >
                 <el-input
-                  v-model="formInline.user"
+                  v-model="formInline.certificateNumber"
+                  clearable
                   placeholder="请输入"
                   style="width: 90%"
                 ></el-input>
               </el-form-item>
-              <el-form-item>
-                <el-button
-                  type="primary"
-                  @click="onSubmit"
-                  style="border-radius: 20px"
-                  size="medium"
-                  >搜索</el-button
+              <el-form-item style="margin-left: 50px">
+                <el-button type="primary" @click="onSubmit" round size="medium"
+                  >搜 索</el-button
+                >
+                <el-button @click="resetForm('formInline')" size="medium" round
+                  >重 置</el-button
                 >
-                <el-button type="primary" @click="onSubmit">重置</el-button>
               </el-form-item>
             </el-form>
           </div>
+          <div class="describe">
+            <el-divider content-position="left"
+              >提示：请提供姓名+证件号码或姓名+证书编号进行查询。</el-divider
+            >
+          </div>
+          <div class="core_all_top">
+            <span>证书信息</span>
+          </div>
+          <div class="form">
+            <el-table
+              class="exporttable"
+              :data="tableData"
+              border
+              v-loading="listLoading"
+              :header-cell-style="{ background: '#f0f2f5', color: '#101010' }"
+              style="width: 100%"
+              max-height="285px"
+            >
+              <template slot="empty">
+                <el-empty
+                  :image="require('../assets/download3.png')"
+                  :image-size="140"
+                ></el-empty>
+              </template>
+              <el-table-column
+                prop="professionalTitleSeries"
+                align="center"
+                label="证书系列"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="qualification"
+                align="center"
+                label="职称名称"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="certificateNumber"
+                align="center"
+                label="证书编号"
+              >
+              </el-table-column>
+              <el-table-column fixed="right" label="操作" align="center">
+                <template slot-scope="scope">
+                  <el-button
+                    @click="handleClick(scope.row)"
+                    type="text"
+                    size="small"
+                    >查看</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </div>
       </div>
     </div>
+    <!-- <el-dialog
+      title="证书详细信息"
+      :visible.sync="dialogFormVisible"
+      :width="tbWidth"
+      :close-on-click-modal="false"
+      :before-close="handleClose"
+    >
+      <div></div>
+    </el-dialog> -->
+    <el-dialog
+      title="证书详细信息"
+      :visible.sync="dialogFormVisible"
+      width="60%"
+      center
+    >
+      <span>需要注意的是内容是默认不居中的</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          @click="dialogFormVisible = false"
+          size="small"
+          round
+          type="primary"
+          >关 闭</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+var axios = require("axios");
+
 export default {
   name: "App",
   data() {
     return {
+      tableData: [
+        // {
+        //   name: "",
+        //   idNumber: "",
+        //   certificateNumber: null,
+        //   professionalTitleSeries: null,
+        //   professionalTitle: null,
+        //   qualification: null,
+        //   level: "",
+        //   qualificationTime: null,
+        //   issueTime: "",
+        //   reviewOrganization: "",
+        //   issuingAuthority: "",
+        //   declarationUnit: "",
+        //   remark: null,
+        //   idType: "",
+        //   imgUrl: null,
+        // },
+      ],
+      dialogFormVisible: false,
+      listLoading: false,
       formInline: {
-        user: "",
+        name: "冉培松",
+        idNumber: "",
+        certificateNumber: "黔高1830053000002",
       },
     };
   },
+  methods: {
+    // 查看
+    handleClick() {
+      this.dialogFormVisible = true;
+    },
+    // 搜索
+    onSubmit() {
+      this.listLoading = true;
+      // this.$notify.error({
+      //   title: "提示",
+      //   message: "请提供姓名+证件号码或姓名+证书编号进行查询",
+      //   position: "right",
+      // });
+      //接口初始化
+      var config = {
+        method: "post",
+        url: "http://122.51.110.133:8888/api/Certificate/GetCertificate",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: JSON.stringify(this.formInline),
+      };
+      //数据接口
+      let _this = this;
+      axios(config)
+        .then(function (response) {
+          _this.listLoading = false;
+          _this.tableData = response.data;
+        })
+        .catch(function (error) {
+          _this.listLoading = false;
+        });
+    },
+    // 重置
+    resetForm(formName) {
+      console.log("13123");
+      this.$refs[formName].resetFields();
+    },
+    // 关闭弹窗
+    handleClose() {
+      this.dialogFormVisible = false;
+    },
+  },
 };
 </script>
 
 <style lang="less">
+.el-table th {
+  background-color: blue;
+}
+/deep/ .el-empty__description p {
+  font-size: 14px;
+  color: #909399;
+  margin-top: -50px;
+}
+
+.el-dialog__header {
+  background: #f2f3f5;
+  text-align: center;
+  height: 14px;
+}
+.el-dialog .el-dialog__header span.el-dialog__title {
+  position: relative;
+  display: inline-block;
+  height: 14px;
+  line-height: 14px;  
+  font-weight: 700;
+  font-size: 14px;
+  margin-top: -20px;
+}
+
 #app {
   position: relative;
   min-width: 516px;
@@ -75,7 +259,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  //   height: 760px;
+  height: 730px;
   .warp_center {
     position: absolute;
     top: 40px;
@@ -83,7 +267,7 @@ export default {
     right: 0;
     margin: 0 auto;
     width: 1182px;
-    height: 660px;
+    // height: 660px;
     background-color: #236efb;
     border-radius: 8px;
     box-shadow: 0 6px 49px 0 rgba(90, 117, 168, 0.29);
@@ -102,7 +286,9 @@ export default {
     .center_down {
       display: relative;
       width: 100%;
-      height: 610px;
+      height: auto !important;
+      height: 580px;
+      min-height: 580px;
       background-color: #fff;
       border-radius: 7px;
       .core_all {
@@ -112,7 +298,7 @@ export default {
         right: 0;
         margin: 0 auto;
         width: 1130px;
-        height: 100%;
+        // height: 100%;
         // background-color: red;
         .core_all_top {
           width: 100%;
@@ -137,6 +323,9 @@ export default {
             line-height: 32px;
           }
         }
+        .exporttable {
+          border: solid 1px #e5e3e3;
+        }
       }
     }
   }

src/components/reset(默认样式).css

@@ -1,48 +0,0 @@
-html {
-    font-family: "Microsoft YaHei", serif;
-    font-size: 14px;
-}
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-p,
-blockquote,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-pre,
-fieldset,
-button,
-input,
-textarea,
-th,
-td {
-    margin: 0;
-    padding: 0;
-}
-ul,
-ol {
-    list-style: none;
-}
-/* 閲嶇疆鏂囨湰鏍煎紡鍏冪礌 */
-a {
-    text-decoration: none;
-    color: inherit;
-}
-/* 閲嶇疆琛ㄦ牸鍏冪礌 */
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-/*鍥剧墖鍧楀寲涓庡幓鎺塱e杈规*/
-img {
-    border: 0;
-}