{"id":20144141,"url":"https://github.com/quansitech/front-end-office-website-development-description","last_synced_at":"2026-06-12T14:32:02.450Z","repository":{"id":97656032,"uuid":"383371889","full_name":"quansitech/front-end-office-website-development-description","owner":"quansitech","description":null,"archived":false,"fork":false,"pushed_at":"2021-08-24T09:06:55.000Z","size":393,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-11-30T05:47:08.145Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quansitech.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-06T07:01:34.000Z","updated_at":"2022-01-26T01:20:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"7c977658-f23c-4179-8fbb-9854037494ff","html_url":"https://github.com/quansitech/front-end-office-website-development-description","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"a96f37737ff2d317fa8d75eeb3adcae326bb5328"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/quansitech/front-end-office-website-development-description","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Ffront-end-office-website-development-description","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Ffront-end-office-website-development-description/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Ffront-end-office-website-development-description/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Ffront-end-office-website-development-description/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quansitech","download_url":"https://codeload.github.com/quansitech/front-end-office-website-development-description/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Ffront-end-office-website-development-description/sbom","scorecard":{"id":755073,"data":{"date":"2025-08-11","repo":{"name":"github.com/quansitech/front-end-office-website-development-description","commit":"a96f37737ff2d317fa8d75eeb3adcae326bb5328"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/14 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T21:25:50.166Z","repository_id":97656032,"created_at":"2025-08-22T21:25:50.167Z","updated_at":"2025-08-22T21:25:50.167Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34249560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T22:08:58.751Z","updated_at":"2026-06-12T14:32:02.422Z","avatar_url":"https://github.com/quansitech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 官网开发文档(前端)\n\n\n\n# 部署\n\n#### 服务器部分\n\n前置条件:  docker 已安装\n\n1. your/docker/config/path/nginx/sites 目录下 复制一个nginx 配置文件\n\n2. 打开刚刚的文件,并修改以下字段\n\n   server_name  PROJECT_NAME.qs.com;\n   \n   root  /var/www/PROJECT_GIT_NAME/www;\n\n 3.修改系统hosts文件 新增127.0.0.1 PROJECT_NAME.qs.com\n\n 4..env文件 增加 DOMAIN 字段，值为 PROJECT_NAME.qs.com\n\n#### 前端编译部分\n\n前置条件:  node 版本 \u003e= 14.17.1, 可使用nvm安装,推荐node版本14.17.1\n\n1. npm安装 @quansitech/tp-frontend-template:  (如已安装 不需要再次执行)\n\n    在任意目录启动命令行， 输入 `cnpm i -g @quansitech/tp-frontend-template`\n\n2. 安装成功后，在项目根目录 命令行输入 `npx copy-tp-frontend-template`\n\n3. 项目根目录 运行`cnpm i` or `yarn`,安装前端环境;\n\n4. 项目根目录 命令行输入 gulp reload 即可\n\n\n\n\n## 编译\n\n使用gulp 对 css \u0026 js 进行编译\n\n编译命令: \n\n​\t`gulp reload`  编译并监听刷新\n​\t`gulp mobile:reload`  编译移动端并监听刷新\n\n​\t`gulp default:reload   `编译pc端并监听刷新\n\n​\t`gulp run`  编译并压缩(运行完自动停止)\n\n​\t`gulp default:run   ` 编译并压缩(运行完自动停止)\n\n​\t`gulp mobile:run`  编译并压缩(运行完自动停止)\n\n\n\n每次对 css或 js 保存后,都会编译文件\n\n编译后,会修改head, footer里面的文件名的版本号\n\n- 自动生成sourcemap 可在浏览器查看源代码 ,源文件名 以及行号(行号可能不太准确)\n\n\n\n## html\n\n- 复用的html 可以跟后端商量 用widget 或 直接引入公共的html\n\n- 注意html语义化, eg: ul,li, p, h1-h6...\n\n  \n\n## 图片:  \n\n- 图片展示: \n\n动态上传的图必须有固定尺寸的div包裹  防止上传的图片太大  导致样式错乱,\n后端使用图片裁剪,保证图片比例\n\n前端可用css 属性 object-fit: cover(ie可能不兼容)\n\n- logo: \n\n  - 不能拉伸,要展示整个图\n  所以 外层div 设置 固定宽高,里面的 img 标签设置: \t\n  \n  ​\t`max-width: 100%;`\n  \n  ​\t`max-height: 100%;`\n  \n- 首屏幻灯片轮播:  \n\n  - 一般情况下宽度100%，高度自适应，完整展示\n\n- banner:  \n\n  - 一般情况下宽度100%，高度自适应，完整展示\n  - 如内容不重要，只作为背景，则宽度100%，高度固定，bg cover center填充整个区域\n\n- 列表图\n\n  - 按尺寸比例调用展示\n\n- 正文图(包括但不限于: 富文本里面的图)\n\n  - 宽度不超过内容层宽度，高度自适应\n  \n    \n\n- 图片放大展示可用[viewer.js](https://fengyuanchen.github.io/viewerjs/)\n- 图片轮播用[swiper.js](https://www.swiper.com.cn/)\n\n\n\n## 图标\n\n用Symbol (svg) 的方式引入,需要设计用AI做图标, 具体引入方式看 iconfont文档\n\n开发环境用iconfont 在线链接\n\n生产环境 需要在iconfont下载\n\n\n\n\n\n## css\n\n#### \t文件布局\n\n​\t\tcommonStyle:  pc + 移动公用\n\n​\t\t\tvar.less:  变量  主要存放网站颜色\n\n​\t\t\ttool.less:  工具函数 eg: `.mb0{ margin-bottom: 0; }`\n\n​\t\t\tcommon.less:  公用代码 eg: `.text-red` 类(某些项目不一定有红色的文字)\n\n​\t\t\treset.less :  对浏览器样式重置\n\n\n\n​\t\tpc\n\n​\t\t    var.less:   pc端变量 \n\n​\t\t\ttool.less:  pc工具函数\n\n​\t\t\tcommon.less:  pc公共代码\n\n​\t\t\ticon.less : pc 端icon\n\n​\t\t\tstyle.less:  对所有样式代码进行聚合\n\n​\t\t\t*coder.less* 以作者名为文件名,避免冲突\n\n\n\n​\t\tmobile\n\n​\t\t    var.less:  mobile端变量 \n\n​\t\t\ttool.less:  mobile工具函数\n\n​\t\t\tcommon.less:   mobile公共代码\n\n​\t\t\ticon.less :   mobile  端icon\n\n​\t\t\tstyle.less 对所有样式代码进行聚合\n\n​\t\t\t*coder.less* 以作者名为文件名,避免冲突\n\n\n\n### 样式命名规范\n\n- 变量： \n\n  - 颜色： 一般网站颜色不会很多，因此直接用颜色命名, eg: @green;\n\n    ​\t\t\t有时候会有两种相近的颜色，可用 light 作为前缀， eg: @light-green;\n\n    ​\t\t\t边框： @border-color; 背景： @bg-color;输入框背景: @input-bg-color;\n\n  - 距离(高度/宽度)： 定义.container宽度，eg： @container-width;\n\n  - 路径： @img-url:  'path/to/your/img/directory';\n\n- 类名\n\n  - 页面： .page-*, eg: .page-index;\n\n  - 列表： .*-list,  (-item): \n\n    -  eg: .news-list, .news-item; 同时html用 ul + li\n\n  - 按钮： .btn  \n\n    - 颜色： .btn-green\n\n      - 反白：.btn-border;\n\n    - 状态： .btn-disabled\n\n    - 形状： .btn-square, .btn-square-radius, .btn-radius\n\n      使用的时候组合起来， .btn.btn-green.btn-square;\n  \n       类似的技巧可以拓展到.tag 之类的地方.\n\n\n\n### 样式布局\n\n- [flex的使用](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)\n- 绝对定位的使用\n\n\n\n### 常用css类名\n\n- container类： \n\n  pc : 从设计图量出项目最小宽度后(eg: 1200px),\n  \t\t让其居中,超过1200px的时候,左右留白\n\n  ​\t\t    `width: 1200px;` \n\n  ​\t\t\t`margin-left: auto;`\n\n  ​\t\t\t`margin-right: auto;`\n\n  mobile:  从设计图量出白边距离后(eg: 0.3rem),设置 \n\n  ​\t\t\t`padding-left: .3rem;`\n\n  ​\t\t\t`padding-right: .3rem;`\n\n  ​\t\t\t同时设置一个.row类\n\n  ​\t\t\t`margin-left: -.3rem;`\n\n  ​\t\t\t`margin-right: -.3rem;`\n\n  \n\n- .article-content 富文本\n\n- pre[wrap] 多行文本\n\n- .text-cut 文字单行裁剪。与flex使用时，须固定裁剪元素的父级宽度(可用calc, rem, px);\n\n  ​\t多行裁剪可用 .text-cut-2(ie不可用，因此pc端多行要后端裁剪)\n\n\n\n## javascript\n\n- 文件布局\n  - 通过app.js, 把该目录下所有js引入到这里\n- 命名规范\n  - 变量\n    - 常量: 用大写加下划线 (eg: DOCUMENT_HEIGHT);\n    - 普通变量: 小驼峰\n  - 函数\n    - 构造函数,类  大驼峰\n    - 普通函数 小驼峰\n\n\n\n## 移动端\n\n- 加载更多  使用瀑布流\n- 主要使用rem做单位 (百分比, 像素)\n  - 因chrome字体不能小于12px  所以字体最低可用12px 或 0.24rem(换算后接近12px)\n  - 小的圆圈,或其他小的尺寸(一般5px或以下)  可能因为 rem 而有问题,   因此可用px固定宽高\n  - 百分比也是常用的响应式单位\n- 纯移动端的网站 在pc端打开的时候  内容需要居中展示([参考地址](https://wd.t4tstudio.com/))\n\n\n\n## 页面优化\n\n- 交互\n  - 数据展示的地方,需要有数字滚动效果(countUp.js), 且需要用户滚动到相应位置才展示(滚动一次即可) [参考地址](https://www.chuse8.com/)\n  - 列表图片: 设置鼠标经过放大的效果(pc)\n  - 可点击的地方鼠标样式设置`cursor: pointer`\n  - 鼠标经过的才展示的阴影,需要有过渡效果 (transition: box-shadow .3s; 或给所有效果加上过渡: transition: all .3s;) \n  - pc端外链地址 尽量在新窗口打开 (target=\"_blank\");\n- 展示\n  - 搜索页 需要在搜索结果高亮搜索关键词\n  - 列表的标题，摘要，描述对照设计图  对文字进行裁剪 (.text-cut);\n  - 设置高度最小值100%,把底部固定在页面最下方\n- 首屏加速\n  - 可用cdn 对lib进行加速（常用[bootcdn](https://www.bootcdn.cn/), [75cdn](https://cdn.baomitu.com/)）\n  - 首页图片过多的话,需要使用 [渐进式加载图片](https://github.com/quansitech/progressive-image)\n- seo\n  - head部分的title、keywords、description\n  - 图片的alt标签\n\n\n\n# 常用lib\n\n- [swiper](https://www.swiper.com.cn/)\n\n- [echart](https://echarts.apache.org/zh/index.html)\n\n- polyfill (用于浏览器兼容es5非语法性功能，如Promise);\n\n- [countUp](http://inorganik.github.io/countUp.js/)\n\n- msgBox(消息弹窗)\n\n  \n\n###### 全思的库文件\n\n- popup 弹窗插件\n- react-cus-form 自定义表单插件\n- common.js \n  - ajax-form\n  - ajax-link\n  - ajax-goto-link\n  - ...\n- full-area-select 四级地址联动\n\n\n\n# 其他\n\n- 兼容性\n  - ie10\n  - chrome\n  - edge\n  - safari 看情况(若客户要求)\n- 关于误差： 与设计图偏差不能过大,一般1-2px差距可以接受, \n  eg: 14px也可以用15px取整代替\n- 底部备案号需要用a标签 新窗口打开(移动端可以不需要) target=\"_blank\"\n- 技术支持同样需要a标签, 新窗口打开[技术支持：全思科技](https://www.quansitech.com/)\n- 地图 常用百度地图\n- 常用网站\n  - [caiuse(css兼容查询)](https://caniuse.com/)\n  - [压缩图片](https://tinypng.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Ffront-end-office-website-development-description","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquansitech%2Ffront-end-office-website-development-description","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Ffront-end-office-website-development-description/lists"}