表格样式封装&&底部banner&&路由栏样式修改

src/App.vue

@@ -14,6 +14,7 @@
         <router-view :isManufacturer="isManufacturer"></router-view>
       </div>
     </div>
+    <FooterBanner/>
   </div>
 </template>
 
@@ -21,13 +22,15 @@
 import HeaderBanner from "./components/HeaderBanner";
 import Navigation from "./components/Navigation";
 import LoginInfo from "./components/LoginInfo";
-import Routerbanner from "./components/RouterBanner"
+import Routerbanner from "./components/RouterBanner";
+import FooterBanner from "./components/Footerbanner";
 export default {
   components: {
     HeaderBanner,
     Navigation,
     LoginInfo,
-    Routerbanner
+    Routerbanner,
+    FooterBanner
   },
   data() {
     return {
@@ -54,7 +57,7 @@ export default {
       let token = query.token || '';
       console.log('token:', token);
       if(!token) {
-        alert('token值为空');
+        // alert('token值为空');
         return
       }
       this.$http({
@@ -93,6 +96,7 @@ export default {
   padding: 0;
   margin: 0;
   list-style: none;
+  color: #333;
 }
 button{
   border: none;
@@ -101,14 +105,17 @@ button{
   width: 58px;
   color: #fff;
   font-weight: 400px;
-  font-size: Arial;
+  font-family: Arial;
   margin-left: 18px;
+  font-size: 14px;
   &:hover{
     cursor: pointer;
   }
 }
 #app {
   background-color: #eeeeee;
+  height: 100%;
+  min-height: 100vh;
   // display: none;
   .app_content {
     width: 1190px;
@@ -117,13 +124,21 @@ button{
     color: #333;
     font-family: "微软雅黑";
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     .router{
       width: 150px;
+      height: 100%;
+      background-color: #d4d4d4;
+      height: auto;
     }
     .router_view{
       width: 1030px;
     }
   }
 }
+@media screen and (max-width: 1190px) {
+  #app{
+    width: 1190px;
+  }
+}
 </style>

src/components/Footerbanner.vue

@@ -0,0 +1,57 @@
+<template>
+<div class="footer_banner">
+    <div class="img">
+        <img src="" alt="">
+    </div>
+    <div class="footer_link">
+        <span >版权所有:2014-2016</span>
+        <span>
+            <a href="#">四维卓越信息咨询（北京）有限责任公司</a>
+        </span>
+        <span> | </span>
+        <span>
+            <a href="#">法律公告</a>
+        </span>
+        <span> | </span>
+        <span>
+            <a href="#">商业信息保护说明</a>
+        </span>
+        <span> | </span>
+        <span>
+            <a href="#">技术支持邮箱：lexus-dsms@siweizhuoyue.com</a>
+        </span>
+    </div>
+</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang="less">
+.footer_banner{
+    width: 1190px;
+    height: 40px;
+    margin: 0 auto;
+    margin-top: 20px;
+    background-color: #eee;
+    border-top: 1px solid #ccc;
+    font-size: 12px;
+    display: flex;
+    img{
+        width: 151px;
+        height: 23px;
+        margin-top: 4px;
+    }
+    .footer_link{
+        margin-top: 8px;
+        margin-left: 10px;
+        a{
+            text-decoration: none;
+            &:hover{
+                color: #0056a0;
+            }
+        }
+    }
+}
+</style>

src/components/HeaderBanner.vue

@@ -3,7 +3,7 @@
     <div class="header_mid">
       <div class="log"></div>
       <p>雷克萨斯中国经销商订单管理系统</p>
-      <div class="ope_button">
+      <div class="operation_button">
         <div class="back_button">
           <img src="" alt="">
           <p>返回系统选择页面</p>
@@ -30,6 +30,7 @@ export default {};
     margin: 0 auto;
     display: flex;
     width: 1190px;
+    height: 100%;
     justify-content: space-between;
     .log{
       width: 300px;
@@ -44,7 +45,7 @@ export default {};
       padding-top: 20px;
       font-size: 22px;
     }
-    .ope_button{
+    .operation_button{
       width: 248px;
       height: 50.8px;
       margin: 3px 0 0 40px;
@@ -59,4 +60,9 @@ export default {};
     }
   }
 }
+@media screen and (max-width: 1190px) {
+  .header_banner{
+    width: 1190px;
+  }
+}
 </style>

src/components/LoginInfo.vue

@@ -27,7 +27,7 @@ export default {};
 
 <style scoped lang="less">
 .login_info {
-    background: rgb(212, 212, 212);
+    // background: rgb(212, 212, 212);
     width: 100%;
     .user_info{
         height: 48px;

src/components/RouterBanner.vue

@@ -113,9 +113,7 @@ export default {
 <style scoped lang="less">
 .router_banner {
   width: 100%;
-  margin-top: 10px;
-  background: rgb(212, 212, 212);
-  min-height: 412px;
+  border-top: 10px solid #eee;
   .router_management {
     width: 100%;
     .first_level {
@@ -155,13 +153,14 @@ export default {
       li {
         width: 100%;
         height: 38px;
-        background-color: rgb(212, 212, 212);
         line-height: 38px;
         text-align: center;
-        &:hover {
+        p{
+          &:hover {
           cursor: pointer;
           color: rgb(0, 86, 160);
         }
+        }
       }
     }
   }

src/components/Table.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="table_template">
+    <table class="table">
+        <thead>
+            <tr :style="tableHeadStyle">
+                <td v-for="(item, index) in tableHeader" :key="index">{{ item }}</td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: !discolor && index%2 === 0 }">
+                <td :style="trStyle">{{ index + 1 }}</td>
+                <td v-for="(item, index) in obj" :key="index" :style="trStyle">
+                    {{ item }}
+                </td>
+                <td v-if="operation" :style="trStyle">
+                    <span 
+                        v-for="(operationObj, index) in operation" :key="index"
+                        @click="operationObj.function" 
+                        :style="operationStyle"
+                    >{{ operationObj.name }}
+                    </span>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <div class="page">
+        <div class="fisrtPage">首页</div>
+        <div class="previousPage">上一页</div>
+        <div v-for="(item, index) in pageArr" :key="index" :class="{current_page: currentPage == item}">{{item}}</div>
+        <div class="nextPage">下一页</div>
+        <div class="lastPage">尾页</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        // 表数据
+        tableData: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        // 表头
+        tableHeader: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        // 表头样式
+        tableHeadStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    background: '#848484',
+                    height: '50px',
+                    color: '#fff'
+                }
+            }
+        },
+        // 操作按钮
+        operation: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        // 操作样式
+        operationStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    color: '#0000ff'
+                }
+            }
+        },
+        // 表格除去表头的样式
+        trStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    width: '200px',
+                    height: '50px'
+                }
+            }
+        },
+        // 是否隔行变色
+        discolor: {
+            type: Boolean,
+            default: true
+        },
+        // 每页表格共有多少数据
+        pageSize: {
+            type: Number,
+            default: 20
+        },
+        // 表数据共有多少页
+        totalPage: {
+            type: Number,
+            default: 0
+        },
+        // 当前在第几页
+        currentPage: {
+            type: Number,
+            default: 1
+        }
+    },
+    mounted() {
+        console.log(this.totalPage);
+    },
+    data() {
+        return {
+        }
+    },
+    computed: {
+        pageArr() {
+            let arr = [];
+            for(let i= 1; i <= this.totalPage; i++){
+                arr.push(i);
+            }
+            console.log(arr);
+            return arr;
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+.table_template{
+    margin: 5px;
+    text-align: center;
+    .table{
+        background-color: #fff;
+        border-collapse:collapse;
+        border:none;
+        td{
+            border: 1px solid #ccc;
+        }
+        span{
+            &:hover{
+                cursor: pointer;
+            }
+        }
+    }
+    .page{
+        height: 30px;
+        display: flex;
+        border-left: 1px solid #ccc;
+        div{
+            width: 32px;
+            background-color: #fff;
+            line-height: 30px;
+            border-bottom: 1px solid #ccc;
+            border-right: 1px solid #ccc;
+            &:hover{
+                cursor: pointer;
+            }
+        }
+        .current_page{
+            color: #999;
+            background-color: #f5f5f5;
+        }
+        .fisrtPage{
+            width: 50px;
+        }
+        .previousPage{
+            width: 60px;
+        }
+        .nextPage{
+            width: 60px;
+        }
+        .lastPage{
+            width: 50px;
+        }
+    }
+}
+.table_gray{
+    background: #f5f5f5;
+}
+</style>

src/components/UploadInforTable.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="upload_infor_table">
-    <table class="table">
-        <tr>
-        <td>row 1, cell 1</td>
-        <td>row 1, cell 2</td>
-        </tr>
-        <tr>
-        <td>row 2, cell 1</td>
-        <td>row 2, cell 2</td>
-        </tr>
-        </table>
-  </div>
-</template>
-
-<script>
-export default {
-    // props: {
-    //     tableHeader: {
-    //         type: Array,
-
-    //     }
-    // }
-};
-</script>
-
-<style scoped lang="less">
-.upload_infor_table{
-    margin: 5px;
-    .table{
-        border: 1px solid #eee;
-        background-color: #fff;
-    }
-}
-</style>

src/views/data/UploadInfor.vue

@@ -46,14 +46,22 @@
       </div>
     </form>
     <div class="table">
-      <!-- <UpLoadTable/> -->
+      <UpLoadTable
+        :trStyle='trStyle'
+        :tableHeader='tableHeader'
+        :tableData='tableData'
+        :tableHeadStyle='tableHeadStyle'
+        :operation='operation'
+        :discolor='discolor'
+        :totalPage='totalPage'
+      />
     </div>
-    <button @click="submit">提交</button>
+    <button @click="submit" class="submitBtn">提交</button>
   </div>
 </template>
 
 <script>
-// import UpLoadTable from '../../components/UploadInforTable';
+import UpLoadTable from '../../components/Table';
 export default {
   props:{
     isManufacturer: {
@@ -61,9 +69,9 @@ export default {
       default: 'distributor'
     },
   },
-  // components: {
-  //   UpLoadTable
-  // },
+  components: {
+    UpLoadTable,
+  },
   data() {
     return {
       inforName: '',
@@ -71,13 +79,47 @@ export default {
       materialTime: '',
       range: '',
       addByCustomize: '',
+      // 表格配置
+      sum: 100, // 一共有多少条数据
+      pageSize: 20, // 每页展示的数据
+      discolor: false, // 是否隔行变色
       areaList: ['全区', '北区', '南区', '东区', '自定义分组'],
       materialTimeList: ['2020-03', '2020-04'],
-      rangeList: ['1', '2', '3']
+      rangeList: ['1', '2', '3'],
+      tableHeader: ['序号', '经销商名称', 'DLR Code', '所属区域', '筛选'],
+      tableData: [{name: '北京博瑞',code: 'L020',area: '东区'},{name: 'a',code: 'a',area: 'N'},{name: 'a',code: 'a',area: 'N'}],
+      tableHeadStyle: {
+        background: '#848484',
+        height: '30px',
+        color: '#fff'
+      },
+      operation: [
+        {
+          name: '查看',
+          function: () => {
+            this.showDetail();
+          }
+        }
+      ],
+      trStyle: {
+        width: '200px',
+        height: '30px'
+      }
+    }
+  },
+  computed:{
+    // 表格总页数
+    totalPage() {
+      return Math.ceil(this.sum/this.pageSize);
     }
   },
   methods: {
+    showDetail: () => {
+      alert('展示详情');
+    },
     submit: function() {
+      console.log(this.totalPage);
+      this.sum = this.sum + 1;
       console.log(this.inforName, this.inforDes, this.materialTime, this.range, this.addByCustomize);
     } 
   }
@@ -151,6 +193,12 @@ export default {
       height: 28px;
     }
   }
+  .table{
+    margin-top: 20px;
+  }
+  .submitBtn{
+    margin-top: 50px;
+  }
 }
 .inputStyle{
   margin-left: 17px;