src/components/mini/box8-panal.vue

@@ -1,65 +1,28 @@
<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,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>
         </div>
         </a-col>

      </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>
      <a-pagination :showQuickJumper="true" :size="size" :default-current="current" :defaultPageSize="pageSize"
         :total="total" />

   </div>

@@ -70,7 +33,13 @@
      name: "box",
      data() {
         return {

            data: [],
            loading: false,
            busy: false,
            size: "small",
            total: 50,
            pageSize: 10,
            current: 4,
         }
      }
   }
@@ -79,5 +48,16 @@
</script>

<style lang="less">
   .holdHeight {
      // background-color: beige;
		
   }

   .myCard {
      padding: 10px 10px;
   }

   .myCardCover {
      object-fit: scale-down
   }
</style>