首页地图

src/components/webFooter/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="webFooter">
+    <div class="wrap">
+      <el-row>
+        <!-- <el-col :span="4" v-for="(item, index) in state.list" :key="index">
+          <div class="tit">{{ item.title }}</div>
+          <p v-for="(item2, index2) in item.children" :key="index2">
+            <a :href="item2.link" target="_black">{{ item2.title }}</a>
+          </p>
+        </el-col> -->
+        <el-col :span="8">
+          <div class="tit">联系我们</div>
+          <p>
+            <a href="">客服电话：{{ state.mobile }}</a>
+          </p>
+          <p>
+            <a href="">邮箱：{{ state.email }}</a>
+          </p>
+          <p>
+            <a href="">地址：{{ state.address }}</a>
+          </p>
+        </el-col>
+      </el-row>
+      <div class="icp-beian">
+        <el-link type="primary" href="https://beian.miit.gov.cn/"
+          >皖ICP备18001784号</el-link
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// import request from "@/utils/request";
+// import { onMounted, reactive, watch } from "vue";
+
+import { reactive } from "vue";
+
+// function navigation() {
+//   return request({
+//     url: "/v1/sys/navigation",
+//   });
+// }
+// function config(params) {
+//   return request({
+//     url: "/v1/config",
+//     params,
+//   });
+// }
+const state = reactive({
+  list: [],
+  mobile: "",
+  email: "",
+  address: "",
+});
+// function getNavigation() {
+//   navigation().then((res) => {
+//     if (200 == res.code) {
+//       state.list = res.data;
+//     }
+//   });
+// }
+// async function getConfig() {
+//   const mobileData = await config({ key: "mobile" });
+//   state.mobile = mobileData.data.mobile.value;
+//   const emailData = await config({ key: "email" });
+//   state.email = emailData.data.email.value;
+//   const addressData = await config({ key: "address" });
+//   state.address = addressData.data.address.value;
+
+//   // 无法同时传多个key
+
+//   // config({ key: "mobile,email,address" }).then((res) => {
+//   //   console.log(res);
+
+//   //   state.mobile = res.data.mobile.value;
+//   //   state.email = res.data.email.value;
+//   //   state.address = res.data.address.value;
+//   // });
+// }
+// getNavigation();
+// getConfig();
+</script>
+
+<style lang="scss" scoped>
+.webFooter {
+  background: #dee9ff;
+}
+
+.wrap {
+  width: 1000px;
+  margin: 0 auto;
+  padding: 100px 0;
+  font-size: 14px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #333333;
+  .tit {
+    font-size: 16px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    color: #333333;
+  }
+  .qrcode {
+    width: 88px;
+    height: 88px;
+  }
+  .icp-beian {
+    text-align: center;
+  }
+}
+</style>