# 广告平台
广告平台系统是一款智能化线上广告投放、优化、风控及综合管理平台，系统与主流短视频平台相打通。让我们可以基于客户的不同需求，同时操作不同平台的多个账户，创建海量广告计划，实现高效管理。
# 开发规范
命名规范 (opens new window)
风格指南 (opens new window)
git规范 (opens new window)
编码规范 (opens new window)
# 环境要求
| 依赖 | 版本 |
|---|---|
| Node | 14.19.0 |
| pnpm | 6.35.0 |
# 脚本简介
| 名称 | 功能 |
|---|---|
| serve | 本地开发服务 |
| build | 仿真构建命令 |
| build:fz | 仿真构建命令，同build |
| build:zs | 正式构建命令 |
| test | 测试 |
# 安装依赖
pnpm install
# 启动平台
pnpm serve
# 项目打包
pnpm build
# 目录简介
| 名称 | 说明 |
|---|---|
| build | 构建配置文件夹 |
| docs | 组件文档文件夹（旧，已经弃用） |
| src/assets | 静态文件，主要包含字体，主题，公共组件样式等 |
| src/components | 公共组件文件夹 |
| src/config | 公共配置（但是目前只放置了一些媒体 ID） |
| src/directives | 公共指令 |
| src/enum | 枚举文件夹 |
| src/request | 公共的请求方法 |
| src/router | 公共的路由 |
| src/store | 公共的 vuex store 存贮 |
| src/tools | 公共的工具函数文件夹 |
| src/views | 项目页面文件夹 |
| styleguide | 组件文档文件夹（新） |
| test | 测试文件夹 |
# 设备适配
| 依赖 | 版本 |
|---|---|
| 台式机 | 1920*1080 |
| 笔记本 | 1366*768 |
# 浏览器兼容性
兼容所有支持ECMAScript 5 (opens new window)的浏览器
# CSS核心变量
# 主题色
| 分类 | 颜色 | 变量 | 使用场景 |
|---|---|---|---|
| 主题色 | #2C4DFF | $color-brand | 主题色、选中的文字、icon |
| 主题色-渐变色 | #197DFF-#2C4DFF | $color-brand-grad | 主题按钮背景填充 |
| 功能色-成功 | #09B160 | $color-success | 成功 |
| 功能色-警告 | #FAAD14 | $color-wraning | 警告 |
| 功能色-失败 | #F53F3F | $color-error | 危险 |
| 功能色-信息 | #197DFF | $color-info | 信息文字、icon颜色 |
# 文本颜色
| 分类 | 颜色 | 变量 | 使用场景 |
|---|---|---|---|
| 中性色-重点 | #333333 | $color-primary | 需要着重强调的文本内容 |
| 中性色-常规 | #333333 | $color-regular | 正文、常规文本文字 |
| 中性色-辅助 | #666666 | $color-secondary | 辅助文字 |
| 中性色-占位符 | #A8ABB2 | $color-placeholder | 占位符颜色 |
| 中性色-禁用 | #A8ABB2 | $color-disabled | 禁用文字颜色 |
# 填充颜色
| 分类 | 颜色 | 变量 | 使用场景 |
|---|---|---|---|
| 基础背景色 | #FAFAFA | $bg-color | 卡片 |
| 页面背景色 | $bg-color-page | 页面背景 | |
| 组件背景色 | #F4F4F5 | $bg-color-page | 基础组件 |
| 遮罩 | #000000-45% | $bg-color-mask | 遮罩层背景色 |
# 边框颜色
| 分类 | 颜色 | 变量 | 使用场景 |
|---|---|---|---|
| 基础边框 | #DCDFE6 | $border-color | 组件边框 |
| 头像边框 | #197DFF-#2C4DFF | $border-color- | 头像边框色 |
# 其他颜色
| 分类 | 颜色 | 变量 | 使用场景 |
|---|---|---|---|
| box-shadow | 0px 2px 12px 0px rgba(0, 0, 0, 0.08); | $box-shadow-panel | 下拉框面板 |
| box-shadow | 0px 8px 20px 0px rgba(0, 0, 0, 0.08); | $box-shadow-dialog | 弹窗、信息提示框 |
# 字体
$font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
# 字体大小
| 分类 | 字体大小 | 变量 | 使用场景 |
|---|---|---|---|
| extra-large 超大字体 | 28px | $font-size-extra-large | 主要用于标题、主标语或需要特别强调的文字。例如，网站首页的标题、大型活动的宣传语等。 |
| large 大字体 | 18px | $font-size-large | 用于次级标题、重要信息或导航栏菜单项。 |
| medium 中等字体 | 16px | $font-size-medium | 应用场景：用于正文标题、文章标题或产品标题、卡片标题等。 |
| base 基础字体 | 28px | $font-size-extra-large | 用于正文段落、产品描述或用户评论等。 |
| small 小字体 | 12px | $font-size-extra-large | 用于辅助信息、注释、标签或次要文字。提供额外的信息或说明，而不会干扰主要内容的阅读。 |
| extra-small 超小字体 | 12px | $font-size-extra-large | 特殊情况下使用，如版权符号、免责声明或标签文本等。 |
# 字体行高
| 分类 | 字体大小 | 变量 | 使用场景 |
|---|---|---|---|
| extra-large 超大行高 | 36px | $line-height-extra-large | 主要用于标题、主标语或需要特别强调的文字。例如，网站首页的标题、大型活动的宣传语等。 |
| large 大行高 | 26px | $line-height-large | 用于次级标题、重要信息或导航栏菜单项。 |
| medium 中等行高 | 24px | $line-height-medium | 应用场景：用于正文标题、文章标题或产品标题、卡片标题等。 |
| base 基础行高 | 22px | $line-height-base | 用于正文段落、产品描述或用户评论等。 |
| small 小行高 | 20px | $line-height-small | 用于辅助信息、注释、标签或次要文字。提供额外的信息或说明，而不会干扰主要内容的阅读。 |
| extra-small 超小行高 | 20px | $line-height-extra-small | 特殊情况下使用，如版权符号、免责声明或标签文本等。 |
# 圆角
| 分类 | 字体大小 | 变量 | 使用场景 |
|---|---|---|---|
| large 大圆角 | 8px | $border-radius-large | 主要用于弹窗等大容器的圆角 |
| base 基础圆角 | 4px | $border-radius | 用于通用组件圆角 |
| small 基础圆角 | 2px | $border-radius-small | 用于小标签等圆角 |
| round 半圆圆角 | 18px | $border-radius-round | 用于半圆角组件 |
| circle 圆形圆角 | 100% | $border-radius-circle | 用于圆形元素 |
# 组件使用规范
全局组件大小 模式使用 default 一般情况下不需要单独设置尺寸大小
| 组件 | 注意事项 |
|---|---|
| 按钮 | 1：默认使用圆角按钮 2：取消按钮放在最右侧，确认按钮放在最左侧 3：主要按钮使用 type="primary"，次要按钮添加 plain属性，主按钮同一区域只能有一个。 |
| checkbox | 默认使用button类型 |
| radio | 默认使用button类型 |
| form | 1：默认支持清空 2：label的对齐方式建议： 左对齐：侧重于美观，在label长度差异不大时（参考：长度差异在一半以内）应尽可能采用左对齐。 右对齐：侧重于可读性好，在label长度差异比较大时（参考：长度差异一半以上），会有明显的割裂感，可以考虑右对齐，便于用户阅读。 顶对齐：侧重于减轻用户负担，当表单项比较多时，推荐采用顶对齐，因为占用垂直空间比较多，弹窗中不推荐。 |
| table | 1：数字金额右对齐 2：金额使用千分位格式化 3：操作列固定在右侧，当操作列由于权限等原因没有操作按钮时，将操作列隐藏。 |
| dialog | 默认支持esc键关闭 |
| drawer | 默认支持esc键关闭 |
| message box | 默认支持esc键关闭 |
# 操作规范
1：删除要等危险操作需要二次确认
2：表单提交操作做好防抖
# 性能要求
1：设计稿图片默认使用2倍压缩图（压缩工具 (opens new window)）
2：如果静态文件压缩后仍超过200k，需要上传到公司CDN服务器上进行加速
# 资源链接
接口文档 (opens new window)
设计稿 (opens new window)
前端团队文档 (opens new window)
Element Plus (opens new window)
Echarts (opens new window)
图片压缩工具 (opens new window)
仿真地址 (opens new window)