服装智能制造软件平台V3.0
http://182.92.169.222/hhxy/#/user/login
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
4.8 KiB
163 lines
4.8 KiB
<template> |
|
<div class="home"> |
|
<div class="banner"> |
|
<img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png"> |
|
<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>
|
|
|