common/src/components/web-frame/web-parts-one/footer-1.vue

<template>
  <div id="footer-1">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="3" class="list" v-for="(item, index) in menus" :key="index" @click.native="toHome(item)">
              <span>{{ item.name }}</span>
            </el-col>
          </el-col>
          <el-col :span="24" class="two">
            <el-col :span="8" class="two_1">
              <el-col :span="24" class="two_1_1">联系我们：</el-col>
              <el-col :span="24" class="two_1_2">{{ siteInfo.mobile }}</el-col>
            </el-col>
            <el-col :span="8" class="two_2">
              <el-col :span="24" class="two_2_1">
                <span>联系QQ：</span>
                <span>{{ siteInfo.qq }}</span>
              </el-col>
              <el-col :span="24" class="two_2_1">
                <span>手机号码：</span>
                <span>{{ siteInfo.phone }}</span>
              </el-col>
              <el-col :span="24" class="two_2_1">
                <span>联系邮箱：</span>
                <span>{{ siteInfo.email }}</span>
              </el-col>
            </el-col>
            <el-col :span="8" class="two_3"></el-col>
          </el-col>
          <el-col :span="24" class="thr">
            {{ contactInfo.bq }}
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { contactInfo, webmenus } from '../../../layout/site';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'footer-1',
  props: {},
  components: {},
  data: function () {
    return {
      menus: webmenus,
      siteInfo: {},
      contactInfo: contactInfo,
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      let companyInfo = sessionStorage.getItem('companyInfo');
      this.$set(this, `siteInfo`, JSON.parse(companyInfo));
    },
    toHome(e) {
      this.$router.push({ path: e.path });
      window.scrollTo(0, 1);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  background-color: #222222;
  padding: 0.5vw 0;
  .one {
    padding: 1.5vw 0;
    border-bottom: 1px solid #353535;
    .list {
      span {
        color: #747474;
        font-size: 14px;
      }
      span:hover {
        cursor: pointer;
        color: #ffc001;
      }
    }
  }
  .two {
    padding: 2vw 0 1vw 0;
    .two_1 {
      border-right: 1px solid #353535;
      padding: 1vw 0;
      .two_1_1 {
        margin: 0 0 0.5vw 0;
        color: #747474;
      }
      .two_1_2 {
        font-size: 35px;
        color: #ffc001;
        font-style: oblique;
        font-weight: bold;
      }
    }
    .two_2 {
      border-right: 1px solid #353535;
      padding: 1vw 3vw;
      .two_2_1 {
        padding: 0 0 0.2vw 0;
        span {
          color: #747474;
          font-size: 14px;
        }
      }
    }
  }
  .thr {
    padding: 0 0 0.5vw 0;
    text-align: center;
    color: #747474;
    font-size: 12px;
  }
}
</style>