Commit 8510e248a409bd22d4ed4bc1488b476fcc7e613e
1 parent
55e5cab4
1.增加公告交互
Showing
4 changed files
with
105 additions
and
17 deletions
src/components/Breadcrumb/index.vue
| @@ -38,7 +38,7 @@ export default { | @@ -38,7 +38,7 @@ export default { | ||
| 38 | const first = matched[0] | 38 | const first = matched[0] |
| 39 | 39 | ||
| 40 | if (!this.isDashboard(first)) { | 40 | if (!this.isDashboard(first)) { |
| 41 | - matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat( | 41 | + matched = [{ path: '/home', meta: { title: '首页' }}].concat( |
| 42 | matched | 42 | matched |
| 43 | ) | 43 | ) |
| 44 | } | 44 | } |
| @@ -53,7 +53,7 @@ export default { | @@ -53,7 +53,7 @@ export default { | ||
| 53 | return false | 53 | return false |
| 54 | } | 54 | } |
| 55 | return ( | 55 | return ( |
| 56 | - name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() | 56 | + name.trim().toLocaleLowerCase() === 'Home'.toLocaleLowerCase() |
| 57 | ) | 57 | ) |
| 58 | }, | 58 | }, |
| 59 | pathCompile(path) { | 59 | pathCompile(path) { |
src/components/Dec/index.vue
| @@ -7,7 +7,12 @@ | @@ -7,7 +7,12 @@ | ||
| 7 | <script> | 7 | <script> |
| 8 | export default { | 8 | export default { |
| 9 | name: 'Dec', | 9 | name: 'Dec', |
| 10 | - props: ['content'], | 10 | + props: { |
| 11 | + content: { | ||
| 12 | + type: String, | ||
| 13 | + default: '' | ||
| 14 | + } | ||
| 15 | + }, | ||
| 11 | computed: { | 16 | computed: { |
| 12 | title() { | 17 | title() { |
| 13 | return document.title.split('-')[0] | 18 | return document.title.split('-')[0] |
src/views/home/index.vue
| @@ -20,10 +20,10 @@ | @@ -20,10 +20,10 @@ | ||
| 20 | <el-col :span="1" class="notice-icon"> | 20 | <el-col :span="1" class="notice-icon"> |
| 21 | <svg-icon icon-class="horn" /> | 21 | <svg-icon icon-class="horn" /> |
| 22 | </el-col> | 22 | </el-col> |
| 23 | - <el-col :span="20" class="notice">关于2020年中天教育云平台系统升级的通知</el-col> | 23 | + <el-col :span="20" class="notice" @click.native="noticeDetail('12')">关于2020年中天教育云平台系统升级的通知</el-col> |
| 24 | <el-col :span="2" class="notice">2020-02-10</el-col> | 24 | <el-col :span="2" class="notice">2020-02-10</el-col> |
| 25 | <el-col :span="1" class="notice-icon"> | 25 | <el-col :span="1" class="notice-icon"> |
| 26 | - <svg-icon icon-class="more" /> | 26 | + <svg-icon icon-class="more" @click="$router.push('/notice')" /> |
| 27 | </el-col> | 27 | </el-col> |
| 28 | </el-row> | 28 | </el-row> |
| 29 | <!--快捷操作--> | 29 | <!--快捷操作--> |
| @@ -153,6 +153,18 @@ | @@ -153,6 +153,18 @@ | ||
| 153 | </div> | 153 | </div> |
| 154 | </div> | 154 | </div> |
| 155 | </div> | 155 | </div> |
| 156 | + | ||
| 157 | + <!--公告详情--> | ||
| 158 | + <el-dialog | ||
| 159 | + title="公告详情" | ||
| 160 | + :visible.sync="noticedialog" | ||
| 161 | + width="600px" | ||
| 162 | + > | ||
| 163 | + <span>这是一段信息</span> | ||
| 164 | + <span slot="footer" class="dialog-footer"> | ||
| 165 | + <el-button @click="noticedialog = false">关闭</el-button> | ||
| 166 | + </span> | ||
| 167 | + </el-dialog> | ||
| 156 | </div> | 168 | </div> |
| 157 | </template> | 169 | </template> |
| 158 | 170 | ||
| @@ -167,11 +179,18 @@ export default { | @@ -167,11 +179,18 @@ export default { | ||
| 167 | }, | 179 | }, |
| 168 | data() { | 180 | data() { |
| 169 | return { | 181 | return { |
| 170 | - content: '' | 182 | + content: '', |
| 183 | + noticedialog: false | ||
| 171 | } | 184 | } |
| 172 | }, | 185 | }, |
| 173 | computed: { | 186 | computed: { |
| 174 | ...mapGetters(['name']) | 187 | ...mapGetters(['name']) |
| 188 | + }, | ||
| 189 | + methods: { | ||
| 190 | + noticeDetail(id) { | ||
| 191 | + this.noticedialog = true | ||
| 192 | + console.log(id) | ||
| 193 | + } | ||
| 175 | } | 194 | } |
| 176 | } | 195 | } |
| 177 | </script> | 196 | </script> |
| @@ -179,7 +198,7 @@ export default { | @@ -179,7 +198,7 @@ export default { | ||
| 179 | <style lang="scss" scoped> | 198 | <style lang="scss" scoped> |
| 180 | .dashboard { | 199 | .dashboard { |
| 181 | &-container { | 200 | &-container { |
| 182 | - width: 1100px; | 201 | + max-width: 1100px; |
| 183 | margin: 0 auto; | 202 | margin: 0 auto; |
| 184 | background: #fff; | 203 | background: #fff; |
| 185 | margin-top: 15px; | 204 | margin-top: 15px; |
| @@ -213,6 +232,7 @@ export default { | @@ -213,6 +232,7 @@ export default { | ||
| 213 | .notice { | 232 | .notice { |
| 214 | font-size: 14px; | 233 | font-size: 14px; |
| 215 | line-height: 50px; | 234 | line-height: 50px; |
| 235 | + cursor: pointer; | ||
| 216 | } | 236 | } |
| 217 | .box { | 237 | .box { |
| 218 | border: 1px solid #ccc; | 238 | border: 1px solid #ccc; |
src/views/home/notice/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="notice"> | 2 | <div class="notice"> |
| 3 | - <p style="text-align:right;padding-bottom:10px;margin:0;line-height:40px;"><el-button size="small" icon="el-ump-qingchu">全部标记已读</el-button></p> | ||
| 4 | - <div class="notice-list"> | 3 | + <p style="text-align:right;padding-bottom:10px;margin:0;line-height:40px;"><el-button size="small" icon="el-ump-qingchu" @click="clear">全部标记已读</el-button></p> |
| 4 | + <div v-for="(item,index) in notice" :key="index" class="notice-list"> | ||
| 5 | <div class="title"> | 5 | <div class="title"> |
| 6 | - <el-badge value="未读" class="item"> | ||
| 7 | - <b>我是标题</b> | 6 | + <el-badge value="未读" class="item" :hidden="item.read"> |
| 7 | + <b>{{ item.title }}</b> | ||
| 8 | </el-badge> | 8 | </el-badge> |
| 9 | - <span style="float:right">2019/12/25 10:29</span> | 9 | + <span style="float:right">{{ item.date }}</span> |
| 10 | </div> | 10 | </div> |
| 11 | - <div class="content"> | ||
| 12 | - 我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位我是消息详细内容，此段文 | 11 | + <div v-if="clickindex!=index" class="content"> |
| 12 | + {{ data(item.detail) }} | ||
| 13 | </div> | 13 | </div> |
| 14 | - <span style="float:right">展开 <i class="el-icon-caret-bottom" /></span> | 14 | + <div v-else class="content"> |
| 15 | + {{ item.detail }} | ||
| 16 | + </div> | ||
| 17 | + <span v-if="clickindex!=index" style="float:right;color:rgb(64, 158, 255);cursor: pointer;" @click="toggledetail(item,index)">展开 <i class="el-icon-caret-bottom" /></span> | ||
| 18 | + <span v-else style="float:right;color:rgb(64, 158, 255);cursor: pointer;" @click="toggledetail(item,-1)">收起 <i class="el-icon-caret-top" /></span> | ||
| 15 | <div style="clear:both" /> | 19 | <div style="clear:both" /> |
| 16 | </div> | 20 | </div> |
| 17 | </div> | 21 | </div> |
| 18 | </template> | 22 | </template> |
| 19 | <script> | 23 | <script> |
| 20 | export default { | 24 | export default { |
| 21 | - name: 'Notice' | 25 | + name: 'Notice', |
| 26 | + data() { | ||
| 27 | + return { | ||
| 28 | + showflag: true, | ||
| 29 | + clickindex: -1, | ||
| 30 | + notice: [ | ||
| 31 | + { | ||
| 32 | + id: '1001', | ||
| 33 | + title: '我就是一个标题', | ||
| 34 | + read: false, | ||
| 35 | + date: '2019-12-25 10:29', | ||
| 36 | + detail: '我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位我是消息详细内容，此段文' | ||
| 37 | + }, | ||
| 38 | + { | ||
| 39 | + id: '1002', | ||
| 40 | + title: '我就是一个标题2', | ||
| 41 | + read: false, | ||
| 42 | + date: '2019-12-25 10:29', | ||
| 43 | + detail: '我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位我是消息详细内容，此段文' | ||
| 44 | + } | ||
| 45 | + ] | ||
| 46 | + } | ||
| 47 | + }, | ||
| 48 | + methods: { | ||
| 49 | + data(arr) { | ||
| 50 | + if (arr.length > 100) { | ||
| 51 | + return arr.substring(0, 100) + '...' | ||
| 52 | + } else { | ||
| 53 | + return arr | ||
| 54 | + } | ||
| 55 | + }, | ||
| 56 | + toggledetail(item, index) { | ||
| 57 | + if (index > -1) { this.notice[index].read = true } | ||
| 58 | + this.clickindex = index | ||
| 59 | + }, | ||
| 60 | + clear() { | ||
| 61 | + for (let i = 0; i < this.notice.length; i++) { | ||
| 62 | + this.notice[i].read = true | ||
| 63 | + } | ||
| 64 | + } | ||
| 65 | + } | ||
| 66 | + | ||
| 22 | } | 67 | } |
| 23 | </script> | 68 | </script> |
| 24 | <style scoped> | 69 | <style scoped> |
| @@ -27,8 +72,26 @@ export default { | @@ -27,8 +72,26 @@ export default { | ||
| 27 | background: #fff; | 72 | background: #fff; |
| 28 | margin:0 auto; | 73 | margin:0 auto; |
| 29 | margin-top:15px; | 74 | margin-top:15px; |
| 75 | + padding:20px; | ||
| 76 | + } | ||
| 77 | + .notice-list{ | ||
| 78 | + margin-top:10px; | ||
| 79 | + padding-bottom:10px; | ||
| 80 | + border-bottom:1px solid #ccc; | ||
| 81 | + } | ||
| 82 | + .title{ | ||
| 83 | + padding: 10px 0; | ||
| 84 | + } | ||
| 85 | + .title span{ | ||
| 86 | + font-size: 14px; | ||
| 87 | + color:#888; | ||
| 88 | + } | ||
| 89 | + .content{ | ||
| 90 | + font-size: 14px; | ||
| 91 | + line-height: 20px; | ||
| 30 | } | 92 | } |
| 31 | b{ | 93 | b{ |
| 32 | - padding-right:10px; | 94 | + font-size:18px; |
| 95 | + padding-right:10px; | ||
| 33 | } | 96 | } |
| 34 | </style> | 97 | </style> |