From c14e3278893b9dd1022aa488cee53a888c2a4c7e Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 16 Aug 2022 19:34:48 +0800
Subject: [PATCH] 表情组件优化
---
src/components/mini/box8-panal.vue | 103 +++++++++++++++++++++++----------------------------
1 files changed, 46 insertions(+), 57 deletions(-)
diff --git a/src/components/mini/box8-panal.vue b/src/components/mini/box8-panal.vue
index 0de9b25..ae9839c 100644
--- a/src/components/mini/box8-panal.vue
+++ b/src/components/mini/box8-panal.vue
@@ -1,65 +1,32 @@
<template>
- <div>
- <div class="article-meta ">
+ <div class="holdHeight">
+ <a-row type="flex" justify="center">
+ <a-col v-for="temp in [1,2,1,1,1,1]">
+ <div class="myCard" style="height: 200px;width: 220px; border-radius: 20px;">
+ <a-card :hoverable="true" size="small">
+ <template slot="cover">
+ <!-- <img class="myCardCover" alt="example" src="../../assets/mowenwei.jpg" /> -->
+ </template>
- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
- <legend>卡片面板</legend>
- </fieldset>
+ <template slot="actions" class="ant-card-actions">
+ <a-icon key="arrowDown" type="arrow-down" />
+ <a-icon key="edit" type="edit" />
+ <a-icon key="ellipsis" type="ellipsis" />
+ </template>
- <div class="layui-bg-gray" style="padding: 30px;">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 卡片式面板面板通常用于非白色背景色的主体内<br>
- 从而映衬出边框投影
- </div>
- </div>
- </div>
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 结合 layui 的栅格系统<br>
- 轻松实现响应式布局
- </div>
- </div>
- </div>
+ <a-card-meta title="这世界那么多人" description="吉他谱 莫文蔚">
+ </a-card-meta>
+ </a-card>
</div>
+ </a-col>
+
+ </a-row>
+ <a-row type="flex" justify="center">
+ <div style="position:fixed;bottom: 10px;">
+ <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
+ :defaultPageSize="10" :pageSize="pageSize" :total="total" />
</div>
-
- </div>
- <div class="blog-cell">
-
- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
- <legend>卡片面板</legend>
- </fieldset>
-
- <div class="layui-bg-gray" style="padding: 30px;">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 卡片式面板面板通常用于非白色背景色的主体内<br>
- 从而映衬出边框投影
- </div>
- </div>
- </div>
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 结合 layui 的栅格系统<br>
- 轻松实现响应式布局
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
+ </a-row>
</div>
@@ -70,6 +37,17 @@
name: "box",
data() {
return {
+ data: [],
+ loading: false,
+ busy: false,
+ size: "small",
+ total: 50,
+ pageSize: 10,
+ current: 4,
+ }
+ },
+ methods: {
+ onChange(current) {
}
}
@@ -79,5 +57,16 @@
</script>
<style lang="less">
+ .holdHeight {
+ // background-color: beige;
+ }
+
+ .myCard {
+ padding: 10px 10px;
+ }
+
+ .myCardCover {
+ object-fit: scale-down
+ }
</style>
--
Gitblit v1.9.1