From 69fdd605d81b2ae3de561957be54ed329ba3e7b8 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Mon, 22 Mar 2021 18:14:29 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.03.22:=E6=96=B0=E5=A2=9E=E6=89=93?=
=?UTF-8?q?=E5=8D=B0=E3=80=81=E7=80=91=E5=B8=83=E5=B1=8F=E6=BC=94=E7=A4=BA?=
=?UTF-8?q?=E7=AD=89'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 5 +-
package.json | 15 +--
src/router/index.ts | 30 +++++
src/theme/element.scss | 24 ++++
src/utils/setIconfont.ts | 2 +-
src/views/fun/printJs/index.vue | 38 ++++++
src/views/pages/waterfall/index.vue | 179 ++++++++++++++++++++++++++++
7 files changed, 283 insertions(+), 10 deletions(-)
create mode 100644 src/views/fun/printJs/index.vue
create mode 100644 src/views/pages/waterfall/index.vue
diff --git a/README.md b/README.md
index 04ea99c..160956a 100644
--- a/README.md
+++ b/README.md
@@ -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>
#### 特别感谢
diff --git a/package.json b/package.json
index fa978db..b1a86cd 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/router/index.ts b/src/router/index.ts
index 52dacdd..6e2b548 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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',
diff --git a/src/theme/element.scss b/src/theme/element.scss
index c3b5803..64bfb07 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -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 加载
------------------------------- */
diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts
index 4220cb6..2a0b9e3 100644
--- a/src/utils/setIconfont.ts
+++ b/src/utils/setIconfont.ts
@@ -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
diff --git a/src/views/fun/printJs/index.vue b/src/views/fun/printJs/index.vue
new file mode 100644
index 0000000..ad5e824
--- /dev/null
+++ b/src/views/fun/printJs/index.vue
@@ -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>
diff --git a/src/views/pages/waterfall/index.vue b/src/views/pages/waterfall/index.vue
new file mode 100644
index 0000000..d239ac4
--- /dev/null
+++ b/src/views/pages/waterfall/index.vue
@@ -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>