shop-pc/layouts/module/footer/index.vue

<template>
  <div class="layout-footer">
    <div class="layout-footer-wrap">
      <div class="layout-footer-wrap__promise flex flex-middle flex-between">
        <div
          v-for="(item, index) in promiseList"
          :key="index"
          class="wrap-promise-item"
        >
          <img :src="item.icon" />
          <span>{{ item.label }}</span>
        </div>
      </div>
      <div class="layout-footer-wrap__line"></div>
      <div class="layout-footer-wrap__address">
        © 2020 马士兵（北京）教育科技有限公司
        地址：北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LayoutFooter",
  data() {
    return {
      promiseList: [
        {
          label: "马士兵严选",
          icon: require("~/assets/img/layout/footer-1.png"),
        },
        {
          label: "马士兵严选",
          icon: require("~/assets/img/layout/footer-2.png"),
        },
        {
          label: "马士兵严选",
          icon: require("~/assets/img/layout/footer-3.png"),
        },
        {
          label: "马士兵严选",
          icon: require("~/assets/img/layout/footer-4.png"),
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.layout-footer {
  height: 189px;
  background: #dddddd;
  .layout-footer-wrap {
    .layout-footer-wrap__promise {
      width: 1060px;
      margin: 0 auto;
      padding: 25px 0;
      .wrap-promise-item {
        font-weight: bold;
        color: #999999;
        font-size: 18px;
        margin-left: 20px;
        img {
          width: 52px;
          height: 52px;
        }
      }
    }
    .layout-footer-wrap__line {
      width: 100%;
      height: 1px;
      background: #cccccc;
    }
    .layout-footer-wrap__address {
      width: 500px;
      margin: 0 auto;
      padding: 20px 0;
      font-size: 12px;
      color: #797979;
      text-align: center;
    }
  }
}
</style>