• uniApp 列表


     

    普通列表

      例图:

      代码片段:

    <template>
        <view class="teacher">
           <view class="teacher-list">
                 <view class="list-title">
                       <image class="image" src="https://pic.cnblogs.com/avatar/2042148/20200525143742.png" mode=""></image>
                  <view class="list-text">
                        <text class="title">主题</text>
                      <text class="content">内容</text>
                  </view>
                 </view>
              <!-- 按钮 -->
              <view class="btn">进入</view>
           </view>
        </view>
    </template>
    <script>
    </script>
    <style lang="scss" scoped>
    .teacher{
         display: flex;
         flex-direction: column;
         align-items: center;
        .teacher-list{
             650rpx;
            box-shadow: 0px 4px 14px 1px rgba(85, 85, 85, 0.08);
            background-color: #FFFFFF;
            border-radius: 10rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:30rpx;
            margin-top: 30rpx;
            .btn{
                background-color: #478FD9;
                 100rpx;height: 42rpx;
                border-radius: 20rpx;
                color: #FFFFFF;
                font-size: 20rpx;
                text-align: center;
                line-height: 42rpx;
            }
            .list-title{
                display: flex;
                align-items: center;
                .list-text{
                    display: flex;
                    flex-direction: column;
                    margin-left: 23rpx;
                    .title{
                        color: #333333;
                        font-size: 26rpx;
                        font-weight: 500;
                    }
                    .content{
                        color: #999999;
                        font-size: 20rpx;
                        margin-top: 28rpx;
                        font-weight: 400;
                    }
                }
                .image{
                     154rpx;
                    height: 104rpx;
                }
            }
        }
        &::after{
            content: "";
            position: fixed;
            z-index: -1;
            background-color: #F2F2F2;
            top: 0;left: 0; 100vw;height: 100vh;
        }
    }    
    </style>

    会出组件

    有问题联系QQ1291481728或在下方评论,会在第一时刻处理。
  • 相关阅读:
    洛谷 1339 最短路
    洛谷 1330 封锁阳光大学 图论 二分图染色
    洛谷 1262 间谍网络 Tarjan 图论
    洛谷 1373 dp 小a和uim之大逃离 良心题解
    洛谷 1972 莫队
    洛谷 2158 数论 打表 欧拉函数
    洛谷 1414 数论 分解因数 水题
    蒟蒻的省选复习(不如说是noip普及组复习)————连载中
    关于筛法
    关于整数划分的几类问题
  • 原文地址:https://www.cnblogs.com/1748sb/p/13812965.html
Copyright © 2020-2023  润新知