请按照文档内要求完成前端项目开发
整体要求 内的规范为参考规范（简单来讲，记得住就遵守一下，里面都是一些基础要求）
补充要求 内的规范为严格要求的规范，无特殊情况则必须遵守！（带 * 的为强烈建议遵守）
整体要求
整体编码规范需要满足：概述 | Aotu.io - 前端代码规范
补充要求
CSS应该以组件纬度拆分，不得全部样式写在一个文件中
CSS应该以尽可能少的class嵌套实现，不得出现以 .spe_sear_xtd1 .spx .slt .dl1 dd 这种明显以寻址为目的的class选择器为定位标准的css
CSS必须符合CSS模块化规范：BEM、SMACSS规则
*HTML文件中禁止书写JavaScript，所有JS应当书写在单独的.js文件中
HTML文件存在层级关系时，例如：首页、检索页、详情页，应当使用文件夹合理存放文件，禁止出现将所有文件堆积在index.html同级目录的情况，可参考VUE或React项目文件规范
*静态项目中，所有HTML文件都应该可通过页面中的点击访问到达，避免出现孤岛文件
禁止以在URL中书写Base64的方式展示图片等内容，所有文件应该以URL的方式引入
*项目中禁止出现无意义换行，保持代码紧凑和整洁，减少多余的字符，尤其是对大块分区之间，可以适当空行或补充注释说明，帮助代码阅读者更好地理解页面结构，但禁止出现连续两行或更多空行的情况。
Class和ID在任何情况下禁止重名
语义化命名
需要使用具备语义的英文单词，命名时应尽量避免使用数字、拼音、特殊符号或随机字符。
正确示例：
wrap,description,content。错误示例：
aaaa,a1,$we,4tdds。
连接符的使用
多个单词拼接时建议使用短横线（
-）或者下划线（_）连接，但风格需保持一致，推荐使用短横线以提高可读性。避免混合使用多种连接方式或使用驼峰命名法。正确示例：
header-nav,content-left,slide-bar。错误示例：
headernav,slideBar,ContentLeft。
命名简洁
命名应避免过度复杂，适当进行缩写，通常不要超过 3 到 4 层结构。
正确示例：
head-tit-ico。错误示例：
header-title-left-logo-icon
禁止数字标号命名
避免使用序号命名，如
content1,content2，建议用更具描述性的名称。正确示例：
content-product。错误示例：
content1,content2。
*图片文件命名规范
文件后缀命名一律小写。
使用短横线进行命名：使用间隔符 - 进行连接，例如：
背景图片以 bg- 开头，例如 bg-header.jpg。
按钮图片以 btn- 开头，例如 btn-submit.png。
图标图片以 icon- 开头，例如 icon-user.svg。
聚合图片以 spr- 开头，例如 spr-nav.png
备注
孤岛文件：必须手动修改url才能访问到的文件，404等错误页除外