华龙芯

Appearance

模版 ​

✨ 模版的创建 ​

创建模版

提醒

除了详情都是 “栏目模版”，详情需要设置为 “图文模版”

栏目编号 是一个非常重要的东西，华龙芯的文件规则都是基于此

✨ 代码编写 ​

以开发 政务公开(zwgk) 为例，假设栏目id 为 5001694

那么其目录结构应该为：

├── 5001694/                # 资源根目录
│   ├── common/              # 公共资源目录
│   │   ├── jquery.js        # jQuery库
│   │   ├── swiper.js        # 轮播图组件
│   │   ├── setFont.js       # 字体设置
│   │   ├── base.js          # 基础JS
│   │   ├── jquery.ellipsis.min.js  # 文本省略插件
│   │   ├── xcConfirm.js     # 确认框组件
│   │   └── big5.js          # 繁体字转换
│   │
│   └── zwgk/               # 政务公开模块目录
│       ├── zwgk.html       # 政务公开HTML
│       ├── zwgk.js         # 政务公开JS
│       └── zwgk.css        # 政务公开样式
│
└── 5001694.html           # 政务公开入口页面

开发完成后，将文件压缩为 zip 然后上传至华龙网平台。

✨ 上传至华龙芯 ​

✨ 开发规范 ​

👉 华龙网的《网站静态页面开发规范.docx》下载

提示

可先跳过，后面写代码的时候在来看。

一下内容源于《网站静态页面开发规范.docx》，仅做参考。

华龙网《网站静态页面开发规范.docx》与《华龙芯》 本身存在一些冲突，一切要灵活应对！

比如《网站静态页面开发规范.docx》要求的资源目录为 resources，而华龙芯平台要求的资源文件为平台 id，如 5001694。

华龙网提供的一些文件

  • jquery.js：使用的版本为 1.11
  • swiper.js：建议用 v4 ，
  • setFont.js：自适应处理，100px=1rem
  • jquery.ellipsis.min.js：处理多行省略（兼容 IE）
  • xcConfirm.js：通用弹窗，详见：https://blog.csdn.net/nihaoqiulinhe/article/details/80136707
  • big5.js：简繁体切换
  • common.js：公共部分的 css、js 以 图片资源
  • base.js：一些通用代码

css 不能直接写在 html 中，必须为 .css 文件

自适应页面必须添加

html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

body ​

  1. body 上不能设置 font-size
  2. PC 需要设置
css
body {
  max-width: 1920px;
  margin: 0 auto;
}
  1. 宽度小于 768 为 h5 端

a ​

  1. 所有标题部分（文字或图片，可点击）都需要使用 a 标签

  2. a 标签需要包裹所有内容，如：

html
<!-- 包裹住 图片 + 文字 -->
<a>
  <img class="zwgk-icon" src="" alt="" />
  <span>在线开证明</span>
</a>

  1. 可点击元素 需要设置 cursor: pointer;

  2. 非站内链接 和 详情页链接 的 a 元素需要添加 target=_blank

  3. 当 a 元素嵌套 img 元素时候(<a><img></a>)，需要设置 block，否则 IOS 会错位。不建议使用 inline-block

input ​

需要同时设置 line-height 和 height，为了 ie 兼容

video、radio ​

可使用默认样式，可以与 UI 设计不一致

列表 ​

列表标题 默认为一行，需要添加 title 属性

详情页 ​

需展示完整内容，不能有隐藏

正文 css 需写在最外层 div，不能写在 p、span 上。

页面要求/布局 ​

页面需要有清晰的结构，比如：头部、主体、尾部

html
<body>
  <!-- 头部 -->
  <header></header>
  <!-- 主体 -->
  <main></main>
  <!-- 底部 -->
  <footer></footer>
</body>
  1. 对设计图保持完全一致，包括间距、大小、颜色等一模一样，图片、文字标题等必须一致
  2. 文字列表可复制
  3. url 地址不能使用 http/https 开头

兼容性要求 ​

  • Chrome 最低支持版本为 V79；
  • Firefox 最低支持版本为 V68；
  • Edge 最低支持版本为 V79；
  • 360 安全浏览器最低支持版本为 V10；
  • Safari 最低支持版本为 V14；IE 需最低兼容至 IE10