优化页面

src/views/free/selfEvaluation/index.vue

@@ -591,6 +591,5 @@ export default {
 .form{
   margin-top: 20px;
   font-size: 14px;
-
 }
 </style>

src/views/gxdpf/index.vue

 <template>
-<div class="gxdpf-box">
+  <div class="gxdpf-box">
     <div class="gxdpf-box-1">
       <div class="gxdpf-content">
         <div class="gxdpf-title">党员扶贫项目监管监督</div>
@@ -10,37 +10,38 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px;" 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="date" label="日期" width="300" >
-                      </el-table-column>
-                      <el-table-column prop="title" label="标题" width="300" >
-                      </el-table-column>
-                      <el-table-column prop="address" label="简介" width="350" >
-                      </el-table-column>
-                      <el-table-column label="查看" width="300">
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px;"
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="date" label="日期" width="300" />
+            <el-table-column prop="title" label="标题" width="300" />
+            <el-table-column prop="address" label="简介" width="350" />
+            <el-table-column label="查看" width="306">
               <template slot-scope="scope">
-                          <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
+                <el-button type="text" size="small" @click="handleClick(scope.row)">查看详情</el-button>
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
         </div>
         <div class="gxdpf-form">
-               <div class="gxdpf-formHoad" >
+          <div class="gxdpf-formHoad">
             <h4><span>搜索条件</span></h4>
           </div>
           <div class="gxdpf-input-box">
@@ -52,12 +53,12 @@
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>
-                     <el-button type="primary" size="mini" @click="queryRegion()" >主要按钮</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">主要按钮</el-button>
               </li>
             </ul>
 
@@ -67,8 +68,7 @@
         <div class="gxdpf-form">
           <div class="gxdpf-formHoad">
             <h4><span>警告通知</span></h4>
-                   <div style="position:absolute;top:10px;right:25px;z-index: 999;">
-                   </div>
+            <div style="position:absolute;top:10px;right:25px;z-index: 999;" />
           </div>
           <div class="data-processing">
             <div class="data">
@@ -92,67 +92,63 @@
 
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'gxdpf',
+export default {
+  name: 'Gxdpf',
   data() {
     return {
       tableData: [{
         date: '2016-05-02',
         title: '试点平台通知',
-            address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
+        address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
 
       }, {
         date: '2016-05-04',
         title: '试点平台通知',
-            address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
+        address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
 
       }, {
         date: '2016-05-01',
         title: '试点平台通知',
-            address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
+        address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
 
       }, {
         date: '2016-05-03',
         title: '试点平台通知',
-            address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
+        address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
 
       },
       {
         date: '2016-05-03',
         title: '试点平台通知',
-            address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
+        address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
 
       },
       {
         date: '2016-05-03',
         title: '试点平台通知',
-            address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
+        address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
 
       },
       {
         date: '2016-05-03',
         title: '试点平台通知',
-            address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
+        address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
 
-          },{
+      }, {
         date: '2016-05-03',
         title: '试点平台通知',
-            address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知',
+        address: '自治区残联办公室关于做好广西残疾人事业发展项目管理平台试点工作的通知'
 
       }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -169,64 +165,54 @@
         value: '选项5',
         label: '南宁市青秀区'
       }],
-        value: '',
-        };
+      value: ''
+    }
   },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center;"
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center;'
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
-      
     handleClick(row) {
-        console.log(row);
+      console.log(row)
       this.$alert('这是一段内容', '标题名称', {
         confirmButtonText: '确定',
         callback: action => {
           this.$message({
             type: 'info',
-              message: `action: ${ action }`
-            });
+            message: `action: ${action}`
+          })
         }
-        });
+      })
     },
 
