feat(css): 添加全局样式并调整布局
- 新增 common.css 文件，定义全局基础样式 - 新增 common.min.css 文件，用于生产环境 - 更新 common.scss 文件，调整中心区域宽度 - 添加面包屑导航、滚动条等样式 - 优化响应式布局，适配不同屏幕尺寸
This commit is contained in:
parent
d5641d3938
commit
15cdaee012
|
|
@ -65,7 +65,7 @@ export default defineNuxtConfig({
|
||||||
useCookie: true,
|
useCookie: true,
|
||||||
cookieKey: 'i18n_redirected',
|
cookieKey: 'i18n_redirected',
|
||||||
redirectOn: 'root',
|
redirectOn: 'root',
|
||||||
alwaysRedirect: false,
|
alwaysRedirect: true,
|
||||||
fallbackLocale: 'en',
|
fallbackLocale: 'en',
|
||||||
cookieSecure: false
|
cookieSecure: false
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,979 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, h6, i, b, textarea, button, input, select, figure, figcaption {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
font-style: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: MiSans-Normal;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
body:hover, div:hover, span:hover, header:hover, footer:hover, nav:hover, section:hover, aside:hover, article:hover, ul:hover, dl:hover, dt:hover, dd:hover, li:hover, a:hover, p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, i:hover, b:hover, textarea:hover, button:hover, input:hover, select:hover, figure:hover, figcaption:hover {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
outline: none;
|
||||||
|
-moz-outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a img {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea,
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
background-color: transparent;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.75em;
|
||||||
|
width: 100%;
|
||||||
|
border-top: solid 1px #ddd;
|
||||||
|
border-left: solid 1px #ddd;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
table th {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
table td,
|
||||||
|
table th {
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="button"],
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="file"],
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: calc(100 * 100vw / 1920) !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
user-select: text;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
color: #3f4552;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* **************滚动条*****************/
|
||||||
|
html::-webkit-scrollbar {
|
||||||
|
overflow: hidden;
|
||||||
|
/* 高宽分别对应纵横向滚动条 */
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
html::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html::-webkit-scrollbar-track {
|
||||||
|
/*滚动条里面轨道*/
|
||||||
|
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
|
||||||
|
html::-webkit-scrollbar-thumb {
|
||||||
|
background: #262729;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
border: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.define-topBar__components {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autowidth {
|
||||||
|
width: 18rem;
|
||||||
|
margin: auto;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1366px) {
|
||||||
|
.autowidth {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animationDH {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animateLt {
|
||||||
|
animation: 1s dh_left linear both;
|
||||||
|
-webkit-animation: 1s dh_left linear both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animateRt {
|
||||||
|
animation: 1s dh_right linear both;
|
||||||
|
-webkit-animation: 1s dh_right linear both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animateBt {
|
||||||
|
animation: 1s dh_buttom linear both;
|
||||||
|
-webkit-animation: 1s dh_buttom linear both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhLeft {
|
||||||
|
-webkit-opacity: 0;
|
||||||
|
transform: translate(75px, 0);
|
||||||
|
-webkit-transform: translate(75px, 0);
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhRight {
|
||||||
|
-webkit-opacity: 0;
|
||||||
|
transform: translate(-45px, 0);
|
||||||
|
-webkit-transform: translate(-45px, 0);
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhTop {
|
||||||
|
transform: translate(0, 45px);
|
||||||
|
-webkit-transform: translate(0, 45px);
|
||||||
|
transition: transform 1s;
|
||||||
|
-webkit-transition: transform 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhBottom {
|
||||||
|
-webkit-opacity: 0;
|
||||||
|
transform: translate(0, -45px);
|
||||||
|
-webkit-transform: translate(0, -45px);
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhyc1 {
|
||||||
|
transition-delay: 0.25s;
|
||||||
|
-webkit-transition-delay: 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhyc2 {
|
||||||
|
transition-delay: 0.5s;
|
||||||
|
-webkit-transition-delay: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhyc3 {
|
||||||
|
transition-delay: 0.75s;
|
||||||
|
-webkit-transition-delay: 0.75s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhyc4 {
|
||||||
|
transition-delay: 1s;
|
||||||
|
-webkit-transition-delay: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes dh_right {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translate(60px, 0%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dh_right {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(60px, 0%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes dh_left {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translate(-60px, 0%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dh_left {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-60px, 0%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes dh_buttom {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: translate(0, 60px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dh_buttom {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(0, 60px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*页面banner部分*/
|
||||||
|
.banner {
|
||||||
|
margin-top: 0.52rem;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 5.5rem;
|
||||||
|
background-size: cover !important;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
box-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 230px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.banner {
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1099px) {
|
||||||
|
.banner {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.banner {
|
||||||
|
height: 7.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.banner {
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner__box {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
animation: 1s dh_buttom linear both;
|
||||||
|
-webkit-animation: 1s dh_buttom linear both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner__box__title {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner__box__subtitle {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 751px) and (max-width: 1100px) {
|
||||||
|
.banner__box__title {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
.banner__box__subtitle {
|
||||||
|
font-size: 0.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
.banner__box__title {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
.banner__box__subtitle {
|
||||||
|
font-size: 0.55rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
.banner__box__title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.banner__box__subtitle {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__breads {
|
||||||
|
color: #666;
|
||||||
|
width: auto;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__breads__box {
|
||||||
|
width: 12rem;
|
||||||
|
color: #666;
|
||||||
|
line-height: 4;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__breads__box__icon__avater {
|
||||||
|
width: 0.17rem;
|
||||||
|
height: 0.17rem;
|
||||||
|
margin-bottom: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.pageMain__breads__box {
|
||||||
|
width: 15rem;
|
||||||
|
font-size: 13.5px;
|
||||||
|
line-height: 3.2;
|
||||||
|
}
|
||||||
|
.pageMain__breads__box__icon__avater {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__breads__box a {
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
.pageMain__breads__box a:hover {
|
||||||
|
color: #0072ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.pageMain__breads__box {
|
||||||
|
font-size: 13px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.pageMain__breads__box {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
.pageMain__breads__box__icon__avater {
|
||||||
|
width: 0.68rem;
|
||||||
|
height: 0.68rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 350px) {
|
||||||
|
.pageMain__breads__box {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__line {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
padding: 0.1rem 0 0.2rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.pageMain__line {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__line__item {
|
||||||
|
margin: 0 1rem;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.18rem;
|
||||||
|
font-family: MiSans-Normal;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.pageMain__line__item {
|
||||||
|
font-size: 15.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 501px) and (max-width: 1100px) {
|
||||||
|
.pageMain__line__item {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.pageMain__line__item {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 350px) {
|
||||||
|
.pageMain__line__item {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__line__item::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 15%;
|
||||||
|
content: "";
|
||||||
|
bottom: 0;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #0072ff;
|
||||||
|
width: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.pageMain__line__item::before {
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__line__item:hover::before {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__line--on {
|
||||||
|
color: #0072ff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__line--on::before {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain__buttom-line {
|
||||||
|
padding: 0.36 0 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticky-page-layout {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky {
|
||||||
|
line-height: 3;
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1500px) {
|
||||||
|
.nav-sticky {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.nav-sticky {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
.nav-sticky {
|
||||||
|
font-size: 0.42rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.nav-sticky {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.nav-sticky {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.63rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
transition: width 0.3s;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.nav-sticky__center {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__left {
|
||||||
|
font-size: 0.17rem;
|
||||||
|
font-family: MiSans-Bold;
|
||||||
|
line-height: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1500px) {
|
||||||
|
.nav-sticky__center__left {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.nav-sticky__center__left {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
.nav-sticky__center__left {
|
||||||
|
font-size: 0.42rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.nav-sticky__center__left {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.nav-sticky__center__left {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.63rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.nav-sticky__center__left {
|
||||||
|
margin-left: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
line-height: 3;
|
||||||
|
font-size: 0.15rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1500px) {
|
||||||
|
.nav-sticky__center__right {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.nav-sticky__center__right {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
.nav-sticky__center__right {
|
||||||
|
font-size: 0.42rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.nav-sticky__center__right {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.nav-sticky__center__right {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.63rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.nav-sticky__center__right {
|
||||||
|
margin-right: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right__item {
|
||||||
|
margin: 0 0.2rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.nav-sticky__center__right__item {
|
||||||
|
margin: 0 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right__item:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right--Active {
|
||||||
|
opacity: 1;
|
||||||
|
border-bottom: 0.01rem solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right__dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right__dropdown__up {
|
||||||
|
line-height: 3;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1500px) {
|
||||||
|
.nav-sticky__center__right__dropdown__up {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.nav-sticky__center__right__dropdown__up {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
.nav-sticky__center__right__dropdown__up {
|
||||||
|
font-size: 0.42rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.nav-sticky__center__right__dropdown__up {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.nav-sticky__center__right__dropdown__up {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.63rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right__dropdown__up .arrow-down {
|
||||||
|
width: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right__dropdown__menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: -50%;
|
||||||
|
background-color: #222;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
box-shadow: 0 0.04rem 0.1rem 0.02rem rgba(0, 0, 0, 0.08);
|
||||||
|
z-index: 1;
|
||||||
|
width: 150%;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right__dropdown__menu__item {
|
||||||
|
color: #919191;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky__center__right__dropdown__menu__item--Active {
|
||||||
|
color: #0072ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky--active {
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: sticky;
|
||||||
|
background-color: rgba(3, 6, 11, 0.4);
|
||||||
|
border-bottom: 1px solid rgba(236, 234, 234, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky--active .nav-sticky__center {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 10.8rem;
|
||||||
|
color: #ffffff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-banner__title {
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
top: 1.5rem;
|
||||||
|
left: 50%;
|
||||||
|
width: 90%;
|
||||||
|
text-align: center;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-banner__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
.detail-banner {
|
||||||
|
padding-top: 2rem;
|
||||||
|
height: 12.8rem;
|
||||||
|
}
|
||||||
|
.detail-banner__title {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
top: 3.8rem;
|
||||||
|
}
|
||||||
|
.detail-banner__title-2 {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
top: 3.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 遮罩 */
|
||||||
|
.load-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10002;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-mask .spinner {
|
||||||
|
width: 150px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-mask .spinner .spinner__item {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background-color: #aeadba;
|
||||||
|
border-radius: 100%;
|
||||||
|
display: inline-block;
|
||||||
|
animation: bouncedelay 1.4s infinite ease-in-out;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-mask .spinner .bounce1 {
|
||||||
|
-webkit-animation-delay: -0.32s;
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-mask .spinner .bounce2 {
|
||||||
|
-webkit-animation-delay: -0.16s;
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bouncedelay {
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 35vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-loading__box {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
color: #aeadba;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-loading__box__up {
|
||||||
|
width: 55px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-loading__box__up__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-loading__box__text {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.load-loading__box__up {
|
||||||
|
width: 47px;
|
||||||
|
}
|
||||||
|
.load-loading__box__text {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) {
|
||||||
|
.load-loading__box {
|
||||||
|
width: 2rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
.load-loading__box__up {
|
||||||
|
width: 0.55rem;
|
||||||
|
}
|
||||||
|
.load-loading__box__text {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="is-animating-"] {
|
||||||
|
transform: translateY(11.71rpx);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -551,7 +551,7 @@ max-width: 100%
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&__center {
|
&__center {
|
||||||
width: 9.8rem;
|
width: 1200px;
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
|
|
@ -1,8 +1,8 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id 4350424 */
|
font-family: "iconfont"; /* Project id 5007036 */
|
||||||
src: url('/static/font/iconfont.woff2?t=1716543193903') format('woff2'),
|
src: url('iconfont.woff2?t=1756173766338') format('woff2'),
|
||||||
url('/static/font/iconfont.woff?t=1716543193903') format('woff'),
|
url('iconfont.woff?t=1756173766338') format('woff'),
|
||||||
url('/static/font/iconfont.ttf?t=1716543193903') format('truetype');
|
url('iconfont.ttf?t=1756173766338') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
|
|
@ -13,56 +13,124 @@
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi:before {
|
.icon-icon_team:before {
|
||||||
content: "\e668";
|
content: "\e647";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-syd-logo:before {
|
.icon-icon_global:before {
|
||||||
content: "\e602";
|
content: "\ec17";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-top:before {
|
.icon-icon_building:before {
|
||||||
content: "\e67e";
|
content: "\e6ed";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shachu-xue:before {
|
.icon-icon-factory:before {
|
||||||
content: "\e638";
|
content: "\e635";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-weibiaoti1:before {
|
.icon-icon-experiment:before {
|
||||||
content: "\e634";
|
content: "\e7c6";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-xiazai:before {
|
.icon-icon-time:before {
|
||||||
content: "\e682";
|
content: "\e683";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-xiajiantou:before {
|
.icon-icon-chart-line:before {
|
||||||
content: "\e610";
|
content: "\e690";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shangjiantou-copy:before {
|
.icon-icon_award:before {
|
||||||
content: "\e651";
|
content: "\e615";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-jiazhiguan:before {
|
.icon-icon-star:before {
|
||||||
content: "\e646";
|
content: "\e636";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-rencailinian:before {
|
.icon-icon_check-circle:before {
|
||||||
content: "\e667";
|
content: "\e7bf";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-msgw_icon_shiming:before {
|
.icon-jiantou_xiangyou:before {
|
||||||
content: "\e60f";
|
content: "\eb08";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-qiyeyuanjing:before {
|
.icon-youjian_o:before {
|
||||||
content: "\e671";
|
content: "\ebca";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-home:before {
|
.icon-dianhua:before {
|
||||||
content: "\e62b";
|
content: "\e66b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-earch:before {
|
||||||
|
content: "\e617";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiangyou:before {
|
||||||
|
content: "\e656";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-language:before {
|
||||||
|
content: "\e6a9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shanchu:before {
|
||||||
|
content: "\e606";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shanchu11:before {
|
||||||
|
content: "\e62e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zuixinzixun-03:before {
|
||||||
|
content: "\ea2c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shangjiantou:before {
|
||||||
|
content: "\eb6d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zuojiantou:before {
|
||||||
|
content: "\e65a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shezhi:before {
|
||||||
|
content: "\e892";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-youjiantou:before {
|
||||||
|
content: "\e678";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-kefu:before {
|
||||||
|
content: "\e665";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow-right:before {
|
||||||
|
content: "\e666";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-left:before {
|
||||||
|
content: "\e684";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-X:before {
|
||||||
|
content: "\e607";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-search:before {
|
||||||
|
content: "\e676";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-home1:before {
|
||||||
|
content: "\e92d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zhidingtop:before {
|
||||||
|
content: "\e62d";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-jiantou_qiehuanyou:before {
|
.icon-jiantou_qiehuanyou:before {
|
||||||
|
|
@ -97,10 +165,6 @@
|
||||||
content: "\e672";
|
content: "\e672";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-duoyuyan:before {
|
|
||||||
content: "\e654";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-sousuo:before {
|
.icon-sousuo:before {
|
||||||
content: "\e61f";
|
content: "\e61f";
|
||||||
}
|
}
|
||||||
|
|
@ -157,83 +221,91 @@
|
||||||
content: "\e62f";
|
content: "\e62f";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-zhidingtop:before {
|
.icon-home:before {
|
||||||
content: "\e62d";
|
content: "\e62b";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-home1:before {
|
.icon-jiazhiguan:before {
|
||||||
content: "\e92d";
|
content: "\e646";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-search:before {
|
.icon-rencailinian:before {
|
||||||
content: "\e676";
|
content: "\e667";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-X:before {
|
.icon-msgw_icon_shiming:before {
|
||||||
content: "\e607";
|
content: "\e60f";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-arrow-right:before {
|
.icon-qiyeyuanjing:before {
|
||||||
content: "\e666";
|
content: "\e671";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-left:before {
|
.icon-xiajiantou:before {
|
||||||
content: "\e684";
|
content: "\e610";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-zuojiantou:before {
|
.icon-shangjiantou-copy:before {
|
||||||
content: "\e65a";
|
content: "\e651";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shezhi:before {
|
.icon-weibiaoti1:before {
|
||||||
content: "\e892";
|
content: "\e634";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-youjiantou:before {
|
.icon-xiazai:before {
|
||||||
content: "\e678";
|
content: "\e682";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-kefu:before {
|
.icon-shachu-xue:before {
|
||||||
content: "\e665";
|
content: "\e638";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shangjiantou:before {
|
.icon-top:before {
|
||||||
content: "\eb6d";
|
content: "\e67e";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-zuixinzixun-03:before {
|
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi:before {
|
||||||
content: "\ea2c";
|
content: "\e668";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shanchu11:before {
|
.icon-youjian1:before {
|
||||||
content: "\e62e";
|
content: "\e6f5";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shanchu:before {
|
.icon-fanhuidingbu:before {
|
||||||
content: "\e606";
|
content: "\e633";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-language:before {
|
.icon-zanwushuju:before {
|
||||||
content: "\e6a9";
|
content: "\e608";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-jiantou_xiangyou:before {
|
.icon-zanwushuju1:before {
|
||||||
content: "\eb08";
|
content: "\e618";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-youjian_o:before {
|
.icon-zhengzaijiazai:before {
|
||||||
content: "\ebca";
|
content: "\e619";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-dianhua:before {
|
.icon-jiazhiguan1:before {
|
||||||
content: "\e66b";
|
content: "\e621";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-earch:before {
|
.icon-msgw_icon_shiming-03:before {
|
||||||
content: "\e617";
|
content: "\e622";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-xiangyou:before {
|
.icon-qiyeyuanjing-04:before {
|
||||||
content: "\e656";
|
content: "\e623";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-a-rencailinian1-02:before {
|
||||||
|
content: "\e624";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wancheng:before {
|
||||||
|
content: "\e652";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,527 @@
|
||||||
|
{
|
||||||
|
"id": "5007036",
|
||||||
|
"name": "水平面尼日利亚官网",
|
||||||
|
"font_family": "iconfont",
|
||||||
|
"css_prefix_text": "icon-",
|
||||||
|
"description": "",
|
||||||
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "5869238",
|
||||||
|
"name": "icon_team",
|
||||||
|
"font_class": "icon_team",
|
||||||
|
"unicode": "e647",
|
||||||
|
"unicode_decimal": 58951
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "12410550",
|
||||||
|
"name": "icon_global",
|
||||||
|
"font_class": "icon_global",
|
||||||
|
"unicode": "ec17",
|
||||||
|
"unicode_decimal": 60439
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "13770691",
|
||||||
|
"name": "icon_building",
|
||||||
|
"font_class": "icon_building",
|
||||||
|
"unicode": "e6ed",
|
||||||
|
"unicode_decimal": 59117
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "20884464",
|
||||||
|
"name": "icon-factory",
|
||||||
|
"font_class": "icon-factory",
|
||||||
|
"unicode": "e635",
|
||||||
|
"unicode_decimal": 58933
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "25219153",
|
||||||
|
"name": "icon-experiment",
|
||||||
|
"font_class": "icon-experiment",
|
||||||
|
"unicode": "e7c6",
|
||||||
|
"unicode_decimal": 59334
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "29306670",
|
||||||
|
"name": "icon-time",
|
||||||
|
"font_class": "icon-time",
|
||||||
|
"unicode": "e683",
|
||||||
|
"unicode_decimal": 59011
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "32809261",
|
||||||
|
"name": "icon-chart-line",
|
||||||
|
"font_class": "icon-chart-line",
|
||||||
|
"unicode": "e690",
|
||||||
|
"unicode_decimal": 59024
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "34666572",
|
||||||
|
"name": "icon_award",
|
||||||
|
"font_class": "icon_award",
|
||||||
|
"unicode": "e615",
|
||||||
|
"unicode_decimal": 58901
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "37124991",
|
||||||
|
"name": "icon-star",
|
||||||
|
"font_class": "icon-star",
|
||||||
|
"unicode": "e636",
|
||||||
|
"unicode_decimal": 58934
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "40585518",
|
||||||
|
"name": "icon_check-circle",
|
||||||
|
"font_class": "icon_check-circle",
|
||||||
|
"unicode": "e7bf",
|
||||||
|
"unicode_decimal": 59327
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5387583",
|
||||||
|
"name": "箭头_向右",
|
||||||
|
"font_class": "jiantou_xiangyou",
|
||||||
|
"unicode": "eb08",
|
||||||
|
"unicode_decimal": 60168
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5388066",
|
||||||
|
"name": "邮件_o",
|
||||||
|
"font_class": "youjian_o",
|
||||||
|
"unicode": "ebca",
|
||||||
|
"unicode_decimal": 60362
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "6263347",
|
||||||
|
"name": "电话",
|
||||||
|
"font_class": "dianhua",
|
||||||
|
"unicode": "e66b",
|
||||||
|
"unicode_decimal": 58987
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "9550461",
|
||||||
|
"name": "全球资讯",
|
||||||
|
"font_class": "earch",
|
||||||
|
"unicode": "e617",
|
||||||
|
"unicode_decimal": 58903
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "34273106",
|
||||||
|
"name": "向右",
|
||||||
|
"font_class": "xiangyou",
|
||||||
|
"unicode": "e656",
|
||||||
|
"unicode_decimal": 58966
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "15448290",
|
||||||
|
"name": "language",
|
||||||
|
"font_class": "language",
|
||||||
|
"unicode": "e6a9",
|
||||||
|
"unicode_decimal": 59049
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "12670573",
|
||||||
|
"name": "删除",
|
||||||
|
"font_class": "shanchu",
|
||||||
|
"unicode": "e606",
|
||||||
|
"unicode_decimal": 58886
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "3530491",
|
||||||
|
"name": "删除",
|
||||||
|
"font_class": "shanchu11",
|
||||||
|
"unicode": "e62e",
|
||||||
|
"unicode_decimal": 58926
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "33906987",
|
||||||
|
"name": "最新资讯-03",
|
||||||
|
"font_class": "zuixinzixun-03",
|
||||||
|
"unicode": "ea2c",
|
||||||
|
"unicode_decimal": 59948
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "4175512",
|
||||||
|
"name": "上箭头",
|
||||||
|
"font_class": "shangjiantou",
|
||||||
|
"unicode": "eb6d",
|
||||||
|
"unicode_decimal": 60269
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "1518005",
|
||||||
|
"name": "左箭头",
|
||||||
|
"font_class": "zuojiantou",
|
||||||
|
"unicode": "e65a",
|
||||||
|
"unicode_decimal": 58970
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "2076270",
|
||||||
|
"name": "设置",
|
||||||
|
"font_class": "shezhi",
|
||||||
|
"unicode": "e892",
|
||||||
|
"unicode_decimal": 59538
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "2418274",
|
||||||
|
"name": "右箭头",
|
||||||
|
"font_class": "youjiantou",
|
||||||
|
"unicode": "e678",
|
||||||
|
"unicode_decimal": 59000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "8605730",
|
||||||
|
"name": "客服",
|
||||||
|
"font_class": "kefu",
|
||||||
|
"unicode": "e665",
|
||||||
|
"unicode_decimal": 58981
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "15838431",
|
||||||
|
"name": "arrow-right",
|
||||||
|
"font_class": "arrow-right",
|
||||||
|
"unicode": "e666",
|
||||||
|
"unicode_decimal": 58982
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "16615922",
|
||||||
|
"name": "left",
|
||||||
|
"font_class": "left",
|
||||||
|
"unicode": "e684",
|
||||||
|
"unicode_decimal": 59012
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "12532655",
|
||||||
|
"name": "X",
|
||||||
|
"font_class": "X",
|
||||||
|
"unicode": "e607",
|
||||||
|
"unicode_decimal": 58887
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "3043971",
|
||||||
|
"name": "search",
|
||||||
|
"font_class": "search",
|
||||||
|
"unicode": "e676",
|
||||||
|
"unicode_decimal": 58998
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5478607",
|
||||||
|
"name": "home",
|
||||||
|
"font_class": "home1",
|
||||||
|
"unicode": "e92d",
|
||||||
|
"unicode_decimal": 59693
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "10714378",
|
||||||
|
"name": "置顶 top",
|
||||||
|
"font_class": "zhidingtop",
|
||||||
|
"unicode": "e62d",
|
||||||
|
"unicode_decimal": 58925
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5387577",
|
||||||
|
"name": "箭头_切换右",
|
||||||
|
"font_class": "jiantou_qiehuanyou",
|
||||||
|
"unicode": "eb05",
|
||||||
|
"unicode_decimal": 60165
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "1049988",
|
||||||
|
"name": "Navi_购买",
|
||||||
|
"font_class": "navigoumai",
|
||||||
|
"unicode": "e62a",
|
||||||
|
"unicode_decimal": 58922
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "20697134",
|
||||||
|
"name": "客服",
|
||||||
|
"font_class": "kefu1",
|
||||||
|
"unicode": "e60d",
|
||||||
|
"unicode_decimal": 58893
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "29486582",
|
||||||
|
"name": "设置",
|
||||||
|
"font_class": "shezhi1",
|
||||||
|
"unicode": "e7f8",
|
||||||
|
"unicode_decimal": 59384
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "18420783",
|
||||||
|
"name": "时间",
|
||||||
|
"font_class": "shijian",
|
||||||
|
"unicode": "e64f",
|
||||||
|
"unicode_decimal": 58959
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "372908",
|
||||||
|
"name": "cc-left",
|
||||||
|
"font_class": "cc-left",
|
||||||
|
"unicode": "e6c2",
|
||||||
|
"unicode_decimal": 59074
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "808099",
|
||||||
|
"name": "电话",
|
||||||
|
"font_class": "unie601",
|
||||||
|
"unicode": "e61c",
|
||||||
|
"unicode_decimal": 58908
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "10069735",
|
||||||
|
"name": "邮件",
|
||||||
|
"font_class": "youjian",
|
||||||
|
"unicode": "e672",
|
||||||
|
"unicode_decimal": 58994
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "4942663",
|
||||||
|
"name": "搜索",
|
||||||
|
"font_class": "sousuo",
|
||||||
|
"unicode": "e61f",
|
||||||
|
"unicode_decimal": 58911
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "2432195",
|
||||||
|
"name": "电子邮箱",
|
||||||
|
"font_class": "dianziyouxiang",
|
||||||
|
"unicode": "e60c",
|
||||||
|
"unicode_decimal": 58892
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "4251738",
|
||||||
|
"name": "客户",
|
||||||
|
"font_class": "kehu",
|
||||||
|
"unicode": "e645",
|
||||||
|
"unicode_decimal": 58949
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "31313001",
|
||||||
|
"name": "服务",
|
||||||
|
"font_class": "fuwu",
|
||||||
|
"unicode": "e61b",
|
||||||
|
"unicode_decimal": 58907
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "22502574",
|
||||||
|
"name": "工厂",
|
||||||
|
"font_class": "gongchang",
|
||||||
|
"unicode": "e649",
|
||||||
|
"unicode_decimal": 58953
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "749761",
|
||||||
|
"name": "购买",
|
||||||
|
"font_class": "goumai",
|
||||||
|
"unicode": "e603",
|
||||||
|
"unicode_decimal": 58883
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "9978437",
|
||||||
|
"name": "谷歌商店",
|
||||||
|
"font_class": "zu",
|
||||||
|
"unicode": "e644",
|
||||||
|
"unicode_decimal": 58948
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "14055532",
|
||||||
|
"name": "安卓",
|
||||||
|
"font_class": "anzhuo",
|
||||||
|
"unicode": "e60b",
|
||||||
|
"unicode_decimal": 58891
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "29665113",
|
||||||
|
"name": "苹果_apple",
|
||||||
|
"font_class": "pingguo_apple",
|
||||||
|
"unicode": "e7f2",
|
||||||
|
"unicode_decimal": 59378
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "356446",
|
||||||
|
"name": "减号",
|
||||||
|
"font_class": "jianhao",
|
||||||
|
"unicode": "e614",
|
||||||
|
"unicode_decimal": 58900
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "592049",
|
||||||
|
"name": "菜单",
|
||||||
|
"font_class": "caidan",
|
||||||
|
"unicode": "e790",
|
||||||
|
"unicode_decimal": 59280
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "10933908",
|
||||||
|
"name": "返回",
|
||||||
|
"font_class": "fanhui",
|
||||||
|
"unicode": "e60e",
|
||||||
|
"unicode_decimal": 58894
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "118807",
|
||||||
|
"name": "apple",
|
||||||
|
"font_class": "fisocialapple",
|
||||||
|
"unicode": "e76f",
|
||||||
|
"unicode_decimal": 59247
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "2583881",
|
||||||
|
"name": "叉叉",
|
||||||
|
"font_class": "chacha",
|
||||||
|
"unicode": "e62f",
|
||||||
|
"unicode_decimal": 58927
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "1471615",
|
||||||
|
"name": "home",
|
||||||
|
"font_class": "home",
|
||||||
|
"unicode": "e62b",
|
||||||
|
"unicode_decimal": 58923
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "3471676",
|
||||||
|
"name": "价值观",
|
||||||
|
"font_class": "jiazhiguan",
|
||||||
|
"unicode": "e646",
|
||||||
|
"unicode_decimal": 58950
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "11834362",
|
||||||
|
"name": "人才理念 (1)",
|
||||||
|
"font_class": "rencailinian",
|
||||||
|
"unicode": "e667",
|
||||||
|
"unicode_decimal": 58983
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "27987745",
|
||||||
|
"name": "msgw_icon_使命",
|
||||||
|
"font_class": "msgw_icon_shiming",
|
||||||
|
"unicode": "e60f",
|
||||||
|
"unicode_decimal": 58895
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "33575992",
|
||||||
|
"name": "企业愿景",
|
||||||
|
"font_class": "qiyeyuanjing",
|
||||||
|
"unicode": "e671",
|
||||||
|
"unicode_decimal": 58993
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5199424",
|
||||||
|
"name": "下箭头",
|
||||||
|
"font_class": "xiajiantou",
|
||||||
|
"unicode": "e610",
|
||||||
|
"unicode_decimal": 58896
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "10515590",
|
||||||
|
"name": "上箭头",
|
||||||
|
"font_class": "shangjiantou-copy",
|
||||||
|
"unicode": "e651",
|
||||||
|
"unicode_decimal": 58961
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "1214255",
|
||||||
|
"name": "使用手册",
|
||||||
|
"font_class": "weibiaoti1",
|
||||||
|
"unicode": "e634",
|
||||||
|
"unicode_decimal": 58932
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "12184865",
|
||||||
|
"name": "下载",
|
||||||
|
"font_class": "xiazai",
|
||||||
|
"unicode": "e682",
|
||||||
|
"unicode_decimal": 59010
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "1474435",
|
||||||
|
"name": "删除",
|
||||||
|
"font_class": "shachu-xue",
|
||||||
|
"unicode": "e638",
|
||||||
|
"unicode_decimal": 58936
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "405199",
|
||||||
|
"name": "top",
|
||||||
|
"font_class": "top",
|
||||||
|
"unicode": "e67e",
|
||||||
|
"unicode_decimal": 59006
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "741981",
|
||||||
|
"name": "择律-选择费用-正三角形-支持",
|
||||||
|
"font_class": "zelvxuanzefeiyongzhengsanjiaoxingzhichi",
|
||||||
|
"unicode": "e668",
|
||||||
|
"unicode_decimal": 58984
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "2053207",
|
||||||
|
"name": "邮件",
|
||||||
|
"font_class": "youjian1",
|
||||||
|
"unicode": "e6f5",
|
||||||
|
"unicode_decimal": 59125
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "6234497",
|
||||||
|
"name": "返回顶部",
|
||||||
|
"font_class": "fanhuidingbu",
|
||||||
|
"unicode": "e633",
|
||||||
|
"unicode_decimal": 58931
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "24327494",
|
||||||
|
"name": "暂无数据",
|
||||||
|
"font_class": "zanwushuju",
|
||||||
|
"unicode": "e608",
|
||||||
|
"unicode_decimal": 58888
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "40763706",
|
||||||
|
"name": "暂无数据",
|
||||||
|
"font_class": "zanwushuju1",
|
||||||
|
"unicode": "e618",
|
||||||
|
"unicode_decimal": 58904
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "40763707",
|
||||||
|
"name": "正在加载",
|
||||||
|
"font_class": "zhengzaijiazai",
|
||||||
|
"unicode": "e619",
|
||||||
|
"unicode_decimal": 58905
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "41151647",
|
||||||
|
"name": "价值观",
|
||||||
|
"font_class": "jiazhiguan1",
|
||||||
|
"unicode": "e621",
|
||||||
|
"unicode_decimal": 58913
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "41151648",
|
||||||
|
"name": "msgw_icon_使命-03",
|
||||||
|
"font_class": "msgw_icon_shiming-03",
|
||||||
|
"unicode": "e622",
|
||||||
|
"unicode_decimal": 58914
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "41151649",
|
||||||
|
"name": "企业愿景-04",
|
||||||
|
"font_class": "qiyeyuanjing-04",
|
||||||
|
"unicode": "e623",
|
||||||
|
"unicode_decimal": 58915
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "41151650",
|
||||||
|
"name": "人才理念 (1)-02",
|
||||||
|
"font_class": "a-rencailinian1-02",
|
||||||
|
"unicode": "e624",
|
||||||
|
"unicode_decimal": 58916
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "26661671",
|
||||||
|
"name": "完成",
|
||||||
|
"font_class": "wancheng",
|
||||||
|
"unicode": "e652",
|
||||||
|
"unicode_decimal": 58962
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -13,9 +13,18 @@ export default defineEventHandler((event: any) => {
|
||||||
else if (acceptLanguage.includes('zh')) {
|
else if (acceptLanguage.includes('zh')) {
|
||||||
detectedLang = 'cn';
|
detectedLang = 'cn';
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置到 context 供后续使用
|
// 设置到 context 供后续使用
|
||||||
event.context.locale = detectedLang;
|
event.context.locale = detectedLang;
|
||||||
|
|
||||||
// 设置响应头
|
// 设置响应头
|
||||||
setHeader(event, 'X-Detected-Language', detectedLang);
|
setHeader(event, 'X-Detected-Language', detectedLang);
|
||||||
|
|
||||||
|
// 如果是根路径且没有cookie，根据浏览器语言进行重定向
|
||||||
|
if (event.path === '/' && !cookie) {
|
||||||
|
if (acceptLanguage.includes('zh')) {
|
||||||
|
// 重定向到中文版本
|
||||||
|
return sendRedirect(event, '/cn', 302);
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
10
src/app.vue
10
src/app.vue
|
|
@ -47,6 +47,11 @@
|
||||||
hid: 'favicon',
|
hid: 'favicon',
|
||||||
rel: 'icon',
|
rel: 'icon',
|
||||||
href: '/favicon.ico'
|
href: '/favicon.ico'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
hid: 'iconfont',
|
||||||
|
rel: 'stylesheet',
|
||||||
|
href: '/static/font/iconfont.css'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
script: [{
|
script: [{
|
||||||
|
|
@ -80,9 +85,10 @@
|
||||||
|
|
||||||
// 3. 如果都没有，根据浏览器语言设置
|
// 3. 如果都没有，根据浏览器语言设置
|
||||||
if (savedLang === 'en') {
|
if (savedLang === 'en') {
|
||||||
if (navigator.language.startsWith("en")) {
|
const browserLang = navigator.language.toLowerCase();
|
||||||
|
if (browserLang.startsWith("en")) {
|
||||||
savedLang = "en";
|
savedLang = "en";
|
||||||
} else if (navigator.language.includes("zh")) {
|
} else if (browserLang.includes("zh") || browserLang.includes("cn")) {
|
||||||
savedLang = "cn";
|
savedLang = "cn";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -131,42 +131,42 @@ img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 响应式根字体大小
|
/* 响应式根字体大小 */
|
||||||
html {
|
html {
|
||||||
font-size: calc(100 * 100vw / 1920) !important;
|
font-size: calc(100 * 100vw / 1920) !important;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
/* 4K 和超大屏幕 */
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
font-size: calc(100 * 100vw / 2560) !important;
|
font-size: calc(100 * 100vw / 2560) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1920px 屏幕
|
/* 1920px 屏幕 */
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
font-size: calc(100 * 100vw / 1920) !important;
|
font-size: calc(100 * 100vw / 1920) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1440px 屏幕
|
/* 1440px 屏幕 */
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
font-size: calc(100 * 100vw / 1440) !important;
|
font-size: calc(100 * 100vw / 1440) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1024px 屏幕
|
/* 1024px 屏幕 */
|
||||||
@media (min-width: 1024px) and (max-width: 1439px) {
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
||||||
font-size: calc(100 * 100vw / 1024) !important;
|
font-size: calc(100 * 100vw / 1024) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 768px 屏幕
|
/* 768px 屏幕 */
|
||||||
@media (min-width: 768px) and (max-width: 1023px) {
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
font-size: calc(100 * 100vw / 768) !important;
|
font-size: calc(100 * 100vw / 768) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 480px 屏幕
|
/* 480px 屏幕 */
|
||||||
@media (min-width: 480px) and (max-width: 767px) {
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
font-size: calc(100 * 100vw / 480) !important;
|
font-size: calc(100 * 100vw / 480) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 375px 屏幕
|
/* 375px 屏幕 */
|
||||||
@media (max-width: 479px) {
|
@media (max-width: 479px) {
|
||||||
font-size: calc(100 * 100vw / 375) !important;
|
font-size: calc(100 * 100vw / 375) !important;
|
||||||
}
|
}
|
||||||
|
|
@ -203,12 +203,10 @@ html, body {
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: #f1f1f1;
|
background: #f1f1f1;
|
||||||
// border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: #c1c1c1;
|
background: #c1c1c1;
|
||||||
// border-radius: 4px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #a8a8a8;
|
background: #a8a8a8;
|
||||||
|
|
@ -222,7 +220,7 @@ image {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 通用布局类
|
/* 通用布局类 */
|
||||||
.define-topBar__components {
|
.define-topBar__components {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -240,85 +238,52 @@ image {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 容器类
|
// 统一容器类
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
/* 4K 和超大屏幕 */
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
max-width: 1800px;
|
max-width: 1800px;
|
||||||
padding: 0 80px;
|
padding: 0 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1920px 屏幕 */
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
max-width: 1500px;
|
max-width: 1500px;
|
||||||
padding: 0 60px;
|
padding: 0 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1440px 屏幕 */
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
max-width: 1300px;
|
max-width: 1300px;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1024px 屏幕 */
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 768px 屏幕 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 480px 屏幕 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 375px 屏幕 */
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 容器类
|
/* 动画系统 */
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 24px;
|
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
|
||||||
@media (min-width: 2560px) {
|
|
||||||
max-width: 1800px;
|
|
||||||
padding: 0 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
|
||||||
max-width: 1500px;
|
|
||||||
padding: 0 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
|
||||||
max-width: 1300px;
|
|
||||||
padding: 0 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 0 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
|
||||||
padding: 0 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 动画系统
|
|
||||||
.animationDH {
|
.animationDH {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -338,7 +303,7 @@ image {
|
||||||
-webkit-animation: 1s dh_buttom linear both;
|
-webkit-animation: 1s dh_buttom linear both;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 首页专用动画
|
/* 首页专用动画 */
|
||||||
.dhLeft {
|
.dhLeft {
|
||||||
-webkit-opacity: 0;
|
-webkit-opacity: 0;
|
||||||
transform: translate(75px, 0);
|
transform: translate(75px, 0);
|
||||||
|
|
@ -370,7 +335,7 @@ image {
|
||||||
-webkit-transition: 1s;
|
-webkit-transition: 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 动画延迟
|
/* 动画延迟 */
|
||||||
.dhyc1 {
|
.dhyc1 {
|
||||||
transition-delay: 0.25s;
|
transition-delay: 0.25s;
|
||||||
-webkit-transition-delay: 0.25s;
|
-webkit-transition-delay: 0.25s;
|
||||||
|
|
@ -391,7 +356,7 @@ image {
|
||||||
-webkit-transition-delay: 1s;
|
-webkit-transition-delay: 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 动画关键帧
|
/* 动画关键帧 */
|
||||||
@-webkit-keyframes dh_right {
|
@-webkit-keyframes dh_right {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -492,27 +457,27 @@ image {
|
||||||
animation: 1s dh_buttom linear both;
|
animation: 1s dh_buttom linear both;
|
||||||
-webkit-animation: 1s dh_buttom linear both;
|
-webkit-animation: 1s dh_buttom linear both;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-size: var(--text-5xl);
|
font-size: var(--text-5xl);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: var(--font-medium);
|
font-family: var(--font-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__subtitle {
|
&__subtitle {
|
||||||
font-size: var(--text-xl);
|
font-size: var(--text-xl);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-family: var(--font-light);
|
font-family: var(--font-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 751px) and (max-width: 1100px) {
|
@media (min-width: 751px) and (max-width: 1100px) {
|
||||||
&__title {
|
&__title {
|
||||||
font-size: var(--text-6xl);
|
font-size: var(--text-6xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__subtitle {
|
&__subtitle {
|
||||||
font-size: var(--text-3xl);
|
font-size: var(--text-3xl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 750px) {
|
@media (max-width: 750px) {
|
||||||
|
|
@ -623,11 +588,11 @@ image {
|
||||||
&__item {
|
&__item {
|
||||||
margin: 0 1rem;
|
margin: 0 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0.1rem 0;
|
padding: 0.1rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: var(--text-lg);
|
font-size: var(--text-lg);
|
||||||
font-family: var(--font-normal);
|
font-family: var(--font-normal);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@media (max-width: 1600px) {
|
@media (max-width: 1600px) {
|
||||||
font-size: 15.5px;
|
font-size: 15.5px;
|
||||||
|
|
@ -681,7 +646,7 @@ image {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 粘性导航栏样式
|
/* 粘性导航栏样式 */
|
||||||
.sticky-page-layout {
|
.sticky-page-layout {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
@ -720,7 +685,7 @@ image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&__center {
|
&__center {
|
||||||
width: 9.8rem;
|
width: 1200px;
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -825,7 +790,7 @@ image {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 产品详情页banner
|
/* 产品详情页banner */
|
||||||
.detail-banner {
|
.detail-banner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 10.8rem;
|
height: 10.8rem;
|
||||||
|
|
@ -911,7 +876,7 @@ image {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 产品、新闻用的loading
|
/* 产品、新闻用的loading */
|
||||||
.load-loading {
|
.load-loading {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -961,7 +926,7 @@ image {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 动画样式
|
/* 动画样式 */
|
||||||
@mixin isAnimatingStyle {
|
@mixin isAnimatingStyle {
|
||||||
transform: translateY(11.71rpx);
|
transform: translateY(11.71rpx);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -971,7 +936,7 @@ image {
|
||||||
@include isAnimatingStyle;
|
@include isAnimatingStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 字体工具类
|
/* 字体工具类 */
|
||||||
.font-light { font-family: var(--font-light); }
|
.font-light { font-family: var(--font-light); }
|
||||||
.font-normal { font-family: var(--font-normal); }
|
.font-normal { font-family: var(--font-normal); }
|
||||||
.font-regular { font-family: var(--font-regular); }
|
.font-regular { font-family: var(--font-regular); }
|
||||||
|
|
@ -979,7 +944,7 @@ image {
|
||||||
.font-semibold { font-family: var(--font-semibold); }
|
.font-semibold { font-family: var(--font-semibold); }
|
||||||
.font-bold { font-family: var(--font-bold); }
|
.font-bold { font-family: var(--font-bold); }
|
||||||
|
|
||||||
// 文本大小工具类
|
/* 文本大小工具类 */
|
||||||
.text-xs { font-size: var(--text-xs); }
|
.text-xs { font-size: var(--text-xs); }
|
||||||
.text-sm { font-size: var(--text-sm); }
|
.text-sm { font-size: var(--text-sm); }
|
||||||
.text-base { font-size: var(--text-base); }
|
.text-base { font-size: var(--text-base); }
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,8 @@
|
||||||
import { ref, reactive, onUnmounted, onMounted } from "vue";
|
import { ref, reactive, onUnmounted, onMounted } from "vue";
|
||||||
import { useI18n } from "#imports";
|
import { useI18n } from "#imports";
|
||||||
import { GetMessageApi } from "@/service/api.js";
|
import { GetMessageApi } from "@/service/api.js";
|
||||||
import { useRouter, useRoute } from "#imports";
|
import { useRoute } from "#imports";
|
||||||
|
import { useNavigation } from "@/composables/useNavigation.js";
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
import { GetProductCategoryApi } from "~/service/api.js";
|
import { GetProductCategoryApi } from "~/service/api.js";
|
||||||
//商品与新闻状态
|
//商品与新闻状态
|
||||||
|
|
@ -10,8 +11,8 @@ import useSheller from "~/stores/seller.js";
|
||||||
// 语言判断
|
// 语言判断
|
||||||
import langToCheck from "~/hook/lang.js";
|
import langToCheck from "~/hook/lang.js";
|
||||||
const langIs = ref(langToCheck());
|
const langIs = ref(langToCheck());
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const { navigateTo } = useNavigation();
|
||||||
//页面跳转事件
|
//页面跳转事件
|
||||||
const Store = useSheller();
|
const Store = useSheller();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -27,51 +28,30 @@ const subRouteEvent = (subParmas, item) => {
|
||||||
switch (secondaryRoute) {
|
switch (secondaryRoute) {
|
||||||
case "Power Station": {
|
case "Power Station": {
|
||||||
Store.clickTab = 0;
|
Store.clickTab = 0;
|
||||||
router.push({
|
navigateTo("product", { query: { CategoryId: 0 } });
|
||||||
name: "product",
|
|
||||||
query: {
|
|
||||||
CategoryId: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case "Solar Panel": {
|
case "Solar Panel": {
|
||||||
Store.clickTab = 1;
|
Store.clickTab = 1;
|
||||||
router.push({
|
navigateTo("product", { query: { CategoryId: 1 } });
|
||||||
name: "product",
|
|
||||||
query: {
|
|
||||||
CategoryId: 1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case "Accessory": {
|
case "Accessory": {
|
||||||
Store.clickTab = 2;
|
Store.clickTab = 2;
|
||||||
router.push({
|
navigateTo("product", { query: { CategoryId: 2 } });
|
||||||
name: "product",
|
|
||||||
query: {
|
|
||||||
CategoryId: 2,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case "About Us": {
|
case "About Us": {
|
||||||
router.push({
|
navigateTo("about-us");
|
||||||
name: "about-us",
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case "Contact": {
|
case "Contact": {
|
||||||
router.push({
|
navigateTo("contact-us");
|
||||||
name: "contact-us",
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
default: {
|
default: {
|
||||||
// 产品分类跳转到首页对应分类
|
// 产品分类跳转到首页对应分类
|
||||||
router.push({
|
navigateTo("home");
|
||||||
name: "home",
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -163,9 +143,7 @@ const GoAgreement = (value) => {
|
||||||
}
|
}
|
||||||
case 4: {
|
case 4: {
|
||||||
//网站隐私协议
|
//网站隐私协议
|
||||||
router.push({
|
navigateTo("privacy-policy");
|
||||||
name: "privacy-policy",
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 5: {
|
case 5: {
|
||||||
|
|
@ -194,9 +172,7 @@ const TransitTap = (symbolName) => {
|
||||||
|
|
||||||
// 接口
|
// 接口
|
||||||
const goTab = (path) => {
|
const goTab = (path) => {
|
||||||
router.push({
|
navigateTo(path);
|
||||||
name: path,
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -312,13 +288,13 @@ $form-theme-color: #2164ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
max-width: 1500px;
|
max-width: 1200px;
|
||||||
padding: 35px 50px 25px;
|
padding: 35px 50px 25px;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
max-width: 1300px;
|
max-width: 1200px;
|
||||||
padding: 30px 40px 20px;
|
padding: 30px 40px 20px;
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
}
|
}
|
||||||
|
|
@ -358,12 +334,12 @@ $form-theme-color: #2164ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
max-width: 1500px;
|
max-width: 1200px;
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
max-width: 1300px;
|
max-width: 1200px;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -583,37 +559,43 @@ $form-theme-color: #2164ff;
|
||||||
gap: 25px;
|
gap: 25px;
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
/* 4K 和超大屏幕 */
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
gap: 40px;
|
gap: 40px;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1920px 屏幕 */
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
gap: 35px;
|
gap: 35px;
|
||||||
margin-left: 45px;
|
margin-left: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1440px 屏幕 */
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1024px 屏幕 */
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 768px 屏幕 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 480px 屏幕 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 375px 屏幕 */
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -858,12 +840,12 @@ $form-theme-color: #2164ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
max-width: 1500px;
|
max-width: 1300px;
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
max-width: 1300px;
|
max-width: 1200px;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,12 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, computed, nextTick, watch } from "vue";
|
import { ref, reactive, onMounted, computed, nextTick, watch } from "vue";
|
||||||
import { useI18n } from "#imports";
|
import { useI18n } from "#imports";
|
||||||
import { useRouter, useRoute } from "#imports";
|
import { useRoute } from "#imports";
|
||||||
import { useLocalePath, useSwitchLocalePath } from "#i18n";
|
import { useNavigation } from "@/composables/useNavigation.js";
|
||||||
|
|
||||||
const { locale, t } = useI18n();
|
const { locale, t } = useI18n();
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const localePath = useLocalePath();
|
const { navigateTo, switchLanguage, localePath } = useNavigation();
|
||||||
const switchLocalePath = useSwitchLocalePath();
|
|
||||||
|
|
||||||
// 语言显示
|
// 语言显示
|
||||||
const langToShow = computed(() => {
|
const langToShow = computed(() => {
|
||||||
|
|
@ -87,20 +85,16 @@ const chooseLanguage = (lang) => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取目标路径并跳转
|
// 使用统一的语言切换方法
|
||||||
const targetPath = switchLocalePath(lang.code);
|
switchLanguage(lang.code);
|
||||||
router.replace(targetPath);
|
|
||||||
|
|
||||||
langPopup.value = false;
|
langPopup.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 菜单点击
|
// 菜单点击
|
||||||
const handleMenuClick = (item) => {
|
const handleMenuClick = (item) => {
|
||||||
// 使用 localePath 获取当前语言环境下的正确路径
|
// 使用统一的导航方法
|
||||||
const targetPath = localePath(item.path);
|
navigateTo(item.path);
|
||||||
|
|
||||||
// 跳转到正确的路径
|
|
||||||
router.push(targetPath);
|
|
||||||
isMobileMenuOpen.value = false;
|
isMobileMenuOpen.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -143,9 +137,8 @@ const toggleMobileMenu = () => {
|
||||||
|
|
||||||
// 处理logo点击
|
// 处理logo点击
|
||||||
const handleLogoClick = () => {
|
const handleLogoClick = () => {
|
||||||
// 使用 localePath 获取当前语言环境下的首页路径
|
// 使用统一的导航方法跳转到首页
|
||||||
const homePath = localePath("/");
|
navigateTo("/");
|
||||||
router.push(homePath);
|
|
||||||
menuItems.value.forEach((menu) => {
|
menuItems.value.forEach((menu) => {
|
||||||
menu.active = menu.enName === "home";
|
menu.active = menu.enName === "home";
|
||||||
});
|
});
|
||||||
|
|
@ -300,20 +293,54 @@ watch(
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
&-container {
|
&-container {
|
||||||
max-width: 1400px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 40px;
|
padding: 0 20px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
gap: 60px;
|
gap: 60px;
|
||||||
|
|
||||||
|
/* 4K 和超大屏幕 */
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1800px;
|
||||||
|
padding: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1920px 屏幕 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1440px 屏幕 */
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1024px 屏幕 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 768px 屏幕 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 480px 屏幕 */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 375px 屏幕 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-logo {
|
&-logo {
|
||||||
|
|
@ -623,7 +650,7 @@ watch(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 响应式调整
|
/* 响应式调整 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.navbar {
|
.navbar {
|
||||||
&-container {
|
&-container {
|
||||||
|
|
|
||||||
|
|
@ -35,9 +35,10 @@ export const useLanguageDetection = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 4. 检查浏览器语言（与服务器中间件保持一致）
|
// 4. 检查浏览器语言（与服务器中间件保持一致）
|
||||||
if (navigator.language.startsWith("en")) {
|
const browserLang = navigator.language.toLowerCase();
|
||||||
|
if (browserLang.startsWith("en")) {
|
||||||
return "en";
|
return "en";
|
||||||
} else if (navigator.language.includes("zh")) {
|
} else if (browserLang.includes("zh") || browserLang.includes("cn")) {
|
||||||
return "cn";
|
return "cn";
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
import { useRouter } from '#imports'
|
||||||
|
import { useLocalePath, useSwitchLocalePath } from '#i18n'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 统一的导航跳转 composable
|
||||||
|
* 处理国际化路由跳转，确保在不同语言环境下都能正确跳转
|
||||||
|
*/
|
||||||
|
export const useNavigation = () => {
|
||||||
|
const router = useRouter()
|
||||||
|
const localePath = useLocalePath()
|
||||||
|
const switchLocalePath = useSwitchLocalePath()
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 统一的路由跳转方法
|
||||||
|
* @param {string|object} target - 目标路径或路由对象
|
||||||
|
* @param {object} options - 跳转选项
|
||||||
|
*/
|
||||||
|
const navigateTo = (target, options = {}) => {
|
||||||
|
const { replace = false, query = {} } = options
|
||||||
|
|
||||||
|
// 如果传入的是字符串路径
|
||||||
|
if (typeof target === 'string') {
|
||||||
|
const targetPath = localePath(target)
|
||||||
|
if (replace) {
|
||||||
|
router.replace({ path: targetPath, query })
|
||||||
|
} else {
|
||||||
|
router.push({ path: targetPath, query })
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果传入的是路由名称对象
|
||||||
|
if (target.name) {
|
||||||
|
const targetPath = localePath(target.name)
|
||||||
|
if (replace) {
|
||||||
|
router.replace({ path: targetPath, query: { ...target.query, ...query } })
|
||||||
|
} else {
|
||||||
|
router.push({ path: targetPath, query: { ...target.query, ...query } })
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果传入的是完整路径对象
|
||||||
|
if (target.path) {
|
||||||
|
const targetPath = localePath(target.path)
|
||||||
|
if (replace) {
|
||||||
|
router.replace({ path: targetPath, query: { ...target.query, ...query } })
|
||||||
|
} else {
|
||||||
|
router.push({ path: targetPath, query: { ...target.query, ...query } })
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认处理
|
||||||
|
if (replace) {
|
||||||
|
router.replace(target)
|
||||||
|
} else {
|
||||||
|
router.push(target)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到首页
|
||||||
|
*/
|
||||||
|
const goHome = (options = {}) => {
|
||||||
|
navigateTo('/', options)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到关于我们页面
|
||||||
|
*/
|
||||||
|
const goAbout = (options = {}) => {
|
||||||
|
navigateTo('/about-us', options)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到产品页面
|
||||||
|
*/
|
||||||
|
const goProduct = (category = null, options = {}) => {
|
||||||
|
const query = category ? { category, ...options.query } : options.query
|
||||||
|
navigateTo('/product', { ...options, query })
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到产品页面（查看更多）
|
||||||
|
*/
|
||||||
|
const goToProductPage = (options = {}) => {
|
||||||
|
navigateTo('/product', options)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到联系我们页面
|
||||||
|
*/
|
||||||
|
const goContact = (options = {}) => {
|
||||||
|
navigateTo('/contact-us', options)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到隐私政策页面
|
||||||
|
*/
|
||||||
|
const goPrivacyPolicy = (options = {}) => {
|
||||||
|
navigateTo('/privacy-policy', options)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到产品详情页面
|
||||||
|
*/
|
||||||
|
const goProductDetail = (productId, options = {}) => {
|
||||||
|
navigateTo('/product/detail', {
|
||||||
|
...options,
|
||||||
|
query: { id: productId, ...options.query }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 语言切换跳转
|
||||||
|
* @param {string} locale - 目标语言代码
|
||||||
|
*/
|
||||||
|
const switchLanguage = (locale) => {
|
||||||
|
const targetPath = switchLocalePath(locale)
|
||||||
|
router.replace(targetPath)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前语言环境下的路径
|
||||||
|
* @param {string} path - 路径
|
||||||
|
* @returns {string} 当前语言环境下的完整路径
|
||||||
|
*/
|
||||||
|
const getLocalizedPath = (path) => {
|
||||||
|
return localePath(path)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
navigateTo,
|
||||||
|
goHome,
|
||||||
|
goAbout,
|
||||||
|
goProduct,
|
||||||
|
goToProductPage,
|
||||||
|
goContact,
|
||||||
|
goPrivacyPolicy,
|
||||||
|
goProductDetail,
|
||||||
|
switchLanguage,
|
||||||
|
getLocalizedPath,
|
||||||
|
localePath,
|
||||||
|
switchLocalePath
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -26,9 +26,10 @@ export default function getLanguage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. 根据浏览器语言判断
|
// 3. 根据浏览器语言判断
|
||||||
if (navigator.language.startsWith("en")) {
|
const browserLang = navigator.language.toLowerCase();
|
||||||
|
if (browserLang.startsWith("en")) {
|
||||||
return "en";
|
return "en";
|
||||||
} else if (navigator.language.includes("zh")) {
|
} else if (browserLang.includes("zh") || browserLang.includes("cn")) {
|
||||||
return "cn";
|
return "cn";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -407,7 +407,7 @@
|
||||||
"about.intro.feature1": "15年制造经验",
|
"about.intro.feature1": "15年制造经验",
|
||||||
"about.intro.feature2": "专注摄像头与照明",
|
"about.intro.feature2": "专注摄像头与照明",
|
||||||
"about.intro.feature3": "600多人的员工团队",
|
"about.intro.feature3": "600多人的员工团队",
|
||||||
"about.intro.watch": "观看介绍",
|
|
||||||
"about.intro.award.title": "行业认可",
|
"about.intro.award.title": "行业认可",
|
||||||
"about.intro.award.desc": "荣获多项国际认证与行业奖项",
|
"about.intro.award.desc": "荣获多项国际认证与行业奖项",
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -406,7 +406,7 @@
|
||||||
"about.intro.feature1": "15 Years Manufacturing Experience",
|
"about.intro.feature1": "15 Years Manufacturing Experience",
|
||||||
"about.intro.feature2": "Focus on Cameras & Lighting",
|
"about.intro.feature2": "Focus on Cameras & Lighting",
|
||||||
"about.intro.feature3": "600+ Employee Team",
|
"about.intro.feature3": "600+ Employee Team",
|
||||||
"about.intro.watch": "Watch Introduction",
|
|
||||||
"about.intro.award.title": "Industry Recognition",
|
"about.intro.award.title": "Industry Recognition",
|
||||||
"about.intro.award.desc": "Awarded multiple international certifications and industry awards",
|
"about.intro.award.desc": "Awarded multiple international certifications and industry awards",
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,15 +1,15 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import topBar from "@/components/top/title-bar.vue";
|
import topBar from "@/components/top/title-bar.vue";
|
||||||
import footBar from "@/components/bottom/foot-bar.vue";
|
import footBar from "@/components/bottom/foot-bar.vue";
|
||||||
import { useRouter } from "#imports";
|
|
||||||
import { useI18n } from "#imports";
|
import { useI18n } from "#imports";
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import { usePageTitle } from "@/composables/usePageTitle.js";
|
import { usePageTitle } from "@/composables/usePageTitle.js";
|
||||||
import { useImagePath } from "@/composables/useImagePath.js";
|
import { useImagePath } from "@/composables/useImagePath.js";
|
||||||
|
import { useNavigation } from "@/composables/useNavigation.js";
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { cdnImageUrl } = useImagePath();
|
const { cdnImageUrl } = useImagePath();
|
||||||
|
const { navigateTo } = useNavigation();
|
||||||
|
|
||||||
// 设置页面标题
|
// 设置页面标题
|
||||||
usePageTitle("page.contact-us");
|
usePageTitle("page.contact-us");
|
||||||
|
|
@ -21,9 +21,7 @@ const bannerStyle = computed(() => ({
|
||||||
|
|
||||||
// 路由跳转
|
// 路由跳转
|
||||||
const goTab = (path) => {
|
const goTab = (path) => {
|
||||||
router.push({
|
navigateTo(path);
|
||||||
name: path,
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -88,44 +86,7 @@ const goTab = (path) => {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 容器 */
|
/* 联系我们页面容器样式继承通用容器 */
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
|
||||||
@media (min-width: 2560px) {
|
|
||||||
max-width: 1800px;
|
|
||||||
padding: 0 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
|
||||||
max-width: 1500px;
|
|
||||||
padding: 0 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
|
||||||
max-width: 1300px;
|
|
||||||
padding: 0 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 0 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
padding: 0 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Banner 样式 */
|
/* Banner 样式 */
|
||||||
.banner {
|
.banner {
|
||||||
|
|
@ -137,37 +98,43 @@ const goTab = (path) => {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
/* 4K 和超大屏幕 */
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
padding: 100px 0;
|
padding: 100px 0;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1920px 屏幕 */
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
padding: 80px 0;
|
padding: 80px 0;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1440px 屏幕 */
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
padding: 70px 0;
|
padding: 70px 0;
|
||||||
height: 450px;
|
height: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1024px 屏幕 */
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
padding: 60px 0;
|
padding: 60px 0;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 768px 屏幕 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
padding: 50px 0;
|
padding: 50px 0;
|
||||||
height: 350px;
|
height: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 480px 屏幕 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
padding: 40px 0;
|
padding: 40px 0;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 375px 屏幕 */
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
padding: 35px 0;
|
padding: 35px 0;
|
||||||
height: 280px;
|
height: 280px;
|
||||||
|
|
@ -194,44 +161,50 @@ const goTab = (path) => {
|
||||||
font-family: var(--font-light);
|
font-family: var(--font-light);
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
/* 4K 和超大屏幕 */
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
font-size: 56px;
|
font-size: 56px;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
/* 1920px 屏幕 */
|
||||||
font-size: 48px;
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
letter-spacing: 1.5px;
|
font-size: 48px;
|
||||||
}
|
letter-spacing: 1.5px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
/* 1440px 屏幕 */
|
||||||
font-size: 40px;
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
margin-bottom: 20px;
|
font-size: 40px;
|
||||||
}
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
/* 1024px 屏幕 */
|
||||||
font-size: 36px;
|
@media (max-width: 1024px) {
|
||||||
margin-bottom: 18px;
|
font-size: 36px;
|
||||||
}
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
/* 768px 屏幕 */
|
||||||
font-size: 32px;
|
@media (max-width: 768px) {
|
||||||
margin-bottom: 15px;
|
font-size: 32px;
|
||||||
}
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
/* 480px 屏幕 */
|
||||||
font-size: 28px;
|
@media (max-width: 480px) {
|
||||||
margin-bottom: 12px;
|
font-size: 28px;
|
||||||
letter-spacing: 0.5px;
|
margin-bottom: 12px;
|
||||||
}
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
/* 375px 屏幕 */
|
||||||
font-size: 24px;
|
@media (max-width: 375px) {
|
||||||
margin-bottom: 10px;
|
font-size: 24px;
|
||||||
letter-spacing: 0;
|
margin-bottom: 10px;
|
||||||
}
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-subtitle {
|
.banner-subtitle {
|
||||||
|
|
@ -270,6 +243,38 @@ const goTab = (path) => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1800px;
|
||||||
|
padding: 0 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-link {
|
.breadcrumb-link {
|
||||||
|
|
@ -305,6 +310,44 @@ const goTab = (path) => {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
padding: 60px 0 80px;
|
padding: 60px 0 80px;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1800px;
|
||||||
|
padding: 0 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
// 4K 和超大屏幕
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
padding: 120px 0 140px;
|
padding: 120px 0 140px;
|
||||||
|
|
@ -345,40 +388,46 @@ const goTab = (path) => {
|
||||||
font-family: var(--font-light);
|
font-family: var(--font-light);
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
/* 4K 和超大屏幕 */
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
font-size: 28px !important;
|
font-size: 28px !important;
|
||||||
margin-bottom: 80px;
|
margin-bottom: 80px;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1920px 屏幕 */
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
font-size: 24px !important;
|
font-size: 24px !important;
|
||||||
margin-bottom: 70px;
|
margin-bottom: 70px;
|
||||||
letter-spacing: 0.8px;
|
letter-spacing: 0.8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1440px 屏幕 */
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
font-size: 20px !important;
|
font-size: 20px !important;
|
||||||
margin-bottom: 60px;
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1024px 屏幕 */
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 768px 屏幕 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 480px 屏幕 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
font-size: 15px !important;
|
font-size: 15px !important;
|
||||||
margin-bottom: 35px;
|
margin-bottom: 35px;
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0.3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 375px 屏幕 */
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
@ -464,6 +513,6 @@ const goTab = (path) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式已在各个组件中处理 */
|
/* 响应式适配已完成 */
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -274,12 +274,12 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
max-width: 1400px;
|
max-width: 1250px;
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
max-width: 1200px;
|
max-width: 1250px;
|
||||||
padding: 0 30px;
|
padding: 0 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -229,10 +229,10 @@
|
||||||
$tone-color: #fff; //字体主色调
|
$tone-color: #fff; //字体主色调
|
||||||
|
|
||||||
@mixin detailWidth {
|
@mixin detailWidth {
|
||||||
width: 9.8rem;
|
width: 1200px;
|
||||||
|
|
||||||
@media (max-width: 1600px) {
|
@media (max-width: 1600px) {
|
||||||
width: 750px;
|
width: 1200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
@media (max-width: 1000px) {
|
||||||
|
|
|
||||||
|
|
@ -9,17 +9,17 @@ computed
|
||||||
import topBar from "@/components/top/title-bar.vue"
|
import topBar from "@/components/top/title-bar.vue"
|
||||||
import footBar from "@/components/bottom/foot-bar.vue";
|
import footBar from "@/components/bottom/foot-bar.vue";
|
||||||
import {
|
import {
|
||||||
useRouter,
|
|
||||||
useRoute
|
useRoute
|
||||||
} from '#imports';
|
} from '#imports';
|
||||||
import { useI18n } from "#imports";
|
import { useI18n } from "#imports";
|
||||||
import { usePageTitle } from "@/composables/usePageTitle.js";
|
import { usePageTitle } from "@/composables/usePageTitle.js";
|
||||||
import { useImagePath } from "@/composables/useImagePath.js";
|
import { useImagePath } from "@/composables/useImagePath.js";
|
||||||
|
import { useNavigation } from "@/composables/useNavigation.js";
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { cdnImageUrl } = useImagePath();
|
const { cdnImageUrl } = useImagePath();
|
||||||
|
const { navigateTo } = useNavigation();
|
||||||
|
|
||||||
// 设置页面标题
|
// 设置页面标题
|
||||||
usePageTitle("page.product");
|
usePageTitle("page.product");
|
||||||
|
|
@ -448,6 +448,44 @@ onActivated(() => {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
|
||||||
|
/* 4K 和超大屏幕 */
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1800px;
|
||||||
|
padding: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1920px 屏幕 */
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1440px 屏幕 */
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1024px 屏幕 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 768px 屏幕 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 480px 屏幕 */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 375px 屏幕 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-item {
|
.breadcrumb-item {
|
||||||
|
|
@ -475,86 +513,97 @@ onActivated(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
|
||||||
@media (min-width: 2560px) {
|
|
||||||
max-width: 1800px;
|
|
||||||
padding: 40px 60px;
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
.main-content {
|
||||||
max-width: 1400px;
|
.container {
|
||||||
padding: 30px 40px;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
padding: 25px 30px;
|
margin: 0 auto;
|
||||||
gap: 25px;
|
padding: 20px;
|
||||||
}
|
display: flex;
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 20px 24px;
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
/* 4K 和超大屏幕 */
|
||||||
flex-direction: column;
|
@media (min-width: 2560px) {
|
||||||
padding: 15px 20px;
|
max-width: 1800px;
|
||||||
gap: 20px;
|
padding: 40px 60px;
|
||||||
}
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
/* 1920px 屏幕 */
|
||||||
padding: 12px 16px;
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
gap: 16px;
|
max-width: 1200px;
|
||||||
}
|
padding: 30px 50px;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
/* 1440px 屏幕 */
|
||||||
padding: 10px 12px;
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
gap: 12px;
|
max-width: 1200px;
|
||||||
|
padding: 25px 40px;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1024px 屏幕 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 20px 30px;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 15px 20px;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 12px 16px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 10px 12px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 260px;
|
width: 240px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
/* 4K 和超大屏幕 */
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
width: 380px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1920px 屏幕 */
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
width: 330px;
|
width: 260px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1440px 屏幕 */
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
width: 240px;
|
width: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 1024px 屏幕 */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 768px 屏幕 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 480px 屏幕 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 375px 屏幕 */
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
@ -752,51 +801,57 @@ onActivated(() => {
|
||||||
|
|
||||||
.product-grid {
|
.product-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 20px;
|
gap: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
// 4K 和超大屏幕
|
/* 4K 和超大屏幕 */
|
||||||
@media (min-width: 2560px) {
|
@media (min-width: 2560px) {
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
/* 1920px 屏幕 */
|
||||||
grid-template-columns: repeat(4, 1fr);
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
gap: 25px;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
margin-bottom: 40px;
|
gap: 25px;
|
||||||
}
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
/* 1440px 屏幕 */
|
||||||
grid-template-columns: repeat(3, 1fr);
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
gap: 22px;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
margin-bottom: 35px;
|
gap: 22px;
|
||||||
}
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
/* 1024px 屏幕 */
|
||||||
grid-template-columns: repeat(2, 1fr);
|
@media (max-width: 1024px) {
|
||||||
gap: 18px;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
margin-bottom: 25px;
|
gap: 18px;
|
||||||
}
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
/* 768px 屏幕 */
|
||||||
grid-template-columns: repeat(2, 1fr);
|
@media (max-width: 768px) {
|
||||||
gap: 16px;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
margin-bottom: 20px;
|
gap: 16px;
|
||||||
}
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
/* 480px 屏幕 */
|
||||||
grid-template-columns: 1fr;
|
@media (max-width: 480px) {
|
||||||
gap: 16px;
|
grid-template-columns: 1fr;
|
||||||
margin-bottom: 20px;
|
gap: 16px;
|
||||||
}
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
/* 375px 屏幕 */
|
||||||
gap: 12px;
|
@media (max-width: 375px) {
|
||||||
margin-bottom: 16px;
|
gap: 12px;
|
||||||
}
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.product-card {
|
.product-card {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -837,7 +892,7 @@ onActivated(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-info {
|
.product-info {
|
||||||
padding: 18px;
|
padding: 20px;
|
||||||
|
|
||||||
.product-name {
|
.product-name {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -1040,9 +1095,7 @@ onActivated(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 响应式设计已在上面的具体组件中处理
|
/* 弹框响应式适配 */
|
||||||
|
|
||||||
// 弹框响应式
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.modal-content {
|
.modal-content {
|
||||||
.modal-body {
|
.modal-body {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,622 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
.scroll-height {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
width: 100vw;
|
||||||
|
height: 5rem;
|
||||||
|
background: url("/static/product/goods__banner.webp") center center/cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner__box {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
height: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #ffffff;
|
||||||
|
/* 1300px以下屏幕适配 */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1900px) {
|
||||||
|
.menu {
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1300px) {
|
||||||
|
.menu {
|
||||||
|
height: 0.78rem;
|
||||||
|
padding: 0 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1300px) {
|
||||||
|
.menu__container {
|
||||||
|
width: 15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 599px) {
|
||||||
|
.menu__container {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__left {
|
||||||
|
width: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__box {
|
||||||
|
display: flex;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
flex-basis: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__box__list {
|
||||||
|
height: auto;
|
||||||
|
padding: 0.12rem 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__box__list li {
|
||||||
|
padding: 0 .3rem;
|
||||||
|
height: auto;
|
||||||
|
line-height: 0.2rem;
|
||||||
|
border-right: 0.01rem solid #e5e5e5;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__box__list li:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__box__list--Active {
|
||||||
|
color: #2164ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown {
|
||||||
|
min-width: 1.6rem;
|
||||||
|
height: inherit;
|
||||||
|
position: relative;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown__selected {
|
||||||
|
width: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
border-left: 0.015rem solid #e5e5e5;
|
||||||
|
border-right: 0.015rem solid #e5e5e5;
|
||||||
|
height: 100%;
|
||||||
|
color: #333;
|
||||||
|
display: flex;
|
||||||
|
line-height: 0.45rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown__selected__text {
|
||||||
|
min-width: 1.4rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown__selected__arrow {
|
||||||
|
width: 0.2rem;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown__selected__arrow .iconfont {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: inherit;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown__selected__arrow--down {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown__options {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 5px);
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 0.05rem;
|
||||||
|
box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 800;
|
||||||
|
height: auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-bottom: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown__options__item {
|
||||||
|
line-height: 2.7;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu__container__dropdown__options__item:hover {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1750px) {
|
||||||
|
.menu {
|
||||||
|
font-size: 0.17rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1300px) {
|
||||||
|
.menu {
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
.menu__container__left {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.menu__container__box {
|
||||||
|
flex-basis: 70%;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown {
|
||||||
|
min-width: 2.2rem;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown__selected__text {
|
||||||
|
min-width: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.menu {
|
||||||
|
font-size: 0.3rem;
|
||||||
|
height: auto;
|
||||||
|
min-height: 1rem;
|
||||||
|
}
|
||||||
|
.menu__container__left {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.menu__container__box {
|
||||||
|
flex-basis: 70%;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown {
|
||||||
|
min-width: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.menu {
|
||||||
|
font-size: 0.35rem;
|
||||||
|
height: auto;
|
||||||
|
min-height: 1rem;
|
||||||
|
}
|
||||||
|
.menu__container__left {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.menu__container__box {
|
||||||
|
flex-basis: 70%;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown {
|
||||||
|
min-width: 3.8rem;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown__selected__text {
|
||||||
|
min-width: 3.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.menu {
|
||||||
|
font-size: 0.56rem;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0 0rem;
|
||||||
|
}
|
||||||
|
.menu__container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
.menu__container__box {
|
||||||
|
flex-basis: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
.menu__container__box__list {
|
||||||
|
padding: 0;
|
||||||
|
height: inherit;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.menu__container__box__list li {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown {
|
||||||
|
margin: 0.8rem auto 0 0;
|
||||||
|
width: 8.3rem;
|
||||||
|
float: right;
|
||||||
|
font-size: 0.56rem;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown__selected {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown__selected__text {
|
||||||
|
min-width: 6rem;
|
||||||
|
text-align: center;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown__selected__arrow {
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
.menu__container__dropdown__options {
|
||||||
|
font-size: 0.56rem;
|
||||||
|
width: 8.3rem;
|
||||||
|
box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.menu__container__dropdown__options__item {
|
||||||
|
padding: 0.3rem 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.mobile-menu {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods {
|
||||||
|
min-height: 6rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.goods {
|
||||||
|
min-height: 13rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product {
|
||||||
|
margin: 0.3rem auto 1rem;
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 499px) {
|
||||||
|
.goods__product__list {
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
min-height: 17rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li {
|
||||||
|
flex-basis: 32.5%;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
background: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 5rem;
|
||||||
|
margin-right: 1.2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 850px) {
|
||||||
|
.goods__product__list__li:nth-child(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.goods__product__list__li:nth-child(n+4) {
|
||||||
|
margin-top: 1.2%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li__top {
|
||||||
|
height: 3.25rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li__top__avater-2 {
|
||||||
|
height: auto;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li__top__avater {
|
||||||
|
border-radius: 0.1rem 0.1rem 0 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3.25rem;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li__content__box {
|
||||||
|
height: 1rem;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li__content__box__title {
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li__content__btn {
|
||||||
|
width: 1.1rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
background: #1777ff;
|
||||||
|
border-radius: 0.26rem;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1300px) {
|
||||||
|
.goods__product__list__li__content__box {
|
||||||
|
font-size: 0.25rem;
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
.goods__product__list__li__content__btn {
|
||||||
|
font-size: 0.22rem;
|
||||||
|
margin: 0.3rem 0;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
line-height: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
.goods__product__list__li__content__box {
|
||||||
|
font-size: 0.3rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-top: 0rem;
|
||||||
|
}
|
||||||
|
.goods__product__list__li__content__btn {
|
||||||
|
font-size: 0.26rem;
|
||||||
|
margin: 0.3rem 0;
|
||||||
|
width: 1.8rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
line-height: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 849px) {
|
||||||
|
.goods__product__list__li__content__box {
|
||||||
|
font-size: 0.4rem;
|
||||||
|
}
|
||||||
|
.goods__product__list__li__content__btn {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
margin: 0.8rem 0;
|
||||||
|
width: 2.6rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
height: 0.8rem;
|
||||||
|
line-height: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.goods__product__list__li__content__box {
|
||||||
|
height: 2rem;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
.goods__product__list__li__content__btn {
|
||||||
|
font-size: 0.45rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
width: 3rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
height: 1rem;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 499px) {
|
||||||
|
.goods__product__list__li__content__box {
|
||||||
|
font-size: 0.66rem;
|
||||||
|
}
|
||||||
|
.goods__product__list__li__content__btn {
|
||||||
|
font-size: 0.55rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
width: 4rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__list__li--point {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1300px) {
|
||||||
|
.goods__product {
|
||||||
|
width: 15rem;
|
||||||
|
}
|
||||||
|
.goods__product__list {
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
.goods__product__list__li {
|
||||||
|
height: 7.2rem;
|
||||||
|
}
|
||||||
|
.goods__product__list__li__top {
|
||||||
|
height: 4.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1300px) and (max-width: 849px) {
|
||||||
|
.goods__product__list__li {
|
||||||
|
margin-right: 2.5%;
|
||||||
|
height: 9.5rem;
|
||||||
|
flex-basis: 47%;
|
||||||
|
}
|
||||||
|
.goods__product__list__li__top {
|
||||||
|
height: 6rem;
|
||||||
|
}
|
||||||
|
.goods__product__list__li:nth-child(n+3) {
|
||||||
|
margin-top: 2.5%;
|
||||||
|
}
|
||||||
|
.goods__product__list__li:nth-child(2n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1300px) and (max-width: 600px) {
|
||||||
|
.goods__product {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
.goods__product__list {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
.goods__product__list__li {
|
||||||
|
height: 13rem;
|
||||||
|
flex-basis: 48%;
|
||||||
|
margin-right: 2%;
|
||||||
|
}
|
||||||
|
.goods__product__list__li:nth-child(n+3) {
|
||||||
|
margin-top: 4%;
|
||||||
|
}
|
||||||
|
.goods__product__list__li__top {
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__page-num {
|
||||||
|
width: fit-content;
|
||||||
|
height: auto;
|
||||||
|
margin: 0.4rem auto 0.3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__page-num__item {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
font-size: 0.18rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 0.1rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 0.01rem solid #d0d0d0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__page-num--active {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #1777ff;
|
||||||
|
font-size: 0.18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods__product__page-num--grey {
|
||||||
|
color: #bfbfbf;
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #eee;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.goods__product__page-num {
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.4rem;
|
||||||
|
margin: 0.4rem auto 0.6rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.goods__product__page-num__item {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
font-size: 0.36rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 0.2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.goods__product__page-num--active {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #1777ff;
|
||||||
|
}
|
||||||
|
.goods__product__page-num--grey {
|
||||||
|
color: #bfbfbf;
|
||||||
|
border: 1px solid #bfbfbf;
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #eee;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) and (max-width: 640px) {
|
||||||
|
.goods__product__page-num {
|
||||||
|
height: 1rem;
|
||||||
|
margin: 1rem auto 1rem;
|
||||||
|
}
|
||||||
|
.goods__product__page-num__item {
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
}
|
||||||
|
.goods__product__page-num--active {
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
background-color: #1777ff;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -154,6 +154,7 @@
|
||||||
@media (max-width:1750px) {
|
@media (max-width:1750px) {
|
||||||
font-size: 0.17rem;
|
font-size: 0.17rem;
|
||||||
}
|
}
|
||||||
|
/* 1300px以下屏幕适配 */
|
||||||
@media (max-width:1300px) {
|
@media (max-width:1300px) {
|
||||||
font-size: 0.22rem;
|
font-size: 0.22rem;
|
||||||
&__container{
|
&__container{
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,13 @@
|
||||||
onBeforeMount
|
onBeforeMount
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import {
|
import {
|
||||||
useRoute,
|
useRoute
|
||||||
useRouter
|
|
||||||
} from "#imports";
|
} from "#imports";
|
||||||
import {
|
import {
|
||||||
useI18n
|
useI18n
|
||||||
} from "vue-i18n";
|
} from "vue-i18n";
|
||||||
import langToCheck from "@/hook/lang.js";
|
import langToCheck from "@/hook/lang.js";
|
||||||
|
import { useNavigation } from "@/composables/useNavigation.js";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
t
|
t
|
||||||
|
|
@ -25,10 +25,10 @@
|
||||||
langIs.value = langToCheck()
|
langIs.value = langToCheck()
|
||||||
})
|
})
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const { goHome } = useNavigation();
|
||||||
const BackToMenu = () => {
|
const BackToMenu = () => {
|
||||||
router.push("/");
|
goHome();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue