qdintc/intc-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 样式功能优化完善。

Browse Source
This commit is contained in:
tianyongbao
2025-12-28 21:35:50 +08:00
parent fdea7fd31b
commit 752079ddaa
6 changed files with 124 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Header.vue
View File

@@ -6,6 +6,7 @@
<a class="zui-nav-link" :href="currentLinks.accounting" target="_blank">&nbsp;&nbsp;记账平台</a> <a class="zui-nav-link" :href="currentLinks.accounting" target="_blank">&nbsp;&nbsp;记账平台</a>
<a class="zui-nav-link" :href="currentLinks.health" target="_blank">&nbsp;&nbsp;健康档案</a> <a class="zui-nav-link" :href="currentLinks.health" target="_blank">&nbsp;&nbsp;健康档案</a>
<a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;茅台预约</a> <a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;茅台预约</a>
<a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;智聪物联</a>
</h4> </h4>
<div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div> <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
<div v-show="webShow"> <div v-show="webShow">

BIN
src/components/img/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 56 KiB

23
src/components/less/button.less
View File

@@ -3,22 +3,27 @@
.@{prefix}-button{ .@{prefix}-button{
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
line-height: 50px; font-weight: 500;
border-radius: 10px; line-height: 40px;
background: linear-gradient(135deg, #00b8ff, #007bff); height: 40px;
border-radius: 8px;
background: linear-gradient(135deg, #35A3BA 0%, #0ea5b7 100%);
border: none; border: none;
min-width: 190px; min-width: 100px;
box-shadow: 0 0 0 rgba(0, 212, 255, 0); padding: 0 20px;
box-shadow: 0 2px 8px rgba(53, 163, 186, 0.25);
transition: all .2s ease; transition: all .2s ease;
.cursor(); .cursor();
} }
.@{prefix}-button:hover{ .@{prefix}-button:hover{
background: linear-gradient(135deg, #00c2ff, #0088ff); background: linear-gradient(135deg, #3db0c8 0%, #12b0c3 100%);
box-shadow: 0 0 12px rgba(0, 212, 255, 0.5); box-shadow: 0 4px 12px rgba(53, 163, 186, 0.35);
transform: translateY(-1px);
} }
.@{prefix}-button:active{ .@{prefix}-button:active{
background: linear-gradient(135deg, #00a8f0, #006fe6); background: linear-gradient(135deg, #2d96aa 0%, #0c98a8 100%);
transform: translateY(1px); box-shadow: 0 2px 6px rgba(53, 163, 186, 0.3);
transform: translateY(0);
} }

154
src/components/less/header.less
View File

@@ -2,45 +2,57 @@
.@{prefix}-header { .@{prefix}-header {
width: 100%; width: 100%;
height: 100px; height: 70px;
background: rgba(255,255,255,0.75); background: rgba(255,255,255,0.95);
backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 4px 14px rgba(16,24,40,0.08); box-shadow: 0 4px 14px rgba(16,24,40,0.08);
position: sticky; position: fixed;
top: 0; top: 0;
z-index: 100; left: 0;
z-index: 1000;
.float-clear; .float-clear;
.@{prefix}-logo{ .@{prefix}-logo{
width: 135px; width: 300px;
height: 100px; height: 70px;
margin: 0 0 0 20px; margin: 0 0 0 10px;
float: left; float: left;
} }
.@{prefix}-logo-text{ .@{prefix}-logo-text{
float: left; float: left;
height: 100px; height: 70px;
color: #36A4BB; color: #36A4BB;
font-size: 16px; font-size: 16px;
// padding-top: 28px; line-height: 70px;
line-height: 100px;
text-align: center; text-align: center;
margin: 0 0 0 0px; margin: 0;
display: flex;
align-items: center;
gap: 8px;
} }
.@{prefix}-logo-text a{ .@{prefix}-logo-text a{
color: var(--color-text); color: var(--color-text);
text-decoration: none; text-decoration: none;
margin: 0 8px; margin: 0;
padding: 10px 18px;
font-weight: 600; font-weight: 600;
background: rgba(53, 163, 186, 0.06);
border-radius: 8px;
transition: all 0.2s ease;
display: inline-block;
line-height: 1.4;
} }
.@{prefix}-logo-text a:hover{ .@{prefix}-logo-text a:hover{
color: var(--color-accent); color: #35A3BA;
text-decoration: underline; background: rgba(53, 163, 186, 0.12);
text-decoration: none;
transform: translateY(-1px);
} }
.@{prefix}-button{ .@{prefix}-button{
float: right; float: right;
line-height: 40px; line-height: 40px;
margin: 30px 30px 0 0; height: 40px;
min-width: 100px; margin: 15px 8px 0 0;
min-width: 90px;
} }
.@{prefix}-rightcol{ .@{prefix}-rightcol{
display: none; display: none;
@@ -49,8 +61,8 @@
.@{prefix}-logo-line { .@{prefix}-logo-line {
width: 1px; width: 1px;
height: 45px; height: 35px;
top: 30px; top: 18px;
left: 10px; left: 10px;
float: left; float: left;
position: relative; position: relative;
@@ -58,22 +70,72 @@
} }
} }
@media (max-width: 1024px) and (min-width: 769px) {
.@{prefix}-header{
.@{prefix}-logo-text{
display: none !important;
}
.@{prefix}-rightcol{
display: flex !important;
}
}
}
@media (min-width: 1025px) {
.@{prefix}-header{
.@{prefix}-rightcol{
display: none !important;
}
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.@{prefix}-header{ .@{prefix}-header{
height: 60px; height: 100px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: 10px 0;
background: rgba(255,255,255,0.98);
box-shadow: 0 2px 12px rgba(16,24,40,0.1);
.zui-logo{ .zui-logo{
height: 60px; height: 45px;
width: 100px; width: 200px;
margin: 0 0 0 10px; max-width: calc(100% - 100px);
margin: 0 0 0 12px;
order: 1;
} }
.@{prefix}-logo-text{ .@{prefix}-logo-text{
height: 60px; display: block !important;
line-height: 60px; width: 100%;
font-size: 10px; height: 40px;
line-height: 20px;
font-size: 12px;
margin: 0; margin: 0;
padding: 0 12px;
order: 3;
text-align: left;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
a { a {
margin: 0 4px; display: inline-block;
font-size: 10px; margin: 0;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
color: var(--color-text);
background: rgba(53, 163, 186, 0.08);
border-radius: 6px;
transition: all 0.2s ease;
white-space: nowrap;
}
a:hover, a:active {
background: rgba(53, 163, 186, 0.15);
color: #35A3BA;
text-decoration: none;
transform: translateY(-1px);
} }
} }
.@{prefix}-button{ .@{prefix}-button{
@@ -83,34 +145,28 @@
display: flex !important; display: flex !important;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 12px;
float: right; height: 36px;
line-height: 35px; line-height: 36px;
margin: 12px 10px 0 0; margin: 5px 12px 0 auto;
min-width: 60px; min-width: 50px;
padding: 0 12px; padding: 0 10px;
font-weight: bold; font-weight: 500;
color: #fff; color: #35A3BA;
background: linear-gradient(135deg, #35A3BA, #0088ff); background: rgba(53, 163, 186, 0.1);
border-radius: 6px; border: 1.5px solid rgba(53, 163, 186, 0.3);
border-radius: 8px;
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 6px rgba(53, 163, 186, 0.3);
transition: all 0.2s ease; transition: all 0.2s ease;
order: 2;
} }
.@{prefix}-rightcol:active { .@{prefix}-rightcol:active {
transform: scale(0.96); background: rgba(53, 163, 186, 0.18);
box-shadow: 0 1px 3px rgba(53, 163, 186, 0.4); border-color: rgba(53, 163, 186, 0.4);
transform: scale(0.98);
} }
.@{prefix}-logo-line { .@{prefix}-logo-line {
display: none; display: none;
} }
} }
} }
@media (min-width: 769px) {
.@{prefix}-header{
.@{prefix}-rightcol{
display: none !important;
}
}
}

4
src/components/less/logo.less
View File

@@ -1,5 +1,5 @@
.zui-logo { .zui-logo {
width: 150px; width: 100px;
height: 52px; height: 40px;
cursor: pointer; cursor: pointer;
} }

2
src/components/less/page.less
View File

@@ -20,6 +20,7 @@
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
margin: 0 auto; margin: 0 auto;
padding-top: 70px;
font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
@@ -117,6 +118,7 @@
@media (max-width: 600px) { @media (max-width: 600px) {
.zui-page { .zui-page {
overflow-x: hidden; overflow-x: hidden;
padding-top: 100px;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {