style: 添加背景图

docs/ui设计规范.md

@@ -0,0 +1,396 @@
+# 可信碳信息网 UI/UX 设计规范手册 V1.0
+**生效日期**：202X年X月X日
+**适用范围**：可信碳信息网全平台（Web端、响应式移动端）所有页面、组件、交互设计
+**核心目标**：统一设计语言、提升专业质感、优化用户体验、强化品牌认知，解决原界面“粗糙、混乱、无层级”问题
+
+---
+
+## 一、设计总则
+### 1.1 产品定位与核心调性
+- **产品定位**：面向政企、双碳领域企业的国家级可信碳信息服务平台，核心提供碳数字身份证、碳链上链、绿色服务等专业服务
+- **核心调性**：**专业可信、科技感、绿色低碳、严谨权威**，拒绝花哨、廉价、违和的视觉元素
+- **用户群体**：政企管理人员、企业碳管理专员、双碳领域从业者，核心需求是高效、清晰、可信的服务体验
+
+### 1.2 核心设计原则
+1.  **一致性原则**：全平台色彩、字体、组件、交互100%统一，杜绝样式混用
+2.  **层级清晰原则**：通过字号、字重、色彩、间距明确信息主次，核心操作一眼可见
+3.  **状态可见原则**：所有交互元素必须有完整的状态反馈（默认/hover/点击/禁用）
+4.  **极简专业原则**：用最少的元素传递最清晰的信息，拒绝冗余装饰、违和背景
+5.  **无障碍原则**：符合WCAG 2.1 AA标准，色彩对比度≥4.5:1，支持键盘导航
+
+### 1.3 规范落地要求
+- 所有设计师必须严格遵循本规范，禁止私自修改样式、色值、组件逻辑
+- 新增组件/样式必须提交规范评审，更新后同步全团队
+- 开发必须1:1还原设计规范，禁止前端私自调整样式
+
+---
+
+## 二、色彩系统规范
+### 2.1 主色系统（品牌色，双碳主题）
+| 色号 | HEX | RGB | 使用场景 |
+|------|-----|-----|----------|
+| 主色-深绿（品牌主色） | `#00A870` | `rgb(0, 168, 112)` | 主按钮、核心图标、标题强调、品牌LOGO、分割线、选中态 |
+| 主色-浅绿（辅助主色） | `#81C784` | `rgb(129, 199, 132)` | 标签、次要按钮、背景高亮、卡片标题栏 |
+
+### 2.2 辅助色系统（科技感补充）
+| 色号 | HEX | RGB | 使用场景 |
+|------|-----|-----|----------|
+| 辅助色-科技蓝 | `#2196F3` | `rgb(33, 150, 243)` | 次要操作按钮、信息提示、链接、图表强调 |
+| 辅助色-浅蓝 | `#BBDEFB` | `rgb(187, 222, 251)` | 背景、标签、hover态高亮 |
+
+### 2.3 中性色系统（全平台通用，保证可读性）
+| 阶数 | HEX | RGB | 使用场景 |
+|------|-----|-----|----------|
+| 01（纯白） | `#FFFFFF` | `rgb(255, 255, 255)` | 页面背景、卡片背景 |
+| 02（浅灰1） | `#F5F7FA` | `rgb(245, 247, 250)` | 页面次级背景、列表hover态 |
+| 03（浅灰2） | `#E5E6EB` | `rgb(229, 230, 235)` | 分割线、输入框边框、禁用态背景 |
+| 04（中灰1） | `#C9CDD4` | `rgb(201, 205, 212)` | 次要文字、图标、占位符 |
+| 05（中灰2） | `#86909C` | `rgb(134, 144, 156)` | 辅助文字、说明文字 |
+| 06（深灰1） | `#4E5969` | `rgb(78, 89, 105)` | 正文文字 |
+| 07（深灰2） | `#1D2129` | `rgb(29, 33, 41)` | 标题文字、重点内容 |
+| 08（纯黑） | `#000000` | `rgb(0, 0, 0)` | 仅用于特殊强调，禁止大面积使用 |
+
+### 2.4 功能色系统（状态提示，B端必备）
+| 状态 | HEX | RGB | 使用场景 |
+|------|-----|-----|----------|
+| 成功色 | `#00B42A` | `rgb(0, 180, 42)` | 成功提示、完成状态、正向操作 |
+| 警告色 | `#FF7D00` | `rgb(255, 125, 0)` | 警告提示、待处理状态 |
+| 错误色 | `#F53F3F` | `rgb(245, 63, 63)` | 错误提示、删除操作、异常状态 |
+| 信息色 | `#168CFF` | `rgb(22, 140, 255)` | 信息提示、通知、帮助 |
+
+### 2.5 色彩使用禁忌
+- ❌ 禁止在主按钮中混用蓝色、其他绿色，主操作必须使用主色深绿
+- ❌ 禁止使用超过规范外的自定义色值，全平台仅可使用本规范定义的颜色
+- ❌ 禁止使用高饱和度、刺眼的颜色，保证视觉舒适度
+- ❌ 禁止在文字与背景间使用低对比度配色，必须符合WCAG对比度要求
+
+---
+
+## 三、字体系统规范
+### 3.1 字体选型（跨平台一致，Web安全）
+- **中文首选**：思源黑体 (Source Han Sans SC)
+- **系统 fallback 字体栈**：
+  ```css
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  ```
+- **字重规范**：仅使用 400(Regular)、500(Medium)、700(Bold) 三个字重，禁止使用其他字重
+
+### 3.2 字体层级规范（桌面端Web）
+| 层级 | 字号(px) | 字重 | 行高(px/倍数) | 字间距(px) | 颜色 | 使用场景 |
+|------|----------|------|---------------|------------|------|----------|
+| H1 一级标题 | 36 | 700 | 44 / 1.2 | 0 | `#1D2129` | 页面大标题（如「可信碳信息网」） |
+| H2 二级标题 | 28 | 700 | 36 / 1.3 | 0 | `#1D2129` | 模块大标题（如「核心驱动」「共性能力」） |
+| H3 三级标题 | 20 | 500 | 28 / 1.4 | 0 | `#4E5969` | 卡片标题、功能入口标题 |
+| 正文 | 16 | 400 | 24 / 1.5 | 0 | `#4E5969` | 描述文字、政策列表、说明内容 |
+| 辅助文字 | 14 | 400 | 22 / 1.5 | 0 | `#86909C` | 小字说明、标签、版权信息 |
+| 迷你文字 | 12 | 400 | 18 / 1.5 | 0 | `#86909C` | 角标、提示、次要信息 |
+
+### 3.3 移动端字体层级（响应式适配）
+| 层级 | 字号(px) | 字重 | 行高(倍数) | 使用场景 |
+|------|----------|------|------------|----------|
+| H1 | 28 | 700 | 1.2 | 页面大标题 |
+| H2 | 24 | 700 | 1.3 | 模块标题 |
+| H3 | 18 | 500 | 1.4 | 卡片标题 |
+| 正文 | 14 | 400 | 1.5 | 正文内容 |
+| 辅助文字 | 12 | 400 | 1.5 | 辅助说明 |
+
+### 3.4 行高、字间距规范
+- 行高计算：标题行高=字号×1.2-1.3，正文行高=字号×1.5，辅助文字行高=字号×1.5
+- 字间距：仅标题可使用0-0.5px字间距，正文/辅助文字字间距为0，禁止自定义字间距
+- 中英文混排：英文/数字使用同一款无衬线字体，字号与中文一致，行高统一
+
+### 3.5 字体使用禁忌
+- ❌ 禁止使用宋体、楷体等非无衬线字体，保证科技感与可读性
+- ❌ 禁止随意调整字号、字重，必须严格遵循层级规范
+- ❌ 禁止在正文中使用700字重，仅标题可使用粗体
+- ❌ 禁止使用小于12px的字号，保证移动端可读性
+
+---
+
+## 四、图标系统规范
+### 4.1 图标风格定义（统一线性风格，解决原界面割裂问题）
+- **风格**：线性轻量图标，2px统一描边，圆角端点，圆角转角，视觉重量完全一致
+- **造型**：简约、识别性强，符合B端专业感，禁止使用2.5D、面性、卡通风格图标
+- **色彩**：默认使用中性色`#86909C`，hover/选中态使用主色`#00A870`
+
+### 4.2 图标尺寸规范（全平台统一）
+| 尺寸(px) | 使用场景 |
+|----------|----------|
+| 16×16 | 按钮内图标、列表内图标、标签内图标 |
+| 20×20 | 导航图标、功能入口图标 |
+| 24×24 | 核心模块图标、首页核心驱动图标 |
+| 32×32 | 大功能入口、banner图标 |
+
+### 4.3 图标分类与使用场景
+1.  **功能图标**：用于操作、导航（如搜索、返回、提交），统一线性风格
+2.  **业务图标**：用于碳核算、碳交易、碳金融等业务模块，统一线性风格，与功能图标视觉一致
+3.  **装饰图标**：仅用于页面点缀，禁止干扰核心操作，使用低透明度主色/辅助色
+
+### 4.4 图标交付规范
+- 格式：SVG矢量格式，保证无限放大不失真
+- 命名规范：`icon_功能_场景.svg`（如`icon_search_nav.svg`）
+- 交付要求：图标必须居中对齐，描边统一2px，无多余路径，可直接用于前端开发
+
+### 4.5 图标使用禁忌
+- ❌ 禁止混用线性、面性、2.5D等不同风格图标
+- ❌ 禁止私自修改图标描边粗细、造型，必须使用统一规范的图标库
+- ❌ 禁止使用与业务无关、辨识度低的图标
+- ❌ 禁止在图标中使用多种颜色，仅可使用单色（默认灰/选中主色）
+
+---
+
+## 五、布局与栅格系统规范
+### 5.1 栅格系统定义（12列栅格，Web端标准）
+- **最大内容宽度**：1200px（桌面端）
+- **列数**：12列
+- **水槽(Gutter)**：24px（列与列之间的间距）
+- **边距(Margin)**：左右各24px（页面安全区，适配不同屏幕）
+- **计算公式**：列宽 = (1200 - 24×2 - 24×11) / 12 = 72px
+
+### 5.2 响应式断点规范
+| 断点 | 屏幕宽度 | 布局模式 | 栅格列数 |
+|------|----------|----------|----------|
+| 桌面端 | ≥1200px | 三列/两列布局 | 12列 |
+| 平板端 | 768px - 1199px | 两列布局 | 12列，水槽16px |
+| 移动端 | <768px | 单列布局 | 4列，水槽12px，边距16px |
+
+### 5.3 留白与间距规范（解决原界面拥挤问题）
+| 间距类型 | 数值(px) | 使用场景 |
+|----------|----------|----------|
+| 模块间距 | 48 | 页面大模块之间的间距（如首屏与核心驱动、核心驱动与共性能力） |
+| 卡片内边距 | 24 | 卡片内部内容与卡片边框的间距 |
+| 组件间距 | 16 | 卡片内按钮、输入框、列表项之间的间距 |
+| 文字行间距 | 遵循字体层级规范 | 文字行与行之间的间距 |
+| 按钮内边距 | 上下12px，左右24px | 按钮内部文字与按钮边框的间距 |
+
+### 5.4 页面布局模板（首页专属，解决原界面层级混乱）
+| 页面区域 | 布局要求 | 核心内容 |
+|----------|----------|----------|
+| 首屏（首屏黄金区） | 全屏宽度，突出核心价值 | 导航栏+搜索栏+核心服务入口（碳数字身份证、国家可信碳链、绿色服务）+「建立您的碳数字身份」核心banner |
+| 第二屏 | 12列栅格，4列等分 | 核心驱动模块（4个能力，统一卡片样式） |
+| 第三屏 | 12列栅格，4+4+4等分 | 共性能力（4列）+企业出海（4列）+行业动态（4列），突出共性能力 |
+| 页脚 | 全屏宽度，纯色背景 | 指导单位、运营单位、联系我们、版权信息 |
+
+### 5.5 对齐规范
+- 所有内容**左对齐**（标题可居中，正文/列表必须左对齐）
+- 所有元素必须像素级对齐，禁止出现偏移、不对齐的情况
+- 卡片、按钮、输入框必须居中对齐栅格线
+
+---
+
+## 六、核心组件规范（1:1落地，解决原界面组件混乱）
+### 6.1 按钮组件（Button，全平台统一）
+#### 按钮类型与样式
+| 按钮类型 | 背景色 | 文字色 | 边框 | 圆角 | 阴影 | 使用场景 |
+|----------|--------|--------|------|------|------|----------|
+| 主按钮（Primary） | `#00A870` | `#FFFFFF` | 无 | 8px | `0 2px 8px rgba(0,0,0,0.1)` | 核心操作（如「申请服务」「搜索」「提交」） |
+| 次按钮（Secondary） | `#FFFFFF` | `#00A870` | 1px `#00A870` | 8px | 无 | 次要操作（如「办证指南」「查证查询」） |
+| 文字按钮（Text） | 透明 | `#00A870` | 无 | 0 | 无 | 链接、次要操作、弹窗按钮 |
+| 图标按钮（Icon） | 透明 | `#86909C` | 无 | 8px | 无 | 导航、操作栏图标 |
+
+#### 按钮状态规范（必须完整实现）
+| 状态 | 样式变化 |
+|------|----------|
+| 默认态 | 遵循基础样式 |
+| Hover态 | 主按钮：背景色`#00905F`，阴影加深；次按钮：背景色`#F5F7FA` |
+| 点击态 | 主按钮：背景色`#007A4D`；次按钮：背景色`#E5E6EB` |
+| 禁用态 | 主按钮：背景色`#C9CDD4`，文字色`#86909C`，不可点击 |
+
+#### 按钮尺寸规范
+| 尺寸 | 高度(px) | 字号(px) | 内边距 | 使用场景 |
+|------|----------|----------|--------|----------|
+| 大按钮 | 48 | 16 | 上下12px，左右32px | 核心操作、banner按钮 |
+| 中按钮 | 40 | 14 | 上下10px，左右24px | 卡片内操作、列表操作 |
+| 小按钮 | 32 | 12 | 上下8px，左右16px | 标签、迷你操作 |
+
+#### 按钮使用禁忌
+- ❌ 禁止在主操作中使用次按钮、文字按钮，核心操作必须用主按钮
+- ❌ 禁止混用圆角，所有按钮统一8px圆角
+- ❌ 禁止自定义按钮样式，必须严格遵循规范
+
+---
+
+### 6.2 卡片组件（Card，全平台统一，解决原界面卡片粗糙问题）
+#### 卡片样式规范
+| 属性 | 规范值 |
+|------|--------|
+| 背景色 | `#FFFFFF` |
+| 圆角 | 12px（大卡片）/8px（小卡片） |
+| 阴影 | `0 2px 8px rgba(0,0,0,0.08)` |
+| 内边距 | 24px |
+| 边框 | 无（仅特殊场景可加1px `#E5E6EB`边框） |
+
+#### 卡片状态规范
+| 状态 | 样式变化 |
+|------|----------|
+| 默认态 | 基础样式 |
+| Hover态 | 阴影`0 4px 16px rgba(0,0,0,0.12)`，卡片上浮2px |
+| 选中态 | 边框1px `#00A870`，阴影`0 4px 16px rgba(0,168,112,0.15)` |
+
+#### 卡片使用场景
+- 大卡片：模块容器（如碳数字身份证、核心驱动、共性能力）
+- 小卡片：列表项、功能入口、政策条目
+
+---
+
+### 6.3 输入框组件（Input，含搜索框）
+#### 样式规范
+| 属性 | 规范值 |
+|------|--------|
+| 高度 | 40px（中）/48px（大，搜索框） |
+| 圆角 | 8px |
+| 边框 | 1px `#E5E6EB` |
+| 背景色 | `#FFFFFF` |
+| 内边距 | 左右16px |
+| 字体 | 16px（大）/14px（中），字重400，颜色`#1D2129` |
+
+#### 状态规范
+| 状态 | 样式变化 |
+|------|----------|
+| 默认态 | 基础样式 |
+| Focus态 | 边框1px `#00A870`，阴影`0 0 0 2px rgba(0,168,112,0.2)` |
+| Hover态 | 边框1px `#C9CDD4` |
+| 禁用态 | 背景`#F5F7FA`，边框`#E5E6EB`，文字`#86909C` |
+| 错误态 | 边框1px `#F53F3F`，阴影`0 0 0 2px rgba(245,63,63,0.2)` |
+
+#### 搜索框专属规范
+- 高度48px，圆角8px，左侧加搜索图标（16×16，`#86909C`）
+- 右侧主按钮（大按钮样式），与输入框组合，圆角统一8px
+
+---
+
+### 6.4 其他核心组件规范（精简版，完整规范可补充）
+#### 导航组件
+- 顶部导航栏高度：64px，背景`#FFFFFF`，阴影`0 2px 8px rgba(0,0,0,0.08)`
+- 导航项字号16px，字重500，默认`#4E5969`，hover/选中`#00A870`
+- 移动端导航折叠为汉堡菜单，点击展开
+
+#### 列表组件
+- 列表项高度：48px，内边距左右24px
+- 背景`#FFFFFF`，hover态`#F5F7FA`
+- 分割线：1px `#E5E6EB`，仅列表项之间添加
+
+#### 标签组件（Tag）
+- 高度：32px，圆角16px
+- 背景`#E8F5E9`，文字`#00A870`，字号14px
+- 内边距：左右12px，上下6px
+
+---
+
+## 七、交互体验规范
+### 7.1 页面交互规范
+- **页面滚动**：平滑滚动，模块进入视口时添加淡入动效（时长300ms，缓动函数ease-out）
+- **页面加载**：首屏加载骨架屏，数据加载完成后淡入内容
+- **页面跳转**：淡入淡出过渡，时长200ms，避免生硬跳转
+
+### 7.2 组件交互状态规范
+- 所有可点击元素（按钮、卡片、链接、列表项）必须有完整的4种状态：默认/hover/点击/禁用
+- 所有表单元素必须有focus状态反馈
+- 所有操作必须有加载状态（按钮loading、骨架屏、进度条）
+
+### 7.3 反馈机制规范
+- **操作反馈**：点击按钮后100ms内给出视觉反馈（按钮变色、loading）
+- **结果反馈**：操作成功/失败后弹出Toast提示（时长3s，自动消失）
+- **错误反馈**：表单错误时实时提示，红色文字+错误态输入框
+- **加载反馈**：所有异步操作必须显示加载状态，禁止空白等待
+
+### 7.4 无障碍设计规范
+- 色彩对比度≥4.5:1（文字与背景）
+- 支持键盘导航（Tab切换、Enter确认、Esc关闭）
+- 所有图标、图片必须添加alt文本
+- 所有交互元素可被屏幕阅读器识别
+
+---
+
+## 八、品牌与视觉规范（解决原界面违和问题）
+### 8.1 LOGO规范
+- **LOGO设计建议**：以「碳」「链」「可信」为核心元素，主色`#00A870`，简约线性风格
+- **最小尺寸**：24px（移动端）/32px（桌面端）
+- **安全区**：LOGO周围必须保留≥LOGO宽度1/4的空白，禁止其他元素侵入
+- **使用场景**：页面左上角、导航栏、页脚、物料设计
+
+### 8.2 页面背景规范（核心优化，解决原界面粗糙问题）
+- **禁止使用**：山水、风车、螺旋、渐变炫彩等违和、廉价的背景素材
+- **规范背景**：
+  1.  页面主背景：`#F5F7FA`（浅灰1），纯色，无装饰
+  2.  首屏背景：低透明度抽象区块链/碳元素纹理（主色`#00A870`，透明度5%），不抢内容
+  3.  卡片背景：纯白`#FFFFFF`，禁止添加背景图
+- **Banner背景**：简约渐变（主色浅绿到浅蓝，透明度10%），无多余装饰
+
+### 8.3 内容与图片规范
+- **图片风格**：专业、简约、科技感，禁止使用卡通、花哨的图片
+- **图片格式**：WebP格式，压缩后体积≤200KB，保证加载速度
+- **图片尺寸**：首页banner 1920×500px，卡片配图 80×80px（方形）
+- **数据可视化**：图表使用主色+辅助色，统一字体、线条样式，背景纯白，无多余装饰
+
+---
+
+## 九、响应式适配规范
+### 9.1 断点适配规则
+| 断点 | 布局调整 |
+|------|----------|
+| 桌面端(≥1200px) | 12列栅格，三列布局，完整展示所有模块 |
+| 平板端(768-1199px) | 12列栅格，两列布局，合并次要模块，突出核心操作 |
+| 移动端(<768px) | 4列栅格，单列布局，折叠导航，模块垂直排列，按钮放大至48px |
+
+### 9.2 组件适配规范
+- 按钮：移动端统一使用大按钮（48px高），点击区域≥48×48px
+- 卡片：移动端内边距调整为16px，圆角8px
+- 字体：遵循移动端字体层级规范，缩小字号，保证可读性
+- 导航：移动端折叠为汉堡菜单，点击展开全屏导航
+
+### 9.3 移动端交互优化
+- 所有可点击元素点击区域≥48×48px，避免误触
+- 表单输入框高度≥48px，适配移动端输入
+- 禁止使用hover态，仅保留点击态反馈
+- 页面滚动流畅，无卡顿、错位
+
+---
+
+## 十、落地验收检查清单（设计师/开发必查）
+### 10.1 设计验收清单
+- [ ] 所有色值严格遵循色彩规范，无自定义颜色
+- [ ] 所有字体、字号、字重、行高符合字体规范
+- [ ] 所有图标风格统一，尺寸规范，无混用
+- [ ] 所有组件样式、状态完整，符合组件规范
+- [ ] 页面布局、间距、留白符合栅格与间距规范
+- [ ] 无违和背景、冗余装饰，符合品牌调性
+- [ ] 响应式适配完整，移动端布局正常
+- [ ] 色彩对比度符合WCAG 2.1 AA标准
+- [ ] 交互状态完整，所有可点击元素有反馈
+
+### 10.2 开发验收清单
+- [ ] 1:1还原设计样式，无私自调整
+- [ ] 所有组件状态完整实现
+- [ ] 响应式适配正常，无错位、样式错乱
+- [ ] 页面加载速度符合要求，无卡顿
+- [ ] 无障碍功能正常实现
+
+---
+
+## 十一、规范版本管理
+- **当前版本**：V1.0（202X年X月X日生效）
+- **迭代规则**：每3个月迭代一次，根据用户反馈、业务需求更新规范
+- **变更流程**：所有变更必须提交评审，通过后同步全团队，更新版本号
+- **文档管理**：规范文档统一存储在团队知识库，设计师/开发必须使用最新版本
+
+---
+
+## 附：原界面问题针对性优化对照表
+| 原界面问题 | 规范解决方案 |
+|------------|--------------|
+| 按钮混用绿/蓝，样式混乱 | 明确主/次按钮样式，主操作用主色绿，禁止混用 |
+| 图标风格割裂，造型粗糙 | 统一线性2px描边图标，规范尺寸与使用场景 |
+| 背景违和（山水、螺旋），廉价感 | 禁止使用此类背景，规范为简约科技感纯色/低透明度纹理 |
+| 信息层级混乱，无主次 | 建立字体层级、栅格布局，明确页面视觉流，突出核心操作 |
+| 卡片样式不统一，无质感 | 统一卡片圆角、阴影、内边距，添加hover态 |
+| 留白不足，页面拥挤 | 规范模块间距、内边距，增加呼吸感 |
+| 交互状态缺失，体验生硬 | 补全所有组件的4种状态，添加反馈机制 |
+
+---
+
+### 📌 设计师落地说明
+1.  本规范为**强制落地标准**，所有设计必须严格遵循，禁止私自修改
+2.  如需新增组件/样式，必须提交规范评审，更新后再落地
+3.  交付设计稿时，必须标注所有色值、字号、间距，方便开发还原
+4.  可基于本规范生成组件库（如Figma组件库），提升设计效率

txw-mhzc-web/src/pages/index/components/nav/index2.vue

@@ -465,7 +465,9 @@ export default {
   position: fixed;
   top: 0px;
   width: 100%;
-  background: #009a29;
+  background: rgba(0, 168, 112, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   margin: 0 auto;
 
   display: grid;
@@ -475,6 +477,7 @@ export default {
   color: #fff;
 
   z-index: 9999;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 .logo-box {
   text-align: center;
@@ -638,7 +641,9 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
-  background: #009a29;
+  background: rgba(0, 168, 112, 0.9);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .mobile-menu-header img {
@@ -680,7 +685,7 @@ export default {
 }
 
 .mobile-menu-item.active {
-  color: #009a29;
+  color: #00A870;
   background: #f0f9f0;
 }
 
@@ -706,7 +711,7 @@ export default {
   color: #fff;
   text-align: center;
   cursor: pointer;
-  background: #009a29;
+  background: #00A870;
   border-radius: 6px;
   flex: 1;
 }