标签：uniApp flex color align height width 列表 font

普通列表

　　例图：

　　代码片段：

<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{
        width: 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;
            width: 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{
                width: 154rpx;
                height: 104rpx;
            }
        }
    }
    &::after{
        content: "";
        position: fixed;
        z-index: -1;
        background-color: #F2F2F2;
        top: 0;left: 0;width: 100vw;height: 100vh;
    }
}    
</style>

会出组件

标签：uniApp,flex,color,align,height,width,列表,font
来源： https://www.cnblogs.com/1748sb/p/13812965.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。