From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/demo/page/list/basic/index.vue | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 161 insertions(+), 0 deletions(-)
diff --git a/src/views/demo/page/list/basic/index.vue b/src/views/demo/page/list/basic/index.vue
new file mode 100644
index 0000000..26fff5b
--- /dev/null
+++ b/src/views/demo/page/list/basic/index.vue
@@ -0,0 +1,161 @@
+<template>
+ <PageWrapper :class="prefixCls" title="鏍囧噯鍒楄〃">
+ <div :class="`${prefixCls}__top`">
+ <a-row :gutter="12">
+ <a-col :span="8" :class="`${prefixCls}__top-col`">
+ <div>鎴戠殑寰呭姙</div>
+ <p>8涓换鍔�</p>
+ </a-col>
+ <a-col :span="8" :class="`${prefixCls}__top-col`">
+ <div>鏈懆浠诲姟骞冲潎澶勭悊鏃堕棿</div>
+ <p>32鍒嗛挓</p>
+ </a-col>
+ <a-col :span="8" :class="`${prefixCls}__top-col`">
+ <div>鏈懆瀹屾垚浠诲姟鏁�</div>
+ <p>24涓换鍔�</p>
+ </a-col>
+ </a-row>
+ </div>
+
+ <div :class="`${prefixCls}__content`">
+ <a-list :pagination="pagination">
+ <template v-for="item in list" :key="item.id">
+ <a-list-item class="list">
+ <a-list-item-meta>
+ <template #avatar>
+ <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
+ </template>
+ <template #title>
+ <span>{{ item.title }}</span>
+ <div class="extra" v-if="item.extra">
+ {{ item.extra }}
+ </div>
+ </template>
+ <template #description>
+ <div class="description">
+ {{ item.description }}
+ </div>
+ <div class="info">
+ <div><span>Owner</span>{{ item.author }}</div>
+ <div><span>寮�濮嬫椂闂�</span>{{ item.datetime }}</div>
+ </div>
+ <div class="progress">
+ <Progress :percent="item.percent" status="active" />
+ </div>
+ </template>
+ </a-list-item-meta>
+ </a-list-item>
+ </template>
+ </a-list>
+ </div>
+ </PageWrapper>
+</template>
+<script lang="ts">
+ import { Progress, Row, Col } from 'ant-design-vue'
+ import { defineComponent } from 'vue'
+ import Icon from '/@/components/Icon/index'
+ import { cardList } from './data'
+ import { PageWrapper } from '/@/components/Page'
+ import { List } from 'ant-design-vue'
+
+ export default defineComponent({
+ components: {
+ Icon,
+ Progress,
+ PageWrapper,
+ [List.name]: List,
+ [List.Item.name]: List.Item,
+ AListItemMeta: List.Item.Meta,
+ [Row.name]: Row,
+ [Col.name]: Col,
+ },
+ setup() {
+ return {
+ prefixCls: 'list-basic',
+ list: cardList,
+ pagination: {
+ show: true,
+ pageSize: 3,
+ },
+ }
+ },
+ })
+</script>
+<style lang="less" scoped>
+ .list-basic {
+ &__top {
+ padding: 24px;
+ text-align: center;
+ background-color: @component-background;
+
+ &-col {
+ &:not(:last-child) {
+ border-right: 1px dashed @border-color-base;
+ }
+
+ div {
+ margin-bottom: 12px;
+ font-size: 14px;
+ line-height: 22px;
+ color: @text-color;
+ }
+
+ p {
+ margin: 0;
+ font-size: 24px;
+ line-height: 32px;
+ color: @text-color;
+ }
+ }
+ }
+
+ &__content {
+ padding: 24px;
+ margin-top: 12px;
+ background-color: @component-background;
+
+ .list {
+ position: relative;
+ }
+
+ .icon {
+ font-size: 40px !important;
+ }
+
+ .extra {
+ position: absolute;
+ top: 20px;
+ right: 15px;
+ font-weight: normal;
+ color: @primary-color;
+ cursor: pointer;
+ }
+
+ .description {
+ display: inline-block;
+ width: 40%;
+ }
+
+ .info {
+ display: inline-block;
+ width: 30%;
+ text-align: center;
+
+ div {
+ display: inline-block;
+ padding: 0 20px;
+
+ span {
+ display: block;
+ }
+ }
+ }
+
+ .progress {
+ display: inline-block;
+ width: 15%;
+ vertical-align: top;
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3