确定系统ui风格

.env.development

@@ -1,11 +1,13 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 铭汉能耗监测控制系统
 
 # 开发环境配置
 ENV = 'development'
 
-# 若依管理系统/开发环境
-VUE_APP_BASE_API = '/dev-api'
+# 开发环境
+# VUE_APP_BASE_API = '/dev-api'
+# 后台
+VUE_APP_BASE_API = 'http://192.168.1.222:8080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -1,8 +1,8 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 铭汉能耗监测控制系统
 
 # 生产环境配置
 ENV = 'production'
 
-# 若依管理系统/生产环境
+# 生产环境
 VUE_APP_BASE_API = '/prod-api'

public/index.html

@@ -118,7 +118,7 @@
       top: 0;
       width: 51%;
       height: 100%;
-      background: #7171C6;
+      background: #002249;
       z-index: 1000;
       -webkit-transform: translateX(0);
       -ms-transform: translateX(0);

src/assets/excel/Blob.js

@@ -0,0 +1,140 @@
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+(function (view) {
+    view.URL = view.URL || view.webkitURL;
+    if (view.Blob && view.URL) {
+      try {
+        new Blob;
+        return
+      } catch (e) {
+      }
+    }
+    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
+      var get_class = function (object) {
+          return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1]
+        }, FakeBlobBuilder = function BlobBuilder() {
+          this.data = []
+        }, FakeBlob = function Blob(data, type, encoding) {
+          this.data = data;
+          this.size = data.length;
+          this.type = type;
+          this.encoding = encoding
+        }, FBB_proto = FakeBlobBuilder.prototype, FB_proto = FakeBlob.prototype, FileReaderSync = view.FileReaderSync,
+        FileException = function (type) {
+          this.code = this[this.name = type]
+        },
+        file_ex_codes = ("NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR").split(" "),
+        file_ex_code = file_ex_codes.length, real_URL = view.URL || view.webkitURL || view,
+        real_create_object_URL = real_URL.createObjectURL, real_revoke_object_URL = real_URL.revokeObjectURL,
+        URL = real_URL, btoa = view.btoa, atob = view.atob, ArrayBuffer = view.ArrayBuffer, Uint8Array = view.Uint8Array;
+      FakeBlob.fake = FB_proto.fake = true;
+      while (file_ex_code--) {
+        FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1
+      }
+      if (!real_URL.createObjectURL) {
+        URL = view.URL = {}
+      }
+      URL.createObjectURL = function (blob) {
+        var type = blob.type, data_URI_header;
+        if (type === null) {
+          type = "application/octet-stream"
+        }
+        if (blob instanceof FakeBlob) {
+          data_URI_header = "data:" + type;
+          if (blob.encoding === "base64") {
+            return data_URI_header + ";base64," + blob.data
+          } else {
+            if (blob.encoding === "URI") {
+              return data_URI_header + "," + decodeURIComponent(blob.data)
+            }
+          }
+          if (btoa) {
+            return data_URI_header + ";base64," + btoa(blob.data)
+          } else {
+            return data_URI_header + "," + encodeURIComponent(blob.data)
+          }
+        } else {
+          if (real_create_object_URL) {
+            return real_create_object_URL.call(real_URL, blob)
+          }
+        }
+      };
+      URL.revokeObjectURL = function (object_URL) {
+        if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+          real_revoke_object_URL.call(real_URL, object_URL)
+        }
+      };
+      FBB_proto.append = function (data) {
+        var bb = this.data;
+        if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+          var str = "", buf = new Uint8Array(data), i = 0, buf_len = buf.length;
+          for (; i < buf_len; i++) {
+            str += String.fromCharCode(buf[i])
+          }
+          bb.push(str)
+        } else {
+          if (get_class(data) === "Blob" || get_class(data) === "File") {
+            if (FileReaderSync) {
+              var fr = new FileReaderSync;
+              bb.push(fr.readAsBinaryString(data))
+            } else {
+              throw new FileException("NOT_READABLE_ERR")
+            }
+          } else {
+            if (data instanceof FakeBlob) {
+              if (data.encoding === "base64" && atob) {
+                bb.push(atob(data.data))
+              } else {
+                if (data.encoding === "URI") {
+                  bb.push(decodeURIComponent(data.data))
+                } else {
+                  if (data.encoding === "raw") {
+                    bb.push(data.data)
+                  }
+                }
+              }
+            } else {
+              if (typeof data !== "string") {
+                data += ""
+              }
+              bb.push(unescape(encodeURIComponent(data)))
+            }
+          }
+        }
+      };
+      FBB_proto.getBlob = function (type) {
+        if (!arguments.length) {
+          type = null
+        }
+        return new FakeBlob(this.data.join(""), type, "raw")
+      };
+      FBB_proto.toString = function () {
+        return "[object BlobBuilder]"
+      };
+      FB_proto.slice = function (start, end, type) {
+        var args = arguments.length;
+        if (args < 3) {
+          type = null
+        }
+        return new FakeBlob(this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding)
+      };
+      FB_proto.toString = function () {
+        return "[object Blob]"
+      };
+      FB_proto.close = function () {
+        this.size = this.data.length = 0
+      };
+      return FakeBlobBuilder
+    }(view));
+    view.Blob = function Blob(blobParts, options) {
+      var type = options ? (options.type || "") : "";
+      var builder = new BlobBuilder();
+      if (blobParts) {
+        for (var i = 0, len = blobParts.length; i < len; i++) {
+          builder.append(blobParts[i])
+        }
+      }
+      return builder.getBlob(type)
+    }
+  }(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
+  
+  

src/assets/excel/Export2Excel.js

@@ -0,0 +1,236 @@
+// 引入file插件
+import FileSaver from "file-saver";
+// 引入xlsx插件
+import * as XLSX from "xlsx";
+
+// 导出
+
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll('tr');
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll('td');
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute('colspan');
+      var rowspan = cell.getAttribute('rowspan');
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1
+          }
+        });
+      };
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan)
+        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+};
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000
+    },
+    e: {
+      c: 0,
+      r: 0
+    }
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C]
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R
+      });
+
+      if (typeof cell.v === 'number') cell.t = 'n';
+      else if (typeof cell.v === 'boolean') cell.t = 'b';
+      else if (cell.v instanceof Date) {
+        cell.t = 'n';
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = 's';
+
+
+
+      // 设置表头背景颜色为红色   无效
+      if (R == 0) {
+        cell.s = {
+          fill: {
+            fgColor: {
+              rgb: 'FFFF0000'
+            }
+          }
+        }
+      }
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws['!merges'] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary'
+  });
+
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), "test.xlsx")
+}
+
+export function export_json_to_excel({
+  multiHeader = [],
+  header,
+  data,
+  filename,
+  merges = [],
+  autoWidth = true,
+  bookType = 'xlsx'
+} = {}) {
+  /* original data */
+  filename = filename || 'excel-list'
+  data = [...data]
+  data.unshift(header);
+
+  for (let i = multiHeader.length - 1; i > -1; i--) {
+    data.unshift(multiHeader[i])
+  }
+
+  var ws_name = "SheetJS";
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (merges.length > 0) {
+    if (!ws['!merges']) ws['!merges'] = [];
+    merges.forEach(item => {
+      ws['!merges'].push(XLSX.utils.decode_range(item))
+    })
+  }
+
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map(row => row.map(val => {
+      /*先判断是否为null/undefined*/
+      if (val == null) {
+        return {
+          'wch': 10
+        };
+      }
+      /*再判断是否为中文*/
+      else if (val.toString().charCodeAt(0) > 255) {
+        return {
+          'wch': val.toString().length * 2
+        };
+      } else {
+        return {
+          'wch': val.toString().length
+        };
+      }
+    }))
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]['wch'] < colWidth[i][j]['wch']) {
+          result[j]['wch'] = colWidth[i][j]['wch'];
+        }
+      }
+    }
+    ws['!cols'] = result;
+  }
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: 'binary'
+  });
+  saveAs(new Blob([s2ab(wbout)], {
+    type: "application/octet-stream"
+  }), `${filename}.${bookType}`);
+}

