realtorEasier-webSite/mobile/src/pages/conduct/exhibition/index.vue

<template>
  <div class="conduct-exhibition">
    <div class="banner">
      <h1 v-html="$t('conduct.conductExhibition.bannerTitle')"></h1>
      <h4 v-html="$t('conduct.conductExhibition.bannerSubTitle')"></h4>
    </div>
    <ul class="desc-video">
      <li v-for="item in list" :key="item.name">
        <h1 class="common-title" v-html="item.name"></h1>
        <img :src="item.img">
      </li>
    </ul>
  </div>
</template>

<script>
import { i18n } from '@/lang'
export default {
  data () {
    return {
      list: [
        {
          name: i18n.t('conduct.conductExhibition.itemTitle1'),
          img: require('@/assets/images/refactor/conduct/exhibition/item1.png')
        },
        {
          name: i18n.t('conduct.conductExhibition.itemTitle2'),
          img: require('@/assets/images/refactor/conduct/exhibition/item2.png')
        },
        {
          name: i18n.t('conduct.conductExhibition.itemTitle3'),
          img: require('@/assets/images/refactor/conduct/exhibition/item3.png')
        },
        {
          name: i18n.t('conduct.conductExhibition.itemTitle4'),
          img: require('@/assets/images/refactor/conduct/exhibition/item4.png')
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.conduct-exhibition {
  .banner {
    width: 100%;
    height: 140px;
    display: flex;
    padding-left: 42px;
    font-size: 22px;
    color: #202020;
    font-weight: bold;
    background: #D4D4D4;
    flex-direction: column;
    justify-content: center;
    background: url(~@/assets/images/refactor/conduct/exhibition/banner.png) no-repeat center center;
    background-size: cover;
  }
  h4 {
    font-size: 16px;
    margin-top: 20px;
  }
  ul {
    padding: 27px 20px 0;
  }
  li {
    margin-bottom: 56px;
  }
  img {
    margin-top: 30px;
    width: 100%;
  }
}
</style>