首页

src/assets/styles/iconfont.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'iconfont';
+  /* project id 3202838 */
+  src: url('//at.alicdn.com/t/font_3202838_q6w9546ze7d.woff2') format('woff2'),
+    url('//at.alicdn.com/t/font_3202838_q6w9546ze7d.woff') format('woff'),
+    url('//at.alicdn.com/t/font_3202838_q6w9546ze7d.ttf') format('truetype'),
+    url('#iconfont') format('svg');
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: .16rem;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/assets/styles/index.scss

@@ -31,6 +31,8 @@ html {
 *:before,
 *:after {
   box-sizing: inherit;
+  margin: 0;
+  padding: 0;
 }
 ul,
 ol {
@@ -190,6 +192,30 @@ aside {
 }
 
 // start
+.home_item {
+  height: 248px;
+  padding: 0 18px;
+  background: #fff;
+  border-radius: 4px;
+  .home_item_title {
+    display: flex;
+    padding: 18px 0;
+    border-bottom: 1px solid #eee;
+
+    h4 {
+      margin-left: 6px;
+      font-size: 16px;
+      color: #333333;
+    }
+
+    .iconfont {
+      font-size: 16px;
+      color: #3a8aeb;
+    }
+  }
+}
+
+
 .auth_code {
   position: relative;
   .login-code {

src/assets/styles/login.scss

@@ -8,7 +8,7 @@
   .login_bg{
     width: 1287px;
     height: 100%;
-    background: url(../assets/images/login/bg-dl.png) no-repeat left top;
+    background: url(~@/assets/images/login/bg-dl.png) no-repeat left top;
     background-size: cover;
   }
   // .title {

src/main.js

@@ -17,6 +17,7 @@ import checkPer from '@/utils/permission'
 import permission from './components/Permission'
 import './assets/styles/element-variables.scss'
 // global css
+import './assets/styles/iconfont.css'
 import './assets/styles/index.scss'
 
 // 代码高亮

src/router/routers.js

@@ -20,7 +20,7 @@ export const constantRouterMap = [
       title: '忘记密码',
       noCache: true
     },
-    component: resolve => require(['@/views/forgetPassword'], resolve),
+    component: resolve => require(['@/views/forgetPassword/index'], resolve),
     hidden: true
   },
   {

src/views/dashboard/AgencyData.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="home_item">
+    <div class="home_item_title">
+      <div class="icon iconfont">&#xe649;</div>
+      <h4>机构数据</h4>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgencyData',
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.home_item {
+  width: 412px;
+}
+</style>

src/views/dashboard/DeviceData.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="home_item">
+    <div class="home_item_title">
+      <div class="icon iconfont">&#xe652;</div>
+      <h4>设备信息</h4>
+    </div>
+    <div class="device_info">
+      <div class="info_item info1">
+        <span class="info_title">设备总数量</span>
+        <div class="info_total">
+          <span class="info_num">1</span>
+          <span>台</span>
+        </div>
+      </div>
+      <div class="info_item info2">
+        <span class="info_title">设备在线数量</span>
+        <div class="info_total">
+          <span class="info_num">1</span>
+          <span>台</span>
+        </div>
+      </div>
+      <div class="info_item info3">
+        <span class="info_title">设备离线数量</span>
+        <div class="info_total">
+          <span class="info_num">1</span>
+          <span>台</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceData',
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.home_item {
+  width: 536px;
+  margin: 0 24px;
+  .device_info {
+    display: flex;
+    justify-content: space-between;
+    padding: 18px 22px 0 22px;
+    .info_item {
+      position: relative;
+      width: 136px;
+      height: 141px;
+      padding: 19px 18px 24px 18px;
+      color: #fff;
+
+      &.info1 {
+        background: url(~@/assets/images/home/s-j1.png) no-repeat left top;
+        background-size: 136px 141px;
+      }
+      &.info2 {
+        background: url(~@/assets/images/home/s-j2.png) no-repeat left top;
+        background-size: 136px 141px;
+      }
+      &.info3 {
+        background: url(~@/assets/images/home/s-j3.png) no-repeat left top;
+        background-size: 136px 141px;
+      }
+      .info_total {
+        position: absolute;
+        right: 18px;
+        bottom: 24px;
+        display: flex;
+        // align-items: flex-end;
+        span {
+          display: block;
+          &:last-child {
+            margin-top: 32px;
+          }
+        }
+        .info_num {
+          font-size: 54px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dashboard/PublishProcess.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="home_item">
+    <div class="home_item_title">
+      <div class="icon iconfont">&#xe653;</div>
+      <h4>发布流程</h4>
+    </div>
+    <div class="publish_step">
+      <div class="step">
+        <img src="@/assets/images/home/s-t1.png" />
+        <el-button type="primary" round>设置时间</el-button>
+      </div>
+      <div class="step">
+        <img src="@/assets/images/home/s-t2.png" />
+        <el-button type="primary" round>选择内容</el-button>
+      </div>
+      <div class="step">
+        <img src="@/assets/images/home/s-t3.png" />
+        <el-button type="primary" round>选择设备</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PublishProcess',
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.home_item {
+  width: 540px;
+  .publish_step {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    padding-top: 14px;
+    .step {
+      flex: 1;
+      img {
+        display: block;
+        margin: 0 auto 14px auto;
+      }
+      ::v-deep .el-button--small.is-round {
+        font-size: 14px;
+        padding: 10px 26px;
+      }
+    }
+  }
+}
+</style>

src/views/forgetPassword.vue → src/views/forgetPassword/index.vue

@@ -2,28 +2,66 @@
   <div class="login">
     <div class="login_bg" />
     <div class="login_cont">
-      <el-form ref="modifyForm" :model="modifyForm" :rules="loginRules" label-position="left" label-width="0px" class="login_form">
-        <img src="../assets/images/login/logo.png" class="login_logo" alt="">
-        <el-form-item prop="phone"><el-input v-model="modifyForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" /></el-form-item>
+      <el-form
+        ref="modifyForm"
+        :model="modifyForm"
+        :rules="loginRules"
+        label-position="left"
+        label-width="0px"
+        class="login_form"
+      >
+        <img src="@/assets/images/login/logo.png" class="login_logo" alt />
+        <el-form-item prop="phone">
+          <el-input
+            v-model="modifyForm.phone"
+            type="text"
+            auto-complete="off"
+            placeholder="请输入手机号"
+          />
+        </el-form-item>
         <el-form-item prop="code" class="auth_code">
-          <el-input v-model="modifyForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleModify" />
+          <el-input
+            v-model="modifyForm.code"
+            auto-complete="off"
+            placeholder="请输入验证码"
+            @keyup.enter.native="handleModify"
+          />
           <div class="login-code">
             <span @click="countdown()">{{ verification }}</span>
           </div>
         </el-form-item>
         <el-form-item prop="password">
-          <el-input v-model="modifyForm.password" type="password" auto-complete="off" placeholder="请输入新密码" @keyup.enter.native="handleModify" />
+          <el-input
+            v-model="modifyForm.password"
+            type="password"
+            auto-complete="off"
+            placeholder="请输入新密码"
+            @keyup.enter.native="handleModify"
+          />
         </el-form-item>
         <el-form-item prop="confirmPassword" class="confirm_password">
-          <el-input v-model="modifyForm.confirmPassword" type="password" auto-complete="off" placeholder="请确认新密码" @keyup.enter.native="handleModify" />
+          <el-input
+            v-model="modifyForm.confirmPassword"
+            type="password"
+            auto-complete="off"
+            placeholder="请确认新密码"
+            @keyup.enter.native="handleModify"
+          />
         </el-form-item>
         <el-form-item class="login_btn">
-          <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleModify">
+          <el-button
+            :loading="loading"
+            size="medium"
+            type="primary"
+            @click.native.prevent="handleModify"
+          >
             <span v-if="!loading">确定修改</span>
             <span v-else>修改密码中...</span>
           </el-button>
         </el-form-item>
-        <div class="to_login_btn"><span @click="toLogin()">立即登录</span></div>
+        <div class="to_login_btn">
+          <span @click="toLogin()">立即登录</span>
+        </div>
       </el-form>
     </div>
   </div>
@@ -157,7 +195,7 @@ export default {
 }
 </script>
 <style rel="stylesheet/scss" lang="scss">
-@import '~@/assets/styles/login.scss';
+@import "~@/assets/styles/login.scss";
 </style>
 <style lang="scss" scoped>
 ::v-deep .el-form-item {
@@ -186,7 +224,7 @@ export default {
     cursor: pointer;
     &:before,
     &:after {
-      content: '';
+      content: "";
       width: 110px;
       height: 1px;
       background-color: #e2e6ee;

src/views/home.vue

@@ -1,13 +1,31 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-editor-container"></div>
+    <div class="dashboard-editor-container">
+      <el-row type="flex" class="row-bg" justify="space-between">
+        <el-col>
+          <publish-process />
+        </el-col>
+        <el-col>
+          <device-data />
+        </el-col>
+        <el-col>
+          <agency-data />
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
+import PublishProcess from './dashboard/PublishProcess'
+import DeviceData from './dashboard/DeviceData'
+import AgencyData from './dashboard/AgencyData'
 export default {
   name: 'Dashboard',
   components: {
+    PublishProcess,
+    DeviceData,
+    AgencyData
   },
   data() {
     return {
@@ -20,7 +38,7 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .dashboard-editor-container {
-  padding: 32px;
+  padding: 24px;
   background-color: #f5f5f5;
   position: relative;
 }