1.增加公告交互

jack
1 parent 55e5cab4
Showing 4 changed files with 105 additions and 17 deletions
src/components/Breadcrumb/index.vue
src/components/Dec/index.vue
src/views/home/index.vue
src/views/home/notice/index.vue
@@ -38,7 +38,7 @@ export default {
       const first = matched[0]
  
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(
+        matched = [{ path: '/home', meta: { title: '首页' }}].concat(
           matched
         )
       }
@@ -53,7 +53,7 @@ export default {
         return false
       }
       return (
-        name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+        name.trim().toLocaleLowerCase() === 'Home'.toLocaleLowerCase()
       )
     },
     pathCompile(path) {
@@ -7,7 +7,12 @@
 <script>
 export default {
   name: 'Dec',
-  props: ['content'],
+  props: {
+    content: {
+      type: String,
+      default: ''
+    }
+  },
   computed: {
     title() {
       return document.title.split('-')[0]
@@ -20,10 +20,10 @@
         <el-col :span="1" class="notice-icon">
           <svg-icon icon-class="horn" />
         </el-col>
-        <el-col :span="20" class="notice">关于2020年中天教育云平台系统升级的通知</el-col>
+        <el-col :span="20" class="notice" @click.native="noticeDetail('12')">关于2020年中天教育云平台系统升级的通知</el-col>
         <el-col :span="2" class="notice">2020-02-10</el-col>
         <el-col :span="1" class="notice-icon">
-          <svg-icon icon-class="more" />
+          <svg-icon icon-class="more" @click="$router.push('/notice')" />
         </el-col>
       </el-row>
       <!--快捷操作-->
@@ -153,6 +153,18 @@
         </div>
       </div>
     </div>
+
+    <!--公告详情-->
+    <el-dialog
+      title="公告详情"
+      :visible.sync="noticedialog"
+      width="600px"
+    >
+      <span>这是一段信息</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="noticedialog = false">关闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
  
@@ -167,11 +179,18 @@ export default {
   },
   data() {
     return {
-      content: ''
+      content: '',
+      noticedialog: false
     }
   },
   computed: {
     ...mapGetters(['name'])
+  },
+  methods: {
+    noticeDetail(id) {
+      this.noticedialog = true
+      console.log(id)
+    }
   }
 }
 </script>
@@ -179,7 +198,7 @@ export default {
 <style lang="scss" scoped>
 .dashboard {
   &-container {
-    width: 1100px;
+    max-width: 1100px;
     margin: 0 auto;
     background: #fff;
     margin-top: 15px;
@@ -213,6 +232,7 @@ export default {
     .notice {
       font-size: 14px;
       line-height: 50px;
+      cursor: pointer;
     }
     .box {
       border: 1px solid #ccc;
 <template>
   <div class="notice">
-    <p style="text-align:right;padding-bottom:10px;margin:0;line-height:40px;"><el-button size="small" icon="el-ump-qingchu">全部标记已读</el-button></p>
-    <div class="notice-list">
+    <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>
+    <div v-for="(item,index) in notice" :key="index" class="notice-list">
       <div class="title">
-        <el-badge value="未读" class="item">
-          <b>我是标题</b>
+        <el-badge value="未读" class="item" :hidden="item.read">
+          <b>{{ item.title }}</b>
         </el-badge>
-        <span style="float:right">2019/12/25 10:29</span>
+        <span style="float:right">{{ item.date }}</span>
       </div>
-      <div class="content">
-        我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位我是消息详细内容，此段文
+      <div v-if="clickindex!=index" class="content">
+        {{ data(item.detail) }}
       </div>
-      <span style="float:right">展开 <i class="el-icon-caret-bottom" /></span>
+      <div v-else class="content">
+        {{ item.detail }}
+      </div>
+      <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>
+      <span v-else style="float:right;color:rgb(64, 158, 255);cursor: pointer;" @click="toggledetail(item,-1)">收起 <i class="el-icon-caret-top" /></span>
       <div style="clear:both" />
     </div>
   </div>
 </template>
 <script>
 export default {
-  name: 'Notice'
+  name: 'Notice',
+  data() {
+    return {
+      showflag: true,
+      clickindex: -1,
+      notice: [
+        {
+          id: '1001',
+          title: '我就是一个标题',
+          read: false,
+          date: '2019-12-25 10:29',
+          detail: '我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位我是消息详细内容，此段文'
+        },
+        {
+          id: '1002',
+          title: '我就是一个标题2',
+          read: false,
+          date: '2019-12-25 10:29',
+          detail: '我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位，我是消息详细内容，此段文字仅用来占位我是消息详细内容，此段文'
+        }
+      ]
+    }
+  },
+  methods: {
+    data(arr) {
+      if (arr.length > 100) {
+        return arr.substring(0, 100) + '...'
+      } else {
+        return arr
+      }
+    },
+    toggledetail(item, index) {
+      if (index > -1) { this.notice[index].read = true }
+      this.clickindex = index
+    },
+    clear() {
+      for (let i = 0; i < this.notice.length; i++) {
+        this.notice[i].read = true
+      }
+    }
+  }
+
 }
 </script>
 <style scoped>
@@ -27,8 +72,26 @@ export default {
     background: #fff;
     margin:0 auto;
     margin-top:15px;
+    padding:20px;
+  }
+  .notice-list{
+    margin-top:10px;
+    padding-bottom:10px;
+    border-bottom:1px solid #ccc;
+  }
+  .title{
+    padding: 10px 0;
+  }
+  .title span{
+    font-size: 14px;
+    color:#888;
+  }
+  .content{
+    font-size: 14px;
+    line-height: 20px;
   }
   b{
-      padding-right:10px;
+    font-size:18px;
+    padding-right:10px;
   }
 </style>