联系我们

src/App.vue

@@ -1,7 +1,6 @@
 <script setup>
 import navigation from './components/navigation/index.vue'
-// import footer from './components/footer/footer.vue';
-
+import pageFooter from './components/pageFooter/pageFooter.vue'
 </script>
 
 <template>
@@ -9,12 +8,14 @@ import navigation from './components/navigation/index.vue'
 
   <RouterView />
 
-  <!-- <footer></footer> -->
+  <pageFooter />
 </template>
 
 <style>
 html,
 body {
+  width: 100vw;
+  height: 100vh;
   margin: 0;
   padding: 0;
 }

src/components/navigation/index.vue

@@ -6,6 +6,7 @@ const menu1Value = ref('item1');
 const changeHandler = (active) => {
   console.log('change', active);
 };
+
 </script>
 
 <template>
@@ -20,9 +21,9 @@ const changeHandler = (active) => {
       <template #logo>
         <div class="text">黑龙江东印科技</div>
       </template>
-          <t-menu-item value="item1" class="menu"> 首页 </t-menu-item>
+          <t-menu-item value="item1" class="menu" to="/"> 首页 </t-menu-item>
           <t-menu-item value="item2" class="menu" > 服务项目 </t-menu-item>
-          <t-menu-item value="item3" class="menu"> 联系我们 </t-menu-item>
+          <t-menu-item value="item3" class="menu" to="contact"> 联系我们 </t-menu-item>
       </t-head-menu>
     </div>
   </div>

src/components/pageFooter/pageFooter.vue

@@ -2,16 +2,14 @@
 
 </script>
 <template>
-    <footer class="footer">
+    <div class="footer">
         <span>鄂ICP备2023000527</span>
         <span><span class="hui">2023</span> <strong>黑龙江东印科技</strong> <span class="hui">版权所有</span></span>
-    </footer>
+    </div>
 </template>
 <style scoped>
 .footer {
     width: 100%;
-    position: fixed;
-    bottom: 0px;
     text-align: center;
     height: 150px;
     background-color: black;

src/router/index.js

@@ -9,6 +9,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path:'/contact',
+      name:'contact',
+      component:()=> import('../views/contact.vue')
+    }
     // {
     //   path: '/about',
     //   name: 'about',

src/views/HomeView.vue

@@ -8,7 +8,6 @@ const image = [
   { url: 'https://yingyongge.com/zb_users/theme/FY_Qo/style/images/3.jpg', text: "企业网站开发" },
 ]
 const images = ref(image)
-const text = ref('APP软件开发')
 
 </script>
 
@@ -31,7 +30,6 @@ const text = ref('APP软件开发')
       <h1 class="special_service_text">特色服务</h1>
       <div class="special_service_dec">
         <span class="special_service_dec_top">专注高端定制与设计的网站建设工作室,我们是体验经济世界的构筑者,我们创造有价值的精彩体验</span>
-        <span>1111</span>
       </div>
       <div class="special_service_type">
         <div class="special_service_typeone">
@@ -65,14 +63,12 @@ const text = ref('APP软件开发')
     </div>
   </div>
 
-  <footer class="footer">
-    <span>鄂ICP备2023000527</span>
-    <span><span class="hui">2023</span> <strong>黑龙江东印科技</strong> <span class="hui">版权所有</span></span>
-  </footer>
+ 
 </template>
 <style scoped>
 .home {
   width: 100vw;
+  box-sizing: border-box;
   /* height: 100vh; */
 }
 
@@ -119,14 +115,12 @@ const text = ref('APP软件开发')
 }
 
 .special_service {
-  /* height: 500px; */
   background-color: #f5f5f5;
   padding: 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
-  margin-bottom: 10px;
 }
 
 .special_service_text {
@@ -151,12 +145,10 @@ const text = ref('APP软件开发')
 }
 
 .special_service_type {
-
   width: 60%;
   display: flex;
   justify-content: space-around;
   align-items: center;
-  /* background-color: beige; */
 }
 
 .special_service_yuan {
@@ -165,7 +157,7 @@ const text = ref('APP软件开发')
   height: 95px;
   border-radius: 100%;
   background-color: #fff;
-  margin-bottom: 10px;
+  /* margin-bottom: 10px; */
 }
 
 .special_service_typeone {
@@ -186,28 +178,6 @@ const text = ref('APP软件开发')
   margin: auto;
   font-size: 48px;
   text-align: center;
-  /* top: 50%;
-  transform: translateY(-50%);
-  left: 50%;
-  transform: translateX(-50%); */
 }
 
-.footer {
-  width: 100%;
-  /* position: fixed; */
-  /* bottom: 0px; */
-  text-align: center;
-  height: 150px;
-  background-color: black;
-  color: aliceblue;
-  font-size: 13px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.hui {
-  color: #999;
-}
 </style>

src/views/contact.vue

@@ -0,0 +1,74 @@
+<template>
+    
+    <div class="contact layout">
+        <div class="title">黑龙江东印科技</div>
+        <div class="content">国内专业的APP软件开发、小程序开发、网站开发定制服务商</div>
+    </div>
+    <div class="contact contact-way">
+        <div class="xinxi">
+            <Icon class="c-icon" name="map-information-2" color="orange"/>
+            <div class="text">XXX省xxx市XXX地址</div>
+        </div>
+        <div class="xinxi">
+            <Icon class="c-icon" name="mail" color="orange"/>
+            <div class="text">xxxxxxxxxx@qq.com</div>
+        </div>
+        <div class="xinxi">
+            <Icon class="c-icon" name="call" color="orange"/>
+            <div class="text">xxxxxxxxxxx</div>
+        </div>
+    </div>
+    <div class="empty"></div>
+</template>
+<script setup>
+import { Icon } from 'tdesign-icons-vue-next';
+</script>
+<style scoped>
+.empty{
+    height: 355px;
+}
+.text{
+    color: #000;
+
+}
+.c-icon{
+    font-size: 30px;
+    margin-bottom: 20px;
+}
+.contact-way{
+    background:#f8f8f8;
+    margin: 2px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.xinxi{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 150px;
+}
+.contact{
+    width: 100vw;
+    height: 200px;
+}
+.layout{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(190, 190, 190, 0.288);
+
+}
+.title{
+    font-size: 38px;
+    font-weight: 700;
+    color: rgb(100, 100, 100);
+    margin-top: 30px;
+}
+.content{
+    font-size: 16px;
+    margin-top: 20px;
+}
+</style>