服务项目

src/components/navigation/index.vue

@@ -11,29 +11,29 @@ const changeHandler = (active) => {
 <template>
   <div class="navigation">
     <div class="menu">
-      <t-head-menu 
-        v-model="menu1Value"
-        theme="dark"
-        height="150px"
-        @change="changeHandler"
-      >
+      <t-head-menu class="menu_shadow" v-model="menu1Value" theme="dark" height="150px" @change="changeHandler">
         <template #logo>
           <div class="text">黑龙江东印科技</div>
         </template>
-          <t-menu-item value="item1" class="menu"> 首页 </t-menu-item>
-          <t-menu-item value="item2" class="menu"> 服务项目 </t-menu-item>
+        <t-menu-item value="item1" class="menu" to="/"> 首页 </t-menu-item>
+        <t-menu-item value="item2" class="menu" to="/ServicesProject"> 服务项目 </t-menu-item>
         <t-menu-item value="item3" class="menu"> 联系我们 </t-menu-item>
       </t-head-menu>
     </div>
   </div>
-  
 </template>
 
 <style scoped>
-
 .navigation {
-        width: 100vw;
+  box-sizing: border-box;
 }
+
+
+.menu_shadow {
+  box-shadow: 0px -7px 50px 0px orange;
+
+}
+
 .text {
   line-height: 80px;
   color: #fff;
@@ -41,8 +41,8 @@ const changeHandler = (active) => {
   margin-left: 450px;
   margin-right: 600px;
 }
+
 .t-menu__item.t-is-active {
   background-color: #88888863
 }
-  
 </style>

src/components/pagefooter/pagefooter.vue

@@ -10,8 +10,6 @@
 <style scoped>
 .footer {
     width: 100%;
-    position: fixed;
-    bottom: 0px;
     text-align: center;
     height: 150px;
     background-color: black;

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import ServicesProject from "../views/ServicesProject.vue"
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,6 +10,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path: '/ServicesProject',
+      name: 'project',
+      component: ServicesProject
+    }
     // {
     //   path: '/about',
     //   name: 'about',

src/views/HomeView.vue

@@ -7,7 +7,13 @@ const image = [
   { url: 'https://yingyongge.com/zb_users/theme/FY_Qo/style/images/2.jpg', text: "小程序开发" },
   { url: 'https://yingyongge.com/zb_users/theme/FY_Qo/style/images/3.jpg', text: "企业网站开发" },
 ]
+const projectlist = [
+  { text: "APP软件开发", icon: "system-marked" },
+  { text: "小程序开发", icon: "system-messages" },
+  { text: "网站开发", icon: "system-messages" }
+]
 const images = ref(image)
+const project_list = ref(projectlist)
 const text = ref('APP软件开发')
 
 </script>
@@ -34,16 +40,19 @@ const text = ref('APP软件开发')
         <span>1111</span>
       </div>
       <div class="special_service_type">
-        <div class="special_service_typeone">
+        <div class="special_service_typeone" v-for="(item, index) in project_list" :key="index">
+          <!-- 圆圈 -->
           <div class="special_service_yuan">
+            <!-- 图标 -->
             <span class="icon">
-              <icon name="system-marked" color="orange" style="color:orange;" />
+              <icon :name="item.icon" color="orange" style="color:orange;" />
             </span>
           </div>
-          <span class="special_service_wenzi"><strong>APP软件开发</strong></span>
+          <!-- 文字 -->
+          <span class="special_service_wenzi"><strong>{{ item.text }}</strong></span>
         </div>
 
-        <div class="special_service_typeone">
+        <!-- <div class="special_service_typeone">
           <div class="special_service_yuan">
             <span class="icon">
               <icon name="system-code" color="orange" />
@@ -59,7 +68,7 @@ const text = ref('APP软件开发')
             </span>
           </div>
           <span class="special_service_wenzi"><strong>网站开发</strong></span>
-        </div>
+        </div> -->
 
       </div>
     </div>
@@ -119,9 +128,10 @@ const text = ref('APP软件开发')
 }
 
 .special_service {
-  /* height: 500px; */
+  width: 100%;
+  box-sizing: border-box;
   background-color: #f5f5f5;
-  padding: 60px;
+  padding: 60px 0px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -151,7 +161,6 @@ const text = ref('APP软件开发')
 }
 
 .special_service_type {
-
   width: 60%;
   display: flex;
   justify-content: space-around;

src/views/ServicesProject.vue

@@ -0,0 +1,45 @@
+<script>
+import pagefooter from '../components/pagefooter/pagefooter.vue'
+export default {
+    components: { pagefooter },
+
+}
+</script>
+<template>
+    <div class="body">
+        <div class=" content">
+            <div class="content_text"><strong>服务项目</strong></div>
+            <div class="content_des"></div>
+        </div>
+        <pagefooter></pagefooter>
+    </div>
+</template>
+
+<style scoped>
+.body {
+    width: 100%;
+    box-sizing: border-box;
+    height: 530px;
+    background-color: #f5f5f5;
+}
+
+.content {
+    box-sizing: border-box;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 100px;
+}
+
+.content_text {
+    font-size: 30px;
+    width: 100%;
+    height: 140px;
+    line-height: 140px;
+}
+
+.content_des {
+    width: 100%;
+    height: 140px;
+    background-color: #fff;
+}
+</style>