uniapp 快速实现简单首页布局

最新推荐文章于 2024-07-29 09:26:59 发布

盖世小可爱

最新推荐文章于 2024-07-29 09:26:59 发布

阅读量2k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/qqqnzhky/article/details/126051361

版权

小程序专栏收录该内容

9 篇文章 3 订阅

订阅专栏

本文介绍了如何在前端使用Vue的`<view>`和CSS来创建一个包含图片和点击事件的文字卡片，通过`.modules`和`.item`样式布局。CSS详细定义了图片和文字的样式，包括宽度、定位和颜色等。

摘要由CSDN通过智能技术生成

效果如图：图片加文字
在这里插入图片描述
后端获取的话只需要一个循环即可，
这里举例单个样式
一、UI代码：

 <view class="modules"> 
    <view class="item" @click="liClick('XX管理1')">
      <image class="pic" src="../../static/home_commit.png" />
      <view class="name">xx管理1</view>
    </view>
  </view>

二、css代码

.modules {
  width: 100%;
  margin-top: 32px;
  display: inline-block;
  .item {
    width: 25%;
    float: left;
    margin-bottom: 20px;
    text-align: center;
    .pic {
      width: 60px;
      height: 60px;
      background: #ffffff;
      margin: 0 auto;
    }
    .name {
      color: #333333;
      font-size: 16px;
    }
  }
  }