docs(i18n): 添加中文翻译文件
- 新增 i18n/locale/cn.json 文件，包含所有中文翻译内容 - 删除旧的国际化系统架构文档 - 重构后的国际化系统采用更简洁、稳定的架构，解决了原有的语言切换逻辑混乱问题
This commit is contained in:
parent
ffb5e9cc54
commit
cc7500ca95
|
|
@ -1,116 +0,0 @@
|
|||
# 国际化系统重构说明
|
||||
|
||||
## 概述
|
||||
|
||||
本项目已重构国际化系统，采用更简洁、稳定的架构，解决了原有的语言切换逻辑混乱问题。
|
||||
|
||||
## 新架构特点
|
||||
|
||||
### 1. 统一的状态管理
|
||||
- 使用 Pinia store (`src/stores/language.js`) 统一管理语言状态
|
||||
- 支持 localStorage 持久化用户语言选择
|
||||
- 自动检测浏览器语言偏好
|
||||
|
||||
### 2. 简化的语言切换
|
||||
- 使用 `useLanguageSwitch` composable 处理语言切换
|
||||
- 自动处理路由前缀（中文页面添加 `/cn` 前缀）
|
||||
- 无需强制页面刷新，提供流畅的用户体验
|
||||
|
||||
### 3. 清晰的职责分离
|
||||
- **语言状态管理**: `useLanguageStore`
|
||||
- **语言切换逻辑**: `useLanguageSwitch`
|
||||
- **路由导航**: `useNavigation`
|
||||
- **初始化**: `language-init.client.js` 插件
|
||||
|
||||
## 核心文件
|
||||
|
||||
### 语言状态管理
|
||||
```javascript
|
||||
// src/stores/language.js
|
||||
export const useLanguageStore = defineStore('language', () => {
|
||||
const currentLocale = ref('en')
|
||||
const availableLocales = [
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'cn', name: '简体中文' }
|
||||
]
|
||||
|
||||
// 设置语言、初始化、切换等方法
|
||||
})
|
||||
```
|
||||
|
||||
### 语言切换逻辑
|
||||
```javascript
|
||||
// src/composables/useLanguageSwitch.js
|
||||
export const useLanguageSwitch = () => {
|
||||
const switchLanguage = async (newLocale) => {
|
||||
// 更新状态并处理路由跳转
|
||||
}
|
||||
|
||||
const initLanguage = () => {
|
||||
// 初始化语言状态
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 在组件中切换语言
|
||||
```vue
|
||||
<script setup>
|
||||
import { useLanguageSwitch } from '@/composables/useLanguageSwitch.js'
|
||||
|
||||
const { switchLanguage, currentLocale } = useLanguageSwitch()
|
||||
|
||||
const changeToChinese = () => {
|
||||
switchLanguage('cn')
|
||||
}
|
||||
|
||||
const changeToEnglish = () => {
|
||||
switchLanguage('en')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 在组件中使用翻译
|
||||
```vue
|
||||
<template>
|
||||
<h1>{{ $t('page.home') }}</h1>
|
||||
<p>{{ $t('nav.about') }}</p>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 路由策略
|
||||
|
||||
- **默认语言**: 英文 (en)
|
||||
- **策略**: `prefix_except_default`
|
||||
- **中文页面**: 自动添加 `/cn` 前缀
|
||||
- **英文页面**: 无前缀
|
||||
|
||||
### 路由示例
|
||||
- 英文首页: `/`
|
||||
- 中文首页: `/cn`
|
||||
- 英文关于我们: `/about-us`
|
||||
- 中文关于我们: `/cn/about-us`
|
||||
|
||||
## 语言检测逻辑
|
||||
|
||||
1. **优先使用**: 用户手动选择的语言（localStorage）
|
||||
2. **其次使用**: 浏览器语言检测
|
||||
3. **默认语言**: 英文
|
||||
|
||||
## 测试
|
||||
|
||||
访问 `/test-language` 页面可以测试语言切换功能。
|
||||
|
||||
## 移除的旧文件
|
||||
|
||||
- `src/composables/useLanguageDetection.js` - 被新的 `useLanguageSwitch` 替代
|
||||
- `src/hook/lang.js` - 功能整合到 store 中
|
||||
|
||||
## 优势
|
||||
|
||||
1. **代码简洁**: 移除了重复和冲突的逻辑
|
||||
2. **状态一致**: 统一的状态管理确保服务端和客户端一致
|
||||
3. **用户体验**: 无需页面刷新，流畅的语言切换
|
||||
4. **可维护性**: 清晰的职责分离，易于维护和扩展
|
||||
5. **性能优化**: 减少了不必要的 Cookie 操作和页面刷新
|
||||
|
|
@ -0,0 +1,427 @@
|
|||
{
|
||||
"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二维码",
|
||||
"footer.copyright": "版权所有 © 2025 明阳良光",
|
||||
"footer.icp": "粤ICP备2023070569号",
|
||||
"footer.public-security": "粤公网安备 粤ICP备2023070569号",
|
||||
|
||||
"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技术展示",
|
||||
|
||||
"about.hero.badge": "专业安防",
|
||||
"about.hero.explore": "探索更多",
|
||||
"about.hero.watch": "观看视频",
|
||||
|
||||
"about.intro.badge": "企业介绍",
|
||||
"about.intro.feature1": "15年制造经验",
|
||||
"about.intro.feature2": "专注摄像头与照明",
|
||||
"about.intro.feature3": "600多人的员工团队",
|
||||
|
||||
"about.intro.award.title": "行业认可",
|
||||
"about.intro.award.desc": "荣获多项国际认证与行业奖项",
|
||||
|
||||
"about.achievements.title": "企业成就",
|
||||
"about.achievements.subtitle": "十五年专注安防，成就行业领先地位",
|
||||
"about.achievements.countries.desc": "产品销往多个国家和地区",
|
||||
"about.achievements.team.desc": "600多人的员工团队",
|
||||
"about.achievements.experience.desc": "15年摄像头与照明制造经验",
|
||||
"about.achievements.featured": "特色",
|
||||
"about.achievements.vision.tag1": "品质可靠",
|
||||
"about.achievements.vision.tag2": "服务周到",
|
||||
"about.achievements.summary.title": "持续创新，引领未来",
|
||||
"about.achievements.summary.desc": "我们将继续专注于摄像头与照明产品的制造，为客户提供优质的产品和服务。"
|
||||
}
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
{
|
||||
"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": "+ Employee 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": "Employee 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",
|
||||
"footer.copyright": "Copyright © 2025 Mingyang Liangguang",
|
||||
"footer.icp": "ICP No. 2023070569",
|
||||
"footer.public-security": "Public Security No. 2023070569",
|
||||
|
||||
"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 precision assembly",
|
||||
"about.production.testing": "Quality Testing",
|
||||
"about.production.testing.desc": "Strict product testing",
|
||||
"about.production.debugging": "Product Debugging",
|
||||
"about.production.debugging.desc": "Ensure optimal performance",
|
||||
"about.production.packaging": "Exquisite Packaging",
|
||||
"about.production.packaging.desc": "Safe product packaging",
|
||||
"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",
|
||||
|
||||
"about.hero.badge": "Professional Security",
|
||||
"about.hero.explore": "Explore More",
|
||||
"about.hero.watch": "Watch Video",
|
||||
|
||||
"about.intro.badge": "Company Profile",
|
||||
"about.intro.feature1": "15 Years Manufacturing Experience",
|
||||
"about.intro.feature2": "Focus on Cameras & Lighting",
|
||||
"about.intro.feature3": "600+ Employee Team",
|
||||
|
||||
"about.intro.award.title": "Industry Recognition",
|
||||
"about.intro.award.desc": "Awarded multiple international certifications and industry awards",
|
||||
|
||||
"about.achievements.title": "Corporate Achievements",
|
||||
"about.achievements.subtitle": "Fifteen years focused on security, achieving industry leadership",
|
||||
"about.achievements.countries.desc": "Products sold to multiple countries and regions",
|
||||
"about.achievements.team.desc": "600+ employee team",
|
||||
"about.achievements.experience.desc": "15 years of camera and lighting manufacturing experience",
|
||||
"about.achievements.featured": "Featured",
|
||||
"about.achievements.vision.tag1": "Quality Reliable",
|
||||
"about.achievements.vision.tag2": "Good Service",
|
||||
"about.achievements.summary.title": "Continuous Innovation, Leading the Future",
|
||||
"about.achievements.summary.desc": "We will continue to focus on the manufacturing of camera and lighting products, providing customers with quality products and services."
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
/// <reference types="nuxt" />
|
||||
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-08-22',
|
||||
devtools: { enabled: true },
|
||||
srcDir: 'src',
|
||||
srcDir: 'src', // 启用 src 目录配置
|
||||
alias: {
|
||||
'@': '~/',
|
||||
},
|
||||
|
|
@ -63,17 +65,15 @@ export default defineNuxtConfig({
|
|||
],
|
||||
defaultLocale: 'en',
|
||||
detectBrowserLanguage: {
|
||||
// 启用 Nuxt i18n 的自动检测
|
||||
useCookie: true, // 使用 cookie 保存语言选择
|
||||
useCookie: true,
|
||||
cookieKey: 'i18n_redirected',
|
||||
redirectOn: 'root', // 只在根路径时重定向
|
||||
redirectOn: 'root',
|
||||
alwaysRedirect: true,
|
||||
fallbackLocale: 'en'
|
||||
},
|
||||
strategy: 'prefix_except_default',
|
||||
vueI18n: '~/i18n.config.ts',
|
||||
langDir: 'locale', // 修正路径，相对于src目录
|
||||
debug: false // 关闭调试模式，减少控制台输出
|
||||
langDir: 'locale',
|
||||
debug: true
|
||||
},
|
||||
// Axios配置
|
||||
runtimeConfig: {
|
||||
|
|
|
|||
|
|
@ -313,7 +313,7 @@ image {
|
|||
|
||||
/*页面banner部分*/
|
||||
.banner {
|
||||
margin-top: 0.52rem;
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
height: 5.5rem;
|
||||
background-size: cover !important;
|
||||
|
|
@ -327,13 +327,13 @@ image {
|
|||
|
||||
@media (max-width: 1600px) {
|
||||
.banner {
|
||||
margin-top: 0.7rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1099px) {
|
||||
.banner {
|
||||
margin-top: 50px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -302,13 +302,13 @@ max-width: 100%
|
|||
|
||||
/*页面banner部分*/
|
||||
.banner {
|
||||
margin-top: 0.52rem;
|
||||
margin-top: 0; // 移除固定margin-top，让banner紧贴导航栏
|
||||
overflow: hidden;
|
||||
@media (max-width:1600px) {
|
||||
margin-top: 0.7rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
@media (max-width:1099px) {
|
||||
margin-top: 50px;
|
||||
margin-top: 0; // 移除这里的50px，避免重复间距
|
||||
}
|
||||
height:5.5rem;
|
||||
background-size: cover !important;
|
||||
|
|
|
|||
|
|
@ -188,7 +188,9 @@ html, body {
|
|||
user-select: text;
|
||||
font-size: var(--text-base);
|
||||
color: #3f4552;
|
||||
line-height: 1.8;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
|
|
@ -262,22 +264,22 @@ image {
|
|||
|
||||
@media (min-width: 2560px) {
|
||||
.container {
|
||||
max-width: 1800px;
|
||||
padding: 0 80px;
|
||||
max-width: 2000px;
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.container {
|
||||
max-width: 1500px;
|
||||
padding: 0 60px;
|
||||
max-width: 1600px;
|
||||
padding: 0 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
.container {
|
||||
max-width: 1300px;
|
||||
padding: 0 40px;
|
||||
max-width: 1400px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -447,7 +449,7 @@ image {
|
|||
|
||||
/* Banner 样式 */
|
||||
.banner {
|
||||
margin-top: 0.52rem;
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
height: 5.5rem;
|
||||
background-size: cover !important;
|
||||
|
|
@ -459,15 +461,39 @@ image {
|
|||
min-height: 230px;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
height: 8rem;
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
height: 6.5rem;
|
||||
min-height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
height: 6rem;
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.banner {
|
||||
margin-top: 0.6rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1099px) {
|
||||
.banner {
|
||||
margin-top: 50px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -483,6 +509,27 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
height: 8rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.banner {
|
||||
height: 6rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.banner {
|
||||
height: 5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner__box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -498,12 +545,36 @@ image {
|
|||
font-family: var(--font-medium);
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.banner__box__title {
|
||||
font-size: var(--text-6xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.banner__box__title {
|
||||
font-size: var(--text-5xl);
|
||||
}
|
||||
}
|
||||
|
||||
.banner__box__subtitle {
|
||||
font-size: var(--text-xl);
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-light);
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.banner__box__subtitle {
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.banner__box__subtitle {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 751px) and (max-width: 1100px) {
|
||||
.banner__box__title {
|
||||
font-size: var(--text-6xl);
|
||||
|
|
@ -531,79 +602,25 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
.pageMain {
|
||||
overflow: hidden;
|
||||
@media (max-width: 480px) {
|
||||
.banner__box__title {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.pageMain__breads {
|
||||
color: #666;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.pageMain__breads__box {
|
||||
width: 15rem;
|
||||
color: #666;
|
||||
line-height: 4;
|
||||
text-align: left;
|
||||
font-family: var(--font-regular);
|
||||
}
|
||||
|
||||
.pageMain__breads__box__icon__avater {
|
||||
width: 0.17rem;
|
||||
height: 0.17rem;
|
||||
margin-bottom: 0.03rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.pageMain__breads__box {
|
||||
font-size: 13.5px;
|
||||
line-height: 3.2;
|
||||
}
|
||||
.pageMain__breads__box__icon__avater {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__breads__box a {
|
||||
font-family: var(--font-medium);
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.pageMain__breads__box a:hover {
|
||||
color: #0072ff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.pageMain__breads__box {
|
||||
font-size: 13px;
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.pageMain__breads__box {
|
||||
.banner__box__subtitle {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.pageMain__breads__box__icon__avater {
|
||||
width: 0.68rem;
|
||||
height: 0.68rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.pageMain__breads__box {
|
||||
@media (max-width: 375px) {
|
||||
.banner__box__title {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.banner__box__subtitle {
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__line {
|
||||
.banner__line {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
|
|
@ -617,12 +634,26 @@ image {
|
|||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pageMain__line {
|
||||
.banner__line {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__line__item {
|
||||
@media (max-width: 480px) {
|
||||
.banner__line {
|
||||
padding: 0.4rem 0;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.banner__line {
|
||||
padding: 0.3rem 0;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.banner__line__item {
|
||||
margin: 0 1rem;
|
||||
position: relative;
|
||||
padding: 0.1rem 0;
|
||||
|
|
@ -632,31 +663,47 @@ image {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.banner__line__item {
|
||||
margin: 0 1.5rem;
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.banner__line__item {
|
||||
margin: 0 1.2rem;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.pageMain__line__item {
|
||||
.banner__line__item {
|
||||
font-size: 15.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 501px) and (max-width: 1100px) {
|
||||
.pageMain__line__item {
|
||||
.banner__line__item {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.pageMain__line__item {
|
||||
.banner__line__item {
|
||||
font-size: 0.6rem;
|
||||
margin: 0 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.pageMain__line__item {
|
||||
@media (max-width: 375px) {
|
||||
.banner__line__item {
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__line__item::before {
|
||||
.banner__line__item::before {
|
||||
position: absolute;
|
||||
left: 15%;
|
||||
content: "";
|
||||
|
|
@ -669,28 +716,65 @@ image {
|
|||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.pageMain__line__item::before {
|
||||
.banner__line__item::before {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__line__item:hover::before {
|
||||
@media (max-width: 480px) {
|
||||
.banner__line__item::before {
|
||||
height: 1px;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.banner__line__item:hover::before {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.pageMain__line--on {
|
||||
@media (max-width: 480px) {
|
||||
.banner__line__item:hover::before {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.banner__line--on {
|
||||
color: #0072ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pageMain__line--on::before {
|
||||
.banner__line--on::before {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.pageMain__buttom-line {
|
||||
@media (max-width: 480px) {
|
||||
.banner__line--on::before {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.banner__buttom-line {
|
||||
padding: 0.36rem 0 0.7rem;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.banner__buttom-line {
|
||||
padding: 0.5rem 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner__buttom-line {
|
||||
padding: 0.3rem 0 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.banner__buttom-line {
|
||||
padding: 0.25rem 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 粘性导航栏样式 */
|
||||
.sticky-page-layout {
|
||||
position: relative;
|
||||
|
|
@ -705,7 +789,7 @@ image {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
@media (min-width: 2560px) {
|
||||
.nav-sticky {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -713,7 +797,7 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.nav-sticky {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -741,6 +825,20 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-sticky {
|
||||
line-height: 3.2;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.nav-sticky {
|
||||
line-height: 3;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -758,6 +856,24 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.nav-sticky__center {
|
||||
width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.nav-sticky__center {
|
||||
width: 1600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
.nav-sticky__center {
|
||||
width: 1400px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__left {
|
||||
font-size: 0.17rem;
|
||||
font-family: "Microsoft YaHei";
|
||||
|
|
@ -765,7 +881,7 @@ image {
|
|||
line-height: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
@media (min-width: 2560px) {
|
||||
.nav-sticky__center__left {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -773,7 +889,7 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.nav-sticky__center__left {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -801,12 +917,38 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-sticky__center__left {
|
||||
line-height: 3.2;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.nav-sticky__center__left {
|
||||
line-height: 3;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky__center__left {
|
||||
margin-left: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-sticky__center__left {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.nav-sticky__center__left {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__right {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
|
|
@ -817,7 +959,7 @@ image {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
@media (min-width: 2560px) {
|
||||
.nav-sticky__center__right {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -825,7 +967,7 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.nav-sticky__center__right {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -853,12 +995,38 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-sticky__center__right {
|
||||
line-height: 3.2;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.nav-sticky__center__right {
|
||||
line-height: 3;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky__center__right {
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-sticky__center__right {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.nav-sticky__center__right {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__item {
|
||||
margin: 0 0.2rem;
|
||||
opacity: 0.6;
|
||||
|
|
@ -870,6 +1038,18 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-sticky__center__right__item {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.nav-sticky__center__right__item {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__item:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -894,7 +1074,7 @@ image {
|
|||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
@media (min-width: 2560px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -902,7 +1082,7 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -930,6 +1110,20 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
line-height: 3.2;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
line-height: 3;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__dropdown__up .arrow-down {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
|
|
@ -979,6 +1173,30 @@ image {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.detail-banner {
|
||||
height: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.detail-banner {
|
||||
height: 12.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
.detail-banner {
|
||||
height: 11.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.detail-banner {
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-banner__title {
|
||||
font-family: var(--font-medium);
|
||||
position: absolute;
|
||||
|
|
@ -990,6 +1208,27 @@ image {
|
|||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.detail-banner__title {
|
||||
font-size: 0.8rem;
|
||||
top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.detail-banner__title {
|
||||
font-size: 0.7rem;
|
||||
top: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.detail-banner__title {
|
||||
font-size: 0.5rem;
|
||||
top: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-banner__avater {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1010,6 +1249,34 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.detail-banner {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.detail-banner {
|
||||
padding-top: 2rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.detail-banner__title {
|
||||
font-size: 0.7rem;
|
||||
top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.detail-banner {
|
||||
padding-top: 1.5rem;
|
||||
height: 8rem;
|
||||
}
|
||||
.detail-banner__title {
|
||||
font-size: 0.6rem;
|
||||
top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载遮罩 */
|
||||
.load-mask {
|
||||
position: fixed;
|
||||
|
|
@ -1029,6 +1296,27 @@ image {
|
|||
margin-top: 20vh;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.load-mask .spinner {
|
||||
width: 200px;
|
||||
margin-top: 25vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.load-mask .spinner {
|
||||
width: 120px;
|
||||
margin-top: 15vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.load-mask .spinner {
|
||||
width: 100px;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
}
|
||||
|
||||
.load-mask .spinner .spinner__item {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
@ -1040,6 +1328,20 @@ image {
|
|||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.load-mask .spinner .spinner__item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.load-mask .spinner .spinner__item {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.load-mask .spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
|
|
@ -1067,6 +1369,24 @@ image {
|
|||
height: 35vh;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.load-loading {
|
||||
height: 40vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.load-loading {
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.load-loading {
|
||||
height: 25vh;
|
||||
}
|
||||
}
|
||||
|
||||
.load-loading__box {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
|
|
@ -1074,6 +1394,18 @@ image {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.load-loading__box {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.load-loading__box {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.load-loading__box__up {
|
||||
width: 55px;
|
||||
margin: auto;
|
||||
|
|
@ -1084,12 +1416,36 @@ image {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.load-loading__box__up {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.load-loading__box__up {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.load-loading__box__text {
|
||||
font-size: 16px;
|
||||
line-height: 3;
|
||||
font-family: var(--font-regular);
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.load-loading__box__text {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.load-loading__box__text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.load-loading__box__up {
|
||||
width: 47px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -179,7 +179,9 @@ html, body {
|
|||
user-select: text;
|
||||
font-size: var(--text-base);
|
||||
color: #3f4552;
|
||||
line-height: 1.8;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
|
|
@ -246,20 +248,20 @@ image {
|
|||
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
max-width: 1800px;
|
||||
padding: 0 80px;
|
||||
max-width: 2000px;
|
||||
padding: 0 100px;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1500px;
|
||||
padding: 0 60px;
|
||||
max-width: 1600px;
|
||||
padding: 0 80px;
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1300px;
|
||||
padding: 0 40px;
|
||||
max-width: 1400px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
|
|
@ -425,8 +427,8 @@ image {
|
|||
|
||||
/* Banner 样式 */
|
||||
.banner {
|
||||
margin-top: 0.52rem;
|
||||
overflow: hidden;
|
||||
margin-top: 0; // 移除固定margin-top，让banner紧贴导航栏
|
||||
overflow: hidden; // 防止极端加载情况
|
||||
height: 5.5rem;
|
||||
background-size: cover !important;
|
||||
position: relative;
|
||||
|
|
@ -436,11 +438,29 @@ image {
|
|||
justify-content: center;
|
||||
min-height: 230px;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
margin-top: 0;
|
||||
height: 8rem;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
margin-top: 0;
|
||||
height: 6.5rem;
|
||||
min-height: 350px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
margin-top: 0;
|
||||
height: 6rem;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
margin-top: 0.6rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
@media (max-width: 1099px) {
|
||||
margin-top: 50px;
|
||||
margin-top: 0; // 移除这里的50px，避免重复间距
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
|
|
@ -450,6 +470,21 @@ image {
|
|||
height: 10rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 8rem;
|
||||
margin-top: 0; // 移除这里的40px
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: 6rem;
|
||||
margin-top: 0; // 移除这里的35px
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
height: 5rem;
|
||||
margin-top: 0; // 移除这里的30px
|
||||
}
|
||||
|
||||
&__box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -462,12 +497,28 @@ image {
|
|||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: var(--font-medium);
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: var(--text-6xl);
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
font-size: var(--text-5xl);
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: var(--text-xl);
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-light);
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 751px) and (max-width: 1100px) {
|
||||
|
|
@ -499,73 +550,25 @@ image {
|
|||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
&__title {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.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) {
|
||||
&__subtitle {
|
||||
font-size: 0.6rem;
|
||||
&__icon {
|
||||
&__avater {
|
||||
width: 0.68rem;
|
||||
height: 0.68rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
@media (max-width: 375px) {
|
||||
&__title {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -585,6 +588,16 @@ image {
|
|||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 0.4rem 0;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 0.3rem 0;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
&__item {
|
||||
margin: 0 1rem;
|
||||
position: relative;
|
||||
|
|
@ -594,6 +607,16 @@ image {
|
|||
font-family: var(--font-normal);
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
margin: 0 1.5rem;
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
margin: 0 1.2rem;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
font-size: 15.5px;
|
||||
}
|
||||
|
|
@ -604,10 +627,12 @@ image {
|
|||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 0.6rem;
|
||||
margin: 0 0.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
@media (max-width: 375px) {
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0.6rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -624,10 +649,19 @@ image {
|
|||
@media (max-width: 700px) {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: 1px;
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
width: 70%;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -637,12 +671,28 @@ image {
|
|||
|
||||
&::before {
|
||||
width: 70%;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__buttom-line {
|
||||
padding: 0.36rem 0 0.7rem;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
padding: 0.5rem 0 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0.3rem 0 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 0.25rem 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -654,12 +704,12 @@ image {
|
|||
|
||||
@mixin sticky-nav-style {
|
||||
line-height: 3;
|
||||
@media (max-width: 1500px) {
|
||||
@media (min-width: 2560px) {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.24rem;
|
||||
|
|
@ -675,6 +725,16 @@ image {
|
|||
line-height: 3.5;
|
||||
font-size: 0.63rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
line-height: 3.2;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
line-height: 3;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky {
|
||||
|
|
@ -689,6 +749,19 @@ image {
|
|||
@media (max-width: 1200px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
width: 1800px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
width: 1600px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
width: 1400px;
|
||||
}
|
||||
|
||||
margin: 0 auto;
|
||||
transition: width 0.3s;
|
||||
color: #ffffff;
|
||||
|
|
@ -705,6 +778,14 @@ image {
|
|||
@media (max-width: 1200px) {
|
||||
margin-left: 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
|
|
@ -719,12 +800,28 @@ image {
|
|||
margin-right: 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
&__item {
|
||||
margin: 0 0.2rem;
|
||||
opacity: 0.6;
|
||||
@media (max-width: 600px) {
|
||||
margin: 0 0.4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -797,6 +894,22 @@ image {
|
|||
color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
height: 12.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
height: 11.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-medium);
|
||||
position: absolute;
|
||||
|
|
@ -806,6 +919,21 @@ image {
|
|||
width: 90%;
|
||||
text-align: center;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: 0.8rem;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
font-size: 0.7rem;
|
||||
top: 1.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 0.5rem;
|
||||
top: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__avater {
|
||||
|
|
@ -825,6 +953,28 @@ image {
|
|||
top: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding-top: 2rem;
|
||||
height: 10rem;
|
||||
&__title {
|
||||
font-size: 0.7rem;
|
||||
top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding-top: 1.5rem;
|
||||
height: 8rem;
|
||||
&__title {
|
||||
font-size: 0.6rem;
|
||||
top: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载遮罩 */
|
||||
|
|
@ -844,6 +994,21 @@ image {
|
|||
text-align: center;
|
||||
margin-top: 20vh;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
width: 200px;
|
||||
margin-top: 25vh;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 120px;
|
||||
margin-top: 15vh;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 100px;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.spinner__item {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
@ -853,6 +1018,16 @@ image {
|
|||
animation: bouncedelay 1.4s infinite ease-in-out;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.bounce1 {
|
||||
|
|
@ -883,12 +1058,32 @@ image {
|
|||
align-items: center;
|
||||
height: 35vh;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: 25vh;
|
||||
}
|
||||
|
||||
&__box {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
color: #aeadba;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
&__up {
|
||||
width: 55px;
|
||||
margin: auto;
|
||||
|
|
@ -896,12 +1091,28 @@ image {
|
|||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 16px;
|
||||
line-height: 3;
|
||||
font-family: var(--font-regular);
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,8 @@
|
|||
import { ref } from "vue";
|
||||
import { useI18n } from "#imports";
|
||||
import { useNavigation } from "@/composables/useNavigation.js";
|
||||
import { useLanguageStore } from "@/stores/language.js";
|
||||
|
||||
const { t } = useI18n();
|
||||
const languageStore = useLanguageStore();
|
||||
const langIs = ref(languageStore.currentLocale);
|
||||
const { t, locale } = useI18n();
|
||||
const langIs = ref(locale);
|
||||
const { navigateTo } = useNavigation();
|
||||
|
||||
|
||||
|
|
@ -153,46 +150,46 @@ $form-theme-color: #2164ff;
|
|||
align-items: flex-start;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 20px 15px;
|
||||
padding: 20px 0px 15px;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
max-width: 1800px;
|
||||
padding: 40px 60px 30px;
|
||||
padding: 40px 60px 30px; /* 左右60px与顶部导航栏一致 */
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1200px;
|
||||
padding: 35px 50px 25px;
|
||||
padding: 35px 30px 25px; /* 左右50px与顶部导航栏一致 */
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1200px;
|
||||
padding: 30px 40px 20px;
|
||||
padding: 30px 40px 20px; /* 左右40px与顶部导航栏一致 */
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 25px 30px 18px;
|
||||
padding: 25px 30px 18px; /* 左右30px与顶部导航栏一致 */
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
padding: 20px 20px 15px;
|
||||
padding: 20px 20px 15px; /* 左右20px与顶部导航栏一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
gap: 20px;
|
||||
padding: 18px 16px 12px;
|
||||
padding: 18px 16px 12px; /* 左右16px与顶部导航栏一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
gap: 16px;
|
||||
padding: 15px 12px 10px;
|
||||
padding: 15px 12px 10px; /* 左右12px与顶部导航栏一致 */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,33 +202,33 @@ $form-theme-color: #2164ff;
|
|||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
max-width: 1800px;
|
||||
padding: 0 60px;
|
||||
padding: 0 60px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1200px;
|
||||
padding: 0 50px;
|
||||
padding: 0 50px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1200px;
|
||||
padding: 0 40px;
|
||||
padding: 0 40px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 0 30px;
|
||||
padding: 0 30px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 20px;
|
||||
padding: 0 20px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 0 16px;
|
||||
padding: 0 16px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 0 12px;
|
||||
padding: 0 12px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -711,33 +708,33 @@ $form-theme-color: #2164ff;
|
|||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
max-width: 1800px;
|
||||
padding: 0 60px;
|
||||
padding: 0 60px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1300px;
|
||||
padding: 0 50px;
|
||||
max-width: 1200px; /* 修正：应该是1200px，不是1300px */
|
||||
padding: 0 50px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1200px;
|
||||
padding: 0 40px;
|
||||
padding: 0 40px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 0 30px;
|
||||
padding: 0 30px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 20px;
|
||||
padding: 0 20px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 0 16px;
|
||||
padding: 0 16px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 0 12px;
|
||||
padding: 0 12px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,375 @@
|
|||
.page {
|
||||
background-color: #f4f4f4 !important;
|
||||
}
|
||||
|
||||
.page .foot {
|
||||
color: #343434;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.page .foot {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.page .foot .foot-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page .foot .foot-top {
|
||||
padding: 20px 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list__Item:nth-child(3) {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list__Item:last-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.page .foot .foot-top__list__Item:nth-child(3) {
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list__Item__title {
|
||||
font-size: 0.2rem;
|
||||
font-family: MiSans-Medium;
|
||||
color: #343434;
|
||||
line-height: 2.8;
|
||||
}
|
||||
|
||||
@media (min-width: 1900px) {
|
||||
.page .foot .foot-top__list__Item__title {
|
||||
font-size: 0.17rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.page .foot .foot-top__list__Item__title {
|
||||
font-size: 0.23rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1450px) {
|
||||
.page .foot .foot-top__list__Item__title {
|
||||
font-size: 0.26rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list__Item__small {
|
||||
cursor: pointer;
|
||||
color: #626262;
|
||||
line-height: 2.5;
|
||||
letter-spacing: 0.01rem;
|
||||
font-size: 0.17rem;
|
||||
font-family: MiSans-Normal;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
@media (min-width: 1900px) {
|
||||
.page .foot .foot-top__list__Item__small {
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.page .foot .foot-top__list__Item__small {
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1450px) {
|
||||
.page .foot .foot-top__list__Item__small {
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list__Item__small:hover {
|
||||
color: #2164ff;
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list__Item__small-2 {
|
||||
cursor: pointer;
|
||||
color: #626262;
|
||||
line-height: 2.5;
|
||||
letter-spacing: 0.01rem;
|
||||
font-size: 0.17rem;
|
||||
font-family: MiSans-Normal;
|
||||
transition: .3s;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (min-width: 1900px) {
|
||||
.page .foot .foot-top__list__Item__small-2 {
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.page .foot .foot-top__list__Item__small-2 {
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1450px) {
|
||||
.page .foot .foot-top__list__Item__small-2 {
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list__Item__small-2:hover {
|
||||
color: #2164ff;
|
||||
}
|
||||
|
||||
.page .foot .foot-top__list__marginTop .foot-top__list__Item:last-child {
|
||||
width: 26%;
|
||||
}
|
||||
|
||||
.page .foot .foot-bottom {
|
||||
color: #999;
|
||||
padding: 10px 0 15px;
|
||||
font-size: 0.19rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1900px) {
|
||||
.page .foot .foot-bottom {
|
||||
font-size: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.page .foot .foot-bottom {
|
||||
font-size: 0.21rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1450px) {
|
||||
.page .foot .foot-bottom {
|
||||
font-size: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page .foot .foot-bottom__box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1450px) {
|
||||
.page .foot .foot-bottom__box {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.page .foot .foot-bottom__box__content__text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page .foot .foot-bottom__box__content__text2 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.page .foot .foot-bottom__box__content__text2:hover {
|
||||
border-bottom: 0.01rem solid #999;
|
||||
}
|
||||
}
|
||||
|
||||
.page .foot .foot-bottom text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.mobile-foot {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
.mobile-foot__col {
|
||||
width: 100%;
|
||||
font-family: MiSans-Normal;
|
||||
cursor: pointer;
|
||||
color: #343434;
|
||||
}
|
||||
.mobile-foot__col__item__title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #4d4d4d;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
.mobile-foot__col__item__title__text {
|
||||
font-family: MiSans-Medium;
|
||||
font-size: 13px;
|
||||
margin: 0.1rem 0;
|
||||
line-height: 3.5;
|
||||
padding: 0 0.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 650px) {
|
||||
.mobile-foot__col__item__title__text {
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 500px) {
|
||||
.mobile-foot__col__item__title__text {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.mobile-foot__col__item__title .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%;
|
||||
}
|
||||
.mobile-foot__col__item__title .icon-arrow--active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.mobile-foot__col__item__title__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;
|
||||
font-family: MiSans-Medium;
|
||||
font-size: 13px;
|
||||
margin: 0.1rem 0;
|
||||
line-height: 3.5;
|
||||
padding: 0 0.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 650px) {
|
||||
.mobile-foot__col__item__title__icon {
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 500px) {
|
||||
.mobile-foot__col__item__title__icon {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.mobile-foot__col__item__title__icon--active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.mobile-foot__col__item__content {
|
||||
color: #626262;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height .5s ease-in-out;
|
||||
}
|
||||
.mobile-foot__col__item__content__list {
|
||||
padding: 0.3rem 0.8rem;
|
||||
color: #626262;
|
||||
}
|
||||
.mobile-foot__col__item__content__list__element {
|
||||
font-family: MiSans-Medium;
|
||||
font-size: 13px;
|
||||
margin: 0.1rem 0;
|
||||
line-height: 3.5;
|
||||
padding: 0 0.4rem;
|
||||
cursor: pointer;
|
||||
line-height: 2.5;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 650px) {
|
||||
.mobile-foot__col__item__content__list__element {
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 500px) {
|
||||
.mobile-foot__col__item__content__list__element {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (min-width: 1025px) {
|
||||
.mobile-foot__col__item__content__list__element:hover {
|
||||
color: #2164ff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.mobile-foot__col__item__content--active {
|
||||
height: auto;
|
||||
}
|
||||
.foot-bottom {
|
||||
color: #999;
|
||||
padding: 15px 0 20px;
|
||||
line-height: 1.6;
|
||||
border-top: 1px solid #2a2a2a;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
}
|
||||
.foot-bottom__box {
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.foot-bottom__box__content {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
.foot-bottom__box__content__text {
|
||||
cursor: pointer;
|
||||
}
|
||||
.foot-bottom__box__content__text2 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 800px) {
|
||||
.foot-bottom__box__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 0;
|
||||
font-size: 12px;
|
||||
padding: 15px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 800px) and (max-width: 800px) {
|
||||
.foot-bottom__box__content__space {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.foot-bottom text {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,194 @@
|
|||
<template>
|
||||
<div class="language-switcher">
|
||||
<div class="language-dropdown" @click="toggleDropdown" ref="dropdownRef">
|
||||
<div class="current-language">
|
||||
<span class="language-name">{{ currentLanguageName }}</span>
|
||||
<i class="dropdown-arrow" :class="{ 'rotated': isDropdownOpen }">▼</i>
|
||||
</div>
|
||||
|
||||
<div class="language-options" v-if="isDropdownOpen">
|
||||
<div
|
||||
v-for="lang in availableLanguages"
|
||||
:key="lang.code"
|
||||
class="language-option"
|
||||
:class="{ 'active': lang.code === currentLocale }"
|
||||
@click.stop="selectLanguage(lang.code)"
|
||||
>
|
||||
<span class="language-code">{{ lang.code.toUpperCase() }}</span>
|
||||
<span class="language-name">{{ lang.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { locale } = useI18n()
|
||||
const { switchLanguage, getCurrentLanguageName, getLanguageName, isLanguageAvailable } = useLanguageSwitch()
|
||||
|
||||
// 响应式状态
|
||||
const isDropdownOpen = ref(false)
|
||||
const dropdownRef = ref(null)
|
||||
|
||||
// 计算属性
|
||||
const currentLocale = computed(() => locale.value)
|
||||
const currentLanguageName = computed(() => getCurrentLanguageName())
|
||||
|
||||
const availableLanguages = computed(() => [
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'cn', name: '简体中文' }
|
||||
])
|
||||
|
||||
// 切换下拉菜单
|
||||
const toggleDropdown = () => {
|
||||
isDropdownOpen.value = !isDropdownOpen.value
|
||||
}
|
||||
|
||||
// 选择语言
|
||||
const selectLanguage = async (langCode) => {
|
||||
if (!isLanguageAvailable(langCode) || langCode === currentLocale.value) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await switchLanguage(langCode, useRouter())
|
||||
isDropdownOpen.value = false
|
||||
} catch (error) {
|
||||
console.error('语言切换失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 点击外部关闭下拉菜单
|
||||
const handleClickOutside = (event) => {
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
|
||||
isDropdownOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.language-switcher {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.language-dropdown {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.current-language {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.current-language:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.language-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.dropdown-arrow.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.language-options {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.language-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.language-option:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.language-option:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.language-option.active {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.language-option.active .language-code,
|
||||
.language-option.active .language-name {
|
||||
color: #1976d2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.language-code {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.language-option .language-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.language-options {
|
||||
right: auto;
|
||||
left: 0;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.current-language {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.language-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -76,8 +76,8 @@ const chooseLanguage = async (lang) => {
|
|||
|
||||
try {
|
||||
isSwitching.value = true;
|
||||
// 使用新的语言切换方法
|
||||
await switchLanguage(lang.code, locale, router);
|
||||
// 使用新的语言切换方法，传递正确的参数
|
||||
await switchLanguage(lang.code, router);
|
||||
} catch (error) {
|
||||
console.warn('Language switch failed:', error);
|
||||
} finally {
|
||||
|
|
@ -140,7 +140,7 @@ const handleLogoClick = () => {
|
|||
|
||||
onMounted(() => {
|
||||
// 初始化语言
|
||||
initLanguage(locale, router);
|
||||
initLanguage();
|
||||
|
||||
// 更新语言列表选中状态
|
||||
langList.value.forEach((item) => {
|
||||
|
|
@ -307,6 +307,7 @@ watch(
|
|||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
pointer-events: auto;
|
||||
line-height: 1.2;
|
||||
|
||||
&-container {
|
||||
max-width: 1200px;
|
||||
|
|
@ -428,12 +429,13 @@ watch(
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.4;
|
||||
|
||||
// 下划线样式
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
|
|
@ -447,6 +449,7 @@ watch(
|
|||
|
||||
&::after {
|
||||
width: 30px;
|
||||
bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -457,6 +460,7 @@ watch(
|
|||
// 激活时显示下划线
|
||||
&::after {
|
||||
width: 25px;
|
||||
bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
import { useLanguageStore } from '@/stores/language.js'
|
||||
|
||||
export const useAppInit = () => {
|
||||
const languageStore = useLanguageStore()
|
||||
|
||||
// 应用初始化
|
||||
const initApp = () => {
|
||||
console.log('App initialization started')
|
||||
|
||||
// 初始化语言
|
||||
languageStore.initLocale()
|
||||
// 语言初始化由 Nuxt i18n 自动处理
|
||||
|
||||
console.log('App initialization completed')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
export const useI18nUtils = () => {
|
||||
const { t, locale, locales } = useI18n()
|
||||
|
||||
// 获取所有可用语言
|
||||
const getAvailableLocales = () => {
|
||||
return locales.value || []
|
||||
}
|
||||
|
||||
// 获取当前语言信息
|
||||
const getCurrentLocaleInfo = () => {
|
||||
const current = locales.value?.find(loc => loc.code === locale.value)
|
||||
return current || { code: 'en', name: 'English' }
|
||||
}
|
||||
|
||||
// 检查是否为当前语言
|
||||
const isCurrentLocale = (code) => {
|
||||
return locale.value === code
|
||||
}
|
||||
|
||||
// 获取语言切换后的路径
|
||||
const getLocalePath = (targetLocale, currentPath) => {
|
||||
if (!targetLocale) {
|
||||
return currentPath
|
||||
}
|
||||
|
||||
let newPath = currentPath
|
||||
|
||||
if (targetLocale === 'cn') {
|
||||
// 切换到中文，需要添加 /cn 前缀
|
||||
if (!currentPath.startsWith('/cn')) {
|
||||
newPath = `/cn${currentPath === '/' ? '' : currentPath}`
|
||||
}
|
||||
} else if (targetLocale === 'en') {
|
||||
// 切换到英文，需要移除 /cn 前缀
|
||||
if (currentPath.startsWith('/cn')) {
|
||||
newPath = currentPath.replace('/cn', '') || '/'
|
||||
}
|
||||
}
|
||||
|
||||
return newPath
|
||||
}
|
||||
|
||||
// 格式化数字（根据语言显示不同格式）
|
||||
const formatNumber = (number, options = {}) => {
|
||||
const localeCode = locale.value === 'cn' ? 'zh-CN' : 'en-US'
|
||||
return new Intl.NumberFormat(localeCode, options).format(number)
|
||||
}
|
||||
|
||||
// 格式化日期（根据语言显示不同格式）
|
||||
const formatDate = (date, options = {}) => {
|
||||
const localeCode = locale.value === 'cn' ? 'zh-CN' : 'en-US'
|
||||
const defaultOptions = {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
...options
|
||||
}
|
||||
return new Intl.DateTimeFormat(localeCode, defaultOptions).format(date)
|
||||
}
|
||||
|
||||
// 获取翻译文本，支持默认值
|
||||
const getText = (key, defaultValue = '') => {
|
||||
try {
|
||||
const translated = t(key)
|
||||
return translated || defaultValue
|
||||
} catch (error) {
|
||||
console.warn(`翻译键 "${key}" 不存在:`, error)
|
||||
return defaultValue
|
||||
}
|
||||
}
|
||||
|
||||
// 获取翻译文本，如果不存在则返回键名
|
||||
const getTextOrKey = (key) => {
|
||||
return getText(key, key)
|
||||
}
|
||||
|
||||
return {
|
||||
// 基础功能
|
||||
t,
|
||||
locale,
|
||||
locales,
|
||||
|
||||
// 语言相关
|
||||
getAvailableLocales,
|
||||
getCurrentLocaleInfo,
|
||||
isCurrentLocale,
|
||||
getLocalePath,
|
||||
|
||||
// 格式化功能
|
||||
formatNumber,
|
||||
formatDate,
|
||||
|
||||
// 文本获取
|
||||
getText,
|
||||
getTextOrKey
|
||||
}
|
||||
}
|
||||
|
|
@ -1,114 +1,129 @@
|
|||
import { useLanguageStore } from '@/stores/language.js'
|
||||
|
||||
export const useLanguageSwitch = () => {
|
||||
const languageStore = useLanguageStore()
|
||||
const { locale, setLocale } = useI18n()
|
||||
const { getLocalePath } = useI18nUtils()
|
||||
|
||||
// 切换语言 - 简化逻辑，主要依赖 Nuxt i18n 的路由处理
|
||||
const switchLanguage = async (newLocale, locale, router) => {
|
||||
// 切换语言
|
||||
const switchLanguage = async (newLocale, router) => {
|
||||
if (!newLocale || newLocale === locale.value) {
|
||||
console.log('Language switch skipped:', { newLocale, current: locale.value })
|
||||
return
|
||||
console.log('语言切换跳过:', { newLocale, current: locale.value })
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
console.log('Language switch started:', { from: locale.value, to: newLocale })
|
||||
console.log('开始切换语言:', { from: locale.value, to: newLocale })
|
||||
|
||||
try {
|
||||
// 更新 store 中的语言状态
|
||||
languageStore.setLocale(newLocale)
|
||||
console.log('Store updated:', newLocale)
|
||||
|
||||
// 更新 i18n locale
|
||||
locale.value = newLocale
|
||||
console.log('I18n locale updated:', newLocale)
|
||||
await setLocale(newLocale)
|
||||
console.log('I18n locale 已更新:', newLocale)
|
||||
|
||||
// 使用 Nuxt i18n 的 switchLocalePath 获取新语言的路径
|
||||
// 获取当前路由信息
|
||||
const currentRoute = router.currentRoute.value
|
||||
const currentPath = currentRoute.path
|
||||
console.log('Current path:', currentPath)
|
||||
console.log('当前路径:', currentPath)
|
||||
|
||||
// 构建新语言的路径
|
||||
let newPath = currentPath
|
||||
// 获取新语言的路径
|
||||
const newPath = getLocalePath(newLocale, currentPath)
|
||||
console.log('新路径:', newPath)
|
||||
|
||||
if (newLocale === 'cn') {
|
||||
// 切换到中文，需要添加 /cn 前缀
|
||||
if (!currentPath.startsWith('/cn')) {
|
||||
newPath = `/cn${currentPath === '/' ? '' : currentPath}`
|
||||
}
|
||||
} else {
|
||||
// 切换到英文，需要移除 /cn 前缀
|
||||
if (currentPath.startsWith('/cn')) {
|
||||
newPath = currentPath.replace('/cn', '') || '/'
|
||||
}
|
||||
}
|
||||
|
||||
console.log('New path:', newPath)
|
||||
|
||||
// 跳转到新语言的对应页面
|
||||
// 如果路径需要改变，则进行导航
|
||||
if (newPath !== currentPath) {
|
||||
try {
|
||||
await router.push(newPath)
|
||||
console.log('Navigation completed')
|
||||
console.log('语言切换导航完成')
|
||||
} catch (error) {
|
||||
console.warn('Language switch navigation failed:', error)
|
||||
// 如果路由跳转失败，至少确保语言状态已更新
|
||||
console.warn('语言切换导航失败:', error)
|
||||
// 导航失败不影响语言切换
|
||||
}
|
||||
} else {
|
||||
console.log('No navigation needed')
|
||||
console.log('无需导航')
|
||||
}
|
||||
|
||||
console.log('Language switch completed successfully')
|
||||
console.log('语言切换成功完成')
|
||||
return Promise.resolve()
|
||||
} catch (error) {
|
||||
console.error('Language switch failed:', error)
|
||||
console.error('语言切换失败:', error)
|
||||
// 出错时回退到默认语言
|
||||
languageStore.setLocale('en')
|
||||
locale.value = 'en'
|
||||
try {
|
||||
await setLocale('en')
|
||||
console.log('已回退到默认语言: en')
|
||||
} catch (fallbackError) {
|
||||
console.error('回退到默认语言失败:', fallbackError)
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前语言显示名称
|
||||
const getCurrentLanguageName = (locale) => {
|
||||
const getCurrentLanguageName = () => {
|
||||
try {
|
||||
const currentLang = languageStore.availableLocales.find(
|
||||
const availableLocales = [
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'cn', name: '简体中文' }
|
||||
]
|
||||
const currentLang = availableLocales.find(
|
||||
lang => lang.code === locale.value
|
||||
)
|
||||
return currentLang ? currentLang.name : 'English'
|
||||
} catch (error) {
|
||||
console.warn('Get language name failed:', error)
|
||||
console.warn('获取语言名称失败:', error)
|
||||
return 'English'
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化语言 - 简化初始化逻辑
|
||||
const initLanguage = (locale, router) => {
|
||||
console.log('Language initialization started')
|
||||
// 获取目标语言的显示名称
|
||||
const getLanguageName = (code) => {
|
||||
try {
|
||||
// 确保语言 store 已初始化
|
||||
languageStore.initLocale()
|
||||
console.log('Store initialized')
|
||||
|
||||
// 同步 store 和 i18n 的语言状态
|
||||
const storeLocale = languageStore.currentLocale.value
|
||||
console.log('Store locale:', storeLocale, 'I18n locale:', locale.value)
|
||||
|
||||
if (storeLocale && storeLocale !== locale.value) {
|
||||
locale.value = storeLocale
|
||||
console.log('I18n locale synced:', storeLocale)
|
||||
}
|
||||
|
||||
console.log('Language initialization completed')
|
||||
const availableLocales = [
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'cn', name: '简体中文' }
|
||||
]
|
||||
const targetLang = availableLocales.find(lang => lang.code === code)
|
||||
return targetLang ? targetLang.name : code
|
||||
} catch (error) {
|
||||
console.error('Language initialization failed:', error)
|
||||
// 出错时使用默认语言
|
||||
languageStore.setLocale('en')
|
||||
locale.value = 'en'
|
||||
console.warn('获取目标语言名称失败:', error)
|
||||
return code
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化语言
|
||||
const initLanguage = async () => {
|
||||
console.log('开始初始化语言')
|
||||
try {
|
||||
// 从 cookie 中获取之前选择的语言
|
||||
const savedLocale = useCookie('i18n_redirected')
|
||||
|
||||
if (savedLocale.value && savedLocale.value !== locale.value) {
|
||||
console.log('使用保存的语言:', savedLocale.value)
|
||||
await setLocale(savedLocale.value)
|
||||
} else {
|
||||
console.log('使用当前语言:', locale.value)
|
||||
}
|
||||
|
||||
console.log('语言初始化完成')
|
||||
return Promise.resolve()
|
||||
} catch (error) {
|
||||
console.error('语言初始化失败:', error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
|
||||
// 检查语言是否可用
|
||||
const isLanguageAvailable = (code) => {
|
||||
const availableCodes = ['en', 'cn']
|
||||
return availableCodes.includes(code)
|
||||
}
|
||||
|
||||
return {
|
||||
// 核心功能
|
||||
switchLanguage,
|
||||
getCurrentLanguageName,
|
||||
getLanguageName,
|
||||
initLanguage,
|
||||
currentLocale: languageStore.currentLocale,
|
||||
availableLocales: languageStore.availableLocales
|
||||
|
||||
// 工具函数
|
||||
isLanguageAvailable,
|
||||
|
||||
// 状态
|
||||
currentLocale: computed(() => locale.value)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
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
|
||||
},
|
||||
// 移除重复的locale配置，让Nuxt i18n自动管理
|
||||
fallbackWarn: false,
|
||||
missingWarn: false
|
||||
}))
|
||||
|
|
@ -715,6 +715,15 @@ $font-medium: MiSans-Medium;
|
|||
$font-semibold: MiSans-SemiBold;
|
||||
$font-bold: MiSans-Bold;
|
||||
|
||||
/* 响应式断点系统 */
|
||||
$breakpoint-xs: 375px;
|
||||
$breakpoint-sm: 480px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 1024px;
|
||||
$breakpoint-xl: 1440px;
|
||||
$breakpoint-2xl: 1920px;
|
||||
$breakpoint-4k: 2560px;
|
||||
|
||||
/* 重置与基础样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -736,34 +745,34 @@ body {
|
|||
padding: 0 20px;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
max-width: 1800px;
|
||||
padding: 0 60px;
|
||||
padding: 0 60px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
max-width: 1200px;
|
||||
padding: 0 50px;
|
||||
padding: 0 50px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
max-width: 1200px;
|
||||
padding: 0 40px;
|
||||
padding: 0 40px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: $breakpoint-md) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -775,47 +784,55 @@ body {
|
|||
padding: 80px 0 60px;
|
||||
overflow: hidden;
|
||||
min-height: 400px;
|
||||
margin-top: 0; /* 移除margin-top，让hero section紧贴顶部导航栏 */
|
||||
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 120px 0 100px;
|
||||
min-height: 500px;
|
||||
min-height: 600px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: $breakpoint-4k) {
|
||||
padding: 100px 0 80px;
|
||||
min-height: 450px;
|
||||
min-height: 500px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl}) {
|
||||
padding: 90px 0 70px;
|
||||
min-height: 400px;
|
||||
min-height: 450px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 70px 0 50px;
|
||||
min-height: 350px;
|
||||
min-height: 380px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: $breakpoint-md) {
|
||||
padding: 60px 0 40px;
|
||||
min-height: 300px;
|
||||
min-height: 320px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 50px 0 30px;
|
||||
min-height: 250px;
|
||||
min-height: 280px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 40px 0 20px;
|
||||
min-height: 200px;
|
||||
min-height: 240px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
|
|
@ -950,6 +967,10 @@ body {
|
|||
text-align: center;
|
||||
gap: $spacing-2xl;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
gap: $spacing-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
|
|
@ -973,6 +994,18 @@ body {
|
|||
animation: badgeFloat 4s ease-in-out infinite;
|
||||
box-shadow: 0 8px 32px rgba(79, 140, 239, 0.2);
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 16px;
|
||||
padding: $spacing-md $spacing-lg;
|
||||
margin-bottom: $spacing-xl;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 10px;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -998,41 +1031,42 @@ body {
|
|||
animation: titleGlow 3s ease-in-out infinite alternate;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 72px;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
font-size: 56px;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -1.2px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
font-size: 48px;
|
||||
margin-bottom: 14px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
font-size: 44px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 38px;
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
font-size: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 32px;
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: 30px;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 28px;
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 26px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
font-size: 24px;
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
font-size: 22px;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
|
@ -1050,9 +1084,19 @@ body {
|
|||
text-shadow: 0 2px 4px rgba(79, 140, 239, 0.3);
|
||||
animation: accentPulse 2s ease-in-out infinite;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1064,10 +1108,20 @@ body {
|
|||
font-family: $font-light;
|
||||
margin-bottom: 24px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 22px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1082,9 +1136,10 @@ body {
|
|||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
|
|
@ -1101,6 +1156,16 @@ body {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: $spacing-lg $spacing-xl;
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-sm $spacing-md;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -1129,6 +1194,16 @@ body {
|
|||
height: 56px;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1160,6 +1235,14 @@ body {
|
|||
font-family: $font-bold;
|
||||
color: white;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1169,6 +1252,14 @@ body {
|
|||
font-family: $font-medium;
|
||||
opacity: 0.9;
|
||||
line-height: 1.2;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1382,31 +1473,31 @@ body {
|
|||
position: relative;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: $spacing-3xl 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: $breakpoint-4k - 1px) {
|
||||
padding: $spacing-3xl 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
padding: $spacing-2xl 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: $spacing-2xl 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: $breakpoint-md) {
|
||||
padding: $spacing-xl 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-lg 0;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: $spacing-md 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -30,12 +30,34 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 响应式断点系统 */
|
||||
$breakpoint-xs: 375px;
|
||||
$breakpoint-sm: 480px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 1024px;
|
||||
$breakpoint-xl: 1440px;
|
||||
$breakpoint-2xl: 1920px;
|
||||
$breakpoint-4k: 2560px;
|
||||
|
||||
.pageMain {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -44,6 +66,15 @@
|
|||
@media (max-width: 850px) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
&__left {
|
||||
|
|
@ -51,6 +82,21 @@
|
|||
width: 520px;
|
||||
height: 370px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 800px;
|
||||
height: 570px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
width: 650px;
|
||||
height: 460px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
width: 600px;
|
||||
height: 425px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
width: 5.2rem;
|
||||
height: 3.7rem;
|
||||
|
|
@ -62,6 +108,14 @@
|
|||
margin: 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,15 +123,42 @@
|
|||
width: 300px;
|
||||
color: #272727;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
width: 80%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 85%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
margin-top: 50px;
|
||||
margin-top: 0; // 移除这里的50px，避免重复间距
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__text {
|
||||
font-size: 23px;
|
||||
|
|
@ -85,13 +166,42 @@
|
|||
line-height: 1.8;
|
||||
color: #636363;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 32px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
font-size: 28px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
font-size: 0.23rem;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,6 +217,31 @@
|
|||
font-size: 15px;
|
||||
line-height: 2;
|
||||
font-family: MiSans-Medium;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 0 20px;
|
||||
margin-top: 30px;
|
||||
font-size: 20px;
|
||||
line-height: 2.5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
padding: 0 18px;
|
||||
margin-top: 28px;
|
||||
font-size: 18px;
|
||||
line-height: 2.3;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
padding: 0 16px;
|
||||
margin-top: 25px;
|
||||
font-size: 17px;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
margin-top: 0.2rem;
|
||||
|
|
@ -114,6 +249,32 @@
|
|||
padding: 0 0.1rem;
|
||||
border-radius: 0.06rem;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
margin: 20px auto 0;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin: 18px auto 0;
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
margin: 15px auto 0;
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #1a1a1a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1101,12 +1101,12 @@
|
|||
}
|
||||
|
||||
.swiper-full {
|
||||
margin-top: 0.52rem;
|
||||
margin-top: 0; // 移除固定margin-top，让轮播图紧贴导航栏
|
||||
@media (max-width:1600px) {
|
||||
margin-top: 0.6rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
@media (max-width:1099px) {
|
||||
margin-top: 50px;
|
||||
margin-top: 0; // 移除这里的50px，避免重复间距
|
||||
}
|
||||
|
||||
/* 解决加载缓缓的问题 */
|
||||
|
|
|
|||
|
|
@ -5,15 +5,13 @@
|
|||
} from 'vue'
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n";
|
||||
} from "#imports";
|
||||
import zhContent from '~/pages/protocol/components/privacy-policy/zh-page.vue';
|
||||
import enContent from '~/pages/protocol/components/privacy-policy/en-page.vue';
|
||||
import { useLanguageStore } from '@/stores/language.js';
|
||||
const {
|
||||
t
|
||||
t, locale
|
||||
} = useI18n();
|
||||
const languageStore = useLanguageStore();
|
||||
const langIs = ref(languageStore.currentLocale)
|
||||
const langIs = ref(locale)
|
||||
useHead({
|
||||
title: t('foot.privacy-policy'),
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,11 +10,9 @@
|
|||
import {
|
||||
GetProductDetailApi
|
||||
} from "@/service/api.js";
|
||||
// 语言判断
|
||||
import { useLanguageStore } from "@/stores/language.js";
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n";
|
||||
} from "#imports";
|
||||
import topBar from "@/components/top/title-bar.vue";
|
||||
import footBar from "@/components/bottom/foot-bar.vue";
|
||||
// // 折叠面板
|
||||
|
|
@ -25,11 +23,10 @@
|
|||
useRoute
|
||||
} from '#imports';
|
||||
const {
|
||||
t
|
||||
t, locale
|
||||
} = useI18n();
|
||||
const route = useRoute();
|
||||
const languageStore = useLanguageStore();
|
||||
const langIs = ref(languageStore.currentLocale);
|
||||
const langIs = ref(locale);
|
||||
//监听返回顶部
|
||||
let proId = ref("");
|
||||
let proName = ref("");
|
||||
|
|
@ -224,17 +221,46 @@
|
|||
font-family: MiSans-Light;
|
||||
}
|
||||
|
||||
/* 响应式断点系统 */
|
||||
$breakpoint-xs: 375px;
|
||||
$breakpoint-sm: 480px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 1024px;
|
||||
$breakpoint-xl: 1440px;
|
||||
$breakpoint-2xl: 1920px;
|
||||
$breakpoint-4k: 2560px;
|
||||
|
||||
$tone-color: #fff; //字体主色调
|
||||
|
||||
@mixin detailWidth {
|
||||
width: 1200px;
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 1800px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
width: 1600px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
width: 1400px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
width: 90%;
|
||||
@media (max-width: $breakpoint-md) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -245,20 +271,91 @@
|
|||
|
||||
.detail-banner {
|
||||
width: 100%;
|
||||
color: $tone-color;
|
||||
height: 10.8rem;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
height: 12.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
height: 11.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
&__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);
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 0.8rem;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
font-size: 0.7rem;
|
||||
top: 1.8rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
font-size: 0.5rem;
|
||||
top: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__avater {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
padding-top: 1.7rem;
|
||||
padding-top: 2rem;
|
||||
height: 12.8rem;
|
||||
&__title {
|
||||
font-size: 0.8rem;
|
||||
top: 3.8rem;
|
||||
}
|
||||
&__title-2 {
|
||||
font-size: 0.8rem;
|
||||
top: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding-top: 2rem;
|
||||
height: 10rem;
|
||||
&__title {
|
||||
font-size: 0.7rem;
|
||||
top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding-top: 1.5rem;
|
||||
height: 8rem;
|
||||
&__title {
|
||||
font-size: 0.6rem;
|
||||
top: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 方框介绍
|
||||
|
|
@ -266,11 +363,33 @@
|
|||
padding: 2rem 0 0rem;
|
||||
@include detailWidth;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 3rem 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
padding: 2.5rem 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 2rem 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
padding: 2.5rem 0 0;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 2rem 0 0;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 1.5rem 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
color: $tone-color;
|
||||
|
|
@ -286,19 +405,55 @@
|
|||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
&__box {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 150px 0 70px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 200px 0 100px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
padding: 180px 0 90px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 120px 0 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
padding: 3rem 0 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 2.5rem 0 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 2rem 0 2.5rem;
|
||||
}
|
||||
|
||||
@include detailWidth;
|
||||
}
|
||||
}
|
||||
|
|
@ -307,6 +462,14 @@
|
|||
.switchboard {
|
||||
@include detailWidth;
|
||||
margin: 1.5rem auto;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
margin: 2.5rem auto;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
//端口介绍
|
||||
|
|
@ -314,11 +477,36 @@
|
|||
padding: 2.5rem 0;
|
||||
margin: 0.3rem 0 2rem;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 4rem 0;
|
||||
margin: 0.5rem 0 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
padding: 3.5rem 0;
|
||||
margin: 0.4rem 0 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 2rem 0;
|
||||
margin: 0.2rem 0 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
padding: 3rem 0 0;
|
||||
margin: 2rem auto 5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 2.5rem 0 0;
|
||||
margin: 1.5rem auto 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 2rem 0 0;
|
||||
margin: 1rem auto 3rem;
|
||||
}
|
||||
|
||||
&__box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -336,10 +524,30 @@
|
|||
&__box {
|
||||
margin: 3rem auto 0;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
margin: 4.5rem auto 0;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
margin: 4rem auto 0;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
margin: 2.5rem auto 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
margin: 4rem auto 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin: 3rem auto 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
margin: 2.5rem auto 2rem;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
@include detailWidth;
|
||||
}
|
||||
|
|
@ -351,10 +559,32 @@
|
|||
@include detailWidth;
|
||||
margin: 3rem auto 2rem;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
margin: 4.5rem auto 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
margin: 4rem auto 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
margin: 2.5rem auto 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
width: 90%;
|
||||
margin: 3rem auto 5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 95%;
|
||||
margin: 2.5rem auto 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
width: 98%;
|
||||
margin: 2rem auto 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -364,9 +594,29 @@
|
|||
@include detailWidth;
|
||||
padding-bottom: 3rem;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
width: 100%;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -427,10 +427,45 @@ onActivated(() => {
|
|||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 响应式断点系统 */
|
||||
$breakpoint-xs: 375px;
|
||||
$breakpoint-sm: 480px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 1024px;
|
||||
$breakpoint-xl: 1440px;
|
||||
$breakpoint-2xl: 1920px;
|
||||
$breakpoint-4k: 2560px;
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
margin-top: 0; /* 移除margin-top，让banner紧贴顶部导航栏 */
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
height: 500px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
height: 400px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
height: 350px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
height: 250px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
height: 200px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -450,40 +485,40 @@ onActivated(() => {
|
|||
padding: 0 20px;
|
||||
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
max-width: 1800px;
|
||||
padding: 0 60px;
|
||||
padding: 0 60px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1200px;
|
||||
padding: 0 50px;
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
max-width: 1200px; /* 修正：应该是1200px，不是1400px */
|
||||
padding: 0 50px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1200px;
|
||||
padding: 0 40px;
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
max-width: 1200px; /* 修正：应该是1200px，不是1400px */
|
||||
padding: 0 40px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: $breakpoint-md) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -492,6 +527,14 @@ onActivated(() => {
|
|||
color: #666;
|
||||
font-size: 14px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon-location {
|
||||
margin-right: 5px;
|
||||
color: #999;
|
||||
|
|
@ -513,8 +556,6 @@ onActivated(() => {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.main-content {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
|
|
@ -524,87 +565,87 @@ onActivated(() => {
|
|||
gap: 20px;
|
||||
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
max-width: 1800px;
|
||||
padding: 40px 60px;
|
||||
gap: 40px;
|
||||
padding: 60px 60px; /* 与顶部导航栏保持一致 */
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
max-width: 1200px;
|
||||
padding: 30px 50px;
|
||||
gap: 30px;
|
||||
padding: 50px 50px; /* 与顶部导航栏保持一致 */
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
max-width: 1200px;
|
||||
padding: 25px 40px;
|
||||
gap: 25px;
|
||||
padding: 40px 40px; /* 与顶部导航栏保持一致 */
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: 1024px) {
|
||||
padding: 20px 30px;
|
||||
gap: 20px;
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 30px 30px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: $breakpoint-md) {
|
||||
flex-direction: column;
|
||||
padding: 15px 20px;
|
||||
padding: 25px 20px;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 20px 16px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 12px 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 10px 12px;
|
||||
gap: 12px;
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 15px 12px;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
width: 200px; /* 从240px减小到200px */
|
||||
flex-shrink: 0;
|
||||
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
width: 320px;
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 320px; /* 从400px减小到320px */
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
width: 260px;
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
width: 260px; /* 从320px减小到260px */
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
width: 240px;
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
width: 220px; /* 从280px减小到220px */
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: 1024px) {
|
||||
width: 220px;
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
width: 220px; /* 从260px减小到220px */
|
||||
}
|
||||
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: $breakpoint-md) {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -614,6 +655,15 @@ onActivated(() => {
|
|||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.category-group {
|
||||
.category-header {
|
||||
background: #4f8cef;
|
||||
|
|
@ -624,9 +674,29 @@ onActivated(() => {
|
|||
align-items: center;
|
||||
font-weight: 500;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 25px 30px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 20px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -641,6 +711,18 @@ onActivated(() => {
|
|||
border-top: 6px solid white;
|
||||
transition: transform 0.3s;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 8px solid white;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 5px solid white;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
|
@ -662,6 +744,16 @@ onActivated(() => {
|
|||
color: #333;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 18px 30px 18px 60px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 10px 16px 10px 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -669,6 +761,20 @@ onActivated(() => {
|
|||
border-bottom: 4px solid transparent;
|
||||
border-left: 6px solid #666;
|
||||
margin-right: 10px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 7px solid #666;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
border-left: 5px solid #666;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -695,6 +801,18 @@ onActivated(() => {
|
|||
border-top: 5px solid #666;
|
||||
transition: transform 0.3s;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 6px solid #666;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
border-top: 4px solid #666;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
|
@ -709,6 +827,16 @@ onActivated(() => {
|
|||
font-size: 14px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 15px 30px 15px 90px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 8px 16px 8px 48px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #e9ecef;
|
||||
color: #4f8cef;
|
||||
|
|
@ -730,6 +858,10 @@ onActivated(() => {
|
|||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.sidebar-product-item {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
|
@ -737,6 +869,14 @@ onActivated(() => {
|
|||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
|
@ -750,6 +890,18 @@ onActivated(() => {
|
|||
height: 60px;
|
||||
margin-right: 15px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 60px;
|
||||
height: 45px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
|
|
@ -768,12 +920,30 @@ onActivated(() => {
|
|||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -790,12 +960,32 @@ onActivated(() => {
|
|||
margin-bottom: 15px;
|
||||
border-bottom: 3px solid #4f8cef;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 25px 30px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 4px solid #4f8cef;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-medium);
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -806,51 +996,51 @@ onActivated(() => {
|
|||
margin-bottom: 30px;
|
||||
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 40px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 35px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 25px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: $breakpoint-md) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 22px;
|
||||
margin-bottom: 35px;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: 1024px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: 480px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
|
|
@ -861,10 +1051,24 @@ onActivated(() => {
|
|||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
|
@ -877,10 +1081,22 @@ onActivated(() => {
|
|||
|
||||
.product-image-wrapper {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
height: 160px; /* 从200px减小到160px */
|
||||
overflow: hidden;
|
||||
background: #f8f9fa;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
height: 240px; /* 从300px减小到240px */
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
height: 200px; /* 从250px减小到200px */
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
height: 140px; /* 从180px减小到140px */
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 85%;
|
||||
height: 85%;
|
||||
|
|
@ -892,22 +1108,50 @@ onActivated(() => {
|
|||
}
|
||||
|
||||
.product-info {
|
||||
padding: 20px;
|
||||
padding: 16px; /* 从20px减小到16px */
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 24px; /* 从30px减小到24px */
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 14px; /* 从16px减小到14px */
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 4px; /* 从6px减小到4px */
|
||||
font-family: var(--font-medium);
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 22px;
|
||||
margin-bottom: 8px; /* 从10px减小到8px */
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 14px;
|
||||
margin-bottom: 3px; /* 从5px减小到3px */
|
||||
}
|
||||
}
|
||||
|
||||
.product-subtitle {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 8px; /* 从12px减小到8px */
|
||||
line-height: 1.3;
|
||||
font-family: var(--font-regular);
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px; /* 从18px减小到12px */
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px; /* 从10px减小到6px */
|
||||
}
|
||||
}
|
||||
|
||||
.product-action {
|
||||
|
|
@ -921,6 +1165,18 @@ onActivated(() => {
|
|||
transition: all 0.3s ease;
|
||||
font-size: 13px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 10px 24px;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 5px 12px;
|
||||
border-radius: 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #4f8cef;
|
||||
color: white;
|
||||
|
|
@ -937,6 +1193,14 @@ onActivated(() => {
|
|||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
|
|
@ -946,6 +1210,17 @@ onActivated(() => {
|
|||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
padding: 12px 18px;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #4f8cef;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -13,15 +13,13 @@
|
|||
import {
|
||||
GetProductDetailApi
|
||||
} from "@/service/api.js";
|
||||
import { useLanguageStore } from "@/stores/language.js";
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n";
|
||||
} from "#imports";
|
||||
const {
|
||||
t
|
||||
t, locale
|
||||
} = useI18n();
|
||||
const languageStore = useLanguageStore();
|
||||
const langIs = ref(languageStore.currentLocale);
|
||||
const langIs = ref(locale);
|
||||
import {
|
||||
useRoute
|
||||
} from '#imports';
|
||||
|
|
|
|||
|
|
@ -8,20 +8,18 @@
|
|||
} from "#imports";
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n";
|
||||
import { useLanguageStore } from "@/stores/language.js";
|
||||
} from "#imports";
|
||||
import { useNavigation } from "@/composables/useNavigation.js";
|
||||
|
||||
const {
|
||||
t
|
||||
t, locale
|
||||
} = useI18n();
|
||||
|
||||
useHead({
|
||||
title: t('contact.thank-message'),
|
||||
})
|
||||
|
||||
const languageStore = useLanguageStore();
|
||||
const langIs = ref(languageStore.currentLocale)
|
||||
const langIs = ref(locale)
|
||||
|
||||
const route = useRoute();
|
||||
const { goHome } = useNavigation();
|
||||
|
|
|
|||
|
|
@ -14,5 +14,7 @@ export default defineNuxtPlugin(() => {
|
|||
} else {
|
||||
console.log('DOM 已加载，语言插件就绪')
|
||||
}
|
||||
|
||||
console.log('语言插件就绪')
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
export const useLanguageStore = defineStore('language', () => {
|
||||
// 当前语言 - 与 Nuxt i18n 同步
|
||||
const currentLocale = ref('en')
|
||||
|
||||
// 可用语言列表
|
||||
const availableLocales = [
|
||||
{ code: 'en', name: 'English', nativeName: 'English' },
|
||||
{ code: 'cn', name: '简体中文', nativeName: '简体中文' }
|
||||
]
|
||||
|
||||
// 计算属性
|
||||
const isChinese = computed(() => currentLocale.value === 'cn')
|
||||
const isEnglish = computed(() => currentLocale.value === 'en')
|
||||
|
||||
// 设置语言 - 简化逻辑，主要依赖 Nuxt i18n
|
||||
const setLocale = (locale) => {
|
||||
if (availableLocales.some(lang => lang.code === locale)) {
|
||||
currentLocale.value = locale
|
||||
console.log('Language store updated:', locale)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化语言 - 简化初始化逻辑
|
||||
const initLocale = () => {
|
||||
if (process.client) {
|
||||
try {
|
||||
// 从 cookie 获取语言设置（Nuxt i18n 自动管理）
|
||||
const cookieLanguage = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('i18n_redirected='))
|
||||
?.split('=')[1]
|
||||
|
||||
if (cookieLanguage && availableLocales.some(lang => lang.code === cookieLanguage)) {
|
||||
currentLocale.value = cookieLanguage
|
||||
console.log('Language initialized from cookie:', cookieLanguage)
|
||||
return
|
||||
}
|
||||
|
||||
// 如果没有 cookie，使用默认语言
|
||||
currentLocale.value = 'en'
|
||||
console.log('Using default language: en')
|
||||
} catch (error) {
|
||||
console.warn('Language initialization failed:', error)
|
||||
currentLocale.value = 'en'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 切换语言 - 简化切换逻辑
|
||||
const toggleLanguage = () => {
|
||||
const newLocale = currentLocale.value === 'en' ? 'cn' : 'en'
|
||||
setLocale(newLocale)
|
||||
return newLocale
|
||||
}
|
||||
|
||||
return {
|
||||
currentLocale: computed(() => currentLocale.value),
|
||||
availableLocales,
|
||||
isChinese,
|
||||
isEnglish,
|
||||
setLocale,
|
||||
initLocale,
|
||||
toggleLanguage
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue