联系我们

src/components/CaseCard.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="case_card_container">
+    <div class="card"></div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.case_card_container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  .card {
+    width: 100%;
+    height: 125px;
+    background: #283fe7;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>

src/pages/CaseShow.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="case_show_container">case_show_container</div>
+  <div class="case_show_container">
+    <CaseCard />
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import CaseCard from 'cpns/CaseCard'
+</script>
 
 <style lang="scss" scoped>
 .case_show_container {

src/pages/Contact.vue

@@ -1,10 +1,65 @@
 <template>
-  <div class="contact_container">contact</div>
+  <div class="contact_container">
+    <div class="company_img">
+      <div class="mask">
+        <div class="logo_wrap">产品梦工厂</div>
+      </div>
+    </div>
+    <div class="contact_info">
+      <div class="card"></div>
+    </div>
+    <div class="map_title">如何找到我们</div>
+    <div class="map_container"></div>
+  </div>
 </template>
 
 <script setup></script>
 
 <style lang="scss" scoped>
 .contact_container {
+  .company_img {
+    width: 100%;
+    height: 235px;
+    position: relative;
+    .mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(40, 63, 231, 0.66);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .logo_wrap {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .contact_info {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    .card {
+      width: 100%;
+      height: 146px;
+      background: #c0c5ef;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .map_title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 108px;
+  }
+  .map_container {
+    width: 100%;
+    height: 110vw;
+    background: #000;
+  }
 }
 </style>