Skip to content
GitLab
Commit 769d1123 authored by Dejiao Zeng's avatar Dejiao Zeng
Browse files

初始化

parent fc5ba4a3
Pipeline #9 canceled with stages
Hide whitespace changes
Inline Side-by-side
src/components/WebTop/index.vue 0 → 100644
View file @ 769d1123
<template>
<div class="">
<div
class="top"
:class="index ? 'white' : ''"
:style="'background:' + backgroundColor"
>
<div class="top-div">
<div class="logo">
<div>
<img
:src="baseUrl+ruleForm.tpdz"
alt=""
srcset=""
/>
<div>
<p>{{this.ruleForm.wzmc}}</p>
<span
>{{this.ruleForm.wzywmc}}</span
>
</div>
</div>
<div class="f_shrink">
<div class="login">
<img
:src="index ? '@/assets/gw/wuser.svg' : '@/assets/gw/user.svg'"
alt=""
srcset=""
/>
<a href="http://121.5.131.76/zdgxkyep/#/login" target="_blank">登录</a><span>|</span>
</div>
<div class="search">
<img
:src="
index ? '@/assets/gw/wsearch.svg' : '@/assets/gw/search.svg'
"
alt=""
srcset=""
/>
<input type="text" placeholder="搜索" />
</div>
</div>
</div>
<div class="nav">
<router-link
class="nav_link"
:to="item.url"
v-for="(item, index) in nav"
:key="index"
>
{{ item.name }}
</router-link>
</div>
</div>
</div>
<div class="null" v-if="!index"></div>
</div>
</template>
<script>
import { getWzmcpz} from "@/api/background/siteName";
import { mapState } from "vuex";
export default {
props: {
index: {
type: Boolean,
},
},
data() {
return {
baseUrl: `${this.$store.state.app.baseUrl}`,
ruleForm:{wzywmc:'',
tpdz:''},
nav: [
{
name: "首页",
url: "/home",
},
{
name: "项目简介",
url: "/project",
},
{
name: "新闻资讯",
url: "/information",
},
{
name: "研究进展",
url: "/research",
},
{
name: "成果展示",
url: "/achievement",
},
],
};
},
computed: {
...mapState({
backgroundColor: (state) => state.app.backgroundColor,
}),
},
created() {
getWzmcpz().then(res => {
if (res.data.wzmc) {
this.ruleForm = res.data
} else {
this.ruleForm.wzmc = '暂无项目'
}
})
},
methods: {
change(index, url) {
this.$router.push({ path: url });
},
},
};
</script>
<style lang="scss" scoped>
.white {
div,
input {
&::placeholder {
color: #fff !important;
}
color: #fff !important;
}
.search {
background: rgba(255, 255, 255, 0.2) !important;
}
.nav,
.logo {
background: transparent !important;
}
}
.top {
height: 168px;
width: 100%;
position: fixed;
z-index: 99;
top: 0;
}
.null {
height: 168px;
}
.top-div {
.logo {
padding: 0 240px;
display: flex;
align-items: center;
justify-content: space-between;
height: 88px;
background: #fff;
& > div {
display: flex;
align-items: center;
&:nth-child(1) {
color: #214e89;
img {
width: 64px;
height: 64px;
flex-shrink: 0;
margin-right: 10px;
}
p {
margin: 0 !important;
font-weight: 700;
line-height: 32px;
font-size: 30px;
}
span {
font-family: "Arial";
font-variant: small-caps;
letter-spacing: 0.01em;
font-size: 12px;
}
}
.login,
.search {
color: #214e89;
display: flex;
align-items: center;
img {
width: 20px;
height: 20px;
}
}
.login {
cursor: pointer;
font-size: 16px;
img {
margin-right: 4px;
flex-shrink: 0;
}
span {
margin-left: 8px;
}
}
.search {
width: 300px;
background: rgba(33, 78, 137, 0.2);
border-radius: 40px;
padding: 11px;
margin-left: 8px;
input {
background: transparent;
border: none;
font-size: 20px;
flex: 1;
outline: none;
color: #214e89;
margin-left: 10px;
&::placeholder {
color: #214e89;
}
&:active {
border: none;
}
}
}
}
}
.nav {
height: 80px;
display: flex;
padding: 0 240px;
justify-content: space-between;
background: #214e89;
.nav_link {
width: 132px;
text-align: center;
line-height: 80px;
font-size: 20px;
color: #fff;
height: 80px;
cursor: pointer;
box-sizing: border-box;
border-top: 4px solid transparent;
&:hover {
font-weight: 700;
}
&.router-link-active {
background: rgba(255, 255, 255, 0.1);
background-blend-mode: overlay;
border-top: 4px solid #50bcff;
font-weight: 700;
}
}
}
}
</style>
\ No newline at end of file
src/components/index/index.vue 0 → 100644
View file @ 769d1123
<template>
<div class="main">
<div>
<div class="center" :style="{ height: height + 'px' }">
<el-card v-for="(item, index) in list" :key="index" shadow="hover" class="card-content">
<div class="card-top">
<div class="card-top-left">
<img :src="getImgUrl(item)" style="width: 24px; height: 24px">
<h4 class="center-mc" :title="item.TOP">
{{ item.TOP }}
</h4>
</div>
<div class="card-top-right">
<span class="center-mc">待处理</span>
<el-tag type="danger" effect="dark">
99+
</el-tag>
</div>
</div>
<div class="card-center">
<span>{{ item.ONE }}</span>
<span class="center-dw">{{ item.TWO }}</span>
<span class="center-dw">{{ item.THREE }}</span>
</div>
<div class="btn">
<el-button icon="el-icon-folder-opened" style="color: rgb(138,145,154)" type="text" @click="handleJump()">继续办理</el-button>
<el-divider direction="vertical" />
<el-button icon="el-icon-edit-outline" style="color: rgb(138,145,154)" type="text" @click="handleSq(item)">
立即申请</el-button>
</div>
</el-card>
</div>
<div
style="
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14px;
"
>
<el-pagination
:current-page.sync="table.page"
background
:page-sizes="[12, 16, 32, 48]"
:page-size="table.size"
layout="slot,sizes, prev, pager, next, jumper"
:total="total"
style="display: flex; flex: 1; justify-content: flex-end"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
<business-application ref="businessApplication" :business-type="businessType" />
</div>
</template>
<script>
import BusinessApplication from '@/views/workbench/ywsq'
// import { getFlYwlx } from '@/api/workbench/dbyw'
import { dmylHtmlTop } from '@/utils/swift-playground'
export default {
components: { BusinessApplication },
props: {
// eslint-disable-next-line vue/require-default-prop
list: Array,
// eslint-disable-next-line vue/require-default-prop
total: Number
},
data() {
return {
baseUrl: `${this.$store.state.app.baseUrl}`,
queryValue: '',
flzj: '',
obj: {
dialogTableVisible: false
},
businessType: {},
items: {},
ywList: [],
dialogFormVisible: {
status: false
},
// 动态高度
height: document.documentElement.clientHeight - 400,
windowHeight: document.documentElement.clientHeight, // 屏幕高度
table: {
page: 1,
size: 15
},
paramsList: []
}
},
computed: {
dmyl() {
return dmylHtmlTop
}
},
watch: {
windowHeight(val) {
this.height = this.windowHeight - 400
}
},
mounted() {
var that = this
// <!--把window.onresize事件挂在到mounted函数上-->
window.onresize = () => {
return (() => {
that.windowHeight = document.documentElement.clientHeight
})()
}
this.$emit('handleClick', this.table.page, this.table.size, this.paramsList, '')
},
methods: {
// 动态图片
getImgUrl(e) {
if (e) {
console.log(e.fltb)
if (e.fltb) {
const url = e.fltb.split('.')
if (url[1] === 'png' || url[1] === 'svg') {
return this.baseUrl + e.fltb
} else {
return '@/assets/index/business.png'
}
} else {
return '@/assets/index/business.png'
}
}
},
// 点击父类查子类
handleOk(e) {
this.$emit('handleClick', this.table.page, this.table.size, this.paramsList, '')
},
popoverSearch() {
this.$refs.popoverSearch.openDialog()
},
// 申请
handleSq(e) {
this.businessType = e
this.$refs.businessApplication.dialogVisible = true
/* this.$router.push({
path: '/myWorkbench/dobusiness',
query: { ywxl: e.id }
})*/
},
handleJump() {
this.$router.push('/myWorkbench/myBusiness')
},
// 重置
reset() {
this.table.page = 1
this.options.forEach((row, idx) => {
if (row.type === 'search') row.bindValue = ''
})
this.paramsList = []
this.$emit('handleClick', this.table.page, this.table.size, this.paramsList, this.flzj)
},
// 每页显示多少条改变事件
handleSizeChange(val) {
this.table.size = val
this.$emit('handleClick', this.table.page, this.table.size, this.paramsList, this.flzj)
},
// 当前页发生改变事件
handleCurrentChange(val) {
this.table.page = val
this.$emit('handleClick', this.table.page, this.table.size, this.paramsList, this.flzj)
},
onSubmit() {
this.table.page = 1
this.$emit('handleClick', this.table.page, this.table.size, this.paramsList, this.flzj)
}
}
}
</script>
<style lang="scss" scoped>
.left {
width: 100%;
white-space: pre-wrap;
padding: 10px;
overflow-y: auto;
display: flex;
background: #ffffff;
flex: 2;
flex-wrap: wrap;
&::-webkit-scrollbar {
height: 8px;
width: 8px;
}
&::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #ccc;
}
&::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
background-color: #409eff;
}
// line-height: 25px;
}
.div {
width: 45%;
height: 160px;
border: 1px solid #cccccc;
position: relative;
border-radius: 4px;
margin-left: 2%;
margin-right: 2%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
text-align: center;
}
.div:hover,
.div2 {
border: 2px solid rgba(31, 101, 249, 0.4);
background: rgba(31, 101, 249, 0.1);
}
.div:active,
.div2 {
background: rgba(31, 101, 249, 0.1);
border: 2px solid #1F65F9;
}
.count {
position: absolute;
top: 12px;
right: 12px;
padding: 5px 10px;
background: #FEE5E1;
border-radius: 50%;
text-align: center;
font-size: 14px;
color: red;
&::-webkit-scrollbar {
height: 8px;
width: 8px;
}
&::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #ccc;
}
&::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
background-color: #409eff;
}
}
.btn {
height: 40px;
display: flex;
justify-content: flex-end;
background: RGB(249, 249, 249);
margin-top: 12px;
:hover {
color: #409eff !important;
}
}
.btn .el-button {
width: 100%;
font-size: 16px;
}
.a {
color: rgb(153, 153, 153);
}
h4 {
color: rgb(31, 101, 249);
}
.card {
padding: 10px !important;
padding-bottom: 0px !important;
margin-top: 10px;
}
.card-content {
min-width: 166px;
}
.center {
width: 100%;
overflow: auto;
&::-webkit-scrollbar {
height: 8px;
width: 8px;
}
&::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #ccc;
}
&::-webkit-scrollbar-thumb:hover {
border-radius: 8px;
background-color: #409eff;
}
}
.center .el-card {
width: 23% !important;
margin-left: 0.8%;
margin-right: 0.8%;
margin-bottom: 32px;
float: left;
position: relative;
}
.card-top {
width: 90%;
margin: 0 auto;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-top img {
margin-right: 7px;
}
.card-top-left {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 600;
width: 80%;
}
.card-top-right {
display: flex;
align-items: center;
font-size: 12px;
color: rgb(147, 147, 147);
}
.card-top-right span:first-child {
border-radius: 15px;
}
.card-center {
width: 90%;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
font-size: 14px;
color: rgb(138, 145, 154);
line-height: 30px;
.center-dw {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.center-tell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.center-mc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: black;
font-weight: 400;
}
::v-deep .btn-next::before {
content: "下一页";
display: inline-block;
}
::v-deep .btn-next .el-icon-arrow-right {
display: inline-block;
}
::v-deep .btn-prev::after {
content: "上一页";
display: inline-block;
}
::v-deep .btn-prev .el-icon-arrow-left {
display: inline-block;
}
::v-deep .el-pagination {
.is-background {
width: 100%;
}
.number {
background: none !important;
border: 1px solid #1890ff !important;
border-radius: 25% !important;
}
.el-icon,
.btn-next,
.btn-prev {
background: none !important;
}
.el-pagination__sizes {
display: none;
}
.el-pagination__jump {
margin-left: 4px !important;
}
.el-input__inner:last-child {
border: 1px solid #1890ff !important;
border-radius: 16% !important;
}
.active {
background: #1890ff !important;
}
.btn-next :hover {
color: #1890ff !important;
}
.btn-prev :hover {
color: #1890ff !important;
}
}
</style>
<style scoped>
#imgs {
width: 16px;
height: 16px;
vertical-align: text-top;
}
.card /deep/ .el-card__body {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.center /deep/ .el-card__body {
padding: 7px 0px 0px !important;
}
::v-deep .el-divider {
margin-top: 12px;
}
</style>
src/components/ywm/index.vue 0 → 100644
View file @ 769d1123
<template>
<div>
<img id="barcode">
</div>
</template>
<script>
import JsBarcode from 'jsbarcode'
export default {
props: {
text: {
type: String,
default: ''
}
},
created() {
this.$nextTick(() => {
JsBarcode('#barcode', this.text, {
format: 'CODE128', // 条形码的格式
lineColor: '#000000', // 线条颜色
width: 1.2, // 线宽
height: 40, // 条码高度
displayValue: false, // 是否显示文字信息
margin: 7// 设置条形码周围的空白边距
})
})
}
}
</script>
src/directive/clipboard/clipboard.js 0 → 100644
View file @ 769d1123
// Inspired by https://github.com/Inndy/vue-clipboard2
const Clipboard = require('clipboard')
if (!Clipboard) {
throw new Error('you should npm install `clipboard` --save at first ')
}
export default {
bind(el, binding) {
if (binding.arg === 'success') {
el._v_clipboard_success = binding.value
} else if (binding.arg === 'error') {
el._v_clipboard_error = binding.value
} else {
const clipboard = new Clipboard(el, {
text() { return binding.value },
action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
})
clipboard.on('success', e => {
const callback = el._v_clipboard_success
callback && callback(e) // eslint-disable-line
})
clipboard.on('error', e => {
const callback = el._v_clipboard_error
callback && callback(e) // eslint-disable-line
})
el._v_clipboard = clipboard
}
},
update(el, binding) {
if (binding.arg === 'success') {
el._v_clipboard_success = binding.value
} else if (binding.arg === 'error') {
el._v_clipboard_error = binding.value
} else {
el._v_clipboard.text = function() { return binding.value }
el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
}
},
unbind(el, binding) {
if (binding.arg === 'success') {
delete el._v_clipboard_success
} else if (binding.arg === 'error') {
delete el._v_clipboard_error
} else {
el._v_clipboard.destroy()
delete el._v_clipboard
}
}
}
src/directive/clipboard/index.js 0 → 100644
View file @ 769d1123
import Clipboard from './clipboard'
const install = function(Vue) {
Vue.directive('Clipboard', Clipboard)
}
if (window.Vue) {
window.clipboard = Clipboard
Vue.use(install); // eslint-disable-line
}
Clipboard.install = install
export default Clipboard
src/directive/el-drag-dialog/drag.js 0 → 100644
View file @ 769d1123
export default {
bind(el, binding, vnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cssText += ';cursor:move;'
dragDom.style.cssText += ';top:0px;'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const getStyle = (function() {
if (window.document.currentStyle) {
return (dom, attr) => dom.currentStyle[attr]
} else {
return (dom, attr) => getComputedStyle(dom, false)[attr]
}
})()
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
const dragDomWidth = dragDom.offsetWidth
const dragDomHeight = dragDom.offsetHeight
const screenWidth = document.body.clientWidth
const screenHeight = document.body.clientHeight
const minDragDomLeft = dragDom.offsetLeft
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
const minDragDomTop = dragDom.offsetTop
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
// 获取到的值带px 正则匹配替换
let styL = getStyle(dragDom, 'left')
let styT = getStyle(dragDom, 'top')
if (styL.includes('%')) {
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
} else {
styL = +styL.replace(/\px/g, '')
styT = +styT.replace(/\px/g, '')
}
document.onmousemove = function(e) {
// 通过事件委托，计算移动的距离
let left = e.clientX - disX
let top = e.clientY - disY
// 边界处理
if (-(left) > minDragDomLeft) {
left = -minDragDomLeft
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft
}
if (-(top) > minDragDomTop) {
top = -minDragDomTop
} else if (top > maxDragDomTop) {
top = maxDragDomTop
}
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
// emit onDrag event
vnode.child.$emit('dragDialog')
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
}
src/directive/el-drag-dialog/index.js 0 → 100644
View file @ 769d1123
import drag from './drag'
const install = function(Vue) {
Vue.directive('el-drag-dialog', drag)
}
if (window.Vue) {
window['el-drag-dialog'] = drag
Vue.use(install); // eslint-disable-line
}
drag.install = install
export default drag
src/directive/el-table/adaptive.js 0 → 100644
View file @ 769d1123
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
/**
* How to use
* <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
* el-table height is must be set
* bottomOffset: 30(default) // The height of the table from the bottom of the page.
*/
const doResize = (el, binding, vnode) => {
const { componentInstance: $table } = vnode
const { value } = binding
if (!$table.height) {
throw new Error(`el-$table must set the height. Such as height='100px'`)
}
const bottomOffset = (value && value.bottomOffset) || 30
if (!$table) return
const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
$table.layout.setHeight(height)
$table.doLayout()
}
export default {
bind(el, binding, vnode) {
el.resizeListener = () => {
doResize(el, binding, vnode)
}
// parameter 1 is must be "Element" type
addResizeListener(window.document.body, el.resizeListener)
},
inserted(el, binding, vnode) {
doResize(el, binding, vnode)
},
unbind(el) {
removeResizeListener(window.document.body, el.resizeListener)
}
}
src/directive/el-table/index.js 0 → 100644
View file @ 769d1123
import adaptive from './adaptive'
const install = function(Vue) {
Vue.directive('el-height-adaptive-table', adaptive)
}
if (window.Vue) {
window['el-height-adaptive-table'] = adaptive
Vue.use(install); // eslint-disable-line
}
adaptive.install = install
export default adaptive
src/directive/permission/index.js 0 → 100644
View file @ 769d1123
import permission from './permission'
const install = function(Vue) {
Vue.directive('permission', permission)
}
if (window.Vue) {
window['permission'] = permission
Vue.use(install); // eslint-disable-line
}
permission.install = install
export default permission
src/directive/permission/permission.js 0 → 100644
View file @ 769d1123
import store from '@/store'
function checkPermission(el, binding) {
const { value } = binding
const roles = store.getters && store.getters.roles
if (value && value instanceof Array) {
if (value.length > 0) {
const permissionRoles = value
const hasPermission = roles.some(role => {
return permissionRoles.includes(role)
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
}
} else {
throw new Error(`need roles! Like v-permission="['admin','editor']"`)
}
}
export default {
inserted(el, binding) {
checkPermission(el, binding)
},
update(el, binding) {
checkPermission(el, binding)
}
}
src/directive/sticky.js 0 → 100644
View file @ 769d1123
const vueSticky = {}
let listenAction
vueSticky.install = Vue => {
Vue.directive('sticky', {
inserted(el, binding) {
const params = binding.value || {}
const stickyTop = params.stickyTop || 0
const zIndex = params.zIndex || 1000
const elStyle = el.style
elStyle.position = '-webkit-sticky'
elStyle.position = 'sticky'
// if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
// if (~elStyle.position.indexOf('sticky')) {
// elStyle.top = `${stickyTop}px`;
// elStyle.zIndex = zIndex;
// return
// }
const elHeight = el.getBoundingClientRect().height
const elWidth = el.getBoundingClientRect().width
elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
const parentElm = el.parentNode || document.documentElement
const placeholder = document.createElement('div')
placeholder.style.display = 'none'
placeholder.style.width = `${elWidth}px`
placeholder.style.height = `${elHeight}px`
parentElm.insertBefore(placeholder, el)
let active = false
const getScroll = (target, top) => {
const prop = top ? 'pageYOffset' : 'pageXOffset'
const method = top ? 'scrollTop' : 'scrollLeft'
let ret = target[prop]
if (typeof ret !== 'number') {
ret = window.document.documentElement[method]
}
return ret
}
const sticky = () => {
if (active) {
return
}
if (!elStyle.height) {
elStyle.height = `${el.offsetHeight}px`
}
elStyle.position = 'fixed'
elStyle.width = `${elWidth}px`
placeholder.style.display = 'inline-block'
active = true
}
const reset = () => {
if (!active) {
return
}
elStyle.position = ''
placeholder.style.display = 'none'
active = false
}
const check = () => {
const scrollTop = getScroll(window, true)
const offsetTop = el.getBoundingClientRect().top
if (offsetTop < stickyTop) {
sticky()
} else {
if (scrollTop < elHeight + stickyTop) {
reset()
}
}
}
listenAction = () => {
check()
}
window.addEventListener('scroll', listenAction)
},
unbind() {
window.removeEventListener('scroll', listenAction)
}
})
}
export default vueSticky
src/directive/waves/index.js 0 → 100644
View file @ 769d1123
import waves from './waves'
const install = function(Vue) {
Vue.directive('waves', waves)
}
if (window.Vue) {
window.waves = waves
Vue.use(install); // eslint-disable-line
}
waves.install = install
export default waves
src/directive/waves/waves.css 0 → 100644
View file @ 769d1123
.waves-ripple {
position: absolute;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.15);
background-clip: padding-box;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 1;
}
.waves-ripple.z-active {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}
\ No newline at end of file
src/directive/waves/waves.js 0 → 100644
View file @ 769d1123
import './waves.css'
const context = '@@wavesContext'
function handleClick(el, binding) {
function handle(e) {
const customOpts = Object.assign({}, binding.value)
const opts = Object.assign({
ele: el, // 波纹作用元素
type: 'hit', // hit 点击位置扩散 center中心点扩展
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
},
customOpts
)
const target = opts.ele
if (target) {
target.style.position = 'relative'
target.style.overflow = 'hidden'
const rect = target.getBoundingClientRect()
let ripple = target.querySelector('.waves-ripple')
if (!ripple) {
ripple = document.createElement('span')
ripple.className = 'waves-ripple'
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
target.appendChild(ripple)
} else {
ripple.className = 'waves-ripple'
}
switch (opts.type) {
case 'center':
ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
break
default:
ripple.style.top =
(e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
document.body.scrollTop) + 'px'
ripple.style.left =
(e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
document.body.scrollLeft) + 'px'
}
ripple.style.backgroundColor = opts.color
ripple.className = 'waves-ripple z-active'
return false
}
}
if (!el[context]) {
el[context] = {
removeHandle: handle
}
} else {
el[context].removeHandle = handle
}
return handle
}
export default {
bind(el, binding) {
el.addEventListener('click', handleClick(el, binding), false)
},
update(el, binding) {
el.removeEventListener('click', el[context].removeHandle, false)
el.addEventListener('click', handleClick(el, binding), false)
},
unbind(el) {
el.removeEventListener('click', el[context].removeHandle, false)
el[context] = null
delete el[context]
}
}
src/filters/index.js 0 → 100644
View file @ 769d1123
// import parseTime, formatTime and set to filter
export { parseTime, formatTime } from '@/utils'
/**
* Show plural label if time is plural number
* @param {number} time
* @param {string} label
* @return {string}
*/
function pluralize(time, label) {
if (time === 1) {
return time + label
}
return time + label + 's'
}
/**
* @param {number} time
*/
export function timeAgo(time) {
const between = Date.now() / 1000 - Number(time)
if (between < 3600) {
return pluralize(~~(between / 60), ' minute')
} else if (between < 86400) {
return pluralize(~~(between / 3600), ' hour')
} else {
return pluralize(~~(between / 86400), ' day')
}
}
/**
* Number formatting
* like 10000 => 10k
* @param {number} num
* @param {number} digits
*/
export function numberFormatter(num, digits) {
const si = [
{ value: 1E18, symbol: 'E' },
{ value: 1E15, symbol: 'P' },
{ value: 1E12, symbol: 'T' },
{ value: 1E9, symbol: 'G' },
{ value: 1E6, symbol: 'M' },
{ value: 1E3, symbol: 'k' }
]
for (let i = 0; i < si.length; i++) {
if (num >= si[i].value) {
return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
}
}
return num.toString()
}
/**
* 10000 => "10,000"
* @param {number} num
*/
export function toThousandFilter(num) {
return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}
/**
* Upper case first char
* @param {String} string
*/
export function uppercaseFirst(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
src/icons/index.js 0 → 100644
View file @ 769d1123
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const req = import.meta.globEager('./svg/*.svg')
const requireAll = requireContext => Object.keys(requireContext)
requireAll(req)
src/icons/svg/404.svg 0 → 100644
View file @ 769d1123
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>
\ No newline at end of file
src/icons/svg/active.svg 0 → 100644
View file @ 769d1123
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656494064459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2355" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M1024 0v853.333333a171.221333 171.221333 0 0 1-162.176 170.453334L853.333333 1024H0L1024 0z m-175.616 516.48l-3.584 4.053333-192 238.933334-72.533333-72.533334c-17.066667-17.066667-51.2-17.066667-68.266667 0-15.786667 15.786667-16.981333 46.08-3.626667 64.042667L512 755.2l123.733333 123.733333 2.474667 2.474667 1.792 1.792c11.733333 11.733333 30.634667 9.130667 43.562667-1.28l3.370666-2.986667 238.933334-294.4c12.8-25.6 8.533333-55.466667-12.8-72.533333-19.925333-15.914667-47.274667-13.269333-64.682667 4.48z" p-id="2356" fill="#67C23A"></path></svg>
\ No newline at end of file
src/icons/svg/bug.svg 0 → 100644
View file @ 769d1123
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M127.88 73.143c0 1.412-.506 2.635-1.518 3.669-1.011 1.033-2.209 1.55-3.592 1.55h-17.887c0 9.296-1.783 17.178-5.35 23.645l16.609 17.044c1.011 1.034 1.517 2.257 1.517 3.67 0 1.412-.506 2.635-1.517 3.668-.958 1.033-2.155 1.55-3.593 1.55-1.438 0-2.635-.517-3.593-1.55l-15.811-16.063a15.49 15.49 0 0 1-1.196 1.06c-.532.434-1.65 1.208-3.353 2.322a50.104 50.104 0 0 1-5.192 2.974c-1.758.87-3.94 1.658-6.546 2.364-2.607.706-5.189 1.06-7.748 1.06V47.044H58.89v73.062c-2.716 0-5.417-.367-8.106-1.102-2.688-.734-5.003-1.631-6.945-2.692a66.769 66.769 0 0 1-5.268-3.179c-1.571-1.057-2.73-1.94-3.476-2.65L33.9 109.34l-14.611 16.877c-1.066 1.14-2.344 1.711-3.833 1.711-1.277 0-2.422-.434-3.434-1.304-1.012-.978-1.557-2.187-1.635-3.627-.079-1.44.333-2.705 1.236-3.794l16.129-18.51c-3.087-6.197-4.63-13.644-4.63-22.342H5.235c-1.383 0-2.58-.517-3.592-1.55S.125 74.545.125 73.132c0-1.412.506-2.635 1.518-3.668 1.012-1.034 2.21-1.55 3.592-1.55h17.887V43.939L9.308 29.833c-1.012-1.033-1.517-2.256-1.517-3.669 0-1.412.505-2.635 1.517-3.668 1.012-1.034 2.21-1.55 3.593-1.55s2.58.516 3.593 1.55l13.813 14.106h67.396l13.814-14.106c1.012-1.034 2.21-1.55 3.592-1.55 1.384 0 2.581.516 3.593 1.55 1.012 1.033 1.518 2.256 1.518 3.668 0 1.413-.506 2.636-1.518 3.67l-13.814 14.105v23.975h17.887c1.383 0 2.58.516 3.593 1.55 1.011 1.033 1.517 2.256 1.517 3.668l-.005.01zM89.552 26.175H38.448c0-7.23 2.489-13.386 7.466-18.469C50.892 2.623 56.92.082 64 .082c7.08 0 13.108 2.541 18.086 7.624 4.977 5.083 7.466 11.24 7.466 18.469z"/></svg>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment