feat: add basic-list page

陈小婷
1 parent e8ccdc7f
Showing 4 changed files with 179 additions and 0 deletions
src/router/menus/modules/demo/page.ts
src/router/routes/modules/demo/page.ts
src/views/demo/page/list/basic/data.tsx
src/views/demo/page/list/basic/index.vue
@@ -106,6 +106,10 @@ const menu: MenuModule = {
         },
         children: [
           {
+            path: 'basic',
+            name: '标准列表',
+          },
+          {
             path: 'card',
             name: 'routes.demo.page.listCard',
           },
@@ -219,6 +219,14 @@ const page: AppRouteModule = {
       },
       children: [
         {
+          path: 'basic',
+          name: 'ListBasicPage',
+          component: () => import('/@/views/demo/page/list/basic/index.vue'),
+          meta: {
+            title: '标准列表',
+          },
+        },
+        {
           path: 'card',
           name: 'ListCardPage',
           component: () => import('/@/views/demo/page/list/card/index.vue'),
+export const cardList = (() => {
+  const result: any[] = [];
+  for (let i = 0; i < 6; i++) {
+    result.push({
+      id: i,
+      title: 'Vben Admin',
+      description: '基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统',
+      datetime: '2020-11-26 17:39',
+      extra: '编辑',
+      icon: 'logos:vue',
+      color: '#1890ff',
+      author: 'Vben',
+      percent: 20 * (i + 1),
+    });
+  }
+  return result;
+})();
+<template>
+  <div :class="prefixCls">
+    <a-page-header title="标准列表" :ghost="false" />
+    <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>
+  </div>
+</template>
+<script lang="ts">
+  import { Progress } from 'ant-design-vue';
+  import { defineComponent } from 'vue';
+  import Icon from '/@/components/Icon/index';
+  import { cardList } from './data';
+
+  export default defineComponent({
+    components: { Icon, Progress },
+    setup() {
+      return {
+        prefixCls: 'list-basic',
+        list: cardList,
+        pagination: {
+          show: true,
+          pageSize: 3,
+        },
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .list-basic {
+    &__top {
+      padding: 24px;
+      margin: 24px 24px 0 24px;
+      text-align: center;
+      background: #fff;
+
+      &-col {
+        &:not(:last-child) {
+          border-right: 1px dashed rgba(206, 206, 206, 0.4);
+        }
+
+        div {
+          margin-bottom: 12px;
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.45);
+        }
+
+        p {
+          margin: 0;
+          font-size: 24px;
+          line-height: 32px;
+          color: rgba(0, 0, 0, 0.85);
+        }
+      }
+    }
+
+    &__content {
+      padding: 24px;
+      margin: 12px 24px;
+      background: #fff;
+
+      .list {
+        position: relative;
+      }
+
+      .icon {
+        font-size: 40px !important;
+      }
+
+      .extra {
+        position: absolute;
+        top: 20px;
+        right: 15px;
+        font-weight: normal;
+        color: #1890ff;
+        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>