初始化提交
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