新增页面以及样式修改

src/assets/css/iview_style_reset.scss

@@ -130,8 +130,25 @@
 .ivu-form-item-content {
     color: #fff;
 }
-
-
+.images-card > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
+    border-radius: 0;
+    background: #fff;
+}
+.images-card > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
+    background: #1873FF;
+    color: #fff;
+    border-color: #1873FF;
+}
+.images-card {
+    .ivu-tabs-bar {
+        margin-bottom: 0;
+        border-bottom: none;
+    }
+    .ivu-tabs-content {
+        padding: 15px;
+        border: 1px solid #555;
+    }
+}
 
 
 

src/components/menu.vue

@@ -66,7 +66,7 @@ export default {
                 {name: "Active Directory", link: '/index/active_directory', isDisabel: false},
                 {name: "DNS", link: '/index/dns', isDisabel: false},
                 {name: "事件日志", link: '/index/event_log', isDisabel: false},
-                {name:"Images重定向", link:'index/', isDisabel: false},
+                {name:"Images重定向", link:'/index/images_redirection', isDisabel: false},
                 {name:"LDAP/E-Directory", link:'index/', isDisabel: false},
                 {name:"证书", link:'index/', isDisabel: false},
                 {name:"鼠标的模式", link:'index/', isDisabel: false},

src/router/index.js

@@ -51,6 +51,13 @@ const router = new Router({
                     },
                     component: r => require.ensure([], () => r(require('../views/configuration/EventLog')), 'configuration'),
                 },
+                {
+                    path: 'images_redirection',
+                    meta: {
+                        title: 'Images重定向'
+                    },
+                    component: r => require.ensure([], () => r(require('../views/configuration/ImagesRedirection')), 'configuration'),
+                },
             ]
         },
         {

src/views/configuration/ImagesRedirection.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="images-redirection">
+        <div class="configuration-title">Images Redirection</div>
+        <div  class="configuration-btn-right">
+            <Button type="primary">Advanced Settings</Button>
+        </div>
+        <div class="images-card">
+            <Tabs type="card" :animated="false">
+                <TabPane label="Local Media">
+                    <div class="configuration-table">
+                        <Table :columns="columnsLocal" :data="dataLocal" size="small" ref="table"></Table>
+                    </div>
+                </TabPane>
+                <TabPane label="Remote Media">
+                    <div class="configuration-table">
+                        <Table :columns="columnsRemote" :data="dataRemote" size="small" ref="table"></Table>
+                    </div>
+                </TabPane>
+                <div class="configuration-btn-right">
+                    <Button type="primary" style="margin-right: 10px;">Start Redirection</Button>
+                    <Button type="primary" style="margin-right: 10px;">Add Image</Button>
+                    <Button type="primary" style="margin-right: 10px;">Replace Image</Button>
+                    <Button type="primary">Delete Image</Button>
+                </div>
+            </Tabs>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ImagesRedirection",
+        data() {
+            return {
+                columnsLocal: [
+                    {
+                        "title": "#",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Type",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Name",
+                        "key": "Domain",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Information ",
+                        "key": "Privilege",
+                        "sortable": true
+                    }
+                ],
+                dataRemote: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    }
+                ],
+                columnsRemote: [
+                    {
+                        "title": "#",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Type",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Name",
+                        "key": "Domain",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Redirection Status",
+                        "key": "Privilege",
+                        "sortable": true
+                    }
+                ],
+                dataLocal: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/index.vue

@@ -30,19 +30,19 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 .index{
-  
+
 }
 .dashbord-contanier{
-  
+
   margin: 10 auto;
 
 }
 .content{
-  width: 1200px;
+  /*width: 1200px;*/
   margin: 10px auto;
-  height: 800px;
-  overflow-y: scroll;
-  overflow-x: hidden;
+  /*height: 800px;*/
+  /*overflow-y: scroll;*/
+  /*overflow-x: hidden;*/
 }
 .content::-webkit-scrollbar {
     /*display: none;*/