From 5c9b44727b7866f6a3234710fddd37dcf68757b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Mon, 28 Feb 2022 18:38:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8E=A7=E5=88=B6=E5=8F=B0?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ZR.Vue/src/views/index_v1.vue | 280 +++++++++++++++++++++++++++++++++-
 1 file changed, 278 insertions(+), 2 deletions(-)

diff --git a/ZR.Vue/src/views/index_v1.vue b/ZR.Vue/src/views/index_v1.vue
index e9ecde9..d58f361 100644
--- a/ZR.Vue/src/views/index_v1.vue
+++ b/ZR.Vue/src/views/index_v1.vue
@@ -1,6 +1,76 @@
 <template>
-  <div class="dashboard-editor-container">
+  <div class="dashboard-editor-container home">
+    <!-- 用户信息 -->
+    <el-row :gutter="15">
+      <el-col :md="24" :lg="16" :xl="16" class="mb10">
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>我的工作台</span>
+          </div>
+          <div class="user-item">
+            <div class="user-item-left">
+              <img :src="userInfo.avatar" />
+            </div>
 
+            <div class="user-item-right overflow">
+              <el-row>
+                <el-col :span="24" class="right-title mb20 one-text-overflow">您好，{{ userInfo.nickName }}，{{ dailyMessage }}
+                </el-col>
+                <el-col :span="24">
+                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
+                    <div class="right-label">昵称：</div>
+                    <div class="right-value">{{userInfo.nickName}}</div>
+                  </el-col>
+                  <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
+                    <div class="right-label">身份：</div>
+                    <div class="right-value">
+                      <span v-for="item in userInfo.roles" :key="item.roleId">{{item.roleName}}</span>
+                    </div>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="mt10">
+                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
+                    <div class="right-label one-text-overflow">IP：</div>
+                    <div class="right-value one-text-overflow">{{userInfo.loginIP}}</div>
+                  </el-col>
+                  <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
+                    <div class="right-label one-text-overflow">时间：</div>
+                    <div class="right-value one-text-overflow">{{ currentTime }}</div>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="mt10">
+                  <el-button size="small" icon="el-icon-edit-outline">
+                    <router-link to="/user/profile">
+                      修改信息
+                    </router-link>
+                  </el-button>
+                  <!-- <el-button size="small" icon="el-icon-position" type="primary">发布活动</el-button> -->
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :md="24" :lg="8" :xl="8" class="mb10">
+        <!-- {{userInfo}} -->
+        <el-card shadow="hover">
+          <div slot="header">
+            <span>最新文章</span>
+            <el-button class="home-card-more" type="text" @click="onOpenGitee">更多</el-button>
+          </div>
+          <div class="info">
+            <Scroll :data="newArticleList" class="info-scroll" :class-option="optionSingleHeight">
+              <ul class="info-ul">
+                <li v-for="(v, k) in newArticleList" :key="k" class="info-item">
+                  <div class="info-item-left" v-text="v.title"></div>
+                  <div class="info-item-right" v-text="parseTime(v.updateTime, '{m}/{d}')"></div>
+                </li>
+              </ul>
+            </Scroll>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
     <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
@@ -34,6 +104,8 @@ import LineChart from "./dashboard/LineChart";
 import RaddarChart from "./dashboard/RaddarChart";
 import PieChart from "./dashboard/PieChart";
 import BarChart from "./dashboard/BarChart";
+import Scroll from "vue-seamless-scroll";
+import { listNewArticle } from "@/api/system/article.js";
 
 const lineChartData = {
   newVisitis: {
@@ -61,23 +133,227 @@ export default {
     RaddarChart,
     PieChart,
     BarChart,
+    Scroll,
+  },
+  computed: {
+    photo() {
+      return this.$store.getters.photo;
+    },
+    userInfo() {
+      return this.$store.getters.userinfo;
+    },
+    currentTime() {
+      return this.parseTime(new Date());
+    },
+    optionSingleHeight() {
+      return {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
   },
   data() {
     return {
+      dailyMessage: "世间美好，与你环环相扣！",
       lineChartData: lineChartData.newVisitis,
+      newArticleList: [],
     };
   },
+  created() {
+    listNewArticle().then((res) => {
+      this.newArticleList = res.data;
+    });
+  },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type];
     },
+    onOpenGitee() {},
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.home {
+  width: 100%;
+  overflow: hidden;
+  .home-card-more {
+    float: right;
+    padding: 3px 0;
+    font-size: 13px;
+  }
+  .home-card-time {
+    float: right;
+    font-size: 13px;
+    width: 130px;
+    margin-top: -4px;
+  }
+  .user-item {
+    height: 198px;
+    display: flex;
+    align-items: center;
+    .user-item-left {
+      width: 100px;
+      height: 130px;
+      border-radius: 4px;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .user-item-right {
+      flex: 1;
+      padding: 15px;
+      .right-title {
+        font-size: 20px;
+      }
+      .right-l-v {
+        font-size: 13px;
+        display: flex;
+        .right-label {
+          color: gray;
+          width: 40px;
+        }
+        .right-value {
+          flex: 1;
+        }
+      }
+    }
+  }
+  .info {
+    height: 198px;
+    .info-scroll {
+      height: 100%;
+      overflow: hidden;
+      .info-ul {
+        list-style: none;
+        padding: 0;
+        .info-item {
+          display: flex;
+          font-size: 13px;
+          color: gray;
+          height: 28px;
+          line-height: 28px;
+          &:hover {
+            color: var(--color-primary);
+            cursor: pointer;
+          }
+          .info-item-left {
+            flex: 1;
+            flex-shrink: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+          .info-item-right {
+            width: 60px;
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+  .home-recommend-row {
+    .home-recommend {
+      position: relative;
+      height: 100px;
+      color: #ffffff;
+      border-radius: 4px;
+      overflow: hidden;
+      cursor: pointer;
+      &:hover {
+        i {
+          right: 0px !important;
+          bottom: 0px !important;
+          transition: all ease 0.3s;
+        }
+      }
+      i {
+        position: absolute;
+        right: -10px;
+        bottom: -10px;
+        font-size: 70px;
+        transform: rotate(-30deg);
+        transition: all ease 0.3s;
+      }
+      .home-recommend-auto {
+        padding: 15px;
+        position: absolute;
+        left: 0;
+        top: 5%;
+        .home-recommend-msg {
+          font-size: 12px;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+  .charts {
+    width: 100%;
+    height: 282.6px;
+    display: flex;
+    padding: 12px 15px;
+    .charts-left {
+      flex: 1;
+      height: 100%;
+    }
+    .charts-right {
+      flex: 1;
+      height: 100%;
+    }
+  }
+  .home-charts {
+    height: 282.6px;
+    .home-charts-item {
+      background-color: #f5f5f5;
+      padding: 19px 15px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      cursor: pointer;
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+      &:hover {
+        .home-charts-item-right {
+          i {
+            transform: rotate(45deg);
+            transition: all ease 0.3s;
+          }
+        }
+      }
+      .home-charts-item-left {
+        flex: 1;
+        .home-charts-item-title {
+          font-size: 13px;
+        }
+        .home-charts-item-num {
+          font-size: 20px;
+          margin-top: 5px;
+        }
+      }
+      .home-charts-item-right {
+        i {
+          font-size: 20px;
+          padding: 8px;
+          border-radius: 100%;
+          transition: all ease 0.3s;
+        }
+      }
+    }
+  }
+}
+
 .dashboard-editor-container {
-  padding: 32px;
+  padding: 18px;
   background-color: rgb(240, 242, 245);
   position: relative;