commit
8798bb44d9
103 changed files with 21397 additions and 0 deletions
@ -0,0 +1,3 @@ |
|||||||
|
> 1% |
||||||
|
last 2 versions |
||||||
|
not ie <= 8 |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
.DS_Store |
||||||
|
node_modules |
||||||
|
/dist |
||||||
|
example.html |
||||||
|
favicon.ico |
||||||
|
# local env files |
||||||
|
.env.local |
||||||
|
.env.*.local |
||||||
|
|
||||||
|
# Log files |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.idea |
||||||
|
.vscode |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw* |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
{ |
||||||
|
"tabWidth": 4, |
||||||
|
"singleQuote": true, |
||||||
|
"trailingComma": "none", |
||||||
|
"printWidth": 140 |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2016-2019 vue-manage-system |
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||||
|
of this software and associated documentation files (the "Software"), to deal |
||||||
|
in the Software without restriction, including without limitation the rights |
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||||
|
copies of the Software, and to permit persons to whom the Software is |
||||||
|
furnished to do so, subject to the following conditions: |
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all |
||||||
|
copies or substantial portions of the Software. |
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||||
|
SOFTWARE. |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
presets: [ |
||||||
|
'@vue/app' |
||||||
|
] |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@ |
|||||||
|
{ |
||||||
|
"name": "vue-manage-system", |
||||||
|
"version": "4.2.0", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"dev": "npm run serve", |
||||||
|
"serve": "vue-cli-service serve", |
||||||
|
"build": "vue-cli-service build" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"axios": "^0.26.1", |
||||||
|
"babel-polyfill": "^6.26.0", |
||||||
|
"core-js": "^2.6.10", |
||||||
|
"echarts": "^4.9.0", |
||||||
|
"element-theme": "^2.0.1", |
||||||
|
"element-ui": "^2.15.6", |
||||||
|
"html2canvas": "^1.3.2", |
||||||
|
"js-cookie": "^2.2.1", |
||||||
|
"jspdf": "^2.4.0", |
||||||
|
"mavon-editor": "^2.9.1", |
||||||
|
"vue": "^2.6.14", |
||||||
|
"vue-cropperjs": "^3.0.0", |
||||||
|
"vue-i18n": "^8.26.5", |
||||||
|
"vue-pdf": "^4.3.0", |
||||||
|
"vue-quill-editor": "^3.0.6", |
||||||
|
"vue-router": "^3.5.3", |
||||||
|
"vuedraggable": "^2.24.3", |
||||||
|
"vuex": "^3.6.2", |
||||||
|
"wow.js": "^1.2.2" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@vue/cli-plugin-babel": "^3.9.0", |
||||||
|
"@vue/cli-service": "^3.9.0", |
||||||
|
"browserslist": "^4.17.5", |
||||||
|
"caniuse-lite": "^1.0.30001271", |
||||||
|
"element-theme-chalk": "^2.15.6", |
||||||
|
"node-sass": "^4.14.0", |
||||||
|
"sass-loader": "^8.0.2", |
||||||
|
"vue-template-compiler": "^2.6.14" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
autoprefixer: {} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="keywords" content="职站,教学,教育,在线编程"> |
||||||
|
<meta name="description" content="职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台。平台采用了大数据，云计算等技术，为学校搭建信息化平台提供了基础，可助力院校实现教学智能化升级。职站平台设计遵循着极简、高效的理念，可帮助老师轻松开展实验教学，并支持自定义发布考核和练习，智能统计和检验学生的日常实训练习效果；老师还可以通过可视化图表报告直观查看学生实训成绩，评估教学成果。"/> |
||||||
|
<meta name="baidu-site-verification" content="code-TRfXe8xIkJ" /> |
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||||
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> |
||||||
|
<title>粒子研究院</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<noscript> |
||||||
|
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||||
|
</noscript> |
||||||
|
<div id="app"></div> |
||||||
|
<!-- built files will be auto injected --> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
<template> |
||||||
|
<div id="app"> |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from "@/setting"; |
||||||
|
import util from "@/libs/util"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "App", |
||||||
|
created() { |
||||||
|
//在页面加载时读取localStorage里的状态信息 |
||||||
|
if (util.local.get(Setting.storeKey)) { |
||||||
|
this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey))); |
||||||
|
} |
||||||
|
|
||||||
|
//在页面刷新时将vuex里的信息保存到localStorage里 |
||||||
|
window.addEventListener("beforeunload", () => { |
||||||
|
util.local.get(Setting.tokenKey) && util.local.set(Setting.storeKey, this.$store.state); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export default { |
||||||
|
getTableByCondition:`data/data/table/getTableByCondition`, |
||||||
|
queryDatabaseInfo:`data/data/dataRecord/queryDatabaseInfo`, |
||||||
|
previewData:`data/data/preview`, |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 877 B |
|
After Width: | Height: | Size: 562 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 527 B |
@ -0,0 +1,64 @@ |
|||||||
|
<template> |
||||||
|
<!-- 面包屑 --> |
||||||
|
<div class="breadcrumb"> |
||||||
|
<el-breadcrumb separator=">"> |
||||||
|
<template v-for="(item, index) in pages"> |
||||||
|
<el-breadcrumb-item |
||||||
|
v-if="index != pages.length - 1" |
||||||
|
:key="index" |
||||||
|
:to="{ path: route, query }"> |
||||||
|
{{item}} |
||||||
|
</el-breadcrumb-item> |
||||||
|
<el-breadcrumb-item |
||||||
|
v-else |
||||||
|
:key="index"> |
||||||
|
{{item}} |
||||||
|
</el-breadcrumb-item> |
||||||
|
</template> |
||||||
|
</el-breadcrumb> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
data: { |
||||||
|
type: String, |
||||||
|
required: true |
||||||
|
}, |
||||||
|
route: { |
||||||
|
type: String, |
||||||
|
default: 'list' |
||||||
|
}, |
||||||
|
query: { |
||||||
|
type: Object |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pages: this.data.split('/') |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
update(data){ |
||||||
|
this.pages = data.split('/') |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.breadcrumb { |
||||||
|
margin: 4px 0 16px; |
||||||
|
/deep/.el-breadcrumb__item { |
||||||
|
.is-link, .el-breadcrumb__separator { |
||||||
|
font-weight: 400; |
||||||
|
color: $main-color; |
||||||
|
} |
||||||
|
&:last-child { |
||||||
|
.is-link { |
||||||
|
color: #0B1D30; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,134 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-dialog |
||||||
|
custom-class="pdf-dia" |
||||||
|
:close-on-click-modal="false" |
||||||
|
:visible.sync="visible" |
||||||
|
@close="closePdf" |
||||||
|
:fullscreen="true" |
||||||
|
:modal="false" |
||||||
|
:append-to-body="true"> |
||||||
|
<div> |
||||||
|
<button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closePdf"><i |
||||||
|
class="el-dialog__close el-icon el-icon-close"></i></button> |
||||||
|
<div class="pdf"> |
||||||
|
<p class="arrow"> |
||||||
|
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" |
||||||
|
:class="{grey: currentPage==1}"></span> |
||||||
|
{{ currentPage }} / {{ pageCount }} |
||||||
|
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" |
||||||
|
:class="{grey: currentPage==pageCount}"></span> |
||||||
|
</p> |
||||||
|
<pdf |
||||||
|
class="pdf-wrap" |
||||||
|
:src="src" |
||||||
|
:page="currentPage" |
||||||
|
@num-pages="pageCount=$event" |
||||||
|
@page-loaded="currentPage=$event" |
||||||
|
@loaded="loadPdfHandler" |
||||||
|
> |
||||||
|
</pdf> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import pdf from "vue-pdf"; |
||||||
|
|
||||||
|
export default { |
||||||
|
props: ["visible", "src"], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
pdfVisible: false, |
||||||
|
pdfSrc: "", |
||||||
|
currentPage: 0, |
||||||
|
pageCount: 0, |
||||||
|
fileType: "pdf" |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { pdf }, |
||||||
|
mounted() { |
||||||
|
this.addEvent(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
closePdf() { |
||||||
|
this.$emit("update:visible", false); |
||||||
|
this.$emit("update:src", ""); |
||||||
|
this.currentPage = 1; |
||||||
|
}, |
||||||
|
changePdfPage(val) { |
||||||
|
if (val === 0 && this.currentPage > 1) { |
||||||
|
this.currentPage--; |
||||||
|
} |
||||||
|
if (val === 1 && this.currentPage < this.pageCount) { |
||||||
|
this.currentPage++; |
||||||
|
} |
||||||
|
}, |
||||||
|
loadPdfHandler(e) { |
||||||
|
this.currentPage = 1; |
||||||
|
}, |
||||||
|
addEvent() { |
||||||
|
document.onkeydown = e => { |
||||||
|
let key = window.event.keyCode; |
||||||
|
if (key == 37) { |
||||||
|
this.changePdfPage(0); |
||||||
|
} else if (key == 39) { |
||||||
|
this.changePdfPage(1); |
||||||
|
} |
||||||
|
}; |
||||||
|
this.$once("hook:beforeDestroy", () => { |
||||||
|
document.onkeydown = null; |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
/deep/ .pdf-dia { |
||||||
|
border-radius: 0 !important; |
||||||
|
|
||||||
|
.el-dialog__header { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.el-dialog__body { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.el-dialog__headerbtn { |
||||||
|
top: 10px; |
||||||
|
|
||||||
|
.el-dialog__close { |
||||||
|
color: #fff; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pdf { |
||||||
|
.arrow { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
padding: 10px 0; |
||||||
|
font-size: 16px; |
||||||
|
color: #fff; |
||||||
|
background-color: #333; |
||||||
|
|
||||||
|
.turn { |
||||||
|
margin: 0 10px; |
||||||
|
font-size: 18px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pdf-wrap { |
||||||
|
height: calc(100vh - 45px); |
||||||
|
margin: 0 auto; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,255 @@ |
|||||||
|
<template> |
||||||
|
<div class="quill" ref="quill" :class="classes"> |
||||||
|
<div ref="editor" :style="styles" v-loading="loading"></div> |
||||||
|
|
||||||
|
<el-upload |
||||||
|
:headers="headers" |
||||||
|
:action="this.api.fileupload" |
||||||
|
:before-upload="beforeUpload" |
||||||
|
:on-success="editorUploadSuccess" |
||||||
|
style="display: none" |
||||||
|
> |
||||||
|
<el-button class="editorUpload" type="primary">点击上传</el-button> |
||||||
|
</el-upload> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from "@/libs/util"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
import Quill from "quill"; |
||||||
|
import "quill/dist/quill.core.css"; |
||||||
|
import "quill/dist/quill.snow.css"; |
||||||
|
import "quill/dist/quill.bubble.css"; |
||||||
|
import toolbarOptions from "./options"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "quill", |
||||||
|
props: { |
||||||
|
value: { |
||||||
|
type: String, |
||||||
|
default: "" |
||||||
|
}, |
||||||
|
readonly: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
toTop: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
border: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
height: { |
||||||
|
type: Number |
||||||
|
}, |
||||||
|
minHeight: { |
||||||
|
type: Number |
||||||
|
}, |
||||||
|
/* |
||||||
|
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致， |
||||||
|
* 使用props传入elseRead = 'true'，手动隐藏工具栏 |
||||||
|
*/ |
||||||
|
elseRead: { |
||||||
|
type: String, default: "false" |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
headers: { |
||||||
|
token: util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
Quill: null, |
||||||
|
currentValue: "", |
||||||
|
options: { |
||||||
|
theme: "snow", |
||||||
|
bounds: document.body, |
||||||
|
debug: "warn", |
||||||
|
modules: { |
||||||
|
toolbar: { |
||||||
|
container: toolbarOptions, |
||||||
|
handlers: { |
||||||
|
"image": function(value) { |
||||||
|
if (value) { |
||||||
|
// 调用iview图片上传 |
||||||
|
document.querySelector(".editorUpload").click(); |
||||||
|
} else { |
||||||
|
this.Quill.format("image", false); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
placeholder: "", |
||||||
|
readOnly: this.readonly |
||||||
|
}, |
||||||
|
loading: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
classes() { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
"quill-no-border": !this.border |
||||||
|
} |
||||||
|
]; |
||||||
|
}, |
||||||
|
styles() { |
||||||
|
let style = {}; |
||||||
|
if (this.minHeight) { |
||||||
|
style.minHeight = `${this.minHeight}px`; |
||||||
|
} |
||||||
|
if (this.height) { |
||||||
|
style.height = `${this.height}px`; |
||||||
|
} |
||||||
|
return style; |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
watch: { |
||||||
|
value: { |
||||||
|
handler(val) { |
||||||
|
if (val !== this.currentValue) { |
||||||
|
this.currentValue = val; |
||||||
|
if (this.Quill) { |
||||||
|
this.Quill.pasteHTML(this.value); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
immediate: true |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.init(); |
||||||
|
// 处理工具栏隐藏样式 |
||||||
|
if (this.elseRead === "true") { |
||||||
|
let children = this.$refs.quill.children[0].style; |
||||||
|
children.padding = "0"; |
||||||
|
children.overflow = "hidden"; |
||||||
|
children.height = "0"; |
||||||
|
children.borderTop = "0"; |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
// 在组件销毁后销毁实例 |
||||||
|
this.Quill = null; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
init () { |
||||||
|
const editor = this.$refs.editor; |
||||||
|
// 初始化编辑器 |
||||||
|
this.Quill = new Quill(editor, this.options); |
||||||
|
const ins = this.Quill |
||||||
|
// 默认值 |
||||||
|
ins.pasteHTML(this.currentValue); |
||||||
|
if(this.toTop){ |
||||||
|
this.$nextTick(() => { |
||||||
|
window.scrollTo(0,0) |
||||||
|
}) |
||||||
|
} |
||||||
|
// 绑定事件 |
||||||
|
ins.on('text-change', (delta, oldDelta, source) => { |
||||||
|
const html = this.$refs.editor.children[0].innerHTML; |
||||||
|
const text = ins.getText(); |
||||||
|
const quill = this.Quill; |
||||||
|
// 更新内部的值 |
||||||
|
this.currentValue = html; |
||||||
|
// 发出事件 v-model |
||||||
|
this.$emit('input', html); |
||||||
|
// 发出事件 |
||||||
|
this.$emit('on-change', { html, text, quill }); |
||||||
|
}); |
||||||
|
// 将一些 quill 自带的事件传递出去 |
||||||
|
ins.on('text-change', (delta, oldDelta, source) => { |
||||||
|
this.$emit('on-text-change', delta, oldDelta, source); |
||||||
|
}); |
||||||
|
ins.on('selection-change', (range, oldRange, source) => { |
||||||
|
this.$emit('on-selection-change', range, oldRange, source); |
||||||
|
}); |
||||||
|
ins.on('editor-change', (eventName, ...args) => { |
||||||
|
this.$emit('on-editor-change', eventName, ...args); |
||||||
|
}); |
||||||
|
// 监听粘贴事件 |
||||||
|
ins.root.addEventListener('paste', evt => { |
||||||
|
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) { |
||||||
|
evt.preventDefault(); |
||||||
|
// 检测是否粘贴的是图片 |
||||||
|
[].forEach.call(evt.clipboardData.files, file => { |
||||||
|
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { |
||||||
|
return |
||||||
|
} |
||||||
|
const param = new FormData() |
||||||
|
param.append('file', file) |
||||||
|
// 把图片上传到服务器，不然会直接把base64存到数据库 |
||||||
|
this.$post(this.api.fileupload, param, { |
||||||
|
headers: { "Content-Type": "multipart/form-data" } |
||||||
|
}).then(res => { |
||||||
|
var range = ins.getSelection() |
||||||
|
if (range) { |
||||||
|
// 在当前光标位置插入图片 |
||||||
|
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) |
||||||
|
// 将光标移动到图片后面 |
||||||
|
ins.setSelection(range.index + 1) |
||||||
|
} |
||||||
|
}).catch(res => {}) |
||||||
|
}); |
||||||
|
} |
||||||
|
}, false) |
||||||
|
}, |
||||||
|
beforeUpload(file) { |
||||||
|
this.loading = true; |
||||||
|
}, |
||||||
|
editorUploadSuccess(res) { |
||||||
|
// 获取富文本组件实例 |
||||||
|
let quill = this.Quill; |
||||||
|
// 如果上传成功 |
||||||
|
if (res.data.filesResult.fileUrl) { |
||||||
|
// 获取光标所在位置 |
||||||
|
let length = quill.getSelection().index; |
||||||
|
// 插入图片，res为服务器返回的图片链接地址 |
||||||
|
quill.insertEmbed(length, "image", res.data.filesResult.fileUrl); |
||||||
|
// 调整光标到最后 |
||||||
|
quill.setSelection(length + 1); |
||||||
|
} else { |
||||||
|
util.successMsg("图片插入失败"); |
||||||
|
} |
||||||
|
this.loading = false; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.quill-no-border { |
||||||
|
.ql-toolbar.ql-snow { |
||||||
|
border: none; |
||||||
|
border-bottom: 1px solid #e8eaec; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-container.ql-snow { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.else { |
||||||
|
.ql-toolbar.ql-snow { |
||||||
|
height: 0; |
||||||
|
overflow: hidden; |
||||||
|
padding: 0; |
||||||
|
border-top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
/deep/.ql-snow { |
||||||
|
position: relative; |
||||||
|
.ql-tooltip { |
||||||
|
position: absolute !important; |
||||||
|
top: 10px !important; |
||||||
|
left: 10px !important; |
||||||
|
transform: translateY(10px); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
export default [ |
||||||
|
["bold", "italic", "underline", "strike"], |
||||||
|
["blockquote", "code-block"], |
||||||
|
[{ "header": 1 }, { "header": 2 }], |
||||||
|
[{ "list": "ordered" }, { "list": "bullet" }], |
||||||
|
[{ "script": "sub" }, { "script": "super" }], |
||||||
|
[{ "indent": "-1" }, { "indent": "+1" }], |
||||||
|
[{ "direction": "rtl" }], |
||||||
|
[{ "size": ["small", false, "large", "huge"] }], |
||||||
|
[{ "header": [1, 2, 3, 4, 5, 6, false] }], |
||||||
|
[{ "color": [] }, { "background": [] }], |
||||||
|
[{ "font": [] }], |
||||||
|
[{ "align": [] }], |
||||||
|
["clean"], |
||||||
|
["link", "image", "video"] |
||||||
|
]; |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
export const messages = { |
||||||
|
"zh": { |
||||||
|
i18n: { |
||||||
|
breadcrumb: "国际化产品", |
||||||
|
tips: "通过切换语言按钮，来改变当前内容的语言。", |
||||||
|
btn: "切换英文", |
||||||
|
title1: "常用用法", |
||||||
|
p1: "要是你把你的秘密告诉了风，那就别怪风把它带给树。", |
||||||
|
p2: "没有什么比信念更能支撑我们度过艰难的时光了。", |
||||||
|
p3: "只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。", |
||||||
|
title2: "组件插值", |
||||||
|
info: "Element组件需要国际化，请参考 {action}。", |
||||||
|
value: "文档" |
||||||
|
} |
||||||
|
}, |
||||||
|
"en": { |
||||||
|
i18n: { |
||||||
|
breadcrumb: "International Products", |
||||||
|
tips: "Click on the button to change the current language. ", |
||||||
|
btn: "Switch Chinese", |
||||||
|
title1: "Common usage", |
||||||
|
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
||||||
|
p2: "Nothing can help us endure dark times better than our faith. ", |
||||||
|
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
||||||
|
title2: "Component interpolation", |
||||||
|
info: "The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.", |
||||||
|
value: "documentation" |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<template> |
||||||
|
<div class="footer"> |
||||||
|
<div class="info" v-if="isIndex"> |
||||||
|
<span class="m-r-20">客服邮箱：service@huorantech.cn</span> |
||||||
|
</div> |
||||||
|
<div class="copyright"> |
||||||
|
<span v-if="isIndex">© Copyright 2021 Occupation Lab 职站</span> |
||||||
|
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Setting from "@/setting"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
isIndex: this.$route.path !== '/login' && Setting.whiteList.some(e => e === this.$route.path) // 官网3个页面才能显示邮箱和版权号 |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.footer{ |
||||||
|
padding: 17px 0 9px; |
||||||
|
text-align: center; |
||||||
|
background-color: #0F1D2E; |
||||||
|
.info{ |
||||||
|
margin-bottom: 7px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 20px; |
||||||
|
color: #D7DFE7; |
||||||
|
} |
||||||
|
.copyright{ |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
line-height: 17px; |
||||||
|
span{ |
||||||
|
margin-right: 20px; |
||||||
|
color: #757F8A; |
||||||
|
} |
||||||
|
a{ |
||||||
|
color:#757F8A; |
||||||
|
font-size: 12px; |
||||||
|
&:hover{ |
||||||
|
color: #c7c7c7; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
<template> |
||||||
|
<div class="header"> |
||||||
|
<a class="logo" @click="toIndex"> |
||||||
|
<img src="@/assets/images/logo.png" alt=""> |
||||||
|
深圳中能高重复自由电子激光 |
||||||
|
</a> |
||||||
|
<navbar ref="nav"></navbar> |
||||||
|
<div class="tools"> |
||||||
|
<img class="search" src="@/assets/images/search.png" alt=""> |
||||||
|
<img src="@/assets/images/cn.png" alt=""> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { mapState, mapMutations, mapActions } from "vuex"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
import util from "@/libs/util"; |
||||||
|
import navbar from "../navbar"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
navbar |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
toIndex() { |
||||||
|
this.$refs.nav.jump({ |
||||||
|
index: '/index/list' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
$height: 90px; |
||||||
|
.header { |
||||||
|
z-index: 10; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
min-width: $min-width; |
||||||
|
height: $height; |
||||||
|
background-color: #fff; |
||||||
|
box-shadow: 0px 2px 9px 0px rgba(221,221,221,0.18); |
||||||
|
.logo{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 167px; |
||||||
|
font-size: 20px; |
||||||
|
color: #333330; |
||||||
|
line-height: $height; |
||||||
|
cursor: pointer; |
||||||
|
img { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
.tools { |
||||||
|
position: absolute; |
||||||
|
top: 30px; |
||||||
|
right: 240px; |
||||||
|
img { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.search { |
||||||
|
margin-right: 43px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media (max-width: 1430px) { |
||||||
|
.header { |
||||||
|
.logo { |
||||||
|
left: 20px; |
||||||
|
} |
||||||
|
.inner { |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
<template> |
||||||
|
<div class="main"> |
||||||
|
<v-head></v-head> |
||||||
|
<div class="layout"> |
||||||
|
<div class="content"> |
||||||
|
<transition name="move" mode="out-in"> |
||||||
|
<router-view class="view"></router-view> |
||||||
|
</transition> |
||||||
|
<el-backtop target=".content"></el-backtop> |
||||||
|
<!-- <v-footer ref="footer"></v-footer> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from "@/libs/util"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
import vHead from "../header"; |
||||||
|
import vFooter from "../footer"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
vHead, |
||||||
|
vFooter |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 长时间未操作,自动退出登录 |
||||||
|
autoLogout() { |
||||||
|
let lastTime = new Date().getTime(); |
||||||
|
document.onmousedown = () => { |
||||||
|
lastTime = new Date().getTime(); |
||||||
|
}; |
||||||
|
|
||||||
|
setInterval(() => { |
||||||
|
if (util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > Setting.autoLogoutTime) { |
||||||
|
util.errorMsg("用户登录过期，请重新登录"); |
||||||
|
setTimeout(this.logout, 1500); |
||||||
|
} |
||||||
|
}, 1000); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.main{ |
||||||
|
min-height: calc(100% - 90px); |
||||||
|
.layout{ |
||||||
|
padding-top: 90px; |
||||||
|
} |
||||||
|
.index{ |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<ul class="nav"> |
||||||
|
<li v-for="(item, i) in menus" :key="i" :class="{active: active == item.index}" @click="jump(item)"> |
||||||
|
{{item.title}} |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from '@/setting' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
active: this.$route.path, |
||||||
|
menus: [ |
||||||
|
{ |
||||||
|
index: "/intro", |
||||||
|
title: "S³FEL概况" |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: "occupationlab", |
||||||
|
title: "装置介绍" |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: 'data', |
||||||
|
title: "科学研究" |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: "/cityPartner", |
||||||
|
title: "人才队伍" |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: "/devPlatform", |
||||||
|
title: "用户共享" |
||||||
|
}, |
||||||
|
{ |
||||||
|
index: "/about", |
||||||
|
title: "科普之窗" |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 跳转 |
||||||
|
jump(item) { |
||||||
|
const { index } = item |
||||||
|
this.active = index |
||||||
|
this.$router.push(index).catch(err => {}) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.nav{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 50%; |
||||||
|
display: flex; |
||||||
|
transform: translateX(-50%); |
||||||
|
& > li{ |
||||||
|
position: relative; |
||||||
|
padding: 0 15px; |
||||||
|
margin: 0 10px; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 90px; |
||||||
|
color: #333; |
||||||
|
white-space: nowrap; |
||||||
|
cursor: pointer; |
||||||
|
&.active{ |
||||||
|
color: $main-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (max-width: 1430px) { |
||||||
|
.nav { |
||||||
|
left: 52%; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
/** |
||||||
|
* @description 生成按钮级别权限组 |
||||||
|
* */ |
||||||
|
|
||||||
|
import store from "@/store"; |
||||||
|
|
||||||
|
export default function(data) { |
||||||
|
let result = []; |
||||||
|
data.map(e => { |
||||||
|
if (e.select) { |
||||||
|
e.children.map(n => { |
||||||
|
if (n.select) { |
||||||
|
if (n.children.length) { |
||||||
|
result.push(`${e.name}:${n.name}`); |
||||||
|
n.children.map(j => { |
||||||
|
j.select && (e.path ? result.push(`${e.path}:${n.name}:${j.name}`) : result.push(`${n.path}:${j.name}`)); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
result.push(`${e.path}:${n.name}`); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
store.dispatch("auth/addBtnAuth", result); |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import Vue from "vue"; |
||||||
|
|
||||||
|
// 使用 Event Bus
|
||||||
|
const bus = new Vue(); |
||||||
|
|
||||||
|
export default bus; |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
// 生成随机字符串
|
||||||
|
export default function(len = 32) { |
||||||
|
const $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"; |
||||||
|
const maxPos = $chars.length; |
||||||
|
let str = ""; |
||||||
|
for (let i = 0; i < len; i++) { |
||||||
|
str += $chars.charAt(Math.floor(Math.random() * maxPos)); |
||||||
|
} |
||||||
|
return str; |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
// rem等比适配配置文件
|
||||||
|
// 基准大小
|
||||||
|
const baseSize = 16; |
||||||
|
|
||||||
|
// 设置 rem 函数
|
||||||
|
function setRem() { |
||||||
|
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
|
||||||
|
const scale = document.documentElement.clientWidth / 1920; |
||||||
|
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
|
||||||
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px"; |
||||||
|
} |
||||||
|
|
||||||
|
// 初始化
|
||||||
|
setRem(); |
||||||
|
// 改变窗口大小时重新设置 rem
|
||||||
|
window.onresize = function() { |
||||||
|
setRem(); |
||||||
|
}; |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import store from "@/store"; |
||||||
|
import router from "@/router"; |
||||||
|
import generateBtnPermission from "../auth/generateBtnPermission"; |
||||||
|
|
||||||
|
const newRoutes = []; |
||||||
|
|
||||||
|
function createMeta(item) { |
||||||
|
let meta = { title: item.name }; |
||||||
|
return meta; |
||||||
|
} |
||||||
|
|
||||||
|
function createRoute(data) { |
||||||
|
data.map(e => { |
||||||
|
if (e.select && e.path) { |
||||||
|
let meta = createMeta(e); |
||||||
|
newRoutes.push({ |
||||||
|
name: e.path, |
||||||
|
path: () => import(`@/pages/${e.path}.vue`), |
||||||
|
meta |
||||||
|
}); |
||||||
|
} |
||||||
|
e.children && e.children.length && createRoute(e.children); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export default function(data, path) { |
||||||
|
generateBtnPermission(data); |
||||||
|
createRoute(data); |
||||||
|
store.dispatch("auth/addRoutes", newRoutes); |
||||||
|
// router.addRoutes(routes)
|
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import store from "@/store"; |
||||||
|
import router from "@/router"; |
||||||
|
|
||||||
|
export default function() { |
||||||
|
setTimeout(() => { |
||||||
|
let routes = store.state.auth.routes; |
||||||
|
routes.forEach(e => { |
||||||
|
if (e.path == "/") { |
||||||
|
e.component = () => import("@/layouts/home/index.vue"); |
||||||
|
} else { |
||||||
|
e.component = () => import(`@/pages/${e.path}.vue`); |
||||||
|
} |
||||||
|
|
||||||
|
e.children && e.children.forEach(n => { |
||||||
|
n.path && (n.component = () => import(`@/pages/${n.path}.vue`)); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
routes.push({ |
||||||
|
path: "*", |
||||||
|
redirect: "404" |
||||||
|
}); |
||||||
|
|
||||||
|
router.addRoutes(routes); |
||||||
|
}, 500); |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import router from "@/router"; |
||||||
|
|
||||||
|
export default function() { |
||||||
|
const newRouter = createRouter(); |
||||||
|
router.matcher = newRouter.matcher; |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import Cookies from "js-cookie"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
|
||||||
|
const cookies = {}; |
||||||
|
|
||||||
|
/** |
||||||
|
* @description 存储 cookie 值 |
||||||
|
* @param {String} name cookie name |
||||||
|
* @param {String} value cookie value |
||||||
|
* @param {Object} cookieSetting cookie setting |
||||||
|
*/ |
||||||
|
cookies.set = function(name = "default", value = "", cookieSetting = {}) { |
||||||
|
let currentCookieSetting = { |
||||||
|
expires: Setting.cookiesExpires |
||||||
|
}; |
||||||
|
Object.assign(currentCookieSetting, cookieSetting); |
||||||
|
Cookies.set(`admin-${name}`, value, currentCookieSetting); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* @description 拿到 cookie 值 |
||||||
|
* @param {String} name cookie name |
||||||
|
*/ |
||||||
|
cookies.get = function(name = "default") { |
||||||
|
return Cookies.get(`admin-${name}`); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* @description 拿到 cookie 全部的值 |
||||||
|
*/ |
||||||
|
cookies.getAll = function() { |
||||||
|
return Cookies.get(); |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* @description 删除 cookie |
||||||
|
* @param {String} name cookie name |
||||||
|
*/ |
||||||
|
cookies.remove = function(name = "default") { |
||||||
|
return Cookies.remove(`admin-${name}`); |
||||||
|
}; |
||||||
|
|
||||||
|
export default cookies; |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
/** |
||||||
|
* localStorage |
||||||
|
* @调用：_local.set('access_token', '123456', 5000); |
||||||
|
* @调用：_local.get('access_token'); |
||||||
|
*/ |
||||||
|
|
||||||
|
var _local = { |
||||||
|
//存储,可设置过期时间
|
||||||
|
set(key, value, expires) { |
||||||
|
let params = { key, value, expires }; |
||||||
|
if (expires) { |
||||||
|
// 记录何时将值存入缓存，毫秒级
|
||||||
|
var data = Object.assign(params, { startTime: new Date().getTime() }); |
||||||
|
localStorage.setItem(key, JSON.stringify(data)); |
||||||
|
} else { |
||||||
|
if (Object.prototype.toString.call(value) == "[object Object]") { |
||||||
|
value = JSON.stringify(value); |
||||||
|
} |
||||||
|
if (Object.prototype.toString.call(value) == "[object Array]") { |
||||||
|
value = JSON.stringify(value); |
||||||
|
} |
||||||
|
localStorage.setItem(key, value); |
||||||
|
} |
||||||
|
}, |
||||||
|
//取出
|
||||||
|
get(key) { |
||||||
|
let item = localStorage.getItem(key); |
||||||
|
// 先将拿到的试着进行json转为对象的形式
|
||||||
|
try { |
||||||
|
item = JSON.parse(item); |
||||||
|
} catch (error) { |
||||||
|
// eslint-disable-next-line no-self-assign
|
||||||
|
item = item; |
||||||
|
} |
||||||
|
// 如果有startTime的值，说明设置了失效时间
|
||||||
|
if (item && item.startTime) { |
||||||
|
let date = new Date().getTime(); |
||||||
|
|
||||||
|
// 如果大于就是过期了，如果小于或等于就还没过期
|
||||||
|
if (date - item.startTime > item.expires) { |
||||||
|
localStorage.removeItem(key); |
||||||
|
return false; |
||||||
|
} else { |
||||||
|
return item.value; |
||||||
|
} |
||||||
|
} else { |
||||||
|
return item; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 删除
|
||||||
|
remove(key) { |
||||||
|
localStorage.removeItem(key); |
||||||
|
}, |
||||||
|
// 清除全部
|
||||||
|
clear() { |
||||||
|
localStorage.clear(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* sessionStorage |
||||||
|
*/ |
||||||
|
var _session = { |
||||||
|
get: function(key) { |
||||||
|
var data = sessionStorage[key]; |
||||||
|
if (!data || data === "null") { |
||||||
|
return null; |
||||||
|
} |
||||||
|
return data; |
||||||
|
}, |
||||||
|
set: function(key, value) { |
||||||
|
sessionStorage[key] = value; |
||||||
|
}, |
||||||
|
// 删除
|
||||||
|
remove(key) { |
||||||
|
sessionStorage.removeItem(key); |
||||||
|
}, |
||||||
|
// 清除全部
|
||||||
|
clear() { |
||||||
|
sessionStorage.clear(); |
||||||
|
} |
||||||
|
}; |
||||||
|
export { _local, _session }; |
||||||
@ -0,0 +1,187 @@ |
|||||||
|
import cookies from "./util.cookies"; |
||||||
|
import { _local, _session } from "./util.db"; |
||||||
|
import { Message } from "element-ui"; |
||||||
|
import store from "@/store"; |
||||||
|
import axios from "axios"; |
||||||
|
import api from "@/api"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
|
||||||
|
let logout = false; |
||||||
|
// 文件后缀集合
|
||||||
|
const exts = { |
||||||
|
video: 'mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv', |
||||||
|
audio: 'mp3,aac,ape,flac,wav,wma,amr,mid', |
||||||
|
img: 'jpg,jpeg,png,gif,svg,psd', |
||||||
|
doc: 'doc,docx,txt,xls,xlsx,csv,xml,ppt,pptx' |
||||||
|
} |
||||||
|
const util = { |
||||||
|
cookies, |
||||||
|
local: _local, |
||||||
|
session: _session, |
||||||
|
// 传入身份证获取生日
|
||||||
|
getBirth(idCard) { |
||||||
|
var birthday = ""; |
||||||
|
if (idCard != null && idCard != "") { |
||||||
|
if (idCard.length == 15) { |
||||||
|
birthday = "19" + idCard.slice(6, 12); |
||||||
|
} else if (idCard.length == 18) { |
||||||
|
birthday = idCard.slice(6, 14); |
||||||
|
} |
||||||
|
birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-"); |
||||||
|
//通过正则表达式来指定输出格式为:1990-01-01
|
||||||
|
} |
||||||
|
return birthday; |
||||||
|
}, |
||||||
|
// new Date('2020-11-12 00:00:00') 在IE下失效，因此把-替换成/
|
||||||
|
dateCompatible(date) { |
||||||
|
return date.replace(/\-/g, "/"); |
||||||
|
}, |
||||||
|
// 日期时间前面补零
|
||||||
|
formateTime(num) { |
||||||
|
return num < 10 ? `0${num}` : num; |
||||||
|
}, |
||||||
|
//返回格式化时间，传参例如："yyyy-MM-dd hh:mm:ss"
|
||||||
|
formatDate(fmt, date) { |
||||||
|
var date = date ? date : new Date(); |
||||||
|
var o = { |
||||||
|
"M+": date.getMonth() + 1, //月份
|
||||||
|
"d+": date.getDate(), //日
|
||||||
|
"h+": date.getHours(), //小时
|
||||||
|
"m+": date.getMinutes(), //分
|
||||||
|
"s+": date.getSeconds(), //秒
|
||||||
|
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
||||||
|
"S": date.getMilliseconds() //毫秒
|
||||||
|
}; |
||||||
|
if (/(y+)/.test(fmt)) { |
||||||
|
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); |
||||||
|
} |
||||||
|
for (var k in o) { |
||||||
|
if (new RegExp("(" + k + ")").test(fmt)) { |
||||||
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); |
||||||
|
} |
||||||
|
} |
||||||
|
return fmt; |
||||||
|
}, |
||||||
|
// 移除数组中指定值
|
||||||
|
removeByValue(arr, val) { |
||||||
|
for (var i = 0; i < arr.length; i++) { |
||||||
|
if (arr[i] == val) { |
||||||
|
arr.splice(i, 1); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
// 传入文件后缀判断是否是视频
|
||||||
|
isVideo(ext) { |
||||||
|
if (exts.video.includes(ext)) return true; |
||||||
|
return false; |
||||||
|
}, |
||||||
|
// 传入文件后缀判断是否是音频
|
||||||
|
isAudio(ext) { |
||||||
|
if (exts.audio.includes(ext)) return true; |
||||||
|
return false; |
||||||
|
}, |
||||||
|
// 传入文件后缀判断是否是图片
|
||||||
|
isImg(ext) { |
||||||
|
if (exts.img.includes(ext)) return true; |
||||||
|
return false; |
||||||
|
}, |
||||||
|
// 传入文件后缀判断是否是pdf以外的文档
|
||||||
|
isDoc(ext) { |
||||||
|
if (exts.doc.includes(ext)) return true; |
||||||
|
return false; |
||||||
|
}, |
||||||
|
// 判断是否能够预览
|
||||||
|
canPreview(ext) { |
||||||
|
if (!util.isVideo(ext) && !util.isAudio(ext) && !util.isImg(ext) && !util.isDoc(ext)) return false |
||||||
|
return true |
||||||
|
}, |
||||||
|
// 循环去除html标签
|
||||||
|
removeHtmlTag(list, attr) { |
||||||
|
list.map(n => { |
||||||
|
n[attr] = n[attr].replace(/<\/?.+?>/gi, ""); |
||||||
|
}); |
||||||
|
return list; |
||||||
|
}, |
||||||
|
// 传入文件名获取文件后缀
|
||||||
|
getFileExt(fileName) { |
||||||
|
return fileName.substring(fileName.lastIndexOf(".") + 1); |
||||||
|
}, |
||||||
|
// 传入文件名和路径，下载图片视频，支持跨域，a标签加download不支持跨域
|
||||||
|
downloadFile(fileName, url) { |
||||||
|
var x = new XMLHttpRequest(); |
||||||
|
x.open("GET", url, true); |
||||||
|
x.responseType = "blob"; |
||||||
|
x.onload = function(e) { |
||||||
|
var url = window.URL.createObjectURL(x.response); |
||||||
|
var a = document.createElement("a"); |
||||||
|
a.href = url; |
||||||
|
a.download = fileName; |
||||||
|
a.click(); |
||||||
|
}; |
||||||
|
x.send(); |
||||||
|
}, |
||||||
|
// 传入文件名和数据，下载文件
|
||||||
|
downloadFileDirect(fileName,data) { |
||||||
|
if ('download' in document.createElement('a')) { // 非IE下载
|
||||||
|
const elink = document.createElement('a') |
||||||
|
elink.download = fileName |
||||||
|
elink.style.display = 'none' |
||||||
|
elink.href = URL.createObjectURL(data) |
||||||
|
document.body.appendChild(elink) |
||||||
|
elink.click() |
||||||
|
URL.revokeObjectURL(elink.href) // 释放URL 对象
|
||||||
|
document.body.removeChild(elink) |
||||||
|
} else { // IE10+下载
|
||||||
|
navigator.msSaveBlob(data, fileName) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 成功提示
|
||||||
|
successMsg(message, duration = 3000) { |
||||||
|
Message.closeAll(); |
||||||
|
return Message.success({ |
||||||
|
message, |
||||||
|
showClose: true, |
||||||
|
duration |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 警告提示
|
||||||
|
warningMsg(message, duration = 3000) { |
||||||
|
Message.closeAll(); |
||||||
|
return Message.warning({ |
||||||
|
message, |
||||||
|
showClose: true, |
||||||
|
duration |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 错误提示
|
||||||
|
errorMsg(message, duration = 3000) { |
||||||
|
Message.closeAll(); |
||||||
|
return Message.error({ |
||||||
|
message, |
||||||
|
showClose: true, |
||||||
|
duration |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 登录互踢
|
||||||
|
getToken() { |
||||||
|
if (process.env.NODE_ENV == "production") { |
||||||
|
if (store.state.user.dataTime && !logout) { |
||||||
|
axios.get(`${api.queryToken}?token=${_local.get(Setting.tokenKey)}`).then(res => { |
||||||
|
if (store.state.user.dataTime && (res.data.message != store.state.user.dataTime)) { |
||||||
|
logout || Message.error("您已在另一台设备登录，本次登录已下线！"); |
||||||
|
logout = true; |
||||||
|
setTimeout(() => { |
||||||
|
_local.remove(Setting.storeKey); |
||||||
|
_local.remove(Setting.tokenKey); |
||||||
|
location.reload(); |
||||||
|
}, 1500); |
||||||
|
} |
||||||
|
}).catch(err => { |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export default util; |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import Vue from "vue"; |
||||||
|
import App from "@/App.vue"; |
||||||
|
import router from "@/router"; |
||||||
|
import ElementUI from "element-ui"; |
||||||
|
import "@/styles/index.scss"; |
||||||
|
import VueI18n from "vue-i18n"; |
||||||
|
import mixinApp from "@/mixins/app"; |
||||||
|
import { messages } from "@/i18n"; |
||||||
|
import "babel-polyfill"; |
||||||
|
import "@/libs/resize"; |
||||||
|
import { post, get, del, put } from "@/plugins/requests/index.js"; |
||||||
|
import core from '@/libs/core' |
||||||
|
import api from "@/api"; |
||||||
|
import store from "@/store"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
import permission from "@/router/permission"; |
||||||
|
|
||||||
|
// 插件
|
||||||
|
import plugins from "@/plugins"; |
||||||
|
import filters from "@/plugins/filters"; |
||||||
|
|
||||||
|
Vue.use(plugins); |
||||||
|
|
||||||
|
Object.keys(filters).forEach(item => Vue.filter(item, filters[item])); |
||||||
|
|
||||||
|
Vue.prototype.api = api; |
||||||
|
Vue.prototype.$get = get; |
||||||
|
Vue.prototype.$post = post; |
||||||
|
Vue.prototype.$del = del; |
||||||
|
Vue.prototype.$put = put; |
||||||
|
Vue.prototype.core = core |
||||||
|
|
||||||
|
Vue.config.productionTip = false; |
||||||
|
Vue.use(VueI18n); |
||||||
|
Vue.use(ElementUI, { size: "small" }); |
||||||
|
const i18n = new VueI18n({ |
||||||
|
locale: Setting.i18n.default, |
||||||
|
messages |
||||||
|
}); |
||||||
|
|
||||||
|
new Vue({ |
||||||
|
mixins: [mixinApp], |
||||||
|
router, |
||||||
|
i18n, |
||||||
|
store, |
||||||
|
render: h => h(App) |
||||||
|
}).$mount("#app"); |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
/** |
||||||
|
* 通用混合 |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
// 当 $route 更新时触发
|
||||||
|
appRouteChange(to, from) { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
<template> |
||||||
|
<div class="error-page"> |
||||||
|
<div class="error-code">4<span>0</span>3</div> |
||||||
|
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div> |
||||||
|
<div class="error-handle"> |
||||||
|
<router-link to="/"> |
||||||
|
<el-button type="primary" size="large" @click="toIndex">返回首页</el-button> |
||||||
|
</router-link> |
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
toIndex() { |
||||||
|
this.$router.push("/"); |
||||||
|
}, |
||||||
|
goBack() { |
||||||
|
this.$router.go(-1); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.error-page { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #f3f3f3; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.error-code { |
||||||
|
line-height: 1; |
||||||
|
font-size: 250px; |
||||||
|
font-weight: bolder; |
||||||
|
color: #f02d2d; |
||||||
|
} |
||||||
|
|
||||||
|
.error-code span { |
||||||
|
color: #00a854; |
||||||
|
} |
||||||
|
|
||||||
|
.error-desc { |
||||||
|
font-size: 30px; |
||||||
|
color: #777; |
||||||
|
} |
||||||
|
|
||||||
|
.error-handle { |
||||||
|
margin-top: 30px; |
||||||
|
padding-bottom: 200px; |
||||||
|
} |
||||||
|
|
||||||
|
.error-btn { |
||||||
|
margin-left: 100px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
<template> |
||||||
|
<div class="error-page"> |
||||||
|
<div class="error-code">4<span>0</span>4</div> |
||||||
|
<div class="error-desc">啊哦~ 你所访问的页面不存在</div> |
||||||
|
<div class="error-handle"> |
||||||
|
<router-link to="/"> |
||||||
|
<el-button type="primary" size="large" @click="toIndex">返回首页</el-button> |
||||||
|
</router-link> |
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
toIndex() { |
||||||
|
this.$router.push("/"); |
||||||
|
}, |
||||||
|
goBack() { |
||||||
|
this.$router.go(-1); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.error-page { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #f3f3f3; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.error-code { |
||||||
|
line-height: 1; |
||||||
|
font-size: 250px; |
||||||
|
font-weight: bolder; |
||||||
|
color: #2d8cf0; |
||||||
|
} |
||||||
|
|
||||||
|
.error-code span { |
||||||
|
color: #00a854; |
||||||
|
} |
||||||
|
|
||||||
|
.error-desc { |
||||||
|
font-size: 30px; |
||||||
|
color: #777; |
||||||
|
} |
||||||
|
|
||||||
|
.error-handle { |
||||||
|
margin-top: 30px; |
||||||
|
padding-bottom: 200px; |
||||||
|
} |
||||||
|
|
||||||
|
.error-btn { |
||||||
|
margin-left: 100px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
<template> |
||||||
|
<section class="main"> |
||||||
|
<div class="crumbs"> |
||||||
|
<el-breadcrumb separator="/"> |
||||||
|
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{ $t("i18n.breadcrumb") }}</el-breadcrumb-item> |
||||||
|
</el-breadcrumb> |
||||||
|
</div> |
||||||
|
<div class="container"> |
||||||
|
<span>{{ $t("i18n.tips") }}</span> |
||||||
|
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{ $t("i18n.btn") }} |
||||||
|
</el-button> |
||||||
|
<div class="list"> |
||||||
|
<h2>{{ $t("i18n.title1") }}</h2> |
||||||
|
<p>{{ $t("i18n.p1") }}</p> |
||||||
|
<p>{{ $t("i18n.p2") }}</p> |
||||||
|
<p>{{ $t("i18n.p3") }}</p> |
||||||
|
</div> |
||||||
|
<h2>{{ $t("i18n.title2") }}</h2> |
||||||
|
<div> |
||||||
|
<i18n path="i18n.info" tag="p"> |
||||||
|
<a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{ $t("i18n.value") |
||||||
|
}}</a> |
||||||
|
</i18n> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return {}; |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.list { |
||||||
|
padding: 30px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.list p { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: #cb221c; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,232 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="crumbs"> |
||||||
|
<el-breadcrumb separator="/"> |
||||||
|
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item> |
||||||
|
</el-breadcrumb> |
||||||
|
</div> |
||||||
|
<div class="container"> |
||||||
|
<h2>使用方法</h2> |
||||||
|
<p style="line-height: 50px;"> |
||||||
|
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{ iconList.length }}个图标） |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i> |
||||||
|
<span><i class="el-icon-lx-redpacket_fill"></i></span> |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i> |
||||||
|
<span><i class="el-icon-lx-weibo"></i></span> |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i> |
||||||
|
<span><i class="el-icon-lx-emojifill"></i></span> |
||||||
|
</p> |
||||||
|
<br> |
||||||
|
<h2>图标</h2> |
||||||
|
<div class="search-box"> |
||||||
|
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input> |
||||||
|
</div> |
||||||
|
<ul> |
||||||
|
<li class="icon-li" v-for="(item,index) in list" :key="index"> |
||||||
|
<div class="icon-li-content"> |
||||||
|
<i :class="`el-icon-lx-${item}`"></i> |
||||||
|
<span>{{ item }}</span> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data: function() { |
||||||
|
return { |
||||||
|
keyword: "", |
||||||
|
iconList: [ |
||||||
|
"attentionforbid", |
||||||
|
"attentionforbidfill", |
||||||
|
"attention", |
||||||
|
"attentionfill", |
||||||
|
"tag", |
||||||
|
"tagfill", |
||||||
|
"people", |
||||||
|
"peoplefill", |
||||||
|
"notice", |
||||||
|
"noticefill", |
||||||
|
"mobile", |
||||||
|
"mobilefill", |
||||||
|
"voice", |
||||||
|
"voicefill", |
||||||
|
"unlock", |
||||||
|
"lock", |
||||||
|
"home", |
||||||
|
"homefill", |
||||||
|
"delete", |
||||||
|
"deletefill", |
||||||
|
"notification", |
||||||
|
"notificationfill", |
||||||
|
"notificationforbidfill", |
||||||
|
"like", |
||||||
|
"likefill", |
||||||
|
"comment", |
||||||
|
"commentfill", |
||||||
|
"camera", |
||||||
|
"camerafill", |
||||||
|
"warn", |
||||||
|
"warnfill", |
||||||
|
"time", |
||||||
|
"timefill", |
||||||
|
"location", |
||||||
|
"locationfill", |
||||||
|
"favor", |
||||||
|
"favorfill", |
||||||
|
"skin", |
||||||
|
"skinfill", |
||||||
|
"news", |
||||||
|
"newsfill", |
||||||
|
"record", |
||||||
|
"recordfill", |
||||||
|
"emoji", |
||||||
|
"emojifill", |
||||||
|
"message", |
||||||
|
"messagefill", |
||||||
|
"goods", |
||||||
|
"goodsfill", |
||||||
|
"crown", |
||||||
|
"crownfill", |
||||||
|
"move", |
||||||
|
"add", |
||||||
|
"hot", |
||||||
|
"hotfill", |
||||||
|
"service", |
||||||
|
"servicefill", |
||||||
|
"present", |
||||||
|
"presentfill", |
||||||
|
"pic", |
||||||
|
"picfill", |
||||||
|
"rank", |
||||||
|
"rankfill", |
||||||
|
"male", |
||||||
|
"female", |
||||||
|
"down", |
||||||
|
"top", |
||||||
|
"recharge", |
||||||
|
"rechargefill", |
||||||
|
"forward", |
||||||
|
"forwardfill", |
||||||
|
"info", |
||||||
|
"infofill", |
||||||
|
"redpacket", |
||||||
|
"redpacket_fill", |
||||||
|
"roundadd", |
||||||
|
"roundaddfill", |
||||||
|
"friendadd", |
||||||
|
"friendaddfill", |
||||||
|
"cart", |
||||||
|
"cartfill", |
||||||
|
"more", |
||||||
|
"moreandroid", |
||||||
|
"back", |
||||||
|
"right", |
||||||
|
"shop", |
||||||
|
"shopfill", |
||||||
|
"question", |
||||||
|
"questionfill", |
||||||
|
"roundclose", |
||||||
|
"roundclosefill", |
||||||
|
"roundcheck", |
||||||
|
"roundcheckfill", |
||||||
|
"global", |
||||||
|
"mail", |
||||||
|
"punch", |
||||||
|
"exit", |
||||||
|
"upload", |
||||||
|
"read", |
||||||
|
"file", |
||||||
|
"link", |
||||||
|
"full", |
||||||
|
"group", |
||||||
|
"friend", |
||||||
|
"profile", |
||||||
|
"addressbook", |
||||||
|
"calendar", |
||||||
|
"text", |
||||||
|
"copy", |
||||||
|
"share", |
||||||
|
"wifi", |
||||||
|
"vipcard", |
||||||
|
"weibo", |
||||||
|
"remind", |
||||||
|
"refresh", |
||||||
|
"filter", |
||||||
|
"settings", |
||||||
|
"scan", |
||||||
|
"qrcode", |
||||||
|
"cascades", |
||||||
|
"apps", |
||||||
|
"sort", |
||||||
|
"searchlist", |
||||||
|
"search", |
||||||
|
"edit" |
||||||
|
] |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
list() { |
||||||
|
return this.iconList.filter((item) => { |
||||||
|
return item.indexOf(this.keyword) !== -1; |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.example-p { |
||||||
|
height: 45px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.search-box { |
||||||
|
text-align: center; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.search { |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
|
||||||
|
ul, li { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-li { |
||||||
|
display: inline-block; |
||||||
|
padding: 10px; |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-li-content { |
||||||
|
display: flex; |
||||||
|
height: 100%; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-li-content i { |
||||||
|
font-size: 36px; |
||||||
|
color: #606266; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-li-content span { |
||||||
|
margin-top: 10px; |
||||||
|
color: #787878; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from '@/setting' |
||||||
|
import util from '@/libs/util' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from '@/setting' |
||||||
|
import util from '@/libs/util' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() {}, |
||||||
|
methods: {} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
/** |
||||||
|
* @description 鉴权指令 |
||||||
|
* 当传入的权限当前用户没有时，会移除该组件 |
||||||
|
* 用例：<Tag v-auth>text</Tag> 或者：<Tag v-auth="'user:编辑'">text</Tag> |
||||||
|
* */ |
||||||
|
import store from "@/store"; |
||||||
|
|
||||||
|
export default { |
||||||
|
inserted(el, binding, vnode) { |
||||||
|
let btnText = ""; |
||||||
|
if (binding.value) { |
||||||
|
btnText = binding.value; |
||||||
|
} else { |
||||||
|
btnText = `${vnode.context.$route.path}:${el.innerText}`; |
||||||
|
} |
||||||
|
const btnPermissions = store.state.auth.btns; |
||||||
|
|
||||||
|
if (btnText && btnPermissions && btnPermissions.length) { |
||||||
|
const isPermission = btnPermissions.includes(btnText); |
||||||
|
if (!isPermission) { |
||||||
|
el.parentNode && el.parentNode.removeChild(el); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
/** |
||||||
|
* @description 返回缺省值 |
||||||
|
* 传入的如果是null，就返回'--' |
||||||
|
* 用例：<Tag :default="val">text</Tag> 或者：<Tag>{{val | default}}</Tag> |
||||||
|
* */ |
||||||
|
const defaultShow = (val) => { |
||||||
|
return val == null ? "--" : val; |
||||||
|
}; |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
defaultShow |
||||||
|
}; |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
/** |
||||||
|
* 插件 |
||||||
|
* */ |
||||||
|
|
||||||
|
import directiveAuth from "@/plugins/auth"; |
||||||
|
import throttle from "@/plugins/throttle"; |
||||||
|
|
||||||
|
export default { |
||||||
|
async install(Vue, options) { |
||||||
|
// 指令
|
||||||
|
Vue.directive("auth", directiveAuth); |
||||||
|
Vue.directive("throttle", throttle); |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,144 @@ |
|||||||
|
import axios from "axios"; |
||||||
|
import util from "@/libs/util"; |
||||||
|
import router from "@/router"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
import { Message } from "element-ui"; |
||||||
|
|
||||||
|
const service = axios.create({ |
||||||
|
baseURL: Setting.apiBaseURL, |
||||||
|
timeout: 10000000 |
||||||
|
}); |
||||||
|
|
||||||
|
// post请求头
|
||||||
|
service.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8"; |
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
service.interceptors.request.use(config => { |
||||||
|
util.getToken(); |
||||||
|
let token = util.local.get(Setting.tokenKey); |
||||||
|
if (token) config.headers.token = token; |
||||||
|
return config; |
||||||
|
}, err => { |
||||||
|
util.errorMsg({ |
||||||
|
message: "退出登陆", |
||||||
|
onClose: function() { |
||||||
|
router.push({ name: "/login" }); |
||||||
|
} |
||||||
|
}); |
||||||
|
return Promise.reject(err); |
||||||
|
}); |
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
service.interceptors.response.use( |
||||||
|
response => { |
||||||
|
const res = response.data; |
||||||
|
if (res.status == 200 || res.status == 10000 || res.status == 30001) { |
||||||
|
return Promise.resolve(res).catch(e => {}); |
||||||
|
} else if (!res.status) { |
||||||
|
return Promise.resolve(res).catch(e => {}); |
||||||
|
} else if (res.status === 10008) { |
||||||
|
Message.error({ |
||||||
|
message: res.message, |
||||||
|
showClose: true, |
||||||
|
duration: 1500 |
||||||
|
}) |
||||||
|
return Promise.reject(res) |
||||||
|
} else { |
||||||
|
util.errorMsg(res.message); |
||||||
|
return Promise.reject(res) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 服务器状态码不是200的情况
|
||||||
|
error => { |
||||||
|
if (error.response.status) { |
||||||
|
switch (error.response.status) { |
||||||
|
// 401: 未登录
|
||||||
|
// 未登录则跳转登录页面，并携带当前页面的路径
|
||||||
|
// 在登录成功后返回当前页面，这一步需要在登录页操作。
|
||||||
|
case 401: |
||||||
|
util.local.remove(Setting.storeKey); |
||||||
|
util.local.remove(Setting.tokenKey); |
||||||
|
util.errorMsg("登录过期，请重新登录"); |
||||||
|
setTimeout(() => { |
||||||
|
router.replace({ |
||||||
|
path: "/login" |
||||||
|
}); |
||||||
|
}, 1000); |
||||||
|
break; |
||||||
|
case 500: |
||||||
|
util.errorMsg("网络错误"); |
||||||
|
break; |
||||||
|
// 403 token过期
|
||||||
|
// 登录过期对用户进行提示
|
||||||
|
// 清除本地token和清空vuex中token对象
|
||||||
|
// 跳转登录页面
|
||||||
|
case 403: |
||||||
|
util.local.remove(Setting.storeKey); |
||||||
|
util.local.remove(Setting.tokenKey); |
||||||
|
util.errorMsg("登录过期，请重新登录"); |
||||||
|
// 清除token
|
||||||
|
// store.commit('loginSuccess', null);
|
||||||
|
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
|
||||||
|
setTimeout(() => { |
||||||
|
router.replace({ |
||||||
|
path: "/login" |
||||||
|
}); |
||||||
|
}, 1000); |
||||||
|
break; |
||||||
|
// 404请求不存在
|
||||||
|
case 404: |
||||||
|
util.errorMsg("网络请求不存在!"); |
||||||
|
break; |
||||||
|
// 其他错误，直接抛出错误提示
|
||||||
|
default: |
||||||
|
util.errorMsg(error.response.data.message); |
||||||
|
Promise.reject(res); |
||||||
|
} |
||||||
|
return Promise.reject(error.response); |
||||||
|
} |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
function get(url, params) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
service.get(url, { params: params }).then(res => { |
||||||
|
resolve(res); |
||||||
|
}).catch(err => { |
||||||
|
reject(err); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function post(url, params) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
service.post(url, params).then(res => { |
||||||
|
resolve(res); |
||||||
|
}).catch(err => { |
||||||
|
reject(err.data); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function del(url, params) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
service.delete(url, { |
||||||
|
params |
||||||
|
}).then(res => { |
||||||
|
resolve(res); |
||||||
|
}).catch(err => { |
||||||
|
reject(err.data); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function put(url, params) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
service.put(url, params).then(res => { |
||||||
|
resolve(res); |
||||||
|
}).catch(err => { |
||||||
|
reject(err.data); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
export { get, post, del, put }; |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
/** |
||||||
|
* @description 节流指令 |
||||||
|
* 限制连续快速点击按钮 |
||||||
|
* 用例：<Tag v-throttle>text</Tag> |
||||||
|
* */ |
||||||
|
|
||||||
|
export default { |
||||||
|
inserted(el, binding, vnode) { |
||||||
|
el.addEventListener("click", () => { |
||||||
|
if (!el.disabled) { |
||||||
|
el.disabled = true; |
||||||
|
setTimeout(() => { |
||||||
|
el.disabled = false; |
||||||
|
}, binding.value || 1000); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import Vue from "vue"; |
||||||
|
import Router from "vue-router"; |
||||||
|
import routes from "./routes"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
|
||||||
|
Vue.use(Router); |
||||||
|
|
||||||
|
const createRouter = () => new Router({ |
||||||
|
mode: Setting.routerMode, |
||||||
|
base: process.env.BASE_URL, |
||||||
|
scrollBehavior: () => ({ y: 0 }), |
||||||
|
routes |
||||||
|
}); |
||||||
|
|
||||||
|
export function resetRouter() { |
||||||
|
const newRouter = createRouter(); |
||||||
|
router.matcher = newRouter.matcher; |
||||||
|
} |
||||||
|
|
||||||
|
let router = createRouter(); |
||||||
|
|
||||||
|
export default router; |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import BasicLayout from '@/layouts/home'; |
||||||
|
|
||||||
|
export default { |
||||||
|
path: '/index', |
||||||
|
component: BasicLayout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
name: `index`, |
||||||
|
path: `/index`, |
||||||
|
component: () => import('@/pages/index/list'), |
||||||
|
meta: { title: '首页' } |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
import BasicLayout from '@/layouts/home' |
||||||
|
const name = 'intro' |
||||||
|
export default { |
||||||
|
path: `/${name}`, |
||||||
|
component: BasicLayout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
name, |
||||||
|
path: `/${name}`, |
||||||
|
component: () => import(`@/pages/${name}`), |
||||||
|
meta: { title: 'S³FEL概况' } |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import router from "./index"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => { |
||||||
|
document.title = Setting.titleSuffix |
||||||
|
next() |
||||||
|
}) |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
/** |
||||||
|
* 读取./modules下的所有js文件并注册模块 |
||||||
|
*/ |
||||||
|
const requireModule = require.context('./modules', false, /\.js$/) |
||||||
|
const modules = [] |
||||||
|
requireModule.keys().forEach(fileName => { |
||||||
|
modules.push(requireModule(fileName).default) |
||||||
|
}) |
||||||
|
|
||||||
|
const frameIn = [ |
||||||
|
{ |
||||||
|
path: "/", |
||||||
|
redirect: "/index" |
||||||
|
}, |
||||||
|
...modules |
||||||
|
]; |
||||||
|
|
||||||
|
/** |
||||||
|
* 在主框架之外显示 |
||||||
|
*/ |
||||||
|
|
||||||
|
const frameOut = []; |
||||||
|
|
||||||
|
/** |
||||||
|
* 错误页面 |
||||||
|
*/ |
||||||
|
|
||||||
|
const errorPage = [ |
||||||
|
{ |
||||||
|
path: "/403", |
||||||
|
name: "403", |
||||||
|
meta: { |
||||||
|
title: "403" |
||||||
|
}, |
||||||
|
component: () => import("@/pages/exception/error/403") |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: "*", |
||||||
|
name: "404", |
||||||
|
meta: { |
||||||
|
title: "404" |
||||||
|
}, |
||||||
|
component: () => import("@/pages/exception/error/404") |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
|
// 导出需要显示菜单的
|
||||||
|
export const frameInRoutes = frameIn; |
||||||
|
|
||||||
|
// 重新组织后导出
|
||||||
|
export default [ |
||||||
|
...frameIn, |
||||||
|
...frameOut, |
||||||
|
...errorPage |
||||||
|
]; |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
/** |
||||||
|
* 开发配置 |
||||||
|
* */ |
||||||
|
|
||||||
|
const env = process.env.NODE_ENV; |
||||||
|
|
||||||
|
const Setting = { |
||||||
|
// 是否使用 Mock 的数据，默认 开发环境为 true，生产环境为 false
|
||||||
|
isMock: true, |
||||||
|
// 部署应用包时的基本 URL
|
||||||
|
publicPath: env === "development" ? "./" : "", |
||||||
|
// 生产环境构建文件的目录名
|
||||||
|
outputDir: "dist", |
||||||
|
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
|
||||||
|
assetsDir: "static", |
||||||
|
// 开发环境每次保存时 lint 代码，会将 lint 错误输出为编译警告
|
||||||
|
// true || false || error
|
||||||
|
lintOnSave: true |
||||||
|
}; |
||||||
|
|
||||||
|
module.exports = Setting; |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
/** |
||||||
|
* 业务配置 |
||||||
|
* */ |
||||||
|
const url = location.host; |
||||||
|
const isDev = process.env.NODE_ENV === "development"; // 开发环境
|
||||||
|
const isPro = url.includes("occupationlab.com"); //是否职站生产
|
||||||
|
const isTest = url.includes('121.37.12.51'); //是否中台测试服
|
||||||
|
|
||||||
|
let systemPath = `${location.origin}/banksystem` |
||||||
|
let host = `${location.origin}/` |
||||||
|
let uploadURL = `http://121.37.12.51/` |
||||||
|
if (isPro) { |
||||||
|
// 职站生产
|
||||||
|
uploadURL = `https://www.huorantech.cn/` |
||||||
|
systemPath = `https://www.huorantech.cn/banksystem` |
||||||
|
} else if (isDev) { |
||||||
|
// 本地
|
||||||
|
systemPath = `http://${location.hostname}:8093` |
||||||
|
host = "http://121.37.12.51/"; // 中台测试服
|
||||||
|
// host = "http://192.168.31.151:9000/"; // 榕
|
||||||
|
// host = "http://192.168.31.137:9000/"; // 赓
|
||||||
|
} |
||||||
|
|
||||||
|
const Setting = { |
||||||
|
/** |
||||||
|
* 基础配置 |
||||||
|
* */ |
||||||
|
platformId: 1, // 平台标识，1职站，2数据平台，3中台
|
||||||
|
titleSuffix: '粒子研究院', // 网页标题的后缀
|
||||||
|
routerMode: "hash", // 路由模式，可选值为 history 或 hash
|
||||||
|
showProgressBar: true, // 页面切换时，是否显示模拟的进度条
|
||||||
|
apiBaseURL: host, // 接口请求地址
|
||||||
|
uploadURL, // 阿里云oss域名
|
||||||
|
systemPath, // 子系统地址前缀
|
||||||
|
autoLogoutTime: 3600000, // 长时间未操作，自动退出登录时间
|
||||||
|
modalDuration: 3, // 接口请求返回错误时，弹窗的持续时间，单位：秒
|
||||||
|
errorModalType: "Message", // 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice
|
||||||
|
cookiesExpires: 1, // Cookies 默认保存时间，单位：天
|
||||||
|
tokenExpires: 1296000000, // token在localStorage的时间(毫秒)
|
||||||
|
tokenKey: "official_token", // localStorage里保存的token的key
|
||||||
|
storeKey: "official_store", // localStorage里保存的vuex的key
|
||||||
|
initialPassword: "111aaa", // 默认密码
|
||||||
|
isDev, |
||||||
|
isTest, |
||||||
|
isPro, |
||||||
|
/** |
||||||
|
* 路由白名单 |
||||||
|
* */ |
||||||
|
whiteList: ['/login', '/index/list', '/cityPartner/list', '/devPlatform/list'], |
||||||
|
/** |
||||||
|
* 平台列表 |
||||||
|
* */ |
||||||
|
platformList: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '职站' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
name: '数据平台' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '中台' |
||||||
|
} |
||||||
|
], |
||||||
|
/** |
||||||
|
* 多语言配置 |
||||||
|
* */ |
||||||
|
i18n: { |
||||||
|
default: "zh", // 默认语言
|
||||||
|
auto: false // 是否根据用户电脑配置自动设置语言（仅第一次有效）
|
||||||
|
}, |
||||||
|
layout: {}, // 布局配置
|
||||||
|
/** |
||||||
|
* 功能配置 |
||||||
|
* */ |
||||||
|
sameRouteForceUpdate: false, // 相同路由，不同参数间进行切换，是否强力更新
|
||||||
|
dynamicRoute: false // 是否使用动态路由
|
||||||
|
}; |
||||||
|
|
||||||
|
export default Setting; |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
const getters = {}; |
||||||
|
export default getters; |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import Vue from "vue"; |
||||||
|
import Vuex from "vuex"; |
||||||
|
import getters from "./getters"; |
||||||
|
|
||||||
|
Vue.use(Vuex); |
||||||
|
|
||||||
|
// https://webpack.js.org/guides/dependency-management/#requirecontext
|
||||||
|
const modulesFiles = require.context("./modules", true, /\.js$/); |
||||||
|
|
||||||
|
// you do not need `import app from './modules/app'`
|
||||||
|
// it will auto require all vuex module from modules file
|
||||||
|
const modules = modulesFiles.keys().reduce((modules, modulePath) => { |
||||||
|
// set './app.js' => 'app'
|
||||||
|
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1"); |
||||||
|
const value = modulesFiles(modulePath); |
||||||
|
modules[moduleName] = value.default; |
||||||
|
return modules; |
||||||
|
}, {}); |
||||||
|
|
||||||
|
const store = new Vuex.Store({ |
||||||
|
modules, |
||||||
|
getters |
||||||
|
}); |
||||||
|
|
||||||
|
export default store; |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
/** |
||||||
|
* 布局管理 |
||||||
|
* */ |
||||||
|
|
||||||
|
// 是否IE
|
||||||
|
function isIE() { |
||||||
|
if (!!window.ActiveXObject || "ActiveXObject" in window) return true; |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state: { |
||||||
|
isIE: isIE() |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
SET_IE: (state, val) => { |
||||||
|
state.isIE = val; |
||||||
|
} |
||||||
|
}, |
||||||
|
actions: {} |
||||||
|
}; |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
import Setting from "@/setting"; |
||||||
|
import util from "@/libs/util"; |
||||||
|
import { post, get, del, put } from "@/plugins/requests/index.js"; |
||||||
|
import api from "@/api"; |
||||||
|
/** |
||||||
|
* 用户信息 |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state: { |
||||||
|
activeTab: "/station/list", // 当前激活菜单
|
||||||
|
title: '', |
||||||
|
logoUrl: '', |
||||||
|
avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", |
||||||
|
userId: '', |
||||||
|
studentId: '', |
||||||
|
userName: '', |
||||||
|
customerName: '', |
||||||
|
schoolId: '', |
||||||
|
roleId: '', |
||||||
|
dataTime: '', |
||||||
|
logView: false // 是否查询过日志状态，如果有，则不再调接口
|
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
SET_INFO: (state, info) => { |
||||||
|
if (info.avatar) state.avatar = info.avatar; |
||||||
|
state.userId = info.userId; |
||||||
|
state.studentId = info.studentId; |
||||||
|
state.schoolId = info.schoolId; |
||||||
|
state.userName = info.userName; |
||||||
|
state.roleId = info.roleId; |
||||||
|
state.dataTime = info.dataTime; |
||||||
|
}, |
||||||
|
SET_TITLE: (state, title) => { |
||||||
|
state.title = title; |
||||||
|
}, |
||||||
|
SET_LOGO_URL: (state, logoUrl) => { |
||||||
|
state.logoUrl = logoUrl; |
||||||
|
}, |
||||||
|
SET_AVATAR: (state, avatar) => { |
||||||
|
state.avatar = avatar; |
||||||
|
}, |
||||||
|
SET_USERNAME: (state, userName) => { |
||||||
|
state.userName = userName; |
||||||
|
}, |
||||||
|
SET_CUSTOMERNAME: (state, customerName) => { |
||||||
|
state.customerName = customerName; |
||||||
|
}, |
||||||
|
SET_ACTIVE_TAB: (state, activeTab) => { |
||||||
|
state.activeTab = activeTab; |
||||||
|
}, |
||||||
|
SET_LOG: (state) => { |
||||||
|
state.logView = true |
||||||
|
}, |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
login({ state, commit }, userInfo) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
post(api.logins, userInfo).then(res => { |
||||||
|
if (res.status == 200) { |
||||||
|
let { data } = res; |
||||||
|
// 生成路由权限
|
||||||
|
// 每个系统都是用这套角色权限代码的,后端也是基本一样,除了个别字段可能会不一样
|
||||||
|
// 总体来说就两个步骤: 1是生成能够访问的路由的数组集合,2是生成能看到的按钮的数组集合
|
||||||
|
//res.message.listValue && Setting.dynamicRoute && addRoutes(res.message.listValue)
|
||||||
|
util.local.set(Setting.tokenKey, data.token, Setting.tokenExpires); |
||||||
|
util.successMsg("登录成功"); |
||||||
|
// console.log(data, "登录保存的数据");
|
||||||
|
commit("SET_INFO", data); |
||||||
|
resolve(); |
||||||
|
} else { |
||||||
|
util.errorMsg(res.message); |
||||||
|
reject(res); |
||||||
|
} |
||||||
|
}).catch(error => { |
||||||
|
reject(error); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
logout({ commit, state, dispatch }) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
util.local.remove(Setting.storeKey); |
||||||
|
util.local.remove(Setting.tokenKey); |
||||||
|
location.reload(); |
||||||
|
resolve(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
setInfo({ state, commit }, info) { |
||||||
|
commit("SET_INFO", info); |
||||||
|
}, |
||||||
|
setTitle({ state, commit }, title) { |
||||||
|
commit("SET_TITLE", title); |
||||||
|
}, |
||||||
|
setLogoUrl({ state, commit }, logoUrl) { |
||||||
|
commit("SET_LOGO_URL", logoUrl); |
||||||
|
}, |
||||||
|
setAvatar({ state, commit }, avatar) { |
||||||
|
commit("SET_AVATAR", avatar); |
||||||
|
}, |
||||||
|
setUserName({ state, commit }, userName) { |
||||||
|
commit("SET_USERNAME", userName); |
||||||
|
}, |
||||||
|
setActiveTab({ state, commit }, activeTab) { |
||||||
|
commit("SET_ACTIVE_TAB", activeTab); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,391 @@ |
|||||||
|
@import "./default/index.scss"; |
||||||
|
@import "./var.scss"; |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: youshe; |
||||||
|
src: url('font/YouSheBiaoTiHei.ttf'); |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: din; |
||||||
|
src: url('font/din.otf'); |
||||||
|
} |
||||||
|
|
||||||
|
[v-cloak] { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.flex-between { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
.l-title { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb { |
||||||
|
width: 5px; |
||||||
|
border-radius: 6px; |
||||||
|
background: #d7d7d7; |
||||||
|
} |
||||||
|
.main { |
||||||
|
.view { |
||||||
|
min-width: $min-width; |
||||||
|
min-height: calc(100vh - 90px); |
||||||
|
padding: 12px 200px 20px; |
||||||
|
margin: 0 auto; |
||||||
|
background-color: #F3F6FA; |
||||||
|
&.no-pd { |
||||||
|
padding-top: 0; |
||||||
|
} |
||||||
|
&.pb { |
||||||
|
padding-bottom: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
.wrap-inner { |
||||||
|
min-width: $min-width; |
||||||
|
width: 100%; |
||||||
|
padding: 0 200px 20px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
.center-wrap { |
||||||
|
width: 1000px; |
||||||
|
padding-bottom: 20px; |
||||||
|
margin: 40px auto 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.l-title{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 12px; |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
img{ |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
.p-title { |
||||||
|
padding-left: 5px; |
||||||
|
margin-bottom: 24px; |
||||||
|
line-height: 1; |
||||||
|
font-size: 14px; |
||||||
|
color: #585858; |
||||||
|
border-left: 3px solid $--color-primary; |
||||||
|
} |
||||||
|
|
||||||
|
.el-input { |
||||||
|
.el-input__inner { |
||||||
|
border-color: rgba(0, 0, 0, 0.15); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.filter { |
||||||
|
width: 100vw; |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
li { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
margin-right: 30px; |
||||||
|
|
||||||
|
label { |
||||||
|
margin-right: 6px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 14px; |
||||||
|
color: rgba(0, 0, 0, .65); |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.el-radio { |
||||||
|
margin-right: 10px !important; |
||||||
|
|
||||||
|
.el-radio__input { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.page { |
||||||
|
position: relative; |
||||||
|
padding: 24px 16px; |
||||||
|
background-color: #fff; |
||||||
|
|
||||||
|
.tool { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 24px; |
||||||
|
|
||||||
|
.single-choice { |
||||||
|
dl { |
||||||
|
display: flex; |
||||||
|
line-height: 30px; |
||||||
|
|
||||||
|
dt { |
||||||
|
color: rgba(0, 0, 0, .65); |
||||||
|
font-size: 14px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
dd { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
span { |
||||||
|
padding: 0 10px; |
||||||
|
margin: 0 10px; |
||||||
|
color: #333; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1.8; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: $--color-primary; |
||||||
|
} |
||||||
|
|
||||||
|
&.active { |
||||||
|
border-radius: 4px; |
||||||
|
color: #fff; |
||||||
|
background-color: $--color-primary; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin-top: 20px; |
||||||
|
text-align: center; |
||||||
|
button,.number,.more,.el-input__inner{ |
||||||
|
min-width: 32px !important; |
||||||
|
height: 32px !important; |
||||||
|
line-height: 32px; |
||||||
|
color: #333 !important; |
||||||
|
background-color: transparent !important; |
||||||
|
border: 1px solid #ccc !important; |
||||||
|
border-radius: 2px !important; |
||||||
|
} |
||||||
|
button i{ |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.active{ |
||||||
|
color: #fff !important; |
||||||
|
background-color: $--color-primary !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-table{ |
||||||
|
border-radius: 4px; |
||||||
|
th{ |
||||||
|
background: #E8F0FF !important; |
||||||
|
.cell{ |
||||||
|
color: #222326; |
||||||
|
font-size: 12px; |
||||||
|
font-weight: normal; |
||||||
|
.el-checkbox{ |
||||||
|
&:before{ |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
th, td{ |
||||||
|
padding: 10px 0; |
||||||
|
border-bottom-color: #E1E6F2; |
||||||
|
} |
||||||
|
&.el-table--striped .el-table__body tr.el-table__row--striped td{ |
||||||
|
background-color: #FAFBFF; |
||||||
|
} |
||||||
|
.el-checkbox__inner{ |
||||||
|
border-radius: 4px; |
||||||
|
transition: none !important; |
||||||
|
} |
||||||
|
.el-checkbox__input.is-indeterminate .el-checkbox__inner{ |
||||||
|
background-color: #FFFFFF; |
||||||
|
border-color: #DCDFE6; |
||||||
|
} |
||||||
|
.el-switch__core{ |
||||||
|
background-color: #bfbfbf; |
||||||
|
} |
||||||
|
.el-switch__label--right{ |
||||||
|
z-index: 2; |
||||||
|
position: absolute; |
||||||
|
right: 8px; |
||||||
|
margin-left: 0; |
||||||
|
color: #fff !important; |
||||||
|
} |
||||||
|
.el-switch__label--right.is-active{ |
||||||
|
left: 8px; |
||||||
|
right: auto; |
||||||
|
} |
||||||
|
.el-switch__label--right span{ |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.el-button--text{ |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-message { |
||||||
|
padding: 11px 20px; |
||||||
|
|
||||||
|
.el-message__icon { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-message__content { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
} |
||||||
|
|
||||||
|
.el-icon-close { |
||||||
|
font-size: 14px; |
||||||
|
color: #92998d; |
||||||
|
} |
||||||
|
|
||||||
|
.el-message--success { |
||||||
|
border: 1px solid #B7EB8F; |
||||||
|
background: #F6FFED; |
||||||
|
|
||||||
|
.el-message__icon { |
||||||
|
color: #00c700; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-message--warning { |
||||||
|
border: 1px solid #FFE58F; |
||||||
|
background: #FFFBE6; |
||||||
|
|
||||||
|
.el-message__icon { |
||||||
|
color: #ffa900; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-message-box { |
||||||
|
padding-bottom: 24px; |
||||||
|
|
||||||
|
.el-message-box__header { |
||||||
|
padding: 32px 32px 12px 50px; |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-message-box__status { |
||||||
|
top: -30px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-message-box__status + .el-message-box__message { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
} |
||||||
|
|
||||||
|
.el-message-box__btns { |
||||||
|
padding-right: 32px; |
||||||
|
|
||||||
|
&.el-icon-warning { |
||||||
|
color: #ffa900; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:not(.normal) { |
||||||
|
.el-button--primary { |
||||||
|
color: #606266; |
||||||
|
background: #fff; |
||||||
|
border-color: #DCDFE6; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: $--color-primary; |
||||||
|
border-color: #efbdbb; |
||||||
|
background-color: #fae9e8; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-dialog__wrapper { |
||||||
|
.el-dialog { |
||||||
|
border-radius: 4px; |
||||||
|
|
||||||
|
.el-dialog__header { |
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
||||||
|
|
||||||
|
.el-dialog__title { |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-dialog__footer { |
||||||
|
padding: 10px 16px; |
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.06); |
||||||
|
|
||||||
|
.el-button { |
||||||
|
font-size: 14px; |
||||||
|
border-radius: 4px; |
||||||
|
border-color: rgba(0, 0, 0, 0.15); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-tooltip__popper { |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
.el-tooltip__popper.is-dark { |
||||||
|
padding: 18px 20px; |
||||||
|
color: #606266; |
||||||
|
line-height: 1.8; |
||||||
|
background-color: #fff; |
||||||
|
border: .0625rem solid #ebeef5; |
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
.el-tooltip__popper[x-placement^="top"] { |
||||||
|
.popper__arrow { |
||||||
|
border-top-color: #fff; |
||||||
|
&:after { |
||||||
|
border-top-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media(max-width: 1600px) { |
||||||
|
.el-table { |
||||||
|
.el-switch__label--right.is-active { |
||||||
|
left: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.empty{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
padding: 50px 0; |
||||||
|
text-align: center; |
||||||
|
img{ |
||||||
|
width: 471px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
margin-top: 40px; |
||||||
|
font-size: 18px; |
||||||
|
color: rgba(0, 0, 0, 0.25); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
/* 改变主题色变量 */ |
||||||
|
|
||||||
|
$--color-primary: #1583FF; |
||||||
|
|
||||||
|
/* 改变 icon 字体路径变量，必需 */ |
||||||
|
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
||||||
|
@import "~element-ui/packages/theme-chalk/src/index"; |
||||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,539 @@ |
|||||||
|
/* Logo 字体 */ |
||||||
|
@font-face { |
||||||
|
font-family: "iconfont logo"; |
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||||
|
} |
||||||
|
|
||||||
|
.logo { |
||||||
|
font-family: "iconfont logo"; |
||||||
|
font-size: 160px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
/* tabs */ |
||||||
|
.nav-tabs { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-tabs .nav-more { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
height: 42px; |
||||||
|
line-height: 42px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
#tabs { |
||||||
|
border-bottom: 1px solid #eee; |
||||||
|
} |
||||||
|
|
||||||
|
#tabs li { |
||||||
|
cursor: pointer; |
||||||
|
width: 100px; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
text-align: center; |
||||||
|
font-size: 16px; |
||||||
|
border-bottom: 2px solid transparent; |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
margin-bottom: -1px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#tabs .active { |
||||||
|
border-bottom-color: #f00; |
||||||
|
color: #222; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-container .content { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* 页面布局 */ |
||||||
|
.main { |
||||||
|
padding: 30px 100px; |
||||||
|
width: 960px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.main .logo { |
||||||
|
color: #333; |
||||||
|
text-align: left; |
||||||
|
margin-bottom: 30px; |
||||||
|
line-height: 1; |
||||||
|
height: 110px; |
||||||
|
margin-top: -50px; |
||||||
|
overflow: hidden; |
||||||
|
*zoom: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.main .logo a { |
||||||
|
font-size: 160px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.helps { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.helps pre { |
||||||
|
padding: 20px; |
||||||
|
margin: 10px 0; |
||||||
|
border: solid 1px #e7e1cd; |
||||||
|
background-color: #fffdef; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists { |
||||||
|
width: 100% !important; |
||||||
|
overflow: hidden; |
||||||
|
*zoom: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li { |
||||||
|
width: 100px; |
||||||
|
margin-bottom: 10px; |
||||||
|
margin-right: 20px; |
||||||
|
text-align: center; |
||||||
|
list-style: none !important; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li .code-name { |
||||||
|
line-height: 1.2; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .icon { |
||||||
|
display: block; |
||||||
|
height: 100px; |
||||||
|
line-height: 100px; |
||||||
|
font-size: 42px; |
||||||
|
margin: 10px auto; |
||||||
|
color: #333; |
||||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .icon:hover { |
||||||
|
font-size: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .svg-icon { |
||||||
|
/* 通过设置 font-size 来改变图标大小 */ |
||||||
|
width: 1em; |
||||||
|
/* 图标和文字相邻时，垂直对齐 */ |
||||||
|
vertical-align: -0.15em; |
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||||
|
fill: currentColor; |
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||||
|
normalize.css 中也包含这行 */ |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li .name, |
||||||
|
.icon_lists li .code-name { |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
/* markdown 样式 */ |
||||||
|
.markdown { |
||||||
|
color: #666; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1.8; |
||||||
|
} |
||||||
|
|
||||||
|
.highlight { |
||||||
|
line-height: 1.5; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown img { |
||||||
|
vertical-align: middle; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1 { |
||||||
|
color: #404040; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 40px; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h2, |
||||||
|
.markdown h3, |
||||||
|
.markdown h4, |
||||||
|
.markdown h5, |
||||||
|
.markdown h6 { |
||||||
|
color: #404040; |
||||||
|
margin: 1.6em 0 0.6em 0; |
||||||
|
font-weight: 500; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1 { |
||||||
|
font-size: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h2 { |
||||||
|
font-size: 22px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h3 { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h4 { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h5 { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h6 { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown hr { |
||||||
|
height: 1px; |
||||||
|
border: 0; |
||||||
|
background: #e9e9e9; |
||||||
|
margin: 16px 0; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown p { |
||||||
|
margin: 1em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > p, |
||||||
|
.markdown > blockquote, |
||||||
|
.markdown > .highlight, |
||||||
|
.markdown > ol, |
||||||
|
.markdown > ul { |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown ul > li { |
||||||
|
list-style: circle; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > ul li, |
||||||
|
.markdown blockquote ul > li { |
||||||
|
margin-left: 20px; |
||||||
|
padding-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > ul li p, |
||||||
|
.markdown > ol li p { |
||||||
|
margin: 0.6em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown ol > li { |
||||||
|
list-style: decimal; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > ol li, |
||||||
|
.markdown blockquote ol > li { |
||||||
|
margin-left: 20px; |
||||||
|
padding-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown code { |
||||||
|
margin: 0 3px; |
||||||
|
padding: 0 5px; |
||||||
|
background: #eee; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown strong, |
||||||
|
.markdown b { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > table { |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0px; |
||||||
|
empty-cells: show; |
||||||
|
border: 1px solid #e9e9e9; |
||||||
|
width: 95%; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > table th { |
||||||
|
white-space: nowrap; |
||||||
|
color: #333; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > table th, |
||||||
|
.markdown > table td { |
||||||
|
border: 1px solid #e9e9e9; |
||||||
|
padding: 8px 16px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > table th { |
||||||
|
background: #F7F7F7; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown blockquote { |
||||||
|
font-size: 90%; |
||||||
|
color: #999; |
||||||
|
border-left: 4px solid #e9e9e9; |
||||||
|
padding-left: 0.8em; |
||||||
|
margin: 1em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown blockquote p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown .anchor { |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown .waiting { |
||||||
|
color: #ccc; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1:hover .anchor, |
||||||
|
.markdown h2:hover .anchor, |
||||||
|
.markdown h3:hover .anchor, |
||||||
|
.markdown h4:hover .anchor, |
||||||
|
.markdown h5:hover .anchor, |
||||||
|
.markdown h6:hover .anchor { |
||||||
|
opacity: 1; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown > br, |
||||||
|
.markdown > p > br { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.hljs { |
||||||
|
display: block; |
||||||
|
background: white; |
||||||
|
padding: 0.5em; |
||||||
|
color: #333333; |
||||||
|
overflow-x: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-comment, |
||||||
|
.hljs-meta { |
||||||
|
color: #969896; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-string, |
||||||
|
.hljs-variable, |
||||||
|
.hljs-template-variable, |
||||||
|
.hljs-strong, |
||||||
|
.hljs-emphasis, |
||||||
|
.hljs-quote { |
||||||
|
color: #df5000; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-keyword, |
||||||
|
.hljs-selector-tag, |
||||||
|
.hljs-type { |
||||||
|
color: #a71d5d; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-literal, |
||||||
|
.hljs-symbol, |
||||||
|
.hljs-bullet, |
||||||
|
.hljs-attribute { |
||||||
|
color: #0086b3; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-section, |
||||||
|
.hljs-name { |
||||||
|
color: #63a35c; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-tag { |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-title, |
||||||
|
.hljs-attr, |
||||||
|
.hljs-selector-id, |
||||||
|
.hljs-selector-class, |
||||||
|
.hljs-selector-attr, |
||||||
|
.hljs-selector-pseudo { |
||||||
|
color: #795da3; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-addition { |
||||||
|
color: #55a532; |
||||||
|
background-color: #eaffea; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-deletion { |
||||||
|
color: #bd2c00; |
||||||
|
background-color: #ffecec; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-link { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
/* 代码高亮 */ |
||||||
|
/* PrismJS 1.15.0 |
||||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||||
|
/** |
||||||
|
* prism.js default theme for JavaScript, CSS and HTML |
||||||
|
* Based on dabblet (http://dabblet.com) |
||||||
|
* @author Lea Verou |
||||||
|
*/ |
||||||
|
code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
color: black; |
||||||
|
background: none; |
||||||
|
text-shadow: 0 1px white; |
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||||
|
text-align: left; |
||||||
|
white-space: pre; |
||||||
|
word-spacing: normal; |
||||||
|
word-break: normal; |
||||||
|
word-wrap: normal; |
||||||
|
line-height: 1.5; |
||||||
|
|
||||||
|
-moz-tab-size: 4; |
||||||
|
-o-tab-size: 4; |
||||||
|
tab-size: 4; |
||||||
|
|
||||||
|
-webkit-hyphens: none; |
||||||
|
-moz-hyphens: none; |
||||||
|
-ms-hyphens: none; |
||||||
|
hyphens: none; |
||||||
|
} |
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection, |
||||||
|
pre[class*="language-"] ::-moz-selection, |
||||||
|
code[class*="language-"]::-moz-selection, |
||||||
|
code[class*="language-"] ::-moz-selection { |
||||||
|
text-shadow: none; |
||||||
|
background: #b3d4fc; |
||||||
|
} |
||||||
|
|
||||||
|
pre[class*="language-"]::selection, |
||||||
|
pre[class*="language-"] ::selection, |
||||||
|
code[class*="language-"]::selection, |
||||||
|
code[class*="language-"] ::selection { |
||||||
|
text-shadow: none; |
||||||
|
background: #b3d4fc; |
||||||
|
} |
||||||
|
|
||||||
|
@media print { |
||||||
|
|
||||||
|
code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
text-shadow: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Code blocks */ |
||||||
|
pre[class*="language-"] { |
||||||
|
padding: 1em; |
||||||
|
margin: .5em 0; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
:not(pre) > code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
background: #f5f2f0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Inline code */ |
||||||
|
:not(pre) > code[class*="language-"] { |
||||||
|
padding: .1em; |
||||||
|
border-radius: .3em; |
||||||
|
white-space: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.token.comment, |
||||||
|
.token.prolog, |
||||||
|
.token.doctype, |
||||||
|
.token.cdata { |
||||||
|
color: slategray; |
||||||
|
} |
||||||
|
|
||||||
|
.token.punctuation { |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
|
||||||
|
.namespace { |
||||||
|
opacity: .7; |
||||||
|
} |
||||||
|
|
||||||
|
.token.property, |
||||||
|
.token.tag, |
||||||
|
.token.boolean, |
||||||
|
.token.number, |
||||||
|
.token.constant, |
||||||
|
.token.symbol, |
||||||
|
.token.deleted { |
||||||
|
color: #905; |
||||||
|
} |
||||||
|
|
||||||
|
.token.selector, |
||||||
|
.token.attr-name, |
||||||
|
.token.string, |
||||||
|
.token.char, |
||||||
|
.token.builtin, |
||||||
|
.token.inserted { |
||||||
|
color: #690; |
||||||
|
} |
||||||
|
|
||||||
|
.token.operator, |
||||||
|
.token.entity, |
||||||
|
.token.url, |
||||||
|
.language-css .token.string, |
||||||
|
.style .token.string { |
||||||
|
color: #9a6e3a; |
||||||
|
background: hsla(0, 0%, 100%, .5); |
||||||
|
} |
||||||
|
|
||||||
|
.token.atrule, |
||||||
|
.token.attr-value, |
||||||
|
.token.keyword { |
||||||
|
color: #07a; |
||||||
|
} |
||||||
|
|
||||||
|
.token.function, |
||||||
|
.token.class-name { |
||||||
|
color: #DD4A68; |
||||||
|
} |
||||||
|
|
||||||
|
.token.regex, |
||||||
|
.token.important, |
||||||
|
.token.variable { |
||||||
|
color: #e90; |
||||||
|
} |
||||||
|
|
||||||
|
.token.important, |
||||||
|
.token.bold { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.token.italic { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
.token.entity { |
||||||
|
cursor: help; |
||||||
|
} |
||||||
@ -0,0 +1,448 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
<title>IconFont Demo</title> |
||||||
|
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" |
||||||
|
type="image/x-icon" /> |
||||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||||
|
<link rel="stylesheet" href="demo.css"> |
||||||
|
<link rel="stylesheet" href="iconfont.css"> |
||||||
|
<script src="iconfont.js"></script> |
||||||
|
<!-- jQuery --> |
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||||
|
<!-- 代码高亮 --> |
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="main"> |
||||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||||
|
<div class="nav-tabs"> |
||||||
|
<ul id="tabs" class="dib-box"> |
||||||
|
<li class="dib active"><span>Unicode</span></li> |
||||||
|
<li class="dib"><span>Font class</span></li> |
||||||
|
<li class="dib"><span>Symbol</span></li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1540265" target="_blank" |
||||||
|
class="nav-more">查看项目</a> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="tab-container"> |
||||||
|
<div class="content unicode" style="display: block;"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">已勾选32</div> |
||||||
|
<div class="code-name">&#xe63d;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">未勾选32</div> |
||||||
|
<div class="code-name">&#xe63e;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">未勾选40</div> |
||||||
|
<div class="code-name">&#xe64a;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">已勾选40</div> |
||||||
|
<div class="code-name">&#xe64b;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">实 向右箭头-01</div> |
||||||
|
<div class="code-name">&#xe626;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">实 向下箭头-01</div> |
||||||
|
<div class="code-name">&#xe625;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">加号-填充</div> |
||||||
|
<div class="code-name">&#xe72d;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">42指向上、上箭头</div> |
||||||
|
<div class="code-name">&#xe769;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">44指向下、下箭头</div> |
||||||
|
<div class="code-name">&#xe76b;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">群蜂删除-充</div> |
||||||
|
<div class="code-name">&#xe6e9;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">qq</div> |
||||||
|
<div class="code-name">&#xe614;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">微信-36</div> |
||||||
|
<div class="code-name">&#xe68a;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="unicode-">Unicode 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||||
|
<ul> |
||||||
|
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li> |
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||||
|
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li> |
||||||
|
</ul> |
||||||
|
<blockquote> |
||||||
|
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p> |
||||||
|
</blockquote> |
||||||
|
<p>Unicode 使用步骤如下：</p> |
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||||
|
<pre><code class="language-css" |
||||||
|
>@font-face { |
||||||
|
font-family: 'iconfont'; |
||||||
|
src: url('iconfont.eot'); |
||||||
|
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||||
|
url('iconfont.woff2') format('woff2'), |
||||||
|
url('iconfont.woff') format('woff'), |
||||||
|
url('iconfont.ttf') format('truetype'), |
||||||
|
url('iconfont.svg#iconfont') format('svg'); |
||||||
|
} |
||||||
|
</code></pre> |
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||||
|
<pre><code class="language-css" |
||||||
|
>.iconfont { |
||||||
|
font-family: "iconfont" !important; |
||||||
|
font-size: 16px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||||
|
<pre> |
||||||
|
<code class="language-html" |
||||||
|
><span class="iconfont">&#x33;</span> |
||||||
|
</code></pre> |
||||||
|
<blockquote> |
||||||
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||||
|
</blockquote> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content font-class"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-yigouxuan"></span> |
||||||
|
<div class="name"> |
||||||
|
已勾选32 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-yigouxuan |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-weigouxuan"></span> |
||||||
|
<div class="name"> |
||||||
|
未勾选32 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-weigouxuan |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-weigouxuan1"></span> |
||||||
|
<div class="name"> |
||||||
|
未勾选40 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-weigouxuan1 |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-yigouxuan1"></span> |
||||||
|
<div class="name"> |
||||||
|
已勾选40 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-yigouxuan1 |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-shixiangyoujiantou-"></span> |
||||||
|
<div class="name"> |
||||||
|
实 向右箭头-01 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-shixiangyoujiantou- |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-shixiangxiajiantou-"></span> |
||||||
|
<div class="name"> |
||||||
|
实 向下箭头-01 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-shixiangxiajiantou- |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-jiahao"></span> |
||||||
|
<div class="name"> |
||||||
|
加号-填充 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-jiahao |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-up"></span> |
||||||
|
<div class="name"> |
||||||
|
42指向上、上箭头 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-up |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-down"></span> |
||||||
|
<div class="name"> |
||||||
|
44指向下、下箭头 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-down |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-delete"></span> |
||||||
|
<div class="name"> |
||||||
|
群蜂删除-充 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-delete |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-qq"></span> |
||||||
|
<div class="name"> |
||||||
|
qq |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-qq |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-weixin"></span> |
||||||
|
<div class="name"> |
||||||
|
微信-36 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-weixin |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="font-class-">font-class 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||||
|
<ul> |
||||||
|
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li> |
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||||
|
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> |
||||||
|
</ul> |
||||||
|
<p>使用步骤如下：</p> |
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||||
|
</code></pre> |
||||||
|
<blockquote> |
||||||
|
<p>" |
||||||
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||||
|
</blockquote> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content symbol"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-yigouxuan"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">已勾选32</div> |
||||||
|
<div class="code-name">#icon-yigouxuan</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-weigouxuan"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">未勾选32</div> |
||||||
|
<div class="code-name">#icon-weigouxuan</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-weigouxuan1"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">未勾选40</div> |
||||||
|
<div class="code-name">#icon-weigouxuan1</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-yigouxuan1"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">已勾选40</div> |
||||||
|
<div class="code-name">#icon-yigouxuan1</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-shixiangyoujiantou-"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">实 向右箭头-01</div> |
||||||
|
<div class="code-name">#icon-shixiangyoujiantou-</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-shixiangxiajiantou-"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">实 向下箭头-01</div> |
||||||
|
<div class="code-name">#icon-shixiangxiajiantou-</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-jiahao"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">加号-填充</div> |
||||||
|
<div class="code-name">#icon-jiahao</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-up"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">42指向上、上箭头</div> |
||||||
|
<div class="code-name">#icon-up</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-down"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">44指向下、下箭头</div> |
||||||
|
<div class="code-name">#icon-down</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-delete"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">群蜂删除-充</div> |
||||||
|
<div class="code-name">#icon-delete</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-qq"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">qq</div> |
||||||
|
<div class="code-name">#icon-qq</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-weixin"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">微信-36</div> |
||||||
|
<div class="code-name">#icon-weixin</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="symbol-">Symbol 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||||
|
<ul> |
||||||
|
<li>支持多色图标了，不再受单色限制。</li> |
||||||
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||||
|
</ul> |
||||||
|
<p>使用步骤如下：</p> |
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||||
|
<pre><code class="language-html"><style> |
||||||
|
.icon { |
||||||
|
width: 1em; |
||||||
|
height: 1em; |
||||||
|
vertical-align: -0.15em; |
||||||
|
fill: currentColor; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-xxx"></use> |
||||||
|
</svg> |
||||||
|
</code></pre> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<script> |
||||||
|
$(document).ready(function() { |
||||||
|
$(".tab-container .content:first").show(); |
||||||
|
|
||||||
|
$("#tabs li").click(function(e) { |
||||||
|
var tabContent = $(".tab-container .content"); |
||||||
|
var index = $(this).index(); |
||||||
|
|
||||||
|
if ($(this).hasClass("active")) { |
||||||
|
return; |
||||||
|
} else { |
||||||
|
$("#tabs li").removeClass("active"); |
||||||
|
$(this).addClass("active"); |
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
@font-face { |
||||||
|
font-family: "iconfont"; |
||||||
|
src: url('iconfont.eot?t=1589437921018'); /* IE9 */ |
||||||
|
src: url('iconfont.eot?t=1589437921018#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAdgAAsAAAAADwwAAAcTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCESgqOeIt2ATYCJAM0CxwABCAFhG0HgTMbpQxRlHBSFNlX2JThXqSJ4cz0aLyxzNkVgYOP2N97wQhUeQbPDZA1QByDeHha+9+5M7PrD1FpdI8mCSqJLulDJPFDxCQTvUQS6Qtka3ukU0/kuK8wfBBwMr1kmeTIb8hUohVh6lTeCHDCrRPPf5v6f+sQfS+QqgmpiZLNw+ZI6zMXZGL3nXY47elJFnjALaE4zjzyjJN773yuzM/7H4oZ9NV+v/q1g1ddvP1QmE5JlPRM7uAv5klMk0vWTBWTLpoJEUIja6hWSkNhOklN/ds4n0BvhyLMuZ6hKdArLC1Q4a4iG0Gfi1JaHEMbXtfsW8S8SpsepzuAJ+HLx28hoSepMmvby3e6LdC2EN2eV0ykW36MR/MlQFiJjGNAEej7WvtLgB6aM6evXtwH1glnTloW1snRYnBhky+LxyuL9glaGNmaDbRsJYR1tl+seImrgUGtEtLc//GMeo1WR9QYfUSrp7nohWgXDRrJBqpBcoAqkGagAGkBSiADQBlkEKiAbAI/N/mCYHoWi1HDEgWoBbGjlg7M/OpbgEMgnUf0fxab8kjK0tvq8cZ6/dpKwk4bNsXFx4bHR4RHcty4LVnR4xp/2TFxDN42tgefhUpEMeeqppXCU50JyT/gkVCD+EiEgl56LOkMN+6cAfyKs3dvomHU7fvnq96Uc/duIXMMqWmhNRoax1m8jNWfPorp2jlqumvHrolfe/2TcuIPCt3K589dhUNiT5OSEh4KoM9Jp1vK2GMnFjDdyaeFMrd06ki1gn9CmEz3OErpebmp+GzyAN+lMLw6dwkKh6Ve5dOnzp4W0+Y25TTfhHB10isXpxIB5GHDKcggnof+NCpCD+okAFyTPNGuRVgahmhLjZo1rnqnMlpD0ORJSluuY6jT+gPWHtaIeDKOaoradNDPruOQzulPGcBtz0C2YdbLrSFPIMGTrcNRDGC3YnJOm1JLceYK2sCWY5lqxICXIEU0gki2nkPFUteBwoqLMyTdKE7ZlOzE3yHfdSyOU2shl8RoxPJlx1bQ6C0Li3DLg+Sdi+c5evEkhtF3rBdfXpe0IiNcfW27+x6u5U4vs8zZZdu1R7Gblyc6AV9OB4Xp65HRDqcvw0Pi1DGbddntOKzYgkbhXJq+Y4bRVqszl746KdRPFV5FxSUb6XmKomd1yCb0nJbpz+aOIZskx0phXx8sHfNKyRjPsM8LGU/xJ9Qrv2JugdVBkBg/ZpUIDvpN0jfHD550XPKNDgkKEZ46l4dwq0sOxIecJlX2pxxA8GTwkCGMFqxVFf5PRZplCky9uCIQL/s/RFabTYZNkhtkQXFR28vKXwKUP5rZbFg+s3VAFTu5dBZG4G07t5tHuM2cFirh2BisrHKYoE8lzO1h/LkwjSD+VZF0qs1hQVK+d0xHOLN80q4B/P9utxQDmGt4DaEKE6Lc5lnI6VxDf/35owQHCAuKw95VG6l1bvXPY3J1slpepPBXdCx8EM+ubbd2tV48b2UtWLtYb89PZhvg2jsq5+zkBdIVVTFHfhEwNv0CxNiT02LKVxGSus1dt9VsXDZulogOJB1AkGQVg4e833uzaWatx7bPrLKyhBeBqlC3xGqNoe3MVQHmDmBs4jm+xFjW/sjcAgOiPOFawwe3bUeTa20vGNZgbV6tCtL/qEL/fmiFLjqCCDpZdQpkdKgx6tSuzlCdqnrMFsLMhWn9sKH4ezmjmvpp9Selw9oCS0Vtcbox4f967yYpc1lNwUzPAUT3N0R32yz0bof5Wblw2jzkuw4VkWFptzoKckHRUwszvHJS8IgkAfys2IvKr/LtZBa1LzvfHBmFD6/V9enLD7LLJD2tz7n3E8BkFcwVyA/DL8P0fCpXAdLntBfy9tQCpuUP2QBAWkwyYccYGYFWWc/HS8Of6pVNf1r8p8n48bn+wPLzm5gyWoneAh3ivzATiiRKljoz8hQTN3S0itSojpnbgvjFod7uBf2Rtsa7dej63gKVRdenkDS2Q9baZyzWY1AZnIBa6yT0juo9eLCWhhOlwxFrCYRVjkKywhfIVrlrLNa3UNngB9RWBQe9mxF1zMGBUFCnRoyUWLBpCStm1SU5sRRFFSeI7HUYtawUeswQzaNk4PKSsmJBL3ERbY4dPD65glIJS5rqxD3kYsThULFbU23ETEuslLobSkuluh1LzKoTkLM0hBH1A1pgJku2CjOVizQ+hUrPP4GQeTkYaS0tarYzCI2HMnusXImyHsZe3dWrxb1U9/CRVaBMggS79TUqJ6yHSSAcdq4Kc9evZUOYUSWsI7LdGpQy7Ul99ZL1qfObT4CedX+zSJGjRBV1NNFGF30MMcYsVugeKLLqDXiNLuQnSQjRvRwtrRzlsSoBxeiSl1SvLVQoF1FcZj0Jqi46odWosl43b1H9Lp2FOAgl7OKibs6cgOICAA==') format('woff2'), |
||||||
|
url('iconfont.woff?t=1589437921018') format('woff'), |
||||||
|
url('iconfont.ttf?t=1589437921018') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1589437921018#iconfont') format('svg'); /* iOS 4.1- */ |
||||||
|
} |
||||||
|
|
||||||
|
.iconfont { |
||||||
|
font-family: "iconfont" !important; |
||||||
|
font-size: 16px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-yigouxuan:before { |
||||||
|
content: "\e63d"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-weigouxuan:before { |
||||||
|
content: "\e63e"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-weigouxuan1:before { |
||||||
|
content: "\e64a"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-yigouxuan1:before { |
||||||
|
content: "\e64b"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-shixiangyoujiantou-:before { |
||||||
|
content: "\e626"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-shixiangxiajiantou-:before { |
||||||
|
content: "\e625"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-jiahao:before { |
||||||
|
content: "\e72d"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-up:before { |
||||||
|
content: "\e769"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-down:before { |
||||||
|
content: "\e76b"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-delete:before { |
||||||
|
content: "\e6e9"; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-qq:before { |
||||||
|
content: "\e614"; |
||||||
|
font-size: 60px; |
||||||
|
color: #22aaf8; |
||||||
|
margin-left: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-weixin:before { |
||||||
|
content: "\e68a"; |
||||||
|
font-size: 60px; |
||||||
|
color: #10b747; |
||||||
|
margin-right: 32px; |
||||||
|
} |
||||||
|
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,93 @@ |
|||||||
|
{ |
||||||
|
"id": "1540265", |
||||||
|
"name": "education", |
||||||
|
"font_family": "iconfont", |
||||||
|
"css_prefix_text": "icon-", |
||||||
|
"description": "", |
||||||
|
"glyphs": [ |
||||||
|
{ |
||||||
|
"icon_id": "2716513", |
||||||
|
"name": "已勾选32", |
||||||
|
"font_class": "yigouxuan", |
||||||
|
"unicode": "e63d", |
||||||
|
"unicode_decimal": 58941 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "2716516", |
||||||
|
"name": "未勾选32", |
||||||
|
"font_class": "weigouxuan", |
||||||
|
"unicode": "e63e", |
||||||
|
"unicode_decimal": 58942 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "2892929", |
||||||
|
"name": "未勾选40", |
||||||
|
"font_class": "weigouxuan1", |
||||||
|
"unicode": "e64a", |
||||||
|
"unicode_decimal": 58954 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "2892954", |
||||||
|
"name": "已勾选40", |
||||||
|
"font_class": "yigouxuan1", |
||||||
|
"unicode": "e64b", |
||||||
|
"unicode_decimal": 58955 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "5979965", |
||||||
|
"name": "实 向右箭头-01", |
||||||
|
"font_class": "shixiangyoujiantou-", |
||||||
|
"unicode": "e626", |
||||||
|
"unicode_decimal": 58918 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "5979966", |
||||||
|
"name": "实 向下箭头-01", |
||||||
|
"font_class": "shixiangxiajiantou-", |
||||||
|
"unicode": "e625", |
||||||
|
"unicode_decimal": 58917 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "8349103", |
||||||
|
"name": "加号-填充", |
||||||
|
"font_class": "jiahao", |
||||||
|
"unicode": "e72d", |
||||||
|
"unicode_decimal": 59181 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "6129078", |
||||||
|
"name": "42指向上、上箭头", |
||||||
|
"font_class": "up", |
||||||
|
"unicode": "e769", |
||||||
|
"unicode_decimal": 59241 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "6129081", |
||||||
|
"name": "44指向下、下箭头", |
||||||
|
"font_class": "down", |
||||||
|
"unicode": "e76b", |
||||||
|
"unicode_decimal": 59243 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "410692", |
||||||
|
"name": "群蜂删除-充", |
||||||
|
"font_class": "delete", |
||||||
|
"unicode": "e6e9", |
||||||
|
"unicode_decimal": 59113 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "468193", |
||||||
|
"name": "qq", |
||||||
|
"font_class": "qq", |
||||||
|
"unicode": "e614", |
||||||
|
"unicode_decimal": 58900 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "7009153", |
||||||
|
"name": "微信-36", |
||||||
|
"font_class": "weixin", |
||||||
|
"unicode": "e68a", |
||||||
|
"unicode_decimal": 59018 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,3 @@ |
|||||||
|
[class*=" icon-"], [class^=icon-] { |
||||||
|
font-family: iconfont !important; |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
@import "./default/index.scss"; |
||||||
|
@import "./font/iconfont.css"; |
||||||
|
@import "./font/icon/iconfont.css"; |
||||||
|
@import "./lib/index.scss"; |
||||||
|
@import "./layout/index.scss"; |
||||||
|
@import "./common.scss"; |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
@import "lib/var"; |
||||||
|
@import "var"; |
||||||
|
|
||||||
|
html, |
||||||
|
body, |
||||||
|
#app, |
||||||
|
.wrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
min-width: 1280px; |
||||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
||||||
|
font-size: 14px; |
||||||
|
background: rgba(0, 0, 0, 0.02); |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $name, $color in $bg-colors { |
||||||
|
.bg-#{$name} { |
||||||
|
background-color: $color; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
.border { |
||||||
|
border: 1px solid $color-border; |
||||||
|
} |
||||||
|
|
||||||
|
// vertical |
||||||
|
.b-v { |
||||||
|
border-top: 1px solid $color-border; |
||||||
|
border-bottom: 1px solid $color-border; |
||||||
|
} |
||||||
|
|
||||||
|
// horizontal |
||||||
|
.b-h { |
||||||
|
border-left: 1px solid $color-border; |
||||||
|
border-right: 1px solid $color-border; |
||||||
|
} |
||||||
|
|
||||||
|
// border double |
||||||
|
.b-double { |
||||||
|
border: double $color-border; |
||||||
|
} |
||||||
|
|
||||||
|
.b-w-thin { |
||||||
|
border-width: 0.55px; |
||||||
|
} |
||||||
|
|
||||||
|
.b-round { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.b-none { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
@each $side in left, right, top, bottom { |
||||||
|
.b-#{str-slice($side, 0, 1)} { |
||||||
|
border-#{$side}: 1px solid $color-border; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// border-style |
||||||
|
@each $style in dotted, dashed { |
||||||
|
.border-#{$style} { |
||||||
|
border: 1px $style $color-border |
||||||
|
} |
||||||
|
.b-v-#{$style} { |
||||||
|
border-top: 1px $style $color-border; |
||||||
|
border-bottom: 1px $style $color-border; |
||||||
|
} |
||||||
|
.b-h-#{$style} { |
||||||
|
border-left: 1px $style $color-border; |
||||||
|
border-right: 1px $style $color-border; |
||||||
|
} |
||||||
|
@each $side in left, right, top, bottom { |
||||||
|
.b-#{str-slice($side, 0, 1)}-#{$style} { |
||||||
|
border-#{$side}: 1px $style $color-border; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 0 through $border-width-through { |
||||||
|
.b-#{$size} { |
||||||
|
border-width: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 0 through $border-radius-through { |
||||||
|
.b-radius-#{$size}, .b-r-#{$size} { |
||||||
|
border-radius: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $name, $color in $border-colors { |
||||||
|
.b-#{$name} { |
||||||
|
border-color: $color; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
/** |
||||||
|
* margin padding |
||||||
|
* @each 循环多次保证优先级 |
||||||
|
*/ |
||||||
|
|
||||||
|
.m-auto { |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in $box-sizes { |
||||||
|
.m-#{$size}, .margin-#{$size} { |
||||||
|
margin: #{$size}px; |
||||||
|
} |
||||||
|
@if $size >= 0 { |
||||||
|
.p-#{$size}, .padding-#{$size} { |
||||||
|
padding: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in $box-sizes { |
||||||
|
.m-h-#{$size} { |
||||||
|
margin-left: #{$size}px; |
||||||
|
margin-right: #{$size}px; |
||||||
|
} |
||||||
|
.m-v-#{$size} { |
||||||
|
margin-top: #{$size}px; |
||||||
|
margin-bottom: #{$size}px; |
||||||
|
} |
||||||
|
@if $size >= 0 { |
||||||
|
.p-h-#{$size} { |
||||||
|
padding-left: #{$size}px; |
||||||
|
padding-right: #{$size}px; |
||||||
|
} |
||||||
|
.p-v-#{$size} { |
||||||
|
padding-top: #{$size}px; |
||||||
|
padding-bottom: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in $box-sizes { |
||||||
|
@each $side in top right bottom left { |
||||||
|
.m-#{str-slice($side, 0, 1)}-#{$size} { |
||||||
|
margin-#{$side}: #{$size}px; |
||||||
|
} |
||||||
|
@if $size >= 0 { |
||||||
|
.p-#{str-slice($side, 0, 1)}-#{$size} { |
||||||
|
padding-#{$side}: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
@each $type in default, auto, crosshair, pointer, move, text, wait, help { |
||||||
|
.cursor-#{$type} { |
||||||
|
cursor: $type; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $type in inherit, none, inline, inline-block, block, table, inline-table, table-cell { |
||||||
|
.d-#{$type} { |
||||||
|
display: #{$type}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.hide { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.show { |
||||||
|
display: block |
||||||
|
} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
.flex { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.flex-column { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.j-start { |
||||||
|
justify-content: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
.j-end { |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
.j-center { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.j-between { |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.j-around { |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
|
||||||
|
.a-start { |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
.a-center { |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.a-end { |
||||||
|
align-items: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
@each $type in nowrap, wrap, wrap-reverse { |
||||||
|
.flex-#{$type} { |
||||||
|
flex-wrap: $type; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in 1, 2, 3 { |
||||||
|
.flex-#{$size} { |
||||||
|
flex: $size; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $i from 0 through 3 { |
||||||
|
.flex-s-#{$i} { |
||||||
|
flex-shrink: $i; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
.cl { |
||||||
|
&:before, &:after { |
||||||
|
content: ' '; |
||||||
|
display: table; |
||||||
|
} |
||||||
|
|
||||||
|
&:after { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.fl { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
.fr { |
||||||
|
float: right; |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@for $size from 0 through $font-size-em-through { |
||||||
|
.fs-em-#{$size} { |
||||||
|
font-size: #{$size}em; |
||||||
|
} |
||||||
|
@if $size <= $font-size-em-decimal-through { |
||||||
|
@for $i from 0 to 10 { |
||||||
|
.fs-em-#{$size}_#{$i} { |
||||||
|
font-size: #{$size}#{'.'}#{$i}em; |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
.fs-em-#{$size}_5 { |
||||||
|
font-size: #{$size}#{'.5'}em; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 0 through $font-size-rem-through { |
||||||
|
.fs-rem-#{$size} { |
||||||
|
font-size: #{$size}rem; |
||||||
|
} |
||||||
|
@if $size <= $font-size-rem-decimal-through { |
||||||
|
@for $i from 0 to 10 { |
||||||
|
.fs-rem-#{$size}_#{$i} { |
||||||
|
font-size: #{$size}#{'.'}#{$i}rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
.fs-rem-#{$size}_5 { |
||||||
|
font-size: #{$size}#{'.5'}rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 12 through $font-size-px-through { |
||||||
|
.fs-#{$size} { |
||||||
|
font-size: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
.bold { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.normal { |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.lighter { |
||||||
|
font-weight: lighter; |
||||||
|
} |
||||||
|
|
||||||
|
@each $weight in 100, 200, 300, 400, 500, 600, 700, 800, 900 { |
||||||
|
.fw-#{$weight} { |
||||||
|
font-weight: $weight; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@for $size from 0 through $line-height-through { |
||||||
|
.l-h-#{$size} { |
||||||
|
line-height: #{$size}em; |
||||||
|
} |
||||||
|
@if $size <= $line-height-decimal-through { |
||||||
|
@for $i from 0 to 10 { |
||||||
|
.l-h-#{$size}_#{$i} { |
||||||
|
line-height: #{$size}#{'.'}#{$i}em; |
||||||
|
} |
||||||
|
} |
||||||
|
} @else { |
||||||
|
.l-h-#{$size}_5 { |
||||||
|
line-height: #{$size}#{'.5'}em; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $size from 0 through $line-height-px-through { |
||||||
|
.lh-#{$size} { |
||||||
|
line-height: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $name, $color in $text-colors { |
||||||
|
.link-#{$name} { |
||||||
|
color: $color; |
||||||
|
text-decoration: none; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover, &:active, &:focus { |
||||||
|
color: darken($color, 10%); |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
@each $type in visible, hidden, scroll, auto, inherit { |
||||||
|
.o-#{$type} { |
||||||
|
overflow: $type; |
||||||
|
} |
||||||
|
.o-x-#{$type} { |
||||||
|
overflow-x: $type; |
||||||
|
} |
||||||
|
.o-y-#{$type} { |
||||||
|
overflow-y: $type; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $type in static, relative, absolute, fixed, sticky { |
||||||
|
.#{$type} { |
||||||
|
position: $type; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@each $size in $box-sizes { |
||||||
|
@each $side in top, right, bottom, left { |
||||||
|
.#{$side}-#{$size} { |
||||||
|
#{$side}: #{$size}px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,380 @@ |
|||||||
|
@import "var"; |
||||||
|
// reset 初始化浏览器样式 |
||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
*:before, |
||||||
|
*:after { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
html { |
||||||
|
-ms-text-size-adjust: 100%; |
||||||
|
-webkit-text-size-adjust: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body, |
||||||
|
div, |
||||||
|
dl, |
||||||
|
dt, |
||||||
|
dd, |
||||||
|
ul, |
||||||
|
ol, |
||||||
|
li, |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6, |
||||||
|
form, |
||||||
|
fieldset, |
||||||
|
legend, |
||||||
|
input, |
||||||
|
textarea, |
||||||
|
p, |
||||||
|
blockquote, |
||||||
|
th, |
||||||
|
td, |
||||||
|
hr, |
||||||
|
button, |
||||||
|
article, |
||||||
|
aside, |
||||||
|
details, |
||||||
|
figcaption, |
||||||
|
figure, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
hgroup, |
||||||
|
menu, |
||||||
|
nav, |
||||||
|
section { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
input, |
||||||
|
select, |
||||||
|
textarea { |
||||||
|
font-family: inherit; |
||||||
|
font-size: inherit; |
||||||
|
line-height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
input::-ms-clear, |
||||||
|
input::-ms-reveal { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
ol, ul { |
||||||
|
li { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 2em; |
||||||
|
margin: 0.67em 0; |
||||||
|
} |
||||||
|
|
||||||
|
article, |
||||||
|
aside, |
||||||
|
footer, |
||||||
|
header, |
||||||
|
nav, |
||||||
|
section { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
figcaption, |
||||||
|
figure, |
||||||
|
main { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
figure { |
||||||
|
margin: 1em 40px; |
||||||
|
} |
||||||
|
|
||||||
|
li:focus { |
||||||
|
outline-width: 0; |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Remove the gray background on active links in IE 10. |
||||||
|
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. |
||||||
|
*/ |
||||||
|
|
||||||
|
a { |
||||||
|
background-color: transparent; |
||||||
|
-webkit-text-decoration-skip: objects; |
||||||
|
text-decoration: none; |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
a:active { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
a:active, |
||||||
|
a:hover, |
||||||
|
a:focus { |
||||||
|
outline-width: 0; |
||||||
|
} |
||||||
|
|
||||||
|
abbr[title] { |
||||||
|
border-bottom: none; |
||||||
|
text-decoration: underline; |
||||||
|
text-decoration: underline dotted; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Prevent the duplicate application of `bolder` by the next rule in Safari 6. |
||||||
|
*/ |
||||||
|
|
||||||
|
b, |
||||||
|
strong { |
||||||
|
font-weight: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
b, |
||||||
|
strong { |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
|
||||||
|
pre, |
||||||
|
code, |
||||||
|
kbd, |
||||||
|
samp { |
||||||
|
font-family: monospace, monospace; |
||||||
|
font-size: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
dfn { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
mark { |
||||||
|
background-color: #ff0; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
|
||||||
|
small { |
||||||
|
font-size: 80%; |
||||||
|
} |
||||||
|
|
||||||
|
sub, |
||||||
|
sup { |
||||||
|
font-size: 75%; |
||||||
|
line-height: 0; |
||||||
|
position: relative; |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
|
||||||
|
sub { |
||||||
|
bottom: -0.25em; |
||||||
|
} |
||||||
|
|
||||||
|
sup { |
||||||
|
top: -0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
audio, |
||||||
|
video { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
audio:not([controls]) { |
||||||
|
display: none; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
border-style: none; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
svg:not(:root) { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
input, |
||||||
|
optgroup, |
||||||
|
select, |
||||||
|
textarea { |
||||||
|
font-size: 100%; |
||||||
|
line-height: 1.15; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
input { |
||||||
|
overflow: visible; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
select { |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
button:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
button, |
||||||
|
html [type="button"], |
||||||
|
[type="reset"], |
||||||
|
[type="submit"] { |
||||||
|
-webkit-appearance: button; |
||||||
|
} |
||||||
|
|
||||||
|
button::-moz-focus-inner, |
||||||
|
[type="button"]::-moz-focus-inner, |
||||||
|
[type="reset"]::-moz-focus-inner, |
||||||
|
[type="submit"]::-moz-focus-inner { |
||||||
|
border-style: none; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Restore the focus styles unset by the previous rule. |
||||||
|
*/ |
||||||
|
|
||||||
|
button:-moz-focusring, |
||||||
|
[type="button"]:-moz-focusring, |
||||||
|
[type="reset"]:-moz-focusring, |
||||||
|
[type="submit"]:-moz-focusring { |
||||||
|
outline: 1px dotted ButtonText; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Change the border, margin, and padding in all browsers (opinionated). |
||||||
|
*/ |
||||||
|
|
||||||
|
fieldset { |
||||||
|
border: 1px solid #c0c0c0; |
||||||
|
margin: 0 2px; |
||||||
|
padding: 0.35em 0.625em 0.75em; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the text wrapping in Edge and IE. |
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE. |
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out |
||||||
|
* `fieldset` elements in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
legend { |
||||||
|
box-sizing: border-box; /* 1 */ |
||||||
|
color: inherit; /* 2 */ |
||||||
|
display: table; /* 1 */ |
||||||
|
max-width: 100%; /* 1 */ |
||||||
|
padding: 0; /* 3 */ |
||||||
|
white-space: normal; /* 1 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Add the correct display in IE 9-. |
||||||
|
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. |
||||||
|
*/ |
||||||
|
|
||||||
|
progress { |
||||||
|
display: inline-block; /* 1 */ |
||||||
|
vertical-align: baseline; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the default vertical scrollbar in IE. |
||||||
|
*/ |
||||||
|
|
||||||
|
textarea { |
||||||
|
overflow: auto; |
||||||
|
resize: vertical; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Add the correct box sizing in IE 10-. |
||||||
|
* 2. Remove the padding in IE 10-. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="checkbox"], |
||||||
|
[type="radio"] { |
||||||
|
box-sizing: border-box; /* 1 */ |
||||||
|
padding: 0; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button, |
||||||
|
[type="number"]::-webkit-outer-spin-button { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the odd appearance in Chrome and Safari. |
||||||
|
* 2. Correct the outline style in Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="search"] { |
||||||
|
-webkit-appearance: textfield; /* 1 */ |
||||||
|
outline-offset: -2px; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button, |
||||||
|
[type="search"]::-webkit-search-decoration { |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari. |
||||||
|
* 2. Change font properties to `inherit` in Safari. |
||||||
|
*/ |
||||||
|
|
||||||
|
::-webkit-file-upload-button { |
||||||
|
-webkit-appearance: button; /* 1 */ |
||||||
|
font: inherit; /* 2 */ |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Add the correct display in IE 9-. |
||||||
|
* 1. Add the correct display in Edge, IE, and Firefox. |
||||||
|
*/ |
||||||
|
|
||||||
|
details, /* 1 */ |
||||||
|
menu { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Add the correct display in all browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
summary { |
||||||
|
display: list-item; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Add the correct display in IE 9-. |
||||||
|
*/ |
||||||
|
|
||||||
|
canvas { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
.w-full { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.h-full { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
@for $percent from 0 to 100 { |
||||||
|
.w-p-#{$percent} { |
||||||
|
width: #{$percent}#{'%'}; |
||||||
|
} |
||||||
|
.h-p-#{$percent} { |
||||||
|
height: #{$percent}#{'%'}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@for $i from 1 through 30 { |
||||||
|
.h-#{$i} { |
||||||
|
height: #{$i}px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@for $i from 1 through 30 { |
||||||
|
.w-#{$i} { |
||||||
|
width: #{$i}px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@each $i in $sizes { |
||||||
|
.w-#{$i} { |
||||||
|
width: #{$i}px; |
||||||
|
} |
||||||
|
.h-#{$i} { |
||||||
|
height: #{$i}px; |
||||||
|
} |
||||||
|
.max-w-#{$i} { |
||||||
|
max-width: #{$i}px; |
||||||
|
} |
||||||
|
.max-h-#{$i} { |
||||||
|
max-height: #{$i}px; |
||||||
|
} |
||||||
|
.min-w-#{$i} { |
||||||
|
min-width: #{$i}px; |
||||||
|
} |
||||||
|
.min-h-#{$i} { |
||||||
|
min-height: #{$i}px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
html { |
||||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
/** |
||||||
|
* 任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit" |
||||||
|
*/ |
||||||
|
@each $type in left, right, center, justify, inherit { |
||||||
|
.text-#{$type} { |
||||||
|
text-align: #{$type}; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
@import "var"; |
||||||
|
|
||||||
|
@each $name, $color in $text-colors { |
||||||
|
.text-#{$name} { |
||||||
|
color: $color; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
// 颜色 size范围 |
||||||
|
$color-black: #333 !default; |
||||||
|
$color-white: #ffffff !default; |
||||||
|
$color-grey: #888 !default; |
||||||
|
$color-green: #19be6b !default; |
||||||
|
$color-blue: #61c3ff !default; |
||||||
|
$color-yellow: #ff9900 !default; |
||||||
|
$color-red: #f35958 !default; |
||||||
|
|
||||||
|
$color-title: #17233d !default; |
||||||
|
$color-content: #515a6e !default; |
||||||
|
$color-disabled: #c5c8ce !default; |
||||||
|
|
||||||
|
$bg-grey: #f0f0f0 !default; |
||||||
|
$bg-white: #ffffff !default; |
||||||
|
$bg-black: #393D49 !default; |
||||||
|
|
||||||
|
$color-border: #dcdfe6 !default; |
||||||
|
|
||||||
|
// 主题背景色 |
||||||
|
$bg-colors: ( |
||||||
|
'white': $bg-white, |
||||||
|
'black': $bg-black, |
||||||
|
'grey': $bg-grey, |
||||||
|
'green': $color-green, |
||||||
|
'blue': $color-blue, |
||||||
|
'yellow': $color-yellow, |
||||||
|
'red': $color-red, |
||||||
|
) !default; |
||||||
|
|
||||||
|
// 文本颜色 |
||||||
|
$text-colors: ( |
||||||
|
'white': $color-white, |
||||||
|
'black': $color-black, |
||||||
|
'grey': $color-grey, |
||||||
|
'green': $color-green, |
||||||
|
'blue': $color-blue, |
||||||
|
'yellow': $color-yellow, |
||||||
|
'red': $color-red, |
||||||
|
'title': $color-title, |
||||||
|
'content': $color-content, |
||||||
|
'disabled': $color-disabled |
||||||
|
) !default; |
||||||
|
|
||||||
|
// 边框颜色 |
||||||
|
$border-colors: ( |
||||||
|
'white': $color-white, |
||||||
|
'black': $color-black, |
||||||
|
'grey': $color-border, |
||||||
|
'green': $color-green, |
||||||
|
'blue': $color-blue, |
||||||
|
'yellow': $color-yellow, |
||||||
|
'red': $color-red |
||||||
|
) !default; |
||||||
|
|
||||||
|
// border |
||||||
|
$border-width-through: 20 !default; |
||||||
|
$border-radius-through: 20 !default; |
||||||
|
|
||||||
|
// margin padding left right top bottom |
||||||
|
$box-sizes: ( |
||||||
|
-20, -15, -12, -10, -8, -6, -5, -4, -3, -2, -1, |
||||||
|
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 20, 25, 30, 35, 40, 50, 60, 80, 100) !default; |
||||||
|
|
||||||
|
// width height |
||||||
|
$sizes: ( |
||||||
|
40, 50, 60, 70, 80, 90, 100, |
||||||
|
120, 150, 200, 250, 300, 400, 500, 600, 800, 1000, 1200) !default; |
||||||
|
|
||||||
|
// font-size |
||||||
|
$font-size-em-through: 10 !default; |
||||||
|
$font-size-em-decimal-through: 5 !default; |
||||||
|
$font-size-rem-through: 10 !default; |
||||||
|
$font-size-rem-decimal-through: 5 !default; |
||||||
|
$font-size-px-through: 80 !default; |
||||||
|
|
||||||
|
// line-height |
||||||
|
$line-height-through: 20 !default; |
||||||
|
$line-height-decimal-through: 5 !default; |
||||||
|
$line-height-px-through: 100 !default; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
$types: (baseline, sub, super, top, text-top, middle, bottom, text-bottom, inherit); |
||||||
|
|
||||||
|
@each $type in $types { |
||||||
|
.v-a-#{$type} { |
||||||
|
vertical-align: $type; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
.visible { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
|
||||||
|
.hidden { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
@each $type in normal, nowrap, pre, pre-wrap, pre-line { |
||||||
|
.text-#{$type} { |
||||||
|
white-space: $type; |
||||||
|
} |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue