feat: 完成首页静态页面

admin_2/src/App.vue

@@ -18,5 +18,6 @@ export default {
 <style lang="less" scoped>
 .app {
   background-color: #eff0f4;
+  font-family: Source Han Sans CN;
 }
 </style>

admin_2/src/layouts/Layouts.vue

@@ -33,7 +33,7 @@ export default {
     return {};
   },
   created() {
-    this.getSiteTree();
+    // this.getSiteTree();
   },
   methods: {
     ...mapMutations("user", ["SET_areaTree"]),

admin_2/src/pages/home/Home.vue

 <template>
-  <div class="home flex h-full w-full flex-col items-center">
+  <div class="home flex min-h-full w-full flex-col items-center">
     <div class="top-data-total flex h-[360px] w-full justify-center pt-[66px]">
       <div class="flex h-full flex-col">
         <div class="mb-[53px] flex flex-col items-center">
@@ -19,8 +19,10 @@
     </div>
     <div class="main w-[80%]">
       <!-- 主题数据分析 -->
-      <div class="theme-data-analyse flex w-full flex-col items-center">
-        <div class="theme-data-analyse-title">主题数据分析</div>
+      <div
+        class="theme-data-analyse mb-[36px] flex w-full flex-col items-center"
+      >
+        <div class="main-title">主题数据分析</div>
         <div
           class="grid h-[270px] w-full grid-cols-3 gap-4 rounded-[8px] bg-white p-[20px]"
         >
@@ -50,15 +52,24 @@
           </div>
         </div>
       </div>
+      <!-- 对接站点矩阵 -->
+      <div class="flex w-full flex-col items-center">
+        <div class="main-title">对接站点矩阵</div>
+        <div class="area-list grid w-full grid-cols-7 gap-5">
+          <AreaCard v-for="(v, i) in areaList" :key="i" :data="v"></AreaCard>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import LineEchart from "./components/LineEchart.vue";
+import AreaCard from "./components/AreaCard.vue";
 export default {
   components: {
     LineEchart,
+    AreaCard,
   },
   data() {
     return {
@@ -88,66 +99,79 @@ export default {
           name: "高新区",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/gaoxinqu.png"),
         },
         {
           name: "高县",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/gaoxian.png"),
         },
         {
           name: "屏山县",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/pingshanxian.png"),
         },
         {
           name: "翠屏区",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/cuipingqu.png"),
         },
         {
           name: "叙洲区",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/xuzhouqu.png"),
         },
         {
           name: "珙县",
           systemList: [],
           date: "2024-06-26",
+          img: require("@/assets/img/gongxian.png"),
         },
         {
           name: "南溪区",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/nanxiqu.png"),
         },
         {
           name: "江安县",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/jianganxian.png"),
         },
         {
           name: "长宁县",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/changningxian.png"),
         },
         {
           name: "筠连县",
           systemList: [],
           date: "2024-06-26",
+          img: require("@/assets/img/junlianxina.png"),
         },
         {
           name: "兴文县",
           systemList: ["排队系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/xingwenxian.png"),
         },
         {
           name: "两海示范区",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/lianghaishifanqu.png"),
         },
         {
           name: "三江新区",
           systemList: ["排队系统", "评价系统"],
           date: "2024-06-26",
+          img: require("@/assets/img/sanjiangxinqu.png"),
         },
       ],
     };
@@ -157,6 +181,7 @@ export default {
 
 <style lang="less" scoped>
 .home {
+  padding-bottom: 100px;
   background: url("@/assets/img/bg-2.png") no-repeat center bottom;
 }
 .top-data-total {
@@ -197,7 +222,7 @@ export default {
 }
 .main {
   font-family: Source Han Sans CN;
-  .theme-data-analyse-title {
+  .main-title {
     margin-bottom: 27px;
     font-weight: bold;
     font-size: 26px;

admin_2/src/pages/home/components/AreaCard.vue

+<template>
+  <div
+    :class="[
+      'area-card',
+      data.systemList.length ? 'cursor-pointer' : 'cursor-not-allowed',
+      { 'is-hover': data.systemList.length },
+    ]"
+    @click="handleClick"
+  >
+    <img class="banner" :src="data.img" />
+    <div class="content">
+      <!-- 对接时间 -->
+      <div class="w-full">
+        <span class="time" v-if="data.systemList.length">
+          对接时间：{{ data.date }}
+        </span>
+      </div>
+      <!-- name -->
+      <span class="name">{{ data.name }}</span>
+      <div class="flex gap-2" v-if="data.systemList.length">
+        <span class="item" v-for="(v, i) in data.systemList" :key="i">{{
+          v
+        }}</span>
+      </div>
+      <span class="item-2" v-else>等待对接</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleClick() {
+      if (this.info.systemList.length) {
+        this.$emit("click", this.info);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.area-card {
+  width: 100%;
+  height: 150px;
+  font-family: Source Han Sans CN;
+  border-radius: 8px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+
+  .banner {
+    width: 100%;
+    height: 110px;
+    mask: linear-gradient(to top, transparent 0%, #000 20%);
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    transition: all 0.5s;
+  }
+  .content {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    z-index: 1;
+  }
+  .time {
+    padding: 2px 10px;
+    background: rgba(35, 35, 35, 0.1);
+    border-radius: 4px;
+    font-size: 14px;
+    color: #ffffff;
+  }
+  .name {
+    padding: 4px 10px;
+    font-weight: bold;
+    color: #ffffff;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    position: relative;
+    z-index: 1;
+  }
+  .item {
+    padding: 4px 10px;
+    font-weight: bold;
+    background: rgba(8, 87, 232, 0.1);
+    border-radius: 8px;
+    color: #0857e8;
+  }
+  .item-2 {
+    padding: 4px 10px;
+    font-weight: bold;
+    background: rgba(49, 64, 91, 0.1);
+    border-radius: 8px;
+    color: #6e7f9e;
+  }
+}
+.is-hover {
+  &:hover {
+    .banner {
+      transform: scale(1.1);
+    }
+  }
+}
+</style>