style:首页
Showing
2 changed files
with
34 additions
and
13 deletions
... | @@ -24,6 +24,7 @@ | ... | @@ -24,6 +24,7 @@ |
24 | "nprogress": "0.2.0", | 24 | "nprogress": "0.2.0", |
25 | "vue": "2.6.10", | 25 | "vue": "2.6.10", |
26 | "vue-router": "3.0.2", | 26 | "vue-router": "3.0.2", |
27 | "vue-seamless-scroll": "^1.1.23", | ||
27 | "vuex": "3.1.0" | 28 | "vuex": "3.1.0" |
28 | }, | 29 | }, |
29 | "devDependencies": { | 30 | "devDependencies": { | ... | ... |
... | @@ -19,6 +19,7 @@ | ... | @@ -19,6 +19,7 @@ |
19 | <h5 class="title">系统通知</h5> | 19 | <h5 class="title">系统通知</h5> |
20 | <i class="el-icon-s-unfold pointer"></i> | 20 | <i class="el-icon-s-unfold pointer"></i> |
21 | </div> | 21 | </div> |
22 | <vue-seamless-scroll :data="noticeList" :class-option="classOption"> | ||
22 | <ul> | 23 | <ul> |
23 | <li v-for="(item, index) in noticeList" :key="index" @click="handleNotice" class="flexst pointer"> | 24 | <li v-for="(item, index) in noticeList" :key="index" @click="handleNotice" class="flexst pointer"> |
24 | <p class="list-title">{{ item.noticeTitle }}</p> | 25 | <p class="list-title">{{ item.noticeTitle }}</p> |
... | @@ -27,6 +28,7 @@ | ... | @@ -27,6 +28,7 @@ |
27 | <p v-else>已读</p> | 28 | <p v-else>已读</p> |
28 | </li> | 29 | </li> |
29 | </ul> | 30 | </ul> |
31 | </vue-seamless-scroll> | ||
30 | </el-card> | 32 | </el-card> |
31 | </el-col> | 33 | </el-col> |
32 | </el-row> | 34 | </el-row> |
... | @@ -54,8 +56,8 @@ | ... | @@ -54,8 +56,8 @@ |
54 | <ul> | 56 | <ul> |
55 | <li v-for="(item, index) in policyList" @click="handleView(item.noticeFileUrl)" :key="index" | 57 | <li v-for="(item, index) in policyList" @click="handleView(item.noticeFileUrl)" :key="index" |
56 | class="flexst pointer"> | 58 | class="flexst pointer"> |
57 | <p class="right15">{{ item.noticeTitle }}</p> | 59 | <p class="right15 list-title">{{ item.noticeTitle }}</p> |
58 | <p class="list-title">{{ item.createtime.substring(0, 10) }}</p> | 60 | <p>{{ item.createtime.substring(0, 10) }}</p> |
59 | </li> | 61 | </li> |
60 | </ul> | 62 | </ul> |
61 | </el-card> | 63 | </el-card> |
... | @@ -68,7 +70,7 @@ | ... | @@ -68,7 +70,7 @@ |
68 | </div> | 70 | </div> |
69 | <div class="home-right"> | 71 | <div class="home-right"> |
70 | <calendar /> | 72 | <calendar /> |
71 | <el-card shadow="hover" class="marginTop10"> | 73 | <el-card shadow="hover" class="marginTop10" style="height:345px"> |
72 | <div slot="header" class="flexst"> | 74 | <div slot="header" class="flexst"> |
73 | <h5 class="title">动态信息</h5> | 75 | <h5 class="title">动态信息</h5> |
74 | <i class="el-icon-s-unfold pointer"></i> | 76 | <i class="el-icon-s-unfold pointer"></i> |
... | @@ -86,11 +88,12 @@ | ... | @@ -86,11 +88,12 @@ |
86 | <script> | 88 | <script> |
87 | import * as G2 from '@antv/g2' | 89 | import * as G2 from '@antv/g2' |
88 | import calendar from '@/components/Calendar/index' | 90 | import calendar from '@/components/Calendar/index' |
91 | import vueSeamlessScroll from "vue-seamless-scroll" | ||
89 | import { getHomeNoticeList, getHomeTodoList, getHomeDoneList } from "@/api/home.js"; | 92 | import { getHomeNoticeList, getHomeTodoList, getHomeDoneList } from "@/api/home.js"; |
90 | import { setReadStatus } from "@/api/notice.js"; | 93 | import { setReadStatus } from "@/api/notice.js"; |
91 | export default { | 94 | export default { |
92 | name: 'home', | 95 | name: 'home', |
93 | components: { calendar }, | 96 | components: { calendar, vueSeamlessScroll }, |
94 | data () { | 97 | data () { |
95 | return { | 98 | return { |
96 | newsListData: [ | 99 | newsListData: [ |
... | @@ -153,6 +156,19 @@ export default { | ... | @@ -153,6 +156,19 @@ export default { |
153 | policyList: [] | 156 | policyList: [] |
154 | } | 157 | } |
155 | }, | 158 | }, |
159 | // 计算属性 类似于data概念 | ||
160 | computed: { | ||
161 | classOption () { | ||
162 | return { | ||
163 | step: 0.5, // 数值越大速度滚动越快 | ||
164 | limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length | ||
165 | hoverStop: true, // 是否开启鼠标悬停stop | ||
166 | direction: 1, // 0向下 1向上 2向左 3向右 | ||
167 | openWatch: true, // 开启数据实时监控刷新dom | ||
168 | singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | ||
169 | }; | ||
170 | }, | ||
171 | }, | ||
156 | mounted () { | 172 | mounted () { |
157 | this.buildChart(); | 173 | this.buildChart(); |
158 | this.queryTodoList(); | 174 | this.queryTodoList(); |
... | @@ -184,7 +200,7 @@ export default { | ... | @@ -184,7 +200,7 @@ export default { |
184 | queryNoticeList () { | 200 | queryNoticeList () { |
185 | getHomeNoticeList().then(res => { | 201 | getHomeNoticeList().then(res => { |
186 | if (res.result) { | 202 | if (res.result) { |
187 | this.noticeList = res.result.noticeList.slice(0, 5) | 203 | this.noticeList = res.result.noticeList |
188 | this.noticeList.forEach(item => { | 204 | this.noticeList.forEach(item => { |
189 | item.createtime = this._timedate(item.createtime) | 205 | item.createtime = this._timedate(item.createtime) |
190 | }) | 206 | }) |
... | @@ -192,16 +208,19 @@ export default { | ... | @@ -192,16 +208,19 @@ export default { |
192 | } | 208 | } |
193 | }) | 209 | }) |
194 | }, | 210 | }, |
195 | _timedate (date) { | 211 | _timedate (d) { |
196 | let time_str = ""; | 212 | var td = new Date(); |
197 | if (new Date(date).getDate() === new Date().getDate()) { | 213 | td = new Date(td.getFullYear(), td.getMonth(), td.getDate()); |
198 | time_str = "今天"; | 214 | var od = new Date(d); |
199 | } else if (new Date(date).getDate() === (new Date().getDate() - 1)) { | 215 | od = new Date(od.getFullYear(), od.getMonth(), od.getDate()); |
200 | time_str = "昨天"; | 216 | var xc = (od - td) / 1000 / 60 / 60 / 24; |
217 | if (xc == -1) { | ||
218 | return "昨天"; | ||
219 | } else if (xc == 0) { | ||
220 | return "今天"; | ||
201 | } else { | 221 | } else { |
202 | time_str = date | 222 | return d |
203 | } | 223 | } |
204 | return time_str; | ||
205 | }, | 224 | }, |
206 | buildChart () { | 225 | buildChart () { |
207 | let height = document.getElementById("mountNodeCon").offsetHeight - 20 | 226 | let height = document.getElementById("mountNodeCon").offsetHeight - 20 |
... | @@ -246,5 +265,6 @@ export default { | ... | @@ -246,5 +265,6 @@ export default { |
246 | 265 | ||
247 | /deep/.el-card__body { | 266 | /deep/.el-card__body { |
248 | padding: 3px 10px 5px 10px; | 267 | padding: 3px 10px 5px 10px; |
268 | overflow: hidden; | ||
249 | } | 269 | } |
250 | </style> | 270 | </style> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment