Skip to content
GitLab
"...src/main/git@ustchcs.com:gujinli1118/eladmin.git" did not exist on "784d670c54da9fdc838646383e02498d0299534c"
Commit c39752dd authored by 季圣华's avatar 季圣华
Browse files

优化加载界面

parent 6abbddea
Hide whitespace changes
Inline Side-by-side
jshERP-web/public/index.html
View file @ c39752dd
...@@ -17,7 +17,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 */
......
jshERP-web/src/components/README.md
View file @ c39752dd
####1._util包:存放自定义函数 详细见代码注释 ####1._util包:存放自定义函数 详细见代码注释
####2.AvatarList:显示头像群并支持tip，用法参考src\views\Home.vue（如下图） ####2.chart包:存放各种图表相关的组件,条形图柱形图折线图等等 具体用法参考首页
![输入图片说明](https://static.oschina.net/uploads/img/201904/12181253_O0Xi.png "在这里输入图片标题") ####3.countDown包:一个倒计时组件，用法参考home页,简单描述,该组件有3个属性,
####3.chart包:存放各种图表相关的组件,条形图柱形图折线图等等 具体用法参考首页 target(时间/毫秒数)必填，
####4.countDown包:一个倒计时组件，用法参考home页,简单描述,该组件有3个属性, format(function,该方法接收一个毫秒数的参数,用于格式化显示当前倒计时时间)非必填,
target(时间/毫秒数)必填， onEnd倒计时结束触发函数
format(function,该方法接收一个毫秒数的参数,用于格式化显示当前倒计时时间)非必填, ![输入图片说明](https://static.oschina.net/uploads/img/201904/12182046_mwqJ.png "在这里输入图片标题")
onEnd倒计时结束触发函数 ####5.dict包：数据字典专用，用法参考文件夹下readme文件
![输入图片说明](https://static.oschina.net/uploads/img/201904/12182046_mwqJ.png "在这里输入图片标题") ####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包：菜单组件，俩个，一个折叠菜单一个正常显示的菜单 ![输入图片说明](https://static.oschina.net/uploads/img/201904/12185858_uvJ5.png "在这里输入图片标题")
####11.NumberInfo:数字信息显示组件 如下图 ####12.online包：该包下封装了online表单的相关组件,用于展示表单各种控件,验证表单等等,相关用法参考readme
![输入图片说明](https://static.oschina.net/uploads/img/201904/12185858_uvJ5.png "在这里输入图片标题") ####13.setting包：该包下封装了首页风格切换等功能如下图
####12.online包：该包下封装了online表单的相关组件,用于展示表单各种控件,验证表单等等,相关用法参考readme ![输入图片说明](https://static.oschina.net/uploads/img/201904/12190520_jySG.png "在这里输入图片标题")
####13.setting包：该包下封装了首页风格切换等功能如下图 ####14.table包：一个二次封装的table组件,用于展示列表，参考readme
![输入图片说明](https://static.oschina.net/uploads/img/201904/12190520_jySG.png "在这里输入图片标题") ####15.tools包：
####14.table包：一个二次封装的table组件,用于展示列表，参考readme Breadcrumb.vue：面包屑二次封装,支持路由跳转
####15.tools包： DetailList.vue：详情展示用法参考src\views\profile\advanced\Advanced.vue(效果如下图)
Breadcrumb.vue：面包屑二次封装,支持路由跳转 ![输入图片说明](https://static.oschina.net/uploads/img/201904/12193954_Uar6.png "在这里输入图片标题")
DetailList.vue：详情展示用法参考src\views\profile\advanced\Advanced.vue(效果如下图) ````
![输入图片说明](https://static.oschina.net/uploads/img/201904/12193954_Uar6.png "在这里输入图片标题") 个人认为该页面代码有两点值得学习：
```` 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"决定是左浮动或是右浮动 ![输入图片说明](https://static.oschina.net/uploads/img/201904/12195340_fPe0.png "在这里输入图片标题")
HeaderNotice.vue:首页通知(如下图) HeaderInfo.vue:上下文字布局（如下图）
![输入图片说明](https://static.oschina.net/uploads/img/201904/12195340_fPe0.png "在这里输入图片标题") ![输入图片说明](https://static.oschina.net/uploads/img/201904/12195638_dG5o.png "在这里输入图片标题")
HeaderInfo.vue:上下文字布局（如下图） Logo.vue:首页左上侧的log图
![输入图片说明](https://static.oschina.net/uploads/img/201904/12195638_dG5o.png "在这里输入图片标题") ![输入图片说明](https://static.oschina.net/uploads/img/201904/12200908_ihv3.png "在这里输入图片标题")
Logo.vue:首页左上侧的log图 UserMenu.vue:首页右上侧的内容
![输入图片说明](https://static.oschina.net/uploads/img/201904/12200908_ihv3.png "在这里输入图片标题") ![输入图片说明](https://static.oschina.net/uploads/img/201904/12201226_laQK.png "在这里输入图片标题")
UserMenu.vue:首页右上侧的内容 ####16.trend包 趋势显示组件（如下图）
![输入图片说明](https://static.oschina.net/uploads/img/201904/12201226_laQK.png "在这里输入图片标题") ![输入图片说明](https://static.oschina.net/uploads/img/201904/12201600_Wo8K.png "在这里输入图片标题")
####16.trend包 趋势显示组件（如下图） ![corn表达式](https://oscimg.oschina.net/oscnet/661f9ac09016395f9f49286143af3241623.jpg)
![输入图片说明](https://static.oschina.net/uploads/img/201904/12201600_Wo8K.png "在这里输入图片标题")
![corn表达式](https://oscimg.oschina.net/oscnet/661f9ac09016395f9f49286143af3241623.jpg)
![corn控件添加清除按钮](https://oscimg.oschina.net/oscnet/15096e49f2e29bd829e304d56770025d03c.jpg) ![corn控件添加清除按钮](https://oscimg.oschina.net/oscnet/15096e49f2e29bd829e304d56770025d03c.jpg)
\ No newline at end of file
jshERP-web/src/config/router.config.js
View file @ c39752dd
...@@ -57,18 +57,6 @@ export const constantRouterMap = [ ...@@ -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')
......
jshERP-web/src/views/Home.vue deleted 100644 → 0
View file @ 6abbddea
<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>
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