改样式

web/package-lock.json

@@ -2139,16 +2139,6 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1616431241238&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -2175,34 +2165,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "cssnano": {
           "version": "4.1.11",
           "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@@ -2215,25 +2177,6 @@
             "postcss": "^7.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -2250,16 +2193,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz",
@@ -2276,18 +2209,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -14600,6 +14521,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-quill-editor": {
       "version": "3.0.6",
       "resolved": "https://registry.npm.taobao.org/vue-quill-editor/download/vue-quill-editor-3.0.6.tgz",

web/src/App.vue

@@ -21,17 +21,23 @@ html, body, #app {
 }
 
 .el-table th.is-leaf {
-  background: rgba(250, 250, 250, 1);
+  background: rgba(235,241,255);
   border-top: 1px solid #EBEEF5;
 }
 
+.el-table th.el-table__cell{
+  background: rgba(235,241,255)!important;
+  color: #333333!important;
+  font-weight: normal!important;
+}
+
 .menu-content {
   margin: 25px;
   background: #FFFFFF;
   overflow: auto;
   position: absolute;
-  left: 290px;
+  left: 260px;
-  top: 100px;
+  top: 40px;
   bottom: 0;
   right: 0;
   padding: 25px;
@@ -70,4 +76,75 @@ html, body, #app {
   height: 178px;
   display: block;
 }
+
+.login-input .el-input__inner{
+  height: 60px!important;
+  line-height: 60px!important;
+  border-radius: 10px!important;
+  font-size: 16px!important;
+  padding: 0px 30px 0 60px!important;
+}
+
+.login-input i{
+  font-size: 30px!important;
+  line-height: 60px!important;
+  margin-left: 15px!important;
+}
+
+.login-button{
+  height: 60px!important;
+  width: 100%!important;
+  border-radius: 10px!important;
+  //background: rgba(16,108,255, 1);
+  border: none;
+  font-size: 16px!important;
+  letter-spacing:5px!important;
+  margin-bottom: 20px;
+}
+
+/*滚动条样式*/
+::-webkit-scrollbar {/*滚动条整体样式*/
+  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px #d9d9d9;
+  background: #d9d9d9;
+}
+
+::-webkit-scrollbar-track { /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px #ffffff;
+  border-radius: 0;
+  background: #ffffff;
+}
+
+.el-dialog__header{
+  background: cornflowerblue;
+  padding-bottom:15px!important;
+  padding-top: 15px!important;
+}
+
+.el-dialog__title{
+  color: #ffffff!important;
+}
+
+.el-dialog__headerbtn .el-dialog__close{
+  color: #ffffff!important;
+}
+
+.el-dialog__body{
+  padding-bottom:20px!important;
+}
+
+.content-box .el-input__inner{
+  height: 33px!important;
+  line-height: 33px!important;
+}
+
+.content-box .el-button--primary,.content-box .el-button--default{
+  padding: 9px 15px!important;
+  font-size: 12px!important;
+}
 </style>

web/src/components/graph/GraphSpace.vue

@@ -791,7 +791,7 @@ function refreshDragedNodePosition(e) {
 }
 
 .graph-info-box {
-  left: 0;
+  left: 20px;
   width: 230px;
 }
 

web/src/components/menus/EntrysManage.vue

@@ -6,11 +6,11 @@
     <div class="menu-content">
       <div>
         <el-form :inline="true" :model="qo" class="demo-form-inline">
-          <el-form-item>
+          <el-form-item label="种类：">
-            <el-input v-model="qo.LIKES_categories" placeholder="请输入种类" clearable></el-input>
+            <el-input v-model="qo.LIKES_categories" placeholder="请输入种类" clearable  style="width: 300px"></el-input>
           </el-form-item>
-          <el-form-item>
+          <el-form-item label="标签：">
-            <el-input v-model="qo.LIKES_labels" placeholder="请输入标签" clearable></el-input>
+            <el-input v-model="qo.LIKES_labels" placeholder="请输入标签" clearable  style="width: 300px"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
@@ -18,7 +18,7 @@
         </el-form>
       </div>
       <div style="margin: 0px 0 20px 0">
-        <el-button type="primary" @click="createRow()">添加</el-button>
+        <el-button type="primary" @click="createRow()" icon="el-icon-plus">添 加</el-button>
       </div>
       <div>
         <el-table  :data="result.records" style="width: 100%">

web/src/components/menus/FeedbackTypeManage.vue

@@ -6,8 +6,8 @@
     <div class="menu-content">
       <div>
         <el-form :inline="true" :model="qo" class="demo-form-inline">
-          <el-form-item>
+          <el-form-item label="名称：">
-            <el-input v-model="qo.LIKES_name" placeholder="请输入名称" clearable></el-input>
+            <el-input v-model="qo.LIKES_name" placeholder="请输入名称" clearable  style="width: 300px"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
@@ -15,7 +15,7 @@
         </el-form>
       </div>
       <div style="margin: 0px 0 20px 0">
-        <el-button type="primary" @click="createRow()">添加</el-button>
+        <el-button type="primary" @click="createRow()" icon="el-icon-plus">添 加</el-button>
       </div>
       <div>
         <el-table  :data="result.records" style="width: 100%">

web/src/components/menus/GraphImport.vue

@@ -26,12 +26,12 @@
                         :on-change="handleFileChange"
                         :limit="2"
                         :show-file-list="false">
-                  <el-button type="primary">上传文件</el-button>
+                  <el-button type="primary" icon="el-icon-upload2">上传文件</el-button>
                 </el-upload>
               </div>
             </el-col>
             <el-col :span="2">
-              <el-button type="primary" style="float:right;" @click="queryData" :loading="btLoading">执行</el-button>
+              <el-button type="primary" style="float:right;" @click="queryData" :loading="btLoading"  icon="el-icon-check">执行</el-button>
             </el-col>
           </el-row>
           <div><a :href="path+'template.xlsx'" download="template.xlsx" style="text-decoration:underline;color: #0D6DFF">下载模板</a></div>
@@ -58,7 +58,7 @@
             <el-col :span="10">
               <div >
                 <label>请选择文件：</label>
-                <el-input v-model="fileName" readonly style="margin-right: 20px;width: calc(100% - 204px)" disabled></el-input>
+                <el-input v-model="fileName" readonly style="margin-right: 20px;width: calc(100% - 254px)" disabled></el-input>
                 <el-upload
                         ref="upload" style="display: inline-block"
                         :auto-upload="false"
@@ -66,13 +66,13 @@
                         :on-change="handleFileChange"
                         :limit="2"
                         :show-file-list="false">
-                  <el-button type="primary">上传文件</el-button>
+                  <el-button type="primary" icon="el-icon-upload2">上传文件</el-button>
                 </el-upload>
               </div>
               <div style="color: red;margin-top: 10px">* zip文件必须包含vertex.json、edge.json</div>
             </el-col>
             <el-col :span="2">
-              <el-button type="primary" style="float:right;" @click="startSpace">执行</el-button>
+              <el-button type="primary" style="float:right;" @click="startSpace" icon="el-icon-check">执行</el-button>
             </el-col>
           </el-row>
           <div><a :href="path+'图谱数据.zip'" download="图谱数据.zip" style="text-decoration:underline;color: #0D6DFF">下载模板</a></div>

web/src/components/menus/GraphModel.vue

@@ -6,8 +6,8 @@
     <div class="menu-content">
       <div>
         <el-form :inline="true" :model="qo" class="demo-form-inline">
-          <el-form-item>
+          <el-form-item label="本体名称：">
-            <el-input v-model="qo.LIKES_name" placeholder="请输入本体名称"></el-input>
+            <el-input v-model="qo.LIKES_name" placeholder="请输入本体名称" style="width: 300px"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
@@ -15,7 +15,7 @@
         </el-form>
       </div>
       <div style="margin: 0px 0 20px 0">
