style:首页

任超
Showing 2 changed files with 42 additions and 21 deletions
package.json
src/views/home/index.vue
--- a/package.json
View file @2a6d367
+++ b/package.json
View file @2a6d367
@@ -24,6 +24,7 @@
    "nprogress": "0.2.0",
    "vue": "2.6.10",
    "vue-router": "3.0.2",
+    "vue-seamless-scroll": "^1.1.23",
    "vuex": "3.1.0"
  },
  "devDependencies": {
--- a/src/views/home/index.vue
View file @2a6d367
+++ b/src/views/home/index.vue
View file @2a6d367
@@ -19,14 +19,16 @@
              <h5 class="title">系统通知</h5>
              <i class="el-icon-s-unfold pointer"></i>
            </div>
-            <ul>
+            <vue-seamless-scroll :data="noticeList" :class-option="classOption">
-              <li v-for="(item, index) in noticeList" :key="index" @click="handleNotice" class="flexst pointer">
+              <ul>
-                <p class="list-title">{{ item.noticeTitle }}</p>
+                <li v-for="(item, index) in noticeList" :key="index" @click="handleNotice" class="flexst pointer">
-                <p class="marginZL15">{{ item.createtime.substring(0, 10) }}</p>
+                  <p class="list-title">{{ item.noticeTitle }}</p>
-                <p v-if="item.userBrowse == '1'" style="color:red">未读</p>
+                  <p class="marginZL15">{{ item.createtime.substring(0, 10) }}</p>
-                <p v-else>已读</p>
+                  <p v-if="item.userBrowse == '1'" style="color:red">未读</p>
-              </li>
+                  <p v-else>已读</p>
-            </ul>
+                </li>
+              </ul>
+            </vue-seamless-scroll>
          </el-card>
        </el-col>
      </el-row>
@@ -54,8 +56,8 @@
            <ul>
              <li v-for="(item, index) in policyList" @click="handleView(item.noticeFileUrl)" :key="index"
                class="flexst pointer">
-                <p class="right15">{{ item.noticeTitle }}</p>
+                <p class="right15 list-title">{{ item.noticeTitle }}</p>
-                <p class="list-title">{{ item.createtime.substring(0, 10) }}</p>
+                <p>{{ item.createtime.substring(0, 10) }}</p>
              </li>
            </ul>
          </el-card>
@@ -68,7 +70,7 @@
    </div>
    <div class="home-right">
      <calendar />
-      <el-card shadow="hover" class="marginTop10">
+      <el-card shadow="hover" class="marginTop10" style="height:345px">
        <div slot="header" class="flexst">
          <h5 class="title">动态信息</h5>
          <i class="el-icon-s-unfold pointer"></i>
@@ -86,11 +88,12 @@
 <script>
 import * as G2 from '@antv/g2'
 import calendar from '@/components/Calendar/index'
+import vueSeamlessScroll from "vue-seamless-scroll"
 import { getHomeNoticeList, getHomeTodoList, getHomeDoneList } from "@/api/home.js";
 import { setReadStatus } from "@/api/notice.js";
 export default {
  name: 'home',
-  components: { calendar },
+  components: { calendar, vueSeamlessScroll },
  data () {
    return {
      newsListData: [
@@ -153,6 +156,19 @@ export default {
      policyList: []
    }
  },
+  // 计算属性 类似于data概念
+  computed: {
+    classOption () {
+      return {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+      };
+    },
+  },
  mounted () {
    this.buildChart();
    this.queryTodoList();
@@ -184,7 +200,7 @@ export default {
    queryNoticeList () {
      getHomeNoticeList().then(res => {
        if (res.result) {
-          this.noticeList = res.result.noticeList.slice(0, 5)
+          this.noticeList = res.result.noticeList
          this.noticeList.forEach(item => {
            item.createtime = this._timedate(item.createtime)
          })
@@ -192,16 +208,19 @@ export default {
        }
      })
    },
-    _timedate (date) {
+    _timedate (d) {
-      let time_str = "";
+      var td = new Date();
-      if (new Date(date).getDate() === new Date().getDate()) {
+      td = new Date(td.getFullYear(), td.getMonth(), td.getDate());
-        time_str = "今天";
+      var od = new Date(d);
-      } else if (new Date(date).getDate() === (new Date().getDate() - 1)) {
+      od = new Date(od.getFullYear(), od.getMonth(), od.getDate());
-        time_str = "昨天";
+      var xc = (od - td) / 1000 / 60 / 60 / 24;
+      if (xc == -1) {
+        return "昨天";
+      } else if (xc == 0) {
+        return "今天";
      } else {
-        time_str = date
+        return d
      }
-      return time_str;
    },
    buildChart () {
      let height = document.getElementById("mountNodeCon").offsetHeight - 20
@@ -246,5 +265,6 @@ export default {
 /deep/.el-card__body {
  padding: 3px 10px 5px 10px;
+  overflow: hidden;
 }
 </style>
\ No newline at end of file