|
|
@@ -0,0 +1,96 @@
|
|
|
+<template>
|
|
|
+ <el-row class="message">
|
|
|
+ <el-col :span="4" class="colLeft">
|
|
|
+ <div class="menu">
|
|
|
+ <div class="menuItem" :class="{'active':menuIndex === index}" @click="menuIndex = index" v-for="(item, index) in menuList" :key="item+index">
|
|
|
+ <el-badge :value="item.value" :max="99">{{ item.text }}</el-badge>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20" class="colRight">
|
|
|
+ <div class="message-list">
|
|
|
+ <el-row :gutter="20" class="message-item" v-for="(item, index) in message" :key="index">
|
|
|
+ <el-col :span="3" style="text-align: right; color: #cccccc">
|
|
|
+ <p>16:52:02</p>
|
|
|
+ <p>2024.12.03</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="21">
|
|
|
+ <p class="title">标题</p>
|
|
|
+ <p class="content">内容</p>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ menuList: [
|
|
|
+ {
|
|
|
+ text: '增员信息',
|
|
|
+ value: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '待我审批',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '审批结果',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ menuIndex: 0,
|
|
|
+ message: [1,2,3,4,5,6,7,8,9,10]
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .message{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .colLeft, .colRight{
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .colLeft{
|
|
|
+ border-right: 1px solid #cccccc;
|
|
|
+ .menu{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ .menuItem{
|
|
|
+ padding: 10px 20px;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ background: #F0F0F0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .message-list{
|
|
|
+ margin: 10px 40px;
|
|
|
+ width: calc(100% - 80px);
|
|
|
+ .message-item{
|
|
|
+ border-bottom: 1px solid #cccccc;
|
|
|
+ width: 100%;
|
|
|
+ .title, .content{
|
|
|
+ width: 100%;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|