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

<template>
  <div id="photo">
    <el-row>
      <el-col :span="24" class="top">
        <el-col :span="10">
          <el-image style="width:100%;height:40px;" :src="left"></el-image>
        </el-col>
        <el-col :span="4" class="topTitle">
          {{ title }}
        </el-col>
        <el-col :span="10">
          <el-image style="width:100%;height:40px;" :src="right"></el-image>
        </el-col>
      </el-col>
      <el-col :span="24" class="info">
        内容
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'photo',
  props: {},
  components: {},
  data: () => ({
    title: '活动图集',
    left: require('@/assets/messageLeft.jpg'),
    right: require('@/assets/messageRight.jpg'),
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top {
  height: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
}
.top .topTitle {
  font-size: 38px;
  color: #bd010b;
  text-align: center;
  font-weight: bold;
  font-family: '微软雅黑';
}
</style>