-      exportFile(){
-        console.log('11');
-        
+    exportFile() {
+      console.log('11')
     },
 
-      queryRegion(){
-        console.log('查询');
-        
+    queryRegion() {
+      console.log('查询')
     }
 
-
-
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
     .gxdpf-box{
     position: relative;
     margin: 0;
@@ -234,7 +220,6 @@
     }
     .gxdpf-box-1{
     width :100%;
-    background-color :#ccc;
     padding: 8px 20px 50px 20px;
 
     }
@@ -243,7 +228,8 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    border-radius: 5px;
     }
     .gxdpf-title{
     padding: 15px 0;
@@ -251,19 +237,20 @@
     border-bottom: 1px solid #ccc;
     }
     .gxdpf-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
         margin: 25px 12px;
+        border-radius: 5px;
     }
     .gxdpf-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .gxdpf-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -273,8 +260,7 @@
         z-index: 11;
     }
     .gxdpf-input-box{
-        width:360px; 
-        height :30px;
+        height :60px;
         margin: 20px;
         position: relative;
 

src/views/money/index.vue

 <template>
-<div class="money-box">
+  <div class="money-box">
     <div class="money-box-1">
       <div class="money-content">
-            <div class="money-title">拨款处理</div>
-
 
         <div class="money-form">
-               <div class="money-formHoad" >
+          <div class="money-formHoad">
             <h4><span>搜索条件</span></h4>
           </div>
           <div class="money-input-box">
@@ -19,43 +17,41 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
             </ul>
 
-                 <div style="clear:both;  width: 1210px; padding-top: 10px;  margin:10px 0; opacity: 0.5;">
-                 <hr>
-                 </div>
+            <br>
+            <br>
 
             <ul>
               <li>亲属姓名:</li>
               <li>
                 <el-input
-                          placeholder="请输入名字"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入名字"
+                  clearable
+                />
               </li>
               <li>每页显示</li>
               <li>
                 <el-pagination
-                          @size-change="handleSizeChange" 
-                          @current-change="handleCurrentChange" 
                   :current-page="currentPage"
                   :page-sizes="[5,10,20,30]"
                   :page-size="pageSize"
                   layout="sizes"
-                          :total="tableData.length" >
-                      </el-pagination>
+                  :total="tableData.length"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                />
               </li>
               <li>
-                     <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
-
           </div>
         </div>
 
@@ -67,132 +63,121 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                     <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column type="selection" width="60">
-                      </el-table-column>
-                      <el-table-column prop="id" label="序号" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="name" label="姓名" width="100" >
-                      </el-table-column>
-                      <el-table-column prop="age" label="年龄" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="gender" label="性别" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="telephone" label="手机号" width="150" >
-                      </el-table-column>
-                      <el-table-column prop="address" label="地址" width="300" >
-                      </el-table-column>
-                      <el-table-column prop="grade" label="伤残等级" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="state" label="状态" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="apply" label="申请时间" width="110" >
-                      </el-table-column>
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column type="selection" width="60" />
+            <el-table-column prop="id" label="序号" width="90" />
+            <el-table-column prop="name" label="姓名" width="100" />
+            <el-table-column prop="age" label="年龄" width="90" />
+            <el-table-column prop="gender" label="性别" width="90" />
+            <el-table-column prop="telephone" label="手机号" width="150" />
+            <el-table-column prop="address" label="地址" width="300" />
+            <el-table-column prop="grade" label="伤残等级" width="90" />
+            <el-table-column prop="state" label="状态" width="90" />
+            <el-table-column prop="apply" label="申请时间" width="110" />
             <el-table-column label="操作" width="80">
               <template slot-scope="scope">
-                          <el-button @click="handleClick(scope.row)" type="text" size="small">拨款</el-button>
+                <el-button type="text" size="small" @click="handleClick(scope.row)">拨款</el-button>
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
 
-
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'money',
+export default {
+  name: 'Money',
   data() {
     return {
       tableData: [{
         id: '1',
         name: '王小虎',
-            age:'30',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            gender:'男',
-            grade:'2级',
-            state:'正常',
-            apply:'2020-01-02',
-          },{
+        age: '30',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        gender: '男',
+        grade: '2级',
+        state: '正常',
+        apply: '2020-01-02'
+      }, {
         id: '2',
         name: '王小虎',
-            age:'30',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            gender:'男',
-            grade:'2级',
-            state:'正常',
-            apply:'2020-01-02',
-          },{
+        age: '30',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        gender: '男',
+        grade: '2级',
+        state: '正常',
+        apply: '2020-01-02'
+      }, {
         id: '3',
         name: '王小虎',
-            age:'30',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            gender:'男',
-            grade:'2级',
-            state:'正常',
-            apply:'2020-01-02',
-          },{
+        age: '30',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        gender: '男',
+        grade: '2级',
+        state: '正常',
+        apply: '2020-01-02'
+      }, {
         id: '4',
         name: '王小虎',
-            age:'30',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            gender:'男',
-            grade:'2级',
-            state:'正常',
-            apply:'2020-01-02',
-          },{
+        age: '30',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        gender: '男',
+        grade: '2级',
+        state: '正常',
+        apply: '2020-01-02'
+      }, {
         id: '5',
         name: '王小虎',
-            age:'30',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            gender:'男',
-            grade:'2级',
-            state:'正常',
-            apply:'2020-01-02',
-          },{
+        age: '30',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        gender: '男',
+        grade: '2级',
+        state: '正常',
+        apply: '2020-01-02'
+      }, {
         id: '6',
         name: '王小虎',
-            age:'30',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            gender:'男',
-            grade:'2级',
-            state:'正常',
-            apply:'2020-01-02',
-          },], 
+        age: '30',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        gender: '男',
+        grade: '2级',
+        state: '正常',
+        apply: '2020-01-02'
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -210,7 +195,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -232,48 +216,39 @@
       input1: '',
       input2: '',
 
-        value1: false,
+      value1: false
 
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center;"
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center;'
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
+    exportFile() {
+      console.log('11')
+    }
 
-
-
-      exportFile(){
-        console.log('11');
-        
-      },
-
-
-
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
+
     .money-box{
     position: relative;
 
@@ -291,28 +266,25 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .money-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
     }
+
     .money-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
         margin: 25px 12px;
     }
     .money-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .money-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -323,7 +295,7 @@
     }
     .money-input-box{
         width:100%;
-        height :90px;
+        height :110px;
         margin: 20px;
 
     }

src/views/partymember/index.vue

 <template>
-<div class="partymember-box">
+  <div class="partymember-box">
     <div class="partymember-box-1">
       <div class="partymember-content">
-            <div class="partymember-title">帮扶党员登记
-                 <p style="margin: 5px 25px; font-size: 12px;">党员干部信息查询</p>
-            </div>
-
 
         <div class="partymember-form">
-               <div class="partymember-formHoad" >
+          <div class="partymember-formHoad">
             <h4><span>搜索条件</span></h4>
           </div>
           <div class="partymember-input-box">
@@ -21,44 +17,42 @@
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
 
             </ul>
 
-                 <div style="clear:both;  width: 1210px; padding-top: 10px;  margin:10px 0; opacity: 0.5;">
-                 <hr>
-                 </div>
+            <br>
+            <br>
 
             <ul>
               <li>帮扶党员:</li>
               <li>
                 <el-input
-                          placeholder="请输入帮扶党员干部名字"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入帮扶党员干部名字"
+                  clearable
+                />
               </li>
               <li>每页显示</li>
               <li>
                 <el-pagination
-                          @size-change="handleSizeChange" 
-                          @current-change="handleCurrentChange" 
                   :current-page="currentPage"
                   :page-sizes="[5,10,20,30]"
                   :page-size="pageSize"
                   layout="sizes"
-                          :total="tableData.length" >
-                      </el-pagination>
+                  :total="tableData.length"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                />
               </li>
               <li>
-                     <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
-
           </div>
         </div>
 
@@ -71,111 +65,104 @@
             </div>
           </div>
           <!-- 表格 -->
-                    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="id" label="序号" width="100" >
-                      </el-table-column>
-                      <el-table-column prop="name" label="姓名" width="120" >
-                      </el-table-column>
-                      <el-table-column prop="telephone" label="手机号" width="200" >
-                      </el-table-column>
-                      <el-table-column prop="address" label="地址" width="380" >
-                      </el-table-column>
-                      <el-table-column prop="company" label="单位" width="150" >
-                      </el-table-column>
-                      <el-table-column prop="state" label="状态" width="150" >
-                      </el-table-column>
-                      <el-table-column label="查看" width="150">
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="id" label="序号" width="100" />
+            <el-table-column prop="name" label="姓名" width="120" />
+            <el-table-column prop="telephone" label="手机号" width="200" />
+            <el-table-column prop="address" label="地址" width="380" />
+            <el-table-column prop="company" label="单位" width="150" />
+            <el-table-column prop="state" label="状态" width="150" />
+            <el-table-column label="查看" width="156">
               <template slot-scope="scope">
-                          <el-button @click="handleClick(scope.row)"  size="small" icon="el-icon-edit"  circle > </el-button>
+                <el-button size="small" icon="el-icon-edit" circle @click="handleClick(scope.row)" />
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
 
-
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'people',
+export default {
+  name: 'People',
   data() {
     return {
       tableData: [{
         id: '1',
         name: '铁蛋',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            company:'麻垌镇容荔村',
-            state:'正常',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        company: '麻垌镇容荔村',
+        state: '正常'
       },
       {
         id: '2',
         name: '铁蛋',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            company:'麻垌镇容荔村',
-            state:'正常',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        company: '麻垌镇容荔村',
+        state: '正常'
       },
       {
         id: '3',
         name: '铁蛋',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            company:'麻垌镇容荔村',
-            state:'正常',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        company: '麻垌镇容荔村',
+        state: '正常'
       },
       {
         id: '4',
         name: '铁蛋',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            company:'麻垌镇容荔村',
-            state:'正常',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        company: '麻垌镇容荔村',
+        state: '正常'
       },
       {
         id: '5',
         name: '铁蛋',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            company:'麻垌镇容荔村',
-            state:'正常',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        company: '麻垌镇容荔村',
+        state: '正常'
       },
       {
         id: '6',
         name: '铁蛋',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            company:'麻垌镇容荔村',
-            state:'正常',
-          },], 
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        company: '麻垌镇容荔村',
+        state: '正常'
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -193,53 +180,44 @@
         label: '南宁市青秀区'
       }],
 
-
-        
       value: '',
       radio: '1',
       input1: '',
       input2: '',
 
-        value1: false,
+      value1: false
 
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center;"
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center;'
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
+    exportFile() {
+      console.log('11')
+    }
 
-
-      exportFile(){
-        console.log('11');
-        
-      },
-
-
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
+
     .partymember-box{
     position: relative;
 
@@ -248,37 +226,31 @@
     }
     .partymember-box-1{
     width :100%;
-    
     padding: 8px 20px 50px 20px;
-    
     }
 
     .partymember-content{
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .partymember-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
     }
     .partymember-form{
-        border: 1px solid #ccc;
+       box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
         margin: 25px 12px;
     }
     .partymember-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .partymember-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -289,7 +261,7 @@
     }
     .partymember-input-box{
         width:100%;
-        height :90px;
+        height :110px;
         margin: 20px;
 
     }

src/views/people/index.vue

 <template>
-<div class="people-box">
+  <div class="people-box">
     <div class="people-box-1">
       <div class="people-content">
-            <div class="people-title">帮扶对象管理</div>
-
 
         <div class="people-form">
-               <div class="people-formHoad" >
+          <div class="people-formHoad">
             <h4><span>搜索条件</span></h4>
           </div>
           <div class="people-input-box">
@@ -19,8 +17,8 @@
                     v-for="item in options1"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>地区:</li>
@@ -30,51 +28,49 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
             </ul>
 
-                 <div style="clear:both;  width: 1210px; padding-top: 10px;  margin:10px 0; opacity: 0.5;">
-                 <hr>
-                 </div>
+            <br>
+            <br>
 
             <ul>
               <li>帮扶对象:</li>
               <li>
                 <el-input
-                          placeholder="请输入内容"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入内容"
+                  clearable
+                />
               </li>
               <li>帮扶党员:</li>
               <li>
                 <el-input
-                          placeholder="请输入内容"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入内容"
+                  clearable
+                />
               </li>
               <li>每页显示</li>
               <li>
                 <el-pagination
-                          @size-change="handleSizeChange" 
-                          @current-change="handleCurrentChange" 
                   :current-page="currentPage"
                   :page-sizes="[5,10,20,30]"
                   :page-size="pageSize"
                   layout="sizes"
-                          :total="tableData.length" >
-                      </el-pagination>
+                  :total="tableData.length"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                />
               </li>
               <li>
-                     <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
-
           </div>
         </div>
 
@@ -85,144 +81,135 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="id" label="序号" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="name" label="姓名" width="120" >
-                      </el-table-column>
-                      <el-table-column prop="age" label="年龄" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="gender" label="性别" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="telephone" label="手机号" width="150" >
-                      </el-table-column>
-                      <el-table-column prop="address" label="地址" width="350" >
-                      </el-table-column>
-                      <el-table-column prop="category" label="伤残类别" width="120" >
-                      </el-table-column>
-                      <el-table-column prop="grade" label="伤残等级" width="120" >
-                      </el-table-column>
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="id" label="序号" width="90" />
+            <el-table-column prop="name" label="姓名" width="120" />
+            <el-table-column prop="age" label="年龄" width="90" />
+            <el-table-column prop="gender" label="性别" width="90" />
+            <el-table-column prop="telephone" label="手机号" width="150" />
+            <el-table-column prop="address" label="地址" width="350" />
+            <el-table-column prop="category" label="伤残类别" width="120" />
+            <el-table-column prop="grade" label="伤残等级" width="120" />
             <el-table-column prop="menusstate" label="选择" width="120">
               <template slot-scope="scope">
                 <el-switch
+                  v-model="scope.row.menusstate"
                   on-color="#5B7BFA"
                   off-color="#dadde5"
-                            v-model="scope.row.menusstate" 
                   :plain="true"
-                            @click="handleClick(scope.row)">
-                          </el-switch>
+                  @click="handleClick(scope.row)"
+                />
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
 
-
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'people',
+export default {
+  name: 'People',
   data() {
     return {
       tableData: [{
         id: '1',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            category:'肢体',
-            grade:'2级',
-             menusstate:true,
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        category: '肢体',
+        grade: '2级',
+        menusstate: true
+      }, {
         id: '2',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            category:'肢体',
-            grade:'2级',
-             menusstate:false,
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        category: '肢体',
+        grade: '2级',
+        menusstate: false
+      }, {
         id: '3',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            category:'肢体',
-            grade:'2级',
-             menusstate:true,
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        category: '肢体',
+        grade: '2级',
+        menusstate: true
+      }, {
         id: '4',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            category:'肢体',
-            grade:'2级',
-             menusstate:false,
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        category: '肢体',
+        grade: '2级',
+        menusstate: false
+      }, {
         id: '5',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            category:'肢体',
-            grade:'2级',
-             menusstate:false,
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        category: '肢体',
+        grade: '2级',
+        menusstate: false
+      }, {
         id: '6',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            category:'肢体',
-            grade:'2级',
-             menusstate:false,
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        category: '肢体',
+        grade: '2级',
+        menusstate: false
+      }, {
         id: '7',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            category:'肢体',
-            grade:'2级',
-             menusstate:false,
-          },], 
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        category: '肢体',
+        grade: '2级',
+        menusstate: false
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -240,7 +227,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -262,55 +248,43 @@
       input1: '',
       input2: '',
 
-        value1: false,
+      value1: false
 
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center;"
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center;'
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
-      
-
-      exportFile(){
-        console.log('11');
-        
+    exportFile() {
+      console.log('11')
     },
 
-      
-
-      handleClick(){
+    handleClick() {
 
     }
 
-
-
-
-
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
+
     .people-box{
     position: relative;
 
@@ -328,28 +302,25 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .people-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    border-radius: 5px;
     }
+
     .people-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
         margin: 25px 12px;
     }
     .people-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom:1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .people-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -360,7 +331,7 @@
     }
     .people-input-box{
         width:100%;
-        height :90px;
+        height :110px;
         margin: 20px;
 
     }

src/views/publicly/index.vue

 <template>
-<div class="publicly-box">
+  <div class="publicly-box">
     <div class="publicly-box-1">
       <div class="publicly-content">
-            <div class="publicly-title">扶残公示
-                 <p style="margin: 5px 25px; font-size: 12px;">扶残公示</p>
-            </div>
-
 
         <div class="publicly-form">
-               <div class="publicly-formHoad" >
+          <div class="publicly-formHoad">
             <h4><span>搜索条件</span></h4>
             <div style="position:absolute; top:10px; right:25px;z-index: 1;">
-                          <el-button type="primary"  @click="queryRegion()" >新增项目</el-button>
+              <el-button type="primary" @click="queryRegion()">新增项目</el-button>
             </div>
 
           </div>
@@ -25,8 +21,8 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>年份:</li>
@@ -36,43 +32,41 @@
                     v-for="item in options1"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
             </ul>
 
-                 <div style="clear:both;  width: 1210px; padding-top: 10px;  margin:10px 0; opacity: 0.5;">
-                 <hr>
-                 </div>
+            <br>
+            <br>
 
             <ul>
               <li>名字:</li>
               <li>
                 <el-input
-                          placeholder="请输入名字"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入名字"
+                  clearable
+                />
               </li>
               <li>每页显示</li>
               <li>
                 <el-pagination
-                          @size-change="handleSizeChange" 
-                          @current-change="handleCurrentChange" 
                   :current-page="currentPage"
                   :page-sizes="[5,10,20,30]"
                   :page-size="pageSize"
                   layout="sizes"
-                          :total="tableData.length" >
-                      </el-pagination>
+                  :total="tableData.length"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                />
               </li>
               <li>
-                     <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
-
           </div>
         </div>
 
@@ -83,114 +77,106 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="id" label="序号" width="130" >
-                      </el-table-column>
-                      <el-table-column prop="name" label="姓名" width="130" >
-                      </el-table-column>
-                      <el-table-column prop="gender" label="性别" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="telephone" label="手机号" width="200" >
-                      </el-table-column>
-                      <el-table-column prop="address" label="地址" width="380" >
-                      </el-table-column>
-                      <el-table-column prop="grade" label="伤残等级" width="150" >
-                      </el-table-column>
-                      <el-table-column prop="apply" label="申请时间" width="150" >
-                      </el-table-column>
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="id" label="序号" width="130" />
+            <el-table-column prop="name" label="姓名" width="130" />
+            <el-table-column prop="gender" label="性别" width="110" />
+            <el-table-column prop="telephone" label="手机号" width="200" />
+            <el-table-column prop="address" label="地址" width="380" />
+            <el-table-column prop="grade" label="伤残等级" width="150" />
+            <el-table-column prop="apply" label="申请时间" width="156" />
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
 
-
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'publicly',
+export default {
+  name: 'Publicly',
   data() {
     return {
       tableData: [{
         id: '1',
         name: '王小虎',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-            apply:'2020-01-02',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级',
+        apply: '2020-01-02'
       },
       {
         id: '2',
         name: '王小虎',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-            apply:'2020-01-02',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级',
+        apply: '2020-01-02'
       },
       {
         id: '3',
         name: '王小虎',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-            apply:'2020-01-02',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级',
+        apply: '2020-01-02'
       },
       {
         id: '4',
         name: '王小虎',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-            apply:'2020-01-02',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级',
+        apply: '2020-01-02'
       },
       {
         id: '5',
         name: '王小虎',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-            apply:'2020-01-02',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级',
+        apply: '2020-01-02'
       },
       {
         id: '6',
         name: '王小虎',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-            apply:'2020-01-02',
-          },], 
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级',
+        apply: '2020-01-02'
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -208,7 +194,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -230,50 +215,39 @@
       input1: '',
       input2: '',
 
-        value1: false,
+      value1: false
 
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center;"
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center;'
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
+    exportFile() {
+      console.log('11')
+    }
 
-
-
-      exportFile(){
-        console.log('11');
-        
-      },
-
-      
-
-
-
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
+
     .publicly-box{
     position: relative;
 
@@ -291,28 +265,25 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .publicly-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
     }
+
     .publicly-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
         margin: 25px 12px;
     }
     .publicly-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .publicly-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -323,7 +294,7 @@
     }
     .publicly-input-box{
         width:100%;
-        height :90px;
+        height :110px;
         margin: 20px;
 
     }

src/views/query/index.vue

 <template>
-<div class="query-box">
+  <div class="query-box">
     <div class="query-box-1">
       <div class="query-content">
-            <div class="query-title">项目信息查询
-              <p style="margin: 5px 25px; font-size: 12px;">综合信息查询</p>
-            </div>
-
 
         <div class="query-form">
-               <div class="query-formHoad" >
+          <div class="query-formHoad">
             <h4><span>搜索条件</span></h4>
           </div>
           <div class="query-input-box">
@@ -20,8 +16,8 @@
                     v-for="item in options1"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>地区:</li>
@@ -31,47 +27,46 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
             </ul>
 
-                 <div style="clear:both;  width: 1210px; padding-top: 10px;  margin:10px 0; opacity: 0.5;">
-                 <hr>
-                 </div>
+            <br>
+            <br>
 
             <ul>
               <li>帮扶对象:</li>
               <li>
                 <el-input
-                          placeholder="请输入内容"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入内容"
+                  clearable
+                />
               </li>
               <li>帮扶党员:</li>
               <li>
                 <el-input
-                          placeholder="请输入内容"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入内容"
+                  clearable
+                />
               </li>
               <li>每页显示</li>
               <li>
                 <el-pagination
-                          @size-change="handleSizeChange" 
-                          @current-change="handleCurrentChange" 
                   :current-page="currentPage"
                   :page-sizes="[5,10,20,30]"
                   :page-size="pageSize"
                   layout="sizes"
-                          :total="tableData.length" >
-                      </el-pagination>
+                  :total="tableData.length"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                />
               </li>
               <li>
-                     <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
@@ -86,161 +81,152 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="id" label="序号" width="130" >
-                      </el-table-column>
-                      <el-table-column prop="name" label="姓名" width="140" >
-                      </el-table-column>
-                      <el-table-column prop="age" label="年龄" width="130" >
-                      </el-table-column>
-                      <el-table-column prop="gender" label="性别" width="130" >
-                      </el-table-column>
-                      <el-table-column prop="telephone" label="手机号" width="160" >
-                      </el-table-column>
-                      <el-table-column prop="grade" label="伤残等级" width="160" >
-                      </el-table-column>
-                      <el-table-column prop="help" label="帮扶党员" width="150" >
-                      </el-table-column>
-                      <el-table-column prop="state" label="状态" width="140" >
-                      </el-table-column>
-                      <el-table-column label="操作" width="110">
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="id" label="序号" width="130" />
+            <el-table-column prop="name" label="姓名" width="140" />
+            <el-table-column prop="age" label="年龄" width="130" />
+            <el-table-column prop="gender" label="性别" width="130" />
+            <el-table-column prop="telephone" label="手机号" width="160" />
+            <el-table-column prop="grade" label="伤残等级" width="160" />
+            <el-table-column prop="help" label="帮扶党员" width="150" />
+            <el-table-column prop="state" label="状态" width="140" />
+            <el-table-column label="操作" width="116">
               <template slot-scope="scope">
-                            <el-button @click="handleClick(scope.row)"  size="small" icon="el-icon-search"  circle > </el-button>
+                <el-button size="small" icon="el-icon-search" circle @click="handleClick(scope.row)" />
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
-              <div class="project-status1"  v-if="play" >
+        <div v-if="play" class="project-status1">
           <div class="project-box1"><span>项目状态</span></div>
           <div style="margin: 30px 0px;">
             <el-steps :active="2" align-center>
-                  <el-step title="公示" description="步骤1"></el-step>
-                  <el-step title="登记" description="步骤2"></el-step>
-                  <el-step title="拨款" description="步骤3"></el-step>
-                  <el-step title="完成" description="步骤4"></el-step>
+              <el-step title="公示" description="步骤1" />
+              <el-step title="登记" description="步骤2" />
+              <el-step title="拨款" description="步骤3" />
+              <el-step title="完成" description="步骤4" />
             </el-steps>
           </div>
         </div>
 
-
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'query',
+export default {
+  name: 'Query',
   data() {
     return {
       tableData: [{
         id: '1',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            grade:'2级',
-            help:'老李',
-            state:'已登记',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        grade: '2级',
+        help: '老李',
+        state: '已登记'
 
       }, {
         id: '2',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            grade:'2级',
-            help:'老李',
-            state:'已登记',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        grade: '2级',
+        help: '老李',
+        state: '已登记'
 
       }, {
         id: '3',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            grade:'2级',
-            help:'老李',
-            state:'已登记',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        grade: '2级',
+        help: '老李',
+        state: '已登记'
       }, {
         id: '4',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            grade:'2级',
-            help:'老李',
-            state:'已登记',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        grade: '2级',
+        help: '老李',
+        state: '已登记'
 
       },
       {
         id: '5',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            grade:'2级',
-            help:'老李',
-            state:'已登记',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        grade: '2级',
+        help: '老李',
+        state: '已登记'
 
       },
       {
         id: '6',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            grade:'2级',
-            help:'老李',
-            state:'已登记',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        grade: '2级',
+        help: '老李',
+        state: '已登记'
 
       },
       {
         id: '7',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            grade:'2级',
-            help:'老李',
-            state:'已登记',
-           
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        grade: '2级',
+        help: '老李',
+        state: '已登记'
+
+      }, {
         id: '8',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            grade:'2级',
-            help:'老李',
-            state:'已登记',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        grade: '2级',
+        help: '老李',
+        state: '已登记'
 
       }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -258,7 +244,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -276,7 +261,7 @@
         label: '2016'
       }],
       value: '',
-        play:false,
+      play: false,
       input1: '',
       input2: '',
 
@@ -297,51 +282,41 @@
         }
       }
 
-        
-      };},
-
-      
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center;"
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center;'
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
-
-
-      exportFile(){
-        console.log('11');
-        
+    exportFile() {
+      console.log('11')
     },
 
-      handleClick(){
-           this.play = !this.play ;
+    handleClick() {
+      this.play = !this.play
     }
 
-
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
+
     .query-box{
     position: relative;
 
@@ -350,7 +325,6 @@
     }
     .query-box-1{
     width :100%;
-    
     padding: 8px 20px 50px 20px;
 
     }
@@ -359,28 +333,24 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .query-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    border-radius: 5px;
     }
     .query-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
         margin: 25px 12px;
+        border-radius: 5px;
     }
     .query-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .query-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -391,41 +361,29 @@
     }
     .query-input-box{
         width:100%;
-        height :90px;
+        height:100px;
         margin: 20px;
 
     }
     .query-input-box ul li{
       float: left;
-      margin: 3px;
+      margin-left: 3px;
       line-height: 30px;
       list-style:none;
     }
-    .query-input-box ul{
-      height: 30px; 
-      margin: 5px 0;
-    }
-    .border-bottom{
-      border-bottom: 1px solid #ccc; 
-    } 
-    .query-input-box-1{ 
-       position: relative;
-       height: 45px; 
-       width:977px;
-       margin: 10px 0;
-    }
     .project-status1{
       margin: 20px 12px;
       width: 1255px;
       height: 200px;
-      border: 1px solid #ccc;
+      padding-top: 10px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
       // display: none;
     }
     .project-box1{
       margin: 20px;
       border-bottom: 1px solid #ccc;
       height: 40px;
-      
     }
 
 </style>

src/views/register/index.vue

 <template>
-<div class="register-box">
+  <div class="register-box">
     <div class="register-box-1">
       <div class="register-content">
-            <div class="register-title">项目登记
-                 <p style="margin: 5px 25px; font-size: 12px;">项目登记</p>
-            </div>
-
 
         <div class="register-form">
-               <div class="register-formHoad" >
+          <div class="register-formHoad">
             <h4><span>搜索条件</span></h4>
 
-
           </div>
           <div class="register-input-box">
 
@@ -23,43 +18,41 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
             </ul>
 
-                 <div style="clear:both;  width: 1210px; padding-top: 10px;  margin:10px 0; opacity: 0.5; ">
-                 <hr>
-                 </div>
+            <br>
+            <br>
 
             <ul>
               <li>名字:</li>
               <li>
                 <el-input
-                          placeholder="请输入名字"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入名字"
+                  clearable
+                />
               </li>
               <li>每页显示</li>
               <li>
                 <el-pagination
-                          @size-change="handleSizeChange" 
-                          @current-change="handleCurrentChange" 
                   :current-page="currentPage"
                   :page-sizes="[5,10,20,30]"
                   :page-size="pageSize"
                   layout="sizes"
-                          :total="tableData.length" >
-                      </el-pagination>
+                  :total="tableData.length"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                />
               </li>
               <li>
-                     <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
-
           </div>
         </div>
 
@@ -70,117 +63,109 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                     <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="id" label="序号" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="name" label="姓名" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="age" label="年龄" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="gender" label="性别" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="telephone" label="手机号" width="180" >
-                      </el-table-column>
-                      <el-table-column prop="address" label="地址" width="350" >
-                      </el-table-column>
-                      <el-table-column prop="grade" label="伤残等级" width="150" >
-                      </el-table-column>
-                      <el-table-column label="操作" width="130">
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="id" label="序号" width="110" />
+            <el-table-column prop="name" label="姓名" width="110" />
+            <el-table-column prop="age" label="年龄" width="110" />
+            <el-table-column prop="gender" label="性别" width="110" />
+            <el-table-column prop="telephone" label="手机号" width="180" />
+            <el-table-column prop="address" label="地址" width="350" />
+            <el-table-column prop="grade" label="伤残等级" width="150" />
+            <el-table-column label="操作" width="136">
               <template slot-scope="scope">
-                          <el-button @click="handleClick(scope.row)"  size="small" icon="el-icon-edit"  circle > </el-button>
+                <el-button size="small" icon="el-icon-edit" circle @click="handleClick(scope.row)" />
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
 
-
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'register',
+export default {
+  name: 'Register',
   data() {
     return {
       tableData: [{
         id: '1',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级'
+      }, {
         id: '2',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级'
       },
       {
         id: '3',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级'
       },
       {
         id: '4',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级'
       },
       {
         id: '5',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-          },{
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级'
+      }, {
         id: '6',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            telephone:'19857846724',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            grade:'2级',
-          },], 
+        age: '30',
+        gender: '男',
+        telephone: '19857846724',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        grade: '2级'
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -198,7 +183,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -220,49 +204,38 @@
       input1: '',
       input2: '',
 
-        value1: false,
+      value1: false
 
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center;"
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center;'
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
+    exportFile() {
+      console.log('11')
+    }
 
-
-      exportFile(){
-        console.log('11');
-        
-      },
-
-      
-
-
-
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
     .register-box{
     position: relative;
 
@@ -280,28 +253,25 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .register-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
     }
+
     .register-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
         margin: 25px 12px;
     }
     .register-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .register-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -312,7 +282,7 @@
     }
     .register-input-box{
         width:100%;
-        height :90px;
+        height :110px;
         margin: 20px;
 
     }

src/views/registerList/index.vue

 <template>
-<div class="registerList-box">
+  <div class="registerList-box">
     <div class="registerList-box-1">
       <div class="registerList-content">
-            <div class="registerList-title">登记列表
-                 <p style="margin: 5px 25px; font-size: 12px;">登记信息</p>
-            </div>
-
 
         <div class="registerList-form">
-               <div class="registerList-formHoad" >
+          <div class="registerList-formHoad">
             <h4><span>搜索条件</span></h4>
 
-
           </div>
           <div class="registerList-input-box">
 
@@ -23,43 +18,41 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
             </ul>
 
-                 <div style="clear:both;  width: 1210px; padding-top: 10px;  margin:10px 0; opacity: 0.5;">
-                 <hr>
-                 </div>
+            <br>
+            <br>
 
             <ul>
               <li>亲属姓名:</li>
               <li>
                 <el-input
-                          placeholder="请输入名字"
                   v-model="input1"
-                          clearable>
-                        </el-input>
+                  placeholder="请输入名字"
+                  clearable
+                />
               </li>
               <li>每页显示</li>
               <li>
                 <el-pagination
-                          @size-change="handleSizeChange" 
-                          @current-change="handleCurrentChange" 
                   :current-page="currentPage"
                   :page-sizes="[5,10,20,30]"
                   :page-size="pageSize"
                   layout="sizes"
-                          :total="tableData.length" >
-                      </el-pagination>
+                  :total="tableData.length"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                />
               </li>
               <li>
-                     <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
-
           </div>
         </div>
 
@@ -70,106 +63,99 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                     <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="id" label="序号" width="180" >
-                      </el-table-column>
-                      <el-table-column prop="name" label="姓名" width="180" >
-                      </el-table-column>
-                      <el-table-column prop="age" label="年龄" width="180" >
-                      </el-table-column>
-                      <el-table-column prop="gender" label="性别" width="180" >
-                      </el-table-column>
-                      <el-table-column prop="grade" label="伤残等级" width="180" >
-                      </el-table-column>
-                      <el-table-column prop="help" label="帮扶党员" width="180" >
-                      </el-table-column>
-                      <el-table-column label="操作" width="160">
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="id" label="序号" width="180" />
+            <el-table-column prop="name" label="姓名" width="180" />
+            <el-table-column prop="age" label="年龄" width="180" />
+            <el-table-column prop="gender" label="性别" width="180" />
+            <el-table-column prop="grade" label="伤残等级" width="180" />
+            <el-table-column prop="help" label="帮扶党员" width="180" />
+            <el-table-column label="操作" width="166">
               <template slot-scope="scope">
-                          <el-button @click="handleClick(scope.row)"  size="small" icon="el-icon-edit"  circle > </el-button>
+                <el-button size="small" icon="el-icon-edit" circle @click="handleClick(scope.row)" />
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
 
-
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'registerList',
+export default {
+  name: 'RegisterList',
   data() {
     return {
       tableData: [{
         id: '1',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            grade:'2级',
-            help:'老李',
-          },{
+        age: '30',
+        gender: '男',
+        grade: '2级',
+        help: '老李'
+      }, {
         id: '2',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            grade:'2级',
-            help:'老李',
-          },{
+        age: '30',
+        gender: '男',
+        grade: '2级',
+        help: '老李'
+      }, {
         id: '3',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            grade:'2级',
-            help:'老李',
-          },{
+        age: '30',
+        gender: '男',
+        grade: '2级',
+        help: '老李'
+      }, {
         id: '4',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            grade:'2级',
-            help:'老李',
-          },{
+        age: '30',
+        gender: '男',
+        grade: '2级',
+        help: '老李'
+      }, {
         id: '5',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            grade:'2级',
-            help:'老李',
-          },{
+        age: '30',
+        gender: '男',
+        grade: '2级',
+        help: '老李'
+      }, {
         id: '6',
         name: '王小虎',
-            age:'30',
-            gender:'男',
-            grade:'2级',
-            help:'老李',
-          },], 
+        age: '30',
+        gender: '男',
+        grade: '2级',
+        help: '老李'
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -187,7 +173,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -209,47 +194,39 @@
       input1: '',
       input2: '',
 
-        value1: false,
+      value1: false
 
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center;"
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center;'
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
+    exportFile() {
+      console.log('11')
+    }
 
-
-      exportFile(){
-        console.log('11');
-        
-      },
-
-
-
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
+
     .registerList-box{
     position: relative;
 
@@ -267,28 +244,25 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .registerList-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
     }
+
     .registerList-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
         margin: 25px 12px;
     }
     .registerList-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .registerList-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -299,7 +273,7 @@
     }
     .registerList-input-box{
         width:100%;
-        height :90px;
+        height :110px;
         margin: 20px;
 
     }

src/views/selfEvaluation/index.vue

 <template>
-<div class="selfEvaluation-box">
+  <div class="selfEvaluation-box">
     <div class="selfEvaluation-box-1">
       <div class="selfEvaluation-content">
-            <div class="selfEvaluation-title">绩效自评
-              <p style="margin: 5px 25px; font-size: 12px;">绩效自评</p>
-            </div>
-
-           
         <div class="selfEvaluation-form">
-               <div class="selfEvaluation-formHoad" >
-                   <h4><span>搜索条件</span></h4>  
+          <div class="selfEvaluation-formHoad">
+            <h4>
+              <span>搜索条件</span>
+            </h4>
           </div>
           <div class="selfEvaluation-input-box">
-                 
             <ul>
               <li>地区:</li>
               <li>
@@ -21,8 +17,8 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>年份:</li>
@@ -32,79 +28,81 @@
                     v-for="item in options1"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>
-                       <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
           </div>
         </div>
 
         <div class="selfEvaluation-form-table">
-                <form id="table-form">
-                        <tr>
-                            <ul style=" width :100%; ">
+          <div style="margin-bottom: 25px;height: 10px; ">
+            <ul>
               <li style="float: left; margin-left: 20px;">
                 <span>项目编号:</span>
-                                    
               </li>
-                                <li style="float: left;margin-left: 20px; ">
-
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0101"   />
+              <li style="float: left;margin-left: 20px;width:600px;">
+                <input
+                  id="id0101"
+                  style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                >
               </li>
-
             </ul>
-                        </tr>
-                    <table width="100%" border="1" cellpadding="0" cellspacing="0" align="center" id="table" >
+          </div>
+
+          <form id="table-form">
+            <!-- <tr style="height:30px;margin-: 20px 0;">
+
+            </tr>-->
+
+            <table
+              id="table"
+              width="100%"
+              border="1"
+              cellpadding="0"
+              cellspacing="0"
+              align="center"
+            >
               <tr>
-                            <td align="center" width="100">
-                                项目名称
-                            </td>
-                            <td align="center" colspan="2" width="250">
-                                残疾人事业发展专项资金-支持就业与扶贫工作-党员扶残温暖同行项目补助经费
-                            </td>
-                            <td align="center" width="150" >
-                                项目编码
-                            </td>
+                <td align="center" width="100">项目名称</td>
+                <td align="center" colspan="2" width="250">残疾人事业发展专项资金-支持就业与扶贫工作-党员扶残温暖同行项目补助经费</td>
+                <td align="center" width="150">项目编码</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0201"   />
+                    <input
+                      id="id0201"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
-
               <tr>
-                            <td align="center" >
-                               项目实施单位
-                            </td>
+                <td align="center">项目实施单位</td>
                 <td align="center" colspan="2">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0301"   />
+                    <input
+                      id="id0301"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
-                            <td align="center" >
-
-                            </td>
-                            <td align="center">
-
-                            </td>
+                <td align="center" />
+                <td align="center" />
               </tr>
 
               <tr>
-                            <td align="center"  rowspan="2">
-                                项目性质
-                            </td>
+                <td align="center" rowspan="2">项目性质</td>
                 <td align="center" colspan="4">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0401"   />
+                    <input
+                      id="id0401"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
@@ -112,93 +110,80 @@
               <tr>
                 <td align="center" colspan="4">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0402"   />
+                    <input
+                      id="id0402"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" rowspan="6" >
-                                资金总额
-                            </td>
-                            <td align="center" colspan="2">
-                               资金来源
-                            </td>
-                            <td align="center" colspan="2">
-                               金额（万元）
-                            </td>
-
+                <td align="center" rowspan="6">资金总额</td>
+                <td align="center" colspan="2">资金来源</td>
+                <td align="center" colspan="2">金额（万元）</td>
               </tr>
 
               <tr>
-                            <td align="center" colspan="2">
-                                合计
-                            </td>
-                            <td align="center" >
-
-                            </td>
-                            <td align="center" >
+                <td align="center" colspan="2">合计</td>
+                <td align="center" />
+                <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0501"   />
+                    <input
+                      id="id0501"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" colspan="2" rowspan="2">
-                                其中：一般公共预算拨款
-                            </td>
+                <td align="center" colspan="2" rowspan="2">其中：一般公共预算拨款</td>
+                <td align="center">其中：中央</td>
                 <td align="center">
-                                其中：中央
-                            </td>
-                            <td align="center" >
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                       id="id0601"   />
+                    <input
+                      id="id0601"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" >
-                             自治区
-                            </td>
-                            <td align="center" >
+                <td align="center">自治区</td>
+                <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0701"   />
+                    <input
+                      id="id0701"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" colspan="2">
-                                政府性基金
-                            </td>
-                            <td align="center" >
-
-                            </td>
-                            <td align="center" >
+                <td align="center" colspan="2">政府性基金</td>
+                <td align="center" />
+                <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0801"   />
+                    <input
+                      id="id0801"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" colspan="2">
-                                其他资金
-                            </td>
-                            <td align="center" >
-
-                            </td>
-                            <td align="center" >
+                <td align="center" colspan="2">其他资金</td>
+                <td align="center" />
+                <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id0901"   />
+                    <input
+                      id="id0901"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
@@ -213,358 +198,344 @@
               </tr>
 
               <tr>
-                            <td align="center" >
-                                项目起始时间
-                            </td>
-                            <td align="center" >
+                <td align="center">项目起始时间</td>
+                <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1001"   />
+                    <input
+                      id="id1001"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
-                            <td align="center"  >
-                                项目终止时间
-                            </td>
+                <td align="center">项目终止时间</td>
                 <td align="center" colspan="2">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1002"   />
+                    <input
+                      id="id1002"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" >
-                                项目实施进度安排
-                            </td>
+                <td align="center">项目实施进度安排</td>
                 <td align="center" colspan="4">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1101"   />
+                    <input
+                      id="id1101"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" >
-                                年度绩效目标
-                            </td>
+                <td align="center">年度绩效目标</td>
                 <td align="center" colspan="4">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1201"   />
+                    <input
+                      id="id1201"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" >
-                                中期绩效目标
-                            </td>
+                <td align="center">中期绩效目标</td>
                 <td align="center" colspan="4">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1301"   />
+                    <input
+                      id="id1301"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" rowspan="11">
-                                项目年度绩效目标衡量指标
-                            </td>
-
-                            <td align="center">
-                                一级指标
-                            </td>
-                            <td align="center">
-                                二级指标
-                            </td>
-                            <td align="center">
-                               指标内容
-                            </td>
-                            <td align="center">
-                                指标值
-                            </td>
-                        <tr>
+                <td align="center" rowspan="11">项目年度绩效目标衡量指标</td>
 
+                <td align="center">一级指标</td>
+                <td align="center">二级指标</td>
+                <td align="center">指标内容</td>
+                <td align="center">指标值</td>
+              </tr>
+              <tr />
               <tr>
-                        <td align="center" rowspan="4">
-                            产出指标
-                        </td>
+                <td align="center" rowspan="4">产出指标</td>
 
-                        <td align="center">
-                           产出数量
-                        </td>
-                        <td align="center">
-                            接受扶持贫困残疾人人数
-                        </td>
+                <td align="center">产出数量</td>
+                <td align="center">接受扶持贫困残疾人人数</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                       id="id1401"   />
+                    <input
+                      id="id1401"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center">
-                                产出质量
-                            </td>
-                            <td align="center">
-                                受助残疾人家庭增产、增收，生活得到改善的程度
-                            </td>
+                <td align="center">产出质量</td>
+                <td align="center">受助残疾人家庭增产、增收，生活得到改善的程度</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1501"   />
+                    <input
+                      id="id1501"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center">
-                                产出时效
-                            </td>
-                            <td align="center">
-                                项目完成时间
-                            </td>
+                <td align="center">产出时效</td>
+                <td align="center">项目完成时间</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1601"   />
+                    <input
+                      id="id1601"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center">
-                                产出成本
-                            </td>
-                            <td align="center">
-                                资金按时足额到位率，年补助标准
-                            </td>
+                <td align="center">产出成本</td>
+                <td align="center">资金按时足额到位率，年补助标准</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1701"   />
+                    <input
+                      id="id1701"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" rowspan="4">
-                                效果指标
-                            </td>
+                <td align="center" rowspan="4">效果指标</td>
 
-                            <td align="center">
-                                经济效益
-                            </td>
-                            <td align="center">
-                                受助残疾人通过扶持获得收益占比
-                            </td>
+                <td align="center">经济效益</td>
+                <td align="center">受助残疾人通过扶持获得收益占比</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1801"   />
+                    <input
+                      id="id1801"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center">
-                               社会效益
-                            </td>
-                            <td align="center">
-                                受扶持残疾人家庭普遍实现增产增收，减轻贫困残疾人经济负担，提升生活质量，改善生活状况效果
-                            </td>
+                <td align="center">社会效益</td>
+                <td align="center">受扶持残疾人家庭普遍实现增产增收，减轻贫困残疾人经济负担，提升生活质量，改善生活状况效果</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id1901"   />
+                    <input
+                      id="id1901"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center">
-                                生态效益
-                            </td>
-                            <td align="center">
-
-                            </td>
+                <td align="center">生态效益</td>
+                <td align="center" />
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id2001"   />
+                    <input
+                      id="id2001"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center">
-                                可持续影响
-                            </td>
-                            <td align="center">
-                                通过项目开展促进受助残疾人家庭增产、增收，改善残疾人生活状况，对提高残疾人社会地位、增强社会关注残疾人事业的促进和示范作用
-                            </td>
+                <td align="center">可持续影响</td>
+                <td align="center">通过项目开展促进受助残疾人家庭增产、增收，改善残疾人生活状况，对提高残疾人社会地位、增强社会关注残疾人事业的促进和示范作用</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                    <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                           id="id2101"   />
+                    <input
+                      id="id2101"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                        <td align="center" >
-                            满意度指标
-                        </td>
+                <td align="center">满意度指标</td>
 
-                        <td align="center">
-                            - -
-                        </td>
+                <td align="center">- -</td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                       id="id2201"   />
+                    <input
+                      id="id2201"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
                 <td align="center">
                   <div style="width:80%;height:80%;margin:10px auto;">
-                                <input style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
-                                       id="id2202"   />
+                    <input
+                      id="id2202"
+                      style="height:80%;width:80%;border:none;overflow: hidden;border-bottom:1px dotted black;"
+                    >
                   </div>
                 </td>
               </tr>
 
               <tr>
-                            <td align="center" >
-                                自评报告
-                            </td>
-                            <form id="evalution-div1">
+                <td align="center">自评报告</td>
+                <form>
                   <td colspan="2">
-                                    <el-upload
-                                      class="upload-demo"
-                                      drag
-                                      action="https://jsonplaceholder.typicode.com/posts/"
-                                      multiple>
-                                      <i class="el-icon-upload"></i>
-                                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                                    
-                                    </el-upload>
-
+                    <div id="conclusion-div1" class="form-group">
+                      <div class="col-sm-8">
+                        <input
+                          id="id1502"
+                          multiple
+                          type="file"
+                          onblur="onClickSumit(this.id,this.value)"
+                        >
+                      </div>
+                    </div>
+                    <div id="conclusion-div2" class="form-group" hidden>
+                      <div class="col-sm-8">
+                        <input id="conclusion-url" value hidden>
+                        <button class="upload-btn" onclick="uploadFile('conclusion')">
+                          <i class="ace-icon fa fa-download" />下载年度总结附件
+                        </button>
+                      </div>
+                    </div>
                   </td>
                 </form>
 
-                            <td align="center">
-                                年度工作总结
-                            </td>
-                            <form id="conclusion-div1">
-                                <td >
-                                    <el-upload
-                                      class="upload-demo"
-                                      drag
-                                      action="https://jsonplaceholder.typicode.com/posts/"
-                                      multiple>
-                                      <i class="el-icon-upload"></i>
-                                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                                      
-                                    </el-upload>
-
+                <td align="center">年度工作总结</td>
+                <form>
+                  <td colspan="2">
+                    <div id="conclusion-div1" class="form-group">
+                      <div class="col-sm-8">
+                        <input
+                          id="id1502"
+                          multiple
+                          type="file"
+                          onblur="onClickSumit(this.id,this.value)"
+                        >
+                      </div>
+                    </div>
+                    <div id="conclusion-div2" class="form-group" hidden>
+                      <div class="col-sm-8">
+                        <input id="conclusion-url" value hidden>
+                        <button class="upload-btn" onclick="uploadFile('conclusion')">
+                          <i class="ace-icon fa fa-download" />下载年度总结附件
+                        </button>
+                      </div>
+                    </div>
                   </td>
                 </form>
               </tr>
-                  
             </table>
           </form>
 
         </div>
       </div>
     </div>
-</div>
-
-
-
+  </div>
 </template>
 
 <script>
- export default {
-     name:'selfEvaluation',
+export default {
+  name: 'SelfEvaluation',
   data() {
     return {
-          tableData: [{
+      tableData: [
+        {
           region: '西乡塘区',
           task: '100',
-            capital:'100000.00',
-            particularYear:'2020',
-            remarks:'',
-            
-          }, {
+          capital: '100000.00',
+          particularYear: '2020',
+          remarks: ''
+        },
+        {
           region: '桂平市',
           task: '425',
-            capital:'425000.00',
-            particularYear:'2020',
-            remarks:'',
-            
+          capital: '425000.00',
+          particularYear: '2020',
+          remarks: ''
         },
         {
           region: '青秀区',
           task: '105',
-            capital:'105000.00',
-            particularYear:'2020',
-            remarks:'',
-            
-          },], 
+          capital: '105000.00',
+          particularYear: '2020',
+          remarks: ''
+        }
+      ],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
-             options2: [{
+      options2: [
+        {
           value: '选项1',
           label: '广西壮族自治区'
-        }, {
+        },
+        {
           value: '选项2',
           label: '广西壮族自治区南宁市'
-        }, {
+        },
+        {
           value: '选项3',
           label: '南宁市南宁市辖区'
-        }, {
+        },
+        {
           value: '选项4',
           label: '南宁市兴宁区'
-        }, {
+        },
+        {
           value: '选项5',
           label: '南宁市青秀区'
-        }],
-
+        }
+      ],
 
-        options1: [{
+      options1: [
+        {
           value: '选项1',
           label: '2020'
-        }, {
+        },
+        {
           value: '选项2',
           label: '2019'
-        }, {
+        },
+        {
           value: '选项3',
           label: '2018'
-        }, {
+        },
+        {
           value: '选项4',
           label: '2017'
-        }, {
+        },
+        {
           value: '选项5',
           label: '2016'
-        }],
+        }
+      ],
       value: '',
       radio: '1',
 
-
       // 表单
       ruleForm: {
         name: '',
         region: '',
-          ryear:'',
+        ryear: '',
         date: '',
         type: [],
         desc: ''
@@ -574,148 +545,127 @@
           { required: true, message: '请输入金额', trigger: 'blur' },
           { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
         ],
-          region: [
-            { required: true, message: '请选择区域', trigger: 'change' }
-          ],
-           ryear: [
-            { required: true, message: '请选择区域', trigger: 'change' }
-          ],
+        region: [{ required: true, message: '请选择区域', trigger: 'change' }],
+        ryear: [{ required: true, message: '请选择区域', trigger: 'change' }],
         date: [
-            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          {
+            type: 'date',
+            required: true,
+            message: '请选择日期',
+            trigger: 'change'
+          }
         ],
-          desc: [
-            { required: false, message: '请填写活动形式', trigger: 'blur' }
-          ]
+        desc: [{ required: false, message: '请填写活动形式', trigger: 'blur' }]
       }
-
-        
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center; "
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center; '
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
-      
-
-
-      exportFile(){
-        console.log('11');
-        
+    exportFile() {
+      console.log('11')
     },
 
-      
-      queryRegion(){
-        console.log('查询');
-        
+    queryRegion() {
+      console.log('查询')
     },
     // 表单
     submitForm(formName) {
-        this.$refs[formName].validate((valid) => {
+      this.$refs[formName].validate(valid => {
         if (valid) {
-            alert('submit!');
+          alert('submit!')
         } else {
-            console.log('error submit!!');
-            return false;
+          console.log('error submit!!')
+          return false
         }
-        });
-      },
-
-
-
-    },}
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-     list-style:none;
-    }
-    .selfEvaluation-box{
+* {
+  list-style: none;
+}
+.selfEvaluation-box {
   position: relative;
 
   margin: 0;
   padding: 8px 20px 24px;
-    }
-    .selfEvaluation-box-1{
-    width :100%;
+}
+.selfEvaluation-box-1 {
+  width: 100%;
 
   padding: 8px 20px 50px 20px;
+}
 
-    }
-    
-    .selfEvaluation-content{
+.selfEvaluation-content {
   width: 1310px;
   padding: 12px 15px;
   margin-left: 10%;
-    background-color: #fff;
-    }
-    .selfEvaluation-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
-    }
-    .selfEvaluation-title-2{
-      height: 180px;
-      padding: 25px;
-      margin: 0 12px;
-      border: 1px solid #ccc;
-    }
-    .selfEvaluation-form{
-        border: 1px solid #ccc;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  border-radius: 5px;
+}
+
+.selfEvaluation-form {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  border-radius: 5px;
   margin: 25px 12px;
-    }
-    .selfEvaluation-formHoad{
+}
+.selfEvaluation-formHoad {
   width: 100%;
   height: 60px;
-        background-color:#E0E0E0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
   position: relative;
-    }
-    .selfEvaluation-formHoad h4{
+}
+.selfEvaluation-formHoad h4 {
   width: 100%;
   height: 20px;
-    padding: 16px 20px;
+  padding: 20px 20px;
   display: block;
   font-weight: bold;
-    }
-    .selfEvaluation-formHoad h4 span{
-        color:#363636;
+}
+.selfEvaluation-formHoad h4 span {
+  color: #363636;
   font-size: 14px;
   z-index: 11;
-    }
-    .selfEvaluation-input-box{
-        width:100%; 
-        height :35px;
+}
+.selfEvaluation-input-box {
+  width: 100%;
+  height: 60px;
   margin: 20px;
+}
 
-        
-    }
-    
-    .selfEvaluation-input-box ul li{
+.selfEvaluation-input-box ul li {
   float: left;
   margin: 3px;
   line-height: 30px;
 
-    }
-    .selfEvaluation-form-table{
+}
+.selfEvaluation-form-table {
   margin: 25px 12px;
-    }
-
+  padding: 10px;
+}
+td{
+    line-height: 30px;
+    font-size: 14px;
+}
 </style>

src/views/statis/index.vue

 <template>
-<div class="statis-box">
+  <div class="statis-box">
     <div class="statis-box-1">
       <div class="statis-content">
-            <div class="statis-title">实施情况统计表
-              <p style="margin: 5px 25px; font-size: 12px;">实施情况统计表</p>
-            </div>
-
 
         <div class="statis-form">
-               <div class="statis-formHoad" >
+          <div class="statis-formHoad">
             <h4><span>搜索条件</span></h4>
 
           </div>
@@ -22,8 +18,8 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>项目:</li>
@@ -33,13 +29,13 @@
                     v-for="item in options1"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
 
               <li>
-                       <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
@@ -54,70 +50,59 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="organization" label="单位名称" width="80" >
-                      </el-table-column>
-                      <el-table-column prop="number" label="自治区任务数" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="address" label="实际完成数" width="100" >
-                      </el-table-column>
-                      <el-table-column prop="population" label="资金合计" width="80" >
-                      </el-table-column>
-                      <el-table-column prop="telephone" label="自治区下拨资金" width="120" >
-                      </el-table-column>
-                      <el-table-column prop="apply" label="设区市实际配套资金" width="160" >
-                      </el-table-column>
-                      <el-table-column prop="capital" label="县〔市、区〕实际配套资金" width="190" >
-                      </el-table-column>
-                      <el-table-column prop="organization" label="社会投入" width="120" >
-                      </el-table-column>
-                      <el-table-column prop="help" label="党组织(个)" width="90" >
-                      </el-table-column>
-                      <el-table-column prop="help" label="党员(个)" width="80" >
-                      </el-table-column>
-                      <el-table-column prop="help" label="帮扶残疾人(个)" width="120" >
-                      </el-table-column>
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="organization" label="单位名称" width="80" />
+            <el-table-column prop="number" label="自治区任务数" width="110" />
+            <el-table-column prop="address" label="实际完成数" width="100" />
+            <el-table-column prop="population" label="资金合计" width="80" />
+            <el-table-column prop="telephone" label="自治区下拨资金" width="120" />
+            <el-table-column prop="apply" label="设区市实际配套资金" width="160" />
+            <el-table-column prop="capital" label="县〔市、区〕实际配套资金" width="190" />
+            <el-table-column prop="organization" label="社会投入" width="120" />
+            <el-table-column prop="help" label="党组织(个)" width="90" />
+            <el-table-column prop="help" label="党员(个)" width="80" />
+            <el-table-column prop="help" label="帮扶残疾人(个)" width="120" />
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'statis',
+export default {
+  name: 'Statis',
   data() {
     return {
       tableData: [{
-            organization:'居委会',
+        organization: '居委会'
 
-          },], 
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -135,7 +120,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -155,12 +139,11 @@
       value: '',
       radio: '1',
 
-
       // 表单
       ruleForm: {
         name: '',
         region: '',
-          ryear:'',
+        ryear: '',
         date: '',
         type: [],
         desc: ''
@@ -184,64 +167,52 @@
         ]
       }
 
-        
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center; "
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center; '
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
-      
-
-
-      exportFile(){
-        console.log('11');
-        
+    exportFile() {
+      console.log('11')
     },
 
-      
-      queryRegion(){
-        console.log('查询');
-        
+    queryRegion() {
+      console.log('查询')
     },
     // 表单
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-            alert('submit!');
+          alert('submit!')
         } else {
-            console.log('error submit!!');
-            return false;
+          console.log('error submit!!')
+          return false
+        }
+      })
     }
-        });
-      },
-
-
 
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
+
     .statis-box{
     position: relative;
 
@@ -259,29 +230,24 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .statis-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+     border-radius: 5px;
     }
-
     .statis-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+     border-radius: 5px;
         margin: 25px 12px;
     }
     .statis-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
         position: relative;
     }
     .statis-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -292,14 +258,11 @@
     }
     .statis-input-box{
         width:100%;
-        height :35px;
+        height :50px;
         margin: 20px;
 
-        
-    }
-    .border-bottom{
-      border-bottom: 1px solid #ccc; 
     }
+
     .statis-input-box ul li{
       float: left;
       margin: 3px;

src/views/summy/index.vue

 <template>
-<div class="summy-box">
+  <div class="summy-box">
     <div class="summy-box-1">
       <div class="summy-content">
-            <div class="summy-title">帮扶汇总
-              <p style="margin: 5px 25px; font-size: 12px;">帮扶汇总</p>
-            </div>
-
-           
         <div class="summy-form">
-               <div class="summy-formHoad" >
+          <div class="summy-formHoad">
             <h4><span>搜索条件</span></h4>
 
           </div>
@@ -22,8 +17,8 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>项目:</li>
@@ -33,13 +28,13 @@
                     v-for="item in options1"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
 
               <li>
-                       <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
@@ -54,123 +49,114 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="name" label="姓名" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="number" label="残疾人号" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="address" label="家庭地址" width="350" >
-                      </el-table-column>
-                      <el-table-column prop="population" label="家庭人口" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="telephone" label="联系电话" width="120" >
-                      </el-table-column>
-                      <el-table-column prop="apply" label="项目" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="capital" label="总投入" width="110" >
-                      </el-table-column>
-                      <el-table-column prop="organization" label="党组织名称" width="120" >
-                      </el-table-column>
-                      <el-table-column prop="help" label="党员干部姓名" width="110" >
-                      </el-table-column>
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="name" label="姓名" width="110" />
+            <el-table-column prop="number" label="残疾人号" width="110" />
+            <el-table-column prop="address" label="家庭地址" width="350" />
+            <el-table-column prop="population" label="家庭人口" width="110" />
+            <el-table-column prop="telephone" label="联系电话" width="120" />
+            <el-table-column prop="apply" label="项目" width="110" />
+            <el-table-column prop="capital" label="总投入" width="110" />
+            <el-table-column prop="organization" label="党组织名称" width="120" />
+            <el-table-column prop="help" label="党员干部姓名" width="116" />
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
       </div>
     </div>
-</div>
-
-
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'summy',
+export default {
+  name: 'Summy',
   data() {
     return {
       tableData: [{
-            name:'老铁',
-            number:'4415',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            population:'5',
-            telephone:'19857846724',
-            apply:'2020-01-02',
-            capital:'4250.00',
-            organization:'居委会',
-            help:'老李',
-          },{
-            name:'老铁',
-            number:'4415',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            population:'5',
-            telephone:'19857846724',
-            apply:'2020-01-02',
-            capital:'4250.00',
-            organization:'居委会',
-            help:'老李',
-          },{
-            name:'老铁',
-            number:'4415',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            population:'5',
-            telephone:'19857846724',
-            apply:'2020-01-02',
-            capital:'425000.00',
-            organization:'居委会',
-            help:'老李',
-          },{
-            name:'老铁',
-            number:'4415',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            population:'5',
-            telephone:'19857846724',
-            apply:'2020-01-02',
-            capital:'4250.00',
-            organization:'居委会',
-            help:'老李',
-          },{
-            name:'老铁',
-            number:'4415',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            population:'5',
-            telephone:'19857846724',
-            apply:'2020-01-02',
-            capital:'4250.00',
-            organization:'居委会',
-            help:'老李',
-          },{
-            name:'老铁',
-            number:'4415',
-            address:'广西壮族自治区隆安县那桐镇下邓村联房屯57号',
-            population:'5',
-            telephone:'19857846724',
-            apply:'2020-01-02',
-            capital:'4250.00',
-            organization:'居委会',
-            help:'老李',
-          },], 
+        name: '老铁',
+        number: '4415',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        population: '5',
+        telephone: '19857846724',
+        apply: '2020-01-02',
+        capital: '4250.00',
+        organization: '居委会',
+        help: '老李'
+      }, {
+        name: '老铁',
+        number: '4415',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        population: '5',
+        telephone: '19857846724',
+        apply: '2020-01-02',
+        capital: '4250.00',
+        organization: '居委会',
+        help: '老李'
+      }, {
+        name: '老铁',
+        number: '4415',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        population: '5',
+        telephone: '19857846724',
+        apply: '2020-01-02',
+        capital: '425000.00',
+        organization: '居委会',
+        help: '老李'
+      }, {
+        name: '老铁',
+        number: '4415',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        population: '5',
+        telephone: '19857846724',
+        apply: '2020-01-02',
+        capital: '4250.00',
+        organization: '居委会',
+        help: '老李'
+      }, {
+        name: '老铁',
+        number: '4415',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        population: '5',
+        telephone: '19857846724',
+        apply: '2020-01-02',
+        capital: '4250.00',
+        organization: '居委会',
+        help: '老李'
+      }, {
+        name: '老铁',
+        number: '4415',
+        address: '广西壮族自治区隆安县那桐镇下邓村联房屯57号',
+        population: '5',
+        telephone: '19857846724',
+        apply: '2020-01-02',
+        capital: '4250.00',
+        organization: '居委会',
+        help: '老李'
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -188,7 +174,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -208,12 +193,11 @@
       value: '',
       radio: '1',
 
-
       // 表单
       ruleForm: {
         name: '',
         region: '',
-          ryear:'',
+        ryear: '',
         date: '',
         type: [],
         desc: ''
@@ -237,64 +221,51 @@
         ]
       }
 
-        
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center; "
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center; '
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
-      
-
-
-      exportFile(){
-        console.log('11');
-        
+    exportFile() {
+      console.log('11')
     },
 
-      
-      queryRegion(){
-        console.log('查询');
-        
+    queryRegion() {
+      console.log('查询')
     },
     // 表单
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-            alert('submit!');
+          alert('submit!')
         } else {
-            console.log('error submit!!');
-            return false;
+          console.log('error submit!!')
+          return false
+        }
+      })
     }
-        });
-      },
-
-
 
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
     .summy-box{
     position: relative;
 
@@ -312,29 +283,25 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .summy-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+     border-radius: 5px;
     }
 
     .summy-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+     border-radius: 5px;
         margin: 25px 12px;
     }
     .summy-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
         position: relative;
     }
     .summy-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -345,14 +312,11 @@
     }
     .summy-input-box{
         width:100%;
-        height :35px;
+        height :50px;
         margin: 20px;
 
-        
-    }
-    .border-bottom{
-      border-bottom: 1px solid #ccc; 
     }
