a-card，列表卡片，鼠标移入css动画效果上移

最新推荐文章于 2024-07-18 17:46:36 发布

春晓_春眠花落

最新推荐文章于 2024-07-18 17:46:36 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： css

本文链接：https://blog.csdn.net/weixin_49668076/article/details/120409187

版权

vue 专栏收录该内容

46 篇文章 7 订阅

订阅专栏

			  <a-card
                v-for="item in apiDatas"
                :key="item"
                class="listDataCard"                       
              >              
                <a-card-meta>
                  <div slot="avatar" style="text-alige:center" class="avatar">                   
                    <div class="desSpanred">{{ item.nomount }}</div>                    
                  </div>
                  <div slot="title">
                    <a-tooltip :title="item.baseName">
                      <span class="titleHead">{{ item.baseName }}</span>
                    </a-tooltip>
                  </div>
                  <template slot="description">
                    <a-tooltip :title="item.ExtendOrg">
                      <span class="descripText"> 部门：{{ item.UpdateOrgName || '--' }} </span>
                    </a-tooltip>                   
                    </div>
                  </template>
                </a-card-meta>
              </a-card>

.listDataCard {
            //单个卡片
            float: left;
            position: relative;
            width: 19%;
            height: 140px;
            margin-right: 12px;
            margin-bottom: 10px;
            margin-top: 10px;
            box-shadow: -1px 1px 20px 0px rgba(17, 95, 173, 0.15);
            border: 1px solid transparent;
            border-radius: 4px;
            transition: 0.8s;
            cursor: pointer;
            }