Day36综合案例--极速问诊

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极速问诊</title>
    <link rel="stylesheet" href=".//iconfont/iconfont.css">
    <link rel="stylesheet" href=".//css/index.css">
</head>
<body>
    <!-- 头部 -->
     <header>
        <a href="#" class="back"><span class="iconfont icon-left"></span></a>
        <h3>极速问诊</h3>
        <a href="#" class="note">问诊记录</a>
     </header>
    <!-- banner -->
     <div class="banner">
        <img src="./assets/entry.png" alt="">
        <p><span>20s</span> 快速匹配专业医生</p>

     </div>
    <!-- 问诊类型 -->
     <div class="type">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./assets/type01.png" alt="">
                    </div>
                    <div class="txt">
                        <h4>三甲图文问诊</h4>
                        <p>三甲主治及以上级别医生</p>
                    </div>
                    <span class="iconfont icon-right"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./assets/type02.png" alt="">
                    </div>
                    <div class="txt">
                        <h4>普通图文问诊</h4>
                        <p>二甲主治及以上级别医生</p>
                    </div>
                    <span class="iconfont icon-right"></span>
                </a>
            </li>
        </ul>

     </div>




    <script src="./js/flexible.js"></script>
</body>
</html>

less:

// out: ../css/

@import "./base.less";

//定义变量
@rootSize:37.5rem;

//头部
header{
    display: flex;
    justify-content: space-between;
    padding: 0 (15 / @rootSize);
    height: (44 / @rootSize);
    // background-color: pink;
    line-height: (44/@rootSize);
    .icon-left{
        font-size: (22 / @rootSize);
    }
    h3{
        font-size: (17 / @rootSize);
    }
    .note{
        font-size: (15 / @rootSize);
        color: #2cb5a5;
    }
}

// banner
.banner{
    margin-top: (30 / @rootSize);
    margin-bottom: (34 / @rootSize);
    text-align: center;
    img{
        margin-bottom: (18 / @rootSize);
        width: (240 / @rootSize);
        height: (206 / @rootSize);
    }
    p{
        font-size: (16 / @rootSize);
        span{
            color: #16c2a3;
        }
    }
}

// 问诊类型
.type{
    padding: 0 (15 / @rootSize);
    li{
        margin-bottom: (15 / @rootSize);
        padding: 0 (0 / @rootSize);
        height: (78 / @rootSize);
        border: 1px solid #ededed;
        border-radius: (4 / @rootSize);
        a{
            display: flex;
            align-items: center;
            height: (78 / @rootSize);
            img{
                margin-right: (14 / @rootSize);
                width: (40 / @rootSize);
                height: (40 / @rootSize);
            }
            .txt{
                flex: 1;
                h4{
                    font-size: (16 / @rootSize);
                    color: #3c3e42;
                    line-height: (24 / @rootSize);
                }
                p{
                    font-size: (13 / @rootSize);
                    color: #848484;
                }
            }
        }
    }
}

image

posted @ 2025-12-21 19:30  冰涿  阅读(0)  评论(0)    收藏  举报