优化加载界面
This commit is contained in:
季圣华
parent
6abbddea58
commit
c39752ddbe
14
jshERP-web/public/index.html
vendored
14
jshERP-web/public/index.html
vendored
@ -17,7 +17,7 @@
|
|||||||
.chromeframe {
|
.chromeframe {
|
||||||
margin: 0.2em 0;
|
margin: 0.2em 0;
|
||||||
background: #ccc;
|
background: #ccc;
|
||||||
color: #000;
|
color: #999;
|
||||||
padding: 0.2em 0;
|
padding: 0.2em 0;
|
||||||
}
|
}
|
||||||
#loader-wrapper {
|
#loader-wrapper {
|
||||||
@ -39,7 +39,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
/* COLOR 1 */
|
/* COLOR 1 */
|
||||||
border-top-color: #FFF;
|
border-top-color: #999;
|
||||||
-webkit-animation: spin 2s linear infinite;
|
-webkit-animation: spin 2s linear infinite;
|
||||||
/* Chrome, Opera 15+, Safari 5+ */
|
/* Chrome, Opera 15+, Safari 5+ */
|
||||||
-ms-animation: spin 2s linear infinite;
|
-ms-animation: spin 2s linear infinite;
|
||||||
@ -62,7 +62,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
/* COLOR 2 */
|
/* COLOR 2 */
|
||||||
border-top-color: #FFF;
|
border-top-color: #999;
|
||||||
-webkit-animation: spin 3s linear infinite;
|
-webkit-animation: spin 3s linear infinite;
|
||||||
/* Chrome, Opera 15+, Safari 5+ */
|
/* Chrome, Opera 15+, Safari 5+ */
|
||||||
-moz-animation: spin 3s linear infinite;
|
-moz-animation: spin 3s linear infinite;
|
||||||
@ -83,7 +83,7 @@
|
|||||||
bottom: 15px;
|
bottom: 15px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
border-top-color: #FFF;
|
border-top-color: #999;
|
||||||
/* COLOR 3 */
|
/* COLOR 3 */
|
||||||
-moz-animation: spin 1.5s linear infinite;
|
-moz-animation: spin 1.5s linear infinite;
|
||||||
/* Chrome, Opera 15+, Safari 5+ */
|
/* Chrome, Opera 15+, Safari 5+ */
|
||||||
@ -137,7 +137,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
width: 51%;
|
width: 51%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #49a9ee;
|
background: #fff;
|
||||||
/* Old browsers */
|
/* Old browsers */
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
-webkit-transform: translateX(0);
|
-webkit-transform: translateX(0);
|
||||||
@ -199,7 +199,7 @@
|
|||||||
}
|
}
|
||||||
#loader-wrapper .load_title {
|
#loader-wrapper .load_title {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
color: #FFF;
|
color: #999;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -213,7 +213,7 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #FFF;
|
color: #999;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
/* 滚动条优化 start */
|
/* 滚动条优化 start */
|
||||||
|
|||||||
@ -1,43 +1,41 @@
|
|||||||
####1._util包:存放自定义函数 详细见代码注释
|
####1._util包:存放自定义函数 详细见代码注释
|
||||||
####2.AvatarList:显示头像群并支持tip，用法参考src\views\Home.vue（如下图）
|
####2.chart包:存放各种图表相关的组件,条形图柱形图折线图等等 具体用法参考首页
|
||||||
|
####3.countDown包:一个倒计时组件，用法参考home页,简单描述,该组件有3个属性,
|
||||||
####3.chart包:存放各种图表相关的组件,条形图柱形图折线图等等 具体用法参考首页
|
target(时间/毫秒数)必填，
|
||||||
####4.countDown包:一个倒计时组件，用法参考home页,简单描述,该组件有3个属性,
|
format(function,该方法接收一个毫秒数的参数,用于格式化显示当前倒计时时间)非必填,
|
||||||
target(时间/毫秒数)必填，
|
onEnd倒计时结束触发函数
|
||||||
format(function,该方法接收一个毫秒数的参数,用于格式化显示当前倒计时时间)非必填,
|
|
||||||
onEnd倒计时结束触发函数
|
####5.dict包：数据字典专用，用法参考文件夹下readme文件
|
||||||
|
####6.Ellipsis包：字符串截取组件,可以指定字符串的显示长度,并将全部内容显示到tip中,简单使用参考src\views\system\PermissionList.vue
|
||||||
####5.dict包：数据字典专用，用法参考文件夹下readme文件
|
####7.jeecg包：该包下自定义了很多列表/表单中用到的组件 参考包下readme文件
|
||||||
####6.Ellipsis包：字符串截取组件,可以指定字符串的显示长度,并将全部内容显示到tip中,简单使用参考src\views\system\PermissionList.vue
|
####8.jeecgbiz包：该包下定义了一些业务相关的组件，比如选择用户弹框,根据部门选择用户等等
|
||||||
####7.jeecg包：该包下自定义了很多列表/表单中用到的组件 参考包下readme文件
|
####9.layouts+page包：系统页面布局相关组件，比如登陆进去之后页面顶部显示什么，底部显示什么，菜单点击触发多个tab的布局等等 一般情况不需要修改
|
||||||
####8.jeecgbiz包：该包下定义了一些业务相关的组件，比如选择用户弹框,根据部门选择用户等等
|
####10.menun包：菜单组件，俩个，一个折叠菜单一个正常显示的菜单
|
||||||
####9.layouts+page包：系统页面布局相关组件，比如登陆进去之后页面顶部显示什么，底部显示什么，菜单点击触发多个tab的布局等等 一般情况不需要修改
|
####11.NumberInfo:数字信息显示组件 如下图
|
||||||
####10.menun包：菜单组件，俩个，一个折叠菜单一个正常显示的菜单
|
|
||||||
####11.NumberInfo:数字信息显示组件 如下图
|
####12.online包：该包下封装了online表单的相关组件,用于展示表单各种控件,验证表单等等,相关用法参考readme
|
||||||
|
####13.setting包：该包下封装了首页风格切换等功能如下图
|
||||||
####12.online包：该包下封装了online表单的相关组件,用于展示表单各种控件,验证表单等等,相关用法参考readme
|
|
||||||
####13.setting包：该包下封装了首页风格切换等功能如下图
|
####14.table包：一个二次封装的table组件,用于展示列表，参考readme
|
||||||
|
####15.tools包：
|
||||||
####14.table包：一个二次封装的table组件,用于展示列表，参考readme
|
Breadcrumb.vue：面包屑二次封装,支持路由跳转
|
||||||
####15.tools包：
|
DetailList.vue：详情展示用法参考src\views\profile\advanced\Advanced.vue(效果如下图)
|
||||||
Breadcrumb.vue：面包屑二次封装,支持路由跳转
|
|
||||||
DetailList.vue：详情展示用法参考src\views\profile\advanced\Advanced.vue(效果如下图)
|
````
|
||||||
|
个人认为该页面代码有两点值得学习：
|
||||||
````
|
1.vue provide/inject的使用
|
||||||
个人认为该页面代码有两点值得学习：
|
2.该页面css定义方式,只定义一个顶层class,其余样式都定义在其下,这样只要顶层class不和别的页面冲突,整个页面的样式都是唯一生效的
|
||||||
1.vue provide/inject的使用
|
````
|
||||||
2.该页面css定义方式,只定义一个顶层class,其余样式都定义在其下,这样只要顶层class不和别的页面冲突,整个页面的样式都是唯一生效的
|
FooterToolBar.vue:fixed定位的底部，通过是否定义内部控件的属性slot="extra"决定是左浮动或是右浮动
|
||||||
````
|
HeaderNotice.vue:首页通知(如下图)
|
||||||
FooterToolBar.vue:fixed定位的底部，通过是否定义内部控件的属性slot="extra"决定是左浮动或是右浮动
|
|
||||||
HeaderNotice.vue:首页通知(如下图)
|
HeaderInfo.vue:上下文字布局（如下图）
|
||||||
|
|
||||||
HeaderInfo.vue:上下文字布局（如下图）
|
Logo.vue:首页左上侧的log图
|
||||||
|
|
||||||
Logo.vue:首页左上侧的log图
|
UserMenu.vue:首页右上侧的内容
|
||||||
|
|
||||||
UserMenu.vue:首页右上侧的内容
|
####16.trend包 趋势显示组件（如下图）
|
||||||
|
|
||||||
####16.trend包 趋势显示组件（如下图）
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -57,18 +57,6 @@ export const constantRouterMap = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/test',
|
|
||||||
component: BlankLayout,
|
|
||||||
redirect: '/test/home',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'home',
|
|
||||||
name: 'TestHome',
|
|
||||||
component: () => import('@/views/Home')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/404',
|
path: '/404',
|
||||||
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
|
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
|
||||||
|
|||||||
@ -1,162 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="home">
|
|
||||||
<div class="banner">
|
|
||||||
<h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<h2># Trend 组件 </h2>
|
|
||||||
|
|
||||||
<a-divider> 正常 </a-divider>
|
|
||||||
|
|
||||||
<a-card>
|
|
||||||
|
|
||||||
<trend flag="up" style="margin-right: 16px;">
|
|
||||||
<span slot="term">工资</span>
|
|
||||||
5%
|
|
||||||
</trend>
|
|
||||||
<trend flag="up" style="margin-right: 16px;">
|
|
||||||
<span slot="term">工作量</span>
|
|
||||||
50%
|
|
||||||
</trend>
|
|
||||||
<trend flag="down">
|
|
||||||
<span slot="term">身体状态</span>
|
|
||||||
50%
|
|
||||||
</trend>
|
|
||||||
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<a-divider> 颜色反转 </a-divider>
|
|
||||||
|
|
||||||
<a-card style="margin-bottom: 3rem">
|
|
||||||
|
|
||||||
<trend flag="up" :reverse-color="true" style="margin-right: 16px;">
|
|
||||||
<span slot="term">工资</span>
|
|
||||||
5%
|
|
||||||
</trend>
|
|
||||||
<trend flag="down" :reverse-color="true" style="margin-right: 16px;">
|
|
||||||
<span slot="term">工作量</span>
|
|
||||||
50%
|
|
||||||
</trend>
|
|
||||||
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<h2># AvatarList 组件 </h2>
|
|
||||||
|
|
||||||
<a-divider> AvatarList </a-divider>
|
|
||||||
<a-card style="margin-bottom: 3rem">
|
|
||||||
<avatar-list :max-length="3">
|
|
||||||
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
|
||||||
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
|
||||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
|
||||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
|
||||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
|
||||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
|
||||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
|
||||||
|
|
||||||
</avatar-list>
|
|
||||||
|
|
||||||
<a-divider type="vertical" style="margin: 0 16px" />
|
|
||||||
|
|
||||||
<avatar-list size="mini">
|
|
||||||
<avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
|
|
||||||
<avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
|
|
||||||
<avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
|
|
||||||
</avatar-list>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<h2># CountDown 组件 </h2>
|
|
||||||
|
|
||||||
<a-divider> CountDown </a-divider>
|
|
||||||
<a-card style="margin-bottom: 3rem">
|
|
||||||
<count-down
|
|
||||||
style="font-size: 2rem"
|
|
||||||
:target="new Date().getTime() + 3000000"
|
|
||||||
:on-end="onEndHandle">
|
|
||||||
</count-down>
|
|
||||||
|
|
||||||
<a-divider type="vertical" style="margin: 0 16px" />
|
|
||||||
|
|
||||||
<count-down
|
|
||||||
style="font-size: 2rem"
|
|
||||||
:target="new Date().getTime() + 10000"
|
|
||||||
:on-end="onEndHandle2">
|
|
||||||
</count-down>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<h2># Ellipsis 组件 </h2>
|
|
||||||
|
|
||||||
<a-divider> Ellipsis </a-divider>
|
|
||||||
<a-card style="margin-bottom: 3rem">
|
|
||||||
<ellipsis :length="100" tooltip>
|
|
||||||
There were injuries alleged in three cases in 2015, and a
|
|
||||||
fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
|
|
||||||
</ellipsis>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<h2># NumberInfo 组件 </h2>
|
|
||||||
|
|
||||||
<a-divider> NumberInfo </a-divider>
|
|
||||||
<a-card>
|
|
||||||
<number-info
|
|
||||||
:sub-title="() => { return 'Visits this week' }"
|
|
||||||
:total="12321"
|
|
||||||
status="up"
|
|
||||||
:sub-total="17.1"></number-info>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// @ is an alias to /src
|
|
||||||
|
|
||||||
import Trend from '@/components/Trend'
|
|
||||||
import AvatarList from '@/components/AvatarList'
|
|
||||||
import CountDown from '@/components/CountDown/CountDown'
|
|
||||||
import Ellipsis from '@/components/Ellipsis'
|
|
||||||
import NumberInfo from '@/components/NumberInfo'
|
|
||||||
|
|
||||||
const AvatarListItem = AvatarList.AvatarItem
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Home',
|
|
||||||
components: {
|
|
||||||
NumberInfo,
|
|
||||||
Ellipsis,
|
|
||||||
CountDown,
|
|
||||||
Trend,
|
|
||||||
AvatarList,
|
|
||||||
AvatarListItem
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
targetTime: new Date().getTime() + 3900000
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onEndHandle () {
|
|
||||||
this.$message.success('CountDown callback!!!')
|
|
||||||
},
|
|
||||||
onEndHandle2 () {
|
|
||||||
this.$notification.open({
|
|
||||||
message: 'Notification Title',
|
|
||||||
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.home {
|
|
||||||
width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 25px 0;
|
|
||||||
}
|
|
||||||
.home > .banner {
|
|
||||||
text-align: center;
|
|
||||||
padding: 25px 0;
|
|
||||||
margin: 25px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user