首页

src/views/homepage/components/homeFooter.vue

+<template>
+  <div class="footer">
+    <div class="footer-content">
+      <el-row :gutter="30">
+        <el-col v-for="(item,index) in dataList" :key="index" :span="4">
+          <div class="title">{{ item.name }}</div>
+          <div v-for="(t,i) in item.list" :key="'lb_'+i" class="label" :title="t.name">
+            <a :href="t.url||'http://www.minestar.cn'" target="_blank">
+              {{ t.name }}
+            </a>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div v-if="$store.state.settings.showFooter" class="footer-bottom">
+      <span v-html="$store.state.settings.footerTxt" />
+      <span v-if="$store.state.settings.caseNumber"> ⋅ </span>
+      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dataList: [
+        {
+          name: '用户指南',
+          list: [
+            { name: '注册登录流程', url: '' },
+            { name: '采购商指南', url: '' }
+          ]
+        },
+        {
+          name: '关于我们',
+          list: [
+            { name: '平台介绍 ', url: '' }
+          ]
+        },
+        {
+          name: '联系我们',
+          list: [
+            { name: '提供建议', url: '' },
+            { name: '我要合作', url: '' },
+            { name: '联系方式', url: '' }
+          ]
+        },
+        {
+          name: '常见问题',
+          list: [
+            { name: '采购商常见问题', url: '' },
+            { name: '供应商常见问题', url: '' }
+          ]
+        },
+        {
+          name: '友情链接',
+          list: [
+            { name: '佛山英沃传感科技有限公司佛山英沃传感科技有限公司', url: '' },
+            { name: '佛山英沃传感科技有限公司', url: '' },
+            { name: '佛山英沃传感科技有限公司', url: '' }
+          ]
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    click() {}
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.footer-content {
+  width: 100%;
+  height: 267px;
+  bottom: 33px;
+  padding-top: 20px;
+  padding-left: 210px;
+  background: none repeat scroll 0 0 #1C1E25;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #E8E6E6;
+  user-select: none;
+  z-index: 99;
+  .title {
+    margin: 30px 0;
+    font-size: 26px;
+  }
+  .label {
+    width: 300px;
+    margin: 15px 0;
+    cursor:pointer;
+    font-size: 18px;
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    -o-text-overflow:ellipsis;
+  }
+  .label:hover {
+    font-weight: 600;
+  }
+}
+.footer-bottom {
+  width: 100%;
+  height: 33px;
+  bottom: 0;
+  padding: 10px 6px 0 6px;
+  text-align: center;
+  background: none repeat scroll 0 0 black;
+  overflow: hidden;
+  font-size: 0.7rem !important;
+  letter-spacing: 0.8px;
+  font-family: Arial, sans-serif !important;
+  color: #E8E6E6;
+  z-index: 99;
+}
+</style>