init

src/App.vue

@@ -1,31 +1,62 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <HeaderBanner></HeaderBanner>
+    <Navigation></Navigation>
+    <div class="app_content">
+      <div class="router">
+        <LoginInfo></LoginInfo>
+        <Routerbanner/>
+      </div>
+      <div class="router_view">
+        <router-view></router-view>
+      </div>
     </div>
-    <router-view/>
   </div>
 </template>
 
-<style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
+<script>
+import HeaderBanner from "./components/HeaderBanner";
+import Navigation from "./components/Navigation";
+import LoginInfo from "./components/LoginInfo";
+import Routerbanner from "./components/RouterBanner"
 
-  a {
-    font-weight: bold;
-    color: #2c3e50;
+export default {
+  components: {
+    HeaderBanner,
+    Navigation,
+    LoginInfo,
+    Routerbanner
+  },
+};
+</script>
 
-    &.router-link-exact-active {
-      color: #42b983;
+<style lang="less">
+* {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  font-size: 12px;
+  color: #333;
+  font-family: "微软雅黑";
+}
+#app {
+  background-color: #eeeeee;
+  .app_content {
+    width: 1190px;
+    height: 80vh;
+    margin: 0 auto;
+    position: relative;
+    .router{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 150px;
+    }
+    .router_view{
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 1030px;
     }
   }
 }

src/components/HeaderBanner.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="header_banner">
+    <div class="header_mid">
+      <div class="log"></div>
+      <p>雷克萨斯中国经销商订单管理系统</p>
+      <div class="ope_button">
+        <div class="back_button">
+          <img src="" alt="">
+          <p>返回系统选择页面</p>
+        </div>
+        <div class="login_out">
+          <img src="" alt="">
+          <p>退出系统</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang="less">
+.header_banner {
+  width: 100%;
+  height: 60px;
+  background: white;
+  .header_mid {
+    margin: 0 auto;
+    display: flex;
+    width: 1190px;
+    justify-content: space-between;
+    .log{
+      width: 300px;
+      height: 28.7px;
+      padding-top: 20px;
+      img{
+        width: 300px;
+        height: 28.7px;
+      }
+    }
+    p{
+      padding-top: 20px;
+      font-size: 22px;
+    }
+    .ope_button{
+      width: 248px;
+      height: 50.8px;
+      margin: 3px 0 0 40px;
+      display: flex;
+      p{
+        padding:0;
+        font-size: 14px;
+      }
+      .login_out{
+        margin-left: 40px;
+      }
+    }
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/LoginInfo.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="login_info">
+      <div class="user_info">
+          <div class="user_icon">
+              <img src="" alt="icon">
+          </div>
+          <div class="user_name">
+              <p>欢迎您，</p>
+              <p>dlrmkt</p>
+          </div>
+      </div>
+      <div class="time_info">
+          <div class="clock_icon">
+              <img src="" alt="icon">
+          </div>
+          <div class="login_time">
+              <p>登录时间</p>
+              <p>2021年-3-(星期四)</p>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang="less">
+.login_info {
+    background: rgb(212, 212, 212);
+    width: 100%;
+    .user_info{
+        height: 48px;
+        border-bottom: 1px solid #eee;
+        display: flex;
+        .user_icon{
+            margin: 8px 0 0 10px;
+            width: 30px;
+            height: 30px;
+            img{
+                width: 30px;
+                height: 30px;
+            }
+        }
+        .user_name{
+            margin: 4px 0 0 5px;
+            p{
+                line-height: 20px;
+                height: 20px;
+            }
+        }
+    }
+    .time_info{
+        height: 50px;
+        display: flex;
+        .clock_icon{
+            margin: 8px 0 0 10px;
+            width: 30px;
+            height: 30px;
+            img{
+                width: 30px;
+                height: 30px;
+            }
+        }
+        .login_time{
+            margin: 4px 0 0 5px;
+            p{
+                line-height: 20px;
+                height: 20px;
+            }
+        }
+    }
+}
+</style>

src/components/Navigation.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="navigation">
+    <p>经销商社交媒体工作平台 > 数据管理 > 上传资料</p>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang="less">
+.navigation {
+  width: 1190px;
+  height: 20px;
+  margin: 4px auto;
+}
+</style>

src/components/RouterBanner.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="router_banner">
+    <div class="data_management">
+      <div class="first_level">
+        <div class="icon">
+          <img src="" alt="icon" />
+        </div>
+        <div class="title">数据管理</div>
+        <div class="switch">
+          <img src="" alt="" />
+        </div>
+      </div>
+      <div class="router_li">
+        <router-link to="/uploadRecord" tag="li">- 上传记录</router-link>
+        <router-link to="/uploadLink" tag="li">- 链接上传</router-link>
+        <router-link to="/uploadInfor" tag="li">- 上传资料</router-link>
+        <router-link to="/inforList" tag="li">- 资料列表</router-link>
+      </div>
+    </div>
+    <div class="account_management first_level">
+      <div class="icon">
+        <img src="" alt="" />
+      </div>
+      <div class="title">
+        <router-link to="/accountIndex" tag="li">账号管理</router-link>
+      </div>
+      <div class="switch">
+        <img src="" alt="" />
+      </div>
+    </div>
+    <div class="parameter_management first_level">
+      <div class="icon">
+        <img src="" alt="" />
+      </div>
+      <div class="title">
+        <router-link to="/parameterIndex" tag="li">参数设置</router-link>
+      </div>
+      <div class="switch">
+        <img src="" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped lang="less">
+.router_banner {
+  width: 100%;
+  margin-top: 10px;
+  background: rgb(212, 212, 212);
+  .data_management {
+    width: 100%;
+    .router_li {
+      li {
+        width: 100%;
+        height: 38px;
+        background-color: rgb(212, 212, 212);
+        line-height: 38px;
+        text-align: center;
+        &:hover {
+          cursor: pointer;
+          color: rgb(0, 86, 160);
+        }
+      }
+    }
+  }
+}
+.first_level {
+  display: flex;
+  height: 35px;
+  align-items: center;
+  &:hover{
+    cursor: pointer;
+    background-color: rgb(0, 86, 160);
+  }
+  .title{
+    &:hover{
+    color: #fff;
+    li{
+      &:hover{
+        color: #fff;
+      }
+    }
+    }
+  }
+}
+.icon {
+  width: 35px;
+  height: 35px;
+  margin-left: 10px;
+  background: #fff;
+  img {
+    width: 35px;
+    height: 35px;
+  }
+}
+.title {
+  font-size: 14px;
+  margin-left: 4px;
+  li {
+    font-size: 14px;
+  }
+}
+.switch {
+  width: 11px;
+  height: 11px;
+  background: #fff;
+  margin-left: 20px;
+  img {
+    width: 11px;
+    height: 11px;
+  }
+}
+</style>

src/router/index.js

@@ -1,22 +1,44 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+// 上传记录
+import UploadRecord from '../views/data/UploadRecord.vue'
+// 链接上传
+import UploadLink from '../views/data/UploadLink.vue'
+// 上传资料
+import UploadInfor from '../views/data/UploadInfor.vue'
+// 资料列表
+import InforList from '../views/data/InforList.vue'
+// 账号管理
+import AccountIndex from '../views/account/AccountIndex.vue'
+// 参数设置
+import ParameterIndex from '../views/parameter/ParameterIndex.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
-    component: Home
+    path: '/uploadRecord',
+    component: UploadRecord
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/uploadLink',
+    component: UploadLink
+  },
+  {
+    path: '/uploadInfor',
+    component: UploadInfor
+  },
+  {
+    path: '/inforList',
+    component: InforList
+  },
+  {
+    path: '/accountIndex',
+    component: AccountIndex
+  },
+  {
+    path: '/parameterIndex',
+    component: ParameterIndex
   }
 ]
 

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/account/AccountIndex.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="upload_record">
+    <h1>账号管理</h1>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/data/InforList.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="upload_record">
+    <h1>资料列表</h1>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/data/UploadInfor.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="upload_record">
+    <h1>上传资料</h1>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/data/UploadLink.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="upload_record">
+    <h1>链接上传</h1>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/data/UploadRecord.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="upload_record">
+    <h1>上传记录</h1>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/parameter/ParameterIndex.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="upload_record">
+    <h1>参数设置</h1>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>