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