'admin-21.02.28:新增数字滚动演示界面、添加README.md、修复ElMessageBox不居中问题'
This commit is contained in:
lyt-Top
parent
c0c57c4aad
commit
46c93a4f05
121
README.md
Normal file
121
README.md
Normal file
@ -0,0 +1,121 @@
|
||||
<div align="center">
|
||||
<img src="https://gitee.com/lyt-top/vue-admin-wonderful-images/raw/master/next/logo/logo-docs-large-element-text.svg">
|
||||
<p align="center">
|
||||
<a href="https://v3.vuejs.org/" target="_blank">
|
||||
<img src="https://img.shields.io/badge/vue.js-vue3.x-green" alt="vue">
|
||||
</a>
|
||||
<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">
|
||||
<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">
|
||||
<img src="https://img.shields.io/badge/vite-%3E2.0.0-yellow" alt="license">
|
||||
</a>
|
||||
<a href="https://vitejs.dev/" target="_blank">
|
||||
<img src="https://img.shields.io/badge/license-MIT-success" alt="vite">
|
||||
</a>
|
||||
</p>
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
#### 介绍
|
||||
|
||||
基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。
|
||||
|
||||
#### 线上预览
|
||||
|
||||
###### vue3.x 版本
|
||||
|
||||
- vue-admin-wonderful-next 版本预览 <a href="https://lyt-top.gitee.io/vue-admin-wonderful-next-preview/#/login" target="_blank">https://lyt-top.gitee.io/vue-admin-wonderful-next-preview/#/login</a>
|
||||
|
||||
###### vue2.x 版本
|
||||
|
||||
- pro 版本预览 <a href="http://lyt-top.gitee.io/vue-admin-wonderful-preview" target="_blank">http://lyt-top.gitee.io/vue-admin-wonderful-preview</a>
|
||||
- fashion 版本预览 <a href="http://lyt-top.gitee.io/vue-admin-wonderful-fashion-preview" target="_blank">http://lyt-top.gitee.io/vue-admin-wonderful-fashion-preview</a>
|
||||
- classic 版本预览 <a href="http://lyt-top.gitee.io/vue-admin-wonderful-classic-preview" target="_blank">http://lyt-top.gitee.io/vue-admin-wonderful-classic-preview</a>
|
||||
- elegant 版本预览 <a href="http://lyt-top.gitee.io/vue-admin-wonderful-elegant-preview" target="_blank">http://lyt-top.gitee.io/vue-admin-wonderful-elegant-preview</a>
|
||||
- strange 版本预览 <a href="http://lyt-top.gitee.io/vue-admin-wonderful-strange-preview" target="_blank">http://lyt-top.gitee.io/vue-admin-wonderful-strange-preview</a>
|
||||
|
||||
#### 代码仓库
|
||||
|
||||
- vue3.x 版本 <a href="https://gitee.com/lyt-top/vue-admin-wonderful-next" target="_blank">https://gitee.com/lyt-top/vue-admin-wonderful-next</a>
|
||||
- vue2.x 版本 <a href="https://gitee.com/lyt-top/vue-admin-wonderful" target="_blank">https://gitee.com/lyt-top/vue-admin-wonderful</a>
|
||||
|
||||
#### 安装 cnpm
|
||||
|
||||
- 复制代码(桌面 cmd 运行) `npm install -g cnpm --registry=https://registry.npm.taobao.org`
|
||||
|
||||
#### 使用说明(vue3.x 版本)
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://gitee.com/lyt-top/vue-admin-wonderful-next.git
|
||||
|
||||
# 进入项目
|
||||
cd vue-admin-wonderful-next
|
||||
|
||||
# 安装依赖
|
||||
cnpm install
|
||||
|
||||
# 运行项目
|
||||
cnpm run dev
|
||||
|
||||
# 打包发布
|
||||
cnpm run build
|
||||
```
|
||||
|
||||
#### 使用说明(vue2.x 版本)
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://gitee.com/lyt-top/vue-admin-wonderful.git
|
||||
|
||||
# 进入项目
|
||||
cd vue-admin-wonderful
|
||||
|
||||
# 安装依赖
|
||||
cnpm install
|
||||
|
||||
# 运行项目
|
||||
cnpm run serve
|
||||
|
||||
# 打包发布
|
||||
cnpm run build
|
||||
```
|
||||
|
||||
#### 学习交流加 QQ 群
|
||||
|
||||
- 加群下载基础模板、查看开发文档、<a href="https://lyt-top.gitee.io/vue-admin-wonderful-next-preview/#/login" target="_blank">vue-admin-wonderful-next</a> 开发文档正在编写中...
|
||||
- 群号码：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
|
||||
|
||||
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">
|
||||
<img src="https://gitee.com/lyt-top/vue-admin-wonderful-images/raw/master/doc/qqs.png" width="220" alt="vue-admin-wonderful 讨论群" title="vue-admin-wonderful 讨论群"/></a>
|
||||
|
||||
#### 鸣谢列表
|
||||
|
||||
- <a href="https://github.com/vuejs/vue" target="_blank">vue</a>
|
||||
- <a href="https://github.com/vuejs/vue-next" target="_blank">vue-next</a>
|
||||
- <a href="https://github.com/ElemeFE/element" target="_blank">element-ui</a>
|
||||
- <a href="https://github.com/element-plus/element-plus" target="_blank">element-plus</a>
|
||||
- <a href="https://github.com/vuejs/vue-router-next" target="_blank">vue-router-nex</a>
|
||||
- <a href="https://github.com/vuejs/vuex" target="_blank">vuex</a>
|
||||
- <a href="https://github.com/apache/echarts" target="_blank">echarts</a>
|
||||
- <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank">vue-element-admin</a>
|
||||
- <a href="https://github.com/axios/axios" target="_blank">axios</a>
|
||||
- <a href="https://github.com/zenorocha/clipboard.js" target="_blank">clipboard</a>
|
||||
- <a href="https://github.com/inorganik/countUp.js" target="_blank">countUp</a>
|
||||
- <a href="https://github.com/developit/mitt" target="_blank">mitt</a>
|
||||
- <a href="https://github.com/rstacruz/nprogress" target="_blank">nprogress</a>
|
||||
- <a href="https://github.com/sindresorhus/screenfull.js" target="_blank">screenfull</a>
|
||||
- <a href="https://github.com/SortableJS/Sortable" target="_blank">sortablejs</a>
|
||||
- <a href="https://github.com/sass/sass" target="_blank">sass</a>
|
||||
- <a href="https://github.com/microsoft/TypeScript" target="_blank">typescript</a>
|
||||
- <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
|
||||
|
||||
#### 其他事项
|
||||
|
||||
- <a href="https://lyt-top.gitee.io/vue-admin-wonderful-next-preview/#/login" target="_blank">vue3.x vue-admin-wonderful-next 版本</a>，基于 vue3.x + CompositionAPI + typescript + vite + element plus。
|
||||
- <a href="http://lyt-top.gitee.io/vue-admin-wonderful-preview/#/login" target="_blank">vue2.x vue-admin-wonderful 版本</a>，基于 vue2.x + element ui。
|
||||
- 喜欢用就帮忙 <a href="https://gitee.com/lyt-top/vue-admin-wonderful-next" target="_blank">gitee star</a> 下，不喜欢用也没关系，出来打工、创业，大家都不容易，感谢大家的支持，谢谢！
|
||||
@ -1,4 +1,3 @@
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
|
||||
import NProgress from 'nprogress'
|
||||
import 'nprogress/nprogress.css'
|
||||
@ -332,6 +331,21 @@ export const dynamicRoutes = [
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-thumb'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/fun/countup',
|
||||
name: 'countup',
|
||||
component: () => import('/@/views/fun/countup/index.vue'),
|
||||
meta: {
|
||||
title: 'countup 数字滚动',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-odometer'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -882,6 +882,7 @@
|
||||
.el-overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
.el-dialog__body {
|
||||
|
||||
153
src/views/fun/countup/index.vue
Normal file
153
src/views/fun/countup/index.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="hover" header="数字滚动演示">
|
||||
<el-alert title="感谢 `countup.js`，项目地址：https://github.com/inorganik/countUp.js" type="success" :closable="false"
|
||||
class="mb15"></el-alert>
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="6" class="mb15" v-for="(v,k) in topCardItemList" :key="k">
|
||||
<div class="countup-card-item countup-card-item-box" :style="{background:v.color}">
|
||||
<div class="countup-card-item-flex">
|
||||
<div class="countup-card-item-title pb3">{{v.title}}</div>
|
||||
<div class="countup-card-item-title-num pb6" :id="`titleNum${k+1}`"></div>
|
||||
<div class="countup-card-item-tip pb3">{{v.tip}}</div>
|
||||
<div class="countup-card-item-tip-num" :id="`tipNum${k+1}`"></div>
|
||||
</div>
|
||||
<i :class="v.icon" :style="{'color': v.iconColor}"></i>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-refresh-right" @click="refreshCurrent">重置/刷新数值
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, onMounted, nextTick } from "vue";
|
||||
import { CountUp } from "countup.js";
|
||||
export default {
|
||||
name: "countup",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
topCardItemList: [
|
||||
{
|
||||
title: "今日访问人数",
|
||||
titleNum: "123",
|
||||
tip: "在场人数",
|
||||
tipNum: "911",
|
||||
color: "#F95959",
|
||||
iconColor: "#F86C6B",
|
||||
icon: "iconfont icon-jinridaiban",
|
||||
},
|
||||
{
|
||||
title: "实验室总数",
|
||||
titleNum: "123",
|
||||
tip: "使用中",
|
||||
tipNum: "611",
|
||||
color: "#8595F4",
|
||||
iconColor: "#92A1F4",
|
||||
icon: "iconfont icon-AIshiyanshi",
|
||||
},
|
||||
{
|
||||
title: "申请人数（月）",
|
||||
titleNum: "123",
|
||||
tip: "通过人数",
|
||||
tipNum: "911",
|
||||
color: "#FEBB50",
|
||||
iconColor: "#FDC566",
|
||||
icon: "iconfont icon-shenqingkaiban",
|
||||
},
|
||||
{
|
||||
title: "销售情况",
|
||||
titleNum: "123",
|
||||
tip: "销售数",
|
||||
tipNum: "911",
|
||||
color: "#41b3c5",
|
||||
iconColor: "#1dbcd5",
|
||||
icon: "el-icon-trophy-1",
|
||||
},
|
||||
],
|
||||
});
|
||||
// 初始化数字滚动
|
||||
const initNumCountUp = () => {
|
||||
nextTick(() => {
|
||||
new CountUp("titleNum1", Math.random() * 10000).start();
|
||||
new CountUp("titleNum2", Math.random() * 10000).start();
|
||||
new CountUp("titleNum3", Math.random() * 10000).start();
|
||||
new CountUp("titleNum4", Math.random() * 10000).start();
|
||||
new CountUp("tipNum1", Math.random() * 1000).start();
|
||||
new CountUp("tipNum2", Math.random() * 1000).start();
|
||||
new CountUp("tipNum3", Math.random() * 1000).start();
|
||||
new CountUp("tipNum4", Math.random() * 1000).start();
|
||||
});
|
||||
};
|
||||
// 重置/刷新数值
|
||||
const refreshCurrent = () => {
|
||||
initNumCountUp();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initNumCountUp();
|
||||
});
|
||||
return {
|
||||
refreshCurrent,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.countup-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: gray;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
.countup-card-item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.countup-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
.countup-card-item-title,
|
||||
.countup-card-item-tip {
|
||||
font-size: 13px;
|
||||
}
|
||||
.countup-card-item-title-num {
|
||||
font-size: 18px;
|
||||
}
|
||||
.countup-card-item-tip-num {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user