初始化提交
This commit is contained in:
parent
4010a79867
commit
e5279ac85c
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Node dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.fleet
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"i18n-ally.localesPaths": [
|
||||||
|
"src/locale"
|
||||||
|
],
|
||||||
|
"i18n-ally.keystyle": "nested"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
export default defineNuxtConfig({
|
||||||
|
compatibilityDate: '2025-08-22',
|
||||||
|
devtools: { enabled: true },
|
||||||
|
srcDir: 'src',
|
||||||
|
alias: {
|
||||||
|
'@': '~/',
|
||||||
|
},
|
||||||
|
app: {
|
||||||
|
head: {
|
||||||
|
title: '明阳良光',
|
||||||
|
meta: [
|
||||||
|
{ charset: 'utf-8' },
|
||||||
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||||
|
{ name: 'description', content: '明阳良光' },
|
||||||
|
{ name: 'theme-color', content: '#4f8cef' }
|
||||||
|
],
|
||||||
|
link: [
|
||||||
|
{ rel: 'icon', href: '/favicon.ico' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 静态生成配置
|
||||||
|
nitro: {
|
||||||
|
preset: 'static'
|
||||||
|
},
|
||||||
|
// 预渲染配置
|
||||||
|
routeRules: {
|
||||||
|
'/': { prerender: true },
|
||||||
|
'/about-us': { prerender: true },
|
||||||
|
'/contact-us': { prerender: true },
|
||||||
|
'/product': { prerender: true },
|
||||||
|
'/product/detail': { prerender: true },
|
||||||
|
'/product/rich-detail': { prerender: true },
|
||||||
|
'/privacy-policy': { prerender: true },
|
||||||
|
'/thanks': { prerender: true },
|
||||||
|
|
||||||
|
// 中文路由预渲染（因为默认是英文，所以中文需要前缀）
|
||||||
|
'/cn': { prerender: true },
|
||||||
|
'/cn/about-us': { prerender: true },
|
||||||
|
'/cn/contact-us': { prerender: true },
|
||||||
|
'/cn/product': { prerender: true },
|
||||||
|
'/cn/product/detail': { prerender: true },
|
||||||
|
'/cn/product/rich-detail': { prerender: true },
|
||||||
|
'/cn/privacy-policy': { prerender: true },
|
||||||
|
'/cn/thanks': { prerender: true }
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
'~/plugins/vue-lazyload.js',
|
||||||
|
{ src: '~/plugins/aos-client.js', mode: 'client' },
|
||||||
|
'~/plugins/vue-dompurify-html.js',
|
||||||
|
'~/plugins/image-path.js',
|
||||||
|
{ src: '~/plugins/static-data.client.js', mode: 'client' }
|
||||||
|
],
|
||||||
|
devServer: {
|
||||||
|
port: 1110,
|
||||||
|
},
|
||||||
|
modules: ['@nuxtjs/i18n', '@pinia/nuxt'],
|
||||||
|
i18n: {
|
||||||
|
locales: [
|
||||||
|
{ code: 'en', name: 'English' },
|
||||||
|
{ code: 'cn', name: '简体中文' }
|
||||||
|
],
|
||||||
|
defaultLocale: 'en',
|
||||||
|
detectBrowserLanguage: {
|
||||||
|
useCookie: true,
|
||||||
|
cookieKey: 'i18n_redirected',
|
||||||
|
redirectOn: 'root',
|
||||||
|
alwaysRedirect: false,
|
||||||
|
fallbackLocale: 'en',
|
||||||
|
cookieSecure: false
|
||||||
|
},
|
||||||
|
strategy: 'prefix_except_default',
|
||||||
|
vueI18n: '~/i18n.config.ts'
|
||||||
|
},
|
||||||
|
// Axios配置
|
||||||
|
runtimeConfig: {
|
||||||
|
public: {
|
||||||
|
apiBaseUrl: process.env.API_BASE_URL || 'https://api.example.com'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "nuxt-app",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"generate:static": "node scripts/generate-static.js && nuxi generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@nuxtjs/i18n": "^10.0.6",
|
||||||
|
"@pinia/nuxt": "^0.11.2",
|
||||||
|
"aos": "^2.3.4",
|
||||||
|
"axios": "^1.11.0",
|
||||||
|
"nuxt": "^4.0.3",
|
||||||
|
"pinia": "^3.0.3",
|
||||||
|
"swiper": "^11.2.10",
|
||||||
|
"vue": "^3.5.19",
|
||||||
|
"vue-dompurify-html": "^5.3.0",
|
||||||
|
"vue3-lazyload": "^0.3.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.3.0",
|
||||||
|
"sass": "^1.90.0"
|
||||||
|
},
|
||||||
|
"overrides": {
|
||||||
|
"vue": "^3.5.19"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,798 @@
|
||||||
|
// 默认样式清除
|
||||||
|
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;
|
||||||
|
&: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) {
|
||||||
|
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) {
|
||||||
|
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 {
|
||||||
|
// opacity: 0;
|
||||||
|
-webkit-opacity: 0;
|
||||||
|
transform: translate(75px, 0);
|
||||||
|
-webkit-transform: translate(75px, 0);
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
}
|
||||||
|
.dhRight {
|
||||||
|
// opacity: 0;
|
||||||
|
-webkit-opacity: 0;
|
||||||
|
transform: translate(-45px, 0);
|
||||||
|
-webkit-transform: translate(-45px, 0);
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhTop {
|
||||||
|
// opacity: 0;
|
||||||
|
// -webkit-opacity: 0;
|
||||||
|
transform: translate(0, 45px);
|
||||||
|
-webkit-transform: translate(0, 45px);
|
||||||
|
transition: transform 1s;
|
||||||
|
-webkit-transition: transform 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dhBottom {
|
||||||
|
// opacity: 0;
|
||||||
|
-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;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
}
|
||||||
|
@media (max-width:1099px) {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
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: 1100px) {
|
||||||
|
height: 7.5rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
&__box {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
animation: 1s dh_buttom linear both;
|
||||||
|
-webkit-animation: 1s dh_buttom linear both;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 751px) and (max-width: 1100px) {
|
||||||
|
&__title {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 0.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
&__title {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 0.55rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
&__title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain {
|
||||||
|
overflow: hidden;
|
||||||
|
&__breads {
|
||||||
|
color: #666;
|
||||||
|
width: auto;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
width: 12rem;
|
||||||
|
color: #666;
|
||||||
|
line-height: 4;
|
||||||
|
text-align: left;
|
||||||
|
&__icon{
|
||||||
|
&__avater{
|
||||||
|
width: 0.17rem;
|
||||||
|
height: 0.17rem;
|
||||||
|
margin-bottom: 0.03rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
width: 15rem;
|
||||||
|
font-size: 13.5px;
|
||||||
|
line-height: 3.2;
|
||||||
|
&__icon{
|
||||||
|
&__avater{
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
@media (min-width:1100px) {
|
||||||
|
&:hover{
|
||||||
|
color: #0072ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1024px) {
|
||||||
|
font-size: 13px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
@media (max-width:500px) {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
&__icon{
|
||||||
|
&__avater{
|
||||||
|
width: 0.68rem;
|
||||||
|
height: 0.68rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:350px) {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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) {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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) {
|
||||||
|
font-size: 15.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 501px) and (max-width: 1100px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 350px) {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 15%;
|
||||||
|
content: "";
|
||||||
|
bottom: 0;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #0072ff;
|
||||||
|
width: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--on {
|
||||||
|
color: #0072ff;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__buttom-line {
|
||||||
|
padding: 0.36 0 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 粘性导航栏样式
|
||||||
|
.sticky-page-layout {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin sticky-nav-style {
|
||||||
|
line-height: 3;
|
||||||
|
@media (max-width: 1500px) {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
font-size: 0.42rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.63rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-sticky {
|
||||||
|
@include sticky-nav-style;
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&__center {
|
||||||
|
width: 9.8rem;
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
margin: 0 auto;
|
||||||
|
transition: width 0.3s;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid hsla(0, 0%, 100%, 0.24);
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
font-size: 0.17rem;
|
||||||
|
font-family: MiSans-Bold;
|
||||||
|
@include sticky-nav-style;
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
margin-left: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
@include sticky-nav-style;
|
||||||
|
font-size: 0.15rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
margin-right: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
margin: 0 0.2rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
@media (max-width:600px) {
|
||||||
|
margin: 0 0.4rem;
|
||||||
|
// display: none;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--Active {
|
||||||
|
opacity: 1;
|
||||||
|
border-bottom: 0.01rem solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
// @media (max-width:600px) {
|
||||||
|
// display: block;
|
||||||
|
// }
|
||||||
|
&__up {
|
||||||
|
@include sticky-nav-style;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
.arrow-down{
|
||||||
|
width: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: -50%;
|
||||||
|
background-color: #222;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
box-shadow: 0 .04rem .1rem .02rem rgba(0, 0, 0, .08);
|
||||||
|
z-index: 1;
|
||||||
|
width: 150%;
|
||||||
|
padding: 20px 0;
|
||||||
|
&__item {
|
||||||
|
color: #919191;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
&--Active{
|
||||||
|
color: #0072ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky--active {
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: sticky;
|
||||||
|
background-color: rgba(3, 6, 11, 0.4);
|
||||||
|
border-bottom: 1px solid hsla(0, 5%, 92%, 0.2);
|
||||||
|
|
||||||
|
.nav-sticky__center {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// N051,N052公共的banner
|
||||||
|
.detail-banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 10.8rem;
|
||||||
|
color: #ffffff;
|
||||||
|
position: relative;
|
||||||
|
&__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);
|
||||||
|
}
|
||||||
|
&__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
padding-top: 2rem;
|
||||||
|
height: 12.8rem;
|
||||||
|
&__title {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
top: 3.8rem;
|
||||||
|
}
|
||||||
|
&__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;
|
||||||
|
.spinner {
|
||||||
|
width: 150px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20vh;
|
||||||
|
.spinner__item {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
// background-color: #b89dfe;
|
||||||
|
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;
|
||||||
|
// &:nth-child(2){
|
||||||
|
// background-color: #2e6ee7;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.bounce1 {
|
||||||
|
-webkit-animation-delay: -0.32s;
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
.bounce2 {
|
||||||
|
-webkit-animation-delay: -0.16s;
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes bouncedelay {
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
transform: scale(0.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 产品、新闻用的loading
|
||||||
|
.load-loading{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 35vh;
|
||||||
|
&__box{
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
color: #aeadba;
|
||||||
|
text-align: center;
|
||||||
|
&__up{
|
||||||
|
width: 55px;
|
||||||
|
margin: auto;
|
||||||
|
&__avater{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__text{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 3;
|
||||||
|
}
|
||||||
|
@media (max-width:1024px) {
|
||||||
|
&__up{
|
||||||
|
width: 47px;
|
||||||
|
}
|
||||||
|
&__text{
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width:1920px) {
|
||||||
|
width: 2rem;
|
||||||
|
height: 1rem;
|
||||||
|
&__up{
|
||||||
|
width: 0.55rem;
|
||||||
|
}
|
||||||
|
&__text{
|
||||||
|
font-size: 0.14rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin isAnimatingStyle {
|
||||||
|
transform: translateY(11.71rpx);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
//加载类名
|
||||||
|
[class*="is-animating-"] {
|
||||||
|
@include isAnimatingStyle;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"name": "尼日利亚官网",
|
||||||
|
"short_name": "尼日利亚",
|
||||||
|
"description": "尼日利亚官方网站",
|
||||||
|
"start_url": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"theme_color": "#4f8cef",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/logo.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/logo.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 450 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,239 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 4350424 */
|
||||||
|
src: url('/static/font/iconfont.woff2?t=1716543193903') format('woff2'),
|
||||||
|
url('/static/font/iconfont.woff?t=1716543193903') format('woff'),
|
||||||
|
url('/static/font/iconfont.ttf?t=1716543193903') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi:before {
|
||||||
|
content: "\e668";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-syd-logo:before {
|
||||||
|
content: "\e602";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-top:before {
|
||||||
|
content: "\e67e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shachu-xue:before {
|
||||||
|
content: "\e638";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-weibiaoti1:before {
|
||||||
|
content: "\e634";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiazai:before {
|
||||||
|
content: "\e682";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiajiantou:before {
|
||||||
|
content: "\e610";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shangjiantou-copy:before {
|
||||||
|
content: "\e651";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-jiazhiguan:before {
|
||||||
|
content: "\e646";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-rencailinian:before {
|
||||||
|
content: "\e667";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-msgw_icon_shiming:before {
|
||||||
|
content: "\e60f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-qiyeyuanjing:before {
|
||||||
|
content: "\e671";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-home:before {
|
||||||
|
content: "\e62b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-jiantou_qiehuanyou:before {
|
||||||
|
content: "\eb05";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-navigoumai:before {
|
||||||
|
content: "\e62a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-kefu1:before {
|
||||||
|
content: "\e60d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shezhi1:before {
|
||||||
|
content: "\e7f8";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shijian:before {
|
||||||
|
content: "\e64f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cc-left:before {
|
||||||
|
content: "\e6c2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-unie601:before {
|
||||||
|
content: "\e61c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-youjian:before {
|
||||||
|
content: "\e672";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-duoyuyan:before {
|
||||||
|
content: "\e654";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-sousuo:before {
|
||||||
|
content: "\e61f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dianziyouxiang:before {
|
||||||
|
content: "\e60c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-kehu:before {
|
||||||
|
content: "\e645";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-fuwu:before {
|
||||||
|
content: "\e61b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gongchang:before {
|
||||||
|
content: "\e649";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-goumai:before {
|
||||||
|
content: "\e603";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zu:before {
|
||||||
|
content: "\e644";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-anzhuo:before {
|
||||||
|
content: "\e60b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-pingguo_apple:before {
|
||||||
|
content: "\e7f2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-jianhao:before {
|
||||||
|
content: "\e614";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-caidan:before {
|
||||||
|
content: "\e790";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-fanhui:before {
|
||||||
|
content: "\e60e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-fisocialapple:before {
|
||||||
|
content: "\e76f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-chacha:before {
|
||||||
|
content: "\e62f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zhidingtop:before {
|
||||||
|
content: "\e62d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-home1:before {
|
||||||
|
content: "\e92d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-search:before {
|
||||||
|
content: "\e676";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-X:before {
|
||||||
|
content: "\e607";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow-right:before {
|
||||||
|
content: "\e666";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-left:before {
|
||||||
|
content: "\e684";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zuojiantou:before {
|
||||||
|
content: "\e65a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shezhi:before {
|
||||||
|
content: "\e892";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-youjiantou:before {
|
||||||
|
content: "\e678";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-kefu:before {
|
||||||
|
content: "\e665";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shangjiantou:before {
|
||||||
|
content: "\eb6d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zuixinzixun-03:before {
|
||||||
|
content: "\ea2c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shanchu11:before {
|
||||||
|
content: "\e62e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shanchu:before {
|
||||||
|
content: "\e606";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-language:before {
|
||||||
|
content: "\e6a9";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-jiantou_xiangyou:before {
|
||||||
|
content: "\eb08";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-youjian_o:before {
|
||||||
|
content: "\ebca";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dianhua:before {
|
||||||
|
content: "\e66b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-earch:before {
|
||||||
|
content: "\e617";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiangyou:before {
|
||||||
|
content: "\e656";
|
||||||
|
}
|
||||||
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
Binary file not shown.
|
After Width: | Height: | Size: 393 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
import axios from 'axios';
|
||||||
|
import fs from 'fs';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
// API配置
|
||||||
|
const API_BASE_URL = process.env.NODE_ENV === 'development'
|
||||||
|
? 'https://api.dev.mingyanglg.com/http/router'
|
||||||
|
: 'https://api.mingyanglg.com/http/router';
|
||||||
|
|
||||||
|
// 创建API客户端
|
||||||
|
const apiClient = axios.create({
|
||||||
|
baseURL: API_BASE_URL,
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取轮播图数据
|
||||||
|
async function getCarouselData(locale) {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post('/website/get/homePageCarousel_list', {
|
||||||
|
locale: locale
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`获取轮播图数据失败 (${locale}):`, error.message);
|
||||||
|
return { rows: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取产品分类数据
|
||||||
|
async function getProductCategoryData(locale) {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post('/website/get/product_category_list', {
|
||||||
|
locale: locale
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`获取产品分类数据失败 (${locale}):`, error.message);
|
||||||
|
return { rows: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取产品列表数据
|
||||||
|
async function getProductListData(locale) {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post('/website/get/product_list', {
|
||||||
|
locale: locale,
|
||||||
|
page: 1,
|
||||||
|
limit: 50
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`获取产品列表数据失败 (${locale}):`, error.message);
|
||||||
|
return { rows: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取新闻列表数据
|
||||||
|
async function getNewsListData(locale) {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post('/website/get/news_list', {
|
||||||
|
locale: locale,
|
||||||
|
page: 1,
|
||||||
|
limit: 20
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`获取新闻列表数据失败 (${locale}):`, error.message);
|
||||||
|
return { rows: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取证书数据
|
||||||
|
async function getCertificateData(locale) {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post('/website/get/certificate_list', {
|
||||||
|
locale: locale
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`获取证书数据失败 (${locale}):`, error.message);
|
||||||
|
return { rows: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取APP下载数据
|
||||||
|
async function getDownloadData(locale) {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post('/website/get/appInstallPackage', {
|
||||||
|
locale: locale
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(`获取APP下载数据失败 (${locale}):`, error.message);
|
||||||
|
return { rows: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主函数
|
||||||
|
async function generateStaticData() {
|
||||||
|
|
||||||
|
const locales = ['en', 'cn'];
|
||||||
|
const staticData = {};
|
||||||
|
|
||||||
|
for (const locale of locales) {
|
||||||
|
const [carousel, categories, products, news, certificates, downloads] = await Promise.allSettled([
|
||||||
|
getCarouselData(locale),
|
||||||
|
getProductCategoryData(locale),
|
||||||
|
getProductListData(locale),
|
||||||
|
getNewsListData(locale),
|
||||||
|
getCertificateData(locale),
|
||||||
|
getDownloadData(locale)
|
||||||
|
]);
|
||||||
|
|
||||||
|
staticData[locale] = {
|
||||||
|
carousel: carousel.status === 'fulfilled' ? carousel.value : { rows: [] },
|
||||||
|
categories: categories.status === 'fulfilled' ? categories.value : { rows: [] },
|
||||||
|
products: products.status === 'fulfilled' ? products.value : { rows: [] },
|
||||||
|
news: news.status === 'fulfilled' ? news.value : { rows: [] },
|
||||||
|
certificates: certificates.status === 'fulfilled' ? certificates.value : { rows: [] },
|
||||||
|
downloads: downloads.status === 'fulfilled' ? downloads.value : { rows: [] }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保目录存在
|
||||||
|
const outputDir = path.join(process.cwd(), 'src', 'static-data');
|
||||||
|
if (!fs.existsSync(outputDir)) {
|
||||||
|
fs.mkdirSync(outputDir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 写入静态数据文件
|
||||||
|
const outputPath = path.join(outputDir, 'api-data.json');
|
||||||
|
fs.writeFileSync(outputPath, JSON.stringify(staticData, null, 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 执行脚本
|
||||||
|
generateStaticData().catch(console.error);
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
export default defineEventHandler((event: any) => {
|
||||||
|
// 服务端中间件，直接执行
|
||||||
|
const cookie = getCookie(event, 'i18n_redirected');
|
||||||
|
const acceptLanguage = getHeader(event, 'accept-language') || '';
|
||||||
|
|
||||||
|
let detectedLang = 'en'; // 默认英文
|
||||||
|
|
||||||
|
// 优先检查 cookie：如果有 cookie 就使用 cookie 中的语言
|
||||||
|
if (cookie && ['cn', 'en'].includes(cookie)) {
|
||||||
|
detectedLang = cookie;
|
||||||
|
}
|
||||||
|
// 如果没有 cookie，则根据浏览器语言检测
|
||||||
|
else if (acceptLanguage.includes('zh')) {
|
||||||
|
detectedLang = 'cn';
|
||||||
|
}
|
||||||
|
// 设置到 context 供后续使用
|
||||||
|
event.context.locale = detectedLang;
|
||||||
|
|
||||||
|
// 设置响应头
|
||||||
|
setHeader(event, 'X-Detected-Language', detectedLang);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "../.nuxt/tsconfig.server.json"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<keep-alive v-if="isKeepAlive">
|
||||||
|
<NuxtPage />
|
||||||
|
</keep-alive>
|
||||||
|
<NuxtPage v-else />
|
||||||
|
<back-top v-if="currentPath !== '/404'" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
computed
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
useRoute
|
||||||
|
} from '#imports';
|
||||||
|
import BackTop from "@/components/back-top/back-top.vue";
|
||||||
|
|
||||||
|
// 获取当前路由对象
|
||||||
|
const route = useRoute();
|
||||||
|
// 计算当前路由的完整路径
|
||||||
|
const currentPath = computed(() => route.fullPath);
|
||||||
|
// 根据 meta 信息判断是否需要缓存页面
|
||||||
|
const isKeepAlive = computed(() => {
|
||||||
|
return route.meta.keepAlive;
|
||||||
|
});
|
||||||
|
|
||||||
|
useHead({
|
||||||
|
title: '明阳良光',
|
||||||
|
meta: [{
|
||||||
|
name: 'viewport',
|
||||||
|
content: 'width=device-width, initial-scale=1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
hid: 'description',
|
||||||
|
name: 'description',
|
||||||
|
content: '明阳良光'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'theme-color',
|
||||||
|
content: '#4f8cef'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
link: [
|
||||||
|
{
|
||||||
|
hid: 'favicon',
|
||||||
|
rel: 'icon',
|
||||||
|
href: '/favicon.ico'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
script: [{
|
||||||
|
innerHTML: `
|
||||||
|
(function() {
|
||||||
|
// 立即执行函数，确保在任何Vue组件初始化前设置语言
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
try {
|
||||||
|
// 优先使用cookie中的语言设置（与Nuxt i18n保持一致）
|
||||||
|
let savedLang = 'en';
|
||||||
|
|
||||||
|
// 1. 检查cookie
|
||||||
|
const cookies = document.cookie.split(';');
|
||||||
|
const localeCookie = cookies.find(cookie =>
|
||||||
|
cookie.trim().startsWith('i18n_redirected=')
|
||||||
|
);
|
||||||
|
if (localeCookie) {
|
||||||
|
const langValue = localeCookie.split('=')[1];
|
||||||
|
if (['cn', 'en'].includes(langValue)) {
|
||||||
|
savedLang = langValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 如果没有cookie，检查localStorage
|
||||||
|
if (savedLang === 'en') {
|
||||||
|
const storedLang = localStorage.getItem('locale_lang');
|
||||||
|
if (storedLang && ['cn', 'en'].includes(storedLang)) {
|
||||||
|
savedLang = storedLang;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 如果都没有，根据浏览器语言设置
|
||||||
|
if (savedLang === 'en') {
|
||||||
|
if (navigator.language.startsWith("en")) {
|
||||||
|
savedLang = "en";
|
||||||
|
} else if (navigator.language.includes("zh")) {
|
||||||
|
savedLang = "cn";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置多个位置确保语言被正确读取
|
||||||
|
document.documentElement.setAttribute('data-initial-lang', savedLang);
|
||||||
|
document.documentElement.setAttribute('lang', savedLang === 'cn' ? 'zh-CN' : 'en');
|
||||||
|
document.documentElement.setAttribute('data-locale', savedLang);
|
||||||
|
window.__INITIAL_LANG__ = savedLang;
|
||||||
|
|
||||||
|
// 为i18n设置初始语言
|
||||||
|
window.__I18N_INITIAL_LOCALE__ = savedLang;
|
||||||
|
|
||||||
|
// 确保cookie和localStorage同步
|
||||||
|
if (savedLang !== 'en') {
|
||||||
|
document.cookie = 'i18n_redirected=' + savedLang + '; path=/; max-age=31536000';
|
||||||
|
localStorage.setItem('locale_lang', savedLang);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
const defaultLang = 'en';
|
||||||
|
document.documentElement.setAttribute('data-initial-lang', defaultLang);
|
||||||
|
document.documentElement.setAttribute('lang', 'en');
|
||||||
|
document.documentElement.setAttribute('data-locale', defaultLang);
|
||||||
|
window.__INITIAL_LANG__ = defaultLang;
|
||||||
|
window.__I18N_INITIAL_LOCALE__ = defaultLang;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
`,
|
||||||
|
type: 'text/javascript'
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import './common/css/common.scss';
|
||||||
|
|
||||||
|
// 防止语言切换时的闪烁 - 优化版本
|
||||||
|
html:not([data-locale]) {
|
||||||
|
// 在语言未确定前隐藏内容
|
||||||
|
body {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 语言确定后显示内容
|
||||||
|
html[data-locale] {
|
||||||
|
body {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保语言切换平滑
|
||||||
|
html {
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 语言特定的样式优化
|
||||||
|
html[data-locale="en"] {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-locale="cn"] {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 防止水合不匹配时的闪烁
|
||||||
|
.navbar {
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保内容在语言切换时不会跳动
|
||||||
|
* {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 只有特定元素需要过渡效果
|
||||||
|
.navbar,
|
||||||
|
.menu-item,
|
||||||
|
.language-selector,
|
||||||
|
.mobile-menu {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 防止语言切换时的布局抖动
|
||||||
|
.language-selector {
|
||||||
|
min-width: 80px; // 确保语言选择器有固定宽度
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-text {
|
||||||
|
min-width: 40px; // 确保语言文本有固定宽度
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: MiSans-Light;
|
||||||
|
src: url("/static/font/MiSans-Light.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: MiSans-Bold;
|
||||||
|
src: url("/static/font/MiSans-Bold.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
src: url("/static/font/MiSans-Medium.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
src: url("/static/font/MiSans-Regular.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: MiSans-Normal;
|
||||||
|
src: url("/static/font/MiSans-Normal.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: MiSans-SemiBold;
|
||||||
|
src: url("/static/font/MiSans-Semibold.ttf");
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,992 @@
|
||||||
|
// 默认样式清除
|
||||||
|
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-Regular;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-tap-highlight-color:transparent;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
&:hover{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 字体系统定义
|
||||||
|
:root {
|
||||||
|
--font-light: MiSans-Light;
|
||||||
|
--font-normal: MiSans-Normal;
|
||||||
|
--font-regular: MiSans-Regular;
|
||||||
|
--font-medium: MiSans-Medium;
|
||||||
|
--font-semibold: MiSans-SemiBold;
|
||||||
|
--font-bold: MiSans-Bold;
|
||||||
|
|
||||||
|
// 字体大小系统
|
||||||
|
--text-xs: 0.12rem; // 12px
|
||||||
|
--text-sm: 0.14rem; // 14px
|
||||||
|
--text-base: 0.16rem; // 16px
|
||||||
|
--text-lg: 0.18rem; // 18px
|
||||||
|
--text-xl: 0.20rem; // 20px
|
||||||
|
--text-2xl: 0.24rem; // 24px
|
||||||
|
--text-3xl: 0.28rem; // 28px
|
||||||
|
--text-4xl: 0.32rem; // 32px
|
||||||
|
--text-5xl: 0.36rem; // 36px
|
||||||
|
--text-6xl: 0.40rem; // 40px
|
||||||
|
|
||||||
|
// 响应式断点
|
||||||
|
--breakpoint-xs: 375px;
|
||||||
|
--breakpoint-sm: 480px;
|
||||||
|
--breakpoint-md: 768px;
|
||||||
|
--breakpoint-lg: 1024px;
|
||||||
|
--breakpoint-xl: 1440px;
|
||||||
|
--breakpoint-2xl: 1920px;
|
||||||
|
--breakpoint-4k: 2560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 基础样式
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, ol, li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: var(--font-regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
outline: none;
|
||||||
|
-moz-outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a img {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
select, input, textarea {
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
font-family: var(--font-regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
font-family: var(--font-regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式根字体大小
|
||||||
|
html {
|
||||||
|
font-size: calc(100 * 100vw / 1920) !important;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: calc(100 * 100vw / 2560) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1920px 屏幕
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: calc(100 * 100vw / 1920) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1440px 屏幕
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: calc(100 * 100vw / 1440) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1024px 屏幕
|
||||||
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
||||||
|
font-size: calc(100 * 100vw / 1024) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 768px 屏幕
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
font-size: calc(100 * 100vw / 768) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 480px 屏幕
|
||||||
|
@media (min-width: 480px) and (max-width: 767px) {
|
||||||
|
font-size: calc(100 * 100vw / 480) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 375px 屏幕
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
font-size: calc(100 * 100vw / 375) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
font-family: var(--font-regular);
|
||||||
|
user-select: text;
|
||||||
|
font-size: var(--text-base);
|
||||||
|
color: #3f4552;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条样式 */
|
||||||
|
/* 移动端隐藏滚动条 */
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
html::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 桌面端滚动条样式 */
|
||||||
|
@media (min-width: 751px) {
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #c1c1c1;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #a8a8a8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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) {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 容器类
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 容器类
|
||||||
|
.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 {
|
||||||
|
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) {
|
||||||
|
margin-top: 0.6rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 1099px) {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1100px) {
|
||||||
|
height: 7.5rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
animation: 1s dh_buttom linear both;
|
||||||
|
-webkit-animation: 1s dh_buttom linear both;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: var(--text-5xl);
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-family: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: var(--font-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 751px) and (max-width: 1100px) {
|
||||||
|
&__title {
|
||||||
|
font-size: var(--text-6xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: var(--text-3xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
&__title {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 0.55rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
&__title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageMain {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&__breads {
|
||||||
|
color: #666;
|
||||||
|
width: auto;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
width: 15rem;
|
||||||
|
color: #666;
|
||||||
|
line-height: 4;
|
||||||
|
text-align: left;
|
||||||
|
font-family: var(--font-regular);
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
&__avater {
|
||||||
|
width: 0.17rem;
|
||||||
|
height: 0.17rem;
|
||||||
|
margin-bottom: 0.03rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
font-size: 13.5px;
|
||||||
|
line-height: 3.2;
|
||||||
|
&__icon {
|
||||||
|
&__avater {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: var(--font-medium);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
&:hover {
|
||||||
|
color: #0072ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 13px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
&__icon {
|
||||||
|
&__avater {
|
||||||
|
width: 0.68rem;
|
||||||
|
height: 0.68rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 350px) {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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) {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
margin: 0 1rem;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-family: var(--font-normal);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
font-size: 15.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 501px) and (max-width: 1100px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 350px) {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 15%;
|
||||||
|
content: "";
|
||||||
|
bottom: 0;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #0072ff;
|
||||||
|
width: 0;
|
||||||
|
transition: 0.5s;
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover::before {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--on {
|
||||||
|
color: #0072ff;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__buttom-line {
|
||||||
|
padding: 0.36rem 0 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 粘性导航栏样式
|
||||||
|
.sticky-page-layout {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin sticky-nav-style {
|
||||||
|
line-height: 3;
|
||||||
|
@media (max-width: 1500px) {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
height: auto;
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
font-size: 0.42rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
line-height: 3.5;
|
||||||
|
font-size: 0.63rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky {
|
||||||
|
@include sticky-nav-style;
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&__center {
|
||||||
|
width: 9.8rem;
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
margin: 0 auto;
|
||||||
|
transition: width 0.3s;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid hsla(0, 0%, 100%, 0.24);
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: var(--font-regular);
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
font-size: 0.17rem;
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
font-weight: bold;
|
||||||
|
@include sticky-nav-style;
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
margin-left: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
@include sticky-nav-style;
|
||||||
|
font-size: 0.15rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
margin-right: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
margin: 0 0.2rem;
|
||||||
|
opacity: 0.6;
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
margin: 0 0.4rem;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--Active {
|
||||||
|
opacity: 1;
|
||||||
|
border-bottom: 0.01rem solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown {
|
||||||
|
position: relative;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&__up {
|
||||||
|
@include sticky-nav-style;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
.arrow-down {
|
||||||
|
width: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: -50%;
|
||||||
|
background-color: #222;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 10px;
|
||||||
|
box-shadow: 0 .04rem .1rem .02rem rgba(0, 0, 0, .08);
|
||||||
|
z-index: 1;
|
||||||
|
width: 150%;
|
||||||
|
padding: 20px 0;
|
||||||
|
&__item {
|
||||||
|
color: #919191;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
&--Active {
|
||||||
|
color: #0072ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-sticky--active {
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: sticky;
|
||||||
|
background-color: rgba(3, 6, 11, 0.4);
|
||||||
|
border-bottom: 1px solid hsla(0, 5%, 92%, 0.2);
|
||||||
|
|
||||||
|
.nav-sticky__center {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 产品详情页banner
|
||||||
|
.detail-banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 10.8rem;
|
||||||
|
color: #ffffff;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-family: var(--font-medium);
|
||||||
|
position: absolute;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
top: 1.5rem;
|
||||||
|
left: 50%;
|
||||||
|
width: 90%;
|
||||||
|
text-align: center;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
padding-top: 2rem;
|
||||||
|
height: 12.8rem;
|
||||||
|
&__title {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
top: 3.8rem;
|
||||||
|
}
|
||||||
|
&__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;
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 150px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20vh;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bounce1 {
|
||||||
|
-webkit-animation-delay: -0.32s;
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bounce2 {
|
||||||
|
-webkit-animation-delay: -0.16s;
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bouncedelay {
|
||||||
|
0%, 80%, 100% {
|
||||||
|
transform: scale(0.0);
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 产品、新闻用的loading
|
||||||
|
.load-loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 35vh;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
color: #aeadba;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&__up {
|
||||||
|
width: 55px;
|
||||||
|
margin: auto;
|
||||||
|
&__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 3;
|
||||||
|
font-family: var(--font-regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
&__up {
|
||||||
|
width: 47px;
|
||||||
|
}
|
||||||
|
&__text {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) {
|
||||||
|
width: 2rem;
|
||||||
|
height: 1rem;
|
||||||
|
&__up {
|
||||||
|
width: 0.55rem;
|
||||||
|
}
|
||||||
|
&__text {
|
||||||
|
font-size: 0.14rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动画样式
|
||||||
|
@mixin isAnimatingStyle {
|
||||||
|
transform: translateY(11.71rpx);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="is-animating-"] {
|
||||||
|
@include isAnimatingStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 字体工具类
|
||||||
|
.font-light { font-family: var(--font-light); }
|
||||||
|
.font-normal { font-family: var(--font-normal); }
|
||||||
|
.font-regular { font-family: var(--font-regular); }
|
||||||
|
.font-medium { font-family: var(--font-medium); }
|
||||||
|
.font-semibold { font-family: var(--font-semibold); }
|
||||||
|
.font-bold { font-family: var(--font-bold); }
|
||||||
|
|
||||||
|
// 文本大小工具类
|
||||||
|
.text-xs { font-size: var(--text-xs); }
|
||||||
|
.text-sm { font-size: var(--text-sm); }
|
||||||
|
.text-base { font-size: var(--text-base); }
|
||||||
|
.text-lg { font-size: var(--text-lg); }
|
||||||
|
.text-xl { font-size: var(--text-xl); }
|
||||||
|
.text-2xl { font-size: var(--text-2xl); }
|
||||||
|
.text-3xl { font-size: var(--text-3xl); }
|
||||||
|
.text-4xl { font-size: var(--text-4xl); }
|
||||||
|
.text-5xl { font-size: var(--text-5xl); }
|
||||||
|
.text-6xl { font-size: var(--text-6xl); }
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
computed,
|
||||||
|
onMounted,
|
||||||
|
onBeforeUnmount,
|
||||||
|
} from "vue";
|
||||||
|
import { useI18n } from "#imports";
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const scrollTop = ref(0); // 监听滚动事件得到的值
|
||||||
|
const top = ref(300); // 超过这个值返回图标显示出来
|
||||||
|
|
||||||
|
// 返回顶部函数
|
||||||
|
const backToTop = () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算属性，根据scrollTop和top值判断是否显示返回顶部按钮
|
||||||
|
const fadeShow = computed(() => {
|
||||||
|
return scrollTop.value > top.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听滚动事件
|
||||||
|
const handleScroll = () => {
|
||||||
|
scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div v-if="fadeShow" class="contact">
|
||||||
|
<div class="contact__drift">
|
||||||
|
<a class="contact__drift__box" @click="backToTop">
|
||||||
|
<img
|
||||||
|
src="/static/back-top/back_top.png"
|
||||||
|
:title="t('page.back-to-top')"
|
||||||
|
:alt="t('page.back-to-top')"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.contact {
|
||||||
|
position: fixed;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
right: 25px;
|
||||||
|
bottom: 105px;
|
||||||
|
|
||||||
|
&__drift {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #000;
|
||||||
|
line-height: 2.5;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: block;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #fff;
|
||||||
|
color: #000;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.08);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,974 @@
|
||||||
|
<script setup name="footer">
|
||||||
|
import { ref, reactive, onUnmounted, onMounted } from "vue";
|
||||||
|
import { useI18n } from "#imports";
|
||||||
|
import { GetMessageApi } from "@/service/api.js";
|
||||||
|
import { useRouter, useRoute } from "#imports";
|
||||||
|
const { t } = useI18n();
|
||||||
|
import { GetProductCategoryApi } from "~/service/api.js";
|
||||||
|
//商品与新闻状态
|
||||||
|
import useSheller from "~/stores/seller.js";
|
||||||
|
// 语言判断
|
||||||
|
import langToCheck from "~/hook/lang.js";
|
||||||
|
const langIs = ref(langToCheck());
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
//页面跳转事件
|
||||||
|
const Store = useSheller();
|
||||||
|
const props = defineProps({
|
||||||
|
//首页加边距
|
||||||
|
marginSpacing: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const subRouteEvent = (subParmas, item) => {
|
||||||
|
let secondaryRoute = subParmas.enName;
|
||||||
|
switch (secondaryRoute) {
|
||||||
|
case "Power Station": {
|
||||||
|
Store.clickTab = 0;
|
||||||
|
router.push({
|
||||||
|
name: "product",
|
||||||
|
query: {
|
||||||
|
CategoryId: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "Solar Panel": {
|
||||||
|
Store.clickTab = 1;
|
||||||
|
router.push({
|
||||||
|
name: "product",
|
||||||
|
query: {
|
||||||
|
CategoryId: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "Accessory": {
|
||||||
|
Store.clickTab = 2;
|
||||||
|
router.push({
|
||||||
|
name: "product",
|
||||||
|
query: {
|
||||||
|
CategoryId: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "About Us": {
|
||||||
|
router.push({
|
||||||
|
name: "about-us",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "Contact": {
|
||||||
|
router.push({
|
||||||
|
name: "contact-us",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
// 产品分类跳转到首页对应分类
|
||||||
|
router.push({
|
||||||
|
name: "home",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
footTabs.forEach((it) => {
|
||||||
|
(it.checked = false), (it.expand = false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 改成小写，并 " - "代替空格
|
||||||
|
const FlowReplace = (str) => {
|
||||||
|
return str.toLowerCase().replace(/\s+/g, "-");
|
||||||
|
};
|
||||||
|
//expandwei
|
||||||
|
const footTabs = reactive([]);
|
||||||
|
const GetProductCategorylist = () => {
|
||||||
|
GetProductCategoryApi().then((res) => {
|
||||||
|
let arrofObjects = res.rows;
|
||||||
|
Store.categoryList = arrofObjects.map((obj, k) => {
|
||||||
|
return {
|
||||||
|
...obj,
|
||||||
|
categorId: k,
|
||||||
|
path: "product/product",
|
||||||
|
Params: k,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
footTabs[0].dropList = Store.categoryList;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
footTabs.push(
|
||||||
|
{
|
||||||
|
enName: "Product",
|
||||||
|
name: "产品系列",
|
||||||
|
expand: false,
|
||||||
|
dropList: [
|
||||||
|
{
|
||||||
|
enName: "监控摄像头",
|
||||||
|
name: "监控摄像头",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enName: "LED灯泡",
|
||||||
|
name: "LED灯泡",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enName: "车灯",
|
||||||
|
name: "车灯",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enName: "About",
|
||||||
|
name: "关于我们",
|
||||||
|
expand: false,
|
||||||
|
dropList: [
|
||||||
|
{
|
||||||
|
enName: "About Us",
|
||||||
|
name: "关于我们",
|
||||||
|
path: "/about-us"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enName: "Contact",
|
||||||
|
name: "联系我们",
|
||||||
|
expand: false,
|
||||||
|
dropList: [
|
||||||
|
{
|
||||||
|
enName: "Contact",
|
||||||
|
name: "联系我们",
|
||||||
|
path: "/contact-us/contact-us"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
// 服务协议、隐私政策、域名、网安信息
|
||||||
|
const GoAgreement = (value) => {
|
||||||
|
switch (value) {
|
||||||
|
case 1: {
|
||||||
|
window.open("https://www.mingyanglg.com/protocol/service-agreement.html");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 2: {
|
||||||
|
window.open("https://www.mingyanglg.com/protocol/privacy-policy.html");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 3: {
|
||||||
|
window.open("https://beian.miit.gov.cn/#/Integrated/index");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 4: {
|
||||||
|
//网站隐私协议
|
||||||
|
router.push({
|
||||||
|
name: "privacy-policy",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 5: {
|
||||||
|
// ICP备案信息
|
||||||
|
window.open("https://beian.miit.gov.cn/");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 6: {
|
||||||
|
// 公司官网
|
||||||
|
window.open("https://www.mingyanglg.com");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 7: {
|
||||||
|
// 公安备案信息
|
||||||
|
window.open("http://www.beian.gov.cn/");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//折叠面板组件
|
||||||
|
const TransitTap = (symbolName) => {
|
||||||
|
footTabs.forEach((it) => {
|
||||||
|
symbolName == it.enName ? (it.expand = !it.expand) : (it.expand = false);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 接口
|
||||||
|
const goTab = (path) => {
|
||||||
|
router.push({
|
||||||
|
name: path,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<!-- 联系我们部分 -->
|
||||||
|
<div class="foot">
|
||||||
|
<!-- 1024 -->
|
||||||
|
<div class="pc-show-bar">
|
||||||
|
<!-- 头部 -->
|
||||||
|
<div class="foot-flex">
|
||||||
|
<div class="foot-top">
|
||||||
|
<div class="footer-content">
|
||||||
|
<!-- 公司信息 -->
|
||||||
|
<div class="company-info">
|
||||||
|
<div class="company-logo">
|
||||||
|
<div class="logo-section">
|
||||||
|
<div class="company-name">{{ t('footer.company.name') }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>{{ t('footer.company.description') }}</h3>
|
||||||
|
<p>{{ t('footer.company.design') }}</p>
|
||||||
|
|
||||||
|
<div class="contact-info">
|
||||||
|
<p>{{ t('footer.wechat') }}: +86 131 2923 4398</p>
|
||||||
|
<p>{{ t('footer.whatsapp') }}: +86 158 7678 7345</p>
|
||||||
|
<p>
|
||||||
|
{{ t('footer.address') }}: {{ t('contact.company.address') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 二维码区域 -->
|
||||||
|
<div class="qr-codes">
|
||||||
|
<div class="qr-code-item">
|
||||||
|
<div class="qr-placeholder">{{ t('footer.qr.wechat') }}</div>
|
||||||
|
<p>+86 131 2923 4398</p>
|
||||||
|
</div>
|
||||||
|
<div class="qr-code-item">
|
||||||
|
<div class="qr-placeholder">{{ t('footer.qr.whatsapp') }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分隔线 -->
|
||||||
|
<div class="separator-line"></div>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-show-bar">
|
||||||
|
<!-- 移动端简化版 -->
|
||||||
|
<div class="mobile-footer">
|
||||||
|
<div class="mobile-company-info">
|
||||||
|
<h4>{{ t('footer.company.name') }}</h4>
|
||||||
|
<p>{{ t('footer.company.description') }}</p>
|
||||||
|
<p>{{ t('footer.company.design') }}</p>
|
||||||
|
<p>{{ t('footer.wechat') }}: +86 131 2923 4398</p>
|
||||||
|
<p>{{ t('footer.whatsapp') }}: +86 158 7678 7345</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 末尾 -->
|
||||||
|
<div class="foot-bottom" v-if="langIs === 'cn'">
|
||||||
|
<div class="foot-bottom__box">
|
||||||
|
<div class="foot-bottom__box__content">
|
||||||
|
<p class="foot-bottom__box__content__copyright">
|
||||||
|
版权所有 © 2025 明阳良光 |
|
||||||
|
<a @click="GoAgreement(5)" class="foot-bottom__box__content__link">粤ICP备2023070569号</a> |
|
||||||
|
<a @click="GoAgreement(7)" class="foot-bottom__box__content__link">粤公网安备 粤ICP备2023070569号</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "style/foot-bar.scss";
|
||||||
|
|
||||||
|
.pc-show-bar {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media (min-width: 1025px) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-show-bar {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$form_mg0611-padding: 6.25vw 0;
|
||||||
|
$form-theme-color: #2164ff;
|
||||||
|
|
||||||
|
// 新的底部样式
|
||||||
|
.footer-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px 20px 15px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1800px;
|
||||||
|
padding: 40px 60px 30px;
|
||||||
|
gap: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 1500px;
|
||||||
|
padding: 35px 50px 25px;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
max-width: 1300px;
|
||||||
|
padding: 30px 40px 20px;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 25px 30px 18px;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
padding: 20px 20px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
gap: 20px;
|
||||||
|
padding: 18px 16px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
gap: 16px;
|
||||||
|
padding: 15px 12px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分隔线样式
|
||||||
|
.separator-line {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1800px;
|
||||||
|
padding: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 1500px;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #585656;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.company-logo {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-section {
|
||||||
|
.company-name {
|
||||||
|
font-size: 18px !important;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #343434;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: 24px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #343434;
|
||||||
|
margin: 8px 0;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: 22px;
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 9px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #626262;
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 13px !important;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: 15px !important;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: 14px !important;
|
||||||
|
margin: 7px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: 13px !important;
|
||||||
|
margin: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 12px !important;
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
font-size: 11px !important;
|
||||||
|
margin: 3px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
margin-top: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 6px 0;
|
||||||
|
color: #626262;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
margin: 8px 0;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
margin: 7px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
margin: 4px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-codes {
|
||||||
|
display: flex;
|
||||||
|
gap: 25px;
|
||||||
|
margin-left: 30px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
gap: 40px;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
gap: 35px;
|
||||||
|
margin-left: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
gap: 30px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
gap: 20px;
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
margin-left: 0;
|
||||||
|
gap: 15px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code-item {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.qr-placeholder {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border: 2px solid #626262;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #626262;
|
||||||
|
font-size: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 11px;
|
||||||
|
border-radius: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
width: 130px;
|
||||||
|
height: 130px;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
font-size: 11px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
font-size: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #626262;
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-footer {
|
||||||
|
padding: 20px 20px;
|
||||||
|
|
||||||
|
.mobile-company-info {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: #343434;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #626262;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单样式
|
||||||
|
.contact-form {
|
||||||
|
width: 5.2rem;
|
||||||
|
margin: 10px auto;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 30px 20px 40px;
|
||||||
|
background-color: #4d4d4d;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 49.2%;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
background: #fcfcfc;
|
||||||
|
height: 0.4rem;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.06rem;
|
||||||
|
border-radius: 0.03rem;
|
||||||
|
padding: 0px 0.15rem;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
color: #000;
|
||||||
|
-webkit-transition: all 0.5s;
|
||||||
|
-o-transition: all 0.5s;
|
||||||
|
transition: all 0.5s;
|
||||||
|
font-family: MiSans-Normal;
|
||||||
|
|
||||||
|
@media (max-width: 1440px) {
|
||||||
|
font-size: 13.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 12px;
|
||||||
|
height: 35px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 1rem;
|
||||||
|
padding: 0.15rem;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 12px;
|
||||||
|
height: 120px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 1rem;
|
||||||
|
height: 0.34rem;
|
||||||
|
text-align: center;
|
||||||
|
background: $form-theme-color;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
@media (max-width: 1440px) {
|
||||||
|
font-size: 13.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部版权信息样式
|
||||||
|
.foot-bottom {
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1800px;
|
||||||
|
padding: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 1500px;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: auto;
|
||||||
|
padding: 15px 0;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
padding: 25px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
padding: 22px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 18px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__copyright {
|
||||||
|
color: #626262;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 2.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
color: #2c3e50;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,323 @@
|
||||||
|
|
||||||
|
$samll-color: #626262;
|
||||||
|
$foot-bottom-color: #999;
|
||||||
|
.page {
|
||||||
|
background-color: #f4f4f4 !important;
|
||||||
|
|
||||||
|
@mixin titleStyle {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
color: #343434;
|
||||||
|
line-height: 2.8;
|
||||||
|
|
||||||
|
@media (min-width:1900px) {
|
||||||
|
font-size: 0.17rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
font-size: 0.23rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:1024px) and (max-width:1450px) {
|
||||||
|
font-size: 0.26rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin samllStyle {
|
||||||
|
cursor: pointer;
|
||||||
|
color: $samll-color;
|
||||||
|
line-height: 2.5;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
font-size: 0.17rem;
|
||||||
|
font-family: MiSans-Normal;
|
||||||
|
transition: .3s;
|
||||||
|
|
||||||
|
@media (min-width:1900px) {
|
||||||
|
font-size: 0.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:1024px) and (max-width:1450px) {
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #2164ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 头部
|
||||||
|
.foot {
|
||||||
|
color: #343434;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
@media (max-width:1024px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.foot-flex{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot-top {
|
||||||
|
padding: 20px 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: inherit;
|
||||||
|
|
||||||
|
&__Item {
|
||||||
|
&:nth-child(3){
|
||||||
|
width: 19%
|
||||||
|
}
|
||||||
|
&:last-child{
|
||||||
|
margin-top: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
&:nth-child(3){
|
||||||
|
width: 24%;
|
||||||
|
// border: 1px solid #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
@include titleStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__small {
|
||||||
|
@include samllStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__small-2 {
|
||||||
|
@include samllStyle;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__marginTop{
|
||||||
|
.foot-top__list__Item{
|
||||||
|
&:last-child{
|
||||||
|
width: 26%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//末尾
|
||||||
|
.foot-bottom {
|
||||||
|
color: $foot-bottom-color;
|
||||||
|
padding: 10px 0 15px;
|
||||||
|
font-size: 0.19rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (min-width:1900px) {
|
||||||
|
font-size: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
font-size: 0.21rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:1024px) and (max-width:1450px) {
|
||||||
|
font-size: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
@media (max-width:1450px) {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
&__text {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media (min-width:1024px) {
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 0.01rem solid $foot-bottom-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: $foot-bottom-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1024px) {
|
||||||
|
@mixin mobileFontSize {
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0.1rem 0;
|
||||||
|
line-height: 3.5;
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media (max-width:750px) {
|
||||||
|
// font-size: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:650px) {
|
||||||
|
padding: 0 0.6rem;
|
||||||
|
// font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:500px) {
|
||||||
|
// padding: 0 0.8rem;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-foot {
|
||||||
|
padding: 20px 0 0;
|
||||||
|
|
||||||
|
&__col {
|
||||||
|
width: 100%;
|
||||||
|
font-family: MiSans-Normal;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #343434;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
&__title {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #4d4d4d;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
@include mobileFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
margin: 0.12rem 0px;
|
||||||
|
@include mobileFontSize;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主体
|
||||||
|
&__content {
|
||||||
|
color: #626262;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height .5s ease-in-out;
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
padding: 0.3rem 0.8rem;
|
||||||
|
color: #626262;
|
||||||
|
|
||||||
|
&__element {
|
||||||
|
@include mobileFontSize;
|
||||||
|
line-height: 2.5;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
@media (min-width:1025px) {
|
||||||
|
&:hover {
|
||||||
|
color: #2164ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//末尾
|
||||||
|
.foot-bottom {
|
||||||
|
color: $foot-bottom-color;
|
||||||
|
padding: 15px 0 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
border-top: 1px solid #2a2a2a;
|
||||||
|
width: 100%;
|
||||||
|
min-height: auto;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:800px) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1.8;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 15px 0 20px;
|
||||||
|
&__space{
|
||||||
|
@media (max-width:800px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: $foot-bottom-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,323 @@
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
langSet: {
|
||||||
|
type: String,
|
||||||
|
default: 'en'
|
||||||
|
},
|
||||||
|
backGroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#F2F2F2'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page" :style="{'background':backGroundColor}">
|
||||||
|
<!-- 优势 -->
|
||||||
|
<section class="features" v-if="props.langSet == 'zh-Hans'">
|
||||||
|
<div class="features__item">
|
||||||
|
<img src="/static/odm-oem/features-icon-1.webp" alt="核心技术" class="features__item__icon">
|
||||||
|
<div class="features__item__content">
|
||||||
|
<h3 class="features__item__content__title">核心技术</h3>
|
||||||
|
<p class="features__item__content__description">电池包热管理<br>PCS 智能双向逆变器<br>混合动力集成控制</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features__item">
|
||||||
|
<img src="/static/odm-oem/features-icon-2.webp" alt="自动化工厂" class="features__item__icon">
|
||||||
|
<div class="features__item__content">
|
||||||
|
<h3 class="features__item__content__title">自动化工厂</h3>
|
||||||
|
<p class="features__item__content__description">总面积12000平方米<br>选用全球前十半导体<br>供应商芯片</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features__item">
|
||||||
|
<img src="/static/odm-oem/features-icon-3.webp" alt="全球储能先驱" class="features__item__icon">
|
||||||
|
<div class="features__item__content">
|
||||||
|
<h3 class="features__item__content__title">全球储能先驱</h3>
|
||||||
|
<p class="features__item__content__description">超过两百万台机器<br>销往100多个国家和地区</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="features__item">
|
||||||
|
<img src="/static/odm-oem/features-icon-4.webp" alt="尖端的产品设计" class="features__item__icon">
|
||||||
|
<div class="features__item__content">
|
||||||
|
<h3 class="features__item__content__title">尖端的产品设计</h3>
|
||||||
|
<p class="features__item__content__description">国家专利<br>知识产权</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 英文优势2 -->
|
||||||
|
<section class="protrude" v-else>
|
||||||
|
<div class="protrude__item">
|
||||||
|
<h2 class="protrude__item__title">Core technology</h2>
|
||||||
|
<ul class="protrude__item__list">
|
||||||
|
<li>Battery pack thermal management</li>
|
||||||
|
<li>PCS intelligent bidirectional inverter</li>
|
||||||
|
<li>Hybrid integrated control</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="protrude__item">
|
||||||
|
<h2 class="protrude__item__title">Automated factory</h2>
|
||||||
|
<ul class="protrude__item__list">
|
||||||
|
<li>Total area 12000 square meters</li>
|
||||||
|
<li>Select the chip from world's top ten semiconductors supplier</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="protrude__item">
|
||||||
|
<h2 class="protrude__item__title">Global energy storage pioneer</h2>
|
||||||
|
<ul class="protrude__item__list">
|
||||||
|
<li>Over two million machines sold to more than 100 countries and regions</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="protrude__item">
|
||||||
|
<h2 class="protrude__item__title">Cutting-edge product design</h2>
|
||||||
|
<ul class="protrude__item__list">
|
||||||
|
<li>National patent</li>
|
||||||
|
<li>Intellectual property</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@mixin smallStyle {
|
||||||
|
font-size: 0.18rem;
|
||||||
|
|
||||||
|
@media (min-width:1920px) {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:750px) {
|
||||||
|
font-size: 0.52rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 英文优势
|
||||||
|
.protrude {
|
||||||
|
width: 18rem;
|
||||||
|
margin: 0.9rem auto 0.45rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 0.1rem 0 0 0.1rem;
|
||||||
|
width: 4.2rem;
|
||||||
|
height: 1.8rem;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
color: #333333;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
list-style-type: disc;
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: disc;
|
||||||
|
@include smallStyle;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
li::marker {
|
||||||
|
color: #0072FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1450px) {
|
||||||
|
width: 16rem;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 7.8rem;
|
||||||
|
height: 2.4rem;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0.2rem 0.3rem 0 0.3rem;
|
||||||
|
box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
|
||||||
|
&:nth-child(n+3) {
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.33rem;
|
||||||
|
color: #333333;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
padding-left: 0.3rem;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
@include smallStyle;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
li::marker {
|
||||||
|
color: #0072FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:750px) {
|
||||||
|
width: 18.3rem;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 9rem;
|
||||||
|
height: 4rem;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0.2rem 0rem 0 0.3rem;
|
||||||
|
box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
|
||||||
|
&:nth-child(n+3) {
|
||||||
|
margin-top: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
color: #333333;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
padding-left: 0.6rem;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 0.44rem;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
li::marker {
|
||||||
|
color: #0072FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 中文优势
|
||||||
|
.features {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
width: 16rem;
|
||||||
|
margin: 0.7rem auto;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 3.74rem;
|
||||||
|
height: 1.8rem;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0.2rem 0.1rem;
|
||||||
|
box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
width: 0.9rem;
|
||||||
|
height: 0.9rem;
|
||||||
|
margin-right: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
&__title {
|
||||||
|
font-size: 0.3rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
color: #333;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:1450px) {
|
||||||
|
width: 15rem;
|
||||||
|
&__item {
|
||||||
|
width: 7.3rem;
|
||||||
|
height: 2.4rem;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0.2rem 0.1rem;
|
||||||
|
box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
&:nth-child(n+3){
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
margin-right: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
&__title {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description {
|
||||||
|
font-size: 0.26rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:750px) {
|
||||||
|
width: 17rem;
|
||||||
|
&__item {
|
||||||
|
width: 8rem;
|
||||||
|
height: 4rem;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0.2rem 0.1rem;
|
||||||
|
box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
&:nth-child(n+3){
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-right: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
&__title {
|
||||||
|
font-size: 0.62rem;
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__description {
|
||||||
|
@include smallStyle;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,313 @@
|
||||||
|
// PC端的宽度
|
||||||
|
@mixin pc-statusWidth {
|
||||||
|
width: 15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin statusHeight {
|
||||||
|
height: $nav-height;
|
||||||
|
line-height: $nav-height;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
height: $nav-1600-height;
|
||||||
|
line-height: $nav-1600-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 导航栏中间字体大小控制
|
||||||
|
@mixin navContentSize {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.17rem;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
margin-top: 0.07rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
font-size: 0.23rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
line-height: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//下拉弹框
|
||||||
|
@mixin popupOfficeStyle {
|
||||||
|
top: 0;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 0.03rem;
|
||||||
|
background: $nav-menu;
|
||||||
|
margin: $nav-height 0 0 0.03rem;
|
||||||
|
box-shadow: 0 0.05rem 0.13rem #00000026;
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 2.1rem;
|
||||||
|
z-index: 10000;
|
||||||
|
font-family: MiSans-Light;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
padding: 0.15rem 0.1rem;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
height: 0.45rem;
|
||||||
|
line-height: 0.45rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 0.1rem;
|
||||||
|
color: $nav-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #4283fb;
|
||||||
|
border-radius: 0.02rem;
|
||||||
|
color: $nav-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
min-width: 3rem;
|
||||||
|
top: 0.1rem;
|
||||||
|
&__box{
|
||||||
|
padding: 0.2rem 0.15rem;
|
||||||
|
&__item {
|
||||||
|
height: 0.6rem;
|
||||||
|
line-height: 0.6rem;
|
||||||
|
font-size: 0.23rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Nav {
|
||||||
|
width: 100%;
|
||||||
|
@include statusHeight;
|
||||||
|
z-index: 10000;
|
||||||
|
background: #ffffff;
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background: #ffffff;
|
||||||
|
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导航栏
|
||||||
|
&-div {
|
||||||
|
box-sizing: content-box;
|
||||||
|
@include pc-statusWidth;
|
||||||
|
@include statusHeight;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: transparent;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 1.23rem;
|
||||||
|
@include statusHeight;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
line-height: 0.6rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
&__avater{
|
||||||
|
width: 1.06rem;
|
||||||
|
height: 0.6rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.Nav-flex {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//中间导航栏
|
||||||
|
.Nav-div__menu {
|
||||||
|
width: fit-content;
|
||||||
|
@include statusHeight;
|
||||||
|
display: flex;
|
||||||
|
padding-right: 0.08rem;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
color: $nav-color;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
@include statusHeight;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 0.18rem;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
p {
|
||||||
|
@include navContentSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__border {
|
||||||
|
width: 0;
|
||||||
|
height: 0.028rem;
|
||||||
|
margin-top: 0;
|
||||||
|
background-color: $nav-color;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__borderActive {
|
||||||
|
width: 0.32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--itemActive {
|
||||||
|
p {
|
||||||
|
color: $nav-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解决鼠标移除和点击事件冲突
|
||||||
|
&--itemActive2 {
|
||||||
|
p {
|
||||||
|
color: $nav-color;
|
||||||
|
// font-weight: 500
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__popup-office {
|
||||||
|
// 下拉弹框
|
||||||
|
@include popupOfficeStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//解决两个子项长度
|
||||||
|
&--active2 {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
&--zh-lang{
|
||||||
|
min-width: 1.9rem;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
min-width: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__shop {
|
||||||
|
@include statusHeight;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
&__search {
|
||||||
|
width: 0.2rem;
|
||||||
|
@include statusHeight;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: $popup-sty-color;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
width: 0.3rem;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__earth {
|
||||||
|
width: fit-content;
|
||||||
|
@include statusHeight;
|
||||||
|
font-family: MiSans-Light;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: $nav-color;
|
||||||
|
font-size: 0.17rem;
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
padding-left: 0.3rem;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
&__avater{
|
||||||
|
width: 0.2rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
}
|
||||||
|
&__text {
|
||||||
|
// 标记位置
|
||||||
|
@include statusHeight;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
padding-left: 0.1rem;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__popup-office {
|
||||||
|
// 下拉弹框
|
||||||
|
@include popupOfficeStyle;
|
||||||
|
&:last-child{
|
||||||
|
min-width: 1.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
height: fit-content;
|
||||||
|
color: $nav-color;
|
||||||
|
}
|
||||||
|
&--zh-lang{
|
||||||
|
min-width: 1.9rem;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
min-width: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
/*初始状态 透明度为0*/
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
/*中间状态 透明度为0*/
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
/*结尾状态 透明度为1*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeOut {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
/*初始状态 透明度为0*/
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
/*中间状态 透明度为0*/
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
/*结尾状态 透明度为1*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//动画
|
||||||
|
.fade-enter-from,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-to,
|
||||||
|
.fade-leave-from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 1s ease;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
|
||||||
|
$nav-bg:rgba(3,6,11,0.4);
|
||||||
|
$maincolor-active:#2164ff;
|
||||||
|
.mobile {
|
||||||
|
z-index: 10000;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&-nav {
|
||||||
|
height: 51px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #000000;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
height: 51px;
|
||||||
|
&__avater{
|
||||||
|
height: 51px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-syd-logo{
|
||||||
|
font-size: 55px;
|
||||||
|
line-height: 51px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 20px;
|
||||||
|
&__avater{
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&__content{
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
&__content-2{
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端下拉弹框
|
||||||
|
&-popup {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
z-index: 10000;
|
||||||
|
|
||||||
|
&__col {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #000000;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
&__title {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #4d4d4d;
|
||||||
|
|
||||||
|
line-height: 3.5;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: 12.5px;
|
||||||
|
margin-left: 21px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
font-size: 12.5px;
|
||||||
|
line-height: 3.5;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
margin-right: 21px;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主体
|
||||||
|
&__content {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height .5s ease-in-out;
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
padding: 15px 0px 10px 40px;
|
||||||
|
|
||||||
|
&__element {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
@media (min-width:1025px) {
|
||||||
|
&:hover {
|
||||||
|
color: $maincolor-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,636 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, computed, nextTick, watch } from "vue";
|
||||||
|
import { useI18n } from "#imports";
|
||||||
|
import { useRouter, useRoute } from "#imports";
|
||||||
|
import { useLocalePath, useSwitchLocalePath } from "#i18n";
|
||||||
|
|
||||||
|
const { locale, t } = useI18n();
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const localePath = useLocalePath();
|
||||||
|
const switchLocalePath = useSwitchLocalePath();
|
||||||
|
|
||||||
|
// 语言显示
|
||||||
|
const langToShow = computed(() => {
|
||||||
|
switch (locale.value) {
|
||||||
|
case "en":
|
||||||
|
return "English";
|
||||||
|
case "cn":
|
||||||
|
return "中文";
|
||||||
|
default:
|
||||||
|
return "English";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 语言列表
|
||||||
|
const langList = ref([
|
||||||
|
{ name: "简体中文", code: "cn", checked: false },
|
||||||
|
{ name: "English", code: "en", checked: true },
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 菜单数据
|
||||||
|
const menuItems = ref([
|
||||||
|
{
|
||||||
|
name: t("nav.home"),
|
||||||
|
enName: "home",
|
||||||
|
path: "/",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t("nav.about"),
|
||||||
|
enName: "about",
|
||||||
|
path: "/about-us",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t("nav.products"),
|
||||||
|
enName: "products",
|
||||||
|
path: "/product",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t("nav.contact"),
|
||||||
|
enName: "contact",
|
||||||
|
path: "/contact-us",
|
||||||
|
active: false,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 监听语言变化，更新菜单名称
|
||||||
|
watch(() => locale.value, () => {
|
||||||
|
menuItems.value.forEach(item => {
|
||||||
|
switch (item.enName) {
|
||||||
|
case "home":
|
||||||
|
item.name = t("nav.home");
|
||||||
|
break;
|
||||||
|
case "about":
|
||||||
|
item.name = t("nav.about");
|
||||||
|
break;
|
||||||
|
case "products":
|
||||||
|
item.name = t("nav.products");
|
||||||
|
break;
|
||||||
|
case "contact":
|
||||||
|
item.name = t("nav.contact");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { immediate: true });
|
||||||
|
|
||||||
|
// 移动端菜单控制
|
||||||
|
const isMobileMenuOpen = ref(false);
|
||||||
|
const langPopup = ref(false);
|
||||||
|
|
||||||
|
// 语言切换
|
||||||
|
const chooseLanguage = (lang) => {
|
||||||
|
if (lang.code === locale.value) {
|
||||||
|
langPopup.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取目标路径并跳转
|
||||||
|
const targetPath = switchLocalePath(lang.code);
|
||||||
|
router.replace(targetPath);
|
||||||
|
|
||||||
|
langPopup.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 菜单点击
|
||||||
|
const handleMenuClick = (item) => {
|
||||||
|
// 使用 localePath 获取当前语言环境下的正确路径
|
||||||
|
const targetPath = localePath(item.path);
|
||||||
|
|
||||||
|
// 跳转到正确的路径
|
||||||
|
router.push(targetPath);
|
||||||
|
isMobileMenuOpen.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置当前活跃菜单
|
||||||
|
const setActiveMenu = () => {
|
||||||
|
const currentPath = route.path;
|
||||||
|
// 重置所有状态
|
||||||
|
menuItems.value.forEach((item) => {
|
||||||
|
item.active = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 根据路径设置激活状态
|
||||||
|
if (currentPath === "/" || currentPath === "/cn") {
|
||||||
|
const homeItem = menuItems.value.find((item) => item.enName === "home");
|
||||||
|
if (homeItem) {
|
||||||
|
homeItem.active = true;
|
||||||
|
}
|
||||||
|
} else if (currentPath.includes("/about-us")) {
|
||||||
|
const aboutItem = menuItems.value.find((item) => item.enName === "about");
|
||||||
|
if (aboutItem) {
|
||||||
|
aboutItem.active = true;
|
||||||
|
}
|
||||||
|
} else if (currentPath.includes("/product")) {
|
||||||
|
const productItem = menuItems.value.find((item) => item.enName === "products");
|
||||||
|
if (productItem) {
|
||||||
|
productItem.active = true;
|
||||||
|
}
|
||||||
|
} else if (currentPath.includes("/contact-us")) {
|
||||||
|
const contactItem = menuItems.value.find((item) => item.enName === "contact");
|
||||||
|
if (contactItem) {
|
||||||
|
contactItem.active = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换移动端菜单
|
||||||
|
const toggleMobileMenu = () => {
|
||||||
|
isMobileMenuOpen.value = !isMobileMenuOpen.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理logo点击
|
||||||
|
const handleLogoClick = () => {
|
||||||
|
// 使用 localePath 获取当前语言环境下的首页路径
|
||||||
|
const homePath = localePath("/");
|
||||||
|
router.push(homePath);
|
||||||
|
menuItems.value.forEach((menu) => {
|
||||||
|
menu.active = menu.enName === "home";
|
||||||
|
});
|
||||||
|
isMobileMenuOpen.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 更新语言列表选中状态
|
||||||
|
langList.value.forEach((item) => {
|
||||||
|
item.checked = item.code === locale.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 确保在下一个 tick 中设置激活菜单
|
||||||
|
nextTick(() => {
|
||||||
|
setActiveMenu();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听路由变化，更新激活状态
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
(newPath) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setActiveMenu();
|
||||||
|
}, 50);
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ClientOnly>
|
||||||
|
<header class="navbar">
|
||||||
|
<div class="navbar-container">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="navbar-logo" @click="handleLogoClick">
|
||||||
|
<img src="/logo.png" alt="明阳良光" class="logo-image" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧区域：菜单+语言切换 -->
|
||||||
|
<div class="navbar-right">
|
||||||
|
<!-- 桌面端菜单 -->
|
||||||
|
<nav class="navbar-menu desktop-menu">
|
||||||
|
<ul class="menu-list">
|
||||||
|
<li
|
||||||
|
v-for="item in menuItems"
|
||||||
|
:key="item.enName"
|
||||||
|
class="menu-item"
|
||||||
|
:class="{ active: item.active }"
|
||||||
|
@click="handleMenuClick(item)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 语言切换和移动端按钮 -->
|
||||||
|
<div class="navbar-actions">
|
||||||
|
<!-- 语言切换 -->
|
||||||
|
<div class="language-selector" @click="langPopup = !langPopup">
|
||||||
|
<img
|
||||||
|
class="lang-earth-icon"
|
||||||
|
src="/static/home/earch.png"
|
||||||
|
:alt="langToShow"
|
||||||
|
:title="langToShow"
|
||||||
|
/>
|
||||||
|
<span class="lang-text">{{ langToShow }}</span>
|
||||||
|
<svg
|
||||||
|
class="lang-icon"
|
||||||
|
:class="{ rotate: langPopup }"
|
||||||
|
width="12"
|
||||||
|
height="12"
|
||||||
|
viewBox="0 0 12 12"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M2 4l4 4 4-4"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- 语言下拉菜单 -->
|
||||||
|
<div class="lang-dropdown" v-show="langPopup">
|
||||||
|
<div
|
||||||
|
v-for="lang in langList"
|
||||||
|
:key="lang.code"
|
||||||
|
class="lang-option"
|
||||||
|
:class="{ active: lang.checked }"
|
||||||
|
@click.stop="chooseLanguage(lang)"
|
||||||
|
>
|
||||||
|
{{ lang.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端菜单按钮 -->
|
||||||
|
<button class="mobile-menu-btn" @click="toggleMobileMenu">
|
||||||
|
<span
|
||||||
|
class="hamburger-line"
|
||||||
|
:class="{ active: isMobileMenuOpen }"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="hamburger-line"
|
||||||
|
:class="{ active: isMobileMenuOpen }"
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
class="hamburger-line"
|
||||||
|
:class="{ active: isMobileMenuOpen }"
|
||||||
|
></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端菜单 -->
|
||||||
|
<div class="mobile-menu" :class="{ open: isMobileMenuOpen }">
|
||||||
|
<ul class="mobile-menu-list">
|
||||||
|
<li
|
||||||
|
v-for="item in menuItems"
|
||||||
|
:key="item.enName"
|
||||||
|
class="mobile-menu-item"
|
||||||
|
:class="{ active: item.active }"
|
||||||
|
@click="handleMenuClick(item)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端背景遮罩 -->
|
||||||
|
<div
|
||||||
|
class="mobile-overlay"
|
||||||
|
:class="{ show: isMobileMenuOpen }"
|
||||||
|
@click="isMobileMenuOpen = false"
|
||||||
|
></div>
|
||||||
|
</header>
|
||||||
|
</ClientOnly>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #ffffff;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid #e0e0e0;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 40px;
|
||||||
|
height: 50px;
|
||||||
|
gap: 60px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 50px;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-logo {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-image {
|
||||||
|
height: 36px;
|
||||||
|
width: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-menu {
|
||||||
|
&.desktop-menu {
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 菜单样式
|
||||||
|
.menu-list {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
gap: 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
position: relative;
|
||||||
|
padding: 16px 20px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
// 下划线样式
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 14px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #000000;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #000000;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
// 激活时显示下划线
|
||||||
|
&::after {
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 14px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 12px 14px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 语言选择器
|
||||||
|
.language-selector {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
z-index: 1001;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-earth-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
object-fit: contain;
|
||||||
|
filter: brightness(0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-text {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-icon {
|
||||||
|
color: #666666;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
|
||||||
|
&.rotate {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 8px 12px;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
.lang-earth-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 8px;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 140px;
|
||||||
|
z-index: 1002;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-option {
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #000000;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端菜单按钮
|
||||||
|
.mobile-menu-btn {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-line {
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
background: #000000;
|
||||||
|
border-radius: 1px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin: 2px 0;
|
||||||
|
|
||||||
|
&:nth-child(1).active {
|
||||||
|
transform: rotate(45deg) translate(5px, 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2).active {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3).active {
|
||||||
|
transform: rotate(-45deg) translate(7px, -6px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端菜单
|
||||||
|
.mobile-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: white;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
padding: 16px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000000;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #000000;
|
||||||
|
background: rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端背景遮罩
|
||||||
|
.mobile-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式调整
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.navbar {
|
||||||
|
&-container {
|
||||||
|
.logo-image {
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { getCdnImageUrl, getCdnStaticUrl, appConfig } from '@/config';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图片路径管理的composable函数
|
||||||
|
* 提供便捷的图片路径处理方法
|
||||||
|
*/
|
||||||
|
export function useImagePath() {
|
||||||
|
/**
|
||||||
|
* 处理图片路径，自动添加CDN前缀
|
||||||
|
* @param {string} path - 图片相对路径
|
||||||
|
* @returns {string} 完整的图片URL
|
||||||
|
*/
|
||||||
|
const cdnImageUrl = (path) => {
|
||||||
|
if (!path) return '';
|
||||||
|
return getCdnImageUrl(path);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理静态资源路径，自动添加CDN前缀
|
||||||
|
* @param {string} path - 静态资源相对路径
|
||||||
|
* @returns {string} 完整的静态资源URL
|
||||||
|
*/
|
||||||
|
const cdnStaticUrl = (path) => {
|
||||||
|
if (!path) return '';
|
||||||
|
return getCdnStaticUrl(path);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量处理图片路径数组
|
||||||
|
* @param {string[]} paths - 图片路径数组
|
||||||
|
* @returns {string[]} 处理后的图片URL数组
|
||||||
|
*/
|
||||||
|
const cdnImageUrls = (paths) => {
|
||||||
|
if (!Array.isArray(paths)) return [];
|
||||||
|
return paths.map(path => cdnImageUrl(path));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建响应式的图片路径
|
||||||
|
* @param {string} path - 图片相对路径
|
||||||
|
* @returns {ComputedRef<string>} 响应式的图片URL
|
||||||
|
*/
|
||||||
|
const reactiveCdnImageUrl = (path) => {
|
||||||
|
return computed(() => cdnImageUrl(path));
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前环境信息
|
||||||
|
*/
|
||||||
|
const env = {
|
||||||
|
isDev: appConfig.isDev(),
|
||||||
|
isProd: appConfig.isProd(),
|
||||||
|
isStaging: appConfig.isStaging(),
|
||||||
|
current: appConfig.getEnv()
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前配置信息
|
||||||
|
*/
|
||||||
|
const config = appConfig.getConfig();
|
||||||
|
|
||||||
|
return {
|
||||||
|
cdnImageUrl,
|
||||||
|
cdnStaticUrl,
|
||||||
|
cdnImageUrls,
|
||||||
|
reactiveCdnImageUrl,
|
||||||
|
env,
|
||||||
|
config
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
// 统一的语言检测逻辑，确保服务器端和客户端一致
|
||||||
|
export const useLanguageDetection = () => {
|
||||||
|
// 检测初始语言的统一逻辑
|
||||||
|
const detectInitialLanguage = () => {
|
||||||
|
// 服务端环境
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return 'en'; // 服务端默认英文，实际语言由中间件设置
|
||||||
|
}
|
||||||
|
|
||||||
|
// 客户端环境
|
||||||
|
try {
|
||||||
|
// 1. 优先使用cookie（与服务器中间件保持一致）
|
||||||
|
const cookies = document.cookie.split(';');
|
||||||
|
const localeCookie = cookies.find(cookie =>
|
||||||
|
cookie.trim().startsWith('i18n_redirected=')
|
||||||
|
);
|
||||||
|
if (localeCookie) {
|
||||||
|
const langValue = localeCookie.split('=')[1];
|
||||||
|
if (['cn', 'en'].includes(langValue)) {
|
||||||
|
return langValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 检查内联脚本设置的语言
|
||||||
|
const scriptLang = window.__INITIAL_LANG__ ||
|
||||||
|
document.documentElement.getAttribute('data-initial-lang');
|
||||||
|
if (scriptLang && ['cn', 'en'].includes(scriptLang)) {
|
||||||
|
return scriptLang;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 检查localStorage
|
||||||
|
const storedLang = localStorage.getItem('locale_lang');
|
||||||
|
if (storedLang && ['cn', 'en'].includes(storedLang)) {
|
||||||
|
return storedLang;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 4. 检查浏览器语言（与服务器中间件保持一致）
|
||||||
|
if (navigator.language.startsWith("en")) {
|
||||||
|
return "en";
|
||||||
|
} else if (navigator.language.includes("zh")) {
|
||||||
|
return "cn";
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('Language detection failed:', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'en'; // 默认英文
|
||||||
|
};
|
||||||
|
|
||||||
|
// 保存语言设置
|
||||||
|
const saveLanguage = (lang) => {
|
||||||
|
if (typeof window === 'undefined') return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 保存到Cookie（使用Nuxt i18n的标准键名）
|
||||||
|
document.cookie = 'i18n_redirected=' + lang + '; path=/; max-age=31536000';
|
||||||
|
|
||||||
|
// 保存到localStorage
|
||||||
|
localStorage.setItem('locale_lang', lang);
|
||||||
|
|
||||||
|
// 更新全局变量
|
||||||
|
window.__INITIAL_LANG__ = lang;
|
||||||
|
window.__I18N_INITIAL_LOCALE__ = lang;
|
||||||
|
|
||||||
|
// 更新文档属性
|
||||||
|
document.documentElement.setAttribute('data-initial-lang', lang);
|
||||||
|
document.documentElement.setAttribute('data-locale', lang);
|
||||||
|
document.documentElement.setAttribute('lang', lang === 'cn' ? 'zh-CN' : 'en');
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Language save failed:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
detectInitialLanguage,
|
||||||
|
saveLanguage
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { watch } from 'vue';
|
||||||
|
import { useI18n } from '#imports';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用于设置页面标题的可组合函数
|
||||||
|
* @param {string} pageTitleKey - 页面标题的国际化key
|
||||||
|
*/
|
||||||
|
export function usePageTitle(pageTitleKey) {
|
||||||
|
const { t, locale } = useI18n();
|
||||||
|
|
||||||
|
// 设置页面标题
|
||||||
|
const setPageTitle = () => {
|
||||||
|
if (typeof document === 'undefined') return; // SSR检查
|
||||||
|
|
||||||
|
const baseTitle = t("page.company-abbreviation");
|
||||||
|
const pageTitle = t(pageTitleKey);
|
||||||
|
document.title = `${pageTitle} - ${baseTitle}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听语言变化，更新标题
|
||||||
|
watch(() => locale.value, setPageTitle, { immediate: true });
|
||||||
|
|
||||||
|
return {
|
||||||
|
setPageTitle
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { useI18n } from '#imports'
|
||||||
|
|
||||||
|
// 静态数据缓存
|
||||||
|
let staticDataCache = null
|
||||||
|
|
||||||
|
// 获取静态数据
|
||||||
|
const getStaticData = () => {
|
||||||
|
if (staticDataCache) {
|
||||||
|
return staticDataCache
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 在客户端环境下，从window对象获取预渲染的数据
|
||||||
|
if (typeof window !== 'undefined' && window.__NUXT_STATIC_DATA__) {
|
||||||
|
staticDataCache = window.__NUXT_STATIC_DATA__
|
||||||
|
return staticDataCache
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在服务端环境下，尝试读取静态数据文件
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
const fs = require('fs')
|
||||||
|
const path = require('path')
|
||||||
|
const dataPath = path.join(process.cwd(), 'src', 'static-data', 'api-data.json')
|
||||||
|
|
||||||
|
if (fs.existsSync(dataPath)) {
|
||||||
|
const data = JSON.parse(fs.readFileSync(dataPath, 'utf8'))
|
||||||
|
staticDataCache = data
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('获取静态数据失败:', error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用静态数据的composable
|
||||||
|
export const useStaticData = () => {
|
||||||
|
const { locale } = useI18n()
|
||||||
|
|
||||||
|
// 获取当前语言的数据
|
||||||
|
const getCurrentLocaleData = computed(() => {
|
||||||
|
const data = getStaticData()
|
||||||
|
return data ? data[locale.value] || data.en : null
|
||||||
|
})
|
||||||
|
|
||||||
|
// 轮播图数据
|
||||||
|
const carouselData = computed(() => {
|
||||||
|
const data = getCurrentLocaleData.value
|
||||||
|
return data?.carousel?.rows || []
|
||||||
|
})
|
||||||
|
|
||||||
|
// 产品分类数据
|
||||||
|
const categoryData = computed(() => {
|
||||||
|
const data = getCurrentLocaleData.value
|
||||||
|
return data?.categories?.rows || []
|
||||||
|
})
|
||||||
|
|
||||||
|
// 产品列表数据
|
||||||
|
const productData = computed(() => {
|
||||||
|
const data = getCurrentLocaleData.value
|
||||||
|
return data?.products?.rows || []
|
||||||
|
})
|
||||||
|
|
||||||
|
// 新闻数据
|
||||||
|
const newsData = computed(() => {
|
||||||
|
const data = getCurrentLocaleData.value
|
||||||
|
return data?.news?.rows || []
|
||||||
|
})
|
||||||
|
|
||||||
|
// 证书数据
|
||||||
|
const certificateData = computed(() => {
|
||||||
|
const data = getCurrentLocaleData.value
|
||||||
|
return data?.certificates?.rows || []
|
||||||
|
})
|
||||||
|
|
||||||
|
// APP下载数据
|
||||||
|
const downloadData = computed(() => {
|
||||||
|
const data = getCurrentLocaleData.value
|
||||||
|
return data?.downloads?.rows || []
|
||||||
|
})
|
||||||
|
|
||||||
|
// 检查是否有静态数据
|
||||||
|
const hasStaticData = computed(() => {
|
||||||
|
return !!getStaticData()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
carouselData,
|
||||||
|
categoryData,
|
||||||
|
productData,
|
||||||
|
newsData,
|
||||||
|
certificateData,
|
||||||
|
downloadData,
|
||||||
|
hasStaticData,
|
||||||
|
getCurrentLocaleData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
// CDN配置 - 你可以在这里修改CDN路径
|
||||||
|
const CDN_CONFIG = {
|
||||||
|
// 开发环境CDN路径 - 修改这里
|
||||||
|
development: 'http://t19x0c1nb.hn-bkt.clouddn.com',
|
||||||
|
|
||||||
|
// 生产环境CDN路径 - 修改这里
|
||||||
|
production: 'http://t19x0c1nb.hn-bkt.clouddn.com'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 环境配置
|
||||||
|
const config = {
|
||||||
|
// 开发环境配置
|
||||||
|
development: {
|
||||||
|
cdnBaseUrl: CDN_CONFIG.development,
|
||||||
|
apiBaseUrl: 'http://localhost:3000/api',
|
||||||
|
imageBaseUrl: `${CDN_CONFIG.development}/static`
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生产环境配置
|
||||||
|
production: {
|
||||||
|
cdnBaseUrl: CDN_CONFIG.production,
|
||||||
|
apiBaseUrl: 'https://your-api-domain.com/api',
|
||||||
|
imageBaseUrl: `${CDN_CONFIG.production}/static`
|
||||||
|
},
|
||||||
|
|
||||||
|
// 测试环境配置
|
||||||
|
staging: {
|
||||||
|
cdnBaseUrl: CDN_CONFIG.production, // 测试环境使用生产CDN
|
||||||
|
apiBaseUrl: 'https://staging-api.your-domain.com/api',
|
||||||
|
imageBaseUrl: `${CDN_CONFIG.production}/static`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取当前环境
|
||||||
|
const getCurrentEnv = () => {
|
||||||
|
if (typeof process !== 'undefined') {
|
||||||
|
return process.env.NODE_ENV || 'development';
|
||||||
|
}
|
||||||
|
return 'development';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取当前环境配置
|
||||||
|
const getCurrentConfig = () => {
|
||||||
|
const env = getCurrentEnv();
|
||||||
|
return config[env] || config.development;
|
||||||
|
};
|
||||||
|
|
||||||
|
// CDN图片路径拼接函数
|
||||||
|
export const getCdnImageUrl = (path) => {
|
||||||
|
const currentConfig = getCurrentConfig();
|
||||||
|
|
||||||
|
// 如果路径已经是完整URL，直接返回
|
||||||
|
if (path.startsWith('http://') || path.startsWith('https://')) {
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果路径以/开头，去掉开头的/
|
||||||
|
const cleanPath = path.startsWith('/') ? path.slice(1) : path;
|
||||||
|
|
||||||
|
// 所有环境都使用CDN路径
|
||||||
|
return `${currentConfig.cdnBaseUrl}/${cleanPath}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// CDN静态资源路径拼接函数
|
||||||
|
export const getCdnStaticUrl = (path) => {
|
||||||
|
const currentConfig = getCurrentConfig();
|
||||||
|
|
||||||
|
// 如果路径已经是完整URL，直接返回
|
||||||
|
if (path.startsWith('http://') || path.startsWith('https://')) {
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果路径以/开头，去掉开头的/
|
||||||
|
const cleanPath = path.startsWith('/') ? path.slice(1) : path;
|
||||||
|
|
||||||
|
// 所有环境都使用CDN路径
|
||||||
|
return `${currentConfig.cdnBaseUrl}/${cleanPath}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出配置
|
||||||
|
export const appConfig = {
|
||||||
|
// 获取当前环境配置
|
||||||
|
getConfig: getCurrentConfig,
|
||||||
|
|
||||||
|
// 获取当前环境
|
||||||
|
getEnv: getCurrentEnv,
|
||||||
|
|
||||||
|
// CDN图片路径处理
|
||||||
|
getCdnImageUrl,
|
||||||
|
|
||||||
|
// CDN静态资源路径处理
|
||||||
|
getCdnStaticUrl,
|
||||||
|
|
||||||
|
// 是否开发环境
|
||||||
|
isDev: () => getCurrentEnv() === 'development',
|
||||||
|
|
||||||
|
// 是否生产环境
|
||||||
|
isProd: () => getCurrentEnv() === 'production',
|
||||||
|
|
||||||
|
// 是否测试环境
|
||||||
|
isStaging: () => getCurrentEnv() === 'staging'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default appConfig;
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
// export 语言检测 - 改进版，支持SSR，与Nuxt i18n保持一致
|
||||||
|
export default function getLanguage() {
|
||||||
|
// 服务端渲染时的默认语言
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return "en";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 客户端逻辑
|
||||||
|
try {
|
||||||
|
// 1. 优先检查cookie（与Nuxt i18n保持一致）
|
||||||
|
const cookies = document.cookie.split(';');
|
||||||
|
const localeCookie = cookies.find(cookie =>
|
||||||
|
cookie.trim().startsWith('i18n_redirected=')
|
||||||
|
);
|
||||||
|
if (localeCookie) {
|
||||||
|
const langValue = localeCookie.split('=')[1];
|
||||||
|
if (['cn', 'en'].includes(langValue)) {
|
||||||
|
return langValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 检查localStorage（兼容旧版本）
|
||||||
|
const langStorage = localStorage.getItem('locale_lang');
|
||||||
|
if (langStorage && ['cn', 'en'].includes(langStorage)) {
|
||||||
|
return langStorage;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 根据浏览器语言判断
|
||||||
|
if (navigator.language.startsWith("en")) {
|
||||||
|
return "en";
|
||||||
|
} else if (navigator.language.includes("zh")) {
|
||||||
|
return "cn";
|
||||||
|
}
|
||||||
|
|
||||||
|
return "en"; // 默认英文
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('localStorage access failed:', error);
|
||||||
|
return "en"; // 错误时返回默认语言
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增：用于组件中的响应式语言检测
|
||||||
|
export async function useLanguage() {
|
||||||
|
// 检查是否在Nuxt环境中
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
// 客户端环境，使用useCookie
|
||||||
|
try {
|
||||||
|
const { useCookie } = await import('#imports');
|
||||||
|
return useCookie('i18n_redirected', {
|
||||||
|
default: () => 'en',
|
||||||
|
secure: false,
|
||||||
|
sameSite: 'lax'
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
// 如果useCookie不可用，回退到普通函数
|
||||||
|
return { value: getLanguage() };
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 服务端环境，回退到普通函数
|
||||||
|
return { value: getLanguage() };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// export 导出防抖函数
|
||||||
|
export const debounce = (func, delay) => {
|
||||||
|
let timerId;
|
||||||
|
return () => {
|
||||||
|
if (timerId) {
|
||||||
|
clearTimeout(timerId);
|
||||||
|
}
|
||||||
|
timerId = setTimeout(() => {
|
||||||
|
func();
|
||||||
|
timerId = null;
|
||||||
|
}, delay);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 时间戳转换年月日
|
||||||
|
export const formatTimestamp = (timestamp) => {
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = date.getMonth() + 1; // getMonth()返回的是0到11，所以要加1
|
||||||
|
const day = date.getDate();
|
||||||
|
// 将月份和日期补零，确保是两位数
|
||||||
|
const formattedMonth = month < 10 ? "0" + month : month;
|
||||||
|
const formattedDay = day < 10 ? "0" + day : day;
|
||||||
|
return `${year}-${formattedMonth}-${formattedDay}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 时间戳转换年月日
|
||||||
|
export const formatTimestamp2 = (timestamp) => {
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, "0"); // 使用padStart()方法补零
|
||||||
|
const day = String(date.getDate()).padStart(2, "0");
|
||||||
|
const hours = String(date.getHours()).padStart(2, "0");
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||||
|
|
||||||
|
return `${year}-${month}-${day}-${hours}:${minutes}`;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import en from "./locale/en.json";
|
||||||
|
import cn from "./locale/cn.json";
|
||||||
|
|
||||||
|
export default defineI18nConfig(() => ({
|
||||||
|
legacy: false,
|
||||||
|
fallbackLocale: 'en',
|
||||||
|
availableLocales: ['cn', 'en'],
|
||||||
|
messages: {
|
||||||
|
en,
|
||||||
|
cn
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
|
@ -0,0 +1,402 @@
|
||||||
|
{
|
||||||
|
"page.home":"首页",
|
||||||
|
"page.odm-oem":"定制服务",
|
||||||
|
"page.product":"产品列表",
|
||||||
|
"page.about-us":"关于我们",
|
||||||
|
"page.honors":"证书荣誉",
|
||||||
|
"page.news":"新闻资讯",
|
||||||
|
"page.contact-us":"联系我们",
|
||||||
|
"page.app-download":"BrightEMS App下载",
|
||||||
|
"page.news-detail":"新闻详情",
|
||||||
|
"page.core-advantage": "核心优势",
|
||||||
|
"page.detail":"产品详情",
|
||||||
|
"page.company-profile": "公司介绍",
|
||||||
|
"page.support":"支持",
|
||||||
|
"page.company": "中山市明阳良光照明有限公司",
|
||||||
|
"page.back-to-top":"返回顶部",
|
||||||
|
"page.404-content":"抱歉，你访问的页面地址有误，或者不存在",
|
||||||
|
"page.404-button":"返回首页",
|
||||||
|
"page.company-abbreviation":"明阳良光",
|
||||||
|
"page.loading":"数据正在加载中...",
|
||||||
|
|
||||||
|
"navbar.search":"你需要哪些帮助",
|
||||||
|
"navbar.product":"产品",
|
||||||
|
"navbar.app":"APP下载",
|
||||||
|
"navbar.recommend":"搜索建议",
|
||||||
|
"navbar.language":"语言",
|
||||||
|
|
||||||
|
|
||||||
|
"home.sence-main-tile":"户外旅行",
|
||||||
|
"home.sence-main-subTile":"便携式储能电源可以为",
|
||||||
|
"home.sence-main-subTitle-2":"户外活动中的各种设备提供电力",
|
||||||
|
"home.sence-item-1-tile":"停电应急",
|
||||||
|
"home.sence-item-1-subTile":"停电或自然灾害等紧急情况下",
|
||||||
|
"home.sence-item-1-subTitle-2":"储能电源能够提供关键的电力支持",
|
||||||
|
"home.sence-item-2-tile":"工作学习",
|
||||||
|
"home.sence-item-2-subTile":"停电或自然灾害等紧急情况下",
|
||||||
|
"home.sence-item-2-subTitle-2":"办公时不会因为电力不足而受到影响",
|
||||||
|
"home.sence-item-3-tile":"家庭用电",
|
||||||
|
"home.sence-item-3-subTile":"可以作为家庭的备用电源",
|
||||||
|
"home.sence-item-3-subTitle-2":"保持基本通讯和生活功能",
|
||||||
|
"home.certificate-title":"资质认证",
|
||||||
|
"home.certificate-subTitle":"为您的产品保驾护航，以质量赢得信誉，以服务回报客户",
|
||||||
|
|
||||||
|
"home.learn-more": "了解更多",
|
||||||
|
"home.view-more":"查看更多",
|
||||||
|
"home.situation": "明阳良光 企业概况",
|
||||||
|
"home.platform": "台",
|
||||||
|
"home.individual": "个",
|
||||||
|
|
||||||
|
"home.sale": "销售国家",
|
||||||
|
"home.development":"全球业务发展",
|
||||||
|
"home.products": "强大生产能力，销售能力以及售后服务能力，为全球客户提供有力支持，建立长期战略合作关系",
|
||||||
|
"home.Energy": "日产能",
|
||||||
|
"home.service-centers": "海外服务中心",
|
||||||
|
"home.main-products": "主要产品",
|
||||||
|
"home.solar-panel": "太阳能板",
|
||||||
|
"home.power-station": "储能电源",
|
||||||
|
"home.accessory": "配件",
|
||||||
|
"home.temporary-video": "临时视频",
|
||||||
|
"home.image-":"背景图",
|
||||||
|
|
||||||
|
"home.about-syd": "关于明阳良光",
|
||||||
|
"home.professional":"专业的智能系统制造商",
|
||||||
|
"home.year": "年",
|
||||||
|
"home.establish": "公司成立",
|
||||||
|
"home.employees": "公司员工",
|
||||||
|
"home.proportion": "研发占比",
|
||||||
|
"home.factoryarea": "厂房面积",
|
||||||
|
"home.recording":"记录明阳良光改变世界的时刻",
|
||||||
|
|
||||||
|
"foot.service-terms": "服务协议",
|
||||||
|
"foot.privacy-policy": "隐私声明",
|
||||||
|
"foot.valid-email": "请输入有效的电子邮件地址",
|
||||||
|
"foot.company":"中山市明阳良光照明有限公司版权所有",
|
||||||
|
"foot.record-number":"备案号：粤ICP备15063791号",
|
||||||
|
|
||||||
|
"contact.contacts-us": "联系我们",
|
||||||
|
"contact.sub-title-1":"公司信息",
|
||||||
|
"contact.sub-title-2":"联系方式",
|
||||||
|
"contact.official-website":"公司官网",
|
||||||
|
"contact.other-contact":"其它联系方式",
|
||||||
|
"contact.sales-consulting":"销售咨询",
|
||||||
|
"contact.operations-specialist":"运营专员",
|
||||||
|
"contact.after-sale-guarantee":"售后无忧",
|
||||||
|
"contact.cooperation-negotiation":"合作洽谈",
|
||||||
|
|
||||||
|
"contact.address":"地址：",
|
||||||
|
"contact.address-details":"中山市火炬开发区明阳路88号明阳良光科技园",
|
||||||
|
"contact.name":"姓名",
|
||||||
|
"contact.tel":"座机：",
|
||||||
|
"contact.email":"邮箱：",
|
||||||
|
"contact.email-2":"邮箱",
|
||||||
|
"contact.mobile":"手机：",
|
||||||
|
"contact.submit":"提交",
|
||||||
|
"contact.verify-name":"请输入有效的名字",
|
||||||
|
"contact.verify-email":"请输入有效的邮箱",
|
||||||
|
"contact.verify-title":"有其它疑问欢迎随时联系我们",
|
||||||
|
"contact.verify-message":"输入产品详细信息和其它特定要求以获得准确的报价",
|
||||||
|
"contact.submitted-successfully":"提交成功",
|
||||||
|
"contact.submitted-failed":"提交失败",
|
||||||
|
"contact.thank-message": "感谢您的询盘!我们会尽快与您联系!",
|
||||||
|
"contact.thank-message2": "我们会尽快与您联系",
|
||||||
|
"contact.back": "返回首页",
|
||||||
|
|
||||||
|
"aboutus.company": "中山市明阳良光照明有限公司",
|
||||||
|
"aboutus.company-1": "中山市明阳良光照明有限公司成立于2015年，位于中山市火炬开发区，厂区面积超过12000平方米。",
|
||||||
|
"aboutus.company-2": "公司日产能超3000台，年产能达8亿。自成立以来，我司以实事求是的工作理念专注于便携式储能及家庭储能产品的研发和制造。",
|
||||||
|
"aboutus.company-3": "目前已组建一支成熟且拥有丰富经验的研发团队，并在技术突破和产品优化道路上勇攀高峰。",
|
||||||
|
"aboutus.company-4": "",
|
||||||
|
"aboutus.year": "年",
|
||||||
|
"aboutus.founded": "2015",
|
||||||
|
"aboutus.establish": "公司成立",
|
||||||
|
"aboutus.factoryarea": "厂房面积",
|
||||||
|
"aboutus.billion": "亿",
|
||||||
|
"aboutus.annualcapacity": "年产能",
|
||||||
|
"aboutus.technical-patents": "技术专利",
|
||||||
|
"aboutus.force": "核心力量",
|
||||||
|
"aboutus.force-subtitle-1": "经验丰富的开发团队",
|
||||||
|
"aboutus.force-subtitle-2": "严格的质检流程",
|
||||||
|
"aboutus.force-subtitle-3": "强大的供应链体系",
|
||||||
|
"aboutus.force-subtitle-4": "源源不断的人才引进",
|
||||||
|
|
||||||
|
"aboutus.history": "明阳良光发展历程",
|
||||||
|
"aboutus.sub-history-1": "公司核心团队拥有电子技术行业10余年工作经验，对电源产品有深刻的理解，在电子元器件供应链管理有着深厚沉淀,",
|
||||||
|
"aboutus.sub-history-2": "并以强大的数据库及供应链系统做支撑，凭借专业的研发知识和实践精神，为全球用户提供优质产品和技术服务。",
|
||||||
|
"aboutus.establishment-title": "公司成立",
|
||||||
|
"aboutus.establishment-content": "公司成立于粤港澳大湾区核心城市-- - 中山 ",
|
||||||
|
"aboutus.transformation": "公司转型",
|
||||||
|
"aboutus.transformation-content": "由电源方案公司转型为便携 式储能制造企业",
|
||||||
|
"aboutus.Innovation": "创新驱动",
|
||||||
|
"aboutus.Innovation-content": "行业内第一批研发出2000W 双向快充产品的企业。并在 2020年初实现量产出货， 至今累计出货超过5w台",
|
||||||
|
"aboutus.financing": "A轮融资",
|
||||||
|
"aboutus.financing-content": "完成A轮融资数千万( 投资方：小熊鸿诺)",
|
||||||
|
"aboutus.mission": "企业使命",
|
||||||
|
|
||||||
|
"aboutus.mission-subtitle": "为客户、股东、员工、社会、国家创造价值",
|
||||||
|
"aboutus.vision": "企业愿景",
|
||||||
|
"aboutus.vision-subtitle": "创造一家全球化卓越能效的储能公司",
|
||||||
|
"aboutus.values": "企业价值观",
|
||||||
|
"aboutus.values-subtitle": "客户第一、勇于创新、拥抱变革、实事求是、团结、自我批评",
|
||||||
|
"aboutus.philosophy": "企业核心理念",
|
||||||
|
"aboutus.philosophy-subtitle": "科学才是企业的灵魂",
|
||||||
|
"aboutus.honors-certificate":"证书",
|
||||||
|
"page.honors-content-1": "公司核心团队拥有电子技术行业10余年工作经验",
|
||||||
|
"page.honors-content-2": "对电源产品有深刻的理解，在电子元器件供应链管理有着深厚沉淀,以强大的数据库及供应链系统支撑",
|
||||||
|
"page.honors-content-3": "凭借专业的研发知识及实践经验，提供优质的产品及技术服务。",
|
||||||
|
"page.honors-content-4": "期间公司研发团队取得数十项技术专利，并于2019年12月认证为国家级高新技术企业。",
|
||||||
|
|
||||||
|
"aboutus.advantage-1": "ID 结构设计",
|
||||||
|
"aboutus.advantage-2": "产品质量",
|
||||||
|
"aboutus.advantage-3": "硬件开发",
|
||||||
|
"aboutus.advantage-factors": "关键成功要素",
|
||||||
|
"aboutus.advantage-4": "软件开发",
|
||||||
|
"aboutus.advantage-5": "生产制造",
|
||||||
|
"aboutus.advantage-6": "人工智能",
|
||||||
|
|
||||||
|
"customized.gallery-title":"源头工厂 品质信赖",
|
||||||
|
"customized.global-business-title":"全球仓库 及时配送",
|
||||||
|
"customized.global-business-subTit-1":"拥有美国、日本、欧洲、英国四个海外维修点，拥有四个海外仓，出口33个国家，",
|
||||||
|
"customized.global-business-subTit-2":"为客户提供ODM/OEM服务",
|
||||||
|
"customized.customized-title":"定制流程",
|
||||||
|
"customized.customized-text-1":"定制流程",
|
||||||
|
"customized.customized-text-2":"研发设计",
|
||||||
|
"customized.customized-text-2-pc":"研发设计",
|
||||||
|
"customized.customized-text-3":"样品测试",
|
||||||
|
"customized.customized-text-4":"客户确认",
|
||||||
|
"customized.customized-text-5":"大货生产",
|
||||||
|
"customized.customized-text-6":"产品签样",
|
||||||
|
"customized.customized-text-7":"调整优化",
|
||||||
|
"customized.customized-text-8":"样品试产",
|
||||||
|
|
||||||
|
"usermanual.years-service-life": "10年+寿命",
|
||||||
|
"download.excellentenergy": "卓越能效储能电源",
|
||||||
|
"download.apk-download": "APK安装下载",
|
||||||
|
"download.app-qr-code": "App二维码",
|
||||||
|
|
||||||
|
"detail.power-99": "适配99%",
|
||||||
|
"detail.appliances": "常用家电",
|
||||||
|
"detail.parameters": "详细参数",
|
||||||
|
"detail.may-also-like": "可能你也会喜欢",
|
||||||
|
"detail.view-more":"查看更多",
|
||||||
|
"detail.summary":"概述",
|
||||||
|
"detail.specs":"规格",
|
||||||
|
"detail.detail":"详情",
|
||||||
|
|
||||||
|
"n051.title": "3600W 便携式储能电源",
|
||||||
|
"n051.years-1": "2年",
|
||||||
|
"n051.capacity": "大容量电池",
|
||||||
|
"n051.guarantee": "质保",
|
||||||
|
"n051.battery": "电池",
|
||||||
|
"n051.battery-life": "使用寿命",
|
||||||
|
"n051.solar": "太阳能板充电",
|
||||||
|
"n051.solarvoltage": "(12-160V)",
|
||||||
|
"n051.ac-charging": "AC 输入",
|
||||||
|
"n051.variable": "可调输入功率",
|
||||||
|
"n051.ac-output": "AC 输出",
|
||||||
|
"n051.powered-off": "断电瞬间，电源即刻供电，保护您的数据无忧",
|
||||||
|
"n051.hours": "小时",
|
||||||
|
"n051.fast-charging": "快速充电",
|
||||||
|
"n051.other-brands": "其他品牌",
|
||||||
|
|
||||||
|
"n051.battery-1": "磷酸铁锂电池",
|
||||||
|
"n051.battery-2": "安全性能高·使用寿命长",
|
||||||
|
"n051.battery-3": "耐高温·容量大·环境友好",
|
||||||
|
"n051.battery2-1": "BMS保护系统",
|
||||||
|
"n051.battery2-2": "高低温保护",
|
||||||
|
"n051.battery2-3": "高低压保护",
|
||||||
|
"n051.battery2-4": "过流过载保护",
|
||||||
|
|
||||||
|
"n051.powered-simultaneously": "最高可同时给15个设备供电！",
|
||||||
|
"n051.ports-animation": "15ports动画",
|
||||||
|
"n051.intelligent": "智能APP·一手掌控",
|
||||||
|
"n051.control-output": "随时随地查看电池状态",
|
||||||
|
"n051.click-open": "一键打开电源，控制输出",
|
||||||
|
"n051.accessories-details": "配件详情",
|
||||||
|
|
||||||
|
"n052.title": "2400W 便携式储能电源",
|
||||||
|
"n052.capacity": "超大容量",
|
||||||
|
"n052.hours": "小时",
|
||||||
|
"n052.charge": "充至100% ",
|
||||||
|
"n052.battery-cycles": "4000次电池循环",
|
||||||
|
"n052.lithium-iron": "内置磷酸铁锂电池",
|
||||||
|
"n052.solar-panel": "太阳能板充电",
|
||||||
|
"n052.switching-time": "切换时间",
|
||||||
|
"n052.compatible": "常用电器兼容",
|
||||||
|
"n052.energy-title": "省电费/节约能源",
|
||||||
|
"n052.energy-content": "白天时用太阳能板给机器充电，晚上用储能电源 给电器充电。实现用电循环，自给自足",
|
||||||
|
"n052.screen-title": "清晰的液晶显示屏",
|
||||||
|
"n052.screen-content": "液晶显示屏显示输出功率、输入功率、电池电量和使用状态， 有助于规划下一步的储能工作。",
|
||||||
|
"n052.powered-off": "断电瞬间，电源即刻供电，保护您的数据无忧",
|
||||||
|
"n052.within":"内",
|
||||||
|
"n052.loop":"超长循环次数",
|
||||||
|
"n052.port":"端口介绍",
|
||||||
|
"n052.output-ports":"13个输出端口",
|
||||||
|
"n052.other-brands":"其他品牌",
|
||||||
|
"n052.protection-1": "BMS保护系统",
|
||||||
|
"n052.protection-2": "高低温保护、高低压保护、过流过载保护",
|
||||||
|
"n052.show-title-1":"顶部存储空间",
|
||||||
|
"n052.show-subtitle-1":"零件轻便储存",
|
||||||
|
"n052.show-title-2":"便携式提手",
|
||||||
|
"n052.show-subtitle-2":"方便携带、移动",
|
||||||
|
"n052.show-title-3":"防尘橡胶赛",
|
||||||
|
"n052.show-subtitle-3":"防止细小的颗粒灰尘进入机器内部",
|
||||||
|
"n052.show-title-4":"防火ABS材料",
|
||||||
|
"n052.show-subtitle-4":"V0防火等级的外壳；带有加强手柄；",
|
||||||
|
|
||||||
|
"home.swiper.led.title": "LED照明",
|
||||||
|
"home.swiper.led.subtitle": "节能LED灯具系列",
|
||||||
|
"home.swiper.led.description": "高效节能，持久耐用，智能控制",
|
||||||
|
"home.swiper.led.button": "了解更多",
|
||||||
|
"home.swiper.monitor.title": "监控设备",
|
||||||
|
"home.swiper.monitor.subtitle": "专业监控解决方案",
|
||||||
|
"home.swiper.monitor.description": "高清画质，智能分析，全方位监控",
|
||||||
|
"home.swiper.monitor.button": "了解更多",
|
||||||
|
"home.swiper.security.title": "智能安防",
|
||||||
|
"home.swiper.security.subtitle": "4K高清监控摄像头",
|
||||||
|
"home.swiper.security.description": "全天候守护，智能识别，超清画质",
|
||||||
|
"home.swiper.security.button": "了解更多",
|
||||||
|
|
||||||
|
"home.products.title": "核心产品",
|
||||||
|
"home.products.subtitle": "专业的监控安防设备与LED照明解决方案",
|
||||||
|
"home.products.view-all": "查看全部产品",
|
||||||
|
|
||||||
|
"product.s01.name": "S01 高清监控摄像头",
|
||||||
|
"product.s01.category": "监控摄像头",
|
||||||
|
"product.s01.description": "高清画质，智能监控",
|
||||||
|
"product.t11.name": "T11 专业监控摄像头",
|
||||||
|
"product.t11.category": "监控摄像头",
|
||||||
|
"product.t11.description": "专业级监控设备",
|
||||||
|
"product.xa01.name": "XA-01 智能LED路灯",
|
||||||
|
"product.xa01.category": "智能照明",
|
||||||
|
"product.xa01.description": "节能环保，智能控制",
|
||||||
|
|
||||||
|
"product.hot.badge": "热门",
|
||||||
|
"product.learn-more": "了解详情",
|
||||||
|
|
||||||
|
"product.breadcrumb.home": "首页",
|
||||||
|
"product.breadcrumb.product-center": "产品中心",
|
||||||
|
"product.breadcrumb.monitor": "监控摄像头",
|
||||||
|
"product.breadcrumb.street-light": "路灯",
|
||||||
|
|
||||||
|
"product.category.product-center": "产品中心",
|
||||||
|
"product.category.monitor": "监控摄像头",
|
||||||
|
"product.category.street-light": "路灯",
|
||||||
|
|
||||||
|
"product.s02.subtitle": "智能监控摄像头",
|
||||||
|
"product.s03.subtitle": "夜视监控摄像头",
|
||||||
|
"product.t05.subtitle": "全天候监控摄像头",
|
||||||
|
|
||||||
|
"product.specs.number": "编号",
|
||||||
|
"product.specs.type": "类型",
|
||||||
|
"product.specs.specification": "规格",
|
||||||
|
"product.specs.brand": "品牌",
|
||||||
|
|
||||||
|
"product.page.learn-more": "了解更多",
|
||||||
|
|
||||||
|
"about.page.title": "关于我们",
|
||||||
|
"about.page.subtitle": "ABOUT US",
|
||||||
|
"about.page.description": "专业安防监控设备制造商 · 全球化服务提供商",
|
||||||
|
"about.breadcrumb.home": "首页",
|
||||||
|
"about.breadcrumb.about": "关于我们",
|
||||||
|
|
||||||
|
"about.stats.experience": "年专业经验",
|
||||||
|
"about.stats.team": "专业团队",
|
||||||
|
"about.stats.countries": "服务国家",
|
||||||
|
|
||||||
|
"about.intro.title": "企业简介",
|
||||||
|
"about.intro.p1": "2011年，SPML成立，专注于安防监控设备的研发与制造。自此，让每个用户都能享受到安全可靠的监控保护成为SPML的企业使命，也激励着我们持续为全球客户提供高质量的产品和服务。",
|
||||||
|
"about.intro.p2": "十余年来，SPML专注于可持续安防监控研发、智能识别、云端存储以及安防数字化领域，公司设计、研发、制造智能摄像头、监控系统、安防设备，为全球家庭及工商业用户提供优质的全场景安防监控解决方案。我们将与全球合作伙伴共同创造一个更安全的世界，为人类打造全球领先的智能安防生态！",
|
||||||
|
|
||||||
|
"about.achievements.countries": "服务国家",
|
||||||
|
"about.achievements.team": "专业团队",
|
||||||
|
"about.achievements.experience": "年专业经验",
|
||||||
|
"about.achievements.vision.title": "企业愿景",
|
||||||
|
"about.achievements.vision.desc": "成为全球领先的安防监控解决方案提供商，为用户提供最安全可靠的监控保护",
|
||||||
|
|
||||||
|
"about.tech.title": "技术实力",
|
||||||
|
"about.tech.subtitle": "先进的研发能力与制造工艺，为全球客户提供可靠的安防解决方案",
|
||||||
|
"about.tech.team.title": "专业研发团队",
|
||||||
|
"about.tech.team.desc": "拥有经验丰富的研发团队，专注安防监控设备的技术创新与产品优化",
|
||||||
|
"about.tech.manufacturing.title": "先进制造工艺",
|
||||||
|
"about.tech.manufacturing.desc": "配备现代化生产线，建立完善的质量管理体系，确保产品品质稳定可靠",
|
||||||
|
"about.tech.service.title": "全球化服务",
|
||||||
|
"about.tech.service.desc": "为全球50+国家和地区提供专业的安防监控解决方案与技术支持服务",
|
||||||
|
"about.tech.advantage.title": "核心优势",
|
||||||
|
"about.tech.advantage.desc": "专注于智能摄像头、监控系统、安防设备等产品的研发制造，通过持续的技术创新和严格的质量控制，为客户提供高性能、高可靠性的安防监控产品。",
|
||||||
|
|
||||||
|
"contact.page.title": "联系我们",
|
||||||
|
"contact.page.subtitle": "CONTACT US",
|
||||||
|
"contact.breadcrumb.home": "首页",
|
||||||
|
"contact.breadcrumb.contact": "联系我们",
|
||||||
|
"contact.welcome": "期待与您的直接联系，我们将竭诚为您提供专业的支持和解答",
|
||||||
|
"contact.company.label": "公司",
|
||||||
|
"contact.company.name": "中山市明阳良光照明有限公司",
|
||||||
|
"contact.company.address": "中国广东省中山市古镇镇海洲东安北路398号",
|
||||||
|
"contact.phone.label": "电话",
|
||||||
|
"contact.email.label": "邮箱",
|
||||||
|
|
||||||
|
"nav.home": "首页",
|
||||||
|
"nav.about": "关于我们",
|
||||||
|
"nav.products": "产品系列",
|
||||||
|
"nav.contact": "联系我们",
|
||||||
|
|
||||||
|
"footer.company.name": "中山市明阳良光照明有限公司",
|
||||||
|
"footer.company.description": "太阳能智能云台摄像头制造商",
|
||||||
|
"footer.company.design": "明阳良光原创设计",
|
||||||
|
"footer.wechat": "微信",
|
||||||
|
"footer.whatsapp": "WhatsApp",
|
||||||
|
"footer.address": "地址",
|
||||||
|
"footer.qr.wechat": "微信二维码",
|
||||||
|
"footer.qr.whatsapp": "WhatsApp二维码",
|
||||||
|
|
||||||
|
"about.exhibition.title": "展会荣誉",
|
||||||
|
"about.exhibition.subtitle": "国际展会参展经历与企业资质认证展示",
|
||||||
|
"about.exhibition.security-expo": "国际安防展",
|
||||||
|
"about.exhibition.tech-conference": "技术交流",
|
||||||
|
"about.exhibition.certifications": "企业资质",
|
||||||
|
"about.exhibition.iso9001": "ISO9001",
|
||||||
|
"about.exhibition.iso9001.desc": "质量管理体系",
|
||||||
|
"about.exhibition.high-tech": "高新技术企业",
|
||||||
|
"about.exhibition.high-tech.desc": "国家级认定",
|
||||||
|
"about.exhibition.excellent-supplier": "优秀供应商",
|
||||||
|
"about.exhibition.excellent-supplier.desc": "行业认可",
|
||||||
|
"about.exhibition.ce-fcc": "CE/FCC",
|
||||||
|
"about.exhibition.ce-fcc.desc": "国际认证",
|
||||||
|
"about.exhibition.security-cert": "安防认证",
|
||||||
|
"about.exhibition.security-cert.desc": "行业标准",
|
||||||
|
"about.exhibition.quality-assurance": "品质保证",
|
||||||
|
"about.exhibition.quality-assurance.desc": "质量承诺",
|
||||||
|
|
||||||
|
"about.tech.badge.manufacturing": "制造",
|
||||||
|
"about.tech.badge.global": "全球",
|
||||||
|
"about.tech.tag.ai-algorithm": "AI算法",
|
||||||
|
"about.tech.tag.image-processing": "图像处理",
|
||||||
|
"about.tech.tag.hardware-design": "硬件设计",
|
||||||
|
"about.tech.tag.iso-certification": "ISO认证",
|
||||||
|
"about.tech.tag.precision-manufacturing": "精密制造",
|
||||||
|
"about.tech.tag.quality-control": "品质控制",
|
||||||
|
"about.tech.tag.technical-support": "技术支持",
|
||||||
|
"about.tech.tag.custom-solution": "定制方案",
|
||||||
|
"about.tech.tag.after-sales": "售后服务",
|
||||||
|
|
||||||
|
"about.production.title": "生产工艺",
|
||||||
|
"about.production.subtitle": "专业生产团队与严格工艺流程，确保产品质量达到国际标准",
|
||||||
|
"about.production.assembly": "精密组装",
|
||||||
|
"about.production.assembly.desc": "专业技术人员精密组装",
|
||||||
|
"about.production.testing": "质量检测",
|
||||||
|
"about.production.testing.desc": "严格测试每个产品",
|
||||||
|
"about.production.debugging": "产品调试",
|
||||||
|
"about.production.debugging.desc": "确保产品性能最优",
|
||||||
|
"about.production.packaging": "精美包装",
|
||||||
|
"about.production.packaging.desc": "保护产品安全运输",
|
||||||
|
"about.production.quality-control": "品控管理",
|
||||||
|
"about.production.capacity": "生产能力",
|
||||||
|
"about.production.monthly-capacity": "月产能（台）",
|
||||||
|
"about.production.guarantee": "生产保障",
|
||||||
|
"about.production.pass-rate": "合格率",
|
||||||
|
"about.production.lines": "生产线数量",
|
||||||
|
|
||||||
|
"about.company.image": "SPML企业形象",
|
||||||
|
"about.tech.image": "SPML技术展示"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,400 @@
|
||||||
|
{
|
||||||
|
"page.home": "Home",
|
||||||
|
"page.odm-oem":"ODM/OEM",
|
||||||
|
"page.product": "Product List",
|
||||||
|
"page.about-us": "About Us",
|
||||||
|
"page.honors": "Honors",
|
||||||
|
"page.news": "News",
|
||||||
|
"page.contact-us": "Contact Us",
|
||||||
|
"page.app-download": "BrightEMS App Download",
|
||||||
|
"page.news-detail": "News detail",
|
||||||
|
"page.core-advantage": "Core Advantages",
|
||||||
|
"page.detail": "product details ",
|
||||||
|
"page.company-profile": "Company Profile",
|
||||||
|
"page.support": "Support",
|
||||||
|
"page.company": "Zhongshan Mingyang Liangguang Lighting Co., Ltd.",
|
||||||
|
"page.back-to-top":"Top",
|
||||||
|
"page.404-content":"Sorry, the page address you visited is incorrect or does not exist",
|
||||||
|
"page.404-button":"Home",
|
||||||
|
"page.company-abbreviation":"Mingyang Liangguang",
|
||||||
|
"page.loading":"loading...",
|
||||||
|
|
||||||
|
"navbar.search": "What help do you need",
|
||||||
|
"navbar.product": "Product",
|
||||||
|
"navbar.app": "APP Download",
|
||||||
|
"navbar.language": "language",
|
||||||
|
"navbar.recommend": "Search suggestions",
|
||||||
|
|
||||||
|
|
||||||
|
"home.sence-main-tile":"Excursions",
|
||||||
|
"home.sence-main-subTile":"Portable power station can provides",
|
||||||
|
"home.sence-main-subTitle-2":"power for various equipment in outdoor activities",
|
||||||
|
"home.sence-item-1-tile":"Power Failure Emergency",
|
||||||
|
"home.sence-item-1-subTile":"In an emergency like a power outage or natural disaster, Energy storage power ",
|
||||||
|
"home.sence-item-1-subTitle-2":"supplies can provide critical power support",
|
||||||
|
"home.sence-item-2-tile":"Work and Study",
|
||||||
|
"home.sence-item-2-subTile":"Ensure that users will not be affected by power shortages when traveling",
|
||||||
|
"home.sence-item-2-subTitle-2":" or on the mobile working",
|
||||||
|
"home.sence-item-3-tile":"Household Electricity",
|
||||||
|
"home.sence-item-3-subTile":"It can be used as a backup power",
|
||||||
|
"home.sence-item-3-subTitle-2":"supply for the family to maintain basic communication and life functions",
|
||||||
|
"home.certificate-title":"Qualification certification",
|
||||||
|
"home.certificate-subTitle":"Escort your products, win reputation with quality, and repay customers with service",
|
||||||
|
|
||||||
|
"home.learn-more": "Learn more",
|
||||||
|
"home.view-more": "more",
|
||||||
|
"home.situation": "Mingyang Liangguang Company Profile",
|
||||||
|
"home.platform": "",
|
||||||
|
"home.individual": "",
|
||||||
|
"home.sale": "Countries",
|
||||||
|
"home.development": "Global Business Development",
|
||||||
|
"home.products": "Strong production, sales and after-sales service capabilities provide fully support to global customers and establish long-term strategic partnerships.",
|
||||||
|
"home.Energy": "Daily Production",
|
||||||
|
"home.service-centers": "Overseas Service Center",
|
||||||
|
"home.main-products": "Products",
|
||||||
|
"home.solar-panel": "Solar panel",
|
||||||
|
"home.power-station": "Portable Power Station",
|
||||||
|
"home.accessory": "Accessory",
|
||||||
|
"home.temporary-video": "Temporary Video",
|
||||||
|
"home.background-image": "Background image",
|
||||||
|
|
||||||
|
"home.about-syd": "About Mingyang Liangguang",
|
||||||
|
"home.professional":"Professional energy storage system manufacturer",
|
||||||
|
"home.year": "",
|
||||||
|
"home.establish": "Founded In",
|
||||||
|
"home.employees": "Employees",
|
||||||
|
"home.proportion": "R&D Propportion",
|
||||||
|
"home.factoryarea": "Factory covers",
|
||||||
|
"home.recording":"Recording the moment when Mingyang Liangguang changed the world",
|
||||||
|
|
||||||
|
"foot.service-terms": "Services Terms",
|
||||||
|
"foot.privacy-policy": "Privacy Statement",
|
||||||
|
"foot.valid-email": "Please enter a valid email address",
|
||||||
|
"foot.company": "Zhongshan Mingyang Liangguang Lighting Co., Ltd., all rights reserved.",
|
||||||
|
"foot.record-number": "Record number : Yue ICP Bei 15063791",
|
||||||
|
|
||||||
|
"contact.contacts-us": "Contact Us",
|
||||||
|
"contact.sub-title-1": "Company Info",
|
||||||
|
"contact.sub-title-2": "Contact Info",
|
||||||
|
"contact.official-website":"Company's official website",
|
||||||
|
"contact.other-contact":"Other contact information",
|
||||||
|
"contact.sales-consulting":"sales consulting",
|
||||||
|
"contact.operations-specialist":"Operations specialist",
|
||||||
|
"contact.after-sale-guarantee":"After-sale guarantee",
|
||||||
|
"contact.cooperation-negotiation":"Cooperation negotiation",
|
||||||
|
"contact.address": "Address:",
|
||||||
|
"contact.address-details": "4F, Building 4, Phase I, Lianchuang Science and Technology Park, Longgang District, Shenzhen.",
|
||||||
|
"contact.name":"Name",
|
||||||
|
"contact.tel": "Tel:",
|
||||||
|
"contact.email": "Email：",
|
||||||
|
"contact.email-2": "Email",
|
||||||
|
"contact.mobile": "Mobile:",
|
||||||
|
"contact.submit": "Submit",
|
||||||
|
"contact.verify-name": "Please enter a valid name",
|
||||||
|
"contact.verify-email": "Please enter a valid email address",
|
||||||
|
"contact.verify-title": "If you have any other questions, please feel free to contact us at any time",
|
||||||
|
"contact.verify-message": "Enter product details and other specific requirements to obtain accurate quotations",
|
||||||
|
"contact.submitted-successfully": "Submitted successfully",
|
||||||
|
"contact.submitted-failed": "Submission failed",
|
||||||
|
"contact.thank-message": "Thank you for your inquiry!We will contact you as soon as possible!",
|
||||||
|
"contact.thank-message2": "We will contact you as soon as possible.",
|
||||||
|
"contact.back": "Back to Menu",
|
||||||
|
|
||||||
|
"corporatenews": "Company News",
|
||||||
|
"aboutus.company": "Zhongshan Mingyang Liangguang Lighting Co., Ltd.",
|
||||||
|
"aboutus.company-1": "Founded in 2015, Zhongshan Mingyang Liangguang Lighting Co., Ltd. is specialized in R&D and manufacturing of portable power station and home products. Located in Torch Development Zone, Zhongshan, CN.",
|
||||||
|
"aboutus.company-2": "Our company covers over 12,000 square meters. The daily production capacity of us exceeds 3,000 units and the annual production capacity reaches 800 million units. We have brilliant R&D team with rich experience ",
|
||||||
|
"aboutus.company-3": "who are committed to the continuous pursuit of technological breakthroughs and product optimization, independently completing the entire process to ID design, structural design, hardware development,",
|
||||||
|
"aboutus.company-4": "software development, production and manufacturihome.power-stationng to ensure the uniqueness and advancement of our products.",
|
||||||
|
"aboutus.year": "",
|
||||||
|
"aboutus.founded": "2015",
|
||||||
|
"aboutus.establish": "Founded",
|
||||||
|
"aboutus.factoryarea": "Factory",
|
||||||
|
"aboutus.billion": "mill",
|
||||||
|
"aboutus.annualcapacity": "Annual Production",
|
||||||
|
"aboutus.technical-patents": "technology patent",
|
||||||
|
"aboutus.force": "Core Advantages",
|
||||||
|
"aboutus.force-subtitle-1": "Experienced development team",
|
||||||
|
"aboutus.force-subtitle-2": "Strict quality inspection process",
|
||||||
|
"aboutus.force-subtitle-3": "A robust supply chain system",
|
||||||
|
"aboutus.force-subtitle-4": "Continuous talent introduction",
|
||||||
|
"aboutus.history": "History",
|
||||||
|
"aboutus.sub-history-1": "The core team of the company has over 10 years of work experience in the electronic technology industry, with a deep understanding of power supply products and a deep foundation in electronic component supply chain management ",
|
||||||
|
"aboutus.sub-history-2": "and supported by a powerful database and supply chain system, with professional research and development knowledge and practical spirit, we provide high-quality products and technical services to global users.",
|
||||||
|
|
||||||
|
"aboutus.establishment-title": "Establishment",
|
||||||
|
"aboutus.establishment-content": "Founded in Shenzhen, the frontier city of reform and opening up and the capital of innovation. ",
|
||||||
|
"aboutus.transformation": "Transformation",
|
||||||
|
"aboutus.transformation-content": "Transformed from a power solutions company to an excellent portable power station manufacturing enterprise",
|
||||||
|
"aboutus.Innovation": "Innovation",
|
||||||
|
"aboutus.Innovation-content": "One of the first batch of enterprises in the power industry to develop 2000W bi-directional fast charging products. mass production and shipment in early 2020 and have shipped more than 50,000 units so far.",
|
||||||
|
"aboutus.financing": "Financing",
|
||||||
|
"aboutus.financing-content": "Completed round A of financing of tens of millions (investor: Xiaoxiong Hongnuo) ",
|
||||||
|
"aboutus.mission": "Missions",
|
||||||
|
|
||||||
|
"aboutus.mission-subtitle": "To create value for customers, shareholders, employees, society and the country",
|
||||||
|
"aboutus.vision": "Vision",
|
||||||
|
"aboutus.vision-subtitle": "To create a global power design company with excellent energy efficiency",
|
||||||
|
"aboutus.values": "Values",
|
||||||
|
"aboutus.values-subtitle": "Customer first, Innovation, Embracing change, Seeking truth from facts, Unity tenacity, Self-criticism",
|
||||||
|
"aboutus.philosophy": "Core value concept",
|
||||||
|
"aboutus.philosophy-subtitle": "Science is the soul of the enterprise",
|
||||||
|
"aboutus.honors-certificate":"Certificate",
|
||||||
|
"page.honors-content-1": "Our core team has more than 10 years experience in the electronic technology industry,",
|
||||||
|
"page.honors-content-2": "they have profound knowledge of power products, deep accumulation in electronic component supply chain management. Supported by powerful database and supply chain system,",
|
||||||
|
"page.honors-content-3": "they provide high-quality products and technical services with professional R&D knowledge and practical experience.",
|
||||||
|
"page.honors-content-4": "During this period, our R&D team has obtained multiple technology patents and was certified as a national high-tech enterprise in December 2019.",
|
||||||
|
|
||||||
|
"aboutus.advantage-1": "ID structure design",
|
||||||
|
"aboutus.advantage-2": "Product quality",
|
||||||
|
"aboutus.advantage-3": "Hardware development",
|
||||||
|
"aboutus.advantage-factors": "Critical factors of success",
|
||||||
|
"aboutus.advantage-4": "Software development",
|
||||||
|
"aboutus.advantage-5": "Production",
|
||||||
|
"aboutus.advantage-6": "AI Plus",
|
||||||
|
|
||||||
|
"customized.gallery-title":"Source factory Trustworthy quality",
|
||||||
|
"customized.global-business-title":"Global warehouse timely delivery",
|
||||||
|
"customized.global-business-subTit-1":"Oversea after Sales Service--In USA, EU and JP, Owns four overseas warehouses,",
|
||||||
|
"customized.global-business-subTit-2":" Exports to 33 countries, Provide ODM/OEM services to customers",
|
||||||
|
"customized.customized-title":"Customized process",
|
||||||
|
"customized.customized-text-1":"Customer demand",
|
||||||
|
"customized.customized-text-2":"R＆D design",
|
||||||
|
"customized.customized-text-2-pc":"Research and development design",
|
||||||
|
"customized.customized-text-3":"Sample test",
|
||||||
|
"customized.customized-text-4":"Customer confirmation",
|
||||||
|
"customized.customized-text-5":"Bulk production",
|
||||||
|
"customized.customized-text-6":"Product sample signing",
|
||||||
|
"customized.customized-text-7":"Optimization and adjustment",
|
||||||
|
"customized.customized-text-8":"Sample trial production",
|
||||||
|
|
||||||
|
"download.excellentenergy": "Portable power stations with excellent energy efficiency",
|
||||||
|
"download.apk-download": "APK download",
|
||||||
|
"download.app-qr-code": "App QR code",
|
||||||
|
|
||||||
|
"detail.power-99": "Compatible with 99%",
|
||||||
|
"detail.appliances": "Home appliances",
|
||||||
|
"detail.parameters": "Detailed Parameters",
|
||||||
|
"detail.may-also-like": "May also like",
|
||||||
|
"detail.view-more": "View more",
|
||||||
|
"detail.summary": "Summary",
|
||||||
|
"detail.specs": "Specifications",
|
||||||
|
"detail.detail": "Details",
|
||||||
|
|
||||||
|
"n051.title": "3600W Portable Power Station",
|
||||||
|
"n051.years-1": "2-years",
|
||||||
|
"n051.capacity": "Large Capacity",
|
||||||
|
"n051.guarantee": "Warranty",
|
||||||
|
"n051.battery": "Battery",
|
||||||
|
"n051.battery-life": "Lifespan",
|
||||||
|
"n051.solar": "Solar Panel Charging",
|
||||||
|
"n051.solarvoltage": "(12-160V)",
|
||||||
|
"n051.ac-charging": "AC Input",
|
||||||
|
"n051.variable": "Adjustable Input Power",
|
||||||
|
"n051.ac-output": "AC Output",
|
||||||
|
"n051.powered-off": "At the moment of power outage,instant power supply to prevent data from missing",
|
||||||
|
"n051.hours": "Hours",
|
||||||
|
"n051.fast-charging": "Fast Charging",
|
||||||
|
"n051.other-brands": "Other Brands",
|
||||||
|
|
||||||
|
"n051.battery-1": "LiFePo4 Battery",
|
||||||
|
"n051.battery-2": "High Safety Performance Long Lifespan",
|
||||||
|
"n051.battery-3": "High Temperature Resistant Large Capacity Environmentally Friendly",
|
||||||
|
"n051.battery2-1": "BMS Protecting System",
|
||||||
|
"n051.battery2-2": "High and Low Temperature Protection",
|
||||||
|
"n051.battery2-3": "High and Low Voltage Protection",
|
||||||
|
"n051.battery2-4": "Overcurrent and Overload Protection",
|
||||||
|
|
||||||
|
"n051.powered-simultaneously": "Power Up To 15 Devices at The Same Time",
|
||||||
|
"n051.ports-animation": "15 Ports Vedio",
|
||||||
|
"n051.intelligent": "Smart APP Mobile Phone Control",
|
||||||
|
"n051.control-output": "Check Battery Status Anytime, Anywhere",
|
||||||
|
"n051.click-open": "Toggle with a single click, control output",
|
||||||
|
"n051.accessories-details": "Accessories Details",
|
||||||
|
|
||||||
|
"n052.title": "2400W Portable Power Station",
|
||||||
|
"n052.capacity": "Large Capacity",
|
||||||
|
"n052.hours": "Hours",
|
||||||
|
"n052.charge": "Charged to 100% ",
|
||||||
|
"n052.battery-cycles": "4000 Times Battery Cycle",
|
||||||
|
"n052.lithium-iron": "Built-in LiFePo4 Battery",
|
||||||
|
"n052.solar-panel": "Solar Panel Charging",
|
||||||
|
"n052.switching-time": "Swicthover Time",
|
||||||
|
"n052.compatible": "Compatible with Common Electrical Appliances",
|
||||||
|
"n052.energy-title": "Saving Elecricity Bill / Energy",
|
||||||
|
"n052.energy-content": "Use Solar Panel to charge machine during the day and use our machine to charge electrical appliances at night. Achieve electricity cycle and self-sufficiency",
|
||||||
|
"n052.screen-title": "Clear LCD Display Screen",
|
||||||
|
"n052.screen-content": "The lCD screen shows output power, input power, battery power and status of use, helping with the next energy storage plan",
|
||||||
|
"n052.powered-off": "At the moment of power outage,instant power supply to prevent data from missing",
|
||||||
|
"n052.within": "within",
|
||||||
|
"n052.loop": "Long Cycle Life",
|
||||||
|
"n052.port": "Interfaces Introduction",
|
||||||
|
"n052.output-ports": "13 Output Ports",
|
||||||
|
"n052.other-brands": "Other Brands",
|
||||||
|
"n052.protection-1": "BMS Protecting System",
|
||||||
|
"n052.protection-2": "High and low temperature protection, high and low voltage protection, overcurrent and overload protection",
|
||||||
|
"n052.show-title-1": "Top storage space",
|
||||||
|
"n052.show-subtitle-1": "Lightweight storage of parts",
|
||||||
|
"n052.show-title-2": "Portable handle",
|
||||||
|
"n052.show-subtitle-2": "Convenient to carry and move",
|
||||||
|
"n052.show-title-3": "Dust rubber race",
|
||||||
|
"n052.show-subtitle-3": "Prevent small particles of dust from entering the interior of the machine",
|
||||||
|
"n052.show-title-4": "Fireproof ABS material",
|
||||||
|
"n052.show-subtitle-4": "An enclosure with a V0 fire rating; With reinforced handle",
|
||||||
|
|
||||||
|
"home.swiper.led.title": "LED Lighting",
|
||||||
|
"home.swiper.led.subtitle": "Energy-Efficient LED Fixtures Series",
|
||||||
|
"home.swiper.led.description": "High efficiency, long-lasting, intelligent control",
|
||||||
|
"home.swiper.led.button": "Learn More",
|
||||||
|
"home.swiper.monitor.title": "Monitoring Equipment",
|
||||||
|
"home.swiper.monitor.subtitle": "Professional Monitoring Solutions",
|
||||||
|
"home.swiper.monitor.description": "High-definition image quality, intelligent analysis, comprehensive monitoring",
|
||||||
|
"home.swiper.monitor.button": "Learn More",
|
||||||
|
"home.swiper.security.title": "Smart Security",
|
||||||
|
"home.swiper.security.subtitle": "4K HD Security Camera",
|
||||||
|
"home.swiper.security.description": "24/7 protection, intelligent recognition, ultra-clear image quality",
|
||||||
|
"home.swiper.security.button": "Learn More",
|
||||||
|
|
||||||
|
"home.products.title": "Core Products",
|
||||||
|
"home.products.subtitle": "Professional security monitoring equipment and LED lighting solutions",
|
||||||
|
"home.products.view-all": "View All Products",
|
||||||
|
|
||||||
|
"product.s01.name": "S01 HD Security Camera",
|
||||||
|
"product.s01.category": "Security Camera",
|
||||||
|
"product.s01.description": "High-definition image quality, intelligent monitoring",
|
||||||
|
"product.t11.name": "T11 Professional Security Camera",
|
||||||
|
"product.t11.category": "Security Camera",
|
||||||
|
"product.t11.description": "Professional-grade monitoring equipment",
|
||||||
|
"product.xa01.name": "XA-01 Smart LED Street Light",
|
||||||
|
"product.xa01.category": "Smart Lighting",
|
||||||
|
"product.xa01.description": "Energy-saving and environmentally friendly, intelligent control",
|
||||||
|
|
||||||
|
"product.hot.badge": "Hot",
|
||||||
|
"product.learn-more": "Learn More",
|
||||||
|
|
||||||
|
"product.breadcrumb.home": "Home",
|
||||||
|
"product.breadcrumb.product-center": "Product Center",
|
||||||
|
"product.breadcrumb.monitor": "Security Camera",
|
||||||
|
"product.breadcrumb.street-light": "Street Light",
|
||||||
|
|
||||||
|
"product.category.product-center": "Product Center",
|
||||||
|
"product.category.monitor": "Security Camera",
|
||||||
|
"product.category.street-light": "Street Light",
|
||||||
|
|
||||||
|
"product.s02.subtitle": "Smart Security Camera",
|
||||||
|
"product.s03.subtitle": "Night Vision Security Camera",
|
||||||
|
"product.t05.subtitle": "All-Weather Security Camera",
|
||||||
|
|
||||||
|
"product.specs.number": "Number",
|
||||||
|
"product.specs.type": "Type",
|
||||||
|
"product.specs.specification": "Specification",
|
||||||
|
"product.specs.brand": "Brand",
|
||||||
|
|
||||||
|
"product.page.learn-more": "Learn More",
|
||||||
|
|
||||||
|
"about.page.title": "About Us",
|
||||||
|
"about.page.subtitle": "ABOUT US",
|
||||||
|
"about.page.description": "Professional Security Monitoring Equipment Manufacturer · Global Service Provider",
|
||||||
|
"about.breadcrumb.home": "Home",
|
||||||
|
"about.breadcrumb.about": "About Us",
|
||||||
|
|
||||||
|
"about.stats.experience": "+ Years Experience",
|
||||||
|
"about.stats.team": "+ Professional Team",
|
||||||
|
"about.stats.countries": "+ Countries Served",
|
||||||
|
|
||||||
|
"about.intro.title": "Company Introduction",
|
||||||
|
"about.intro.p1": "SPML was established in 2011, focusing on the research and development and manufacturing of security monitoring equipment. Since then, enabling every user to enjoy safe and reliable monitoring protection has become SPML's corporate mission, which also motivates us to continue providing high-quality products and services to global customers.",
|
||||||
|
"about.intro.p2": "For more than ten years, SPML has focused on sustainable security monitoring R&D, intelligent recognition, cloud storage, and security digitization. The company designs, develops, and manufactures smart cameras, monitoring systems, and security equipment, providing high-quality full-scenario security monitoring solutions for global home and commercial users. We will work with global partners to create a safer world and build a globally leading intelligent security ecosystem for humanity!",
|
||||||
|
|
||||||
|
"about.achievements.countries": "Countries Served",
|
||||||
|
"about.achievements.team": "Professional Team",
|
||||||
|
"about.achievements.experience": "+ Years Experience",
|
||||||
|
"about.achievements.vision.title": "Corporate Vision",
|
||||||
|
"about.achievements.vision.desc": "To become a leading global security monitoring solution provider, providing users with the safest and most reliable monitoring protection",
|
||||||
|
|
||||||
|
"about.tech.title": "Technology Excellence",
|
||||||
|
"about.tech.subtitle": "Advanced R&D capabilities and manufacturing processes, providing reliable security solutions for global customers",
|
||||||
|
"about.tech.team.title": "Professional R&D Team",
|
||||||
|
"about.tech.team.desc": "We have an experienced R&D team dedicated to technological innovation and product optimization in security monitoring equipment",
|
||||||
|
"about.tech.manufacturing.title": "Advanced Manufacturing Process",
|
||||||
|
"about.tech.manufacturing.desc": "Equipped with modern production lines and established a comprehensive quality management system to ensure stable and reliable product quality",
|
||||||
|
"about.tech.service.title": "Global Service",
|
||||||
|
"about.tech.service.desc": "Providing professional security monitoring solutions and technical support services to 50+ countries and regions worldwide",
|
||||||
|
"about.tech.advantage.title": "Core Advantages",
|
||||||
|
"about.tech.advantage.desc": "Focusing on the R&D and manufacturing of smart cameras, monitoring systems, security equipment and other products, through continuous technological innovation and strict quality control, we provide customers with high-performance, high-reliability security monitoring products.",
|
||||||
|
|
||||||
|
"contact.page.title": "Contact Us",
|
||||||
|
"contact.page.subtitle": "CONTACT US",
|
||||||
|
"contact.breadcrumb.home": "Home",
|
||||||
|
"contact.breadcrumb.contact": "Contact Us",
|
||||||
|
"contact.welcome": "We look forward to direct contact with you and will wholeheartedly provide professional support and answers",
|
||||||
|
"contact.company.label": "Company",
|
||||||
|
"contact.company.name": "Zhongshan Mingyang Liangguang Lighting Co., Ltd.",
|
||||||
|
"contact.company.address": "No. 398, Haizhou Dong'an North Road, Guzhen Town, Zhongshan City, Guangdong Province, China",
|
||||||
|
"contact.phone.label": "Phone",
|
||||||
|
"contact.email.label": "Email",
|
||||||
|
|
||||||
|
"nav.home": "Home",
|
||||||
|
"nav.about": "About Us",
|
||||||
|
"nav.products": "Products",
|
||||||
|
"nav.contact": "Contact Us",
|
||||||
|
|
||||||
|
"footer.company.name": "Zhongshan Mingyang Liangguang Lighting Co., Ltd.",
|
||||||
|
"footer.company.description": "Solar Smart PTZ Camera Manufacturer",
|
||||||
|
"footer.company.design": "Mingyang Liangguang Original Design",
|
||||||
|
"footer.wechat": "WeChat",
|
||||||
|
"footer.whatsapp": "WhatsApp",
|
||||||
|
"footer.address": "Address",
|
||||||
|
"footer.qr.wechat": "WeChat QR Code",
|
||||||
|
"footer.qr.whatsapp": "WhatsApp QR Code",
|
||||||
|
|
||||||
|
"about.exhibition.title": "Exhibition & Honors",
|
||||||
|
"about.exhibition.subtitle": "International exhibition experience and corporate qualification certification display",
|
||||||
|
"about.exhibition.security-expo": "Security Expo",
|
||||||
|
"about.exhibition.tech-conference": "Tech Conference",
|
||||||
|
"about.exhibition.certifications": "Certifications",
|
||||||
|
"about.exhibition.iso9001": "ISO9001",
|
||||||
|
"about.exhibition.iso9001.desc": "Quality Management System",
|
||||||
|
"about.exhibition.high-tech": "High-tech Enterprise",
|
||||||
|
"about.exhibition.high-tech.desc": "National Certification",
|
||||||
|
"about.exhibition.excellent-supplier": "Excellent Supplier",
|
||||||
|
"about.exhibition.excellent-supplier.desc": "Industry Recognition",
|
||||||
|
"about.exhibition.ce-fcc": "CE/FCC",
|
||||||
|
"about.exhibition.ce-fcc.desc": "International Certification",
|
||||||
|
"about.exhibition.security-cert": "Security Certification",
|
||||||
|
"about.exhibition.security-cert.desc": "Industry Standard",
|
||||||
|
"about.exhibition.quality-assurance": "Quality Assurance",
|
||||||
|
"about.exhibition.quality-assurance.desc": "Quality Commitment",
|
||||||
|
|
||||||
|
"about.tech.badge.manufacturing": "Manufacturing",
|
||||||
|
"about.tech.badge.global": "Global",
|
||||||
|
"about.tech.tag.ai-algorithm": "AI Algorithm",
|
||||||
|
"about.tech.tag.image-processing": "Image Processing",
|
||||||
|
"about.tech.tag.hardware-design": "Hardware Design",
|
||||||
|
"about.tech.tag.iso-certification": "ISO Certification",
|
||||||
|
"about.tech.tag.precision-manufacturing": "Precision Manufacturing",
|
||||||
|
"about.tech.tag.quality-control": "Quality Control",
|
||||||
|
"about.tech.tag.technical-support": "Technical Support",
|
||||||
|
"about.tech.tag.custom-solution": "Custom Solution",
|
||||||
|
"about.tech.tag.after-sales": "After-sales Service",
|
||||||
|
|
||||||
|
"about.production.title": "Manufacturing Process",
|
||||||
|
"about.production.subtitle": "Professional production team and strict process flow to ensure product quality meets international standards",
|
||||||
|
"about.production.assembly": "Precision Assembly",
|
||||||
|
"about.production.assembly.desc": "Professional technicians precision assembly",
|
||||||
|
"about.production.testing": "Quality Testing",
|
||||||
|
"about.production.testing.desc": "Strict testing of every product",
|
||||||
|
"about.production.debugging": "Product Debugging",
|
||||||
|
"about.production.debugging.desc": "Ensure optimal product performance",
|
||||||
|
"about.production.packaging": "Exquisite Packaging",
|
||||||
|
"about.production.packaging.desc": "Protect products for safe transportation",
|
||||||
|
"about.production.quality-control": "Quality Control",
|
||||||
|
"about.production.capacity": "Production Capacity",
|
||||||
|
"about.production.monthly-capacity": "Monthly Capacity (Units)",
|
||||||
|
"about.production.guarantee": "Production Guarantee",
|
||||||
|
"about.production.pass-rate": "Pass Rate",
|
||||||
|
"about.production.lines": "Production Lines",
|
||||||
|
|
||||||
|
"about.company.image": "SPML Corporate Image",
|
||||||
|
"about.tech.image": "SPML Technology Showcase"
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,469 @@
|
||||||
|
<script setup>
|
||||||
|
import topBar from "@/components/top/title-bar.vue";
|
||||||
|
import footBar from "@/components/bottom/foot-bar.vue";
|
||||||
|
import { useRouter } from "#imports";
|
||||||
|
import { useI18n } from "#imports";
|
||||||
|
import { computed } from "vue";
|
||||||
|
import { usePageTitle } from "@/composables/usePageTitle.js";
|
||||||
|
import { useImagePath } from "@/composables/useImagePath.js";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { cdnImageUrl } = useImagePath();
|
||||||
|
|
||||||
|
// 设置页面标题
|
||||||
|
usePageTitle("page.contact-us");
|
||||||
|
|
||||||
|
// 计算banner背景样式
|
||||||
|
const bannerStyle = computed(() => ({
|
||||||
|
background: `url("${cdnImageUrl('/static/contact-us/contact-us_banner.jpg')}") center/cover no-repeat`
|
||||||
|
}));
|
||||||
|
|
||||||
|
// 路由跳转
|
||||||
|
const goTab = (path) => {
|
||||||
|
router.push({
|
||||||
|
name: path,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<topBar class="define-topBar__components"></topBar>
|
||||||
|
|
||||||
|
<!-- Banner -->
|
||||||
|
<div class="banner">
|
||||||
|
<div class="banner-overlay" :style="bannerStyle"></div>
|
||||||
|
<div class="banner-content">
|
||||||
|
<h1 class="banner-title">{{ t("contact.page.title") }}</h1>
|
||||||
|
<p class="banner-subtitle">{{ t("contact.page.subtitle") }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 面包屑导航 -->
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<div class="breadcrumb-container">
|
||||||
|
<a @click="goTab('home')" class="breadcrumb-link">
|
||||||
|
<img :src="cdnImageUrl('/static/common/home.png')" :alt="t('page.home')" />
|
||||||
|
{{ t("contact.breadcrumb.home") }}
|
||||||
|
</a>
|
||||||
|
<span class="breadcrumb-separator">></span>
|
||||||
|
<span class="breadcrumb-current">{{ t("contact.breadcrumb.contact") }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="container">
|
||||||
|
<!-- 欢迎语 -->
|
||||||
|
<div class="welcome-text">
|
||||||
|
{{ t("contact.welcome") }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 联系信息 -->
|
||||||
|
<div class="contact-grid">
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-label">{{ t("contact.company.label") }}</div>
|
||||||
|
<div class="contact-value">{{ t("contact.company.name") }}</div>
|
||||||
|
<div class="contact-value">{{ t("contact.company.address") }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-label">{{ t("contact.phone.label") }}</div>
|
||||||
|
<div class="contact-value">86-0755-2373 6296</div>
|
||||||
|
<div class="contact-value">86-15278708583</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-label">{{ t("contact.email.label") }}</div>
|
||||||
|
<div class="contact-value">business@mingyanglg.com</div>
|
||||||
|
<div class="contact-value">sales@mingyanglg.com</div>
|
||||||
|
<div class="contact-value">service@mingyanglg.com</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<foot-bar></foot-bar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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 {
|
||||||
|
// background: linear-gradient(135deg, #1a1a2e, #16213e);
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 50px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 350px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
padding: 100px 0;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
padding: 80px 0;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
padding: 70px 0;
|
||||||
|
height: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 60px 0;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 50px 0;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 40px 0;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 35px 0;
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0.9;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-title {
|
||||||
|
font-size: 46px !important;
|
||||||
|
font-weight: 300;
|
||||||
|
font-family: var(--font-light);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: 56px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: 48px;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: 40px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 36px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 32px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-subtitle {
|
||||||
|
font-size: 18px !important;
|
||||||
|
opacity: 0.8;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 300;
|
||||||
|
font-family: var(--font-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 40px 0;
|
||||||
|
|
||||||
|
.banner-title {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 面包屑导航 */
|
||||||
|
.breadcrumb {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 20px 0;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
|
||||||
|
.breadcrumb-container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link {
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-separator {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-current {
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主要内容 */
|
||||||
|
.main-content {
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 60px 0 80px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
padding: 120px 0 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
padding: 100px 0 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
padding: 80px 0 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 60px 0 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 50px 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 40px 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 35px 0 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 欢迎语 */
|
||||||
|
.welcome-text {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px !important;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
font-weight: 300;
|
||||||
|
font-family: var(--font-light);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: 28px !important;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: 24px !important;
|
||||||
|
margin-bottom: 70px;
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: 20px !important;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 18px !important;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 16px !important;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 15px !important;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
font-size: 14px !important;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 联系信息网格 */
|
||||||
|
.contact-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 60px;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 100px;
|
||||||
|
max-width: 1400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 80px;
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 70px;
|
||||||
|
max-width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 50px;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 40px;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
gap: 30px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: var(--font-medium);
|
||||||
|
color: #999;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-value {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: var(--font-regular);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式已在各个组件中处理 */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
useI18n
|
||||||
|
} from "#imports";
|
||||||
|
const {
|
||||||
|
t
|
||||||
|
} = useI18n();
|
||||||
|
useHead({
|
||||||
|
title: '404'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="pageMain">
|
||||||
|
<div class="pageMain__content">
|
||||||
|
<div class="pageMain__content__left">
|
||||||
|
<img class="pageMain__content__left__avater" loading="lazy" decoding="async"
|
||||||
|
src="/static/error/404_icon.webp" />
|
||||||
|
</div>
|
||||||
|
<div class="pageMain__content__right">
|
||||||
|
<h2 class="pageMain__content__right__content">
|
||||||
|
<p class="pageMain__content__right__content__text">{{t('page.404-content')}}</p>
|
||||||
|
</h2>
|
||||||
|
<a class="pageMain__content__right__btn" href="/">{{t('page.404-button')}}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pageMain {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
@media (max-width:850px) {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
&__avater {
|
||||||
|
width: 520px;
|
||||||
|
height: 370px;
|
||||||
|
|
||||||
|
@media (min-width:1920px) {
|
||||||
|
width: 5.2rem;
|
||||||
|
height: 3.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:850px) {
|
||||||
|
width: 80%;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
width: 300px;
|
||||||
|
color: #272727;
|
||||||
|
|
||||||
|
@media (min-width:1920px) {
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:520px) {
|
||||||
|
margin-top: 50px;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
&__text {
|
||||||
|
font-size: 23px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #636363;
|
||||||
|
|
||||||
|
@media (min-width:1920px) {
|
||||||
|
font-size: 0.23rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:520px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btn {
|
||||||
|
width: fit-content;
|
||||||
|
padding: 0 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
background: #03060b;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #f7f7f7;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 2;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
|
||||||
|
@media (min-width:1920px) {
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
font-size: 0.12rem;
|
||||||
|
padding: 0 0.1rem;
|
||||||
|
border-radius: 0.06rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,809 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, onBeforeMount, onMounted, computed } from "vue";
|
||||||
|
import { useRouter } from "#imports";
|
||||||
|
import { useI18n } from "#imports";
|
||||||
|
import { usePageTitle } from "@/composables/usePageTitle.js";
|
||||||
|
import { useImagePath } from "@/composables/useImagePath.js";
|
||||||
|
import topBar from "@/components/top/title-bar.vue";
|
||||||
|
import footBar from "@/components/bottom/foot-bar.vue";
|
||||||
|
import { Swiper } from "swiper";
|
||||||
|
import { Navigation, Pagination, Autoplay } from "swiper/modules";
|
||||||
|
import "swiper/css";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import "swiper/css/pagination";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const { t } = useI18n();
|
||||||
|
const { cdnImageUrl } = useImagePath();
|
||||||
|
|
||||||
|
// 设置页面标题
|
||||||
|
usePageTitle("page.home");
|
||||||
|
|
||||||
|
// 响应式数据定义 - 使用computed确保国际化文本能响应语言切换
|
||||||
|
const swiperData = computed(() => [
|
||||||
|
{
|
||||||
|
image: cdnImageUrl("/static/home/swiper_01.png"),
|
||||||
|
title: t("home.swiper.led.title"),
|
||||||
|
subtitle: t("home.swiper.led.subtitle"),
|
||||||
|
description: t("home.swiper.led.description"),
|
||||||
|
buttonText: t("home.swiper.led.button"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: cdnImageUrl("/static/home/swiper_03.jpg"),
|
||||||
|
title: t("home.swiper.monitor.title"),
|
||||||
|
subtitle: t("home.swiper.monitor.subtitle"),
|
||||||
|
description: t("home.swiper.monitor.description"),
|
||||||
|
buttonText: t("home.swiper.monitor.button"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: cdnImageUrl("/static/home/swiper_02.jpg"),
|
||||||
|
title: t("home.swiper.security.title"),
|
||||||
|
subtitle: t("home.swiper.security.subtitle"),
|
||||||
|
description: t("home.swiper.security.description"),
|
||||||
|
buttonText: t("home.swiper.security.button"),
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const productList = computed(() => [
|
||||||
|
{
|
||||||
|
_id: "S01",
|
||||||
|
name: t("product.s01.name"),
|
||||||
|
category: t("product.s01.category"),
|
||||||
|
description: t("product.s01.description"),
|
||||||
|
image: cdnImageUrl("/static/product/monitor/S01.png"),
|
||||||
|
isHot: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: "T11",
|
||||||
|
name: t("product.t11.name"),
|
||||||
|
category: t("product.t11.category"),
|
||||||
|
description: t("product.t11.description"),
|
||||||
|
image: cdnImageUrl("/static/product/monitor/T11.png")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
_id: "XA-01",
|
||||||
|
name: t("product.xa01.name"),
|
||||||
|
category: t("product.xa01.category"),
|
||||||
|
description: t("product.xa01.description"),
|
||||||
|
image: cdnImageUrl("/static/product/street_light/XA-01.png")
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 获取产品列表
|
||||||
|
const currentProducts = computed(() => {
|
||||||
|
return productList.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 跳转到产品页面
|
||||||
|
const goProduct = (item) => {
|
||||||
|
// 根据产品类型确定分类
|
||||||
|
const category = item._id === "XA-01" ? "street-light" : "monitor";
|
||||||
|
router.push({
|
||||||
|
path: "/product",
|
||||||
|
query: {
|
||||||
|
category: category,
|
||||||
|
id: item._id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 跳转到产品页面（查看更多）
|
||||||
|
const goToProductPage = () => {
|
||||||
|
router.push("/product");
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理轮播图按钮点击
|
||||||
|
const handleSwiperButtonClick = (item) => {
|
||||||
|
// 根据轮播图标题中的关键词来判断产品类型
|
||||||
|
// 使用图片路径来判断，避免依赖可变的国际化文本
|
||||||
|
if (item.image.includes("swiper_01")) {
|
||||||
|
// LED照明相关 - 对应路灯产品
|
||||||
|
router.push({
|
||||||
|
path: "/product",
|
||||||
|
query: {
|
||||||
|
category: "street-light"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 监控设备相关
|
||||||
|
router.push({
|
||||||
|
path: "/product",
|
||||||
|
query: {
|
||||||
|
category: "monitor"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始化Swiper轮播图
|
||||||
|
const swiper = new Swiper(".swiper-container", {
|
||||||
|
modules: [Navigation, Pagination, Autoplay],
|
||||||
|
loop: true,
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
pauseOnMouseEnter: true,
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
clickable: true,
|
||||||
|
dynamicBullets: true,
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
speed: 800,
|
||||||
|
effect: "slide",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="home-page">
|
||||||
|
<topBar class="define-topBar__components"></topBar>
|
||||||
|
|
||||||
|
<section class="hero-banner">
|
||||||
|
<div class="swiper-container">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in swiperData"
|
||||||
|
:key="index"
|
||||||
|
class="swiper-slide"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="slide-bg"
|
||||||
|
:style="{ backgroundImage: `url(${item.image})` }"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="slide-content">
|
||||||
|
<div class="slide-tag">{{ item.title }}</div>
|
||||||
|
<h1 class="slide-title">{{ item.subtitle }}</h1>
|
||||||
|
<p class="slide-description">{{ item.description }}</p>
|
||||||
|
<button class="cta-button" @click="handleSwiperButtonClick(item)">{{ item.buttonText }}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 产品展示 -->
|
||||||
|
<section class="products-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">{{ t("home.products.title") }}</h2>
|
||||||
|
<p class="section-subtitle">{{ t("home.products.subtitle") }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 精选产品展示 -->
|
||||||
|
<div class="featured-products">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in currentProducts"
|
||||||
|
:key="item._id"
|
||||||
|
class="featured-product-card"
|
||||||
|
:class="`card-${index + 1}`"
|
||||||
|
@click="goProduct(item)"
|
||||||
|
>
|
||||||
|
<div v-if="item.isHot" class="hot-badge">{{ t("product.hot.badge") }}</div>
|
||||||
|
<div class="product-image-section">
|
||||||
|
<div class="product-image-container">
|
||||||
|
<img v-lazy="item.image" :alt="item.name" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="product-content-section">
|
||||||
|
<div class="product-category">{{ item.category }}</div>
|
||||||
|
<h3 class="product-title">{{ item.name }}</h3>
|
||||||
|
<p class="product-description">{{ item.description }}</p>
|
||||||
|
|
||||||
|
<div class="product-action">
|
||||||
|
<button class="learn-more-btn">
|
||||||
|
{{ t("product.learn-more") }}
|
||||||
|
<i class="arrow-icon"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 查看更多产品按钮 -->
|
||||||
|
<div class="more-products-section">
|
||||||
|
<button class="more-products-btn" @click="goToProductPage">
|
||||||
|
{{ t("home.products.view-all") }}
|
||||||
|
<i class="arrow-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<foot-bar></foot-bar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 基础样式
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-page {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding-top: 50px; // 为固定导航栏留出空间
|
||||||
|
|
||||||
|
// 4K 和超大屏幕适配
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1440px) {
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding-top: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1800px;
|
||||||
|
padding: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 1400px;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
max-width: 1200px;
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hero Banner Swiper
|
||||||
|
.hero-banner {
|
||||||
|
position: relative;
|
||||||
|
height: 400px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
height: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
height: 520px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
height: 440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
height: 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除遮罩层样式
|
||||||
|
|
||||||
|
.slide-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
max-width: 600px;
|
||||||
|
padding: 0 20px;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
max-width: 1000px;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
max-width: 700px;
|
||||||
|
padding: 0 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
max-width: 90%;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
max-width: 90%;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
max-width: 95%;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
max-width: 95%;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-tag {
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba(79, 140, 239, 0.9);
|
||||||
|
color: white;
|
||||||
|
padding: 6px 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-title {
|
||||||
|
font-size: 46px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
font-size: 72px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
font-size: 60px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
font-size: 52px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 40px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 32px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-description {
|
||||||
|
font-size: 18px;
|
||||||
|
opacity: 0.9;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button {
|
||||||
|
background: #4f8cef;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 30px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #3a7bd8;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 20px rgba(79, 140, 239, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 10px 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 轮播图样式完成
|
||||||
|
|
||||||
|
// Swiper 控制按钮样式
|
||||||
|
.swiper-pagination {
|
||||||
|
bottom: 20px !important;
|
||||||
|
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
opacity: 1;
|
||||||
|
margin: 0 6px;
|
||||||
|
|
||||||
|
&.swiper-pagination-bullet-active {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-prev,
|
||||||
|
.swiper-button-next {
|
||||||
|
color: white !important;
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
margin-top: -20px !important;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 产品展示部分
|
||||||
|
.products-section {
|
||||||
|
padding: 60px 0;
|
||||||
|
background: #f8f9fa;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
padding: 120px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
padding: 25px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #7f8c8d;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 精选产品展示
|
||||||
|
.featured-products {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
// 4K 和超大屏幕
|
||||||
|
@media (min-width: 2560px) {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 40px;
|
||||||
|
margin-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 32px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 28px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-product-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
.product-image-container img {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.learn-more-btn {
|
||||||
|
background: linear-gradient(135deg, #4f8cef, #3a7bd8);
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||||||
|
color: white;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
z-index: 2;
|
||||||
|
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-image-section {
|
||||||
|
height: 240px;
|
||||||
|
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-image-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 85%;
|
||||||
|
max-height: 85%;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: transform 0.4s ease;
|
||||||
|
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-content-section {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-category {
|
||||||
|
color: #4f8cef;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-description {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f8c8d;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-action {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.learn-more-btn {
|
||||||
|
background: transparent;
|
||||||
|
color: #4f8cef;
|
||||||
|
border: 2px solid #4f8cef;
|
||||||
|
padding: 12px 30px;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.arrow-icon {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 4px solid transparent;
|
||||||
|
border-bottom: 4px solid transparent;
|
||||||
|
border-left: 6px solid currentColor;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看更多产品按钮
|
||||||
|
.more-products-section {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-products-btn {
|
||||||
|
background: linear-gradient(135deg, #4f8cef, #3a7bd8);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 30px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(135deg, #3a7bd8, #2c5aa0);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 20px rgba(79, 140, 239, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-top: 4px solid transparent;
|
||||||
|
border-bottom: 4px solid transparent;
|
||||||
|
border-left: 6px solid white;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .arrow-right {
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onBeforeMount
|
||||||
|
} from 'vue'
|
||||||
|
import {
|
||||||
|
useI18n
|
||||||
|
} from "vue-i18n";
|
||||||
|
import zhContent from '~/pages/protocol/components/privacy-policy/zh-page.vue';
|
||||||
|
import enContent from '~/pages/protocol/components/privacy-policy/en-page.vue';
|
||||||
|
import langToCheck from '@/hook/lang.js';
|
||||||
|
const {
|
||||||
|
t
|
||||||
|
} = useI18n();
|
||||||
|
const langIs = ref('')
|
||||||
|
useHead({
|
||||||
|
title: t('foot.privacy-policy'),
|
||||||
|
})
|
||||||
|
onBeforeMount(()=>{
|
||||||
|
langIs.value = langToCheck()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<zh-content v-if="langIs == 'zh-Hans' "></zh-content>
|
||||||
|
<ja-content v-else-if="langIs == 'ja' "></ja-content>
|
||||||
|
<en-content v-else></en-content>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,374 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
onBeforeMount,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onActivated,
|
||||||
|
onMounted
|
||||||
|
} from "vue";
|
||||||
|
import {
|
||||||
|
GetProductDetailApi
|
||||||
|
} from "@/service/api.js";
|
||||||
|
// 语言判断
|
||||||
|
import langToCheck from "@/hook/lang.js";
|
||||||
|
import {
|
||||||
|
useI18n
|
||||||
|
} from "vue-i18n";
|
||||||
|
import topBar from "@/components/top/title-bar.vue";
|
||||||
|
import footBar from "@/components/bottom/foot-bar.vue";
|
||||||
|
// // 折叠面板
|
||||||
|
// import collapse from "./components/collapse.vue";
|
||||||
|
// //详细参数，查看更多
|
||||||
|
// import detailParams from "./components/detail-params.vue";
|
||||||
|
import {
|
||||||
|
useRoute
|
||||||
|
} from '#imports';
|
||||||
|
const {
|
||||||
|
t
|
||||||
|
} = useI18n();
|
||||||
|
const route = useRoute();
|
||||||
|
const langIs = ref('');
|
||||||
|
onBeforeMount(()=>{
|
||||||
|
langIs.value = langToCheck()
|
||||||
|
})
|
||||||
|
//监听返回顶部
|
||||||
|
let proId = ref("");
|
||||||
|
let proName = ref("");
|
||||||
|
let proImgPath = reactive({
|
||||||
|
data: []
|
||||||
|
});
|
||||||
|
const productSpecs = reactive({
|
||||||
|
data: []
|
||||||
|
});
|
||||||
|
|
||||||
|
// 展示
|
||||||
|
let tabCollection = reactive([]);
|
||||||
|
let isMaskShow = ref(true); //是否显示遮罩层
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
tabCollection.push({
|
||||||
|
name: t("detail.summary"),
|
||||||
|
value: 0,
|
||||||
|
});
|
||||||
|
tabContent.value = tabCollection[0].name
|
||||||
|
if (route.query.id) {
|
||||||
|
proId.value = route.query.id;
|
||||||
|
GetSpaceRequest(proId.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
onBeforeUnmount(()=>{
|
||||||
|
window.removeEventListener('scroll', HandleScroll);
|
||||||
|
window.removeEventListener('resize', UpdateDropdown);
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听页面滚动事件
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('scroll', HandleScroll);
|
||||||
|
window.addEventListener('resize', UpdateDropdown);
|
||||||
|
});
|
||||||
|
|
||||||
|
const GetSpaceRequest = (Id) => {
|
||||||
|
let parmas = {
|
||||||
|
locale: langIs.value,
|
||||||
|
product_id: Id,
|
||||||
|
};
|
||||||
|
GetProductDetailApi(parmas).then((res) => {
|
||||||
|
if (res.info.children[0]) {
|
||||||
|
let received = res.info.children[0];
|
||||||
|
productSpecs.data = received.product_specs;
|
||||||
|
if (productSpecs.data.length > 0) {
|
||||||
|
tabCollection.push({
|
||||||
|
name: t("detail.specs"),
|
||||||
|
value: 1
|
||||||
|
}
|
||||||
|
// ,{
|
||||||
|
// name: t("page.support"),
|
||||||
|
// value: 2
|
||||||
|
// }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
proImgPath.data = received.product_detail_imgs;
|
||||||
|
proName.value = received.product_name;
|
||||||
|
document.title = received.product_name;
|
||||||
|
isMaskShow.value = false
|
||||||
|
}
|
||||||
|
}).catch(isMaskShow.value = false)
|
||||||
|
};
|
||||||
|
let tabValue = ref(0);
|
||||||
|
let tabContent = ref("");
|
||||||
|
let tabChange = (item,index) => {
|
||||||
|
tabValue.value = index;
|
||||||
|
tabContent.value = item.name;
|
||||||
|
};
|
||||||
|
let scrollTop = ref(0); // 监听滚动事件得到的值
|
||||||
|
const isDropOpen = ref(false); //遮罩关闭跟隐藏
|
||||||
|
const UpdateDropdown = () =>{
|
||||||
|
isDropOpen.value = false
|
||||||
|
}
|
||||||
|
// 滚动监听
|
||||||
|
const HandleScroll = () => {
|
||||||
|
scrollTop.value = window.scrollY
|
||||||
|
|| document.documentElement.scrollTop;
|
||||||
|
isDropOpen.value = false
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<topBar></topBar>
|
||||||
|
<div class="sticky-page-layout" id="sticky-page-layout">
|
||||||
|
<div class="nav-sticky" :class="{ 'nav-sticky--active': scrollTop >= 100 }">
|
||||||
|
<div class="nav-sticky__center">
|
||||||
|
<h1 class="nav-sticky__center__left">{{ proName }}</h1>
|
||||||
|
<div class="nav-sticky__center__right" @click="isDropOpen = !isDropOpen">
|
||||||
|
<div class="nav-sticky__center__right__item"
|
||||||
|
:class="{'nav-sticky__center__right--Active': tabValue == item.value}"
|
||||||
|
@click="tabChange(item,index)" v-for="(item, index) in tabCollection"
|
||||||
|
:key="'detail' + index">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<div class="nav-sticky__center__right__dropdown">
|
||||||
|
<div class="nav-sticky__center__right__dropdown__up">
|
||||||
|
{{tabContent}}
|
||||||
|
<span class="arrow-down iconfont icon-xiajiantou"></span>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-sticky__center__right__dropdown__menu" v-if="isDropOpen">
|
||||||
|
<li @click="tabChange(item,index)"
|
||||||
|
class="nav-sticky__center__right__dropdown__menu__item"
|
||||||
|
:class="{'nav-sticky__center__right__dropdown__menu__item--Active': tabValue == item.value}"
|
||||||
|
v-for="(item, index) in tabCollection"
|
||||||
|
:key="'detail-dropdown' + index">{{item.name}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="tabValue == 0">
|
||||||
|
<div class="detail-banner">
|
||||||
|
<img class="detail-banner__avater" v-lazy="proImgPath.data[0]" />
|
||||||
|
</div>
|
||||||
|
<!-- 介绍方格 -->
|
||||||
|
<div class="product__box">
|
||||||
|
<img class="product__box__avater" v-lazy="proImgPath.data[1]" />
|
||||||
|
</div>
|
||||||
|
<!-- 液晶显示屏-->
|
||||||
|
<div class="screen" style="background-color: #1b1b1b">
|
||||||
|
<div class="screen__box">
|
||||||
|
<img class="screen__box__img" v-lazy="proImgPath.data[2]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 断电 -->
|
||||||
|
<div class="outage">
|
||||||
|
<img class="outage__avater__img" v-lazy="proImgPath.data[3]" />
|
||||||
|
</div>
|
||||||
|
<!-- 切换面板 -->
|
||||||
|
<div class="switchboard">
|
||||||
|
<img class="screen__box__avater__img" v-lazy="proImgPath.data[4]" />
|
||||||
|
</div>
|
||||||
|
<!-- 端口介绍 -->
|
||||||
|
<div class="port" style="background-color: #0b0d0f">
|
||||||
|
<div class="port__box">
|
||||||
|
<div class="port__box__content">
|
||||||
|
<div class="port__box__content__detail">
|
||||||
|
<img class="port__box__content__detail__avater" v-lazy="proImgPath.data[5]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 循环 -->
|
||||||
|
<div class="loop">
|
||||||
|
<div class="loop__box">
|
||||||
|
<img class="loop__box__avater" v-lazy="proImgPath.data[6]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 保护系统-->
|
||||||
|
<div class="protection">
|
||||||
|
<div class="protection__box">
|
||||||
|
<div class="protection__box__avater">
|
||||||
|
<img class="protection__box__avater__picture" v-lazy="proImgPath.data[7]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 展示 -->
|
||||||
|
<div class="show">
|
||||||
|
<div class="show__box">
|
||||||
|
<div class="protection__box__avater">
|
||||||
|
<img class="protection__box__avater__picture" v-lazy="proImgPath.data[8]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="tabValue == 1">
|
||||||
|
<!-- <detail-params :detailList="productSpecs.data"></detail-params> -->
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<!-- <collapse></collapse> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<foot-bar></foot-bar>
|
||||||
|
<!-- 尾部 -->
|
||||||
|
<div class="load-mask" v-if="isMaskShow">
|
||||||
|
<div class="spinner">
|
||||||
|
<div class="spinner__item bounce1"></div>
|
||||||
|
<div class="spinner__item bounce2"></div>
|
||||||
|
<div class="spinner__item bounce3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page {
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-family: MiSans-Light;
|
||||||
|
}
|
||||||
|
|
||||||
|
$tone-color: #fff; //字体主色调
|
||||||
|
|
||||||
|
@mixin detailWidth {
|
||||||
|
width: 9.8rem;
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
width: 750px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-banner {
|
||||||
|
width: 100%;
|
||||||
|
color: $tone-color;
|
||||||
|
|
||||||
|
&__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
padding-top: 1.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
padding-top: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 方框介绍
|
||||||
|
.product__box {
|
||||||
|
padding: 2rem 0 0rem;
|
||||||
|
@include detailWidth;
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
padding: 3rem 0 0;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
margin: 0 auto;
|
||||||
|
height: auto;
|
||||||
|
color: $tone-color;
|
||||||
|
|
||||||
|
&__avater {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//液晶显示屏
|
||||||
|
.screen {
|
||||||
|
margin-top: 2rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
margin-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
padding: 150px 0 70px;
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
padding: 3rem 0 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include detailWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换面板
|
||||||
|
.switchboard {
|
||||||
|
@include detailWidth;
|
||||||
|
margin: 1.5rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
//端口介绍
|
||||||
|
.port {
|
||||||
|
padding: 2.5rem 0;
|
||||||
|
margin: 0.3rem 0 2rem;
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
padding: 3rem 0 0;
|
||||||
|
margin: 2rem auto 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
@include detailWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 循环
|
||||||
|
.loop {
|
||||||
|
&__box {
|
||||||
|
margin: 3rem auto 0;
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
margin: 4rem auto 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
@include detailWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保护系统
|
||||||
|
.protection {
|
||||||
|
&__box {
|
||||||
|
@include detailWidth;
|
||||||
|
margin: 3rem auto 2rem;
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
width: 90%;
|
||||||
|
margin: 3rem auto 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//展示
|
||||||
|
.show {
|
||||||
|
margin: 0 auto;
|
||||||
|
@include detailWidth;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,927 @@
|
||||||
|
// 方框介绍
|
||||||
|
.mobile-product {
|
||||||
|
width: 17.54rem;
|
||||||
|
margin: 1.27rem auto 0.77rem;
|
||||||
|
height: 15.25rem;
|
||||||
|
|
||||||
|
&__sec {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@mixin secStyle {
|
||||||
|
width: 6.63rem;
|
||||||
|
height: 4.74rem;
|
||||||
|
background: linear-gradient(182deg, #232E3C, #05080B);
|
||||||
|
border-radius: 0.27rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item1 {
|
||||||
|
@include secStyle;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 0%, #0FFFC4 40%, #006AFF 60%, #006AFF 100%, );
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 0.27rem;
|
||||||
|
height: 1.55rem;
|
||||||
|
font-size: 1.11rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.24rem;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
width: fit-content;
|
||||||
|
height: 1.02rem;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
line-height: 0.93rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item2 {
|
||||||
|
@include secStyle;
|
||||||
|
width: 4.71rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
margin: 0.31rem 0 0.21rem;
|
||||||
|
width: 2.23rem;
|
||||||
|
height: 2.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.96rem;
|
||||||
|
line-height: 0.89rem;
|
||||||
|
font-size: 0.89rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
height: 0.96rem;
|
||||||
|
font-size: 0.52rem;
|
||||||
|
line-height: 1.02rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text3 {
|
||||||
|
padding-left: 0.15rem;
|
||||||
|
height: 0.96rem;
|
||||||
|
line-height: 1.05rem;
|
||||||
|
font-size: 0.52rem;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item3 {
|
||||||
|
@include secStyle;
|
||||||
|
width: 5.73rem;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
margin-top: 0.71rem;
|
||||||
|
width: 1.61rem;
|
||||||
|
height: 2.54rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 0.52rem;
|
||||||
|
width: fit-content;
|
||||||
|
height: 1.55rem;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
background: linear-gradient(81deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sec2 {
|
||||||
|
margin-top: 0.27rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 6.63rem 6.63rem 3.81rem;
|
||||||
|
grid-template-rows: 4.74rem 4.74rem;
|
||||||
|
grid-row-gap: 0.27rem;
|
||||||
|
grid-column-gap: 0.27rem;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
grid-template-areas:
|
||||||
|
'gap1 gap1 gap2'
|
||||||
|
'gap3 gap4 gap4';
|
||||||
|
|
||||||
|
&__item1 {
|
||||||
|
grid-area: gap1;
|
||||||
|
background: url('/static/product/detail/n051/solar__2.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
border-radius: 0.62rem;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding-right: 0.31rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
&__top {
|
||||||
|
display: flex;
|
||||||
|
&__text {
|
||||||
|
height: 1.14rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0, #0FFFC4 20%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
font-size: 0.43rem;
|
||||||
|
padding: 0.43rem 0 0 0.15rem;
|
||||||
|
background: linear-gradient(87deg, #006AFF 0, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottom {
|
||||||
|
height: 0.83rem;
|
||||||
|
font-size: 0.52rem;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 0.43rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item2 {
|
||||||
|
grid-area: gap2;
|
||||||
|
background: url('/static/product/detail/n051/charging.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.27rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 1.67rem;
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.58rem;
|
||||||
|
line-height: 0.58rem;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.58rem;
|
||||||
|
line-height: 0.58rem;
|
||||||
|
font-size: 0.37rem;
|
||||||
|
background: linear-gradient(90deg, #0FFFC4 0%, #0FFFC4 70%, #006AFF 100%);
|
||||||
|
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text3 {
|
||||||
|
margin-top: 0.86rem;
|
||||||
|
height: 0.99rem;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item3 {
|
||||||
|
grid-area: gap3;
|
||||||
|
background: url('/static/product/detail/n051/rate.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.27rem;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
transform: translateY(1.42rem);
|
||||||
|
width: fit-content;
|
||||||
|
height: 1.11rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
transform: translateY(1.86rem);
|
||||||
|
width: 5.27rem;
|
||||||
|
height: 0.71rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-size: 0.52rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FEFEFE;
|
||||||
|
line-height: 0.71rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item4 {
|
||||||
|
grid-area: gap4;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(182deg, #232E3C, #05080B);
|
||||||
|
border-radius: 0.27rem;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
margin-top: 0.46rem;
|
||||||
|
width: 4.4rem;
|
||||||
|
height: 4.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
height: fit-content;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(266deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
height: 1.27rem;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
line-height: 0.93rem;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//放大视频
|
||||||
|
.mobile-Energy {
|
||||||
|
width: 18.1rem;
|
||||||
|
height: 9.79rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
&__avater {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//白天黑夜
|
||||||
|
.mobile-sun {
|
||||||
|
width: 100%;
|
||||||
|
height: 19.06rem;
|
||||||
|
&__img {
|
||||||
|
width: 100%;
|
||||||
|
height: 9.36rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
transform: translateY(0.24rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//电流视频
|
||||||
|
.mobile-filter-video {
|
||||||
|
&__box {
|
||||||
|
width: 16.02rem;
|
||||||
|
height: 9.42rem;
|
||||||
|
margin: 4.03rem auto 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: fit-content;
|
||||||
|
position: absolute;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
top: 0;
|
||||||
|
width: 8.06rem;
|
||||||
|
&__text {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
height: 1.55rem;
|
||||||
|
font-size: 1.55rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 1.55rem;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 20%, #006AFF 100%, );
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
font-size: 0.38rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #dfdfdf;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//AC太阳能板
|
||||||
|
.Plugged {
|
||||||
|
margin-top: 5.36rem;
|
||||||
|
&__bar-view {
|
||||||
|
width: 16.52rem;
|
||||||
|
height: 0.86rem;
|
||||||
|
margin: 1.55rem auto 0;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
position: relative;
|
||||||
|
&__list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: #C1C1C1;
|
||||||
|
border-bottom: 0.09rem solid #646464;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-bottom: 0.15rem;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 0;
|
||||||
|
font-size: 0.46rem;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -0.09rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 0.93rem;
|
||||||
|
transition: all 0.3s;
|
||||||
|
height: 0.09rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-li--active {
|
||||||
|
&::after {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//AC太阳能板
|
||||||
|
&__swiper {
|
||||||
|
margin: 1.11rem auto 2.54rem;
|
||||||
|
width:15.25rem;
|
||||||
|
height:12.71rem;
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&__full {
|
||||||
|
width:15.4rem;
|
||||||
|
height:12.71rem;
|
||||||
|
&__item {
|
||||||
|
//显示小时裁决样式
|
||||||
|
@mixin hoursStyle {
|
||||||
|
display: flex;
|
||||||
|
height: 1.79rem;
|
||||||
|
align-items: flex-end;
|
||||||
|
&__right {
|
||||||
|
font-size: 0.43rem;
|
||||||
|
line-height: 0.62rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 1.73rem;
|
||||||
|
height: 1.79rem;
|
||||||
|
line-height: 1.79rem;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
height: 1.79rem;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
line-height: 2.69rem;
|
||||||
|
padding-left: 0.21rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
margin-top: 1.02rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
width:15.5rem;
|
||||||
|
&__img {
|
||||||
|
width:7.16rem;
|
||||||
|
height:5.76rem;
|
||||||
|
position: relative;
|
||||||
|
img {
|
||||||
|
width:7.16rem;
|
||||||
|
height:5.76rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__power {
|
||||||
|
font-size: 0.58rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.14rem;
|
||||||
|
left: 0.71rem;
|
||||||
|
color: #CCCCCC;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour {
|
||||||
|
margin:0.55rem 0 0 0.77rem ;
|
||||||
|
@include hoursStyle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box2 {
|
||||||
|
width:15.25rem;
|
||||||
|
height:5.79rem;
|
||||||
|
margin-top: 1.02rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__img2 {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__power {
|
||||||
|
font-size: 0.58rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.24rem;
|
||||||
|
left: 1.36rem;
|
||||||
|
color: #CCCCCC;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.55rem;
|
||||||
|
right: 4.09rem;
|
||||||
|
@include hoursStyle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box3 {
|
||||||
|
margin-top: 2.54rem;
|
||||||
|
&__img3 {
|
||||||
|
width:12.46rem;
|
||||||
|
height:4.21rem;
|
||||||
|
padding-left: 2.82rem;
|
||||||
|
img {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box4 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 3.81rem;
|
||||||
|
&__img4{
|
||||||
|
width:12.09rem;
|
||||||
|
height:3.96rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img5 {
|
||||||
|
width:11.56rem;
|
||||||
|
height:4.24rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour {
|
||||||
|
@include hoursStyle;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.54rem;
|
||||||
|
right: 2.04rem;
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
font-size: 1.73rem;
|
||||||
|
height: 3.44rem;
|
||||||
|
line-height: 3.44rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
font-size: 0.77rem;
|
||||||
|
line-height: 0.77rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour2 {
|
||||||
|
@include hoursStyle;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.04rem;
|
||||||
|
right: 4.46rem;
|
||||||
|
&__left {
|
||||||
|
font-size: 1.64rem;
|
||||||
|
height: 3.44rem;
|
||||||
|
line-height: 3.68rem;
|
||||||
|
}
|
||||||
|
&__right {
|
||||||
|
font-size: 0.58rem;
|
||||||
|
line-height: 1.14rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 快充进度条
|
||||||
|
.Fast {
|
||||||
|
width: 18.6rem;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
padding-left: 1.02rem;
|
||||||
|
color: #fff;
|
||||||
|
h2 {
|
||||||
|
height: 1.86rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.86rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
width: fit-content;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
overflow: hidden;
|
||||||
|
p{
|
||||||
|
display: inline-block;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 0.46rem;
|
||||||
|
height: fit-content;
|
||||||
|
line-height: 0.93rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__progress-first {
|
||||||
|
margin-top: 1.33rem;
|
||||||
|
&__content {
|
||||||
|
height: 0.86rem;
|
||||||
|
transition: width .5s ease-out;
|
||||||
|
background: linear-gradient(125deg, #0FFFC4 0,#0FFFC4 30%, #006AFF 70%,#006AFF 100%);
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
width: 3.65rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&__progress-second {
|
||||||
|
margin-top: 1.33rem;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #C5C5C5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: 0;
|
||||||
|
height: 0.86rem;
|
||||||
|
background: #C5C5C5;
|
||||||
|
transition: width .5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
width: 11.19rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//芯片BMS
|
||||||
|
.battery {
|
||||||
|
margin: 4.58rem auto 0;
|
||||||
|
width: 17.54rem;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 1.61rem;
|
||||||
|
|
||||||
|
&__decorate {
|
||||||
|
width: 9.48rem;
|
||||||
|
height: 7.53rem;
|
||||||
|
border-radius: 0.27rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(182deg, #3B3B3B, #05080B);
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 6.72rem;
|
||||||
|
height: 4.34rem;
|
||||||
|
margin-right: 0.77rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img2 {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img3 {
|
||||||
|
width: 5.36rem;
|
||||||
|
height: 5.95rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
margin-left: 0.62rem;
|
||||||
|
width: 8.06rem;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
height: 1.02rem;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 0.93rem;
|
||||||
|
margin: 1.42rem 0 0.49rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0.4rem;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #f5f5f5;
|
||||||
|
line-height: 0.65rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content2 {
|
||||||
|
text-align: right;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0.96rem;
|
||||||
|
h2{
|
||||||
|
font-size: 0.62rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin proIteTitle {
|
||||||
|
height: 1.36rem;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 0.46rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin sectionBox {
|
||||||
|
margin: 0.52rem auto 0;
|
||||||
|
width: 16.43rem;
|
||||||
|
height: 10.41rem;
|
||||||
|
background: linear-gradient(182deg, #3B3B3B, #05080B);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.21rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$caitainerWidth: 18.32rem;
|
||||||
|
//15ports
|
||||||
|
.prots {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 5.95rem auto 0;
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
@include sectionBox;
|
||||||
|
&__text {
|
||||||
|
font-size: 0.77rem;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 1.55rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//智能APP
|
||||||
|
.Intelligent-App {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 3.68rem auto 3.72rem;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
margin-top: 0.52rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 16.74rem;
|
||||||
|
height: 9.2rem;
|
||||||
|
border-radius: 1.02rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
position: absolute;
|
||||||
|
top: 3.72rem;
|
||||||
|
left: 1.61rem;
|
||||||
|
width: 5.64rem;
|
||||||
|
height: 1.79rem;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 0.83rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text-lang {
|
||||||
|
width: 3.72rem;
|
||||||
|
left: 3.16rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
position: absolute;
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.77rem;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
padding-bottom: 1.27rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
transform: translate(10%);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
&__text2-lang{
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//Whats
|
||||||
|
.boat {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 3.06rem auto 2.69rem;
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
@include sectionBox;
|
||||||
|
background: linear-gradient(182deg, #120F0F, #2D2D2D);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//更多产品
|
||||||
|
.More {
|
||||||
|
width: 18.56rem;
|
||||||
|
margin: 1.42rem auto 2.04rem;
|
||||||
|
|
||||||
|
&__top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 1.02rem 0;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 1.27rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
height: fit-content;
|
||||||
|
width: 16.52rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 7.9rem;
|
||||||
|
height: 11.47rem;
|
||||||
|
background: #121212;
|
||||||
|
border-radius: 0.27rem;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
//手机端不能有hover事件
|
||||||
|
&:hover {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 4.8rem;
|
||||||
|
height: 3.84rem;
|
||||||
|
margin-top: 2.04rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 1.02rem;
|
||||||
|
margin-top: 0.58rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subTit {
|
||||||
|
font-size: 0.46rem;
|
||||||
|
width: fit-content;
|
||||||
|
color: #478fff;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #949494;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottom {
|
||||||
|
padding: 0.52rem 1.55rem 0 0;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 0.77rem;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,927 @@
|
||||||
|
// 方框介绍
|
||||||
|
.mobile-product {
|
||||||
|
width: 566px;
|
||||||
|
margin: 41px auto 25px;
|
||||||
|
height: 492px;
|
||||||
|
|
||||||
|
&__sec {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@mixin secStyle {
|
||||||
|
width: 214px;
|
||||||
|
height: 153px;
|
||||||
|
background: linear-gradient(182deg, #232E3C, #05080B);
|
||||||
|
border-radius: 9px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item1 {
|
||||||
|
@include secStyle;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 0%, #0FFFC4 40%, #006AFF 60%, #006AFF 100%, );
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 9px;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 40px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
width: fit-content;
|
||||||
|
height: 33px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item2 {
|
||||||
|
@include secStyle;
|
||||||
|
width: 152px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
margin: 10px 0 7px;
|
||||||
|
width: 72px;
|
||||||
|
height: 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
width: fit-content;
|
||||||
|
height: 31px;
|
||||||
|
line-height: 29px;
|
||||||
|
font-size: 29px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
height: 31px;
|
||||||
|
font-size: 17px;
|
||||||
|
line-height: 33px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text3 {
|
||||||
|
padding-left: 5px;
|
||||||
|
height: 31px;
|
||||||
|
line-height: 34px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item3 {
|
||||||
|
@include secStyle;
|
||||||
|
width: 185px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
margin-top: 23px;
|
||||||
|
width: 52px;
|
||||||
|
height: 82px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 17px;
|
||||||
|
width: fit-content;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
background: linear-gradient(81deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sec2 {
|
||||||
|
margin-top: 9px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 214px 214px 123px;
|
||||||
|
grid-template-rows: 153px 153px;
|
||||||
|
grid-row-gap: 9px;
|
||||||
|
grid-column-gap: 9px;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
grid-template-areas:
|
||||||
|
'gap1 gap1 gap2'
|
||||||
|
'gap3 gap4 gap4';
|
||||||
|
|
||||||
|
&__item1 {
|
||||||
|
grid-area: gap1;
|
||||||
|
background: url('/static/product/detail/n051/solar__2.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
&__top {
|
||||||
|
display: flex;
|
||||||
|
&__text {
|
||||||
|
height: 37px;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0, #0FFFC4 20%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 14px 0 0 5px;
|
||||||
|
background: linear-gradient(87deg, #006AFF 0, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottom {
|
||||||
|
height: 27px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item2 {
|
||||||
|
grid-area: gap2;
|
||||||
|
background: url('/static/product/detail/n051/charging.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 9px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 54px;
|
||||||
|
width: fit-content;
|
||||||
|
height: 19px;
|
||||||
|
line-height: 19px;
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: 600;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
width: fit-content;
|
||||||
|
height: 19px;
|
||||||
|
line-height: 19px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: linear-gradient(90deg, #0FFFC4 0%, #0FFFC4 70%, #006AFF 100%);
|
||||||
|
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text3 {
|
||||||
|
margin-top: 28px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item3 {
|
||||||
|
grid-area: gap3;
|
||||||
|
background: url('/static/product/detail/n051/rate.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 9px;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
transform: translateY(46px);
|
||||||
|
width: fit-content;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
transform: translateY(60px);
|
||||||
|
width: 170px;
|
||||||
|
height: 23px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FEFEFE;
|
||||||
|
line-height: 23px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item4 {
|
||||||
|
grid-area: gap4;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(182deg, #232E3C, #05080B);
|
||||||
|
border-radius: 9px;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
margin-top: 15px;
|
||||||
|
width: 142px;
|
||||||
|
height: 142px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
height: fit-content;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(266deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
height: 41px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 30px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//放大视频
|
||||||
|
.mobile-Energy {
|
||||||
|
width: 584px;
|
||||||
|
height: 316px;
|
||||||
|
margin: 0 auto;
|
||||||
|
&__avater {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//白天黑夜
|
||||||
|
.mobile-sun {
|
||||||
|
width: 100%;
|
||||||
|
height: 615px;
|
||||||
|
&__img {
|
||||||
|
width: 100%;
|
||||||
|
height: 302px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
transform: translateY(8px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//电流视频
|
||||||
|
.mobile-filter-video {
|
||||||
|
&__box {
|
||||||
|
width: 517px;
|
||||||
|
height: 304px;
|
||||||
|
margin: 130px auto 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: fit-content;
|
||||||
|
position: absolute;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
top: 0;
|
||||||
|
width: 260px;
|
||||||
|
&__text {
|
||||||
|
display: flex;
|
||||||
|
width: fit-content;
|
||||||
|
height: 50px;
|
||||||
|
font-size: 50px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 50px;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 20%, #006AFF 100%, );
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
font-size: 12.5px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #dfdfdf;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//AC太阳能板
|
||||||
|
.Plugged {
|
||||||
|
margin-top: 173px;
|
||||||
|
&__bar-view {
|
||||||
|
width: 533px;
|
||||||
|
height: 28px;
|
||||||
|
margin: 50px auto 0;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
position: relative;
|
||||||
|
&__list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: #C1C1C1;
|
||||||
|
border-bottom: 3px solid #646464;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -3px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 30px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
height: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-li--active {
|
||||||
|
&::after {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//AC太阳能板
|
||||||
|
&__swiper {
|
||||||
|
margin: 36px auto 82px;
|
||||||
|
width:492px;
|
||||||
|
height:410px;
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&__full {
|
||||||
|
width:497px;
|
||||||
|
height:410px;
|
||||||
|
&__item {
|
||||||
|
//显示小时裁决样式
|
||||||
|
@mixin hoursStyle {
|
||||||
|
display: flex;
|
||||||
|
height: 58px;
|
||||||
|
align-items: flex-end;
|
||||||
|
&__right {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 56px;
|
||||||
|
height: 58px;
|
||||||
|
line-height: 58px;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
height: 58px;
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 87px;
|
||||||
|
padding-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
margin-top: 33px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
width:500px;
|
||||||
|
&__img {
|
||||||
|
width:231px;
|
||||||
|
height:186px;
|
||||||
|
position: relative;
|
||||||
|
img {
|
||||||
|
width:231px;
|
||||||
|
height:186px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__power {
|
||||||
|
font-size: 19px;
|
||||||
|
position: absolute;
|
||||||
|
top: 37px;
|
||||||
|
left: 23px;
|
||||||
|
color: #CCCCCC;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour {
|
||||||
|
margin:18px 0 0 25px ;
|
||||||
|
@include hoursStyle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box2 {
|
||||||
|
width:492px;
|
||||||
|
height:187px;
|
||||||
|
margin-top: 33px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__img2 {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__power {
|
||||||
|
font-size: 19px;
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: 44px;
|
||||||
|
color: #CCCCCC;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 132px;
|
||||||
|
@include hoursStyle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box3 {
|
||||||
|
margin-top: 82px;
|
||||||
|
&__img3 {
|
||||||
|
width:402px;
|
||||||
|
height:136px;
|
||||||
|
padding-left: 91px;
|
||||||
|
img {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box4 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 123px;
|
||||||
|
&__img4{
|
||||||
|
width:390px;
|
||||||
|
height:128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img5 {
|
||||||
|
width:373px;
|
||||||
|
height:137px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour {
|
||||||
|
@include hoursStyle;
|
||||||
|
position: absolute;
|
||||||
|
top: 82px;
|
||||||
|
right: 66px;
|
||||||
|
|
||||||
|
&__left {
|
||||||
|
font-size: 56px;
|
||||||
|
height: 111px;
|
||||||
|
line-height: 111px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
font-size: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour2 {
|
||||||
|
@include hoursStyle;
|
||||||
|
position: absolute;
|
||||||
|
top: 66px;
|
||||||
|
right: 144px;
|
||||||
|
&__left {
|
||||||
|
font-size: 53px;
|
||||||
|
height: 111px;
|
||||||
|
line-height: 119px;
|
||||||
|
}
|
||||||
|
&__right {
|
||||||
|
font-size: 19px;
|
||||||
|
line-height: 37px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 快充进度条
|
||||||
|
.Fast {
|
||||||
|
width: 600px;
|
||||||
|
margin: 300px auto 0;
|
||||||
|
padding-left: 33px;
|
||||||
|
color: #fff;
|
||||||
|
h2 {
|
||||||
|
height: 60px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 60px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
width: fit-content;
|
||||||
|
font-size: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
p{
|
||||||
|
display: inline-block;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 15px;
|
||||||
|
height: fit-content;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__progress-first {
|
||||||
|
margin-top: 43px;
|
||||||
|
&__content {
|
||||||
|
height: 28px;
|
||||||
|
transition: width .5s ease-out;
|
||||||
|
background: linear-gradient(125deg, #0FFFC4 0,#0FFFC4 30%, #006AFF 70%,#006AFF 100%);
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
width: 118px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&__progress-second {
|
||||||
|
margin-top: 43px;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #C5C5C5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: 0;
|
||||||
|
height: 28px;
|
||||||
|
background: #C5C5C5;
|
||||||
|
transition: width .5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
width: 361px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//芯片BMS
|
||||||
|
.battery {
|
||||||
|
margin: 148px auto 0;
|
||||||
|
width: 566px;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 52px;
|
||||||
|
|
||||||
|
&__decorate {
|
||||||
|
width: 306px;
|
||||||
|
height: 243px;
|
||||||
|
border-radius: 9px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(182deg, #3B3B3B, #05080B);
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 217px;
|
||||||
|
height: 140px;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img2 {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img3 {
|
||||||
|
width: 173px;
|
||||||
|
height: 192px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
margin-left: 20px;
|
||||||
|
width: 260px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
height: 33px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 30px;
|
||||||
|
margin: 46px 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #f5f5f5;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content2 {
|
||||||
|
text-align: right;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 31px;
|
||||||
|
h2{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin proIteTitle {
|
||||||
|
height: 44px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin sectionBox {
|
||||||
|
margin: 17px auto 0;
|
||||||
|
width: 530px;
|
||||||
|
height: 336px;
|
||||||
|
background: linear-gradient(182deg, #3B3B3B, #05080B);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 7px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$caitainerWidth: 591px;
|
||||||
|
//15ports
|
||||||
|
.prots {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 192px auto 0;
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
@include sectionBox;
|
||||||
|
&__text {
|
||||||
|
font-size: 25px;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//智能APP
|
||||||
|
.Intelligent-App {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 119px auto 120px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
margin-top: 17px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 540px;
|
||||||
|
height: 297px;
|
||||||
|
border-radius: 33px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
position: absolute;
|
||||||
|
top: 120px;
|
||||||
|
left: 52px;
|
||||||
|
width: 182px;
|
||||||
|
height: 58px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 27px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text-lang {
|
||||||
|
width: 120px;
|
||||||
|
left: 102px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
position: absolute;
|
||||||
|
width: fit-content;
|
||||||
|
height: 25px;
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 41px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
transform: translate(10%);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
&__text2-lang{
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//Whats
|
||||||
|
.boat {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 99px auto 87px;
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
@include sectionBox;
|
||||||
|
background: linear-gradient(182deg, #120F0F, #2D2D2D);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//更多产品
|
||||||
|
.More {
|
||||||
|
width: 599px;
|
||||||
|
margin: 46px auto 66px;
|
||||||
|
|
||||||
|
&__top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 33px 0;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 19px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 41px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
height: fit-content;
|
||||||
|
width: 533px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 255px;
|
||||||
|
height: 370px;
|
||||||
|
background: #121212;
|
||||||
|
border-radius: 9px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
//手机端不能有hover事件
|
||||||
|
&:hover {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 155px;
|
||||||
|
height: 124px;
|
||||||
|
margin-top: 66px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 33px;
|
||||||
|
margin-top: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subTit {
|
||||||
|
font-size: 15px;
|
||||||
|
width: fit-content;
|
||||||
|
color: #478fff;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #949494;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottom {
|
||||||
|
padding: 17px 50px 0 0;
|
||||||
|
font-size: 19px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
|
||||||
|
$tone-color: #fff; //字体主色调
|
||||||
|
|
||||||
|
@mixin detailWidth {
|
||||||
|
width: 980px;
|
||||||
|
@media (max-width:1600px) {
|
||||||
|
width: 750px;
|
||||||
|
}
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-banner {
|
||||||
|
width: 100%;
|
||||||
|
color: $tone-color;
|
||||||
|
&__avater{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@media (max-width:1200px) {
|
||||||
|
object-fit: cover;
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 方框介绍
|
||||||
|
.product__box {
|
||||||
|
padding: 250px 0 244px;
|
||||||
|
@include detailWidth;
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
padding: 3rem 0 0;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
margin: 0 auto;
|
||||||
|
height: auto;
|
||||||
|
color: $tone-color;
|
||||||
|
&__avater{
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//液晶显示屏
|
||||||
|
.screen {
|
||||||
|
margin-top: 204px;
|
||||||
|
width: 100%;
|
||||||
|
@media (max-width:600px) {
|
||||||
|
margin-top: 5rem;
|
||||||
|
}
|
||||||
|
&__box {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
padding: 150px 0 70px;
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
padding: 0rem 0 4rem;
|
||||||
|
}
|
||||||
|
@include detailWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 切换面板2
|
||||||
|
.switchboard{
|
||||||
|
@include detailWidth;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
//端口介绍
|
||||||
|
.port {
|
||||||
|
padding: 320px 0 450px;
|
||||||
|
margin: 230px 0 450px;
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
padding: 3rem 0 0;
|
||||||
|
margin: 2rem auto 5rem;
|
||||||
|
}
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&__content {
|
||||||
|
@include detailWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 循环
|
||||||
|
.loop {
|
||||||
|
&__box {
|
||||||
|
margin: 500px auto 0;
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
margin: 4rem auto 3rem;
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
@include detailWidth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保护系统
|
||||||
|
.protection {
|
||||||
|
&__box {
|
||||||
|
@include detailWidth;
|
||||||
|
margin: 400px auto 200px;
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
width: 90%;
|
||||||
|
margin: 3rem auto 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//展示
|
||||||
|
.show {
|
||||||
|
margin: 0 auto;
|
||||||
|
@include detailWidth;
|
||||||
|
padding-bottom: 300px;
|
||||||
|
@media (max-width:1000px) {
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,987 @@
|
||||||
|
// 方框介绍
|
||||||
|
.product__box {
|
||||||
|
width: 957px;
|
||||||
|
margin: 92px auto 0;
|
||||||
|
height: 605px;
|
||||||
|
&__sec {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@mixin secStyle {
|
||||||
|
width: 310px;
|
||||||
|
height: 174px;
|
||||||
|
background: linear-gradient(182deg, #232E3C, #05080B);
|
||||||
|
border-radius: 21px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
font-family: MiSans-Bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item1 {
|
||||||
|
@include secStyle;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 0%, #0FFFC4 40%, #006AFF 60%, #006AFF 100%, );
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
width: fit-content;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
font-size: 45px;
|
||||||
|
margin-top: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
width: fit-content;
|
||||||
|
height: 55px;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item2 {
|
||||||
|
@include secStyle;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
margin: 14px 0 7px;
|
||||||
|
width: 74px;
|
||||||
|
height: 92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 22px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item3 {
|
||||||
|
@include secStyle;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: 55px;
|
||||||
|
height: 87px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(81deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 21px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
margin-top: -12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sec2 {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 316px 257px 357px;
|
||||||
|
grid-template-rows: 201px 209px;
|
||||||
|
grid-row-gap: 12px;
|
||||||
|
grid-column-gap: 12px;
|
||||||
|
grid-template-areas:
|
||||||
|
'gap1 gap1 gap4'
|
||||||
|
'gap2 gap3 gap4';
|
||||||
|
|
||||||
|
&__item1 {
|
||||||
|
grid-area: gap1;
|
||||||
|
background: url('/static/product/detail/n051/solar.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
border-radius: 21px;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 0 27px 21px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
&__top {
|
||||||
|
box-sizing: content-box;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
width: auto;
|
||||||
|
height: 47px;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0, #0FFFC4 20%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
width: auto;
|
||||||
|
font-size: 18px;
|
||||||
|
// border: 1px solid #0FFFC4;
|
||||||
|
font-weight: 600;
|
||||||
|
padding-top: 20px;
|
||||||
|
background: linear-gradient(87deg, #006AFF 0, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bottom {
|
||||||
|
height: 31px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item2 {
|
||||||
|
grid-area: gap2;
|
||||||
|
background: url('/static/product/detail/n051/charging.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 21px;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 74px;
|
||||||
|
width: 109px;
|
||||||
|
text-align: center;
|
||||||
|
height: 29px;
|
||||||
|
font-size: 31px;
|
||||||
|
font-family:MiSans-Regular ;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #3E4752;
|
||||||
|
line-height: 25px;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
padding-top: 7px;
|
||||||
|
text-align: center;
|
||||||
|
width: 55px;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 25px;
|
||||||
|
background: linear-gradient(90deg, #0FFFC4 0%, #0FFFC4 70%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text3 {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 25px;
|
||||||
|
height: 34px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item3 {
|
||||||
|
grid-area: gap3;
|
||||||
|
background: url('/static/product/detail/n051/rate.webp') center center/cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 21px;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-top: 60px;
|
||||||
|
width:210px;
|
||||||
|
height: auto;
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(87deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 174px;
|
||||||
|
height: 60px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FEFEFE;
|
||||||
|
line-height: 31px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&__textTop{
|
||||||
|
margin-top: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item4 {
|
||||||
|
grid-area: gap4;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(182deg, #232E3C, #05080B);
|
||||||
|
border-radius: 21px;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 276px;
|
||||||
|
height: 247px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
display: inline-block;
|
||||||
|
height: fit-content;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: linear-gradient(266deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
height: 40px;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//设备放大视频
|
||||||
|
#Energy {
|
||||||
|
height: 717px;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 435px;
|
||||||
|
|
||||||
|
.Energy-scale {
|
||||||
|
position: absolute;
|
||||||
|
width: 181px;
|
||||||
|
height: 270px;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 90%;
|
||||||
|
left: 52%;
|
||||||
|
transform: scale(2.5) translate(-25%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Energy-el {
|
||||||
|
margin: 0 auto 0;
|
||||||
|
width: 1214px;
|
||||||
|
height: 717px;
|
||||||
|
opacity: 0;
|
||||||
|
@media (max-width:1214px) {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio:1/0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//电流视频
|
||||||
|
.filter-video {
|
||||||
|
background-color: #000;
|
||||||
|
&__box {
|
||||||
|
margin-top: 74px;
|
||||||
|
width: 1714px;
|
||||||
|
height: 965px;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
position: relative;
|
||||||
|
@media (max-width:1714px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__avater {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
@mixin filterContentStyle($unit,$radio){
|
||||||
|
&__content {
|
||||||
|
position: absolute;
|
||||||
|
width: 443 * $radio + $unit;
|
||||||
|
font-size: 20 * $radio + $unit;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 38 * $radio + $unit;
|
||||||
|
top: 20%;
|
||||||
|
left: 20%;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
display: flex;
|
||||||
|
&__num {
|
||||||
|
width: 190 * $radio + $unit;
|
||||||
|
height: 75 * $radio + $unit;
|
||||||
|
font-size: 73 * $radio + $unit;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 78 * $radio + $unit;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 17%, #006AFF 100%, );
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text2 {
|
||||||
|
width: 473 * $radio + $unit;
|
||||||
|
font-size: 23 * $radio + $unit;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #dfdfdf;
|
||||||
|
line-height: 38 * $radio + $unit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:1479px) {
|
||||||
|
@include filterContentStyle(px,1);
|
||||||
|
&__content{
|
||||||
|
top: 18%;
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:1479px) and (min-width:1219px){
|
||||||
|
@include filterContentStyle(px,0.8);
|
||||||
|
&__content{
|
||||||
|
top: 18%;
|
||||||
|
left: 18%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:1218px) and (min-width:957px){
|
||||||
|
@include filterContentStyle(px,0.7);
|
||||||
|
&__content{
|
||||||
|
top: 20%;
|
||||||
|
left: 16%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//AC太阳能板
|
||||||
|
.Plugged {
|
||||||
|
// power标题;
|
||||||
|
background-color: #000000;
|
||||||
|
|
||||||
|
// 滑动滚动
|
||||||
|
&__bar-view {
|
||||||
|
width: 834px;
|
||||||
|
height: 29px;
|
||||||
|
margin: 79px auto 0;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
position: relative;
|
||||||
|
&__list {
|
||||||
|
width: 834px;
|
||||||
|
border-bottom: 5px solid #646464;
|
||||||
|
display: flex;
|
||||||
|
justify-content:space-evenly;
|
||||||
|
font-size: 21px;
|
||||||
|
color: #C1C1C1;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 12px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 30px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-li--active {
|
||||||
|
&::after {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//AC太阳能板
|
||||||
|
&__swiper {
|
||||||
|
margin: 38px auto 261px;
|
||||||
|
width: 834px;
|
||||||
|
height: 609px;
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&__full {
|
||||||
|
height: 609px;
|
||||||
|
width: 834px;
|
||||||
|
&__item {
|
||||||
|
//显示小时裁决样式
|
||||||
|
@mixin hoursStyle {
|
||||||
|
display: flex;
|
||||||
|
height: 74px;
|
||||||
|
align-items: flex-end;
|
||||||
|
&__left{
|
||||||
|
font-size:96px;
|
||||||
|
// border: 1px solid #fff;
|
||||||
|
height: 118px;
|
||||||
|
line-height: 118px;
|
||||||
|
}
|
||||||
|
&__right{
|
||||||
|
font-size:27px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
&__left {
|
||||||
|
font-family:MiSans-Regular;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size:96px;
|
||||||
|
height: 118px;
|
||||||
|
line-height: 118px;
|
||||||
|
background: linear-gradient(128deg, #0FFFC4 0%, #006AFF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__right {
|
||||||
|
height: 44px;
|
||||||
|
font-size:27px;
|
||||||
|
line-height: 21px;
|
||||||
|
padding-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
margin-top: 55px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 431px;
|
||||||
|
height: 340px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 431px;
|
||||||
|
height: 340px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__power {
|
||||||
|
font-size: 21px;
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
left: 47px;
|
||||||
|
color: #CCCCCC;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour {
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
height: 74px;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin: 74px 0 0 55px;
|
||||||
|
@include hoursStyle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 340px;
|
||||||
|
margin-top: 64px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__img2 {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__power {
|
||||||
|
font-size: 21px;
|
||||||
|
position: absolute;
|
||||||
|
top: 42px;
|
||||||
|
left: 47px;
|
||||||
|
color: #CCCCCC;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour {
|
||||||
|
position: absolute;
|
||||||
|
top: 42px;
|
||||||
|
right: 253px;
|
||||||
|
@include hoursStyle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box3 {
|
||||||
|
margin-top: 144px;
|
||||||
|
&__img3 {
|
||||||
|
width: 596px;
|
||||||
|
height: 244px;
|
||||||
|
display: flex;
|
||||||
|
padding-left: 135px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__box4 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 174px;
|
||||||
|
&__img4 {
|
||||||
|
width: 100%;
|
||||||
|
height:340px;
|
||||||
|
}
|
||||||
|
&__hour{
|
||||||
|
@include hoursStyle;
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
right:201px;
|
||||||
|
&__left{
|
||||||
|
font-size:96px;
|
||||||
|
height: 118px;
|
||||||
|
line-height: 118px;
|
||||||
|
}
|
||||||
|
&__right{
|
||||||
|
font-size:27px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__hour2{
|
||||||
|
@include hoursStyle;
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
right: 235px;
|
||||||
|
&__left{
|
||||||
|
font-size:96px;
|
||||||
|
// border: 1px solid #fff;
|
||||||
|
height: 118px;
|
||||||
|
line-height: 118px;
|
||||||
|
}
|
||||||
|
&__right{
|
||||||
|
font-size:27px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//快充进度条
|
||||||
|
.Fast {
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
height: 60px;
|
||||||
|
font-size: 38px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 60px;
|
||||||
|
overflow: hidden;
|
||||||
|
p{
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__progress-first {
|
||||||
|
margin-top: 29px;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: 0;
|
||||||
|
height: 53px;
|
||||||
|
background: linear-gradient(125deg, #0FFFC4 0,#0FFFC4 30%, #006AFF 70%,#006AFF 100%);
|
||||||
|
will-change: width, padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
width: 30%;
|
||||||
|
padding: 0 14px;
|
||||||
|
transition: width 1s linear;
|
||||||
|
will-change: width, padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__progress-second {
|
||||||
|
margin-top: 29px;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #C5C5C5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
width: 0;
|
||||||
|
height: 53px;
|
||||||
|
background: #666;
|
||||||
|
will-change: width, padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
width: 60%;
|
||||||
|
transition: width 6s steps(8,start);
|
||||||
|
padding: 0 14px;
|
||||||
|
will-change: width, padding;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//芯片BMS
|
||||||
|
.battery {
|
||||||
|
margin: 208px auto 0;
|
||||||
|
width: 960px;
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 100px;
|
||||||
|
|
||||||
|
&__decorate {
|
||||||
|
width: 486px;
|
||||||
|
height: 386px;
|
||||||
|
display: flex;
|
||||||
|
border-radius:5px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(182deg, #3B3B3B, #05080B);
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 340px;
|
||||||
|
height: 242px;
|
||||||
|
margin-right: 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img2 {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img3 {
|
||||||
|
width: 261px;
|
||||||
|
height: 295px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
margin-left: 60px;
|
||||||
|
width: 486px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
height: 44px;
|
||||||
|
font-size: 27px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-top: 92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
color: #f5f5f5;
|
||||||
|
line-height: 29px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content2 {
|
||||||
|
text-align: right;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin proIteTitle {
|
||||||
|
height: 40px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-family: MiSans-Semibold;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin sectionBox {
|
||||||
|
margin-top: 18px;
|
||||||
|
width: 960px;
|
||||||
|
height: 386px;
|
||||||
|
background: linear-gradient(182deg, #3B3B3B, #05080B);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 7px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$caitainerWidth: 960px;
|
||||||
|
|
||||||
|
//15ports
|
||||||
|
.prots {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 151px auto 0;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
@include sectionBox;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//智能APP
|
||||||
|
.Intelligent-App {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 227px auto ;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
margin-top: 21px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 435px;
|
||||||
|
height: 240px;
|
||||||
|
border-radius: 35px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
position: absolute;
|
||||||
|
top: 80px;
|
||||||
|
left: 55px;
|
||||||
|
width: 150px;
|
||||||
|
height: 70px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 27px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
&__text-lang {
|
||||||
|
top: 109px;
|
||||||
|
left: 55px;
|
||||||
|
width: 140px;
|
||||||
|
}
|
||||||
|
&__text2 {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 17px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: fit-content;
|
||||||
|
width: 200px;
|
||||||
|
transform: translate(50%,50%);
|
||||||
|
bottom: 50%;
|
||||||
|
}
|
||||||
|
&__text2-lang{
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(40%);
|
||||||
|
bottom: 0;
|
||||||
|
line-height: 30px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Whats
|
||||||
|
.boat {
|
||||||
|
width: $caitainerWidth;
|
||||||
|
margin: 261px auto 0;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@include proIteTitle;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
@include sectionBox;
|
||||||
|
background: linear-gradient(182deg, #120F0F, #2D2D2D);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滑动滚动要分成组件的
|
||||||
|
.swiper__box {
|
||||||
|
height: 409px;
|
||||||
|
width: 696px;
|
||||||
|
display: flex;
|
||||||
|
&__list {
|
||||||
|
width: 696px;
|
||||||
|
padding-left: 44px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, 131px);
|
||||||
|
grid-gap: 0px 44px;
|
||||||
|
margin: 44px auto 0;
|
||||||
|
&__li {
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
&__img {
|
||||||
|
width: 27px;
|
||||||
|
height: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin-top: 16px;
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #C1C1C1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__power {
|
||||||
|
margin-top: 7px;
|
||||||
|
height: fit-content;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #C1C1C1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__houres {
|
||||||
|
margin-top: 7px;
|
||||||
|
height: fit-content;
|
||||||
|
font-size: 23px;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//动画
|
||||||
|
@keyframes textAnimation {
|
||||||
|
0% {
|
||||||
|
transform: translateY(29px);
|
||||||
|
opacity: .3;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(5px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes textAnimation2 {
|
||||||
|
0% {
|
||||||
|
transform: translateY(47px);
|
||||||
|
opacity: .3;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(5px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//文字的
|
||||||
|
.is-animating {
|
||||||
|
animation: textAnimation 1.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-animating2 {
|
||||||
|
animation: textAnimation2 2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-display {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,261 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
onMounted,
|
||||||
|
onBeforeMount,
|
||||||
|
onBeforeUnmount
|
||||||
|
} from "vue";
|
||||||
|
import topBar from "@/components/top/title-bar.vue";
|
||||||
|
import footBar from "@/components/bottom/foot-bar.vue";
|
||||||
|
// import detailParams from "./components/detail-params.vue";
|
||||||
|
// import collapse from "@/views/product/detail/components/collapse.vue";
|
||||||
|
import {
|
||||||
|
GetProductDetailApi
|
||||||
|
} from "@/service/api.js";
|
||||||
|
import langToCheck from "@/hook/lang.js";
|
||||||
|
import {
|
||||||
|
useI18n
|
||||||
|
} from "vue-i18n";
|
||||||
|
const {
|
||||||
|
t
|
||||||
|
} = useI18n();
|
||||||
|
const langIs = ref('');
|
||||||
|
import {
|
||||||
|
useRoute
|
||||||
|
} from '#imports';
|
||||||
|
const route = useRoute();
|
||||||
|
//监听返回顶部
|
||||||
|
let proId = ref("");
|
||||||
|
let proName = ref("");
|
||||||
|
const productSpecs = reactive({
|
||||||
|
data: [],
|
||||||
|
});
|
||||||
|
const htmlNodes = ref("");
|
||||||
|
let isMaskShow = ref(true); //是否显示遮罩层
|
||||||
|
|
||||||
|
let tabCollection = reactive([]);
|
||||||
|
onBeforeMount(() => {
|
||||||
|
langIs.value = langToCheck()
|
||||||
|
tabCollection.push({
|
||||||
|
name: t("detail.summary"),
|
||||||
|
value: 0,
|
||||||
|
});
|
||||||
|
if (route.query.id) {
|
||||||
|
proId.value = route.query.id;
|
||||||
|
GetSpaceRequest(proId.value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const GetSpaceRequest = (Id) => {
|
||||||
|
let parmas = {
|
||||||
|
locale: langIs.value,
|
||||||
|
product_id: Id,
|
||||||
|
};
|
||||||
|
GetProductDetailApi(parmas).then((res) => {
|
||||||
|
if (res.info.children[0]) {
|
||||||
|
let received = res.info.children[0];
|
||||||
|
productSpecs.data = received.product_specs;
|
||||||
|
if (productSpecs.data.length > 0) {
|
||||||
|
tabCollection.push({
|
||||||
|
name: t("detail.specs"),
|
||||||
|
value: 1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.title = received.product_name;
|
||||||
|
proName.value = received.product_name;
|
||||||
|
const htmlString = received.product_detail_body;
|
||||||
|
const parser = new DOMParser(htmlString);
|
||||||
|
const doc = parser.parseFromString(htmlString, 'text/html');
|
||||||
|
const imgElements = doc.querySelectorAll('img');
|
||||||
|
imgElements.forEach((img, index) => {
|
||||||
|
img.removeAttribute('width');
|
||||||
|
img.removeAttribute('height');
|
||||||
|
img.removeAttribute('style');
|
||||||
|
img.removeAttribute('class');
|
||||||
|
img.classList.add('rich-only-avater');
|
||||||
|
});
|
||||||
|
htmlNodes.value = doc.body.innerHTML;
|
||||||
|
isMaskShow.value = false
|
||||||
|
}
|
||||||
|
}).catch(isMaskShow.value = false)
|
||||||
|
};
|
||||||
|
let tabValue = ref(0);
|
||||||
|
let tabChange = (index) => {
|
||||||
|
tabValue.value = index;
|
||||||
|
};
|
||||||
|
|
||||||
|
let scrollTop = ref(0); // 监听滚动事件得到的值
|
||||||
|
// 监听页面滚动事件
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
});
|
||||||
|
const handleScroll = () => {
|
||||||
|
scrollTop.value = window.scrollY || document.documentElement.scrollTop;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
<topBar></topBar>
|
||||||
|
<div class="sticky-page-layout">
|
||||||
|
<div class="nav-sticky" :class="{ 'nav-sticky--active': scrollTop >= 100 }">
|
||||||
|
<div class="nav-sticky__center">
|
||||||
|
<h1 class="nav-sticky__center__left">{{ proName }}</h1>
|
||||||
|
<div class="nav-sticky__center__right">
|
||||||
|
<div class="nav-sticky__center__right__item" :class="{
|
||||||
|
'nav-sticky__center__right--Active': tabValue == item.value,
|
||||||
|
}" @click="tabChange(item.value)" v-for="(item, index) in tabCollection"
|
||||||
|
:key="'rich' + index">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="tabValue == 0">
|
||||||
|
<div class="rich-detail-only" v-dompurify-html="htmlNodes"></div>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="tabValue == 1">
|
||||||
|
<!-- <detail-params :detailList="productSpecs.data"></detail-params> -->
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<!-- <collapse></collapse> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<foot-bar></foot-bar>
|
||||||
|
<div class="load-mask" v-if="isMaskShow">
|
||||||
|
<div class="spinner">
|
||||||
|
<div class="spinner__item bounce1"></div>
|
||||||
|
<div class="spinner__item bounce2"></div>
|
||||||
|
<div class="spinner__item bounce3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 为了全局谨慎使用 */
|
||||||
|
.rich-detail-only {
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:first-child {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 50vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:first-child {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 850px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:first-child {
|
||||||
|
padding-top: 1.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:first-child {
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:first-child {
|
||||||
|
padding-top: 2.35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:nth-child(2) {
|
||||||
|
margin: 2.4rem auto 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 9.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:nth-child(2) {
|
||||||
|
width: 750px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:nth-child(2) {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:nth-child(2) {
|
||||||
|
margin-top: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:nth-child(n + 3) {
|
||||||
|
padding-top: 1rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 9.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1600px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:nth-child(n + 3) {
|
||||||
|
width: 750px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:nth-child(n + 3) {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:nth-child(n + 3) {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:last-child {
|
||||||
|
margin-bottom: 2.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.rich-detail-only
|
||||||
|
.rich-only-avater:last-child {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,580 @@
|
||||||
|
@mixin flexCenter {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin productWidth {
|
||||||
|
width: 10rem;
|
||||||
|
@media (max-width:1300px) {
|
||||||
|
width: 15rem;
|
||||||
|
}
|
||||||
|
@media (max-width:599px) {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.scroll-height{
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
width: 100vw;
|
||||||
|
height: 5rem;
|
||||||
|
background:url('/static/product/goods__banner.webp') center center/cover;
|
||||||
|
&__box {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 横栏
|
||||||
|
.menu {
|
||||||
|
height: 0.5rem;
|
||||||
|
@include flexCenter;
|
||||||
|
background-color: #ffffff;
|
||||||
|
@media (max-width:1900px) {
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
@media (max-width:1300px) {
|
||||||
|
height: 0.78rem;
|
||||||
|
padding: 0 0.6rem;
|
||||||
|
}
|
||||||
|
&__container{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
@include productWidth;
|
||||||
|
&__left{
|
||||||
|
width: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box{
|
||||||
|
display: flex;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
flex-basis: 65%;
|
||||||
|
&__list {
|
||||||
|
height: auto;
|
||||||
|
padding: 0.12rem 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0 .3rem;
|
||||||
|
height: auto;
|
||||||
|
line-height: 0.2rem;
|
||||||
|
border-right: 0.01rem solid #e5e5e5;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--Active {
|
||||||
|
color: #2164ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dropdown{
|
||||||
|
min-width: 1.6rem;
|
||||||
|
height: inherit;
|
||||||
|
position: relative;
|
||||||
|
font-size: inherit;
|
||||||
|
&__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;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
min-width: 1.4rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__arrow {
|
||||||
|
width: 0.2rem;
|
||||||
|
height: inherit;
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--down {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__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;
|
||||||
|
&__item{
|
||||||
|
line-height: 2.7;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
&:hover{
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:1750px) {
|
||||||
|
font-size: 0.17rem;
|
||||||
|
}
|
||||||
|
@media (max-width:1300px) {
|
||||||
|
font-size: 0.22rem;
|
||||||
|
&__container{
|
||||||
|
&__left{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&__box{
|
||||||
|
flex-basis: 70%;
|
||||||
|
}
|
||||||
|
&__dropdown{
|
||||||
|
min-width: 2.2rem;
|
||||||
|
&__selected{
|
||||||
|
&__text {
|
||||||
|
min-width: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:900px) {
|
||||||
|
font-size: 0.3rem;
|
||||||
|
height: auto;
|
||||||
|
min-height: 1rem;
|
||||||
|
&__container{
|
||||||
|
&__left{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&__box{
|
||||||
|
flex-basis: 70%;
|
||||||
|
}
|
||||||
|
&__dropdown{
|
||||||
|
min-width: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:800px) {
|
||||||
|
font-size: 0.35rem;
|
||||||
|
height: auto;
|
||||||
|
min-height: 1rem;
|
||||||
|
&__container{
|
||||||
|
&__left{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&__box{
|
||||||
|
flex-basis: 70%;
|
||||||
|
}
|
||||||
|
&__dropdown{
|
||||||
|
min-width: 3.8rem;
|
||||||
|
&__selected{
|
||||||
|
&__text {
|
||||||
|
min-width: 3.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:600px) {
|
||||||
|
font-size: 0.56rem;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0 0rem;
|
||||||
|
&__container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: 2rem;
|
||||||
|
&__box{
|
||||||
|
flex-basis: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: inherit;
|
||||||
|
&__list{
|
||||||
|
padding: 0;
|
||||||
|
height: inherit;
|
||||||
|
width: 100%;
|
||||||
|
li{
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
letter-spacing: 0.02rem;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__dropdown{
|
||||||
|
margin: 0.8rem auto 0 0;
|
||||||
|
width: 8.3rem;
|
||||||
|
float: right;
|
||||||
|
font-size: 0.56rem;
|
||||||
|
&__selected{
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
padding: 0.5rem;
|
||||||
|
&__text {
|
||||||
|
min-width: 6rem;
|
||||||
|
text-align: center;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
&__arrow {
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__options{
|
||||||
|
font-size: 0.56rem;
|
||||||
|
width: 8.3rem;
|
||||||
|
box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1);
|
||||||
|
&__item{
|
||||||
|
padding: 0.3rem 0.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 导航
|
||||||
|
.mobile-menu{
|
||||||
|
@media (max-width:600px) {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 商品列表
|
||||||
|
.goods {
|
||||||
|
min-height: 6rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: auto;
|
||||||
|
@media (max-width:600px) {
|
||||||
|
min-height: 13rem;
|
||||||
|
}
|
||||||
|
// 商品展示2
|
||||||
|
&__product {
|
||||||
|
margin: 0.3rem auto 1rem;
|
||||||
|
width: 10rem;
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
@media (max-width:499px) {
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
min-height: 17rem;
|
||||||
|
}
|
||||||
|
&__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) {
|
||||||
|
&:nth-child(3n){
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
&:nth-child(n+4) {
|
||||||
|
margin-top: 1.2%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__top{
|
||||||
|
height: 3.25rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&__avater-2{
|
||||||
|
height: auto;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
//标志位
|
||||||
|
&__avater {
|
||||||
|
border-radius: 0.1rem 0.1rem 0 0;
|
||||||
|
width: 100%;
|
||||||
|
height:3.25rem;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-family: MiSans-Medium;
|
||||||
|
width: 100%;
|
||||||
|
&__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%;
|
||||||
|
&__title{
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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) {
|
||||||
|
&__box{
|
||||||
|
font-size: 0.25rem;
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
&__btn{
|
||||||
|
font-size: 0.22rem;
|
||||||
|
margin: 0.3rem 0;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
line-height:0.5rem ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:1100px) {
|
||||||
|
&__box{
|
||||||
|
font-size: 0.3rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-top: 0rem;
|
||||||
|
}
|
||||||
|
&__btn{
|
||||||
|
font-size: 0.26rem;
|
||||||
|
margin: 0.3rem 0;
|
||||||
|
width: 1.8rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
line-height:0.5rem ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:849px) {
|
||||||
|
&__box{
|
||||||
|
font-size: 0.4rem;
|
||||||
|
}
|
||||||
|
&__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) {
|
||||||
|
&__box{
|
||||||
|
height: 2rem;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
&__btn{
|
||||||
|
font-size: 0.45rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
width: 3rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
height: 1rem;
|
||||||
|
line-height:1rem ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:499px) {
|
||||||
|
&__box{
|
||||||
|
font-size: 0.66rem;
|
||||||
|
}
|
||||||
|
&__btn{
|
||||||
|
font-size: 0.55rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
width: 4rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
line-height:1.2rem ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__li--point{
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:1300px) {
|
||||||
|
width: 15rem;
|
||||||
|
&__list{
|
||||||
|
width: inherit;
|
||||||
|
&__li{
|
||||||
|
height: 7.2rem;
|
||||||
|
&__top{
|
||||||
|
height: 4.5rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:849px) {
|
||||||
|
&__top{
|
||||||
|
height: 6rem;
|
||||||
|
}
|
||||||
|
margin-right: 2.5%;
|
||||||
|
height: 9.5rem;
|
||||||
|
flex-basis: 47%;
|
||||||
|
&:nth-child(n+3) {
|
||||||
|
margin-top: 2.5%;
|
||||||
|
}
|
||||||
|
&:nth-child(2n){
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:600px) {
|
||||||
|
width: 90%;
|
||||||
|
&__list{
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
&__li{
|
||||||
|
height: 13rem;
|
||||||
|
flex-basis: 48%;
|
||||||
|
margin-right: 2%;
|
||||||
|
&:nth-child(n+3) {
|
||||||
|
margin-top: 4%;
|
||||||
|
}
|
||||||
|
&__top{
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__page-num {
|
||||||
|
width: fit-content;
|
||||||
|
height: auto;
|
||||||
|
margin: 0.4rem auto 0.3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&__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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #1777ff;
|
||||||
|
font-size: 0.18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--grey {
|
||||||
|
color: #bfbfbf;
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #eee;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1024px) {
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.4rem;
|
||||||
|
margin: 0.4rem auto 0.6rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&__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;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #1777ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--grey {
|
||||||
|
color: #bfbfbf;
|
||||||
|
border: 1px solid #bfbfbf;
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #eee;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:640px) {
|
||||||
|
height: 1rem;
|
||||||
|
margin: 1rem auto 1rem;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
background-color: #1777ff;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<p style="margin-top:15.6pt; margin-bottom:15.6pt; text-align:center; font-size:27px; font-weight:bold">Privacy Statement</p>
|
||||||
|
<p>
|
||||||
|
<span>Privacy Policy Scope</span>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<span>For
|
||||||
|
users logging on to the site to stay personally</span>
|
||||||
|
<br><br>
|
||||||
|
<span>identifiable information.</span>
|
||||||
|
<br><br>
|
||||||
|
<span>The
|
||||||
|
content of the information collected</span>
|
||||||
|
<br><br><span>When
|
||||||
|
you register on our website, or using other companies</span>
|
||||||
|
<br><br><span>products
|
||||||
|
or services, visit the company website, I have that</span>
|
||||||
|
<br><br><span>station
|
||||||
|
will collect your personal information,</span><br><span>Including
|
||||||
|
name, phone number, zip code, address.</span>
|
||||||
|
<br><br><span>The
|
||||||
|
Bank will automatically receive and record your browser</span>
|
||||||
|
<br><br><span>and
|
||||||
|
the server log information, including but not limited to</span>
|
||||||
|
<br><br><span>your
|
||||||
|
IP address, cookie information in this site and your</span>
|
||||||
|
<br><br><span>web
|
||||||
|
history requirements.</span>
|
||||||
|
<br><br><span>
|
||||||
|
</span>
|
||||||
|
<br><br><span>The
|
||||||
|
use and protection of information</span>
|
||||||
|
<br><br><span>The
|
||||||
|
company will collect the contents of the above</span>
|
||||||
|
<br><br><span>information
|
||||||
|
to:</span>
|
||||||
|
<br><br><span>1.
|
||||||
|
for customers to send products and services;</span>
|
||||||
|
<br><br><span>2.
|
||||||
|
for customers to design and provide after sales
|
||||||
|
guidance</span>
|
||||||
|
<br><br><span>services;</span>
|
||||||
|
<br><br><span>3.
|
||||||
|
to provide other services (the part of the increase or</span>
|
||||||
|
<br><br><span>decrease
|
||||||
|
depending on your situation.)</span>
|
||||||
|
<br><br><span>Held
|
||||||
|
by the Company of its customer data confidential,</span>
|
||||||
|
<br><br><span>except:</span>
|
||||||
|
<br><br><span>1.
|
||||||
|
have your consent to share the information;</span>
|
||||||
|
<br><br><span>2.
|
||||||
|
only disclose your personal information to provide you</span>
|
||||||
|
<br><br><span>requested
|
||||||
|
products and services;</span>
|
||||||
|
<br><br><span>3.
|
||||||
|
According to legal requirements, have the right authority</span>
|
||||||
|
<br><br><span>to
|
||||||
|
make law or comply with legal directives, but the company</span>
|
||||||
|
<br><br><span>will
|
||||||
|
provide the appropriate jurisdiction;</span>
|
||||||
|
<br><br><span>4.
|
||||||
|
In case of emergency, to safeguard the interests of users</span>
|
||||||
|
<br><br><span>and
|
||||||
|
the public;</span>
|
||||||
|
<br><br><span>5.
|
||||||
|
the other Companies that need to open, edit, or disclose</span>
|
||||||
|
<br><br><span>personal
|
||||||
|
information in the situation.</span>
|
||||||
|
<br><br><span>The
|
||||||
|
revised privacy policy privacy policy website reserves</span>
|
||||||
|
<br><br><span>the
|
||||||
|
right to make changes.</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
p {
|
||||||
|
font-family: "Microsoft YaHei" !important;
|
||||||
|
word-break: break-word;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000000;
|
||||||
|
@media (min-width:2000px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #000000;
|
||||||
|
font-family: "Microsoft YaHei" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: "Microsoft YaHei" !important;
|
||||||
|
color: #0000FF;
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
padding: 50px 30px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .sub-title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .list {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #0563c1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .list a {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .title {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .title a {
|
||||||
|
margin-left: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap table {
|
||||||
|
border-left: 1px solid #000000;
|
||||||
|
border-top: 1px solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap table td,
|
||||||
|
.wrap table th {
|
||||||
|
padding: 10px;
|
||||||
|
border-right: 1px solid;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<p style="margin-top:15.6pt; margin-bottom:15.6pt; text-align:center; font-size:27px; font-weight:bold">隐私声明</p>
|
||||||
|
<p>
|
||||||
|
<strong>隐私政策范围</strong>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<span>本隐私政策适用于登录本站并留下个人身份信息的用户。</span>
|
||||||
|
<br><br>
|
||||||
|
<strong>信息的收集内容</strong>
|
||||||
|
<br><br>
|
||||||
|
当您在我们的网站注册、使用其他公司的产品或服务、访问公司网站时，我们会收集您的
|
||||||
|
个人信息，包括姓名、电话号码、邮政编码、地址。本公司将自动接收并记录您的浏览器
|
||||||
|
和服务器日志信息，包括但不限于您的IP地址、本站Cookie信息及您的网页浏览历史记录。
|
||||||
|
<br><br><strong>信息的使用与保护</strong>
|
||||||
|
<br><br><span>公司将收集的上述信息内容用于：</span>
|
||||||
|
<br><br><span>1.向客户发送产品和服务；</span>
|
||||||
|
<br><br><span>2.为客户设计并提供售后指导服务；</span>
|
||||||
|
<br><br><span>3.提供其他服务（根据您的情况可能增加或减少部分内容）。</span>
|
||||||
|
<br><br><strong>公司将对其持有的客户数据进行保密，除非：</strong>
|
||||||
|
<br><br><span>1.获得您的同意分享这些信息；</span>
|
||||||
|
<br><br><span>2.仅为提供您所请求的产品和服务而披露您的个人信息；</span>
|
||||||
|
<br><br><span>3.根据法律要求，有权机构执行法律或遵守法律指令，但公司将提供适当的司法管辖区；</span>
|
||||||
|
<br><br><span>4.在紧急情况下,为了保护用户和公众的利益；</span>
|
||||||
|
<br><br><span>5.其他公司在需要的情况下，必须公开、编辑或披露个人信息。</span>
|
||||||
|
<br><br><strong>隐私政策的修订</strong>
|
||||||
|
<br><br><span>本网站保留对隐私政策进行修改的权利。</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
p {
|
||||||
|
font-family: "Microsoft YaHei" !important;
|
||||||
|
word-break: break-word;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000000;
|
||||||
|
@media (min-width:2000px) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #000000;
|
||||||
|
font-family: "Microsoft YaHei" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-family: "Microsoft YaHei" !important;
|
||||||
|
color: #0000FF;
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
padding: 50px 30px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .sub-title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .list {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #0563c1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .list a {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .title {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap .title a {
|
||||||
|
margin-left: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap table {
|
||||||
|
border-left: 1px solid #000000;
|
||||||
|
border-top: 1px solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap table td,
|
||||||
|
.wrap table th {
|
||||||
|
padding: 10px;
|
||||||
|
border-right: 1px solid;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
onBeforeMount
|
||||||
|
} from "vue";
|
||||||
|
import {
|
||||||
|
useRoute,
|
||||||
|
useRouter
|
||||||
|
} from "#imports";
|
||||||
|
import {
|
||||||
|
useI18n
|
||||||
|
} from "vue-i18n";
|
||||||
|
import langToCheck from "@/hook/lang.js";
|
||||||
|
|
||||||
|
const {
|
||||||
|
t
|
||||||
|
} = useI18n();
|
||||||
|
|
||||||
|
useHead({
|
||||||
|
title: t('contact.thank-message'),
|
||||||
|
})
|
||||||
|
|
||||||
|
const langIs = ref('')
|
||||||
|
onBeforeMount(()=>{
|
||||||
|
langIs.value = langToCheck()
|
||||||
|
})
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
const BackToMenu = () => {
|
||||||
|
router.push("/");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="img-container">
|
||||||
|
<img src="/static/contact-us/complete.webp" alt="Icon">
|
||||||
|
</div>
|
||||||
|
<div class="message">{{t('contact.thank-message')}}</div>
|
||||||
|
<button type="button" @click="BackToMenu">{{$t('contact.back')}}</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; /* 垂直方向排列子元素 */
|
||||||
|
justify-content: center; /* 垂直居中 */
|
||||||
|
align-items: center; /* 水平居中 */
|
||||||
|
height: 100vh; /* 让父容器高度占满视口 */
|
||||||
|
.img-container{
|
||||||
|
margin-bottom: 71px;
|
||||||
|
}
|
||||||
|
.message{
|
||||||
|
font-size: 0.48rem;
|
||||||
|
font-family: MiSans-Regular;
|
||||||
|
margin-bottom: 84px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 150px;
|
||||||
|
height: 45px;
|
||||||
|
background: #2164ff;
|
||||||
|
border-radius: 31px;
|
||||||
|
margin: 1vw auto 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
-webkit-transition: all 0.5s;
|
||||||
|
-o-transition: all 0.5s;
|
||||||
|
transition: all 0.5s;
|
||||||
|
|
||||||
|
@media (min-width:1920px) {
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 0.45rem;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
border-radius: 0.31rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1680px) {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
// plugins/aos.client.ts
|
||||||
|
import AOS from 'aos'
|
||||||
|
import 'aos/dist/aos.css'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
nuxtApp.hook('app:mounted', () => {
|
||||||
|
AOS.init()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { getCdnImageUrl, getCdnStaticUrl, appConfig } from '@/config';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图片路径管理Vue插件
|
||||||
|
* 将图片路径处理函数注册为全局属性
|
||||||
|
*/
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
// 在模板中可以直接使用 $cdnImageUrl 和 $cdnStaticUrl
|
||||||
|
return {
|
||||||
|
provide: {
|
||||||
|
cdnImageUrl: getCdnImageUrl,
|
||||||
|
cdnStaticUrl: getCdnStaticUrl,
|
||||||
|
appConfig: appConfig
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { defineNuxtPlugin } from '#imports'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin(() => {
|
||||||
|
// 只在客户端执行
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
// 从服务端渲染的HTML中获取静态数据
|
||||||
|
const staticDataScript = document.getElementById('__NUXT_STATIC_DATA__')
|
||||||
|
if (staticDataScript) {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(staticDataScript.textContent)
|
||||||
|
window.__NUXT_STATIC_DATA__ = data
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('解析静态数据失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { defineNuxtPlugin } from '#imports'
|
||||||
|
import VueDOMPurifyHTML from 'vue-dompurify-html'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
nuxtApp.vueApp.use(VueDOMPurifyHTML)
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { defineNuxtPlugin } from '#imports'
|
||||||
|
import VueLazyload from 'vue3-lazyload'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin(nuxtApp => {
|
||||||
|
nuxtApp.vueApp.use(VueLazyload, {
|
||||||
|
// 配置选项
|
||||||
|
loading: '',
|
||||||
|
error: '',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
import langToCheck from "@/hook/lang.js";
|
||||||
|
import { api } from './config.js';
|
||||||
|
|
||||||
|
// 首页轮播图
|
||||||
|
export const GetCarouseApi = () => {
|
||||||
|
return api("/website/get/homePageCarousel_list", {
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
locale: langToCheck()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 产品分类
|
||||||
|
export const GetProductCategoryApi = () => {
|
||||||
|
return api("/website/get/productCategory_list", {
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
locale: langToCheck()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 产品列表
|
||||||
|
export const GetProductApi = (data) => {
|
||||||
|
return api("/website/get/product_list", {
|
||||||
|
method: 'POST',
|
||||||
|
body: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 产品详情
|
||||||
|
export const GetProductDetailApi = (data) => {
|
||||||
|
return api("/website/get/product_detail", {
|
||||||
|
method: 'POST',
|
||||||
|
body: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 资讯列表
|
||||||
|
export const GetNewsApi = (data) => {
|
||||||
|
return api("/website/get/news_list", {
|
||||||
|
method: 'POST',
|
||||||
|
body: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 资讯详情
|
||||||
|
export const GetNewsDetailApi = (data) => {
|
||||||
|
return api("/website/get/news_detail", {
|
||||||
|
method: 'POST',
|
||||||
|
body: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 联系我们提交
|
||||||
|
export const GetMessageApi = (data) => {
|
||||||
|
return api("/website/add/message", {
|
||||||
|
method: 'POST',
|
||||||
|
body: data
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 证书列表
|
||||||
|
export const GetCertificateApi = () => {
|
||||||
|
return api("/website/get/certificate_list", {
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
locale: langToCheck()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// app下载
|
||||||
|
export const GetDownloadApi = () => {
|
||||||
|
return api("/website/get/appInstallPackage", {
|
||||||
|
method: 'POST',
|
||||||
|
body: {
|
||||||
|
locale: langToCheck()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
let BASE_URL = ''
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV == 'development') {
|
||||||
|
BASE_URL = 'https://api.dev.mingyanglg.com/http/router'
|
||||||
|
} else {
|
||||||
|
BASE_URL = 'https://api.mingyanglg.com/http/router'
|
||||||
|
}
|
||||||
|
const configService = {
|
||||||
|
apiUrl: BASE_URL
|
||||||
|
};
|
||||||
|
|
||||||
|
export default configService
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
// 使用 Nuxt 4 的原生 $fetch
|
||||||
|
const API_BASE_URL = process.env.NODE_ENV === 'development'
|
||||||
|
? 'https://api.dev.mingyanglg.com/http/router'
|
||||||
|
: 'https://api.mingyanglg.com/http/router';
|
||||||
|
|
||||||
|
// 创建自定义 fetch 函数
|
||||||
|
export const api = $fetch.create({
|
||||||
|
baseURL: API_BASE_URL,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
onRequest({ request, options }) {
|
||||||
|
// 请求拦截
|
||||||
|
console.log('Making request to:', request);
|
||||||
|
},
|
||||||
|
onResponse({ response }) {
|
||||||
|
// 响应拦截
|
||||||
|
if (response._data && response._data.code === 0) {
|
||||||
|
return response._data;
|
||||||
|
} else if (response._data) {
|
||||||
|
throw new Error(response._data.message || 'API Error');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onResponseError({ response }) {
|
||||||
|
// 错误处理
|
||||||
|
console.error('HTTP Error:', response.status, response._data);
|
||||||
|
throw new Error(`HTTP ${response.status}: ${response._data?.message || 'Request failed'}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
{
|
||||||
|
"en": {
|
||||||
|
"carousel": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"categories": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"products": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"news": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"certificates": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"downloads": {
|
||||||
|
"rows": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cn": {
|
||||||
|
"carousel": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"categories": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"products": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"news": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"certificates": {
|
||||||
|
"rows": []
|
||||||
|
},
|
||||||
|
"downloads": {
|
||||||
|
"rows": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import {defineStore} from 'pinia'
|
||||||
|
//商品状态管理
|
||||||
|
|
||||||
|
const useCounter = defineStore("goods",{
|
||||||
|
state:() => ({
|
||||||
|
categoryList:[],
|
||||||
|
}),
|
||||||
|
getters: {
|
||||||
|
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useCounter
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import {
|
||||||
|
defineStore
|
||||||
|
} from 'pinia'
|
||||||
|
import {
|
||||||
|
GetCarouseApi
|
||||||
|
} from '@/service/api.js'
|
||||||
|
|
||||||
|
//新闻与展会状态管理
|
||||||
|
|
||||||
|
const useCarouse = defineStore("useCarouse", {
|
||||||
|
state: () => ({
|
||||||
|
CarouseList: [{
|
||||||
|
"_id": "",
|
||||||
|
"path": "",
|
||||||
|
"sort": "0",
|
||||||
|
"children": [{
|
||||||
|
"title": "",
|
||||||
|
"sub_title": "",
|
||||||
|
"image": ""
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}),
|
||||||
|
getters: {
|
||||||
|
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
async GetCarouseFunctin() {
|
||||||
|
try {
|
||||||
|
const res = await GetCarouseApi();
|
||||||
|
this.CarouseList = res.rows;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取轮播图失败:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useCarouse
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import {defineStore} from 'pinia'
|
||||||
|
//新闻与展会状态管理
|
||||||
|
|
||||||
|
const useNews = defineStore("news",{
|
||||||
|
state:() => ({
|
||||||
|
selectBool:{},
|
||||||
|
}),
|
||||||
|
getters: {
|
||||||
|
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useNews
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
//商品状态管理
|
||||||
|
|
||||||
|
const useCounter = defineStore("seller", {
|
||||||
|
state: () => ({
|
||||||
|
clickTab: 0,
|
||||||
|
categoryList: [],
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default useCounter;
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
// https://nuxt.com/docs/guide/concepts/typescript
|
||||||
|
"extends": "./.nuxt/tsconfig.json"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue