<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>