yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

导航栏宽度即将调整

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-01 23:37:53 +08:00
parent 8a078a1291
commit e3e9afabbf
6 changed files with 230 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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",

3
src/App.vue
View File

@ -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>

13
src/components/Homepage.vue Normal file
View File

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

162
src/components/Toolbar.vue
View File

@ -1,11 +1,34 @@
<template>
<div id="topbar">
<img
id="toplogo"
referrerpolicy="no-referrer"
src="/toplogo.png"
/>
<div id="toproot">
<div id="topbar">
<img
id="toplogo"
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);
width: 100%;
background-color: black;
//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>

4
vite.config.js
View File

@ -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: {