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

<template>
  <div class="conduct-secury">
    <div class="banner">
      <h1>{{ $t('conduct.conductSecury.bannerTitle') }}</h1>
    </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.conductSecury.itemTitle1'),
          img: require('@/assets/images/refactor/conduct/secury/item1.png')
        },
        {
          name: i18n.t('conduct.conductSecury.itemTitle2'),
          img: require('@/assets/images/refactor/conduct/secury/item2.png')
        },
        {
          name: i18n.t('conduct.conductSecury.itemTitle3'),
          img: require('@/assets/images/refactor/conduct/secury/item3.png')
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.conduct-secury {
  .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/secury/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>