导航栏宽度即将调整

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "bootstrap": "^5.3.3",
         "bootstrap-icons": "latest",
+        "path": "latest",
         "sass": "latest",
         "vue": "^3.2.45",
         "vue-router": "latest"
@@ -979,6 +980,11 @@
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
       "integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg=="
     },
+    "node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1053,6 +1059,15 @@
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "optional": true
     },
+    "node_modules/path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "dependencies": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1097,6 +1112,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -1164,6 +1187,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.13.tgz",
@@ -1750,6 +1781,11 @@
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
       "integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg=="
     },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1800,6 +1836,15 @@
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "optional": true
     },
+    "path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "requires": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
     "picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1821,6 +1866,11 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
     "readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -1860,6 +1910,14 @@
         "is-number": "^7.0.0"
       }
     },
+    "util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
     "vite": {
       "version": "4.5.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.13.tgz",

package.json

@@ -12,7 +12,8 @@
     "bootstrap": "^5.3.3",
     "sass": "latest",
     "bootstrap-icons": "latest",
-    "vue-router": "latest"
+    "vue-router": "latest",
+    "path": "latest"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

src/App.vue

@@ -5,7 +5,8 @@ import Toolbar from './components/Toolbar.vue'
 
 <template>
 <div id="contentPane">
-  <div id="content"></div>
+  <Toolbar></Toolbar>
+  <div id="content"><router-view/></div>
   <div id="footer">
     <Footer></Footer>
   </div>

src/components/Homepage.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Homepage"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Toolbar.vue

@@ -1,11 +1,34 @@
 <template>
-  <div id="topbar">
+  <div id="toproot">
-    <img
+    <div id="topbar">
-        id="toplogo"
+      <img
-        referrerpolicy="no-referrer"
+          id="toplogo"
-        src="/toplogo.png"
+          referrerpolicy="no-referrer"
-    />
+          src="/toplogo.png"
+      />
+      <img
+          id="topcode"
+          class="label_1"
+          referrerpolicy="no-referrer"
+          src="/topcode.png"
+      />
+      <span id="rightcontent">
+        <span class="toptext" id="hyal">
+          行业案例
+        </span>
+        <span class="toptext" id="fwlc">
+          服务流程
+        </span>
+        <span class="toptext" id="gywm">
+          关于我们
+        </span>
+        <span class="toptext" id="lxwm">
+          联系我们
+        </span>
+      </span>
+    </div>
   </div>
+
 </template>
 
 <script>
@@ -19,17 +42,138 @@ export default {
 @import "node_modules/bootstrap/scss/_variables.scss";
 @import "node_modules/bootstrap/scss/_mixins.scss";
 
+.toptext
+{
+  @include media-breakpoint-between(xs, md) {
+  }
+  @include media-breakpoint-up(md){
+    //width: 80px;
+    width: 192px;
+    height: 28px;
+    overflow-wrap: break-word;
+    color: rgba(255, 255, 255, 1);
+    font-size: 20px;
+    font-family: PingFangSC-Regular;
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 28px;
+  }
+}
+
+#hyal
+{
+  @include media-breakpoint-between(xs, md) {
+  }
+  @include media-breakpoint-up(md){
+    //margin-right: 810px;
+  }
+}
+#fwlc
+{
+  @include media-breakpoint-between(xs, md) {
+  }
+  @include media-breakpoint-up(md){
+    //margin-right: 810px;
+  }
+}
+#lxwm
+{
+  @include media-breakpoint-between(xs, md) {
+  }
+  @include media-breakpoint-up(md){
+    //margin-right: 810px;
+  }
+}
+#hyal
+{
+  @include media-breakpoint-between(xs, md) {
+  }
+  @include media-breakpoint-up(md){
+    //margin-right: 810px;
+  }
+}
+
 #topbar
 {
-  background-color: rgba(255,255,255,0);
+  background-color: black;
-  width: 100%;
+  //background-color: rgba(255,255,255,0);
+  //width: 100%;
   @include media-breakpoint-between(xs, md) {
     height: 16px;
     margin: 3px 0 1px 0;
   }
   @include media-breakpoint-up(md){
     height: 28px;
-    margin: 34px 0 0 256px;
+    //max-width: 1371px;
+    //min-width: 807.33px;
+    width: 100%;
+    //margin: 34px 256px 0 256px;
+    //margin-left: 256px;
+    //margin-right: 256px;
+    //margin-left: 10px;
+    //margin-right: 10px;
   }
 }
+
+#toplogo
+{
+  //float: right;
+  @include media-breakpoint-between(xs, md) {
+
+  }
+  @include media-breakpoint-up(md){
+    margin-left: 256px;
+  }
+}
+
+#rightcontent
+{
+  float: right;
+  @include media-breakpoint-between(xs, md) {
+
+  }
+  @include media-breakpoint-up(md){
+
+  }
+}
+
+#topcode
+{
+  float: right;
+  @include media-breakpoint-between(xs, md) {
+
+  }
+  @include media-breakpoint-up(md){
+    width: 23px;
+    height: 23px;
+    //margin-top: 2px;
+    //margin: 3px 0 0 30px;
+    //top:3px;
+    margin-right: 285px;
+  }
+}
+
+#toproot
+{
+  display: flex;
+  position: -webkit-sticky;
+  position: sticky;
+  top:0px;
+  background-color: rgba(255,255,255,0);
+  z-index: 7;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  @include media-breakpoint-between(xs, md) {
+    height:22px;
+  }
+  @include media-breakpoint-up(md){
+    //height: 34px;
+    height: 95.17px;
+    //margin-top: 2px;
+    //margin: 3px 0 0 30px;
+  }
+}
+
 </style>

vite.config.js

@@ -1,9 +1,9 @@
-import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
 
 // https://vitejs.dev/config/
+
 export default defineConfig({
   plugins: [vue()],
   server: {