zoukankan      html  css  js  c++  java
  • scss切页面

    html

    <div class="data-list">
        <div class="data-list-item">
            <div class="data-list-item-image">
                <img src="/Wx/YearCard/image/head.png">
            </div>
            <div class="data-list-item-content">
                <div class="data-list-item-content-title">宿迁文旅集团旅游单人年卡</div>
                <div class="data-list-item-content-sub">畅游宿迁-乐趣无穷</div>
                <div class="data-list-item-content-date">有效期至:2020-04-02</div>
                <div class="data-list-item-content-btn">查看年卡信息</div>
            </div>
        </div>
    
    </div>
    
    

    scss

    .data-list {
       px2rem(750px);
      height: auto;
    
      .data-list-item {
         px2rem(710px);
        height: auto;
        margin: 0 auto;
        margin-bottom: px2rem(80px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    
        .data-list-item-image {
          img {
             px2rem(230px);
            border-radius: px2rem(20px);
          }
        }
    
        .data-list-item-content {
          position:relative;
           px2rem(710-230-47px);
    
          .data-list-item-content-title {
            line-height: px2rem(75px);
            font-size: px2rem(34px);
            font-weight: bold;
            color: #313131;
          }
    
          .data-list-item-content-sub {
            font-size: px2rem(26px);
            color: #444444;
            margin-bottom: px2rem(20px);
          }
    
          .data-list-item-content-date {
            font-size: px2rem(26px);
            color: #ACACAC;
          }
    
          .data-list-item-content-btn {
            position: absolute;
            bottom: 0;
            right: 0;
             px2rem(210px);
            height: px2rem(56px);
            border: px2rem(2px) solid rgba(94, 202, 190, 1);
            border-radius: px2rem(28px);
            color:#5ECABE;
            font-size:px2rem(28px);
            text-align: center;
            line-height: px2rem(56px);
          }
        }
      }
    }
    
    .data-list-hide {
      display: none;
    }
    
  • 相关阅读:
    beacon帧字段结构最全总结(三)——VHT字段总结
    beacon帧字段结构最全总结(二)——HT字段总结
    [LeetCode]题53:Maximum Subarray
    [LeetCode]题15:3Sum
    dilated convolutions:扩张卷积
    python:assert
    [LeetCode]题1:two sum
    opencv3.0配置opencv_contrib
    python学习:数据类型
    python:字典嵌套列表
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/10650751.html
Copyright © 2011-2022 走看看