孙向锦 / SunvoteEducation

Blame view

src/views/home/notice/index.vue 3.31 KB
Edit Raw Normal View History
be966eff   jack   1.添加文件 
1
2
 
  <template>
    <div class="notice">
8510e248   jack   1.增加公告交互 
3
4
 
      <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">
be966eff   jack   1.添加文件 
5
 
        <div class="title">
8510e248   jack   1.增加公告交互 
6
7
 
          <el-badge value="未读" class="item" :hidden="item.read">
            <b>{{ item.title }}</b>
be966eff   jack   1.添加文件 
8
 
          </el-badge>
8510e248   jack   1.增加公告交互 
9
 
          <span style="float:right">{{ item.date }}</span>
be966eff   jack   1.添加文件 
10
 
        </div>
8510e248   jack   1.增加公告交互 
11
12
 
        <div v-if="clickindex!=index" class="content">
          {{ data(item.detail) }}
be966eff   jack   1.添加文件 
13
 
        </div>
8510e248   jack   1.增加公告交互 
14
15
16
17
18
 
        <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>
be966eff   jack   1.添加文件 
19
20
21
22
23
24
 
        <div style="clear:both" />
      </div>
    </div>
  </template>
  <script>
  export default {
8510e248   jack   1.增加公告交互 
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
    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
        }
      }
    }
be966eff   jack   1.添加文件 
67
68
69
70
71
72
73
74
 
  }
  </script>
  <style scoped>
  .notice{
      max-width: 1100px;
      background: #fff;
      margin:0 auto;
      margin-top:15px;
8510e248   jack   1.增加公告交互 
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
      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;
be966eff   jack   1.添加文件 
92
93
 
    }
    b{
8510e248   jack   1.增加公告交互 
94
95
 
      font-size:18px;
      padding-right:10px;
be966eff   jack   1.添加文件 
96
97
 
    }
  </style>