-        <el-button type="primary" @click="createRow()">新建知识图谱本体</el-button>
+        <el-button type="primary" @click="createRow()" icon="el-icon-plus">新建知识图谱本体</el-button>
       </div>
       <div>
         <el-table  :data="result.records" style="width: 100%">

web/src/components/menus/GraphSpaceManage.vue

@@ -6,8 +6,8 @@
     <div class="menu-content">
       <div>
         <el-form :inline="true" :model="qo" class="demo-form-inline">
-          <el-form-item>
+          <el-form-item label="图谱名称：">
-            <el-input v-model="qo.LIKES_name" placeholder="请输入图谱名称"></el-input>
+            <el-input v-model="qo.LIKES_name" placeholder="请输入图谱名称"  style="width: 300px"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
@@ -15,7 +15,7 @@
         </el-form>
       </div>
       <div style="margin: 0px 0 20px 0">
-        <el-button type="primary" @click="createRow()">新建知识图谱</el-button>
+        <el-button type="primary" @click="createRow()" icon="el-icon-plus">新建知识图谱</el-button>
       </div>
       <div>
         <el-table  :data="result.records" style="width: 100%">

web/src/components/menus/HomePage.vue

@@ -5,13 +5,18 @@
     </div>
     <div class="home-box">
       <div class="counts-box">
-        <div class="count-item" v-for="(value, key) in count" :key="key">
+        <div class="count-item" v-for="(value, key, i) in count" :key="key">
-          <div>{{ key }}</div>
+          <div class="count-img" :style="{background:colorArray[i].color}">
-          <div>{{ value }}</div>
+            <i :class="colorArray[i].icon"></i>
+          </div>
+          <div  class="count-title">
+            <div class="name">{{ key }}</div>
+            <div class="count">{{ value }}</div>
+          </div>
         </div>
       </div>
       <div class="chart-box">
-        <div class="title">正反馈率</div>
+        <div class="title"><i class="el-icon-s-data" style="margin-right: 10px;font-size: 18px"></i>正反馈率</div>
         <div id="chart"></div>
       </div>
     </div>
@@ -33,7 +38,14 @@ export default {
         '总反馈': '267,610',
         '正面反馈': '120,927',
         '负面反馈': '51,123'
-      }
+      },
+      colorArray:[
+        {color:"linear-gradient(#2196F3, #2196f394)",icon:"el-icon-user-solid",font:"#2196F3"},
+        {color:"linear-gradient(#FF9800, #ff980094)",icon:"el-icon-s-goods",font:"#FF9800"},
+        {color:"linear-gradient(#F44336, #f44336b5)",icon:"el-icon-document-remove",font:"#F44336"},
+        {color:"linear-gradient(#4CAF50, #8bc34abf)",icon:"el-icon-document-checked",font:"#4CAF50"},
+        {color:"linear-gradient(#c862d9, #c862d9bf)",icon:"el-icon-document-delete",font:"#c862d9"}
+      ]
     }
   },
   mounted() {
@@ -46,8 +58,8 @@ export default {
       let chart = _this.$echarts.init(dom);
       chart.setOption({
         grid: {
-          left: '3%',
+          left: '5%',
-          right: '3%'
+          right: '5%'
         },
         xAxis: {
           type: 'category',
@@ -60,12 +72,46 @@ export default {
           {
             name: 'like',
             data: [0.1, 0.23, 0.52, 0.44, 0.49, 0.78, 1],
-            type: 'line'
+            type: 'line',
+            // 区域填充样式
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#557cc7' // 0% 处的颜色
+                },{
+                  offset: 0.2, color: 'rgba(85,124,199,0.2)' // 0% 处的颜色
+                }, {
+                  offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
+                }],
+              }
+            },
           },
           {
             name: 'star',
             data: [0.92, 0.7, 0.65, 0.44, 0.55, 0.55, 0.78],
-            type: 'line'
+            type: 'line',
+            // 区域填充样式
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgb(145,204,117)' // 0% 处的颜色
+                },{
+                  offset: 0.2, color: 'rgba(145,204,117,0.2)' // 0% 处的颜色
+                }, {
+                  offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
+                }],
+              }
+            },
           }
         ]
       });
