mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 12:58:55 +08:00
'admin-21.03.22:新增打印、瀑布屏演示等'
This commit is contained in:
lyt
parent
e90f2b3c16
commit
69fdd605d8
@ -7,10 +7,10 @@
|
||||
<a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
|
||||
<img src="https://img.shields.io/badge/element--plus-%3E1.0.0-blue" alt="element plus">
|
||||
</a>
|
||||
<a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
|
||||
<a href="https://www.tslang.cn/" target="_blank">
|
||||
<img src="https://img.shields.io/badge/typescript-%3E4.0.0-blue" alt="typescript">
|
||||
</a>
|
||||
<a href="https://gitee.com/lyt-top/vue-admin-wonderful-next/blob/master/LICENSE" target="_blank">
|
||||
<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/LICENSE" target="_blank">
|
||||
<img src="https://img.shields.io/badge/vite-%3E2.0.0-yellow" alt="license">
|
||||
</a>
|
||||
<a href="https://vitejs.dev/" target="_blank">
|
||||
@ -117,6 +117,7 @@ cnpm run build
|
||||
- <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">cropperjs</a>
|
||||
- <a href="https://github.com/antvis/g6" target="_blank">@antv/g6</a>
|
||||
- <a href="https://github.com/davidshimjs/qrcodejs" target="_blank">qrcodejs</a>
|
||||
- <a href="https://github.com/crabbly/Print.js" target="_blank">print-js</a>
|
||||
|
||||
#### 特别感谢
|
||||
|
||||
|
||||
15
package.json
15
package.json
@ -7,32 +7,33 @@
|
||||
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g6": "^4.2.0",
|
||||
"@antv/g6": "^4.2.1",
|
||||
"axios": "^0.21.1",
|
||||
"clipboard": "^2.0.8",
|
||||
"countup.js": "^2.0.7",
|
||||
"cropperjs": "^1.5.11",
|
||||
"echarts": "^5.0.2",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "^1.0.2-beta.34",
|
||||
"element-plus": "^1.0.2-beta.35",
|
||||
"mitt": "^2.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"screenfull": "^5.1.0",
|
||||
"sortablejs": "^1.13.0",
|
||||
"vue": "^3.0.5",
|
||||
"vue-router": "^4.0.2",
|
||||
"vuex": "^4.0.0-rc.2",
|
||||
"wangeditor": "^4.6.9"
|
||||
"wangeditor": "^4.6.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/axios": "^0.14.0",
|
||||
"@types/clipboard": "^2.0.1",
|
||||
"@types/node": "^14.14.34",
|
||||
"@types/node": "^14.14.35",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.6",
|
||||
"@typescript-eslint/eslint-plugin": "^4.17.0",
|
||||
"@typescript-eslint/parser": "^4.17.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||
"@typescript-eslint/parser": "^4.18.0",
|
||||
"@vitejs/plugin-vue": "^1.1.5",
|
||||
"@vue/compiler-sfc": "^3.0.7",
|
||||
"dotenv": "^8.2.0",
|
||||
@ -42,7 +43,7 @@
|
||||
"sass": "^1.32.8",
|
||||
"sass-loader": "^11.0.1",
|
||||
"typescript": "^4.2.3",
|
||||
"vite": "^2.0.5",
|
||||
"vite": "^2.1.2",
|
||||
"vue-eslint-parser": "^7.6.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -452,6 +452,21 @@ export const dynamicRoutes = [
|
||||
icon: 'iconfont icon-ditu',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/fun/printJs',
|
||||
name: 'printJs',
|
||||
component: () => import('/@/views/fun/printJs/index.vue'),
|
||||
meta: {
|
||||
title: '页面打印',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-printer',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -605,6 +620,21 @@ export const dynamicRoutes = [
|
||||
icon: 'iconfont icon-chazhaobiaodanliebiao',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/waterfall',
|
||||
name: 'waterfall',
|
||||
component: () => import('/@/views/pages/waterfall/index.vue'),
|
||||
meta: {
|
||||
title: '瀑布屏',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-zidingyibuju',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/steps',
|
||||
name: 'steps',
|
||||
|
||||
@ -127,6 +127,27 @@
|
||||
.el-button--danger:active {
|
||||
@include Button(whites, danger, danger);
|
||||
}
|
||||
// 第三方字体图标大小
|
||||
.el-button i.iconfont,
|
||||
.el-button i.fa {
|
||||
font-size: 14px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.el-button--medium i.iconfont,
|
||||
.el-button--medium i.fa {
|
||||
font-size: 14px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.el-button--small i.iconfont,
|
||||
.el-button--small i.fa {
|
||||
font-size: 12px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.el-button--mini i.iconfont,
|
||||
.el-button--mini i.fa {
|
||||
font-size: 12px !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Link 文字链接
|
||||
------------------------------- */
|
||||
@ -604,6 +625,9 @@
|
||||
.el-alert--error.is-light .el-alert__description {
|
||||
color: set-color(danger);
|
||||
}
|
||||
.el-alert__title {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Loading 加载
|
||||
------------------------------- */
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// 字体图标 url
|
||||
const cssCdnUrlList: Array<string> = [
|
||||
'//at.alicdn.com/t/font_2298093_1pnb6uhuq4e.css',
|
||||
'//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css',
|
||||
'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
|
||||
];
|
||||
// 第三方 js url
|
||||
|
||||
38
src/views/fun/printJs/index.vue
Normal file
38
src/views/fun/printJs/index.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div id="printRref">
|
||||
<el-card shadow="hover" header="打印演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-button @click="onPrintJs" size="small" type="primary" icon="iconfont icon-dayin">点击打印演示</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import printJs from 'print-js';
|
||||
export default {
|
||||
name: 'printJs',
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
// 打印点击
|
||||
const onPrintJs = () => {
|
||||
printJs({
|
||||
printable: 'printRref',
|
||||
type: 'html',
|
||||
css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', 'https://unpkg.com/element-plus/lib/theme-chalk/index.css'],
|
||||
scanStyles: false,
|
||||
style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
|
||||
});
|
||||
};
|
||||
return {
|
||||
onPrintJs,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
179
src/views/pages/waterfall/index.vue
Normal file
179
src/views/pages/waterfall/index.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="waterfall-container">
|
||||
<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
|
||||
<div class="waterfall-first">
|
||||
<div class="waterfall-first-item" v-for="v in 30" :key="v">
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin">{{ v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" header="瀑布屏（布局二）">
|
||||
<div class="waterfall-last">
|
||||
<div class="waterfall-last-item" v-for="v in 30" :key="v">
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin">{{ v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from 'vue';
|
||||
export default {
|
||||
name: 'waterfall',
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.waterfall-container {
|
||||
.waterfall-first {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
|
||||
grid-gap: 0.25em;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: 20px;
|
||||
.waterfall-first-item {
|
||||
width: 100%;
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:nth-of-type(3n + 1) {
|
||||
grid-row: auto / span 5;
|
||||
}
|
||||
&:nth-of-type(3n + 2) {
|
||||
grid-row: auto / span 6;
|
||||
}
|
||||
&:nth-of-type(3n + 3) {
|
||||
grid-row: auto / span 8;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.waterfall-last {
|
||||
display: grid;
|
||||
grid-gap: 0.25em;
|
||||
grid-auto-flow: row dense;
|
||||
grid-auto-rows: minmax(188px, 20vmin);
|
||||
grid-template-columns: 1fr;
|
||||
.waterfall-last-item {
|
||||
height: 100%;
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.waterfall-last {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
.waterfall-last-item {
|
||||
&:nth-of-type(9n + 9) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 8) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 7) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 6) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 5) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 4) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 3) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(9n + 2) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(9n + 1) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (min-width: 1024px) {
|
||||
.waterfall-last {
|
||||
grid-template-columns: repeat(14, 1fr);
|
||||
.waterfall-last-item {
|
||||
&:nth-of-type(15n + 15) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 14) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 13) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(15n + 12) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 11) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 10) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
&:nth-of-type(15n + 9) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 8) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 7) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 6) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 5) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 4) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 3) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 2) {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
&:nth-of-type(15n + 1) {
|
||||
grid-column: auto / span 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user