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

<template>
  <div id="top">
    <el-row>
      <el-col :span="24">
        <el-col :span="24">
          <el-image style="width:100%;height:500px;" :src="info.banner"></el-image>
        </el-col>
        <div class="w_1270">
          <el-col :span="24" class="info">
            <span>{{ info.title }}-{{ title }}</span>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'top',
  props: {
    info: null,
  },
  components: {},
  data: () => ({
    title: '党员之家',
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1270 {
  width: 1270px;
  margin: 0 auto;
}
.info {
  position: absolute;
  top: 30%;
  left: 25%;
  width: 50%;
}
.info span {
  font-size: 45px;
  color: #df0001;
  font-family: '黑体';
}
</style>