wangmengwei 8fa6bb261a 曲线偏差率页面切换后点击行不显示图表的问题; | 2 anni fa | |
---|---|---|
public | 2 anni fa | |
src | 2 anni fa | |
tests | 3 anni fa | |
.gitignore | 3 anni fa | |
.gitlab-ci.yml | 3 anni fa | |
README.md | 3 anni fa | |
babel.config.js | 3 anni fa | |
package.json | 3 anni fa | |
sh.exe.stackdump | 3 anni fa | |
vue.config.js | 3 anni fa |
通过增加样式的 id class 标签名 来提升权重实现样式替换。 即:避免使用 !important 修饰符来提升权重(本身需覆盖的样式就有 !important 的除外)
个人所负责的模块内的所有样式个人处理解决完。 包括但不限于模块内所使用但还没进行样式切换修改的组件、工具、弹窗、第三方UI库等。
理论上来说只需要亮色主题样式。 但是部分模块可能还需要再写一份暗色的样式避免切换后亮色主题的部分样式残留问题。如需写两套,所分配任务的个人承担。
遵循一个模块一个 less 文件的原则,文件顶部写明当前文件所属模块的名称。
提交代码后如果衍生出冲突需要自行解决
npm install
npm run serve
npm run build
vue inspect > webpack.config.js
-src
--- assets -- 静态文件
--- icon -- 图标
--- svg -- svg图标
--- style -- 公共样式
--- font -- 字体
--- component -- 自定义组件
--- chart -- 图表组件
--- bar -- 柱状体
--- line -- 折线图
--- pie -- 饼状图
--- coms -- 自定义UI组件
--- table -- 表格组件
--- panel -- panel组件
--- card -- 自定义卡片
--- ... -- 更多自定义组件
--- helper -- 小工具
--- partten -- js端全局常量,引入即可使用 目前只有颜色
--- router -- 路由
--- index.js
--- store -- 状态管理 可使用vuex
--- views -- 页面 - 有路由管理跳转
--- layout -- 页面布局
--- Home -- 领导驾驶舱
--- Agc -- AGC页面
--- ... -- 其他页面
项目中使用Less语言处理样式
在assets/styles文件夹中为公共样式 其中包含样式变量及公共样式
参见 assets/styles/common 文件夹中的文件
@green: #05bb4c;
@yellow: #f8de5b;
@blue: #597ef7;
使用方式:在项目中可直接@green
即可使用
color:@green;
assets/styles
除common的文件为公共样式,采用原子性方式设计样式class,可直接在HTML中使用
栅格化布局
采用element ui 源码直接引入,可直接参考element ui https://element.faas.ele.me/#/zh-CN/component/layout
vue
<Row type="flex">
<Col :span="6">
<Row type="flex">
<Col :span="24">
</Col>
</Row>
<Row type="flex">
<Col :span="24">
</Col>
</Row>
<Row type="flex">
<Col :span="24">
</Col>
</Row>
</Col>
<Col :span="12">
</Col>
<Col :span="6">
<Row type="flex">
<Col :span="24">
</Col>
</Row>
<Row type="flex">
<Col :span="24">
</Col>
</Row>
</Col>
</Row>
assets/icon/svg
文件夹中,svg图片由webpack统一打包,放置到对应文件夹即可svg-icon
组件
vue
import SvgIcon from "@/components/coms/icon/svg-icon.vue";
html
<!-- svgid svg图片的id ,打包规则为 svg-文件名 -->
<!-- 如 svg图片名为arrow-down.svg 其svgid 为 svg-arrow-down -->
<!-- 外层样式为公共样式 在 assets/styles/svg.less 中查看 -->
<div class="svg-icon svg-icon-white">
<svg-icon svgid="svg-arrow-down" />
</div>