@@ -80,30 +126,33 @@ export default {
 }
 
 .home-box {
-  padding: 0 30px;
+  padding: 20px 30px 0 30px;
 
-  height: calc(100% - 160px);
+  height: calc(100% - 100px);
   .chart-box {
     background-color: #fff;
     box-shadow: 0px 5px 12px 1px rgba(105, 105, 105, 0.12);
-    border-radius: 10px;
+    border-radius: 4px;
     overflow: hidden;
     margin-top: 30px;
-    height: calc(100% - 200px);
+    height: calc(100% - 130px);
 
     #chart {
       width: 100%;
-      height: calc(100% - 60px);
+      height: calc(100% - 50px);
     }
 
     .title {
       width: 100%;
-      height: 60px;
+      height: 50px;
-      line-height: 60px;
+      margin-top: 10px;
-      padding-left: 20px;
+      line-height: 50px;
-      font-size: 18px;
+      padding-left: 30px;
-      color: #626672;
+      font-size: 16px;
-      border-bottom: 1px solid rgba(105, 105, 105, 0.12);
+      color: #666666;
+      font-weight: bold;
+      //background: #f0f5fa;
+      //border-bottom: 1px solid rgba(105, 105, 105, 0.12);
     }
   }
 
@@ -113,26 +162,44 @@ export default {
 
     .count-item {
       width: 18%;
-      height: 165px;
+      height: 100px;
       background-color: #fff;
       box-shadow: 0px 5px 12px 1px rgba(105, 105, 105, 0.12);
-      text-align: center;
+      //text-align: center;
-      border-radius: 10px;
+      border-radius: 4px;
+      display: flex;
 
       &:hover {
         transform: scale(1.03);
       }
 
-      > div:first-child {
+      .count-img{
-        font-size: 18px;
+        width: 80px;
-        padding-top: 35px;
+        color:#ffffff;
-        color: rgba(103, 109, 122, 0.58);
+        font-size: 40px;
+        text-align: center;
+        line-height: 100px;
+        height: 100px;
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
       }
 
-      > div:last-child {
+      .count-title{
-        font-size: 40px;
+        flex: 1;
+        margin: 0 20px;
+      }
+
+      .name {
+        font-size: 14px;
+        padding-top: 20px;
+        color: #333333;
+        //font-weight: bold;
+      }
+
+      .count {
+        font-size: 30px;
         color: #3e4c5c;
-        padding-top: 25px;
+        padding-top: 15px;
       }
     }
   }

web/src/components/menus/UserManage.vue

@@ -6,8 +6,8 @@
     <div class="menu-content">
       <div>
         <el-form :inline="true" :model="qo" class="demo-form-inline">
-          <el-form-item>
+          <el-form-item label="Fid：">
-            <el-input v-model="qo.LIKES_fid" placeholder="请输入Fid" clearable></el-input>
+            <el-input v-model="qo.LIKES_fid" placeholder="请输入Fid" clearable  style="width: 300px"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" @click="qo.pageNo=1;queryData()">搜 索</el-button>
@@ -15,7 +15,7 @@
         </el-form>
       </div>
       <div style="margin: 0px 0 20px 0">
-        <el-button type="primary" @click="createRow()">添加</el-button>
+        <el-button type="primary" @click="createRow()" icon="el-icon-plus">添 加</el-button>
       </div>
       <div>
         <el-table  :data="result.records" style="width: 100%">

web/src/store/modules/user.js

@@ -1,11 +1,11 @@
 import {login, loginUser, getInfoAdmin, logout, getInfo} from '@/api/user'
-import {getToken, setToken, removeToken} from '@/utils/auth'
+import {getToken, setToken, removeToken, getName, setName} from '@/utils/auth'
 import {resetRouter} from '@/router'
 
 const getDefaultState = () => {
     return {
         token: getToken(),
-        name: '',
+        name: getName(),
         avatar: ''
     }
 }
@@ -20,7 +20,7 @@ const mutations = {
         state.token = token
     },
     SET_NAME: (state, name) => {
-        state.name = name
+        state.name = name;
     },
     SET_AVATAR: (state, avatar) => {
         state.avatar = avatar
@@ -34,8 +34,9 @@ const actions = {
         return new Promise((resolve, reject) => {
             login({username: username.trim(), password: password, type: type}).then(response => {
                 const res = response;
-                commit('SET_TOKEN', res.data);
+                commit('SET_TOKEN', res.data.Authorization);
                 setToken(res.data.Authorization);
+                setName(res.data.user.realname);
                 resolve(res)
             }).catch(error => {
                 reject(error)
@@ -53,7 +54,7 @@ const actions = {
                     return reject('权限异常，请重新登录！')
                 }
 
-                commit('SET_NAME', data.realName)
+                commit('SET_NAME', data.realname)
                 resolve(data)
             }).catch(error => {
                 reject(error)

web/src/utils/auth.js

@@ -11,3 +11,11 @@ export function setToken(token) {
 export function removeToken() {
   return localStorage.removeItem(TokenKey)
 }
+
+export function getName() {
+  return localStorage.getItem(TokenKey + "_name")
+}
+
+export function setName(name) {
+  return localStorage.setItem(TokenKey + "_name", name)
+}

web/src/views/Index.vue

@@ -1,13 +1,11 @@
 <template>
   <div id="menuBox">
-    <div class="header-box">
-      <div class="logo">{{ title }}</div>
-      <div class="info-box">
-        <div class="btn-logout" @click="logout()">注销</div>
-        <div class="user-name-label">{{ info.userName }}</div>
-      </div>
-    </div>
     <div class="menu-box">
+      <div class="content-title">
+        <img src="../assets/image/content-logo.png" class="content-logo">
+        <div class="first-title">{{ title }}</div>
+        <div class="user-name">欢迎您，{{ $store.getters.name }}</div>
+      </div>
       <el-menu :default-active="activeIndex" class="el-menu-vertical-demo">
         <template v-for="item in menuList">
           <el-submenu :index="item.index" :key="item.index" v-if="item.list"
@@ -29,6 +27,9 @@
           </el-menu-item>
         </template>
       </el-menu>
+      <div class="out-login">
+        <el-button type="success" @click="logout" icon="el-icon-switch-button" size="small" style="margin-top: 20px">退出登录</el-button>
+      </div>
     </div>
     <div class="content-box">
       <router-view ref="routeNode"></router-view>
@@ -41,7 +42,6 @@
 import {getMenuList} from "../utils/menu";
 import {title} from "@/settings";
 import request from '@/utils/request';
-
 var _this;
 export default {
   name: "Menu",
@@ -60,6 +60,7 @@ export default {
     _this = this;
     _this.activeMenu = this.$route.path == "/" ? "/graphModel" : this.$route.path;
     _this.queryInfo();
+    console.log(this.$store.getters)
   },
   methods: {
     gotoMenu(item) {
@@ -127,7 +128,8 @@ export default {
     width: 100%;
     box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
     overflow: hidden;
-    color: #0070f7;
+    color: #ffffff;
+    background: #2780ff;
 
     .logo {
       float: left;
@@ -135,9 +137,20 @@ export default {
       overflow: hidden;
       height: 100%;
       line-height: 60px;
-      font-size: 24px;
+      font-size: 20px;
       padding-left: 30px;
+      letter-spacing:3px;
+      background: linear-gradient(to bottom, #a8b6c9, white);
+      -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text;
+      font-weight: bolder;
       /*font-weight: bold;*/
+
+      .logo-img{
+        width: 35px;
+        vertical-align: middle;
+        margin-right: 15px;
+      }
     }
 
     .info-box {
@@ -157,24 +170,28 @@ export default {
 
       .user-name-label {
         height: 100%;
-        font-size: 16px;
+        color: #d9d9d9;
-        color: rgb(170, 170, 170);
         margin-left: 20px;
         float: right;
         line-height: 70px;
+        i{
+          margin-right: 5px;
+        }
       }
 
       .btn-logout {
         border-radius: 5px;
         /*border: 1px solid rgb(167, 210, 249);*/
-        color: rgb(0, 153, 255);
+        color: #ffffff;
-        background-color: rgba(236, 245, 255, 1);
         margin-left: 15px;
         margin-top: 20px;
         margin-right: 20px;
         float: right;
         padding: 6px 10px;
         cursor: pointer;
+        i{
+          margin-right: 5px;
+        }
       }
     }
   }
@@ -217,26 +234,77 @@ export default {
 
   .el-menu-item-group {
     .el-menu-item {
-      color: rgba(175, 169, 169, 0.76);
+      color: #999999;
     }
 
     .el-menu-item.is-active {
-      color: #fff !important;
+      color: #2780ff !important;
+      border-left: 5px solid #2780ff;
+      i{
+        color: #2780ff !important;
+      }
     }
   }
 
   .el-menu-item-group:hover {
-    background: #eeeeee;
+    background: rgba(240, 245, 250, 1);
-    color: #fff !important;
+    color: #2780ff !important;
   }
 
   .menu-box {
-    width: 290px;
+    width: 260px;
-    height: calc(100% - 60px);
+    height: 100%;
-    background: #2780ff;
+    //background: #2780ff;
+    color: #333333;
     float: left;
+    //overflow-y: auto;
+    position: relative;
 
+    .out-login{
+      position: absolute;
+      bottom:0px;
+      left: 0px;
+      right: 0px;
+      height: 80px;
+      text-align: center;
+      background: #ffffff;
+    }
+
+    .el-menu-vertical-demo{
+      height: calc(100% - 300px);
       overflow-y: auto;
+    }
+
+    .content-title{
+      height: 220px;
+      text-align: center;
+
+
+      .content-logo{
+        text-align: center;
+        width: 60px;
+        margin-top: 40px;
+        margin-bottom: 30px;
+      }
+
+      .first-title{
+        font-size: 20px;
+        letter-spacing:3px;
+        font-weight: bold;
+        background: linear-gradient(to bottom, #1652D5, cornflowerblue);
+        -webkit-text-fill-color: transparent;
+        -webkit-background-clip: text;
+        padding-bottom: 30px;
+      }
+
+      .user-name{
+        font-weight: normal;
+        font-size: 14px;
+        text-align: left;
+        margin: 0 30px;
+        color: brown;
+      }
+    }
 
     .system-title {
       height: 70px;
@@ -250,49 +318,56 @@ export default {
 
 
     ul {
-      background: rgba(42, 70, 170, 0.3);
+      //background: rgba(42, 70, 170, 0.3);
 
+      .el-menu-item{
+        border-left: 5px solid transparent;
+      }
       .el-menu-item:hover {
-        background: #1c4ec8;
+        background: rgba(240, 245, 250, 1);
       }
 
       .el-menu-item.is-active {
-        background: #1c4ec8;
+        background: rgba(240, 245, 250, 1);
-        color: #ffffff;
+        color: #2780ff;
+        border-left: 5px solid #2780ff;
+        i{
+          color: #2780ff;
+        }
 
         span {
-          color: #ffffff;
+          color: #2780ff;
         }
       }
 
       .el-submenu.is-active .el-submenu__title i, .el-submenu.is-active .el-submenu__title span {
-        color: #ffffff !important;
+        color: #2780ff !important;
       }
 
       li {
         .el-menu {
-          background: #1652D5;
+          background: #ffffff;
 
           li {
-            background: #1652D5;
+            background: #ffffff;
           }
         }
 
         span {
-          color: rgba(255, 255, 255, 0.76);
+          color: #666666;
         }
 
         i {
-          color: rgba(255, 255, 255, 0.76);
+          color: #666666;
         }
 
         .el-submenu__title {
           i {
-            color: rgba(255, 255, 255, 0.76);
+            color: #666666;
           }
 
           span {
-            color: rgba(255, 255, 255, 0.76);
+            color: #666666;
           }
         }
       }
@@ -309,7 +384,7 @@ export default {
 
   .content-box {
     float: left;
-    width: calc(100% - 15.10417vw);
+    width: calc(100% - 13.54167vw);
     height: 100%;
     display: block;
     background: #F0F2F5;
@@ -318,14 +393,23 @@ export default {
     .menu-title {
       width: 100%;
       /*background: #FFFFFF;*/
-      height: 68px;
+      //height: 68px;
-      line-height: 68px;
+      //line-height: 68px;
       /*border-top: 1px solid rgb(233, 233, 233);*/
       /*border-bottom: 1px solid rgb(233, 233, 233);*/
       padding: 0 30px;
       font-size: 18px;
       font-weight: bold;
       color: #4E5054;
+      padding-top: 20px;
+    }
+
+    .menu-title::after {
+      content: "";
+      display: block;
+      width: 20px;
+      height: 5px;
+      background: #2780ff;
     }
   }
 

web/src/views/Login.vue

@@ -1,27 +1,30 @@
 <template>
-  <div id="loginManage">
+  <div id="login">
-    <div class="login-box">
     <div class="login-content">
-        <div class="content-title">推荐系统</div>
+      <div class="logo-img">
+        <img src="../assets/image/ambari-logo.png">
+        <label class="left-title">推荐系统</label>
+      </div>
+      <div class="login-center">
+        <div class="left-content">
+          <img src="../assets/image/login-img.png" class="login-img">
+        </div>
+        <div class="right-content">
+          <div class="login-title">登录</div>
+          <div class="second-title">账号密码登录</div>
           <el-form ref="form" :model="form" label-width="0px">
-          <el-form-item label="">
+            <el-form-item label="" style="margin-bottom: 30px">
-            <el-input placeholder="账号" v-model="form.username">
+              <el-input placeholder="账号" prefix-icon="el-icon-user" class="login-input" v-model="form.username"></el-input>
-              <template slot="prepend"><i class="el-icon-user"></i></template>
-            </el-input>
             </el-form-item>
-          <el-form-item label="">
+            <el-form-item label=""  style="margin-bottom: 30px">
-            <el-input type="password" placeholder="密码" v-model="form.password">
+              <el-input type="password" placeholder="密码" prefix-icon="el-icon-lock"  class="login-input" v-model="form.password"></el-input>
-              <template slot="prepend"><i class="el-icon-lock"></i></template>
-            </el-input>
             </el-form-item>
-          <label style="float: left;color: #a8a8a8;margin-bottom: 25px">如果忘记密码，请联系系统管理员！</label>
+            <div style="color: #333;letter-spacing:1px;font-size: 15px;margin-bottom: 30px">如果忘记密码，请联系管理员！</div>
             <el-form-item>
-            <el-button type="primary" style="width: 100%" @click="login()">登录</el-button>
+              <el-button type="primary" class="login-button" style="width: 100%" @click="login()">登录</el-button>
             </el-form-item>
           </el-form>
-        <!--<div style="text-align: center;width: 100%;margin-top: 25px;color: #333333;cursor: pointer"-->
+      </div>
-        <!--@click="register">注册-->
-        <!--</div>-->
     </div>
   </div>
   </div>
@@ -44,7 +47,7 @@ export default {
   methods: {
     login() {
       this.$store.dispatch('user/login', this.form).then((res) => {
-        this.$router.push('/graphModel');
+        this.$router.push('/homePage');
       }).catch((res) => {
         console.log(res);
       })
@@ -57,59 +60,117 @@ export default {
 </script>
 
 <style scoped lang="scss">
-#loginManage {
+#login{
   position: fixed;
-  top: 0;
+  left: 0px;
-  left: 0;
+  right: 0px;
-  width: 100%;
+  top: 0px;
-  height: 100%;
+  bottom: 0px;
-  background: url("../assets/image/manage-bg.jpg") no-repeat;
+  background: url('../assets/image/manage-bg.jpg') no-repeat;
-  background-size: cover;
+  background-size: 100% 100%;
-  overflow-y: auto;
 
-  .login-box {
+  .login-content{
-    width: 300px;
+    left: 0px;
-    margin: 250px auto 0 auto;
+    right: 0px;
-    height: 500px;
+    top: 0px;
-    /*display: flex;*/
+    bottom: 0px;
+    //background: rgba(75, 100, 216, 0.74);
+    background: linear-gradient(192deg, rgba(85, 111, 231, 0.3) 0%, rgba(68, 93, 208, 0.3) 100%);
+    //background: linear-gradient(to right, rgba(75, 100, 216, 0.4), rgba(75, 100, 216, 0.74));
+    position: absolute;
+    z-index: 1;
+
+    .logo-img{
+      position: absolute;
+      top: 40px;
+      left: 50px;
+
+      img{
+        width: 50px;
       }
 
-  .login-title {
+      .left-title{
+        color: #ffffff;
+        line-height: 50px;
+        font-weight: bolder;
+        letter-spacing:3px;
+        height: 50px;
+        font-size: 26px;
+        vertical-align: bottom;
+        padding-left: 30px;
+      }
+    }
+
+    .login-center{
+      width: 1400px;
+      margin: 180px auto 0 auto;
+      height:600px;
+      border-radius: 20px;
+      display: flex;
+
+
+      .left-content{
         flex: 1;
-    background: #6486aa4d;
+        //background: rgba(63,81,181,0.5);
+        //border-top-left-radius: 10px;
+        //border-bottom-left-radius: 10px;
+        position: relative;
 
-    .login-logo {
+        .left-title{
-      font-size: 40px;
+          position: absolute;
+          left: 0px;
+          top: -30px;
+          font-size: 35px;
           color: #ffffff;
-      font-weight: bold;
+          line-height: 60px;
-      margin-bottom: 30px;
+          font-weight: bolder;
-      margin-top: 150px;
+          letter-spacing:3px;
-      margin-left: 210px;
         }
 
-    .title-name {
+        .login-title{
-      font-size: 36px;
+          position: absolute;
-      color: #ffffff;
+          left: 0px;
-      /*text-align: center;*/
+          top: 0px;
-      margin-left: 210px;
+        }
+
+        .login-img{
+          position: absolute;
+          bottom: -40px;
+          left: 45%;
+          width: 120%;
+          margin-left: -60%;
         }
       }
 
-  .login-content {
+      .right-content{
-    width: 300px;
+        width: 500px;
-    height: auto;
+        padding: 70px 60px 0 60px;
-    padding: 80px 60px;
+        //background: rgba(100,121,222,0.25);
-    background: #FFFFFF;
+        background: #fff;
-    border-radius: 3px;
+        border-radius: 10px;
+        box-sizing: border-box;
+
+        .login-title{
+          font-size: 30px;
+          font-weight: 600;
+          color: #333;
+          letter-spacing:5px;
+          height: 50px;
+          line-height: 50px;
         }
 
-  .content-title {
+        .second-title{
+          letter-spacing:2px;
+          height: 30px;
+          line-height: 30px;
           font-size: 20px;
-    text-align: center;
+          color: #666;
-    font-weight: bold;
+          margin-top: 30px;
-    color: #409EFF;
+          margin-bottom: 30px;
-    margin-bottom: 60px;
+        }
+      }
+    }
   }
-
 }
 </style>
+