<template>
  <div class="footer">
    <div class="tableC">
      <div class="topDiv">
        <div class="item">
          <img src="@assets/zhinan.png" alt="" />
          <div>
            <span class="line"></span>{{ $t(`page.layout.footer.item1`)
            }}<span class="line2"></span>
          </div>
        </div>
        <div class="item">
          <img src="@assets/shangjiafuwu.png" alt="" />
          <div>
            <span class="line"></span>{{ $t(`page.layout.footer.item2`)
            }}<span class="line2"></span>
          </div>
        </div>
        <div class="item">
          <img src="@assets/wenti.png" alt="" />
          <div>
            <span class="line"></span>{{ $t(`page.layout.footer.item3`)
            }}<span class="line2"></span>
          </div>
        </div>
        <div class="item">
          <img src="@assets/women.png" alt="" />
          <div>
            <span class="line"></span>{{ $t(`page.layout.footer.item4`)
            }}<span class="line2"></span>
          </div>
        </div>
        <div class="item">
          <img src="@assets/kefu.png" alt="" />
          <div>
            <span class="line"></span>{{ $t(`page.layout.footer.item5`)
            }}<span class="line3"></span>
          </div>
        </div>
      </div>
      <div class="bottomDiv">{{ $t(`page.layout.footer.bottom`) }}</div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class extends Vue {}
</script>
<style scoped lang="scss">
.footer {
  width: 100%;
  height: 19rem;
  background: #ececec;
  text-align: center;
  display: table;
  .tableC {
    display: table-cell;
    vertical-align: middle;
    .topDiv {
      .item {
        display: inline-block;
        vertical-align: middle;
        img {
          height: 3rem;
        }
        div {
          font-size: 1.4rem;
          color: #333;
          .line,
          .line2,
          .line3 {
            display: inline-block;
            width: 0.1rem;
            height: 1.4rem;
          }
          .line {
            background: #333;
            margin-right: 2.4rem;
          }
          .line2 {
            margin-left: 2.4rem;
          }
          .line3 {
            background: #333;
            margin-left: 2.4rem;
          }
        }
      }
    }
    .bottomDiv {
      font-size: 1.4rem;
      color: #666;
      margin-top: 3rem;
    }
  }
}
</style>
