web-website/src/layout/member/meesage.vue

<template>
  <div id="meesage">
    <el-row>
      <el-col :span="24">
        <el-col :span="2" class="zuixinMess">
          <el-image style="width:65px;height:95px;" :src="url"></el-image>
        </el-col>
        <el-col :span="21" class="info">
          <el-col :span="24" class="title">
            <p class="textOver">{{ messageInfo.title }}</p>
          </el-col>
          <el-col :span="24" class="content">
            <p>{{ messageInfo.content }}</p>
            <el-button type="text" size="mini">[详情]</el-button>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'meesage',
  props: {
    messageInfo: null,
  },
  components: {},
  data: () => ({
    url: require('@/assets/messages.png'),
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zuixinMess {
  width: 65px;
  height: 95px;
  margin: 0 40px 0 20px;
}
.info .title {
  padding: 10px 0;
}
.info .title p {
  font-size: 25px;
  color: #cc3333;
  font-family: '微軟雅黑';
  font-weight: 600;
}
.info .content p {
  font-size: 20px;
  color: #333;
  text-indent: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.info .content .el-button {
  position: absolute;
  right: 45px;
  color: #cc3333;
  font-weight: 600;
}
</style>