+
     .summy-input-box ul li{
       float: left;
       margin: 3px;

src/views/taskIndex/index.vue

 <template>
-<div class="taskIndex-box">
+  <div class="taskIndex-box">
     <div class="taskIndex-box-1">
       <div class="taskIndex-content">
-            <div class="taskIndex-title">项目任务指标
-              <p style="margin: 5px 25px; font-size: 12px;">项目指标信息</p>
-            </div>
-
 
         <div class="taskIndex-form">
-               <div class="taskIndex-formHoad" >
+          <div class="taskIndex-formHoad">
             <h4><span>搜索条件</span></h4>
             <div style="position:absolute; top:10px; right:25px;z-index: 1;">
-                          <el-button type="primary"  @click="queryRegion()" >新增项目</el-button>
+              <el-button type="primary" @click="queryRegion()">新增项目</el-button>
             </div>
 
           </div>
@@ -25,8 +21,8 @@
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>年份:</li>
@@ -36,8 +32,8 @@
                     v-for="item in options1"
                     :key="item.value"
                     :label="item.label"
-                        :value="item.value">
-                        </el-option>
+                    :value="item.value"
+                  />
                 </el-select>
               </li>
               <li>
@@ -45,17 +41,17 @@
               </li>
               <li>
                 <el-pagination
-                          @size-change="handleSizeChange" 
-                          @current-change="handleCurrentChange" 
                   :current-page="currentPage"
                   :page-sizes="[5,10,20,30]"
                   :page-size="pageSize"
                   layout="sizes"
-                          :total="tableData.length" >
-                          </el-pagination>
+                  :total="tableData.length"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                />
               </li>
               <li>
-                       <el-button type="primary" size="mini" @click="queryRegion()" >查询</el-button>
+                <el-button type="primary" size="mini" @click="queryRegion()">查询</el-button>
               </li>
             </ul>
 
@@ -63,7 +59,11 @@
 
         </div>
 
-           <div class="taskIndex-title-2">资金总额与下级区域之和不相等有：
+        <div class="taskIndex-title-2">
+          <br>
+          <br>
+
+          资金总额与下级区域之和不相等有：
           <p style="margin: 5px 25px; font-size: 14px;">南宁市、柳州市、桂林市、梧州市、北海市、防城港市、钦州市、贵港市、玉林市、百色市、贺州市、河池市、来宾市、崇左市</p>
           <br>
           任务数与下级区域之和不相等有：
@@ -77,88 +77,86 @@
               <el-button type="primary" @click="exportFile()">导出表格</el-button></div>
           </div>
           <!-- 表格 -->
-                    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; font-size:14px; " 
-                    :cell-style="cellStyle" :header-cell-style="rowClass" >
-                      <el-table-column prop="region" label="行政区域" width="210" >
-                      </el-table-column>
-                      <el-table-column prop="task" label="任务数" width="210" >
-                      </el-table-column>
-                      <el-table-column prop="capital" label="资金" width="210" >
-                      </el-table-column>
-                      <el-table-column prop="particularYear" label="年份" width="210" >
-                      </el-table-column>
-                      <el-table-column prop="remarks" label="备注" width="210" >
-                      </el-table-column>
-                      <el-table-column label="选择" width="200">
+          <el-table
+            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
+            style="width: 100%; font-size:14px; "
+            :cell-style="cellStyle"
+            :header-cell-style="rowClass"
+          >
+            <el-table-column prop="region" label="行政区域" width="210" />
+            <el-table-column prop="task" label="任务数" width="210" />
+            <el-table-column prop="capital" label="资金" width="210" />
+            <el-table-column prop="particularYear" label="年份" width="210" />
+            <el-table-column prop="remarks" label="备注" width="210" />
+            <el-table-column label="选择" width="206">
               <template slot-scope="scope">
-                          <el-button @click="handleClick(scope.row)"  size="small" icon="el-icon-edit"  circle > </el-button>
+                <el-button size="small" icon="el-icon-edit" circle @click="handleClick(scope.row)" />
               </template>
             </el-table-column>
           </el-table>
           <!-- 分页 -->
-                    <div class="block" >
+          <div class="block">
             <div style="  height :40px; margin-top:12px; margin-left:6px;">
               <el-pagination
-                        @size-change="handleSizeChange" 
-                        @current-change="handleCurrentChange" 
                 :current-page="currentPage"
                 :page-sizes="[5,10,20,30]"
                 :page-size="pageSize"
                 layout="total, prev, pager, next, jumper"
-                        :total="tableData.length" >
-                        </el-pagination>
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+              />
             </div>
           </div>
 
         </div>
-              <div class="project-status" >
+        <div class="project-status">
           <div style="height :700px;">
             <div class="project-box">任务指标信息</div>
-                <div class="project-box-2" >
-                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
+            <div class="project-box-2">
+              <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px" class="demo-ruleForm">
 
                 <el-form-item label="年份" prop="ryear">
                   <el-select v-model="ruleForm.ryear" placeholder="请选年份">
-                        <el-option label="2020" value="shanghai"></el-option>
+                    <el-option label="2020" value="shanghai" />
                   </el-select>
                 </el-form-item>
 
                 <el-form-item label="行政区域" prop="region">
                   <el-select v-model="ruleForm.region" placeholder="请选行政区域">
-                        <el-option label="区域一" value="shanghai"></el-option>
-                        <el-option label="区域二" value="beijing"></el-option>
+                    <el-option label="区域一" value="shanghai" />
+                    <el-option label="区域二" value="beijing" />
                   </el-select>
                 </el-form-item>
 
                 <el-form-item label="任务数（户）" prop="name" style="width: 400px;">
-                      <el-input v-model="ruleForm.name"></el-input>
+                  <el-input v-model="ruleForm.name" />
                 </el-form-item>
                 <el-form-item label="资金总额（元）" prop="name" style="width: 400px;">
-                      <el-input v-model="ruleForm.name"></el-input>
+                  <el-input v-model="ruleForm.name" />
                 </el-form-item>
                 <el-form-item label="自治区资金（元）" prop="name" style="width: 400px;">
-                      <el-input v-model="ruleForm.name"></el-input>
+                  <el-input v-model="ruleForm.name" />
                 </el-form-item>
                 <el-form-item label="市资金（元）" prop="name" style="width: 400px;">
-                      <el-input v-model="ruleForm.name"></el-input>
+                  <el-input v-model="ruleForm.name" />
                 </el-form-item>
                 <el-form-item label="县资金（元）" prop="name" style="width: 400px;">
-                      <el-input v-model="ruleForm.name"></el-input>
+                  <el-input v-model="ruleForm.name" />
                 </el-form-item>
                 <el-form-item label="其他资金（元）" prop="name" style="width: 400px;">
-                      <el-input v-model="ruleForm.name"></el-input>
+                  <el-input v-model="ruleForm.name" />
                 </el-form-item>
                 <el-form-item label="完成时间" required>
                   <el-col :span="11">
                     <el-form-item prop="date">
-                          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
+                      <el-date-picker v-model="ruleForm.date1" type="date" placeholder="选择日期" style="width: 100%;" />
                     </el-form-item>
                   </el-col>
-                      <el-col :span="11">
-                      </el-col>
+                  <el-col :span="11" />
                 </el-form-item>
                 <el-form-item label="备注" prop="desc" style="width: 400px;">
-                      <el-input type="textarea" v-model="ruleForm.desc" ></el-input>
+                  <el-input v-model="ruleForm.desc" type="textarea" />
                 </el-form-item>
                 <el-form-item>
                   <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
@@ -167,63 +165,105 @@
               </el-form>
             </div>
             <div class="project-box-2">
-                  <span  style=" margin:auto; ">实施方案 、 财务凭证 、 工作通知</span>
-                  <el-upload
-                    class="upload-demo"
-                    drag
-                    show-file-list="true"
-                    action="https://jsonplaceholder.typicode.com/posts/"
-                    multiple>
-                    <i class="el-icon-upload"></i>
-                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-                  </el-upload>
 
+              <div id="conclusion-div1" class="form-group">
+                <div class="col-sm-8">
+                  <span style=" margin: 0 10px ;">实施方案 </span>
+                  <input id="id1502" multiple="" type="file" onblur="onClickSumit(this.id,this.value)">
+                </div>
+              </div>
+              <div id="conclusion-div2" class="form-group" hidden>
+                <div class="col-sm-8">
+                  <input id="conclusion-url" value="" hidden>
+                  <button class="upload-btn" onclick="uploadFile('conclusion')"><i
+                    class="ace-icon fa fa-download"
+                  />下载年度总结附件
+                  </button>
+                </div>
+              </div>
+
+            </div>
+
+            <div class="project-box-2">
+
+              <div id="conclusion-div1" class="form-group">
+                <div class="col-sm-8">
+                  <span style=" margin: 0 10px ; ">财务凭证</span>
+                  <input id="id1502" multiple="" type="file" onblur="onClickSumit(this.id,this.value)">
+                </div>
+              </div>
+              <div id="conclusion-div2" class="form-group" hidden>
+                <div class="col-sm-8">
+                  <input id="conclusion-url" value="" hidden>
+                  <button class="upload-btn" onclick="uploadFile('conclusion')"><i
+                    class="ace-icon fa fa-download"
+                  />下载年度总结附件
+                  </button>
+                </div>
               </div>
+
             </div>
+            <div class="project-box-2">
 
+              <div id="conclusion-div1" class="form-group">
+                <div class="col-sm-8">
+                  <span style=" margin:0 10px; ">工作通知</span>
+                  <input id="id1502" multiple="" type="file" onblur="onClickSumit(this.id,this.value)">
+                </div>
               </div>
+              <div id="conclusion-div2" class="form-group" hidden>
+                <div class="col-sm-8">
+                  <input id="conclusion-url" value="" hidden>
+                  <button class="upload-btn" onclick="uploadFile('conclusion')"><i
+                    class="ace-icon fa fa-download"
+                  />下载年度总结附件
+                  </button>
                 </div>
               </div>
-</div>
 
+            </div>
 
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
 
 </template>
 
 <script>
- export default {
-     name:'taskIndex',
+export default {
+  name: 'TaskIndex',
   data() {
     return {
       tableData: [{
         region: '西乡塘区',
         task: '100',
-            capital:'100000.00',
-            particularYear:'2020',
-            remarks:'',
+        capital: '100000.00',
+        particularYear: '2020',
+        remarks: ''
 
       }, {
         region: '桂平市',
         task: '425',
-            capital:'425000.00',
-            particularYear:'2020',
-            remarks:'',
+        capital: '425000.00',
+        particularYear: '2020',
+        remarks: ''
 
       },
       {
         region: '青秀区',
         task: '105',
-            capital:'105000.00',
-            particularYear:'2020',
-            remarks:'',
+        capital: '105000.00',
+        particularYear: '2020',
+        remarks: ''
 
-          },], 
+      }],
       currentPage: 1, // 当前页码
       total: 20, // 总条数
       pageSize: 5, // 每页的数据条数
 
-
-
       options2: [{
         value: '选项1',
         label: '广西壮族自治区'
@@ -241,7 +281,6 @@
         label: '南宁市青秀区'
       }],
 
-
       options1: [{
         value: '选项1',
         label: '2020'
@@ -261,12 +300,11 @@
       value: '',
       radio: '1',
 
-
       // 表单
       ruleForm: {
         name: '',
         region: '',
-          ryear:'',
+        ryear: '',
         date: '',
         type: [],
         desc: ''
@@ -290,63 +328,52 @@
         ]
       }
 
-        
-      };},
+    }
+  },
 
   methods: {
-      //每页条数改变时触发 选择一页显示多少行
+    // 每页条数改变时触发 选择一页显示多少行
     handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-        this.currentPage = 1;
-        this.pageSize = val;
+      console.log(`每页 ${val} 条`)
+      this.currentPage = 1
+      this.pageSize = val
     },
-      //当前页改变时触发 跳转其他页
+    // 当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-        this.currentPage = val;
+      console.log(`当前页: ${val}`)
+      this.currentPage = val
     },
-      cellStyle({row,column,rowIndex,columnIndex}) {
-        return "text-align:center; "
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      return 'text-align:center; '
     },
-      rowClass({row,rowIndex}){
-        return "text-align:center;"
+    rowClass({ row, rowIndex }) {
+      return 'text-align:center;'
     },
 
-      
-
-      exportFile(){
-        console.log('11');
-        
+    exportFile() {
+      console.log('11')
     },
 
-      
-      queryRegion(){
-        console.log('查询');
-        
+    queryRegion() {
+      console.log('查询')
     },
     // 表单
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-            alert('submit!');
+          alert('submit!')
         } else {
-            console.log('error submit!!');
-            return false;
+          console.log('error submit!!')
+          return false
+        }
+      })
     }
-        });
-      },
-
-
 
-    },}
+  }}
 </script>
 
 <style lang="scss">
-    *{
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    }
+
     .taskIndex-box{
     position: relative;
 
@@ -364,34 +391,31 @@
     width: 1310px;
     padding: 12px 15px;
     margin-left: 10%;
-    background-color: #fff;
-    }
-    .taskIndex-title{
-    height: 100px;
-    padding: 25px;
-    margin: 0 12px;
-    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    border-radius: 5px;
     }
     .taskIndex-title-2{
       height: 180px;
-      padding: 25px;
+      padding: 0 25px;
       margin: 0 12px;
-      border: 1px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+      border-radius: 5px;
     }
     .taskIndex-form{
-        border: 1px solid #ccc;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
         margin: 25px 12px;
+        border-radius: 5px;
     }
     .taskIndex-formHoad{
         width: 100%;
         height: 60px;
-        background-color:#E0E0E0;
+        border-bottom: 1px solid rgba(0, 0, 0, .12);
         position: relative;
     }
     .taskIndex-formHoad h4{
     width: 100%;
     height: 20px;
-    padding: 16px 20px;
+    padding: 20px 20px;
     display: block;
     font-weight: bold;
     }
@@ -402,10 +426,9 @@
     }
     .taskIndex-input-box{
         width:100%;
-        height :35px;
+        height :60px;
         margin: 20px;
 
-        
     }
     .border-bottom{
       border-bottom: 1px solid #ccc;
@@ -413,12 +436,12 @@
     .project-status{
       margin: 20px 12px;
       padding-bottom: 50px;
-      border: 1px solid #ccc;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
     }
     .project-box{
-      background-color: #ccc;
-      height: 40px;
-      line-height: 40px;
+      border-bottom:1px solid  rgba(0, 0, 0, .12);
+      height: 50px;
+      line-height: 50px;
       text-align: center;
     }
     .project-box-2{
@@ -432,7 +455,6 @@
       line-height: 30px;
       list-style:none;
 
-      
     }
 
 </style>