0.0.7

开始修改模板

src/api/user.js

@@ -14,7 +14,7 @@ export function getInfo(token) {
   return request({
     url: '/user/getUserInfo',
     method: 'get',
-    params: { token }
+    //params: { token }
   })
 }
 
@@ -31,6 +31,6 @@ export function getMenu(token) {
   return request({
     url: '/authority/getRecursionMenu',
     method: 'get',
-    params: { token }
+    //params: { token }
   })
 }

src/layout/components/Navbar.vue

@@ -1,29 +1,27 @@
 <template>
   <div class="navbar">
+    <div class="pageTitle">平台管理概况</div>
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-
+    <!--收缩左侧菜单-->
+    <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <!--搜索，全屏，大小写转换和翻译-->
+      <!-- <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
-
         <error-log class="errLog-container right-menu-item hover-effect" />
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
         <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
-
         <lang-select class="right-menu-item hover-effect" />
-
-      </template>
-
+      </template> -->
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <span class="userName">{{this.$store.state.user.name}}</span>
+          <!--向下按钮-->
+          <!-- <i class="el-icon-caret-bottom" /> -->
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/profile/index">
@@ -78,7 +76,7 @@ export default {
       'sidebar',
       'avatar',
       'device'
-    ])
+    ]),
   },
   methods: {
     toggleSideBar() {
@@ -89,8 +87,7 @@ export default {
     //   this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     // }
     logout(){
-      //调用store中的退出
-      this.$store.commit('user/LOGOUT')
+      this.$store.commit("user/LOGOUT");
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     }
   }
@@ -102,9 +99,25 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
+  display:flex;
+  align-items: center;
+  justify-content: space-between;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
+  .pageTitle {
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 30px;
+    color: #45464E;
+  }
+
+  .userName {
+    font-size: 14px;
+    color:#1C1D22;
+    margin-left: 10px;
+  }
+
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -159,7 +172,8 @@ export default {
 
       .avatar-wrapper {
         margin-top: 5px;
-        position: relative;
+        display: flex;
+        align-items: center;
 
         .user-avatar {
           cursor: pointer;

src/router/index.js

@@ -83,31 +83,31 @@ export const constantRoutes = [
       }
     ]
   },
-  {
-    path: '/documentation',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
-        meta: { title: 'documentation', icon: 'documentation', affix: true }
-      }
-    ]
-  },
-  {
-    path: '/guide',
-    component: Layout,
-    redirect: '/guide/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/guide/index'),
-        name: 'Guide',
-        meta: { title: 'guide', icon: 'guide', noCache: true }
-      }
-    ]
-  },
+  // {
+  //   path: '/documentation',
+  //   component: Layout,
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/documentation/index'),
+  //       name: 'Documentation',
+  //       meta: { title: 'documentation', icon: 'documentation', affix: true }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/guide',
+  //   component: Layout,
+  //   redirect: '/guide/index',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/guide/index'),
+  //       name: 'Guide',
+  //       meta: { title: 'guide', icon: 'guide', noCache: true }
+  //     }
+  //   ]
+  // },
   {
     path: '/profile',
     component: Layout,

src/store/modules/user.js

@@ -61,7 +61,7 @@ const actions = {
         // }
         // 所有用户的身份都为admin
         const roles = ['admin']
-        const { name, avatar, introduction } = data
+        const { real_name, avatar, introduction } = data
         data.roles = roles
         // roles must be a non-empty array
         // 判断是否包含权限
@@ -69,7 +69,7 @@ const actions = {
         //   reject('getInfo: roles must be a non-null array!')
         // }
         commit('SET_ROLES', roles)
-        commit('SET_NAME', name)
+        commit('SET_NAME', real_name)
         commit('SET_AVATAR', avatar)
         commit('SET_INTRODUCTION', introduction)
         resolve(data)

src/views/dashboard/admin/components/PanelGroup.vue

@@ -70,112 +70,112 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.panel-group {
-  margin-top: 18px;
+<style lang="less" scoped>
+  .panel-group {
+    margin-top: 18px;
 
-  .card-panel-col {
-    margin-bottom: 32px;
-  }
+    .card-panel-col {
+      margin-bottom: 32px;
+    }
 
-  .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
+    .card-panel {
+      height: 108px;
+      cursor: pointer;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      color: #666;
+      background: #fff;
+      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+      border-color: rgba(0, 0, 0, .05);
+
+      &:hover {
+        .card-panel-icon-wrapper {
+          color: #fff;
+        }
+
+        .icon-people {
+          background: #40c9c6;
+        }
+
+        .icon-message {
+          background: #36a3f7;
+        }
+
+        .icon-money {
+          background: #f4516c;
+        }
+
+        .icon-shopping {
+          background: #34bfa3
+        }
       }
 
       .icon-people {
-        background: #40c9c6;
+        color: #40c9c6;
       }
 
       .icon-message {
-        background: #36a3f7;
+        color: #36a3f7;
       }
 
       .icon-money {
-        background: #f4516c;
+        color: #f4516c;
       }
 
       .icon-shopping {
-        background: #34bfa3
+        color: #34bfa3
       }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-    }
-
-    .icon-message {
-      color: #36a3f7;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
 
-    .icon-shopping {
-      color: #34bfa3
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-icon {
-      float: left;
-      font-size: 48px;
-    }
+      .card-panel-icon-wrapper {
+        float: left;
+        margin: 14px 0 0 14px;
+        padding: 16px;
+        transition: all 0.38s ease-out;
+        border-radius: 6px;
+      }
 
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
-      margin-left: 0px;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
+      .card-panel-icon {
+        float: left;
+        font-size: 48px;
       }
 
-      .card-panel-num {
-        font-size: 20px;
+      .card-panel-description {
+        float: right;
+        font-weight: bold;
+        margin: 26px;
+        margin-left: 0px;
+
+        .card-panel-text {
+          line-height: 18px;
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 16px;
+          margin-bottom: 12px;
+        }
+
+        .card-panel-num {
+          font-size: 20px;
+        }
       }
     }
   }
-}
 
-@media (max-width:550px) {
-  .card-panel-description {
-    display: none;
-  }
-
-  .card-panel-icon-wrapper {
-    float: none !important;
-    width: 100%;
-    height: 100%;
-    margin: 0 !important;
+  @media (max-width:550px) {
+    .card-panel-description {
+      display: none;
+    }
 
-    .svg-icon {
-      display: block;
-      margin: 14px auto !important;
+    .card-panel-icon-wrapper {
       float: none !important;
+      width: 100%;
+      height: 100%;
+      margin: 0 !important;
+
+      .svg-icon {
+        display: block;
+        margin: 14px auto !important;
+        float: none !important;
+      }
     }
   }
-}
 </style>

src/views/dashboard/admin/index.vue

@@ -1,42 +1,50 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
-
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
-
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
+    <!--每一列间隔32项目-->
     <el-row :gutter="32">
+      <!--屏幕尺寸不够的时候自己沾满一行-->
       <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
+        <div class="topWindowBox">
+          <div class="twbTitle">
+            <div class="twbIconbgRed"></div>网站数量
+          </div>
+          <div class="twbNumber">1,000</div>
+          <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div>
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
+        <div class="topWindowBox">
+          <div class="twbTitle">
+            <div class="twbIconbgBlue"></div>内容发布数量
+          </div>
+          <div class="twbNumber">68,888</div>
+          <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div>
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
+        <div class="topWindowBox">
+          <div class="twbTitle">
+            <div class="twbIconbgPurple"></div>公共栏目数量
+          </div>
+          <div class="twbNumber">24</div>
+          <div class="twbStatusDown"><img src="@/assets/index/arrow-down.png"/> -2% <span>较上个月</span></div>
         </div>
       </el-col>
     </el-row>
 
-    <el-row :gutter="8">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list />
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="16">
+        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+          <line-chart :chart-data="lineChartData" />
+        </el-row>
       </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card />
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
       </el-col>
     </el-row>
+
   </div>
 </template>
 
@@ -96,29 +104,84 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
+<style lang="less" scoped>
+  .topWindowBox{
+    background:#FFFFFF;
+    border-Radius:20px;
+    height:200px;
+    width:100%;
+    margin-bottom:30px;
+    padding:25px;
+    box-sizing: border-box;
+    .twbTitle {
+      display:flex;
+      align-items: center;
+      font-size:16px;
+      color:#212227;
+      .twbIconbgRed,.twbIconbgBlue,.twbIconbgPurple{
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        margin-right: 15px;
+      }
+      .twbIconbgRed {
+        background: #EA79BA;
+      }
+      .twbIconbgBlue {
+        background: #6DACE7;
+      }
+      .twbIconbgPurple{
+        background: #AA7AEB;
+      }
+    }
+    .twbNumber {
+      font-size: 30px;
+      margin-top:32px;
+      font-weight: 1000;
+    }
+    .twbStatus,.twbStatusDown {
+      font-size:14px;
+      margin-top: 35px;
+      display:flex;
+      img {
+        display: block;
+        margin-right: 4px;
+      }
+      span {
+        color:#707B81;
+        margin-left: 8px;
+      }
+    }
+    .twbStatus {
+      color:#23C581;
+    }
+    .twbStatusDown {
+      color:#E74545
+    }
   }
 
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
+  .dashboard-editor-container {
+    padding: 32px;
+    background-color: rgb(240, 242, 245);
+    position: relative;
+
+    .github-corner {
+      position: absolute;
+      top: 0px;
+      border: 0;
+      right: 0;
+    }
+
+    .chart-wrapper {
+      background: #fff;
+      padding: 16px 16px 0;
+      margin-bottom: 32px;
+    }
   }
-}
 
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
+  @media (max-width:1024px) {
+    .chart-wrapper {
+      padding: 8px;
+    }
   }
-}
 </style>