第二次修改

README.md

@@ -14,7 +14,7 @@ npm install
 npm install --registry=https://registry.npmmirror.com
 
 # 启动服务
-npm run dev
+npm run dev~
 ```
 
 浏览器访问 http://localhost:80

src/router/index.js

@@ -87,7 +87,39 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
+  },
+  {
+    path: '/home',
+    component: () => import('@/views1/HomeView.vue'),
+    hidden: true,
+    children: [
+      {
+        path: "/home/page",
+        component: () => import('@/views1/Page/PageView.vue')
+      },
+      {
+        path: "/home/retrieval",
+        component: () => import('@/views1/Retrieval/RetrievalView.vue')
+      },
+      {
+        path: "/home/file",
+        component: () => import('@/views1/File/FileView.vue')
+      },
+      {
+        path: "/home/personal",
+        component: () => import('@/views1/Personal/PersonalView.vue')
+      },
+      {
+        path: "/home/system",
+        component: () => import('@/views1/System/SystemView.vue')
+      }
+    ],
+  },
+  {
+    path: '/login1',
+    component: () => import('@/views1/LoginView.vue'),
+    hidden: true,
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

src/views1/File/FileView.vue

@@ -0,0 +1,11 @@
+<template>
+<h1>文档管理</h1>
+</template>
+
+<script>
+
+</script>
+
+<style scoped lang='scss'>
+
+</style>

src/views1/HomeView.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="container">
+    <div class="header">
+      <div class="top">
+        <div class="left">
+          <span class="left1">
+            <img src="../assets/img/nav-index.jpg" alt="" />
+          </span>
+          <span class="left2">
+            <img src="../assets/img/luzhougongan.png" alt="" />
+          </span>
+        </div>
+          <el-menu
+            :default-active="activeIndex"
+            class="el-menu-demo"
+            mode="horizontal"
+            @select="handleSelect"
+            text-color="#006C9AFF"
+            active-text-color="#51CFFEFF"
+            background-color="transparent"
+          >
+            <el-menu-item index="0">
+                <span class="nav1"><img src="../assets/img/nav-home.png"></span>首页
+            </el-menu-item>
+            <el-menu-item index="1">
+                <span class="nav1"><img src="../assets/img/nav-search.png"></span>快速检索
+            </el-menu-item>
+            <el-submenu index="2">
+              <template slot="title">
+                <span class="nav1"><img src="../assets/img/nav-doc.png"></span>文档管理
+            </template>
+              <el-menu-item index="2-1">部门文档</el-menu-item>
+              <el-menu-item index="2-2">公共文档</el-menu-item>
+              <el-menu-item index="2-3">个人文档</el-menu-item>
+              <el-menu-item index="2-3">文档设置</el-menu-item>
+            </el-submenu>
+            <el-submenu index="3">
+              <template slot="title">
+                <span class="nav1"><img src="../assets/img/nav-person.png"></span>个人设置
+            </template>
+              <el-menu-item index="3-1">个人文档分类</el-menu-item>
+              <el-menu-item index="3-2">个人存储空间</el-menu-item>
+              <el-menu-item index="3-3">登录密码修改</el-menu-item>
+            </el-submenu>
+            <el-submenu index="4">
+              <template slot="title">
+                <span class="nav1"><img src="../assets/img/nav-setting.png"></span>系统管理
+            </template>
+              <el-menu-item index="4-1">组织管理</el-menu-item>
+              <el-menu-item index="4-2">用户管理</el-menu-item>
+              <el-menu-item index="4-3">权限管理</el-menu-item>
+              <el-menu-item index="4-4">系统日志管理</el-menu-item>
+              <el-menu-item index="4-5">存储空间管理</el-menu-item>
+            </el-submenu>
+          </el-menu>
+        <div class="right">
+           <span class="right_1">
+            <img src="../assets/img/2.jpg"> 
+           </span>
+          <span class="right_2">孙芳</span>
+          <div class="right_3"></div>
+           <span class="right_4">
+            <img src="../assets/img/exit.png">
+           </span>
+        </div>
+      </div>
+      <div class="bottom"></div>
+    </div>
+    <div class="main">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import page from "./Page/PageView";
+import retrieval from "./Retrieval/RetrievalView";
+import file from "./File/FileView";
+import personal from "./Personal/PersonalView";
+import system from "./System/SystemView";
+
+export default {
+  data() {
+    return {
+      activeIndex: "1",
+    };
+  },
+  components: {
+    page,
+    retrieval,
+    file,
+    personal,
+    system
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style scoped lang='scss'>
+.container {
+  background: #0C0827FF;
+  width: 100%;
+  height: 100%;
+  .header {
+    height: calc(100vh * (70 / 1080));
+    width: 100%;
+    padding-top: calc(100vh * (10 / 1080));
+    // 顶部板块
+    .top {
+      height: calc(100vh * (40 / 1080));
+      width: 100%;
+      padding-right: calc(100vh * (17 / 1920));
+      padding-left: calc(100vh * (35 / 1920));
+      display: flex;
+      //顶部左边板块
+      .left {
+        width: calc(100vw * (369 / 1920));
+        height: calc(100vh * (40 / 1080));
+        display: flex;
+        .left1 {
+          width: calc(100vw * (28 / 1920));
+          height: calc(100vh * (30 / 1080));
+          margin-top: calc(100vh * (8 / 1080));
+          img {
+            width: calc(100vw * (28 / 1920));
+            height: calc(100vh * (30 / 1080));
+          }
+        }
+        .left2 {
+          width: calc(100vw * (295 / 1920));
+          height: calc(100vh * (32 / 1080));
+          margin-left: calc(100vw * (10 / 1920));
+          margin-top: calc(100vw * (5 / 1080));
+          img {
+            width: calc(100vw * (295 / 1920));
+            height: calc(100vh * (32 / 1080));
+          }
+        }
+      }
+      // 顶部中间板块
+      .el-menu-demo {
+        width: calc(100vw * (1000 / 1920));
+        margin-left: calc(100vw * (280 / 1920));
+        padding-bottom: calc(100vh * (8 / 1080));
+        border: none;
+        display: flex;
+        li{
+            height: calc(100vh * (40 / 1080));  
+            line-height: calc(100vh * (40 / 1080));
+            margin-right: calc(100vw * (60 / 1920));   
+        }
+        .nav1>img{
+        width: calc(100vw * (24 / 1920));
+        height: calc(100vh * (24 / 1080));
+        margin-bottom: calc(100vw * (5 / 1920));
+        margin-right: calc(100vh * (5 / 1080));   
+        }
+      }
+      // 顶部右边板块
+      .right {
+        width: calc(100vw * (100 / 1920));
+        height: calc(100vh * (40 / 1080));
+        margin-left: calc(100vw * (150 / 1920));
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .right_1>img{
+        width: calc(100vw * (20 / 1920));
+        height: calc(100vh * (20 / 1080));
+      }
+      .right_2 {
+       font-size: 12px;
+       color: white;
+      }
+      .right_3 {
+        width: 1px;
+        height: 13px;
+        background: #02AAC0;
+        border-radius: 0px 0px 0px 0px;
+        opacity: 1;
+      }
+      .right_4>img {
+        width: calc(100vw * (26 / 1920));
+        height: calc(100vh * (26 / 1080));
+      }
+      }
+    }
+    //顶部下边图片板块
+    .bottom {
+      height: calc(100vh * (20 / 1080));
+      width: 100%;
+      background: url("../assets/img/nav-decorate.png") center/cover;
+    }
+  }
+}
+::v-deep .el-menu-item{
+    padding: 0;
+    padding-bottom: (100vh * (50 / 1080));
+}
+::v-deep .el-submenu__title{
+    padding: 0;
+    padding-bottom: (100vh * (50 / 1080));
+}
+::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title{
+    height: calc(100vh * (40 / 1080));  
+    line-height: calc(100vh * (40 / 1080));
+}
+
+</style>

src/views1/LoginView.vue

@@ -0,0 +1,143 @@
+<template>
+  <!-- 界面整体背景图 -->
+  <div class="container">
+    <!-- 界面左边背景图 -->
+    <div class="left"></div>
+    <!-- 界面右边背景图 -->
+    <div class="right">
+      <!-- 分为上下两部分，上面是标题，使用背景图片 -->
+      <div class="right_top"></div>
+      <!-- 登录界面 -->
+      <div class="right_bottom">
+        <!-- 登录标题 -->
+        <h3 class="right_bottom_dl">登&nbsp;录</h3>
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="LoginRules"
+          class="login-form"
+          style="width: 70%"
+          hide-required-asterisk="false"
+        >
+          <!-- 账号密码登录 -->
+          <el-form-item prop="username" label="账号">
+            <el-input
+              v-model="loginForm.username"
+              type="text"
+              placeholder="请输入手机号/邮箱"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password" label="密码">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              placeholder="请输入密码"
+              @keyup.enter.native="getCode"
+            >
+            </el-input>
+          </el-form-item>
+          <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0"
+            >记住密码</el-checkbox
+          >
+          <!-- 下方的登录按钮 -->
+          <el-form-item style="width: 100%">
+            <el-button
+              :loading="loading"
+              size="medium"
+              type="primary"
+              style="width: 100%"
+              @click.native.prevent="getCode"
+              class="custom-style"
+            >
+              <span v-if="!loading">登 录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loginForm: {
+        username: "admin",
+        password: "admin123",
+        rememberMe: true,
+        tenantName: "泸州公安局文库系统",
+      },
+      LoginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "账号错误" }
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "密码错误" }
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style scoped lang='scss'>
+.container {
+  background: url(../assets/img/dl_background.png);
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  .left {
+    background: url(../assets/img/dl_logo.png) no-repeat center/contain;
+    height: calc(100vh * (894 / 1080));
+    width: calc(100vw * (820 / 1920));
+    margin-top: 93px;
+    margin-left: 189px;
+  }
+  .right {
+    height: calc(100vh * (780 / 1080));
+    width: calc(100vw * (516 / 1920));
+    // background: red;
+    margin-top: 140px;
+    margin-left: 193px;
+    .right_top {
+      background: url(../assets/img/dl_title.png) no-repeat center/contain;
+      height: calc(100vh * (70 / 1080));
+      width: calc(100vw * (497 / 1920));
+      font-family: YouSheBiaoTiHei-Regular;
+    }
+    .right_bottom {
+      background: url(../assets/img/dl_login.png) no-repeat center/contain;
+      height: calc(100vh * (630 / 1080));
+      width: calc(100vw * (482 / 1920));
+      box-sizing: border-box;
+      border: 1px solid rgba(0, 116, 223, 0.2);
+      margin-top: 30px;
+
+      .right_bottom_dl {
+        width: 60px;
+        height: 42px;
+        font-size: 25px;
+        font-family: PingFang SC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 30px;
+        margin-left: 45%;
+        margin-top: 15%;
+      }
+      .login-form {
+        margin-left: 60px;
+        margin-top: -30px;
+      }
+    }
+  }
+    ::v-deep .el-input--medium .el-input__inner {
+      background:#03486F;
+      border: 1px solid #03486F;
+  }
+}
+
+</style>

src/views1/Page/PageView.vue

@@ -0,0 +1,574 @@
+<template>
+  <div class="container">
+    <div class="top">
+      <div class="left">
+        <div class="left1">
+          <div class="left-top">
+            <h3>通知</h3>
+          </div>
+          <ul class="left-main">
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+          </ul>
+          <ul class="left-main">
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+          </ul>
+          <ul class="left-main">
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+          </ul>
+          <ul class="left-main">
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+          </ul>
+          <ul class="left-main">
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="cen">
+        <ul class="cen-cen">
+          <li>个人文档</li>
+          <li>部门文档</li>
+          <li>公共文档</li>
+        </ul>
+        <div class="cen—top">
+          <div class="cen—top-left">全部文档<span></span></div>
+          <div class="cen—top-right">
+            <div class="cen—top-div">
+              <input
+                type="text"
+                placeholder="请输入文档信息"
+                class="cen—top-input"
+              />
+              <button class="cen—top-but">快速搜索</button>
+              <img
+                src="../../assets/img/ri：search-2-line@2x.png"
+                class="cen—top-img"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="cen—bottom">
+          <div class="one">
+            <p>个人文档</p>
+            <img src="../../assets/img/MMB1.png" alt="" />
+          </div>
+          <div class="two">
+            <p>部门文档</p>
+            <img src="../../assets/img/MMB2.png" alt="" />
+          </div>
+          <div class="three">
+            <p>公共文档</p>
+            <img src="../../assets/img/MMB3.png" alt="" />
+          </div>
+          <div class="four">
+            <p>文档设置</p>
+            <img src="../../assets/img/MMB4.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="left1">
+          <div class="left-top">
+            <h3>通知</h3>
+          </div>
+          <ul class="left-main">
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+          </ul>
+          <ul class="left-main">
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+          </ul>
+          <ul class="left-main">
+            <li>
+              <div class="one">通知标题：7月报表收集</div>
+              <div class="two">截止时间：2022-07-17</div>
+              <div class="three">通知类型：文档搜集</div>
+              <div class="four">
+                通知内容：文档搜集文档搜集文档搜集文档搜集文档搜集...
+              </div>
+              <div class="five">
+                <span>查看详细</span>
+                <span>上传文件</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="left">
+        <div class="left-top">
+          <h3>最近收到的文件</h3>
+        </div>
+        <ul class="left-main">
+          <li class="first">
+            <div class="one">文件名</div>
+            <div class="two">收到时间</div>
+            <div class="three">文件类型</div>
+            <div class="four">文件位置</div>
+          </li>
+          <li>
+            <span class="one">重点人员名单</span>
+            <span class="two">2022-08-29&nbsp;17:44:24</span>
+            <span class="three">DOX</span>
+            <span class="four">http://odasdaf.so/sdafa</span>
+          </li>
+          <li>
+            <span class="one">重点人员名单</span>
+            <span class="two">2022-08-29&nbsp;17:44:24</span>
+            <span class="three">DOX</span>
+            <span class="four">http://odasdaf.so/sdafa</span>
+          </li>
+          <li>
+            <span class="one">重点人员名单</span>
+            <span class="two">2022-08-29&nbsp;17:44:24</span>
+            <span class="three">DOX</span>
+            <span class="four">http://odasdaf.so/sdafa</span>
+          </li>
+          <li>
+            <span class="one">重点人员名单</span>
+            <span class="two">2022-08-29&nbsp;17:44:24</span>
+            <span class="three">DOX</span>
+            <span class="four">http://odasdaf.so/sdafa</span>
+          </li>
+        </ul>
+      </div>
+      <div class="right">
+        <div class="left-top">
+          <h3>最近发送的文件</h3>
+        </div>
+        <ul class="left-main">
+          <li class="first">
+            <div class="one">文件名</div>
+            <div class="two">收到时间</div>
+            <div class="three">文件类型</div>
+            <div class="four">文件位置</div>
+          </li>
+          <li>
+            <span class="one">重点人员名单</span>
+            <span class="two">2022-08-29&nbsp;17:44:24</span>
+            <span class="three">DOX</span>
+            <span class="four">http://odasdaf.so/sdafa</span>
+          </li>
+          <li>
+            <span class="one">重点人员名单</span>
+            <span class="two">2022-08-29&nbsp;17:44:24</span>
+            <span class="three">DOX</span>
+            <span class="four">http://odasdaf.so/sdafa</span>
+          </li>
+          <li>
+            <span class="one">重点人员名单</span>
+            <span class="two">2022-08-29&nbsp;17:44:24</span>
+            <span class="three">DOX</span>
+            <span class="four">http://odasdaf.so/sdafa</span>
+          </li>
+          <li>
+            <span class="one">重点人员名单</span>
+            <span class="two">2022-08-29&nbsp;17:44:24</span>
+            <span class="three">DOX</span>
+            <span class="four">http://odasdaf.so/sdafa</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang='scss'>
+.container {
+  color: #7ea4c8ff;
+  font-size: 0.14rem;
+  font-family: PingFang SC-Medium, PingFang SC;
+  background: url(../../assets/img/background.png);
+  background-size: 100% 100%;
+  padding-top: calc(100vh * (50 / 1080));
+  .top {
+    width: 100%;
+    height: calc(100vh * (600 / 1080));
+    padding-left: calc(100vw * (34 / 1920));
+    padding-right: calc(100vw * (30 / 1920));
+    display: flex;
+    justify-content: space-between;
+    .left,
+    .right {
+      width: calc(100vw * (395 / 1920));
+      height: calc(100vh * (568 / 1080));
+      background: url(../../assets/img/main_BG_left.png);
+      background-size: calc(100vw * (395 / 1920)) calc(100vh * (568 / 1080));
+      padding-left: 10px;
+      padding-top: 5px;
+      .left1 {
+        width: calc(100vw * (375 / 1920));
+        height: calc(100vh * (556 / 1080));
+        overflow: auto;
+        .left-top {
+          width: calc(100vw * (365 / 1920));
+          height: calc(100vh * (40 / 1080));
+          font-size: 16px;
+          font-weight: 400;
+          color: #ffffff;
+          margin-top: 5px;
+          background: url(../../assets/img/main_left_decorate.png);
+          background-size: calc(100vw * (365 / 1920)) calc(100vh * (40 / 1080));
+          h3 {
+            padding-top: 3px;
+            padding-left: 10px;
+            margin: 0;
+          }
+        }
+      }
+      .left-main {
+        list-style: none;
+        padding: 0;
+        li {
+          width: calc(100vw * (365 / 1920));
+          height: calc(100vh * (230 / 1080));
+          background: rgba(18, 32, 80, 0.4);
+          border-radius: 2px 2px 2px 2px;
+          opacity: 1;
+          div {
+            padding: 3px 5px;
+          }
+          .five {
+            display: flex;
+            justify-content: space-evenly;
+            color: #016c9aff;
+            padding-top: 5px;
+          }
+        }
+      }
+    }
+    .cen {
+      width: calc(100vw * (784 / 1920));
+      height: calc(100vh * (600 / 1080));
+      // background: aqua;
+      position: relative;
+      .cen-cen {
+        width: calc(100vw * (96 / 1920));
+        height: calc(100vh * (136 / 1080));
+        background: #0f1540ff;
+        position: absolute;
+        top: 30px;
+        left: 25px;
+        list-style: none;
+        padding: 0 calc(100vw * (3 / 1920));
+        padding-top: calc(100vh * (10 / 1080));
+        border: 1px solid #00000040;
+        border-radius: 2px 2px 2px 2px;
+        // display: none;
+        li {
+          padding: calc(100vh * (6 / 1080)) calc(100vw * (10 / 1920));
+          &:hover {
+            background: #01d1ff3b;
+          }
+        }
+      }
+      .cen—top {
+        width: calc(100vw * (623 / 1920));
+        height: calc(100vh * (40 / 1080));
+        // background: salmon;
+        overflow: hidden;
+        margin-left: calc(100vw * (81 / 1920));
+        display: flex;
+        align-items: center;
+        .cen—top-left {
+          width: calc(100vw * (80 / 1920));
+          height: calc(100vh * (20 / 1080));
+          // background: seagreen;
+          margin-right: calc(100vw * (5 / 1920));
+          font-size: 12px;
+          color: #2e8aecff;
+          display: flex;
+          align-items: center;
+          span {
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-width: calc(100vw * (5 / 1920));
+            border-style: solid;
+            border-color: #01d1ffff transparent transparent transparent;
+            margin-left: calc(100vw * (5 / 1920));
+            margin-top: calc(100vh * (5 / 1080));
+          }
+        }
+        .cen—top-right {
+          width: calc(100vw * (536 / 1920));
+          height: calc(100vh * (36 / 1080));
+          .cen—top-div {
+            position: relative;
+            .cen—top-img {
+              // background-size: calc(100vw * (24 / 1920)) calc(100vh * (24/ 1080));
+              width: calc(100vw * (24 / 1920));
+              height: calc(100vh * (24 / 1080));
+              position: absolute;
+              left: calc(100vw * (15 / 1920));
+              top: calc(100vh * (7 / 1080));
+            }
+            .cen—top-input {
+              width: calc(100vw * (436 / 1920));
+              height: calc(100vh * (36 / 1080));
+              padding-left: calc(100vw * (53 / 1920));
+            }
+            .cen—top-but {
+              width: calc(100vw * (100 / 1920));
+              height: calc(100vh * (36 / 1080));
+              // background: #01D1FF80;
+              // color: #FFFFFFCC;
+            }
+          }
+        }
+      }
+      .cen—bottom {
+        width: calc(100vw * (784 / 1920));
+        height: calc(100vh * (477 / 1080));
+        background: url(../../assets/img/MMB.png);
+        background-size: calc(100vw * (784 / 1920)) calc(100vh * (477 / 1080));
+        margin-top: calc(100vh * (80 / 1080));
+        position: relative;
+        font-size: 0.18rem;
+        color: #ffffffff;
+        font-weight: 400;
+        .one {
+          position: absolute;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          left: calc(100vw * (172 / 1920));
+          top: -30px;
+          width: calc(100vw * (140 / 1920));
+          height: calc(100vh * (153 / 1080));
+          img {
+            width: 100%;
+            height: calc(100vh * (130 / 1080));
+          }
+        }
+        .two {
+          position: absolute;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          left: calc(100vw * (442 / 1920));
+          top: -30px;
+          width: calc(100vw * (140 / 1920));
+          height: calc(100vh * (153 / 1080));
+          img {
+            width: 100%;
+            height: calc(100vh * (130 / 1080));
+          }
+        }
+        .three {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: absolute;
+          left: calc(100vw * (36 / 1920));
+          top: calc(100vh * (150 / 1080));
+          width: calc(100vw * (140 / 1920));
+          height: calc(100vh * (153 / 1080));
+          img {
+            width: 100%;
+            height: calc(100vh * (130 / 1080));
+          }
+        }
+        .four {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: absolute;
+          right: calc(100vw * (57 / 1920));
+          top: calc(100vh * (150 / 1080));
+          width: calc(100vw * (140 / 1920));
+          height: calc(100vh * (153 / 1080));
+          img {
+            width: 100%;
+            height: calc(100vh * (130 / 1080));
+          }
+        }
+      }
+    }
+  }
+  .bottom {
+    width: 100%;
+    height: calc(100vh * (304 / 1080));
+    background-size: cover;
+    margin-top: calc(100vh * (30 / 1080));
+    padding-left: calc(100vw * (30 / 1920));
+    padding-right: calc(100vw * (34 / 1920));
+    display: flex;
+    justify-content: space-between;
+    .left,
+    .right {
+      width: calc(100vw * (920 / 1920));
+      height: calc(100vh * (304 / 1080));
+      background: url(../../assets/img/footer.png);
+      background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
+      padding-left: 10px;
+      .left-top {
+        width: calc(100vw * (760 / 1920));
+        height: calc(100vh * (40 / 1080));
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 10px;
+        background: url(../../assets/img/main_left_decorate.png);
+        background-size: cover;
+        h3 {
+          padding-top: 3px;
+          padding-left: 10px;
+          margin: 0;
+        }
+      }
+      .left-main {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        li {
+          padding: 5px;
+          display: flex;
+        }
+        .first {
+          color: #2e8aecff;
+          margin-top: calc(100vh * (10 / 1920));
+          background: url(../../assets/img/main_left_decorate.png);
+          background-size: contain;
+        }
+        .one {
+          width: calc(100vw * (250 / 1920));
+        }
+        .two {
+          width: calc(100vw * (230 / 1920));
+        }
+        .three {
+          width: calc(100vw * (150 / 1920));
+        }
+      }
+    }
+  }
+}
+::v-deep .el-icon-arrow-down:before {
+  display: none;
+}
+
+//滚动条样式
+::-webkit-scrollbar {
+  width: 3.5px;
+}
+::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
+}
+::-webkit-scrollbar-thumb {
+  background: #2e8aec;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #2e8aec;
+}
+</style>

src/views1/Personal/PersonalView.vue

@@ -0,0 +1,11 @@
+<template>
+<h1>个人设置</h1>
+</template>
+
+<script>
+
+</script>
+
+<style scoped lang='scss'>
+
+</style>

src/views1/Retrieval/RetrievalView.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="container">
+    <div class="picture">
+      <img src="../../assets/img/Group 467.png" alt="" />
+    </div>
+    <div class="search">
+      <input type="text" placeholder="请输入文档信息" class="cen—top-input" />
+      <span class="cen—top-span">快速搜索</span>
+      <img
+        src="../../assets/img/ri：search-2-line@2x.png"
+        class="cen—top-img"
+      />
+    </div>
+    <div class="range">
+      <p class="range-p">文档范围：</p>
+      <ul class="range-ul">
+        <li>全部文档</li>
+        <li>公共文档</li>
+        <li>部门文档</li>
+        <li>个人文档</li>
+      </ul>
+    </div>
+    <div class="category">
+    <p class="range-p">文档分类：</p>
+      <ul class="range-ul">
+        <li>全部文档</li>
+        <li>公共文档</li>
+        <li>部门文档</li>
+        <li>个人文档</li>
+      </ul>
+    </div>
+    <div class="time">    
+    <span>时间选择：</span>
+    <el-checkbox-group v-model="checkList"> 
+    <el-checkbox label="不限"></el-checkbox>
+    <el-checkbox label="30天"></el-checkbox>
+    <el-checkbox label="7天"></el-checkbox>
+    <el-checkbox label="1天"></el-checkbox>
+    <el-date-picker
+      v-model="value1"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
+    </el-date-picker>
+  </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+ export default {
+    data() {
+      return {
+        checkList: [],
+        value1: ''
+      };
+    }
+  };
+
+</script>
+
+<style scoped lang='scss'>
+.container {
+  color: #7ea4c8;
+  font-size: 0.14rem;
+  font-family: PingFang SC-Medium, PingFang SC;
+  font-weight: 500;
+  .picture {
+    width: calc(100vw * (220 / 1920));
+    height: calc(100vh * (57 / 1080));
+    margin-left: calc(100vw * (860 / 1920));
+    margin-top: calc(100vh * (122 / 1080));
+    margin-bottom: calc(100vh * (40 / 1080));
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+  .search {
+    width: calc(100vw * (864 / 1920));
+    height: calc(100vh * (50 / 1080));
+    margin-left: calc(100vw * (528 / 1920));
+    margin-bottom: calc(100vh * (40 / 1080));
+    position: relative;
+    .cen—top-img {
+      width: calc(100vw * (24 / 1920));
+      height: calc(100vh * (24 / 1080));
+      position: absolute;
+      left: calc(100vw * (15 / 1920));
+      top: calc(100vh * (15 / 1080));
+    }
+    .cen—top-input {
+      width: calc(100vw * (750 / 1920));
+      height: calc(100vh * (50 / 1080));
+      padding-left: calc(100vw * (53 / 1920));
+      margin-right: calc(100vw * (14 / 1920));
+    }
+    .cen—top-span {
+      display: inline-block;
+      width: calc(100vw * (100 / 1920));
+      height: calc(100vh * (50 / 1080));
+      background: #2e8aecff;
+      color: #ffffffcc;
+      text-align: center;
+      line-height: calc(100vh * (50 / 1080));
+    }
+  }
+  .range,.category {
+    width: calc(100vw * (480 / 1920));
+    height: calc(100vh * (36 / 1080));
+    margin-left: calc(100vw * (528 / 1920));
+    margin-bottom: calc(100vh * (30 / 1080));
+    line-height: calc(100vh * (36 / 1080));
+    display: flex;
+    .range-ul{
+        display: flex;
+        list-style: none;
+        padding: 0;
+        li{
+           width: calc(100vw * (90 / 1920));
+           height: calc(100vh * (36 / 1080));
+           margin-left: calc(100vw * (10 / 1920));
+        }
+    }
+  }
+  .time {
+    width: calc(100vw * (1333 / 1920));
+    height: calc(100vh * (36 / 1080));
+    margin-left: calc(100vw * (528 / 1920));
+    display: flex;
+    align-items: center;
+    .el-checkbox-group{
+        .el-checkbox{
+        margin-right: calc(100vw * (70 / 1920));
+        }
+      .el-date-picker{
+        height: calc(100vh * (36 / 1080));
+      }
+    }
+  }
+}
+</style>

src/views1/System/SystemView.vue

@@ -0,0 +1,11 @@
+<template>
+<h1>系统管理</h1>
+</template>
+
+<script>
+
+</script>
+
+<style scoped lang='scss'>
+
+</style>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: `http://192.168.188.99:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''