src/assets/excel/Import2Json.js

@@ -0,0 +1,58 @@
+// import XLSX from 'xlsx'
+// 引入file插件
+import FileSaver from "file-saver";
+// 引入xlsx插件
+import * as XLSX from "xlsx";
+
+export function readExcel(file){
+  const types = file.name.split('.')[1];
+  const fileType = [
+    'xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'
+  ].some(item => item == types);
+  if (!fileType) {
+    this.$message({
+      type: 'waring',
+      message: '格式错误！请重新选择'
+    })
+    return
+  }
+  const reader = new FileReader();
+  let result = [];
+  reader.onload = function(e) {
+    const data = e.target.result;
+    const wb = XLSX.read(data, {
+      type: 'binary'
+    });
+    wb.SheetNames.forEach((sheetName) => {
+      result.push({
+        sheetName: sheetName,
+        sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName])
+      })
+    });
+  };
+  reader.readAsBinaryString(file.raw)
+  console.log(result)
+  return result;
+}
+
+export function file2Xce(file){
+  return new Promise(function (resolve, reject) {
+    const reader = new FileReader()
+    reader.onload = function (e) {
+      const data = e.target.result
+      this.wb = XLSX.read(data, {
+        type: 'binary'
+      })
+      const result = []
+      this.wb.SheetNames.forEach((sheetName) => {
+        result.push({
+          sheetName: sheetName,
+          sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
+        })
+      })
+      resolve(result)
+    }
+    reader.readAsBinaryString(file.raw)
+    // reader.readAsBinaryString(file) // 传统input方法
+  })
+}

src/assets/fonts/fonts.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "YouSheBiaoTiHei";
+  src: url("./YouSheBiaoTiHei.ttf") format("woff")
+}
+@font-face {
+  font-family: "DIN-Bold";
+  src: url("./DIN-Bold.otf") format("woff")
+}
+

src/assets/icons/svg/component.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575804206892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M826.56 470.016c-32.896 0-64.384 12.288-89.984 35.52l0-104.96c0-62.208-50.496-112.832-112.64-113.088L623.936 287.04 519.552 287.104C541.824 262.72 554.56 230.72 554.56 197.12c0-73.536-59.904-133.44-133.504-133.44-73.472 0-133.376 59.904-133.376 133.44 0 32.896 12.224 64.256 35.52 89.984L175.232 287.104l0 0.576C113.728 288.704 64 338.88 64 400.576l0.32 0 0.32 116.48C60.864 544.896 70.592 577.728 100.8 588.48c12.736 4.608 37.632 7.488 60.864-25.28 12.992-18.368 34.24-29.248 56.64-29.248 38.336 0 69.504 31.104 69.504 69.312 0 38.4-31.168 69.504-69.504 69.504-22.656 0-44.032-11.264-57.344-30.4C138.688 610.112 112.576 615.36 102.464 619.136c-29.824 10.752-39.104 43.776-38.144 67.392l0 160.384L64 846.912C64 909.248 114.752 960 177.216 960l446.272 0c62.4 0 113.152-50.752 113.152-113.152l0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.536 0 133.44-59.904 133.44-133.504C960 529.92 900.096 470.016 826.56 470.016zM826.56 672.896c-22.72 0-44.032-11.264-57.344-30.4-22.272-32.384-48.448-27.136-58.56-23.36-29.824 10.752-39.04 43.776-38.08 67.392l0 160.384c0 27.136-22.016 49.152-49.152 49.152L177.216 896.064C150.08 896 128 873.984 128 846.848l0.32 0 0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.6 0 133.504-59.904 133.504-133.504 0-73.472-59.904-133.376-133.504-133.376-32.896 0-64.32 12.288-89.984 35.52l0-104.96L128 400.512c0-27.072 22.08-49.152 49.216-49.152L177.216 351.04 334.656 350.72c3.776 0.512 7.616 0.832 11.52 0.832 24.896 0 50.752-10.816 60.032-37.056 4.544-12.736 7.424-37.568-25.344-60.736C362.624 240.768 351.68 219.52 351.68 197.12c0-38.272 31.104-69.44 69.376-69.44 38.336 0 69.504 31.168 69.504 69.44 0 22.72-11.264 44.032-30.528 57.472C427.968 276.736 433.088 302.784 436.8 313.024c10.752 29.888 43.072 39.232 67.392 38.08l119.232 0 0 0.384c27.136 0 49.152 22.08 49.152 49.152l0.256 116.48c-3.776 27.84 6.016 60.736 36.224 71.488 12.736 4.608 37.632 7.488 60.8-25.28 13.056-18.368 34.24-29.248 56.704-29.248C864.832 534.016 896 565.12 896 603.392 896 641.728 864.832 672.896 826.56 672.896z" p-id="3146"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575804206892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" fill="#ffffff" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M826.56 470.016c-32.896 0-64.384 12.288-89.984 35.52l0-104.96c0-62.208-50.496-112.832-112.64-113.088L623.936 287.04 519.552 287.104C541.824 262.72 554.56 230.72 554.56 197.12c0-73.536-59.904-133.44-133.504-133.44-73.472 0-133.376 59.904-133.376 133.44 0 32.896 12.224 64.256 35.52 89.984L175.232 287.104l0 0.576C113.728 288.704 64 338.88 64 400.576l0.32 0 0.32 116.48C60.864 544.896 70.592 577.728 100.8 588.48c12.736 4.608 37.632 7.488 60.864-25.28 12.992-18.368 34.24-29.248 56.64-29.248 38.336 0 69.504 31.104 69.504 69.312 0 38.4-31.168 69.504-69.504 69.504-22.656 0-44.032-11.264-57.344-30.4C138.688 610.112 112.576 615.36 102.464 619.136c-29.824 10.752-39.104 43.776-38.144 67.392l0 160.384L64 846.912C64 909.248 114.752 960 177.216 960l446.272 0c62.4 0 113.152-50.752 113.152-113.152l0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.536 0 133.44-59.904 133.44-133.504C960 529.92 900.096 470.016 826.56 470.016zM826.56 672.896c-22.72 0-44.032-11.264-57.344-30.4-22.272-32.384-48.448-27.136-58.56-23.36-29.824 10.752-39.04 43.776-38.08 67.392l0 160.384c0 27.136-22.016 49.152-49.152 49.152L177.216 896.064C150.08 896 128 873.984 128 846.848l0.32 0 0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.6 0 133.504-59.904 133.504-133.504 0-73.472-59.904-133.376-133.504-133.376-32.896 0-64.32 12.288-89.984 35.52l0-104.96L128 400.512c0-27.072 22.08-49.152 49.216-49.152L177.216 351.04 334.656 350.72c3.776 0.512 7.616 0.832 11.52 0.832 24.896 0 50.752-10.816 60.032-37.056 4.544-12.736 7.424-37.568-25.344-60.736C362.624 240.768 351.68 219.52 351.68 197.12c0-38.272 31.104-69.44 69.376-69.44 38.336 0 69.504 31.168 69.504 69.44 0 22.72-11.264 44.032-30.528 57.472C427.968 276.736 433.088 302.784 436.8 313.024c10.752 29.888 43.072 39.232 67.392 38.08l119.232 0 0 0.384c27.136 0 49.152 22.08 49.152 49.152l0.256 116.48c-3.776 27.84 6.016 60.736 36.224 71.488 12.736 4.608 37.632 7.488 60.8-25.28 13.056-18.368 34.24-29.248 56.704-29.248C864.832 534.016 896 565.12 896 603.392 896 641.728 864.832 672.896 826.56 672.896z" p-id="3146"></path></svg>

src/assets/icons/svg/exit-fullscreen.svg

@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
+<svg width="128" height="128" fill="#c6c6c6" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>

src/assets/icons/svg/fullscreen.svg

@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
+<svg width="128" height="128" fill="#c6c6c6" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>

src/assets/icons/svg/login_icon_eye.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737690288933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4237" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 832c-156.448 0-296.021333-98.730667-418.410667-291.605333a52.938667 52.938667 0 0 1 0-56.789334C215.978667 290.730667 355.552 192 512 192c156.448 0 296.021333 98.730667 418.410667 291.605333a52.938667 52.938667 0 0 1 0 56.789334C808.021333 733.269333 668.448 832 512 832z m0-576c-129.514667 0-249.461333 83.850667-360.117333 256C262.538667 684.149333 382.485333 768 512 768c129.514667 0 249.461333-83.850667 360.117333-256C761.461333 339.850667 641.514667 256 512 256z m0 405.333333c-83.210667 0-150.666667-66.858667-150.666667-149.333333S428.789333 362.666667 512 362.666667s150.666667 66.858667 150.666667 149.333333S595.210667 661.333333 512 661.333333z m0-64c47.552 0 86.101333-38.208 86.101333-85.333333S559.552 426.666667 512 426.666667c-47.552 0-86.101333 38.208-86.101333 85.333333s38.549333 85.333333 86.101333 85.333333z" fill="#027ecd" p-id="4238"></path></svg>

src/assets/icons/svg/login_icon_hide.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="10" viewBox="0 0 24 10">
+  <image id="login_icon_hide" width="24" height="10" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAKCAYAAACuaZ5oAAABU0lEQVQokaXTvUtXcRQG8I9XB5cWITMwQoQgp4YmpSVaHBwaHHzBmhyclKBcuohLUf+BQ4tSq3RdxCUwCIxA2kRoSiklClwStOLYES4/hfjRA5fvPed8z/Pc83JbivLDBGYxg1VNoiyqMwnzv4ae4i7G2jCF61hEZ7MC55B34VGaIwWepHERa7j2H+S3sVFzLUSLpMhsLfAKS3iP/X/wXsEdDGMwfd9xvyyq123peNeQNJLPIbbxGZ/wDVH1ZfSiO89G/Azy8EUF7djDBbzJQU+ip8kOrWd7HqT9Ff1RwYskD4xjB7EFN3AP0xl7i1YcowN96X+I5bKootKYQ/T8JS6hinJ/58VnSX6KTXzJ92jPrfiiPAdq9z6ekgfKoor5jWI3liYExnCztlp1PK6J1fEDW+l43piUIlfLopoOgcDJKp2DFRxkdY2Yy9jZP+2vyBH8AYIzU76BpjTBAAAAAElFTkSuQmCC"/>
+</svg>

src/assets/icons/svg/login_icon_key.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23" height="24" viewBox="0 0 23 24">
+  <image id="login_icon_key" width="23" height="24" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAABRElEQVRIic3UP0tbURwG4KdpECl0EUHBoaVka9UuKn4GkRZKpnbq0KFdUxQ/gINradzEycEgiOIoOJXSLsVAx34AcS44ROXALxJCbpIrN+C7vPfvc86993AfjTduDMhzrGEVM/iPn9jGATKBQfgb7OFJxvmEv8dVr5OlPvAC9gP+gyoqWMQ3XOMd6veZ+Q8s4xQrPWZXjcHFgL+HnfmLgNPInzIeu4Gj2P7QC8nCX0X/xb+Ma1JOol/mwSeiL/vAKRfRk3nwQjJSvIyn2Igv/jiOT0e/xlmf+9uvo9JxXQu/sJmW4nd8HsHE6+VYcik7aBaAzuJjcssd7/0YhwXgbwMv5fmgz7AVPVTy4F/wNbpwfKyrC8Vz58Hgra4emHIOfBdT0YXjzaz/9jD4Up4b++TOSfg55rFeEN7OecJrsTdXJIzaLXgdOIIjL9EaAAAAAElFTkSuQmCC"/>
+</svg>

src/assets/icons/svg/login_icon_user.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="26" viewBox="0 0 24 26">
+  <image id="login_icon_user" width="24" height="26" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAAB0klEQVRIie3VT4hOURgG8N9IGjY2RqEoRfhEUUqUCCVpMGKDUlYsLGzuyrgLmQ0bFhazomQaU2Ih+RM1xJQiLo0Fi8lGUhMhC3TqVdPVdz9u30qezfve897zPOe8957ndHQO/tACHejBLszHRzzAObzNirxy9uQW5DNwGetK4xtwFAcwUEVQtYNJuIe18XwF90N0H2bjOzZnRX67zg72Bnki2Y2hCbWTuI7VOIMlVatshj0xfrFEnjCOg5Ev7mv0LqsjsCDijSb1FxiLfFEdgSkRP1W88yHitDoCbcG/LfA14vSKd2ZGHK8j8Cxid5P6SsyKvKgjcD7iDhwu1ebgQuQPsyJ/VUfgGgYjP4tHOBXCo+mA4QsOVXA09aLkoEuxBScqLCW1ph938TQr8t/IygKrwsh6JvT3TzEWOx7IinykLLATx7C8RPYGw9Ge13gf5pccdSFWYD3mleY9x/GsyIeSQHdY8S88waUYG221+nTh9DV6Uzu3Yn/JWbcngZvYGF5/BI//pi/lG62v0ZvafBprcCv9RV1R6/9b8iaCI8GV0PXf7FoifeTh+CDpVH5rE2+6rKbiThLYhKvobPPiP2NbsoD0m85Fo43k6fS+zIr83U+ppXTK5LNipQAAAABJRU5ErkJggg=="/>
+</svg>

src/assets/icons/svg/search.svg

@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>
+<svg width="128" fill="#c6c6c6" height="128"  xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>

src/assets/styles/index.scss

@@ -1,16 +1,20 @@
-@import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
+@import "./variables.scss";
+@import "./mixin.scss";
+@import "./transition.scss";
+@import "./element-ui.scss";
+@import "./sidebar.scss";
+@import "./btn.scss";
 
 body {
   height: 100%;
+  font-size: 14px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+  overflow-x: hidden;
+  min-width: 320px;
 }
 
 label {
@@ -104,7 +108,8 @@ aside {
   display: block;
   line-height: 32px;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -120,9 +125,6 @@ aside {
 }
 
 //main-container全局样式
-.app-container {
-  padding: 20px;
-}
 
 .components-container {
   margin: 30px 50px;
@@ -131,10 +133,11 @@ aside {
 
 .pagination-container {
   margin-top: 30px;
+  background: transparent !important;
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .sub-navbar {
@@ -145,7 +148,13 @@ aside {
   text-align: right;
   padding-right: 20px;
   transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(33, 120, 241, 1) 100%,
+    rgba(33, 120, 241, 1) 100%
+  );
 
   .subtitle {
     font-size: 20px;
@@ -163,7 +172,7 @@ aside {
 
 .link-type,
 .link-type:focus {
-  color: #337ab7;
+  color: #3773e0;
   cursor: pointer;
 
   &:hover {
@@ -180,3 +189,259 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+.choice {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  cursor: pointer;
+  margin-left: 42px;
+  cursor: pointer;
+  .mr20 {
+    font-size: 16px;
+    color: #a5b6cb;
+    width: 48px;
+    text-align: center;
+    background-color: #366797;
+    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
+    border-radius: 14px;
+    margin-right: 10px;
+    text-shadow: none !important;
+  }
+}
+.timeStyle {
+  color: #ffffff !important;
+  background-image: linear-gradient(0deg, #0076c1 0%, #068be0 59%, #0ba0ff 100%),
+    linear-gradient(#006eea, #006eea);
+  background-blend-mode: normal, normal;
+  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
+  border-radius: 14px;
+}
+
+
+
+
+.special-div {
+  display: flex;
+  flex-direction: column;
+  background-image: linear-gradient(
+    0deg,
+    rgba(0, 68, 126, 0.4) 0%,
+    rgba(0, 68, 126, 0.08) 100%
+  );
+  border-style: solid;
+  border-width: 1px;
+  border-image-source: linear-gradient(0deg, #0088f0 0%, #0088f0 100%);
+  border-image-slice: 1;
+  border: 1px solid transparent; /* 设置边框宽度和透明背景 */
+  border-image: linear-gradient(0deg, #00447e 0%, rgba(0, 68, 126, 0.2) 100%) 1; /* 使用渐变作为边框图片 */
+  .special-top {
+    background-image: linear-gradient(
+      90deg,
+      rgba(0, 121, 206, 0.5) 0%,
+      rgba(0, 121, 206, 0.1) 100%
+    );
+    padding: 4px 26px 4px 0px;
+    position: relative;
+    min-height: 37px;
+  }
+  .special-top::after {
+    content: "";
+    width: 100%;
+    height: 1px;
+    background-image: linear-gradient(
+      90deg,
+      #ffffff 0%,
+      rgba(255, 255, 255, 0.2) 99%
+    );
+    opacity: 0.5;
+    position: absolute;
+    top: -3px;
+    left: 0;
+  }
+  .special-top::before {
+    content: "";
+    width: 100%;
+    height: 1px;
+    background-image: linear-gradient(
+      90deg,
+      #ffffff 0%,
+      rgba(255, 255, 255, 0.2) 99%
+    );
+    opacity: 0.5;
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+  }
+  .special-title {
+    width: 100%;
+    padding-left: 36px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 20px;
+    color: #ffffff;
+    line-height: 23px;
+    background-image: url(../images/special-title-bg.png);
+    background-repeat: no-repeat;
+    background-size: 140px 35px;
+    background-position: 0px -3px;
+    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .special-title::before {
+    content: "";
+    width: 34px;
+    height: 13px;
+    // background-color: ;
+    background-image: url(../images/twoDot.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    right: 0px;
+  }
+}
+// 排名需要样式
+.rank-circle {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  background-image: linear-gradient(-41deg, #7f8ca2 0%, #e5eeff 100%),
+    linear-gradient(#02336a, #02336a);
+  background-blend-mode: normal, normal;
+  box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.8);
+  font-family: SourceHanSansCN-Bold;
+  font-weight: bold;
+  color: #273855;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 50%;
+}
+
+.rank-circle.top-1 {
+  background-image: url("../images/top-one.png");
+  background-size: 30px 32px;
+  background-repeat: no-repeat;
+  border-radius: 0%;
+  box-shadow: none;
+}
+
+.rank-circle.top-2 {
+  background-image: url("../images/top-two.png");
+  background-size: 30px 32px;
+  background-repeat: no-repeat;
+  border-radius: 0%;
+  box-shadow: none;
+}
+
+.rank-circle.top-3 {
+  background-image: url("../images/top-three.png");
+  background-size: 30px 32px;
+  background-repeat: no-repeat;
+  border-radius: 0%;
+  box-shadow: none;
+}
+
+.pagination {
+  width: 100%;
+  text-align: right;
+  margin-top: 15px;
+}
+.table-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+// 弹框内容超出高度滚动
+.dialog-content {
+  max-height: 500px; /* 设置最大高度，可根据实际情况调整 */
+  overflow-y: auto; /* 当内容超出最大高度时，显示垂直滚动条 */
+}
+.intput-text {
+  color: #ffffff;
+  margin: 15px 0;
+  .down {
+    color: #0088f0;
+    cursor: pointer;
+    font-weight: bold;
+  }
+  .down:hover,
+  .down:focus,
+  .down:active {
+    text-decoration: underline;
+  }
+}
+// 弹框里的原生table
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+table tr {
+  height: 45px !important;
+  color: #ffffff;
+}
+table th {
+  color: #ffffff;
+}
+.el-dialog td {
+  height: 45px;
+  width: 280px;
+  white-space: normal;
+}
+// 打印的样式
+@media print {
+  @page {
+    /* margin: 0; */
+    /* 纵向 */
+    /* size: portrait; */
+    /* 边距 上右下左 */
+    margin: 2cm 1cm 3cm 1cm;
+    // size: A4 portrait;
+    // margin: 3.7cm 2.6cm 3.5cm;
+    /* 国家标准公文页边距 GB/T 9704-2012 */
+  }
+
+  /* 给需要换行的元素设置word-wrap属性 */
+  table td,
+  p,
+  div {
+    word-wrap: break-word;
+    color: #000000;
+  }
+  table thead th {
+    color: #000000 !important;
+    font-weight: bold !important;
+  }
+}
+.report-detail {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: 40%;
+  color: #ffffff;
+}
+
+.btn-condition {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .condition-left,
+  .condition-right {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    .el-form-item {
+      text-align: center;
+    }
+  }
+}

src/assets/styles/ruoyi.scss

@@ -66,7 +66,18 @@
   margin-left: 20px;
 }
 
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: inherit;
   font-weight: 500;
   line-height: 1.1;
@@ -89,7 +100,8 @@
 }
 
 .el-table {
-  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+  .el-table__header-wrapper,
+  .el-table__fixed-header-wrapper {
     th {
       word-break: break-word;
       background-color: #f8f8f9;
@@ -109,10 +121,10 @@
 /** 表单布局 **/
 .form-header {
   font-size: 15px;
-  color: #6379bb;
-  border-bottom: 1px solid #ddd;
+  color: #ffffff;
+  border-bottom: 1px solid #7f92b8;
   margin: 8px 10px 25px 10px;
-  padding-bottom: 5px
+  padding-bottom: 5px;
 }
 
 /** 表格布局 **/
@@ -128,7 +140,7 @@
 .tree-border {
   margin-top: 5px;
   border: 1px solid #e5e6e7;
-  background: #FFFFFF none;
+  background: #ffffff none;
   border-radius: 4px;
 }
 
@@ -153,12 +165,14 @@
 }
 
 /** 表格更多操作下拉样式 */
-.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
+.el-table .el-dropdown-link,
+.el-table .el-dropdown-selfdefine {
   cursor: pointer;
   margin-left: 5px;
 }
 
-.el-table .el-dropdown, .el-icon-arrow-down {
+.el-table .el-dropdown,
+.el-icon-arrow-down {
   font-size: 12px;
 }
 
@@ -180,8 +194,8 @@
 }
 
 .list-group-item {
-  border-bottom: 1px solid #e7eaec;
-  border-top: 1px solid #e7eaec;
+  border-bottom: 1px solid #7f92b8;
+  border-top: 1px solid #7f92b8;
   margin-bottom: -1px;
   padding: 11px 0px;
   font-size: 13px;
@@ -209,22 +223,22 @@
 /* button color */
 .el-button--cyan.is-active,
 .el-button--cyan:active {
-  background: #20B2AA;
-  border-color: #20B2AA;
-  color: #FFFFFF;
+  background: #20b2aa;
+  border-color: #20b2aa;
+  color: #ffffff;
 }
 
 .el-button--cyan:focus,
 .el-button--cyan:hover {
-  background: #48D1CC;
-  border-color: #48D1CC;
-  color: #FFFFFF;
+  background: #48d1cc;
+  border-color: #48d1cc;
+  color: #ffffff;
 }
 
 .el-button--cyan {
-  background-color: #20B2AA;
-  border-color: #20B2AA;
-  color: #FFFFFF;
+  background-color: #20b2aa;
+  border-color: #20b2aa;
+  color: #ffffff;
 }
 
 /* text color */
@@ -280,7 +294,7 @@
 
 /* 拖拽列样式 */
 .sortable-ghost {
-  opacity: .8;
+  opacity: 0.8;
   color: #fff !important;
   background: #42b983 !important;
 }
@@ -292,5 +306,5 @@
 
 /* 分割面板样式 */
 .splitpanes.default-theme .splitpanes__pane {
-  background-color: #fff!important;
+  background-color: transparent !important;
 }

src/assets/styles/sidebar.scss

@@ -5,6 +5,7 @@
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;
+    overflow-x: hidden;
   }
 
   .sidebarHide {
@@ -15,8 +16,11 @@
     -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
     height: 100%;
+    // background-color: $base-menu-background;
+    background-image: url("../images/sidebar-bg.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     position: fixed;
     font-size: 0px;
     top: 0;
@@ -68,29 +72,43 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: transparent!important;
     }
 
     .el-menu-item, .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      background-color: #00477d !important;
+    }
+    .el-menu-item.is-active{
+      color: #ffffff !important;
+      font-weight: bold;
+      background-image: linear-gradient(90deg, #0078cc 0%, #00477d 100%) !important;
     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-image: linear-gradient(90deg, 
+		#0078cc 0%, 
+		#00477d 100%) !important;
+    color: #ffffff !important;
       }
     }
 
     & .theme-dark .is-active > .el-submenu__title {
       color: $base-menu-color-active !important;
+    //   background-image: linear-gradient(90deg, 
+		// #0078cc 0%, 
+		// #00477d 100%) !important;
     }
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $base-sidebar-width !important;
+      padding: 0 35px !important;
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.06) !important;
@@ -99,12 +117,15 @@
 
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        color: #ffffff !important;
+        background-color: #0077ca !important;
+      }
     }
   }
+  .el-submenu .el-menu-item {
+    background-color: #002c58 !important;
   }
 
   .hideSidebar {
@@ -192,17 +213,32 @@
 
 // when menu collapsed
 .el-menu--vertical {
+  background-color: #002c58 !important;
+  .el-submenu{
+    background-color: #002c58 !important;
+  }
   &>.el-menu {
+    background-color: #002c58 !important;
     .svg-icon {
       margin-right: 16px;
     }
   }
-
+  .nest-menu .el-menu-item {
+    background-color: #002c58 !important;
+  }
+  // 修改侧边栏伸缩的时候，el-menu-item的样式
   .nest-menu .el-submenu>.el-submenu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      color: #ffffff !important;
+      background-color: #0077ca !important;
+    }
+    &:active {
+      // you can use $subMenuHover
+      color: #ffffff !important;
+      font-weight: bold;
+      background-color: #0077ca !important;
     }
   }
 

src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 232px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/components/Breadcrumb/index.vue

@@ -96,7 +96,6 @@ export default {
   line-height: 50px;
   margin-left: 8px;
   .no-redirect {
-    color: #97a8be;
     cursor: text;
   }
 }

src/components/Hamburger/index.vue

@@ -8,7 +8,7 @@
       width="64"
       height="64"
     >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+      <path class="svg-path" d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
     </svg>
   </div>
 </template>
@@ -36,9 +36,13 @@ export default {
   vertical-align: middle;
   width: 20px;
   height: 20px;
+  color: #fff !important;
 }
 
 .hamburger.is-active {
   transform: rotate(180deg);
 }
+.svg-path {
+  fill: white;
+}
 </style>

src/components/RuoYi/Doc/index.vue

@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <svg-icon icon-class="question" @click="goto" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RuoYiDoc',
-  data() {
-    return {
-      url: 'http://doc.ruoyi.vip/ruoyi-vue'
-    }
-  },
-  methods: {
-    goto() {
-      window.open(this.url)
-    }
-  }
-}
-</script>

src/components/RuoYi/Git/index.vue

@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <svg-icon icon-class="github" @click="goto" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RuoYiGit',
-  data() {
-    return {
-      url: 'https://gitee.com/y_project/RuoYi-Vue'
-    }
-  },
-  methods: {
-    goto() {
-      window.open(this.url)
-    }
-  }
-}
-</script>

src/components/SizeSelect/index.vue

@@ -1,56 +0,0 @@
-<template>
-  <el-dropdown trigger="click" @command="handleSetSize">
-    <div>
-      <svg-icon class-name="size-icon" icon-class="size" />
-    </div>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
-        {{ item.label }}
-      </el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
-      ]
-    }
-  },
-  computed: {
-    size() {
-      return this.$store.getters.size
-    }
-  },
-  methods: {
-    handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('app/setSize', size)
-      this.refreshView()
-      this.$message({
-        message: 'Switch Size Success',
-        type: 'success'
-      })
-    },
-    refreshView() {
-      // In order to make the cached page re-rendered
-      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
-
-      const { fullPath } = this.$route
-
-      this.$nextTick(() => {
-        this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
-    }
-  }
-
-}
-</script>

src/components/TopNav/index.vue

@@ -96,8 +96,8 @@ export default {
       let activePath = path;
       if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
         const tmpPath = path.substring(1, path.length);
-        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
         if (!this.$route.meta.link) {
+          activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
           this.$store.dispatch('app/toggleSideBarHide', false);
         }
       } else if(!this.$route.children) {

src/directive/index.js

@@ -6,6 +6,7 @@ import dialogDragHeight from './dialog/dragHeight'
 import clipboard from './module/clipboard'
 
 const install = function(Vue) {
+     // 注册一个全局自定义指令 指令名,指令对象
   Vue.directive('hasRole', hasRole)
   Vue.directive('hasPermi', hasPermi)
   Vue.directive('clipboard', clipboard)

src/directive/permission/hasPermi.js

@@ -5,19 +5,32 @@
 
 import store from '@/store'
 
+// 暴露指令对象
 export default {
+  // ==== 指令对象的钩子函数，省略 ====
+// inserted ，被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
+// ==== 指令对象的钩子函数参数，省略 ====
+// el ：指令所绑定的元素，可以用来直接操作 DOM
+// binding 一个对象，包括：
+	// name: 指令名，不包括 v- 前缀
+	// value: 指令的绑定值，这里是['system:user:add']
+	// oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中使用（无论值是否改变都可用）
   inserted(el, binding, vnode) {
     const { value } = binding
-    const all_permission = "*:*:*";
+    const all_permission = "*:*:*"; // 特殊权限标识
+     // store 
+     // && 两边是Boolean时，两个都为 true 运算结果为 true
+     // && 求值时，如果它们都是真值，则返回最后一个操作数的值，如果有假值，返回第一个假值
     const permissions = store.getters && store.getters.permissions
-
+    // 权限标识存在且为不为空的数组
     if (value && value instanceof Array && value.length > 0) {
       const permissionFlag = value
-
+       // 遍历 store.getters.permissions ，
+       // 是否存在： 当前角色有特殊权限  或 自定义指令绑定值数组中元素存在当前登录角色所拥有的某个权限标识
       const hasPermissions = permissions.some(permission => {
         return all_permission === permission || permissionFlag.includes(permission)
       })
-
+       // 如果匹配不上，需要把该节点（button）从父节点删除
       if (!hasPermissions) {
         el.parentNode && el.parentNode.removeChild(el)
       }

src/layout/components/AppMain.vue

@@ -10,50 +10,59 @@
 </template>
 
 <script>
-import iframeToggle from "./IframeToggle/index"
+import iframeToggle from "./IframeToggle/index";
 
 export default {
-  name: 'AppMain',
+  name: "AppMain",
   components: { iframeToggle },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
-    }
+      return this.$route.path;
+    },
   },
   watch: {
     $route() {
-      this.addIframe()
-    }
+      this.addIframe();
+    },
   },
   mounted() {
-    this.addIframe()
+    this.addIframe();
   },
   methods: {
     addIframe() {
-      const {name} = this.$route
+      const { name } = this.$route;
       if (name && this.$route.meta.link) {
-        this.$store.dispatch('tagsView/addIframeView', this.$route)
-      }
-    }
-  }
+        this.$store.dispatch("tagsView/addIframeView", this.$route);
       }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - 84px) !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
   width: 100%;
-  position: relative;
-  overflow: hidden;
+  padding: 0 25px 20px 25px;
+  position: absolute;
+  left: 0;
+  top: 84px;
+  overflow: auto;
+  color: #ffffff;
+  background-image: url("../../assets/images/container-bg.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
-.fixed-header + .app-main {
-  padding-top: 50px;
-}
+// .fixed-header + .app-main {
+//   padding-top: 50px;
+// }
 
 .hasTagsView {
   .app-main {
@@ -62,7 +71,7 @@ export default {
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    padding-top: 15px;
   }
 }
 </style>

src/layout/components/Navbar.vue

@@ -8,21 +8,7 @@
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
-
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
@@ -34,9 +20,9 @@
           <router-link to="/user/profile">
             <el-dropdown-item>个人中心</el-dropdown-item>
           </router-link>
-          <el-dropdown-item @click.native="setting = true">
+          <!-- <el-dropdown-item @click.native="setting = true">
             <span>布局设置</span>
-          </el-dropdown-item>
+          </el-dropdown-item> -->
           <el-dropdown-item divided @click.native="logout">
             <span>退出登录</span>
           </el-dropdown-item>
@@ -52,10 +38,7 @@ import Breadcrumb from '@/components/Breadcrumb'
 import TopNav from '@/components/TopNav'
 import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
 
 export default {
   components: {
@@ -63,10 +46,7 @@ export default {
     TopNav,
     Hamburger,
     Screenfull,
-    SizeSelect,
     Search,
-    RuoYiGit,
-    RuoYiDoc
   },
   computed: {
     ...mapGetters([
@@ -115,8 +95,16 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  background-image: linear-gradient(0deg, 
+		#002c5e 0%, 
+		#0069b2 100%), 
+	linear-gradient(
+		#002c5e, 
+		#002c5e);
+	background-blend-mode: normal, 
+		normal;
+	box-shadow: inset 0px -1px 0px 0px 
+		rgba(255, 255, 255, 0.1);
 
   .hamburger-container {
     line-height: 46px;
@@ -125,6 +113,10 @@ export default {
     cursor: pointer;
     transition: background .3s;
     -webkit-tap-highlight-color:transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
     &:hover {
       background: rgba(0, 0, 0, .025)
@@ -149,6 +141,10 @@ export default {
     float: right;
     height: 100%;
     line-height: 50px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 
     &:focus {
       outline: none;

src/layout/components/Sidebar/Logo.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
         <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
       </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+      <router-link v-else key="expand" class="sidebar-logo-link" to="">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
         <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
       </router-link>
@@ -57,7 +57,17 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  // background: #2b2f3a;
+  background-image: linear-gradient(0deg, 
+		#002c5e 0%, 
+		#0069b2 100%), 
+	linear-gradient(
+		#002c5e, 
+		#002c5e);
+	background-blend-mode: normal, 
+		normal;
+	box-shadow: inset 0px -1px 0px 0px 
+		rgba(255, 255, 255, 0.1);
   text-align: center;
   overflow: hidden;