Compare commits
4 Commits
| Author | SHA1 | Date |
|---|---|---|
 linear
|
cc7500ca95 | |
|
linear
|
ffb5e9cc54 | |
|
linear
|
15cdaee012 | |
|
linear
|
d5641d3938 |
|
|
@ -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: {
|
||||
'@': '~/',
|
||||
},
|
||||
|
|
@ -49,28 +51,29 @@ export default defineNuxtConfig({
|
|||
{ src: '~/plugins/aos-client.js', mode: 'client' },
|
||||
'~/plugins/vue-dompurify-html.js',
|
||||
'~/plugins/image-path.js',
|
||||
{ src: '~/plugins/static-data.client.js', mode: 'client' }
|
||||
{ src: '~/plugins/static-data.client.js', mode: 'client' },
|
||||
{ src: '~/plugins/language-init.client.js', mode: 'client' }
|
||||
],
|
||||
devServer: {
|
||||
port: 1110,
|
||||
port: 1100,
|
||||
},
|
||||
modules: ['@nuxtjs/i18n', '@pinia/nuxt'],
|
||||
i18n: {
|
||||
locales: [
|
||||
{ code: 'en', name: 'English' },
|
||||
{ code: 'cn', name: '简体中文' }
|
||||
{ code: 'en', name: 'English', file: 'en.json' },
|
||||
{ code: 'cn', name: '简体中文', file: 'cn.json' }
|
||||
],
|
||||
defaultLocale: 'en',
|
||||
detectBrowserLanguage: {
|
||||
useCookie: true,
|
||||
cookieKey: 'i18n_redirected',
|
||||
redirectOn: 'root',
|
||||
alwaysRedirect: false,
|
||||
fallbackLocale: 'en',
|
||||
cookieSecure: false
|
||||
alwaysRedirect: true,
|
||||
fallbackLocale: 'en'
|
||||
},
|
||||
strategy: 'prefix_except_default',
|
||||
vueI18n: '~/i18n.config.ts'
|
||||
langDir: 'locale',
|
||||
debug: true
|
||||
},
|
||||
// Axios配置
|
||||
runtimeConfig: {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"dev": "nuxt dev --host 0.0.0.0 --port 1110",
|
||||
"dev:custom": "node scripts/dev.js",
|
||||
"generate": "nuxt generate",
|
||||
"generate:static": "node scripts/generate-static.js && nuxi generate",
|
||||
"preview": "nuxt preview",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,979 @@
|
|||
@charset "UTF-8";
|
||||
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, h6, i, b, textarea, button, input, select, figure, figcaption {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
font-family: MiSans-Normal;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body:hover, div:hover, span:hover, header:hover, footer:hover, nav:hover, section:hover, aside:hover, article:hover, ul:hover, dl:hover, dt:hover, dd:hover, li:hover, a:hover, p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, i:hover, b:hover, textarea:hover, button:hover, input:hover, select:hover, figure:hover, figcaption:hover {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
-moz-outline: none;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: transparent;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.75em;
|
||||
width: 100%;
|
||||
border-top: solid 1px #ddd;
|
||||
border-left: solid 1px #ddd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #f9f9f9;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ddd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="file"],
|
||||
button {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: calc(100 * 100vw / 1920) !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: MiSans-Regular;
|
||||
user-select: text;
|
||||
font-size: 0.16rem;
|
||||
color: #3f4552;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* **************滚动条*****************/
|
||||
html::-webkit-scrollbar {
|
||||
overflow: hidden;
|
||||
/* 高宽分别对应纵横向滚动条 */
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
html::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar-thumb {
|
||||
background: #262729;
|
||||
}
|
||||
|
||||
image {
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.define-topBar__components {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.autowidth {
|
||||
width: 18rem;
|
||||
margin: auto;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
@media (max-width: 1366px) {
|
||||
.autowidth {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.animationDH {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animateLt {
|
||||
animation: 1s dh_left linear both;
|
||||
-webkit-animation: 1s dh_left linear both;
|
||||
}
|
||||
|
||||
.animateRt {
|
||||
animation: 1s dh_right linear both;
|
||||
-webkit-animation: 1s dh_right linear both;
|
||||
}
|
||||
|
||||
.animateBt {
|
||||
animation: 1s dh_buttom linear both;
|
||||
-webkit-animation: 1s dh_buttom linear both;
|
||||
}
|
||||
|
||||
.dhLeft {
|
||||
-webkit-opacity: 0;
|
||||
transform: translate(75px, 0);
|
||||
-webkit-transform: translate(75px, 0);
|
||||
transition: 1s;
|
||||
-webkit-transition: 1s;
|
||||
}
|
||||
|
||||
.dhRight {
|
||||
-webkit-opacity: 0;
|
||||
transform: translate(-45px, 0);
|
||||
-webkit-transform: translate(-45px, 0);
|
||||
transition: 1s;
|
||||
-webkit-transition: 1s;
|
||||
}
|
||||
|
||||
.dhTop {
|
||||
transform: translate(0, 45px);
|
||||
-webkit-transform: translate(0, 45px);
|
||||
transition: transform 1s;
|
||||
-webkit-transition: transform 1s;
|
||||
}
|
||||
|
||||
.dhBottom {
|
||||
-webkit-opacity: 0;
|
||||
transform: translate(0, -45px);
|
||||
-webkit-transform: translate(0, -45px);
|
||||
transition: 1s;
|
||||
-webkit-transition: 1s;
|
||||
}
|
||||
|
||||
.dhyc1 {
|
||||
transition-delay: 0.25s;
|
||||
-webkit-transition-delay: 0.25s;
|
||||
}
|
||||
|
||||
.dhyc2 {
|
||||
transition-delay: 0.5s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
}
|
||||
|
||||
.dhyc3 {
|
||||
transition-delay: 0.75s;
|
||||
-webkit-transition-delay: 0.75s;
|
||||
}
|
||||
|
||||
.dhyc4 {
|
||||
transition-delay: 1s;
|
||||
-webkit-transition-delay: 1s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes dh_right {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(60px, 0%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dh_right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(60px, 0%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dh_left {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(-60px, 0%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dh_left {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-60px, 0%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes dh_buttom {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, 60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dh_buttom {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(0, 60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/*页面banner部分*/
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
height: 5.5rem;
|
||||
background-size: cover !important;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-pack: center;
|
||||
justify-content: center;
|
||||
min-height: 230px;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1099px) {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.banner {
|
||||
height: 7.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.banner {
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.banner__box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
animation: 1s dh_buttom linear both;
|
||||
-webkit-animation: 1s dh_buttom linear both;
|
||||
}
|
||||
|
||||
.banner__box__title {
|
||||
font-size: 0.36rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner__box__subtitle {
|
||||
font-size: 0.2rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (min-width: 751px) and (max-width: 1100px) {
|
||||
.banner__box__title {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
.banner__box__subtitle {
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.banner__box__title {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.banner__box__subtitle {
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.banner__box__title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.banner__box__subtitle {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pageMain__breads {
|
||||
color: #666;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.pageMain__breads__box {
|
||||
width: 12rem;
|
||||
color: #666;
|
||||
line-height: 4;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pageMain__breads__box__icon__avater {
|
||||
width: 0.17rem;
|
||||
height: 0.17rem;
|
||||
margin-bottom: 0.03rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.pageMain__breads__box {
|
||||
width: 15rem;
|
||||
font-size: 13.5px;
|
||||
line-height: 3.2;
|
||||
}
|
||||
.pageMain__breads__box__icon__avater {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__breads__box a {
|
||||
font-family: MiSans-Medium;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
.pageMain__breads__box a:hover {
|
||||
color: #0072ff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.pageMain__breads__box {
|
||||
font-size: 13px;
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.pageMain__breads__box {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.pageMain__breads__box__icon__avater {
|
||||
width: 0.68rem;
|
||||
height: 0.68rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.pageMain__breads__box {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__line {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding: 0.1rem 0 0.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pageMain__line {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__line__item {
|
||||
margin: 0 1rem;
|
||||
position: relative;
|
||||
padding: 0.1rem 0;
|
||||
text-align: center;
|
||||
font-size: 0.18rem;
|
||||
font-family: MiSans-Normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.pageMain__line__item {
|
||||
font-size: 15.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 501px) and (max-width: 1100px) {
|
||||
.pageMain__line__item {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.pageMain__line__item {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.pageMain__line__item {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__line__item::before {
|
||||
position: absolute;
|
||||
left: 15%;
|
||||
content: "";
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
border-radius: 5px;
|
||||
background: #0072ff;
|
||||
width: 0;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.pageMain__line__item::before {
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain__line__item:hover::before {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.pageMain__line--on {
|
||||
color: #0072ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pageMain__line--on::before {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.pageMain__buttom-line {
|
||||
padding: 0.36 0 0.7rem;
|
||||
}
|
||||
|
||||
.sticky-page-layout {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.nav-sticky {
|
||||
line-height: 3;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.nav-sticky {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.nav-sticky {
|
||||
font-size: 0.42rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.nav-sticky {
|
||||
line-height: 3.5;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.nav-sticky {
|
||||
line-height: 3.5;
|
||||
font-size: 0.63rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
transition: width 0.3s;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
|
||||
justify-content: space-between;
|
||||
font-family: MiSans-Regular;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky__center {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__left {
|
||||
font-size: 0.17rem;
|
||||
font-family: MiSans-Bold;
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.nav-sticky__center__left {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky__center__left {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.nav-sticky__center__left {
|
||||
font-size: 0.42rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.nav-sticky__center__left {
|
||||
line-height: 3.5;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.nav-sticky__center__left {
|
||||
line-height: 3.5;
|
||||
font-size: 0.63rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky__center__left {
|
||||
margin-left: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__right {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
line-height: 3;
|
||||
font-size: 0.15rem;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.nav-sticky__center__right {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky__center__right {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.nav-sticky__center__right {
|
||||
font-size: 0.42rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.nav-sticky__center__right {
|
||||
line-height: 3.5;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.nav-sticky__center__right {
|
||||
line-height: 3.5;
|
||||
font-size: 0.63rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky__center__right {
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__item {
|
||||
margin: 0 0.2rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.nav-sticky__center__right__item {
|
||||
margin: 0 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__item:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-sticky__center__right--Active {
|
||||
opacity: 1;
|
||||
border-bottom: 0.01rem solid #fff;
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__dropdown {
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
line-height: 3;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
font-size: 0.42rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
line-height: 3.5;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.nav-sticky__center__right__dropdown__up {
|
||||
line-height: 3.5;
|
||||
font-size: 0.63rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__dropdown__up .arrow-down {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__dropdown__menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -50%;
|
||||
background-color: #222;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0 0.04rem 0.1rem 0.02rem rgba(0, 0, 0, 0.08);
|
||||
z-index: 1;
|
||||
width: 150%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__dropdown__menu__item {
|
||||
color: #919191;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-sticky__center__right__dropdown__menu__item--Active {
|
||||
color: #0072ff;
|
||||
}
|
||||
|
||||
.nav-sticky--active {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
background-color: rgba(3, 6, 11, 0.4);
|
||||
border-bottom: 1px solid rgba(236, 234, 234, 0.2);
|
||||
}
|
||||
|
||||
.nav-sticky--active .nav-sticky__center {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-banner {
|
||||
width: 100%;
|
||||
height: 10.8rem;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detail-banner__title {
|
||||
font-family: MiSans-Medium;
|
||||
position: absolute;
|
||||
font-size: 0.55rem;
|
||||
top: 1.5rem;
|
||||
left: 50%;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.detail-banner__avater {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
.detail-banner {
|
||||
padding-top: 2rem;
|
||||
height: 12.8rem;
|
||||
}
|
||||
.detail-banner__title {
|
||||
font-size: 0.8rem;
|
||||
top: 3.8rem;
|
||||
}
|
||||
.detail-banner__title-2 {
|
||||
font-size: 0.8rem;
|
||||
top: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
.load-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 10002;
|
||||
}
|
||||
|
||||
.load-mask .spinner {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
margin-top: 20vh;
|
||||
}
|
||||
|
||||
.load-mask .spinner .spinner__item {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #aeadba;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
animation: bouncedelay 1.4s infinite ease-in-out;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.load-mask .spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.load-mask .spinner .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes bouncedelay {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.load-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 35vh;
|
||||
}
|
||||
|
||||
.load-loading__box {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
color: #aeadba;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.load-loading__box__up {
|
||||
width: 55px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.load-loading__box__up__avater {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.load-loading__box__text {
|
||||
font-size: 16px;
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.load-loading__box__up {
|
||||
width: 47px;
|
||||
}
|
||||
.load-loading__box__text {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.load-loading__box {
|
||||
width: 2rem;
|
||||
height: 1rem;
|
||||
}
|
||||
.load-loading__box__up {
|
||||
width: 0.55rem;
|
||||
}
|
||||
.load-loading__box__text {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="is-animating-"] {
|
||||
transform: translateY(11.71rpx);
|
||||
opacity: 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
@ -551,7 +551,7 @@ max-width: 100%
|
|||
width: 100%;
|
||||
|
||||
&__center {
|
||||
width: 9.8rem;
|
||||
width: 1200px;
|
||||
@media (max-width: 1200px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4350424 */
|
||||
src: url('/static/font/iconfont.woff2?t=1716543193903') format('woff2'),
|
||||
url('/static/font/iconfont.woff?t=1716543193903') format('woff'),
|
||||
url('/static/font/iconfont.ttf?t=1716543193903') format('truetype');
|
||||
font-family: "iconfont"; /* Project id 5007036 */
|
||||
src: url('iconfont.woff2?t=1756173766338') format('woff2'),
|
||||
url('iconfont.woff?t=1756173766338') format('woff'),
|
||||
url('iconfont.ttf?t=1756173766338') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -13,56 +13,124 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi:before {
|
||||
content: "\e668";
|
||||
.icon-icon_team:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.icon-syd-logo:before {
|
||||
content: "\e602";
|
||||
.icon-icon_global:before {
|
||||
content: "\ec17";
|
||||
}
|
||||
|
||||
.icon-top:before {
|
||||
content: "\e67e";
|
||||
.icon-icon_building:before {
|
||||
content: "\e6ed";
|
||||
}
|
||||
|
||||
.icon-shachu-xue:before {
|
||||
content: "\e638";
|
||||
.icon-icon-factory:before {
|
||||
content: "\e635";
|
||||
}
|
||||
|
||||
.icon-weibiaoti1:before {
|
||||
content: "\e634";
|
||||
.icon-icon-experiment:before {
|
||||
content: "\e7c6";
|
||||
}
|
||||
|
||||
.icon-xiazai:before {
|
||||
content: "\e682";
|
||||
.icon-icon-time:before {
|
||||
content: "\e683";
|
||||
}
|
||||
|
||||
.icon-xiajiantou:before {
|
||||
content: "\e610";
|
||||
.icon-icon-chart-line:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.icon-shangjiantou-copy:before {
|
||||
content: "\e651";
|
||||
.icon-icon_award:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.icon-jiazhiguan:before {
|
||||
content: "\e646";
|
||||
.icon-icon-star:before {
|
||||
content: "\e636";
|
||||
}
|
||||
|
||||
.icon-rencailinian:before {
|
||||
content: "\e667";
|
||||
.icon-icon_check-circle:before {
|
||||
content: "\e7bf";
|
||||
}
|
||||
|
||||
.icon-msgw_icon_shiming:before {
|
||||
content: "\e60f";
|
||||
.icon-jiantou_xiangyou:before {
|
||||
content: "\eb08";
|
||||
}
|
||||
|
||||
.icon-qiyeyuanjing:before {
|
||||
content: "\e671";
|
||||
.icon-youjian_o:before {
|
||||
content: "\ebca";
|
||||
}
|
||||
|
||||
.icon-home:before {
|
||||
content: "\e62b";
|
||||
.icon-dianhua:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.icon-earch:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-xiangyou:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.icon-language:before {
|
||||
content: "\e6a9";
|
||||
}
|
||||
|
||||
.icon-shanchu:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-shanchu11:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-zuixinzixun-03:before {
|
||||
content: "\ea2c";
|
||||
}
|
||||
|
||||
.icon-shangjiantou:before {
|
||||
content: "\eb6d";
|
||||
}
|
||||
|
||||
.icon-zuojiantou:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.icon-shezhi:before {
|
||||
content: "\e892";
|
||||
}
|
||||
|
||||
.icon-youjiantou:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.icon-kefu:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.icon-arrow-right:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.icon-left:before {
|
||||
content: "\e684";
|
||||
}
|
||||
|
||||
.icon-X:before {
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e676";
|
||||
}
|
||||
|
||||
.icon-home1:before {
|
||||
content: "\e92d";
|
||||
}
|
||||
|
||||
.icon-zhidingtop:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-jiantou_qiehuanyou:before {
|
||||
|
|
@ -97,10 +165,6 @@
|
|||
content: "\e672";
|
||||
}
|
||||
|
||||
.icon-duoyuyan:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.icon-sousuo:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
|
@ -157,83 +221,91 @@
|
|||
content: "\e62f";
|
||||
}
|
||||
|
||||
.icon-zhidingtop:before {
|
||||
content: "\e62d";
|
||||
.icon-home:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.icon-home1:before {
|
||||
content: "\e92d";
|
||||
.icon-jiazhiguan:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e676";
|
||||
.icon-rencailinian:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.icon-X:before {
|
||||
content: "\e607";
|
||||
.icon-msgw_icon_shiming:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.icon-arrow-right:before {
|
||||
content: "\e666";
|
||||
.icon-qiyeyuanjing:before {
|
||||
content: "\e671";
|
||||
}
|
||||
|
||||
.icon-left:before {
|
||||
content: "\e684";
|
||||
.icon-xiajiantou:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-zuojiantou:before {
|
||||
content: "\e65a";
|
||||
.icon-shangjiantou-copy:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.icon-shezhi:before {
|
||||
content: "\e892";
|
||||
.icon-weibiaoti1:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.icon-youjiantou:before {
|
||||
content: "\e678";
|
||||
.icon-xiazai:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.icon-kefu:before {
|
||||
content: "\e665";
|
||||
.icon-shachu-xue:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.icon-shangjiantou:before {
|
||||
content: "\eb6d";
|
||||
.icon-top:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
|
||||
.icon-zuixinzixun-03:before {
|
||||
content: "\ea2c";
|
||||
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.icon-shanchu11:before {
|
||||
content: "\e62e";
|
||||
.icon-youjian1:before {
|
||||
content: "\e6f5";
|
||||
}
|
||||
|
||||
.icon-shanchu:before {
|
||||
content: "\e606";
|
||||
.icon-fanhuidingbu:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.icon-language:before {
|
||||
content: "\e6a9";
|
||||
.icon-zanwushuju:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-jiantou_xiangyou:before {
|
||||
content: "\eb08";
|
||||
.icon-zanwushuju1:before {
|
||||
content: "\e618";
|
||||
}
|
||||
|
||||
.icon-youjian_o:before {
|
||||
content: "\ebca";
|
||||
.icon-zhengzaijiazai:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.icon-dianhua:before {
|
||||
content: "\e66b";
|
||||
.icon-jiazhiguan1:before {
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.icon-earch:before {
|
||||
content: "\e617";
|
||||
.icon-msgw_icon_shiming-03:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-xiangyou:before {
|
||||
content: "\e656";
|
||||
.icon-qiyeyuanjing-04:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-a-rencailinian1-02:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.icon-wancheng:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,527 @@
|
|||
{
|
||||
"id": "5007036",
|
||||
"name": "水平面尼日利亚官网",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "5869238",
|
||||
"name": "icon_team",
|
||||
"font_class": "icon_team",
|
||||
"unicode": "e647",
|
||||
"unicode_decimal": 58951
|
||||
},
|
||||
{
|
||||
"icon_id": "12410550",
|
||||
"name": "icon_global",
|
||||
"font_class": "icon_global",
|
||||
"unicode": "ec17",
|
||||
"unicode_decimal": 60439
|
||||
},
|
||||
{
|
||||
"icon_id": "13770691",
|
||||
"name": "icon_building",
|
||||
"font_class": "icon_building",
|
||||
"unicode": "e6ed",
|
||||
"unicode_decimal": 59117
|
||||
},
|
||||
{
|
||||
"icon_id": "20884464",
|
||||
"name": "icon-factory",
|
||||
"font_class": "icon-factory",
|
||||
"unicode": "e635",
|
||||
"unicode_decimal": 58933
|
||||
},
|
||||
{
|
||||
"icon_id": "25219153",
|
||||
"name": "icon-experiment",
|
||||
"font_class": "icon-experiment",
|
||||
"unicode": "e7c6",
|
||||
"unicode_decimal": 59334
|
||||
},
|
||||
{
|
||||
"icon_id": "29306670",
|
||||
"name": "icon-time",
|
||||
"font_class": "icon-time",
|
||||
"unicode": "e683",
|
||||
"unicode_decimal": 59011
|
||||
},
|
||||
{
|
||||
"icon_id": "32809261",
|
||||
"name": "icon-chart-line",
|
||||
"font_class": "icon-chart-line",
|
||||
"unicode": "e690",
|
||||
"unicode_decimal": 59024
|
||||
},
|
||||
{
|
||||
"icon_id": "34666572",
|
||||
"name": "icon_award",
|
||||
"font_class": "icon_award",
|
||||
"unicode": "e615",
|
||||
"unicode_decimal": 58901
|
||||
},
|
||||
{
|
||||
"icon_id": "37124991",
|
||||
"name": "icon-star",
|
||||
"font_class": "icon-star",
|
||||
"unicode": "e636",
|
||||
"unicode_decimal": 58934
|
||||
},
|
||||
{
|
||||
"icon_id": "40585518",
|
||||
"name": "icon_check-circle",
|
||||
"font_class": "icon_check-circle",
|
||||
"unicode": "e7bf",
|
||||
"unicode_decimal": 59327
|
||||
},
|
||||
{
|
||||
"icon_id": "5387583",
|
||||
"name": "箭头_向右",
|
||||
"font_class": "jiantou_xiangyou",
|
||||
"unicode": "eb08",
|
||||
"unicode_decimal": 60168
|
||||
},
|
||||
{
|
||||
"icon_id": "5388066",
|
||||
"name": "邮件_o",
|
||||
"font_class": "youjian_o",
|
||||
"unicode": "ebca",
|
||||
"unicode_decimal": 60362
|
||||
},
|
||||
{
|
||||
"icon_id": "6263347",
|
||||
"name": "电话",
|
||||
"font_class": "dianhua",
|
||||
"unicode": "e66b",
|
||||
"unicode_decimal": 58987
|
||||
},
|
||||
{
|
||||
"icon_id": "9550461",
|
||||
"name": "全球资讯",
|
||||
"font_class": "earch",
|
||||
"unicode": "e617",
|
||||
"unicode_decimal": 58903
|
||||
},
|
||||
{
|
||||
"icon_id": "34273106",
|
||||
"name": "向右",
|
||||
"font_class": "xiangyou",
|
||||
"unicode": "e656",
|
||||
"unicode_decimal": 58966
|
||||
},
|
||||
{
|
||||
"icon_id": "15448290",
|
||||
"name": "language",
|
||||
"font_class": "language",
|
||||
"unicode": "e6a9",
|
||||
"unicode_decimal": 59049
|
||||
},
|
||||
{
|
||||
"icon_id": "12670573",
|
||||
"name": "删除",
|
||||
"font_class": "shanchu",
|
||||
"unicode": "e606",
|
||||
"unicode_decimal": 58886
|
||||
},
|
||||
{
|
||||
"icon_id": "3530491",
|
||||
"name": "删除",
|
||||
"font_class": "shanchu11",
|
||||
"unicode": "e62e",
|
||||
"unicode_decimal": 58926
|
||||
},
|
||||
{
|
||||
"icon_id": "33906987",
|
||||
"name": "最新资讯-03",
|
||||
"font_class": "zuixinzixun-03",
|
||||
"unicode": "ea2c",
|
||||
"unicode_decimal": 59948
|
||||
},
|
||||
{
|
||||
"icon_id": "4175512",
|
||||
"name": "上箭头",
|
||||
"font_class": "shangjiantou",
|
||||
"unicode": "eb6d",
|
||||
"unicode_decimal": 60269
|
||||
},
|
||||
{
|
||||
"icon_id": "1518005",
|
||||
"name": "左箭头",
|
||||
"font_class": "zuojiantou",
|
||||
"unicode": "e65a",
|
||||
"unicode_decimal": 58970
|
||||
},
|
||||
{
|
||||
"icon_id": "2076270",
|
||||
"name": "设置",
|
||||
"font_class": "shezhi",
|
||||
"unicode": "e892",
|
||||
"unicode_decimal": 59538
|
||||
},
|
||||
{
|
||||
"icon_id": "2418274",
|
||||
"name": "右箭头",
|
||||
"font_class": "youjiantou",
|
||||
"unicode": "e678",
|
||||
"unicode_decimal": 59000
|
||||
},
|
||||
{
|
||||
"icon_id": "8605730",
|
||||
"name": "客服",
|
||||
"font_class": "kefu",
|
||||
"unicode": "e665",
|
||||
"unicode_decimal": 58981
|
||||
},
|
||||
{
|
||||
"icon_id": "15838431",
|
||||
"name": "arrow-right",
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "e666",
|
||||
"unicode_decimal": 58982
|
||||
},
|
||||
{
|
||||
"icon_id": "16615922",
|
||||
"name": "left",
|
||||
"font_class": "left",
|
||||
"unicode": "e684",
|
||||
"unicode_decimal": 59012
|
||||
},
|
||||
{
|
||||
"icon_id": "12532655",
|
||||
"name": "X",
|
||||
"font_class": "X",
|
||||
"unicode": "e607",
|
||||
"unicode_decimal": 58887
|
||||
},
|
||||
{
|
||||
"icon_id": "3043971",
|
||||
"name": "search",
|
||||
"font_class": "search",
|
||||
"unicode": "e676",
|
||||
"unicode_decimal": 58998
|
||||
},
|
||||
{
|
||||
"icon_id": "5478607",
|
||||
"name": "home",
|
||||
"font_class": "home1",
|
||||
"unicode": "e92d",
|
||||
"unicode_decimal": 59693
|
||||
},
|
||||
{
|
||||
"icon_id": "10714378",
|
||||
"name": "置顶 top",
|
||||
"font_class": "zhidingtop",
|
||||
"unicode": "e62d",
|
||||
"unicode_decimal": 58925
|
||||
},
|
||||
{
|
||||
"icon_id": "5387577",
|
||||
"name": "箭头_切换右",
|
||||
"font_class": "jiantou_qiehuanyou",
|
||||
"unicode": "eb05",
|
||||
"unicode_decimal": 60165
|
||||
},
|
||||
{
|
||||
"icon_id": "1049988",
|
||||
"name": "Navi_购买",
|
||||
"font_class": "navigoumai",
|
||||
"unicode": "e62a",
|
||||
"unicode_decimal": 58922
|
||||
},
|
||||
{
|
||||
"icon_id": "20697134",
|
||||
"name": "客服",
|
||||
"font_class": "kefu1",
|
||||
"unicode": "e60d",
|
||||
"unicode_decimal": 58893
|
||||
},
|
||||
{
|
||||
"icon_id": "29486582",
|
||||
"name": "设置",
|
||||
"font_class": "shezhi1",
|
||||
"unicode": "e7f8",
|
||||
"unicode_decimal": 59384
|
||||
},
|
||||
{
|
||||
"icon_id": "18420783",
|
||||
"name": "时间",
|
||||
"font_class": "shijian",
|
||||
"unicode": "e64f",
|
||||
"unicode_decimal": 58959
|
||||
},
|
||||
{
|
||||
"icon_id": "372908",
|
||||
"name": "cc-left",
|
||||
"font_class": "cc-left",
|
||||
"unicode": "e6c2",
|
||||
"unicode_decimal": 59074
|
||||
},
|
||||
{
|
||||
"icon_id": "808099",
|
||||
"name": "电话",
|
||||
"font_class": "unie601",
|
||||
"unicode": "e61c",
|
||||
"unicode_decimal": 58908
|
||||
},
|
||||
{
|
||||
"icon_id": "10069735",
|
||||
"name": "邮件",
|
||||
"font_class": "youjian",
|
||||
"unicode": "e672",
|
||||
"unicode_decimal": 58994
|
||||
},
|
||||
{
|
||||
"icon_id": "4942663",
|
||||
"name": "搜索",
|
||||
"font_class": "sousuo",
|
||||
"unicode": "e61f",
|
||||
"unicode_decimal": 58911
|
||||
},
|
||||
{
|
||||
"icon_id": "2432195",
|
||||
"name": "电子邮箱",
|
||||
"font_class": "dianziyouxiang",
|
||||
"unicode": "e60c",
|
||||
"unicode_decimal": 58892
|
||||
},
|
||||
{
|
||||
"icon_id": "4251738",
|
||||
"name": "客户",
|
||||
"font_class": "kehu",
|
||||
"unicode": "e645",
|
||||
"unicode_decimal": 58949
|
||||
},
|
||||
{
|
||||
"icon_id": "31313001",
|
||||
"name": "服务",
|
||||
"font_class": "fuwu",
|
||||
"unicode": "e61b",
|
||||
"unicode_decimal": 58907
|
||||
},
|
||||
{
|
||||
"icon_id": "22502574",
|
||||
"name": "工厂",
|
||||
"font_class": "gongchang",
|
||||
"unicode": "e649",
|
||||
"unicode_decimal": 58953
|
||||
},
|
||||
{
|
||||
"icon_id": "749761",
|
||||
"name": "购买",
|
||||
"font_class": "goumai",
|
||||
"unicode": "e603",
|
||||
"unicode_decimal": 58883
|
||||
},
|
||||
{
|
||||
"icon_id": "9978437",
|
||||
"name": "谷歌商店",
|
||||
"font_class": "zu",
|
||||
"unicode": "e644",
|
||||
"unicode_decimal": 58948
|
||||
},
|
||||
{
|
||||
"icon_id": "14055532",
|
||||
"name": "安卓",
|
||||
"font_class": "anzhuo",
|
||||
"unicode": "e60b",
|
||||
"unicode_decimal": 58891
|
||||
},
|
||||
{
|
||||
"icon_id": "29665113",
|
||||
"name": "苹果_apple",
|
||||
"font_class": "pingguo_apple",
|
||||
"unicode": "e7f2",
|
||||
"unicode_decimal": 59378
|
||||
},
|
||||
{
|
||||
"icon_id": "356446",
|
||||
"name": "减号",
|
||||
"font_class": "jianhao",
|
||||
"unicode": "e614",
|
||||
"unicode_decimal": 58900
|
||||
},
|
||||
{
|
||||
"icon_id": "592049",
|
||||
"name": "菜单",
|
||||
"font_class": "caidan",
|
||||
"unicode": "e790",
|
||||
"unicode_decimal": 59280
|
||||
},
|
||||
{
|
||||
"icon_id": "10933908",
|
||||
"name": "返回",
|
||||
"font_class": "fanhui",
|
||||
"unicode": "e60e",
|
||||
"unicode_decimal": 58894
|
||||
},
|
||||
{
|
||||
"icon_id": "118807",
|
||||
"name": "apple",
|
||||
"font_class": "fisocialapple",
|
||||
"unicode": "e76f",
|
||||
"unicode_decimal": 59247
|
||||
},
|
||||
{
|
||||
"icon_id": "2583881",
|
||||
"name": "叉叉",
|
||||
"font_class": "chacha",
|
||||
"unicode": "e62f",
|
||||
"unicode_decimal": 58927
|
||||
},
|
||||
{
|
||||
"icon_id": "1471615",
|
||||
"name": "home",
|
||||
"font_class": "home",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
},
|
||||
{
|
||||
"icon_id": "3471676",
|
||||
"name": "价值观",
|
||||
"font_class": "jiazhiguan",
|
||||
"unicode": "e646",
|
||||
"unicode_decimal": 58950
|
||||
},
|
||||
{
|
||||
"icon_id": "11834362",
|
||||
"name": "人才理念 (1)",
|
||||
"font_class": "rencailinian",
|
||||
"unicode": "e667",
|
||||
"unicode_decimal": 58983
|
||||
},
|
||||
{
|
||||
"icon_id": "27987745",
|
||||
"name": "msgw_icon_使命",
|
||||
"font_class": "msgw_icon_shiming",
|
||||
"unicode": "e60f",
|
||||
"unicode_decimal": 58895
|
||||
},
|
||||
{
|
||||
"icon_id": "33575992",
|
||||
"name": "企业愿景",
|
||||
"font_class": "qiyeyuanjing",
|
||||
"unicode": "e671",
|
||||
"unicode_decimal": 58993
|
||||
},
|
||||
{
|
||||
"icon_id": "5199424",
|
||||
"name": "下箭头",
|
||||
"font_class": "xiajiantou",
|
||||
"unicode": "e610",
|
||||
"unicode_decimal": 58896
|
||||
},
|
||||
{
|
||||
"icon_id": "10515590",
|
||||
"name": "上箭头",
|
||||
"font_class": "shangjiantou-copy",
|
||||
"unicode": "e651",
|
||||
"unicode_decimal": 58961
|
||||
},
|
||||
{
|
||||
"icon_id": "1214255",
|
||||
"name": "使用手册",
|
||||
"font_class": "weibiaoti1",
|
||||
"unicode": "e634",
|
||||
"unicode_decimal": 58932
|
||||
},
|
||||
{
|
||||
"icon_id": "12184865",
|
||||
"name": "下载",
|
||||
"font_class": "xiazai",
|
||||
"unicode": "e682",
|
||||
"unicode_decimal": 59010
|
||||
},
|
||||
{
|
||||
"icon_id": "1474435",
|
||||
"name": "删除",
|
||||
"font_class": "shachu-xue",
|
||||
"unicode": "e638",
|
||||
"unicode_decimal": 58936
|
||||
},
|
||||
{
|
||||
"icon_id": "405199",
|
||||
"name": "top",
|
||||
"font_class": "top",
|
||||
"unicode": "e67e",
|
||||
"unicode_decimal": 59006
|
||||
},
|
||||
{
|
||||
"icon_id": "741981",
|
||||
"name": "择律-选择费用-正三角形-支持",
|
||||
"font_class": "zelvxuanzefeiyongzhengsanjiaoxingzhichi",
|
||||
"unicode": "e668",
|
||||
"unicode_decimal": 58984
|
||||
},
|
||||
{
|
||||
"icon_id": "2053207",
|
||||
"name": "邮件",
|
||||
"font_class": "youjian1",
|
||||
"unicode": "e6f5",
|
||||
"unicode_decimal": 59125
|
||||
},
|
||||
{
|
||||
"icon_id": "6234497",
|
||||
"name": "返回顶部",
|
||||
"font_class": "fanhuidingbu",
|
||||
"unicode": "e633",
|
||||
"unicode_decimal": 58931
|
||||
},
|
||||
{
|
||||
"icon_id": "24327494",
|
||||
"name": "暂无数据",
|
||||
"font_class": "zanwushuju",
|
||||
"unicode": "e608",
|
||||
"unicode_decimal": 58888
|
||||
},
|
||||
{
|
||||
"icon_id": "40763706",
|
||||
"name": "暂无数据",
|
||||
"font_class": "zanwushuju1",
|
||||
"unicode": "e618",
|
||||
"unicode_decimal": 58904
|
||||
},
|
||||
{
|
||||
"icon_id": "40763707",
|
||||
"name": "正在加载",
|
||||
"font_class": "zhengzaijiazai",
|
||||
"unicode": "e619",
|
||||
"unicode_decimal": 58905
|
||||
},
|
||||
{
|
||||
"icon_id": "41151647",
|
||||
"name": "价值观",
|
||||
"font_class": "jiazhiguan1",
|
||||
"unicode": "e621",
|
||||
"unicode_decimal": 58913
|
||||
},
|
||||
{
|
||||
"icon_id": "41151648",
|
||||
"name": "msgw_icon_使命-03",
|
||||
"font_class": "msgw_icon_shiming-03",
|
||||
"unicode": "e622",
|
||||
"unicode_decimal": 58914
|
||||
},
|
||||
{
|
||||
"icon_id": "41151649",
|
||||
"name": "企业愿景-04",
|
||||
"font_class": "qiyeyuanjing-04",
|
||||
"unicode": "e623",
|
||||
"unicode_decimal": 58915
|
||||
},
|
||||
{
|
||||
"icon_id": "41151650",
|
||||
"name": "人才理念 (1)-02",
|
||||
"font_class": "a-rencailinian1-02",
|
||||
"unicode": "e624",
|
||||
"unicode_decimal": 58916
|
||||
},
|
||||
{
|
||||
"icon_id": "26661671",
|
||||
"name": "完成",
|
||||
"font_class": "wancheng",
|
||||
"unicode": "e652",
|
||||
"unicode_decimal": 58962
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,32 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
const { spawn } = require('child_process');
|
||||
const os = require('os');
|
||||
|
||||
// 获取本机 IP 地址
|
||||
function getLocalIP() {
|
||||
const interfaces = os.networkInterfaces();
|
||||
for (const name of Object.keys(interfaces)) {
|
||||
for (const interface of interfaces[name]) {
|
||||
if (interface.family === 'IPv4' && !interface.internal) {
|
||||
return interface.address;
|
||||
}
|
||||
}
|
||||
}
|
||||
return 'localhost';
|
||||
}
|
||||
|
||||
const localIP = getLocalIP();
|
||||
console.log(`🚀 启动开发服务器...`);
|
||||
console.log(`📱 本机访问: http://localhost:1110`);
|
||||
console.log(`🌐 内网访问: http://${localIP}:1110`);
|
||||
|
||||
// 启动 Nuxt 开发服务器
|
||||
const child = spawn('npx', ['nuxt', 'dev', '--host', '0.0.0.0', '--port', '1110'], {
|
||||
stdio: 'inherit',
|
||||
shell: true
|
||||
});
|
||||
|
||||
child.on('close', (code) => {
|
||||
console.log(`开发服务器已停止，退出码: ${code}`);
|
||||
});
|
||||
|
|
@ -1,21 +1,15 @@
|
|||
export default defineEventHandler((event: any) => {
|
||||
// 服务端中间件，直接执行
|
||||
const cookie = getCookie(event, 'i18n_redirected');
|
||||
const acceptLanguage = getHeader(event, 'accept-language') || '';
|
||||
|
||||
let detectedLang = 'en'; // 默认英文
|
||||
|
||||
// 优先检查 cookie：如果有 cookie 就使用 cookie 中的语言
|
||||
if (cookie && ['cn', 'en'].includes(cookie)) {
|
||||
detectedLang = cookie;
|
||||
}
|
||||
// 如果没有 cookie，则根据浏览器语言检测
|
||||
else if (acceptLanguage.includes('zh')) {
|
||||
detectedLang = 'cn';
|
||||
}
|
||||
// 设置到 context 供后续使用
|
||||
event.context.locale = detectedLang;
|
||||
|
||||
// 设置响应头
|
||||
setHeader(event, 'X-Detected-Language', detectedLang);
|
||||
// 设置基本的国际化响应头
|
||||
setHeader(event, 'X-Detected-Language', 'en');
|
||||
|
||||
// 添加 CORS 支持
|
||||
setHeader(event, 'Access-Control-Allow-Origin', '*');
|
||||
setHeader(event, 'Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
||||
setHeader(event, 'Access-Control-Allow-Headers', 'Content-Type, Authorization');
|
||||
|
||||
// 处理 OPTIONS 请求
|
||||
if (getMethod(event) === 'OPTIONS') {
|
||||
setResponseStatus(event, 200);
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
|
|
|||
331
src/app.vue
331
src/app.vue
|
|
@ -1,212 +1,189 @@
|
|||
<template>
|
||||
<div>
|
||||
<keep-alive v-if="isKeepAlive">
|
||||
<NuxtPage />
|
||||
</keep-alive>
|
||||
<NuxtPage v-else />
|
||||
<back-top v-if="currentPath !== '/404'" />
|
||||
</div>
|
||||
<div>
|
||||
<keep-alive v-if="isKeepAlive">
|
||||
<NuxtPage />
|
||||
</keep-alive>
|
||||
<NuxtPage v-else />
|
||||
<back-top v-if="currentPath !== '/404'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
useRoute
|
||||
} from '#imports';
|
||||
import BackTop from "@/components/back-top/back-top.vue";
|
||||
|
||||
// 获取当前路由对象
|
||||
const route = useRoute();
|
||||
// 计算当前路由的完整路径
|
||||
const currentPath = computed(() => route.fullPath);
|
||||
// 根据 meta 信息判断是否需要缓存页面
|
||||
const isKeepAlive = computed(() => {
|
||||
return route.meta.keepAlive;
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: '明阳良光',
|
||||
meta: [{
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1'
|
||||
},
|
||||
{
|
||||
hid: 'description',
|
||||
name: 'description',
|
||||
content: '明阳良光'
|
||||
},
|
||||
{
|
||||
name: 'theme-color',
|
||||
content: '#4f8cef'
|
||||
}
|
||||
],
|
||||
link: [
|
||||
{
|
||||
hid: 'favicon',
|
||||
rel: 'icon',
|
||||
href: '/favicon.ico'
|
||||
}
|
||||
],
|
||||
script: [{
|
||||
innerHTML: `
|
||||
import { computed, onMounted } from "vue";
|
||||
import { useRoute } from "#imports";
|
||||
import BackTop from "@/components/back-top/back-top.vue";
|
||||
import { useAppInit } from "@/composables/useAppInit.js";
|
||||
|
||||
// 获取当前路由对象
|
||||
const route = useRoute();
|
||||
// 计算当前路由的完整路径
|
||||
const currentPath = computed(() => route.fullPath);
|
||||
// 根据 meta 信息判断是否需要缓存页面
|
||||
const isKeepAlive = computed(() => {
|
||||
return route.meta.keepAlive;
|
||||
});
|
||||
|
||||
// 应用初始化
|
||||
const { initApp } = useAppInit();
|
||||
|
||||
onMounted(() => {
|
||||
// 在应用挂载时初始化
|
||||
initApp();
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "明阳良光",
|
||||
meta: [
|
||||
{
|
||||
name: "viewport",
|
||||
content: "width=device-width, initial-scale=1",
|
||||
},
|
||||
{
|
||||
hid: "description",
|
||||
name: "description",
|
||||
content: "明阳良光",
|
||||
},
|
||||
{
|
||||
name: "theme-color",
|
||||
content: "#4f8cef",
|
||||
},
|
||||
],
|
||||
link: [
|
||||
{
|
||||
hid: "favicon",
|
||||
rel: "icon",
|
||||
href: "/favicon.ico",
|
||||
},
|
||||
{
|
||||
hid: "iconfont",
|
||||
rel: "stylesheet",
|
||||
href: "/static/font/iconfont.css",
|
||||
},
|
||||
],
|
||||
script: [
|
||||
{
|
||||
innerHTML: `
|
||||
(function() {
|
||||
// 立即执行函数，确保在任何Vue组件初始化前设置语言
|
||||
// 简化的客户端语言状态设置
|
||||
if (typeof window !== 'undefined') {
|
||||
try {
|
||||
// 优先使用cookie中的语言设置（与Nuxt i18n保持一致）
|
||||
let savedLang = 'en';
|
||||
// 根据当前路径确定语言
|
||||
const currentPath = window.location.pathname;
|
||||
const currentLang = currentPath.startsWith('/cn') ? 'cn' : 'en';
|
||||
|
||||
// 1. 检查cookie
|
||||
const cookies = document.cookie.split(';');
|
||||
const localeCookie = cookies.find(cookie =>
|
||||
cookie.trim().startsWith('i18n_redirected=')
|
||||
);
|
||||
if (localeCookie) {
|
||||
const langValue = localeCookie.split('=')[1];
|
||||
if (['cn', 'en'].includes(langValue)) {
|
||||
savedLang = langValue;
|
||||
}
|
||||
}
|
||||
// 设置语言属性
|
||||
document.documentElement.setAttribute('lang', currentLang === 'cn' ? 'zh-CN' : 'en');
|
||||
document.documentElement.setAttribute('data-locale', currentLang);
|
||||
|
||||
// 2. 如果没有cookie，检查localStorage
|
||||
if (savedLang === 'en') {
|
||||
const storedLang = localStorage.getItem('locale_lang');
|
||||
if (storedLang && ['cn', 'en'].includes(storedLang)) {
|
||||
savedLang = storedLang;
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 如果都没有，根据浏览器语言设置
|
||||
if (savedLang === 'en') {
|
||||
if (navigator.language.startsWith("en")) {
|
||||
savedLang = "en";
|
||||
} else if (navigator.language.includes("zh")) {
|
||||
savedLang = "cn";
|
||||
}
|
||||
}
|
||||
|
||||
// 设置多个位置确保语言被正确读取
|
||||
document.documentElement.setAttribute('data-initial-lang', savedLang);
|
||||
document.documentElement.setAttribute('lang', savedLang === 'cn' ? 'zh-CN' : 'en');
|
||||
document.documentElement.setAttribute('data-locale', savedLang);
|
||||
window.__INITIAL_LANG__ = savedLang;
|
||||
|
||||
// 为i18n设置初始语言
|
||||
window.__I18N_INITIAL_LOCALE__ = savedLang;
|
||||
|
||||
// 确保cookie和localStorage同步
|
||||
if (savedLang !== 'en') {
|
||||
document.cookie = 'i18n_redirected=' + savedLang + '; path=/; max-age=31536000';
|
||||
localStorage.setItem('locale_lang', savedLang);
|
||||
// 设置页面标题的语言属性
|
||||
if (document.title) {
|
||||
document.title = document.title + (currentLang === 'cn' ? ' - 明阳良光' : ' - Mingyang Liangguang');
|
||||
}
|
||||
} catch (e) {
|
||||
const defaultLang = 'en';
|
||||
document.documentElement.setAttribute('data-initial-lang', defaultLang);
|
||||
console.warn('Language setup failed:', e);
|
||||
// 出错时默认英文
|
||||
document.documentElement.setAttribute('lang', 'en');
|
||||
document.documentElement.setAttribute('data-locale', defaultLang);
|
||||
window.__INITIAL_LANG__ = defaultLang;
|
||||
window.__I18N_INITIAL_LOCALE__ = defaultLang;
|
||||
document.documentElement.setAttribute('data-locale', 'en');
|
||||
}
|
||||
}
|
||||
})();
|
||||
`,
|
||||
type: 'text/javascript'
|
||||
}]
|
||||
})
|
||||
type: "text/javascript",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import './common/css/common.scss';
|
||||
@import "./common/css/common.scss";
|
||||
|
||||
// 防止语言切换时的闪烁 - 优化版本
|
||||
html:not([data-locale]) {
|
||||
// 在语言未确定前隐藏内容
|
||||
body {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
// 防止语言切换时的闪烁 - 优化版本
|
||||
html:not([data-locale]) {
|
||||
// 在语言未确定前隐藏内容
|
||||
body {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// 语言确定后显示内容
|
||||
html[data-locale] {
|
||||
body {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// 语言确定后显示内容
|
||||
html[data-locale] {
|
||||
body {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 确保语言切换平滑
|
||||
html {
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
// 确保语言切换平滑
|
||||
html {
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
// 语言特定的样式优化
|
||||
html[data-locale="en"] {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
// 语言特定的样式优化
|
||||
html[data-locale="en"] {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
html[data-locale="cn"] {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
html[data-locale="cn"] {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
|
||||
"Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
// 防止水合不匹配时的闪烁
|
||||
.navbar {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
// 防止水合不匹配时的闪烁
|
||||
.navbar {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
// 确保内容在语言切换时不会跳动
|
||||
* {
|
||||
transition: none;
|
||||
}
|
||||
// 确保内容在语言切换时不会跳动
|
||||
* {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// 只有特定元素需要过渡效果
|
||||
.navbar,
|
||||
.menu-item,
|
||||
.language-selector,
|
||||
.mobile-menu {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
// 只有特定元素需要过渡效果
|
||||
.navbar,
|
||||
.menu-item,
|
||||
.language-selector,
|
||||
.mobile-menu {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
// 防止语言切换时的布局抖动
|
||||
.language-selector {
|
||||
min-width: 80px; // 确保语言选择器有固定宽度
|
||||
}
|
||||
// 防止语言切换时的布局抖动
|
||||
.language-selector {
|
||||
min-width: 80px; // 确保语言选择器有固定宽度
|
||||
}
|
||||
|
||||
.lang-text {
|
||||
min-width: 40px; // 确保语言文本有固定宽度
|
||||
text-align: center;
|
||||
}
|
||||
.lang-text {
|
||||
min-width: 40px; // 确保语言文本有固定宽度
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MiSans-Light;
|
||||
src: url("/static/font/MiSans-Light.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: MiSans-Light;
|
||||
src: url("/static/font/MiSans-Light.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MiSans-Bold;
|
||||
src: url("/static/font/MiSans-Bold.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: MiSans-Bold;
|
||||
src: url("/static/font/MiSans-Bold.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MiSans-Medium;
|
||||
src: url("/static/font/MiSans-Medium.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: MiSans-Medium;
|
||||
src: url("/static/font/MiSans-Medium.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MiSans-Regular;
|
||||
src: url("/static/font/MiSans-Regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: MiSans-Regular;
|
||||
src: url("/static/font/MiSans-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MiSans-Normal;
|
||||
src: url("/static/font/MiSans-Normal.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: MiSans-Normal;
|
||||
src: url("/static/font/MiSans-Normal.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: MiSans-SemiBold;
|
||||
src: url("/static/font/MiSans-Semibold.ttf");
|
||||
}
|
||||
</style>
|
||||
@font-face {
|
||||
font-family: MiSans-SemiBold;
|
||||
src: url("/static/font/MiSans-Semibold.ttf");
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -126,9 +126,17 @@ img {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 响应式根字体大小 */
|
||||
html {
|
||||
font-size: calc(100 * 100vw / 1920) !important;
|
||||
min-height: 100vh;
|
||||
/* 4K 和超大屏幕 */
|
||||
/* 1920px 屏幕 */
|
||||
/* 1440px 屏幕 */
|
||||
/* 1024px 屏幕 */
|
||||
/* 768px 屏幕 */
|
||||
/* 480px 屏幕 */
|
||||
/* 375px 屏幕 */
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
|
|
@ -180,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;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
|
|
@ -200,15 +210,13 @@ html, body {
|
|||
/* 桌面端滚动条样式 */
|
||||
@media (min-width: 751px) {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 12px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
|
|
@ -221,6 +229,7 @@ image {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 通用布局类 */
|
||||
.define-topBar__components {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -244,77 +253,33 @@ image {
|
|||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
/* 4K 和超大屏幕 */
|
||||
/* 1920px 屏幕 */
|
||||
/* 1440px 屏幕 */
|
||||
/* 1024px 屏幕 */
|
||||
/* 768px 屏幕 */
|
||||
/* 480px 屏幕 */
|
||||
/* 375px 屏幕 */
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.container {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.container {
|
||||
max-width: 1800px;
|
||||
padding: 0 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.container {
|
||||
max-width: 1500px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
.container {
|
||||
max-width: 1300px;
|
||||
padding: 0 40px;
|
||||
max-width: 1400px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -342,6 +307,7 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
/* 动画系统 */
|
||||
.animationDH {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -361,6 +327,7 @@ image {
|
|||
-webkit-animation: 1s dh_buttom linear both;
|
||||
}
|
||||
|
||||
/* 首页专用动画 */
|
||||
.dhLeft {
|
||||
-webkit-opacity: 0;
|
||||
transform: translate(75px, 0);
|
||||
|
|
@ -392,6 +359,7 @@ image {
|
|||
-webkit-transition: 1s;
|
||||
}
|
||||
|
||||
/* 动画延迟 */
|
||||
.dhyc1 {
|
||||
transition-delay: 0.25s;
|
||||
-webkit-transition-delay: 0.25s;
|
||||
|
|
@ -412,6 +380,7 @@ image {
|
|||
-webkit-transition-delay: 1s;
|
||||
}
|
||||
|
||||
/* 动画关键帧 */
|
||||
@-webkit-keyframes dh_right {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -480,7 +449,7 @@ image {
|
|||
|
||||
/* Banner 样式 */
|
||||
.banner {
|
||||
margin-top: 0.52rem;
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
height: 5.5rem;
|
||||
background-size: cover !important;
|
||||
|
|
@ -492,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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -516,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;
|
||||
|
|
@ -531,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);
|
||||
|
|
@ -564,79 +602,25 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
.pageMain {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
@media (max-width: 480px) {
|
||||
.banner__box__title {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.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;
|
||||
|
|
@ -650,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;
|
||||
|
|
@ -665,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: "";
|
||||
|
|
@ -702,28 +716,66 @@ 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;
|
||||
min-height: 100vh;
|
||||
|
|
@ -737,7 +789,7 @@ image {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
@media (min-width: 2560px) {
|
||||
.nav-sticky {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -745,7 +797,7 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.nav-sticky {
|
||||
height: auto;
|
||||
line-height: 3.5;
|
||||
|
|
@ -773,8 +825,22 @@ 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: 9.8rem;
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
transition: width 0.3s;
|
||||
color: #ffffff;
|
||||
|
|
@ -790,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";
|
||||
|
|
@ -797,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;
|
||||
|
|
@ -805,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;
|
||||
|
|
@ -833,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;
|
||||
|
|
@ -849,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;
|
||||
|
|
@ -857,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;
|
||||
|
|
@ -885,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;
|
||||
|
|
@ -902,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;
|
||||
}
|
||||
|
|
@ -926,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;
|
||||
|
|
@ -934,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;
|
||||
|
|
@ -962,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;
|
||||
|
|
@ -1003,6 +1165,7 @@ image {
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 产品详情页banner */
|
||||
.detail-banner {
|
||||
width: 100%;
|
||||
height: 10.8rem;
|
||||
|
|
@ -1010,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;
|
||||
|
|
@ -1021,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%;
|
||||
|
|
@ -1041,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;
|
||||
|
|
@ -1060,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;
|
||||
|
|
@ -1071,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;
|
||||
|
|
@ -1090,6 +1361,7 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
/* 产品、新闻用的loading */
|
||||
.load-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -1097,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;
|
||||
|
|
@ -1104,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;
|
||||
|
|
@ -1114,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;
|
||||
|
|
@ -1142,11 +1468,13 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
/* 动画样式 */
|
||||
[class*="is-animating-"] {
|
||||
transform: translateY(11.71rpx);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 字体工具类 */
|
||||
.font-light {
|
||||
font-family: var(--font-light);
|
||||
}
|
||||
|
|
@ -1171,6 +1499,7 @@ image {
|
|||
font-family: var(--font-bold);
|
||||
}
|
||||
|
||||
/* 文本大小工具类 */
|
||||
.text-xs {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -131,42 +131,42 @@ img {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// 响应式根字体大小
|
||||
/* 响应式根字体大小 */
|
||||
html {
|
||||
font-size: calc(100 * 100vw / 1920) !important;
|
||||
min-height: 100vh;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
font-size: calc(100 * 100vw / 2560) !important;
|
||||
}
|
||||
|
||||
// 1920px 屏幕
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
font-size: calc(100 * 100vw / 1920) !important;
|
||||
}
|
||||
|
||||
// 1440px 屏幕
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
font-size: calc(100 * 100vw / 1440) !important;
|
||||
}
|
||||
|
||||
// 1024px 屏幕
|
||||
/* 1024px 屏幕 */
|
||||
@media (min-width: 1024px) and (max-width: 1439px) {
|
||||
font-size: calc(100 * 100vw / 1024) !important;
|
||||
}
|
||||
|
||||
// 768px 屏幕
|
||||
/* 768px 屏幕 */
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
font-size: calc(100 * 100vw / 768) !important;
|
||||
}
|
||||
|
||||
// 480px 屏幕
|
||||
/* 480px 屏幕 */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
font-size: calc(100 * 100vw / 480) !important;
|
||||
}
|
||||
|
||||
// 375px 屏幕
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: 479px) {
|
||||
font-size: calc(100 * 100vw / 375) !important;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
|
|
@ -198,17 +200,15 @@ html, body {
|
|||
/* 桌面端滚动条样式 */
|
||||
@media (min-width: 751px) {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #a8a8a8;
|
||||
|
|
@ -222,7 +222,7 @@ image {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
// 通用布局类
|
||||
/* 通用布局类 */
|
||||
.define-topBar__components {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -240,85 +240,52 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
// 容器类
|
||||
// 统一容器类
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
max-width: 1800px;
|
||||
max-width: 2000px;
|
||||
padding: 0 100px;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1600px;
|
||||
padding: 0 80px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1500px;
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1400px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1300px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: 1024px) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: 480px) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 容器类
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
max-width: 1800px;
|
||||
padding: 0 80px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1500px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1300px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画系统
|
||||
/* 动画系统 */
|
||||
.animationDH {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -338,7 +305,7 @@ image {
|
|||
-webkit-animation: 1s dh_buttom linear both;
|
||||
}
|
||||
|
||||
// 首页专用动画
|
||||
/* 首页专用动画 */
|
||||
.dhLeft {
|
||||
-webkit-opacity: 0;
|
||||
transform: translate(75px, 0);
|
||||
|
|
@ -370,7 +337,7 @@ image {
|
|||
-webkit-transition: 1s;
|
||||
}
|
||||
|
||||
// 动画延迟
|
||||
/* 动画延迟 */
|
||||
.dhyc1 {
|
||||
transition-delay: 0.25s;
|
||||
-webkit-transition-delay: 0.25s;
|
||||
|
|
@ -391,7 +358,7 @@ image {
|
|||
-webkit-transition-delay: 1s;
|
||||
}
|
||||
|
||||
// 动画关键帧
|
||||
/* 动画关键帧 */
|
||||
@-webkit-keyframes dh_right {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -460,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;
|
||||
|
|
@ -471,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) {
|
||||
|
|
@ -484,6 +469,21 @@ image {
|
|||
@media (max-width: 800px) {
|
||||
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%;
|
||||
|
|
@ -492,27 +492,43 @@ image {
|
|||
animation: 1s dh_buttom linear both;
|
||||
-webkit-animation: 1s dh_buttom linear both;
|
||||
|
||||
&__title {
|
||||
font-size: var(--text-5xl);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: var(--font-medium);
|
||||
&__title {
|
||||
font-size: var(--text-5xl);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: var(--font-medium);
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: var(--text-6xl);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: var(--text-xl);
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-light);
|
||||
@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) {
|
||||
&__title {
|
||||
font-size: var(--text-6xl);
|
||||
}
|
||||
&__title {
|
||||
font-size: var(--text-6xl);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
&__subtitle {
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
|
|
@ -534,73 +550,25 @@ image {
|
|||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageMain {
|
||||
overflow: hidden;
|
||||
|
||||
&__breads {
|
||||
color: #666;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
@media (max-width: 480px) {
|
||||
&__title {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -620,14 +588,34 @@ 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;
|
||||
padding: 0.1rem 0;
|
||||
text-align: center;
|
||||
padding: 0.1rem 0;
|
||||
text-align: center;
|
||||
font-size: var(--text-lg);
|
||||
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);
|
||||
font-family: var(--font-normal);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
font-size: 15.5px;
|
||||
|
|
@ -639,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 {
|
||||
|
|
@ -659,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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -672,16 +671,32 @@ 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 粘性导航栏样式
|
||||
/* 粘性导航栏样式 */
|
||||
.sticky-page-layout {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
|
|
@ -689,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;
|
||||
|
|
@ -710,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 {
|
||||
|
|
@ -720,10 +745,23 @@ image {
|
|||
width: 100%;
|
||||
|
||||
&__center {
|
||||
width: 9.8rem;
|
||||
width: 1200px;
|
||||
@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;
|
||||
|
|
@ -740,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 {
|
||||
|
|
@ -753,6 +799,14 @@ image {
|
|||
@media (max-width: 1200px) {
|
||||
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;
|
||||
|
|
@ -760,6 +814,14 @@ image {
|
|||
@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;
|
||||
}
|
||||
|
|
@ -825,13 +887,29 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
// 产品详情页banner
|
||||
/* 产品详情页banner */
|
||||
.detail-banner {
|
||||
width: 100%;
|
||||
height: 10.8rem;
|
||||
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;
|
||||
|
|
@ -841,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 {
|
||||
|
|
@ -860,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载遮罩 */
|
||||
|
|
@ -879,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;
|
||||
|
|
@ -888,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 {
|
||||
|
|
@ -911,19 +1051,39 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
// 产品、新闻用的loading
|
||||
/* 产品、新闻用的loading */
|
||||
.load-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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;
|
||||
|
|
@ -931,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) {
|
||||
|
|
@ -961,7 +1137,7 @@ image {
|
|||
}
|
||||
}
|
||||
|
||||
// 动画样式
|
||||
/* 动画样式 */
|
||||
@mixin isAnimatingStyle {
|
||||
transform: translateY(11.71rpx);
|
||||
opacity: 0;
|
||||
|
|
@ -971,7 +1147,7 @@ image {
|
|||
@include isAnimatingStyle;
|
||||
}
|
||||
|
||||
// 字体工具类
|
||||
/* 字体工具类 */
|
||||
.font-light { font-family: var(--font-light); }
|
||||
.font-normal { font-family: var(--font-normal); }
|
||||
.font-regular { font-family: var(--font-regular); }
|
||||
|
|
@ -979,7 +1155,7 @@ image {
|
|||
.font-semibold { font-family: var(--font-semibold); }
|
||||
.font-bold { font-family: var(--font-bold); }
|
||||
|
||||
// 文本大小工具类
|
||||
/* 文本大小工具类 */
|
||||
.text-xs { font-size: var(--text-xs); }
|
||||
.text-sm { font-size: var(--text-sm); }
|
||||
.text-base { font-size: var(--text-base); }
|
||||
|
|
|
|||
|
|
@ -1,151 +1,13 @@
|
|||
<script setup name="footer">
|
||||
import { ref, reactive, onUnmounted, onMounted } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from "#imports";
|
||||
import { GetMessageApi } from "@/service/api.js";
|
||||
import { useRouter, useRoute } from "#imports";
|
||||
const { t } = useI18n();
|
||||
import { GetProductCategoryApi } from "~/service/api.js";
|
||||
//商品与新闻状态
|
||||
import useSheller from "~/stores/seller.js";
|
||||
// 语言判断
|
||||
import langToCheck from "~/hook/lang.js";
|
||||
const langIs = ref(langToCheck());
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
//页面跳转事件
|
||||
const Store = useSheller();
|
||||
const props = defineProps({
|
||||
//首页加边距
|
||||
marginSpacing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
import { useNavigation } from "@/composables/useNavigation.js";
|
||||
const { t, locale } = useI18n();
|
||||
const langIs = ref(locale);
|
||||
const { navigateTo } = useNavigation();
|
||||
|
||||
|
||||
|
||||
const subRouteEvent = (subParmas, item) => {
|
||||
let secondaryRoute = subParmas.enName;
|
||||
switch (secondaryRoute) {
|
||||
case "Power Station": {
|
||||
Store.clickTab = 0;
|
||||
router.push({
|
||||
name: "product",
|
||||
query: {
|
||||
CategoryId: 0,
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "Solar Panel": {
|
||||
Store.clickTab = 1;
|
||||
router.push({
|
||||
name: "product",
|
||||
query: {
|
||||
CategoryId: 1,
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "Accessory": {
|
||||
Store.clickTab = 2;
|
||||
router.push({
|
||||
name: "product",
|
||||
query: {
|
||||
CategoryId: 2,
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "About Us": {
|
||||
router.push({
|
||||
name: "about-us",
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "Contact": {
|
||||
router.push({
|
||||
name: "contact-us",
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
// 产品分类跳转到首页对应分类
|
||||
router.push({
|
||||
name: "home",
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
footTabs.forEach((it) => {
|
||||
(it.checked = false), (it.expand = false);
|
||||
});
|
||||
};
|
||||
// 改成小写，并 " - "代替空格
|
||||
const FlowReplace = (str) => {
|
||||
return str.toLowerCase().replace(/\s+/g, "-");
|
||||
};
|
||||
//expandwei
|
||||
const footTabs = reactive([]);
|
||||
const GetProductCategorylist = () => {
|
||||
GetProductCategoryApi().then((res) => {
|
||||
let arrofObjects = res.rows;
|
||||
Store.categoryList = arrofObjects.map((obj, k) => {
|
||||
return {
|
||||
...obj,
|
||||
categorId: k,
|
||||
path: "product/product",
|
||||
Params: k,
|
||||
};
|
||||
});
|
||||
footTabs[0].dropList = Store.categoryList;
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
footTabs.push(
|
||||
{
|
||||
enName: "Product",
|
||||
name: "产品系列",
|
||||
expand: false,
|
||||
dropList: [
|
||||
{
|
||||
enName: "监控摄像头",
|
||||
name: "监控摄像头",
|
||||
},
|
||||
{
|
||||
enName: "LED灯泡",
|
||||
name: "LED灯泡",
|
||||
},
|
||||
{
|
||||
enName: "车灯",
|
||||
name: "车灯",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
enName: "About",
|
||||
name: "关于我们",
|
||||
expand: false,
|
||||
dropList: [
|
||||
{
|
||||
enName: "About Us",
|
||||
name: "关于我们",
|
||||
path: "/about-us"
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
enName: "Contact",
|
||||
name: "联系我们",
|
||||
expand: false,
|
||||
dropList: [
|
||||
{
|
||||
enName: "Contact",
|
||||
name: "联系我们",
|
||||
path: "/contact-us/contact-us"
|
||||
},
|
||||
],
|
||||
}
|
||||
);
|
||||
});
|
||||
// 服务协议、隐私政策、域名、网安信息
|
||||
const GoAgreement = (value) => {
|
||||
switch (value) {
|
||||
|
|
@ -163,9 +25,7 @@ const GoAgreement = (value) => {
|
|||
}
|
||||
case 4: {
|
||||
//网站隐私协议
|
||||
router.push({
|
||||
name: "privacy-policy",
|
||||
});
|
||||
navigateTo("privacy-policy");
|
||||
break;
|
||||
}
|
||||
case 5: {
|
||||
|
|
@ -185,19 +45,7 @@ const GoAgreement = (value) => {
|
|||
}
|
||||
}
|
||||
};
|
||||
//折叠面板组件
|
||||
const TransitTap = (symbolName) => {
|
||||
footTabs.forEach((it) => {
|
||||
symbolName == it.enName ? (it.expand = !it.expand) : (it.expand = false);
|
||||
});
|
||||
};
|
||||
|
||||
// 接口
|
||||
const goTab = (path) => {
|
||||
router.push({
|
||||
name: path,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -258,13 +106,13 @@ const goTab = (path) => {
|
|||
</div>
|
||||
</div>
|
||||
<!-- 末尾 -->
|
||||
<div class="foot-bottom" v-if="langIs === 'cn'">
|
||||
<div class="foot-bottom">
|
||||
<div class="foot-bottom__box">
|
||||
<div class="foot-bottom__box__content">
|
||||
<p class="foot-bottom__box__content__copyright">
|
||||
版权所有 © 2025 明阳良光 |
|
||||
<a @click="GoAgreement(5)" class="foot-bottom__box__content__link">粤ICP备2023070569号</a> |
|
||||
<a @click="GoAgreement(7)" class="foot-bottom__box__content__link">粤公网安备 粤ICP备2023070569号</a>
|
||||
{{ t('footer.copyright') }} |
|
||||
<a @click="GoAgreement(5)" class="foot-bottom__box__content__link">{{ t('footer.icp') }}</a> |
|
||||
<a @click="GoAgreement(7)" class="foot-bottom__box__content__link">{{ t('footer.public-security') }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -301,47 +149,47 @@ $form-theme-color: #2164ff;
|
|||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 20px 15px;
|
||||
margin: 0 auto;
|
||||
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: 1500px;
|
||||
padding: 35px 50px 25px;
|
||||
max-width: 1200px;
|
||||
padding: 35px 30px 25px; /* 左右50px与顶部导航栏一致 */
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1300px;
|
||||
padding: 30px 40px 20px;
|
||||
max-width: 1200px;
|
||||
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与顶部导航栏一致 */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -354,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: 1500px;
|
||||
padding: 0 50px;
|
||||
max-width: 1200px;
|
||||
padding: 0 50px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1300px;
|
||||
padding: 0 40px;
|
||||
max-width: 1200px;
|
||||
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 {
|
||||
|
|
@ -583,37 +431,43 @@ $form-theme-color: #2164ff;
|
|||
gap: 25px;
|
||||
margin-left: 30px;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
gap: 40px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
gap: 35px;
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
gap: 30px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: 1024px) {
|
||||
gap: 20px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: 480px) {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
gap: 10px;
|
||||
}
|
||||
|
|
@ -854,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: 1500px;
|
||||
padding: 0 50px;
|
||||
max-width: 1200px; /* 修正：应该是1200px，不是1300px */
|
||||
padding: 0 50px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1300px;
|
||||
padding: 0 40px;
|
||||
max-width: 1200px;
|
||||
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>
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, nextTick, watch } from "vue";
|
||||
import { useI18n } from "#imports";
|
||||
import { useRouter, useRoute } from "#imports";
|
||||
import { useLocalePath, useSwitchLocalePath } from "#i18n";
|
||||
import { useRoute, useRouter } from "#imports";
|
||||
import { useNavigation } from "@/composables/useNavigation.js";
|
||||
import { useLanguageSwitch } from "@/composables/useLanguageSwitch.js";
|
||||
|
||||
const { locale, t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const localePath = useLocalePath();
|
||||
const switchLocalePath = useSwitchLocalePath();
|
||||
const router = useRouter();
|
||||
const { navigateTo, localePath } = useNavigation();
|
||||
const { switchLanguage, initLanguage } = useLanguageSwitch();
|
||||
|
||||
// 语言显示
|
||||
const langToShow = computed(() => {
|
||||
|
|
@ -25,11 +26,11 @@ const langToShow = computed(() => {
|
|||
// 语言列表
|
||||
const langList = ref([
|
||||
{ name: "简体中文", code: "cn", checked: false },
|
||||
{ name: "English", code: "en", checked: true },
|
||||
{ name: "English", code: "en", checked: false },
|
||||
]);
|
||||
|
||||
// 菜单数据
|
||||
const menuItems = ref([
|
||||
// 菜单数据 - 使用计算属性自动响应语言变化
|
||||
const menuItems = computed(() => [
|
||||
{
|
||||
name: t("nav.home"),
|
||||
enName: "home",
|
||||
|
|
@ -56,51 +57,39 @@ const menuItems = ref([
|
|||
},
|
||||
]);
|
||||
|
||||
// 监听语言变化，更新菜单名称
|
||||
watch(() => locale.value, () => {
|
||||
menuItems.value.forEach(item => {
|
||||
switch (item.enName) {
|
||||
case "home":
|
||||
item.name = t("nav.home");
|
||||
break;
|
||||
case "about":
|
||||
item.name = t("nav.about");
|
||||
break;
|
||||
case "products":
|
||||
item.name = t("nav.products");
|
||||
break;
|
||||
case "contact":
|
||||
item.name = t("nav.contact");
|
||||
break;
|
||||
}
|
||||
});
|
||||
}, { immediate: true });
|
||||
|
||||
// 移动端菜单控制
|
||||
const isMobileMenuOpen = ref(false);
|
||||
const langPopup = ref(false);
|
||||
|
||||
// 语言切换下拉显示控制
|
||||
const showLangDropdown = ref(false);
|
||||
|
||||
// 语言切换防抖
|
||||
const isSwitching = ref(false);
|
||||
|
||||
// 语言切换
|
||||
const chooseLanguage = (lang) => {
|
||||
if (lang.code === locale.value) {
|
||||
langPopup.value = false;
|
||||
const chooseLanguage = async (lang) => {
|
||||
if (lang.code === locale.value || isSwitching.value) {
|
||||
showLangDropdown.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取目标路径并跳转
|
||||
const targetPath = switchLocalePath(lang.code);
|
||||
router.replace(targetPath);
|
||||
|
||||
langPopup.value = false;
|
||||
try {
|
||||
isSwitching.value = true;
|
||||
// 使用新的语言切换方法，传递正确的参数
|
||||
await switchLanguage(lang.code, router);
|
||||
} catch (error) {
|
||||
console.warn('Language switch failed:', error);
|
||||
} finally {
|
||||
isSwitching.value = false;
|
||||
showLangDropdown.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 菜单点击
|
||||
const handleMenuClick = (item) => {
|
||||
// 使用 localePath 获取当前语言环境下的正确路径
|
||||
const targetPath = localePath(item.path);
|
||||
|
||||
// 跳转到正确的路径
|
||||
router.push(targetPath);
|
||||
// 使用统一的导航方法
|
||||
navigateTo(item.path);
|
||||
isMobileMenuOpen.value = false;
|
||||
};
|
||||
|
||||
|
|
@ -108,28 +97,29 @@ const handleMenuClick = (item) => {
|
|||
const setActiveMenu = () => {
|
||||
const currentPath = route.path;
|
||||
// 重置所有状态
|
||||
menuItems.value.forEach((item) => {
|
||||
const items = menuItems.value;
|
||||
items.forEach((item) => {
|
||||
item.active = false;
|
||||
});
|
||||
|
||||
// 根据路径设置激活状态
|
||||
if (currentPath === "/" || currentPath === "/cn") {
|
||||
const homeItem = menuItems.value.find((item) => item.enName === "home");
|
||||
const homeItem = items.find((item) => item.enName === "home");
|
||||
if (homeItem) {
|
||||
homeItem.active = true;
|
||||
}
|
||||
} else if (currentPath.includes("/about-us")) {
|
||||
const aboutItem = menuItems.value.find((item) => item.enName === "about");
|
||||
const aboutItem = items.find((item) => item.enName === "about");
|
||||
if (aboutItem) {
|
||||
aboutItem.active = true;
|
||||
}
|
||||
} else if (currentPath.includes("/product")) {
|
||||
const productItem = menuItems.value.find((item) => item.enName === "products");
|
||||
const productItem = items.find((item) => item.enName === "products");
|
||||
if (productItem) {
|
||||
productItem.active = true;
|
||||
}
|
||||
} else if (currentPath.includes("/contact-us")) {
|
||||
const contactItem = menuItems.value.find((item) => item.enName === "contact");
|
||||
const contactItem = items.find((item) => item.enName === "contact");
|
||||
if (contactItem) {
|
||||
contactItem.active = true;
|
||||
}
|
||||
|
|
@ -143,16 +133,15 @@ const toggleMobileMenu = () => {
|
|||
|
||||
// 处理logo点击
|
||||
const handleLogoClick = () => {
|
||||
// 使用 localePath 获取当前语言环境下的首页路径
|
||||
const homePath = localePath("/");
|
||||
router.push(homePath);
|
||||
menuItems.value.forEach((menu) => {
|
||||
menu.active = menu.enName === "home";
|
||||
});
|
||||
// 使用统一的导航方法跳转到首页
|
||||
navigateTo("/");
|
||||
isMobileMenuOpen.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化语言
|
||||
initLanguage();
|
||||
|
||||
// 更新语言列表选中状态
|
||||
langList.value.forEach((item) => {
|
||||
item.checked = item.code === locale.value;
|
||||
|
|
@ -164,6 +153,13 @@ onMounted(() => {
|
|||
});
|
||||
});
|
||||
|
||||
// 监听语言变化，更新语言列表选中状态
|
||||
watch(() => locale.value, (newLocale) => {
|
||||
langList.value.forEach((item) => {
|
||||
item.checked = item.code === newLocale;
|
||||
});
|
||||
}, { immediate: true });
|
||||
|
||||
// 监听路由变化，更新激活状态
|
||||
watch(
|
||||
() => route.path,
|
||||
|
|
@ -205,39 +201,51 @@ watch(
|
|||
<!-- 语言切换和移动端按钮 -->
|
||||
<div class="navbar-actions">
|
||||
<!-- 语言切换 -->
|
||||
<div class="language-selector" @click="langPopup = !langPopup">
|
||||
<img
|
||||
class="lang-earth-icon"
|
||||
src="/static/home/earch.png"
|
||||
:alt="langToShow"
|
||||
:title="langToShow"
|
||||
/>
|
||||
<span class="lang-text">{{ langToShow }}</span>
|
||||
<svg
|
||||
class="lang-icon"
|
||||
:class="{ rotate: langPopup }"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
>
|
||||
<path
|
||||
d="M2 4l4 4 4-4"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
<div
|
||||
class="language-container"
|
||||
@mouseenter="showLangDropdown = true"
|
||||
@mouseleave="showLangDropdown = false"
|
||||
@click="showLangDropdown = !showLangDropdown"
|
||||
>
|
||||
<div class="language-selector">
|
||||
<img
|
||||
class="lang-earth-icon"
|
||||
src="/static/home/earch.png"
|
||||
:alt="langToShow"
|
||||
:title="langToShow"
|
||||
/>
|
||||
</svg>
|
||||
<span class="lang-text">{{ langToShow }}</span>
|
||||
<svg
|
||||
class="lang-icon"
|
||||
:class="{ rotate: showLangDropdown }"
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
>
|
||||
<path
|
||||
d="M2 4l4 4 4-4"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 语言下拉菜单 -->
|
||||
<div class="lang-dropdown" v-show="langPopup">
|
||||
<div
|
||||
class="lang-dropdown"
|
||||
v-show="showLangDropdown"
|
||||
@click.stop
|
||||
>
|
||||
<div
|
||||
v-for="lang in langList"
|
||||
:key="lang.code"
|
||||
class="lang-option"
|
||||
:class="{ active: lang.checked }"
|
||||
@click.stop="chooseLanguage(lang)"
|
||||
:class="{ active: lang.checked, disabled: isSwitching }"
|
||||
@click="chooseLanguage(lang)"
|
||||
>
|
||||
{{ lang.name }}
|
||||
<span v-if="isSwitching && lang.checked" class="loading-dot">...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -298,22 +306,59 @@ watch(
|
|||
z-index: 1000;
|
||||
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: 1400px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 40px;
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
gap: 60px;
|
||||
pointer-events: auto;
|
||||
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: 2560px) {
|
||||
max-width: 1800px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1200px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1200px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: 1024px) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: 480px) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: 375px) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
|
|
@ -339,6 +384,7 @@ watch(
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
|
|
@ -353,6 +399,7 @@ watch(
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
pointer-events: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
gap: 16px;
|
||||
|
|
@ -382,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;
|
||||
|
|
@ -401,6 +449,7 @@ watch(
|
|||
|
||||
&::after {
|
||||
width: 30px;
|
||||
bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -411,6 +460,7 @@ watch(
|
|||
// 激活时显示下划线
|
||||
&::after {
|
||||
width: 25px;
|
||||
bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -425,6 +475,12 @@ watch(
|
|||
}
|
||||
}
|
||||
|
||||
// 语言容器
|
||||
.language-container {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
// 语言选择器
|
||||
.language-selector {
|
||||
position: relative;
|
||||
|
|
@ -437,6 +493,8 @@ watch(
|
|||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1001;
|
||||
pointer-events: auto;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
|
|
@ -489,7 +547,7 @@ watch(
|
|||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
margin-top: 0;
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
|
|
@ -497,14 +555,21 @@ watch(
|
|||
overflow: hidden;
|
||||
min-width: 140px;
|
||||
z-index: 1002;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lang-option {
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
pointer-events: auto;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
|
|
@ -516,6 +581,23 @@ watch(
|
|||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.loading-dot {
|
||||
font-size: 10px;
|
||||
color: #4f8cef;
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0%, 20% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
80%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
// 移动端菜单按钮
|
||||
|
|
@ -623,7 +705,7 @@ watch(
|
|||
}
|
||||
}
|
||||
|
||||
// 响应式调整
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
&-container {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
export const useAppInit = () => {
|
||||
// 应用初始化
|
||||
const initApp = () => {
|
||||
console.log('App initialization started')
|
||||
|
||||
// 语言初始化由 Nuxt i18n 自动处理
|
||||
|
||||
console.log('App initialization completed')
|
||||
}
|
||||
|
||||
return {
|
||||
initApp
|
||||
}
|
||||
}
|
||||
|
|
@ -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,78 +0,0 @@
|
|||
// 统一的语言检测逻辑，确保服务器端和客户端一致
|
||||
export const useLanguageDetection = () => {
|
||||
// 检测初始语言的统一逻辑
|
||||
const detectInitialLanguage = () => {
|
||||
// 服务端环境
|
||||
if (typeof window === 'undefined') {
|
||||
return 'en'; // 服务端默认英文，实际语言由中间件设置
|
||||
}
|
||||
|
||||
// 客户端环境
|
||||
try {
|
||||
// 1. 优先使用cookie（与服务器中间件保持一致）
|
||||
const cookies = document.cookie.split(';');
|
||||
const localeCookie = cookies.find(cookie =>
|
||||
cookie.trim().startsWith('i18n_redirected=')
|
||||
);
|
||||
if (localeCookie) {
|
||||
const langValue = localeCookie.split('=')[1];
|
||||
if (['cn', 'en'].includes(langValue)) {
|
||||
return langValue;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 检查内联脚本设置的语言
|
||||
const scriptLang = window.__INITIAL_LANG__ ||
|
||||
document.documentElement.getAttribute('data-initial-lang');
|
||||
if (scriptLang && ['cn', 'en'].includes(scriptLang)) {
|
||||
return scriptLang;
|
||||
}
|
||||
|
||||
// 3. 检查localStorage
|
||||
const storedLang = localStorage.getItem('locale_lang');
|
||||
if (storedLang && ['cn', 'en'].includes(storedLang)) {
|
||||
return storedLang;
|
||||
}
|
||||
|
||||
// 4. 检查浏览器语言（与服务器中间件保持一致）
|
||||
if (navigator.language.startsWith("en")) {
|
||||
return "en";
|
||||
} else if (navigator.language.includes("zh")) {
|
||||
return "cn";
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Language detection failed:', e);
|
||||
}
|
||||
|
||||
return 'en'; // 默认英文
|
||||
};
|
||||
|
||||
// 保存语言设置
|
||||
const saveLanguage = (lang) => {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
try {
|
||||
// 保存到Cookie（使用Nuxt i18n的标准键名）
|
||||
document.cookie = 'i18n_redirected=' + lang + '; path=/; max-age=31536000';
|
||||
|
||||
// 保存到localStorage
|
||||
localStorage.setItem('locale_lang', lang);
|
||||
|
||||
// 更新全局变量
|
||||
window.__INITIAL_LANG__ = lang;
|
||||
window.__I18N_INITIAL_LOCALE__ = lang;
|
||||
|
||||
// 更新文档属性
|
||||
document.documentElement.setAttribute('data-initial-lang', lang);
|
||||
document.documentElement.setAttribute('data-locale', lang);
|
||||
document.documentElement.setAttribute('lang', lang === 'cn' ? 'zh-CN' : 'en');
|
||||
} catch (error) {
|
||||
console.warn('Language save failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
detectInitialLanguage,
|
||||
saveLanguage
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
export const useLanguageSwitch = () => {
|
||||
const { locale, setLocale } = useI18n()
|
||||
const { getLocalePath } = useI18nUtils()
|
||||
|
||||
// 切换语言
|
||||
const switchLanguage = async (newLocale, router) => {
|
||||
if (!newLocale || newLocale === locale.value) {
|
||||
console.log('语言切换跳过:', { newLocale, current: locale.value })
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
console.log('开始切换语言:', { from: locale.value, to: newLocale })
|
||||
|
||||
try {
|
||||
// 更新 i18n locale
|
||||
await setLocale(newLocale)
|
||||
console.log('I18n locale 已更新:', newLocale)
|
||||
|
||||
// 获取当前路由信息
|
||||
const currentRoute = router.currentRoute.value
|
||||
const currentPath = currentRoute.path
|
||||
console.log('当前路径:', currentPath)
|
||||
|
||||
// 获取新语言的路径
|
||||
const newPath = getLocalePath(newLocale, currentPath)
|
||||
console.log('新路径:', newPath)
|
||||
|
||||
// 如果路径需要改变，则进行导航
|
||||
if (newPath !== currentPath) {
|
||||
try {
|
||||
await router.push(newPath)
|
||||
console.log('语言切换导航完成')
|
||||
} catch (error) {
|
||||
console.warn('语言切换导航失败:', error)
|
||||
// 导航失败不影响语言切换
|
||||
}
|
||||
} else {
|
||||
console.log('无需导航')
|
||||
}
|
||||
|
||||
console.log('语言切换成功完成')
|
||||
return Promise.resolve()
|
||||
} catch (error) {
|
||||
console.error('语言切换失败:', error)
|
||||
// 出错时回退到默认语言
|
||||
try {
|
||||
await setLocale('en')
|
||||
console.log('已回退到默认语言: en')
|
||||
} catch (fallbackError) {
|
||||
console.error('回退到默认语言失败:', fallbackError)
|
||||
}
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前语言显示名称
|
||||
const getCurrentLanguageName = () => {
|
||||
try {
|
||||
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('获取语言名称失败:', error)
|
||||
return 'English'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取目标语言的显示名称
|
||||
const getLanguageName = (code) => {
|
||||
try {
|
||||
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.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,
|
||||
|
||||
// 工具函数
|
||||
isLanguageAvailable,
|
||||
|
||||
// 状态
|
||||
currentLocale: computed(() => locale.value)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
import { useRouter } from '#imports'
|
||||
import { useLocalePath, useSwitchLocalePath } from '#i18n'
|
||||
import { useLanguageSwitch } from './useLanguageSwitch.js'
|
||||
|
||||
/**
|
||||
* 统一的导航跳转 composable
|
||||
* 处理国际化路由跳转，确保在不同语言环境下都能正确跳转
|
||||
*/
|
||||
export const useNavigation = () => {
|
||||
const router = useRouter()
|
||||
const localePath = useLocalePath()
|
||||
const switchLocalePath = useSwitchLocalePath()
|
||||
const { switchLanguage } = useLanguageSwitch()
|
||||
|
||||
/**
|
||||
* 统一的路由跳转方法
|
||||
* @param {string|object} target - 目标路径或路由对象
|
||||
* @param {object} options - 跳转选项
|
||||
*/
|
||||
const navigateTo = (target, options = {}) => {
|
||||
const { replace = false, query = {} } = options
|
||||
|
||||
// 如果传入的是字符串路径
|
||||
if (typeof target === 'string') {
|
||||
const targetPath = localePath(target)
|
||||
if (replace) {
|
||||
router.replace({ path: targetPath, query })
|
||||
} else {
|
||||
router.push({ path: targetPath, query })
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// 如果传入的是路由名称对象
|
||||
if (target.name) {
|
||||
const targetPath = localePath(target.name)
|
||||
if (replace) {
|
||||
router.replace({ path: targetPath, query: { ...target.query, ...query } })
|
||||
} else {
|
||||
router.push({ path: targetPath, query: { ...target.query, ...query } })
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// 如果传入的是完整路径对象
|
||||
if (target.path) {
|
||||
const targetPath = localePath(target.path)
|
||||
if (replace) {
|
||||
router.replace({ path: targetPath, query: { ...target.query, ...query } })
|
||||
} else {
|
||||
router.push({ path: targetPath, query: { ...target.query, ...query } })
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// 默认处理
|
||||
if (replace) {
|
||||
router.replace(target)
|
||||
} else {
|
||||
router.push(target)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到首页
|
||||
*/
|
||||
const goHome = (options = {}) => {
|
||||
navigateTo('/', options)
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到关于我们页面
|
||||
*/
|
||||
const goAbout = (options = {}) => {
|
||||
navigateTo('/about-us', options)
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到产品页面
|
||||
*/
|
||||
const goProduct = (category = null, options = {}) => {
|
||||
const query = category ? { category, ...options.query } : options.query
|
||||
navigateTo('/product', { ...options, query })
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到产品页面（查看更多）
|
||||
*/
|
||||
const goToProductPage = (options = {}) => {
|
||||
navigateTo('/product', options)
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到联系我们页面
|
||||
*/
|
||||
const goContact = (options = {}) => {
|
||||
navigateTo('/contact-us', options)
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到隐私政策页面
|
||||
*/
|
||||
const goPrivacyPolicy = (options = {}) => {
|
||||
navigateTo('/privacy-policy', options)
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到产品详情页面
|
||||
*/
|
||||
const goProductDetail = (productId, options = {}) => {
|
||||
navigateTo('/product/detail', {
|
||||
...options,
|
||||
query: { id: productId, ...options.query }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 语言切换跳转
|
||||
* @param {string} locale - 目标语言代码
|
||||
* @param {object} i18nLocale - i18n locale 对象
|
||||
*/
|
||||
const switchLanguageRoute = (locale, i18nLocale) => {
|
||||
// 使用新的语言切换逻辑
|
||||
switchLanguage(locale, i18nLocale, router)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前语言环境下的路径
|
||||
* @param {string} path - 路径
|
||||
* @returns {string} 当前语言环境下的完整路径
|
||||
*/
|
||||
const getLocalizedPath = (path) => {
|
||||
return localePath(path)
|
||||
}
|
||||
|
||||
return {
|
||||
navigateTo,
|
||||
goHome,
|
||||
goAbout,
|
||||
goProduct,
|
||||
goToProductPage,
|
||||
goContact,
|
||||
goPrivacyPolicy,
|
||||
goProductDetail,
|
||||
switchLanguage: switchLanguageRoute,
|
||||
getLocalizedPath,
|
||||
localePath,
|
||||
switchLocalePath
|
||||
}
|
||||
}
|
||||
100
src/hook/lang.js
100
src/hook/lang.js
|
|
@ -1,100 +0,0 @@
|
|||
// export 语言检测 - 改进版，支持SSR，与Nuxt i18n保持一致
|
||||
export default function getLanguage() {
|
||||
// 服务端渲染时的默认语言
|
||||
if (typeof window === 'undefined') {
|
||||
return "en";
|
||||
}
|
||||
|
||||
// 客户端逻辑
|
||||
try {
|
||||
// 1. 优先检查cookie（与Nuxt i18n保持一致）
|
||||
const cookies = document.cookie.split(';');
|
||||
const localeCookie = cookies.find(cookie =>
|
||||
cookie.trim().startsWith('i18n_redirected=')
|
||||
);
|
||||
if (localeCookie) {
|
||||
const langValue = localeCookie.split('=')[1];
|
||||
if (['cn', 'en'].includes(langValue)) {
|
||||
return langValue;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 检查localStorage（兼容旧版本）
|
||||
const langStorage = localStorage.getItem('locale_lang');
|
||||
if (langStorage && ['cn', 'en'].includes(langStorage)) {
|
||||
return langStorage;
|
||||
}
|
||||
|
||||
// 3. 根据浏览器语言判断
|
||||
if (navigator.language.startsWith("en")) {
|
||||
return "en";
|
||||
} else if (navigator.language.includes("zh")) {
|
||||
return "cn";
|
||||
}
|
||||
|
||||
return "en"; // 默认英文
|
||||
} catch (error) {
|
||||
console.warn('localStorage access failed:', error);
|
||||
return "en"; // 错误时返回默认语言
|
||||
}
|
||||
}
|
||||
|
||||
// 新增：用于组件中的响应式语言检测
|
||||
export async function useLanguage() {
|
||||
// 检查是否在Nuxt环境中
|
||||
if (typeof window !== 'undefined') {
|
||||
// 客户端环境，使用useCookie
|
||||
try {
|
||||
const { useCookie } = await import('#imports');
|
||||
return useCookie('i18n_redirected', {
|
||||
default: () => 'en',
|
||||
secure: false,
|
||||
sameSite: 'lax'
|
||||
});
|
||||
} catch (e) {
|
||||
// 如果useCookie不可用，回退到普通函数
|
||||
return { value: getLanguage() };
|
||||
}
|
||||
} else {
|
||||
// 服务端环境，回退到普通函数
|
||||
return { value: getLanguage() };
|
||||
}
|
||||
}
|
||||
|
||||
// export 导出防抖函数
|
||||
export const debounce = (func, delay) => {
|
||||
let timerId;
|
||||
return () => {
|
||||
if (timerId) {
|
||||
clearTimeout(timerId);
|
||||
}
|
||||
timerId = setTimeout(() => {
|
||||
func();
|
||||
timerId = null;
|
||||
}, delay);
|
||||
};
|
||||
};
|
||||
|
||||
// 时间戳转换年月日
|
||||
export const formatTimestamp = (timestamp) => {
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1; // getMonth()返回的是0到11，所以要加1
|
||||
const day = date.getDate();
|
||||
// 将月份和日期补零，确保是两位数
|
||||
const formattedMonth = month < 10 ? "0" + month : month;
|
||||
const formattedDay = day < 10 ? "0" + day : day;
|
||||
return `${year}-${formattedMonth}-${formattedDay}`;
|
||||
};
|
||||
|
||||
// 时间戳转换年月日
|
||||
export const formatTimestamp2 = (timestamp) => {
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0"); // 使用padStart()方法补零
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
|
||||
return `${year}-${month}-${day}-${hours}:${minutes}`;
|
||||
};
|
||||
|
|
@ -1,12 +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
|
||||
}
|
||||
}))
|
||||
|
|
@ -1,347 +1,346 @@
|
|||
{
|
||||
"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-":"背景图",
|
||||
"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": "数据正在加载中...",
|
||||
|
||||
"home.about-syd": "关于明阳良光",
|
||||
"home.professional":"专业的智能系统制造商",
|
||||
"home.year": "年",
|
||||
"home.establish": "公司成立",
|
||||
"home.employees": "公司员工",
|
||||
"home.proportion": "研发占比",
|
||||
"home.factoryarea": "厂房面积",
|
||||
"home.recording":"记录明阳良光改变世界的时刻",
|
||||
"navbar.search": "你需要哪些帮助",
|
||||
"navbar.product": "产品",
|
||||
"navbar.app": "APP下载",
|
||||
"navbar.recommend": "搜索建议",
|
||||
"navbar.language": "语言",
|
||||
|
||||
"foot.service-terms": "服务协议",
|
||||
"foot.privacy-policy": "隐私声明",
|
||||
"foot.valid-email": "请输入有效的电子邮件地址",
|
||||
"foot.company":"中山市明阳良光照明有限公司版权所有",
|
||||
"foot.record-number":"备案号：粤ICP备15063791号",
|
||||
"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": "为您的产品保驾护航，以质量赢得信誉，以服务回报客户",
|
||||
|
||||
"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": "返回首页",
|
||||
"home.learn-more": "了解更多",
|
||||
"home.view-more": "查看更多",
|
||||
"home.situation": "明阳良光 企业概况",
|
||||
"home.platform": "台",
|
||||
"home.individual": "个",
|
||||
|
||||
"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月认证为国家级高新技术企业。",
|
||||
"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-": "背景图",
|
||||
|
||||
"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":"样品试产",
|
||||
"home.about-syd": "关于明阳良光",
|
||||
"home.professional": "专业的智能系统制造商",
|
||||
"home.year": "年",
|
||||
"home.establish": "公司成立",
|
||||
"home.employees": "公司员工",
|
||||
"home.proportion": "研发占比",
|
||||
"home.factoryarea": "厂房面积",
|
||||
"home.recording": "记录明阳良光改变世界的时刻",
|
||||
|
||||
"usermanual.years-service-life": "10年+寿命",
|
||||
"download.excellentenergy": "卓越能效储能电源",
|
||||
"download.apk-download": "APK安装下载",
|
||||
"download.app-qr-code": "App二维码",
|
||||
"foot.service-terms": "服务协议",
|
||||
"foot.privacy-policy": "隐私声明",
|
||||
"foot.valid-email": "请输入有效的电子邮件地址",
|
||||
"foot.company": "中山市明阳良光照明有限公司版权所有",
|
||||
"foot.record-number": "备案号：粤ICP备15063791号",
|
||||
|
||||
"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": "其他品牌",
|
||||
"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": "合作洽谈",
|
||||
|
||||
"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": "配件详情",
|
||||
"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": "返回首页",
|
||||
|
||||
"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防火等级的外壳；带有加强手柄；",
|
||||
"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": "源源不断的人才引进",
|
||||
|
||||
"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": "了解更多",
|
||||
"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": "企业使命",
|
||||
|
||||
"home.products.title": "核心产品",
|
||||
"home.products.subtitle": "专业的监控安防设备与LED照明解决方案",
|
||||
"home.products.view-all": "查看全部产品",
|
||||
"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月认证为国家级高新技术企业。",
|
||||
|
||||
"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": "节能环保，智能控制",
|
||||
"aboutus.advantage-1": "ID 结构设计",
|
||||
"aboutus.advantage-2": "产品质量",
|
||||
"aboutus.advantage-3": "硬件开发",
|
||||
"aboutus.advantage-factors": "关键成功要素",
|
||||
"aboutus.advantage-4": "软件开发",
|
||||
"aboutus.advantage-5": "生产制造",
|
||||
"aboutus.advantage-6": "人工智能",
|
||||
|
||||
"product.hot.badge": "热门",
|
||||
"product.learn-more": "了解详情",
|
||||
"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": "样品试产",
|
||||
|
||||
"product.breadcrumb.home": "首页",
|
||||
"product.breadcrumb.product-center": "产品中心",
|
||||
"product.breadcrumb.monitor": "监控摄像头",
|
||||
"product.breadcrumb.street-light": "路灯",
|
||||
"usermanual.years-service-life": "10年+寿命",
|
||||
"download.excellentenergy": "卓越能效储能电源",
|
||||
"download.apk-download": "APK安装下载",
|
||||
"download.app-qr-code": "App二维码",
|
||||
|
||||
"product.category.product-center": "产品中心",
|
||||
"product.category.monitor": "监控摄像头",
|
||||
"product.category.street-light": "路灯",
|
||||
"detail.power-99": "适配99%",
|
||||
"detail.appliances": "常用家电",
|
||||
"detail.parameters": "详细参数",
|
||||
"detail.may-also-like": "可能你也会喜欢",
|
||||
"detail.view-more": "查看更多",
|
||||
"detail.summary": "概述",
|
||||
"detail.specs": "规格",
|
||||
"detail.detail": "详情",
|
||||
|
||||
"product.s02.subtitle": "智能监控摄像头",
|
||||
"product.s03.subtitle": "夜视监控摄像头",
|
||||
"product.t05.subtitle": "全天候监控摄像头",
|
||||
"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": "其他品牌",
|
||||
|
||||
"product.specs.number": "编号",
|
||||
"product.specs.type": "类型",
|
||||
"product.specs.specification": "规格",
|
||||
"product.specs.brand": "品牌",
|
||||
"n051.battery-1": "磷酸铁锂电池",
|
||||
"n051.battery-2": "安全性能高·使用寿命长",
|
||||
"n051.battery-3": "耐高温·容量大·环境友好",
|
||||
"n051.battery2-1": "BMS保护系统",
|
||||
"n051.battery2-2": "高低温保护",
|
||||
"n051.battery2-3": "高低压保护",
|
||||
"n051.battery2-4": "过流过载保护",
|
||||
|
||||
"product.page.learn-more": "了解更多",
|
||||
"n051.powered-simultaneously": "最高可同时给15个设备供电！",
|
||||
"n051.ports-animation": "15ports动画",
|
||||
"n051.intelligent": "智能APP·一手掌控",
|
||||
"n051.control-output": "随时随地查看电池状态",
|
||||
"n051.click-open": "一键打开电源，控制输出",
|
||||
"n051.accessories-details": "配件详情",
|
||||
|
||||
"about.page.title": "关于我们",
|
||||
"about.page.subtitle": "ABOUT US",
|
||||
"about.page.description": "专业安防监控设备制造商 · 全球化服务提供商",
|
||||
"about.breadcrumb.home": "首页",
|
||||
"about.breadcrumb.about": "关于我们",
|
||||
"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防火等级的外壳；带有加强手柄；",
|
||||
|
||||
"about.stats.experience": "年专业经验",
|
||||
"about.stats.team": "专业团队",
|
||||
"about.stats.countries": "服务国家",
|
||||
"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": "了解更多",
|
||||
|
||||
"about.intro.title": "企业简介",
|
||||
"about.intro.p1": "2011年，SPML成立，专注于安防监控设备的研发与制造。自此，让每个用户都能享受到安全可靠的监控保护成为SPML的企业使命，也激励着我们持续为全球客户提供高质量的产品和服务。",
|
||||
"about.intro.p2": "十余年来，SPML专注于可持续安防监控研发、智能识别、云端存储以及安防数字化领域，公司设计、研发、制造智能摄像头、监控系统、安防设备，为全球家庭及工商业用户提供优质的全场景安防监控解决方案。我们将与全球合作伙伴共同创造一个更安全的世界，为人类打造全球领先的智能安防生态！",
|
||||
"home.products.title": "核心产品",
|
||||
"home.products.subtitle": "专业的监控安防设备与LED照明解决方案",
|
||||
"home.products.view-all": "查看全部产品",
|
||||
|
||||
"about.achievements.countries": "服务国家",
|
||||
"about.achievements.team": "专业团队",
|
||||
"about.achievements.experience": "年专业经验",
|
||||
"about.achievements.vision.title": "企业愿景",
|
||||
"about.achievements.vision.desc": "成为全球领先的安防监控解决方案提供商，为用户提供最安全可靠的监控保护",
|
||||
"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": "节能环保，智能控制",
|
||||
|
||||
"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": "专注于智能摄像头、监控系统、安防设备等产品的研发制造，通过持续的技术创新和严格的质量控制，为客户提供高性能、高可靠性的安防监控产品。",
|
||||
"product.hot.badge": "热门",
|
||||
"product.learn-more": "了解详情",
|
||||
|
||||
"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": "邮箱",
|
||||
"product.breadcrumb.home": "首页",
|
||||
"product.breadcrumb.product-center": "产品中心",
|
||||
"product.breadcrumb.monitor": "监控摄像头",
|
||||
"product.breadcrumb.street-light": "路灯",
|
||||
|
||||
"nav.home": "首页",
|
||||
"nav.about": "关于我们",
|
||||
"nav.products": "产品系列",
|
||||
"nav.contact": "联系我们",
|
||||
"product.category.product-center": "产品中心",
|
||||
"product.category.monitor": "监控摄像头",
|
||||
"product.category.street-light": "路灯",
|
||||
|
||||
"footer.company.name": "中山市明阳良光照明有限公司",
|
||||
"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": "微信",
|
||||
|
|
@ -349,54 +348,80 @@
|
|||
"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.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.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.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": "我们将继续专注于摄像头与照明产品的制造，为客户提供优质的产品和服务。"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -299,7 +299,7 @@
|
|||
"about.breadcrumb.about": "About Us",
|
||||
|
||||
"about.stats.experience": "+ Years Experience",
|
||||
"about.stats.team": "+ Professional Team",
|
||||
"about.stats.team": "+ Employee Team",
|
||||
"about.stats.countries": "+ Countries Served",
|
||||
|
||||
"about.intro.title": "Company Introduction",
|
||||
|
|
@ -307,8 +307,8 @@
|
|||
"about.intro.p2": "For more than ten years, SPML has focused on sustainable security monitoring R&D, intelligent recognition, cloud storage, and security digitization. The company designs, develops, and manufactures smart cameras, monitoring systems, and security equipment, providing high-quality full-scenario security monitoring solutions for global home and commercial users. We will work with global partners to create a safer world and build a globally leading intelligent security ecosystem for humanity!",
|
||||
|
||||
"about.achievements.countries": "Countries Served",
|
||||
"about.achievements.team": "Professional Team",
|
||||
"about.achievements.experience": "+ Years Experience",
|
||||
"about.achievements.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",
|
||||
|
||||
|
|
@ -347,6 +347,9 @@
|
|||
"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",
|
||||
|
|
@ -381,13 +384,13 @@
|
|||
"about.production.title": "Manufacturing Process",
|
||||
"about.production.subtitle": "Professional production team and strict process flow to ensure product quality meets international standards",
|
||||
"about.production.assembly": "Precision Assembly",
|
||||
"about.production.assembly.desc": "Professional technicians precision assembly",
|
||||
"about.production.assembly.desc": "Professional precision assembly",
|
||||
"about.production.testing": "Quality Testing",
|
||||
"about.production.testing.desc": "Strict testing of every product",
|
||||
"about.production.testing.desc": "Strict product testing",
|
||||
"about.production.debugging": "Product Debugging",
|
||||
"about.production.debugging.desc": "Ensure optimal product performance",
|
||||
"about.production.debugging.desc": "Ensure optimal performance",
|
||||
"about.production.packaging": "Exquisite Packaging",
|
||||
"about.production.packaging.desc": "Protect products for safe transportation",
|
||||
"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)",
|
||||
|
|
@ -396,5 +399,28 @@
|
|||
"about.production.lines": "Production Lines",
|
||||
|
||||
"about.company.image": "SPML Corporate Image",
|
||||
"about.tech.image": "SPML Technology Showcase"
|
||||
"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."
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -30,92 +30,253 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pageMain {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 响应式断点系统 */
|
||||
$breakpoint-xs: 375px;
|
||||
$breakpoint-sm: 480px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 1024px;
|
||||
$breakpoint-xl: 1440px;
|
||||
$breakpoint-2xl: 1920px;
|
||||
$breakpoint-4k: 2560px;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
.pageMain {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width:850px) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
@media (max-width: 850px) {
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
&__left {
|
||||
&__avater {
|
||||
width: 520px;
|
||||
height: 370px;
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (min-width:1920px) {
|
||||
width: 5.2rem;
|
||||
height: 3.7rem;
|
||||
}
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width:850px) {
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__right {
|
||||
width: 300px;
|
||||
color: #272727;
|
||||
@media (max-width: 850px) {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width:1920px) {
|
||||
width: 3rem;
|
||||
}
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width:520px) {
|
||||
margin-top: 50px;
|
||||
width: 60%;
|
||||
}
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__text {
|
||||
font-size: 23px;
|
||||
font-family: MiSans-Regular;
|
||||
line-height: 1.8;
|
||||
color: #636363;
|
||||
&__left {
|
||||
&__avater {
|
||||
width: 520px;
|
||||
height: 370px;
|
||||
|
||||
@media (min-width:1920px) {
|
||||
font-size: 0.23rem;
|
||||
}
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 800px;
|
||||
height: 570px;
|
||||
}
|
||||
|
||||
@media (max-width:520px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
width: 650px;
|
||||
height: 460px;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: fit-content;
|
||||
padding: 0 10px;
|
||||
margin-top: 20px;
|
||||
background: #03060b;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #f7f7f7;
|
||||
font-size: 15px;
|
||||
line-height: 2;
|
||||
font-family: MiSans-Medium;
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
width: 600px;
|
||||
height: 425px;
|
||||
}
|
||||
|
||||
@media (min-width:1920px) {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.12rem;
|
||||
padding: 0 0.1rem;
|
||||
border-radius: 0.06rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1920px) {
|
||||
width: 5.2rem;
|
||||
height: 3.7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
width: 80%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
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: 0; // 移除这里的50px，避免重复间距
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__text {
|
||||
font-size: 23px;
|
||||
font-family: MiSans-Regular;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
width: fit-content;
|
||||
padding: 0 10px;
|
||||
margin-top: 20px;
|
||||
background: #03060b;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #f7f7f7;
|
||||
font-size: 15px;
|
||||
line-height: 2;
|
||||
font-family: MiSans-Medium;
|
||||
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;
|
||||
font-size: 0.12rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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，避免重复间距
|
||||
}
|
||||
|
||||
/* 解决加载缓缓的问题 */
|
||||
|
|
|
|||
|
|
@ -13,9 +13,51 @@ import "swiper/css/navigation";
|
|||
import "swiper/css/pagination";
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
const { cdnImageUrl } = useImagePath();
|
||||
|
||||
// 调试信息
|
||||
onMounted(() => {
|
||||
console.log('=== 首页语言状态 ===');
|
||||
console.log('当前语言:', locale.value);
|
||||
console.log('浏览器语言:', navigator.language);
|
||||
console.log('浏览器语言列表:', navigator.languages);
|
||||
|
||||
// 检查Cookie
|
||||
const cookieLanguage = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('i18n_redirected='))
|
||||
?.split('=')[1] || '无';
|
||||
console.log('Cookie 语言:', cookieLanguage);
|
||||
|
||||
// 检查所有Cookie
|
||||
console.log('所有Cookie:', document.cookie);
|
||||
|
||||
// 检查localStorage
|
||||
console.log('localStorage语言:', localStorage.getItem('i18n_redirected'));
|
||||
|
||||
// 分析语言检测逻辑
|
||||
console.log('=== 语言检测分析 ===');
|
||||
console.log('默认语言:', 'en');
|
||||
console.log('可用语言:', ['en', 'cn']);
|
||||
console.log('浏览器语言匹配:', navigator.language.includes('zh') ? '应该匹配中文' : '应该匹配英文');
|
||||
console.log('Cookie应该设置为什么:', navigator.language.includes('zh') ? 'cn' : 'en');
|
||||
|
||||
// 检查当前URL
|
||||
console.log('当前URL:', window.location.href);
|
||||
console.log('当前路径:', window.location.pathname);
|
||||
|
||||
// 添加清除Cookie的方法到window对象，方便测试
|
||||
window.clearLanguageCookie = () => {
|
||||
document.cookie = 'i18n_redirected=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
||||
console.log('已清除语言Cookie，请刷新页面重新测试');
|
||||
alert('已清除语言Cookie，请刷新页面重新测试');
|
||||
};
|
||||
|
||||
console.log('=== 测试方法 ===');
|
||||
console.log('在控制台输入: window.clearLanguageCookie() 来清除Cookie');
|
||||
});
|
||||
|
||||
// 设置页面标题
|
||||
usePageTitle("page.home");
|
||||
|
||||
|
|
@ -274,12 +316,12 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1400px;
|
||||
max-width: 1250px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1200px;
|
||||
max-width: 1250px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,27 +4,22 @@
|
|||
onBeforeMount
|
||||
} from 'vue'
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n";
|
||||
useI18n
|
||||
} 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 langToCheck from '@/hook/lang.js';
|
||||
const {
|
||||
t
|
||||
t, locale
|
||||
} = useI18n();
|
||||
const langIs = ref('')
|
||||
const langIs = ref(locale)
|
||||
useHead({
|
||||
title: t('foot.privacy-policy'),
|
||||
})
|
||||
onBeforeMount(()=>{
|
||||
langIs.value = langToCheck()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<zh-content v-if="langIs == 'zh-Hans' "></zh-content>
|
||||
<ja-content v-else-if="langIs == 'ja' "></ja-content>
|
||||
<zh-content v-if="langIs == 'cn' "></zh-content>
|
||||
<en-content v-else></en-content>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,9 @@
|
|||
import {
|
||||
GetProductDetailApi
|
||||
} from "@/service/api.js";
|
||||
// 语言判断
|
||||
import langToCheck from "@/hook/lang.js";
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n";
|
||||
import {
|
||||
useI18n
|
||||
} from "#imports";
|
||||
import topBar from "@/components/top/title-bar.vue";
|
||||
import footBar from "@/components/bottom/foot-bar.vue";
|
||||
// // 折叠面板
|
||||
|
|
@ -25,13 +23,10 @@
|
|||
useRoute
|
||||
} from '#imports';
|
||||
const {
|
||||
t
|
||||
t, locale
|
||||
} = useI18n();
|
||||
const route = useRoute();
|
||||
const langIs = ref('');
|
||||
onBeforeMount(()=>{
|
||||
langIs.value = langToCheck()
|
||||
})
|
||||
const langIs = ref(locale);
|
||||
//监听返回顶部
|
||||
let proId = ref("");
|
||||
let proName = ref("");
|
||||
|
|
@ -226,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: 9.8rem;
|
||||
width: 1200px;
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
width: 750px;
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 1800px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
width: 90%;
|
||||
@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: $breakpoint-md) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -247,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 方框介绍
|
||||
|
|
@ -268,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;
|
||||
|
|
@ -288,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;
|
||||
}
|
||||
}
|
||||
|
|
@ -309,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;
|
||||
}
|
||||
}
|
||||
|
||||
//端口介绍
|
||||
|
|
@ -316,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;
|
||||
|
|
@ -338,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;
|
||||
}
|
||||
|
|
@ -353,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -366,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>
|
||||
|
|
@ -9,17 +9,17 @@ computed
|
|||
import topBar from "@/components/top/title-bar.vue"
|
||||
import footBar from "@/components/bottom/foot-bar.vue";
|
||||
import {
|
||||
useRouter,
|
||||
useRoute
|
||||
} from '#imports';
|
||||
import { useI18n } from "#imports";
|
||||
import { usePageTitle } from "@/composables/usePageTitle.js";
|
||||
import { useImagePath } from "@/composables/useImagePath.js";
|
||||
import { useNavigation } from "@/composables/useNavigation.js";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const { cdnImageUrl } = useImagePath();
|
||||
const { navigateTo } = useNavigation();
|
||||
|
||||
// 设置页面标题
|
||||
usePageTitle("page.product");
|
||||
|
|
@ -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%;
|
||||
|
|
@ -448,12 +483,58 @@ onActivated(() => {
|
|||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
max-width: 1800px;
|
||||
padding: 0 60px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
max-width: 1200px; /* 修正：应该是1200px，不是1400px */
|
||||
padding: 0 50px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
max-width: 1200px; /* 修正：应该是1200px，不是1400px */
|
||||
padding: 0 40px; /* 与顶部导航栏保持一致 */
|
||||
}
|
||||
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: $breakpoint-md) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
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;
|
||||
|
|
@ -483,79 +564,88 @@ onActivated(() => {
|
|||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
max-width: 1800px;
|
||||
padding: 40px 60px;
|
||||
padding: 60px 60px; /* 与顶部导航栏保持一致 */
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
max-width: 1200px;
|
||||
padding: 50px 50px; /* 与顶部导航栏保持一致 */
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
max-width: 1200px;
|
||||
padding: 40px 40px; /* 与顶部导航栏保持一致 */
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
max-width: 1400px;
|
||||
padding: 30px 40px;
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
padding: 30px 30px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
max-width: 1200px;
|
||||
padding: 25px 30px;
|
||||
@media (max-width: $breakpoint-md) {
|
||||
flex-direction: column;
|
||||
padding: 25px 20px;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 20px 24px;
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 20px 16px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
padding: 15px 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 12px 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
padding: 10px 12px;
|
||||
gap: 12px;
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
padding: 15px 12px;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
width: 200px; /* 从240px减小到200px */
|
||||
flex-shrink: 0;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
width: 380px;
|
||||
/* 4K 和超大屏幕 */
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
width: 320px; /* 从400px减小到320px */
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
width: 330px;
|
||||
/* 1920px 屏幕 */
|
||||
@media (min-width: $breakpoint-2xl) and (max-width: #{$breakpoint-4k - 1px}) {
|
||||
width: 260px; /* 从320px减小到260px */
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
width: 300px;
|
||||
/* 1440px 屏幕 */
|
||||
@media (min-width: $breakpoint-xl) and (max-width: #{$breakpoint-2xl - 1px}) {
|
||||
width: 220px; /* 从280px减小到220px */
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 240px;
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
width: 220px; /* 从260px减小到220px */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: $breakpoint-md) {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* 480px 屏幕 */
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -565,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;
|
||||
|
|
@ -575,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 {
|
||||
|
|
@ -592,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);
|
||||
}
|
||||
|
|
@ -613,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;
|
||||
|
|
@ -620,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 {
|
||||
|
|
@ -646,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);
|
||||
}
|
||||
|
|
@ -660,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;
|
||||
|
|
@ -681,6 +858,10 @@ onActivated(() => {
|
|||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: $breakpoint-4k) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.sidebar-product-item {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
|
@ -688,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;
|
||||
}
|
||||
|
|
@ -701,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%;
|
||||
|
|
@ -719,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -741,62 +960,88 @@ 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
// 4K 和超大屏幕
|
||||
@media (min-width: 2560px) {
|
||||
/* 4K 和超大屏幕 */
|
||||
@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;
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
/* 1024px 屏幕 */
|
||||
@media (max-width: $breakpoint-lg) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 25px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (max-width: 1919px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 22px;
|
||||
margin-bottom: 35px;
|
||||
/* 768px 屏幕 */
|
||||
@media (max-width: $breakpoint-md) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
/* 375px 屏幕 */
|
||||
@media (max-width: $breakpoint-xs) {
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: #fff;
|
||||
|
|
@ -806,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);
|
||||
}
|
||||
|
|
@ -822,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%;
|
||||
|
|
@ -837,22 +1108,50 @@ onActivated(() => {
|
|||
}
|
||||
|
||||
.product-info {
|
||||
padding: 18px;
|
||||
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 {
|
||||
|
|
@ -866,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;
|
||||
|
|
@ -882,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;
|
||||
|
|
@ -891,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;
|
||||
|
|
@ -1040,9 +1370,7 @@ onActivated(() => {
|
|||
}
|
||||
}
|
||||
|
||||
// 响应式设计已在上面的具体组件中处理
|
||||
|
||||
// 弹框响应式
|
||||
/* 弹框响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.modal-content {
|
||||
.modal-body {
|
||||
|
|
|
|||
|
|
@ -13,14 +13,13 @@
|
|||
import {
|
||||
GetProductDetailApi
|
||||
} from "@/service/api.js";
|
||||
import langToCheck from "@/hook/lang.js";
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n";
|
||||
useI18n
|
||||
} from "#imports";
|
||||
const {
|
||||
t
|
||||
t, locale
|
||||
} = useI18n();
|
||||
const langIs = ref('');
|
||||
const langIs = ref(locale);
|
||||
import {
|
||||
useRoute
|
||||
} from '#imports';
|
||||
|
|
@ -36,7 +35,6 @@
|
|||
|
||||
let tabCollection = reactive([]);
|
||||
onBeforeMount(() => {
|
||||
langIs.value = langToCheck()
|
||||
tabCollection.push({
|
||||
name: t("detail.summary"),
|
||||
value: 0,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,622 @@
|
|||
@charset "UTF-8";
|
||||
.scroll-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 100vw;
|
||||
height: 5rem;
|
||||
background: url("/static/product/goods__banner.webp") center center/cover;
|
||||
}
|
||||
|
||||
.banner__box {
|
||||
font-size: 24px;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 0.5rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #ffffff;
|
||||
/* 1300px以下屏幕适配 */
|
||||
}
|
||||
|
||||
@media (max-width: 1900px) {
|
||||
.menu {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.menu {
|
||||
height: 0.78rem;
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.menu__container {
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.menu__container {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__container__left {
|
||||
width: 1.6rem;
|
||||
}
|
||||
|
||||
.menu__container__box {
|
||||
display: flex;
|
||||
font-family: MiSans-Regular;
|
||||
flex-basis: 65%;
|
||||
}
|
||||
|
||||
.menu__container__box__list {
|
||||
height: auto;
|
||||
padding: 0.12rem 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.menu__container__box__list li {
|
||||
padding: 0 .3rem;
|
||||
height: auto;
|
||||
line-height: 0.2rem;
|
||||
border-right: 0.01rem solid #e5e5e5;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu__container__box__list li:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.menu__container__box__list--Active {
|
||||
color: #2164ff;
|
||||
}
|
||||
|
||||
.menu__container__dropdown {
|
||||
min-width: 1.6rem;
|
||||
height: inherit;
|
||||
position: relative;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.menu__container__dropdown__selected {
|
||||
width: inherit;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-left: 0.015rem solid #e5e5e5;
|
||||
border-right: 0.015rem solid #e5e5e5;
|
||||
height: 100%;
|
||||
color: #333;
|
||||
display: flex;
|
||||
line-height: 0.45rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu__container__dropdown__selected__text {
|
||||
min-width: 1.4rem;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.menu__container__dropdown__selected__arrow {
|
||||
width: 0.2rem;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.menu__container__dropdown__selected__arrow .iconfont {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 10px;
|
||||
line-height: inherit;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.menu__container__dropdown__selected__arrow--down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.menu__container__dropdown__options {
|
||||
position: absolute;
|
||||
top: calc(100% + 5px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
border-radius: 0.05rem;
|
||||
box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1);
|
||||
z-index: 800;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.menu__container__dropdown__options__item {
|
||||
line-height: 2.7;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.menu__container__dropdown__options__item:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
@media (max-width: 1750px) {
|
||||
.menu {
|
||||
font-size: 0.17rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.menu {
|
||||
font-size: 0.22rem;
|
||||
}
|
||||
.menu__container__left {
|
||||
display: none;
|
||||
}
|
||||
.menu__container__box {
|
||||
flex-basis: 70%;
|
||||
}
|
||||
.menu__container__dropdown {
|
||||
min-width: 2.2rem;
|
||||
}
|
||||
.menu__container__dropdown__selected__text {
|
||||
min-width: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.menu {
|
||||
font-size: 0.3rem;
|
||||
height: auto;
|
||||
min-height: 1rem;
|
||||
}
|
||||
.menu__container__left {
|
||||
display: none;
|
||||
}
|
||||
.menu__container__box {
|
||||
flex-basis: 70%;
|
||||
}
|
||||
.menu__container__dropdown {
|
||||
min-width: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.menu {
|
||||
font-size: 0.35rem;
|
||||
height: auto;
|
||||
min-height: 1rem;
|
||||
}
|
||||
.menu__container__left {
|
||||
display: none;
|
||||
}
|
||||
.menu__container__box {
|
||||
flex-basis: 70%;
|
||||
}
|
||||
.menu__container__dropdown {
|
||||
min-width: 3.8rem;
|
||||
}
|
||||
.menu__container__dropdown__selected__text {
|
||||
min-width: 3.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.menu {
|
||||
font-size: 0.56rem;
|
||||
height: 2rem;
|
||||
padding: 0 0rem;
|
||||
}
|
||||
.menu__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 2rem;
|
||||
}
|
||||
.menu__container__box {
|
||||
flex-basis: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: inherit;
|
||||
}
|
||||
.menu__container__box__list {
|
||||
padding: 0;
|
||||
height: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
.menu__container__box__list li {
|
||||
padding: 0 0.5rem;
|
||||
line-height: 2rem;
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.02rem;
|
||||
border-right: 0;
|
||||
}
|
||||
.menu__container__dropdown {
|
||||
margin: 0.8rem auto 0 0;
|
||||
width: 8.3rem;
|
||||
float: right;
|
||||
font-size: 0.56rem;
|
||||
}
|
||||
.menu__container__dropdown__selected {
|
||||
background-color: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.menu__container__dropdown__selected__text {
|
||||
min-width: 6rem;
|
||||
text-align: center;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.menu__container__dropdown__selected__arrow {
|
||||
width: 1rem;
|
||||
}
|
||||
.menu__container__dropdown__options {
|
||||
font-size: 0.56rem;
|
||||
width: 8.3rem;
|
||||
box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.menu__container__dropdown__options__item {
|
||||
padding: 0.3rem 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.mobile-menu {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.goods {
|
||||
min-height: 6rem;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.goods {
|
||||
min-height: 13rem;
|
||||
}
|
||||
}
|
||||
|
||||
.goods__product {
|
||||
margin: 0.3rem auto 1rem;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.goods__product__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 499px) {
|
||||
.goods__product__list {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 3rem;
|
||||
min-height: 17rem;
|
||||
}
|
||||
}
|
||||
|
||||
.goods__product__list__li {
|
||||
flex-basis: 32.5%;
|
||||
border-radius: 0.1rem;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: 5rem;
|
||||
margin-right: 1.2%;
|
||||
}
|
||||
|
||||
@media (min-width: 850px) {
|
||||
.goods__product__list__li:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.goods__product__list__li:nth-child(n+4) {
|
||||
margin-top: 1.2%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods__product__list__li__top {
|
||||
height: 3.25rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.goods__product__list__li__top__avater-2 {
|
||||
height: auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.goods__product__list__li__top__avater {
|
||||
border-radius: 0.1rem 0.1rem 0 0;
|
||||
width: 100%;
|
||||
height: 3.25rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.goods__product__list__li__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-family: MiSans-Medium;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goods__product__list__li__content__box {
|
||||
height: 1rem;
|
||||
font-size: 0.2rem;
|
||||
color: #333333;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.goods__product__list__li__content__box__title {
|
||||
font-family: "Microsoft YaHei";
|
||||
}
|
||||
|
||||
.goods__product__list__li__content__btn {
|
||||
width: 1.1rem;
|
||||
height: 0.4rem;
|
||||
background: #1777ff;
|
||||
border-radius: 0.26rem;
|
||||
color: #ffffff;
|
||||
line-height: 0.4rem;
|
||||
font-size: 0.16rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-family: MiSans-Regular;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.goods__product__list__li__content__box {
|
||||
font-size: 0.25rem;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.goods__product__list__li__content__btn {
|
||||
font-size: 0.22rem;
|
||||
margin: 0.3rem 0;
|
||||
width: 1.5rem;
|
||||
height: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.goods__product__list__li__content__box {
|
||||
font-size: 0.3rem;
|
||||
line-height: 1.7;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
.goods__product__list__li__content__btn {
|
||||
font-size: 0.26rem;
|
||||
margin: 0.3rem 0;
|
||||
width: 1.8rem;
|
||||
height: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 849px) {
|
||||
.goods__product__list__li__content__box {
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
.goods__product__list__li__content__btn {
|
||||
font-size: 0.36rem;
|
||||
margin: 0.8rem 0;
|
||||
width: 2.6rem;
|
||||
border-radius: 2rem;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.goods__product__list__li__content__box {
|
||||
height: 2rem;
|
||||
font-size: 0.55rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.goods__product__list__li__content__btn {
|
||||
font-size: 0.45rem;
|
||||
margin: 0.5rem 0;
|
||||
width: 3rem;
|
||||
border-radius: 2rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 499px) {
|
||||
.goods__product__list__li__content__box {
|
||||
font-size: 0.66rem;
|
||||
}
|
||||
.goods__product__list__li__content__btn {
|
||||
font-size: 0.55rem;
|
||||
margin: 0.5rem 0;
|
||||
width: 4rem;
|
||||
border-radius: 2rem;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.goods__product__list__li--point {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.goods__product {
|
||||
width: 15rem;
|
||||
}
|
||||
.goods__product__list {
|
||||
width: inherit;
|
||||
}
|
||||
.goods__product__list__li {
|
||||
height: 7.2rem;
|
||||
}
|
||||
.goods__product__list__li__top {
|
||||
height: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) and (max-width: 849px) {
|
||||
.goods__product__list__li {
|
||||
margin-right: 2.5%;
|
||||
height: 9.5rem;
|
||||
flex-basis: 47%;
|
||||
}
|
||||
.goods__product__list__li__top {
|
||||
height: 6rem;
|
||||
}
|
||||
.goods__product__list__li:nth-child(n+3) {
|
||||
margin-top: 2.5%;
|
||||
}
|
||||
.goods__product__list__li:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) and (max-width: 600px) {
|
||||
.goods__product {
|
||||
width: 90%;
|
||||
}
|
||||
.goods__product__list {
|
||||
width: 100%;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.goods__product__list__li {
|
||||
height: 13rem;
|
||||
flex-basis: 48%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.goods__product__list__li:nth-child(n+3) {
|
||||
margin-top: 4%;
|
||||
}
|
||||
.goods__product__list__li__top {
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.goods__product__page-num {
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
margin: 0.4rem auto 0.3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goods__product__page-num__item {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
font-size: 0.18rem;
|
||||
text-align: center;
|
||||
line-height: 0.4rem;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
margin: 0 0.1rem;
|
||||
border-radius: 50%;
|
||||
border: 0.01rem solid #d0d0d0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.goods__product__page-num--active {
|
||||
color: #fff;
|
||||
background-color: #1777ff;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
|
||||
.goods__product__page-num--grey {
|
||||
color: #bfbfbf;
|
||||
cursor: not-allowed;
|
||||
color: #eee;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.goods__product__page-num {
|
||||
width: fit-content;
|
||||
height: 0.4rem;
|
||||
margin: 0.4rem auto 0.6rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.goods__product__page-num__item {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 0.36rem;
|
||||
text-align: center;
|
||||
line-height: 1rem;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
margin: 0 0.2rem;
|
||||
border-radius: 50%;
|
||||
color: #000;
|
||||
}
|
||||
.goods__product__page-num--active {
|
||||
color: #fff;
|
||||
background-color: #1777ff;
|
||||
}
|
||||
.goods__product__page-num--grey {
|
||||
color: #bfbfbf;
|
||||
border: 1px solid #bfbfbf;
|
||||
cursor: not-allowed;
|
||||
color: #eee;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (max-width: 640px) {
|
||||
.goods__product__page-num {
|
||||
height: 1rem;
|
||||
margin: 1rem auto 1rem;
|
||||
}
|
||||
.goods__product__page-num__item {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
font-size: 0.5rem;
|
||||
text-align: center;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
.goods__product__page-num--active {
|
||||
color: #fff;
|
||||
line-height: 1.2rem;
|
||||
background-color: #1777ff;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -154,6 +154,7 @@
|
|||
@media (max-width:1750px) {
|
||||
font-size: 0.17rem;
|
||||
}
|
||||
/* 1300px以下屏幕适配 */
|
||||
@media (max-width:1300px) {
|
||||
font-size: 0.22rem;
|
||||
&__container{
|
||||
|
|
|
|||
|
|
@ -4,31 +4,27 @@
|
|||
onBeforeMount
|
||||
} from "vue";
|
||||
import {
|
||||
useRoute,
|
||||
useRouter
|
||||
useRoute
|
||||
} from "#imports";
|
||||
import {
|
||||
useI18n
|
||||
} from "vue-i18n";
|
||||
import langToCheck from "@/hook/lang.js";
|
||||
} from "#imports";
|
||||
import { useNavigation } from "@/composables/useNavigation.js";
|
||||
|
||||
const {
|
||||
t
|
||||
t, locale
|
||||
} = useI18n();
|
||||
|
||||
useHead({
|
||||
title: t('contact.thank-message'),
|
||||
})
|
||||
|
||||
const langIs = ref('')
|
||||
onBeforeMount(()=>{
|
||||
langIs.value = langToCheck()
|
||||
})
|
||||
const langIs = ref(locale)
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const { goHome } = useNavigation();
|
||||
const BackToMenu = () => {
|
||||
router.push("/");
|
||||
goHome();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -38,7 +34,7 @@
|
|||
<img src="/static/contact-us/complete.webp" alt="Icon">
|
||||
</div>
|
||||
<div class="message">{{t('contact.thank-message')}}</div>
|
||||
<button type="button" @click="BackToMenu">{{$t('contact.back')}}</button>
|
||||
<button type="button" @click="BackToMenu">{{t('contact.back')}}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
export default defineNuxtPlugin(() => {
|
||||
// 在客户端初始化时设置语言
|
||||
if (process.client) {
|
||||
console.log('=== 语言初始化插件启动 ===')
|
||||
|
||||
// 设置全局标记
|
||||
window.__LANGUAGE_PLUGIN_LOADED__ = true
|
||||
|
||||
// 等待 DOM 加载完成后记录状态
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOM 加载完成，语言插件就绪')
|
||||
}, { once: true })
|
||||
} else {
|
||||
console.log('DOM 已加载，语言插件就绪')
|
||||
}
|
||||
|
||||
console.log('语言插件就绪')
|
||||
}
|
||||
})
|
||||
|
|
@ -1,12 +1,39 @@
|
|||
import langToCheck from "@/hook/lang.js";
|
||||
import { api } from './config.js';
|
||||
|
||||
// 获取当前语言
|
||||
const getCurrentLanguage = () => {
|
||||
if (process.client) {
|
||||
try {
|
||||
// 从 cookie 获取语言设置（Nuxt i18n 自动管理）
|
||||
const cookieLanguage = document.cookie
|
||||
.split('; ')
|
||||
.find(row => row.startsWith('i18n_redirected='))
|
||||
?.split('=')[1];
|
||||
|
||||
if (cookieLanguage && ['cn', 'en'].includes(cookieLanguage)) {
|
||||
return cookieLanguage;
|
||||
}
|
||||
|
||||
// 如果没有 cookie，检测浏览器语言
|
||||
const browserLang = navigator.language?.toLowerCase() || 'en';
|
||||
if (browserLang.startsWith('zh')) {
|
||||
return 'cn';
|
||||
}
|
||||
return 'en';
|
||||
} catch (error) {
|
||||
console.warn('API 服务语言检测失败:', error);
|
||||
return 'en';
|
||||
}
|
||||
}
|
||||
return 'en'; // 服务端默认英文
|
||||
};
|
||||
|
||||
// 首页轮播图
|
||||
export const GetCarouseApi = () => {
|
||||
return api("/website/get/homePageCarousel_list", {
|
||||
method: 'POST',
|
||||
body: {
|
||||
locale: langToCheck()
|
||||
locale: getCurrentLanguage()
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -16,7 +43,7 @@ export const GetProductCategoryApi = () => {
|
|||
return api("/website/get/productCategory_list", {
|
||||
method: 'POST',
|
||||
body: {
|
||||
locale: langToCheck()
|
||||
locale: getCurrentLanguage()
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -66,7 +93,7 @@ export const GetCertificateApi = () => {
|
|||
return api("/website/get/certificate_list", {
|
||||
method: 'POST',
|
||||
body: {
|
||||
locale: langToCheck()
|
||||
locale: getCurrentLanguage()
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -76,7 +103,7 @@ export const GetDownloadApi = () => {
|
|||
return api("/website/get/appInstallPackage", {
|
||||
method: 'POST',
|
||||
body: {
|
||||
locale: langToCheck()
|
||||
locale: getCurrentLanguage()
|
||||
}
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue