vue+css实现手机端移动端医疗医院问诊app首页代码-html代码-BFW代码库

代码语言：html
代码描述：vue+css实现手机端移动端医疗医院问诊app首页代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>医疗咨询</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <style>
        @font-face {
          font-family: "iconfont"; /* Project id 2733987 */
          src: url('data:application/x-font-woff;base64,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') format('woff2'),
               url('../font/iconfont.woff') format('woff'),
               url('../font/iconfont.ttf') format('truetype');
        }
        
        .iconfont {
          font-family: "iconfont" !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        
        .icon-right:before {
          content: "\e809";
        }
        
        .icon-right1:before {
          content: "\e640";
        }
        
        .icon-scan:before {
          content: "\e6f7";
        }
        
        .icon-gouwu:before {
          content: "\e602";
        }
        
        .icon-yiliao:before {
          content: "\e642";
        }
        
        .icon-zhinanzhen:before {
          content: "\e645";
        }
        
        .icon-zixun_tianchong:before {
          content: "\e63c";
        }
        
        .icon-wodedangxuan-copy:before {
          content: "\e600";
        }
        
        .icon-chaxun:before {
          content: "\e65e";
        }
        
        .icon-icon_medicine:before {
          content: "\e61d";
        }
        
        .icon-index:before {
          content: "\e601";
        }
        
        .icon-qushuchakanshuxing2:before {
          content: "\e60d";
        }
        
        
            *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
        body{width: 100%;overflow-x: hidden;background: #ffffff;}
        img{vertical-align: middle;max-width: 100%;}
        /* 头部 */
        .top{width: 100%;height: auto;position: relative;z-index: 2;display: flex;justify-content: space-between;align-items: center;padding: .3rem .3rem;}
        .top::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 2.35rem;background: linear-gradient(to bottom,#0ecbad,#19cbb1);z-index: 1;}
        .top .search{width: 100%;margin-right: .3rem;height: .7rem;line-height: .7rem;border-radius: .7rem;background: #ffffff;position: relative;z-index: 2;display: flex;align-items: center;padding: .1rem .25rem;}
        .top .search i{margin-right: .2rem;color: #b0b0b0;font-size: .38rem;flex-shrink: 0;}
        .top .search input{font-size: .26rem;width: 100%;}
        .top i.scan{flex-shrink: 0;font-size: .42rem;color: #ffffff;position: relative;z-index: 2;}
        .top.fixed{position: fixed;width: 100%;top: 0;left: 0;padding: .1rem .3rem;background: linear-gradient(to bottom,#0ecbad,#19cbb1);z-index: 999;}
        .top.fixed::before{display: none;}
        /* 四宫格快捷导航 */
        .quic-nav{width: 100%;height: auto;padding: 0 .3rem;position: relative;z-index: 2;}
        .quic-nav ul{width: 100%;padding: .4rem 0;display: flex;justify-content: space-between;align-items: center;background: #ffffff;border-radius: .18rem;box-shadow: 0 .05rem .1rem rgba(240,240,240,.8);}
        .quic-nav ul li{width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
        .quic-nav ul li .icon{width: .72rem;height: .72rem;border-radius: .72rem;display: flex;justify-content: center;align-items: center;}
        .quic-nav ul li .icon i{font-size: .32rem;color: #ffffff;}
        .quic-nav ul li p{font-size: .24rem;color: #333;margin-top: .15rem;margin-bottom: .05rem;}
        .quic-nav ul li:nth-child(1) .icon{background: linear-gradient(#71e9c5,#43d197);}
        .quic-nav ul li:nth-child(2) .icon{background: linear-gradient(#fbc886,#f6a355);}
        .quic-nav ul li:nth-child(3) .icon{background: linear-gradient(#73e6d7,#46d1b4);}
        .quic-nav ul li:nth-child(4) .icon{background: linear-gradient(#b9cff8,#84a3f3);}
        /* 热门服务 */
        .service-hot{width: 100%;height: auto;padding: 0 .3rem;margin-top: .4rem;}
        .service-hot .title{width: 100%;height: auto;overflow: hidden;position: relative;display: flex;justify-content: space-between;align-items: center;padding-bottom: .3rem;}
        .service-hot .title span{font-size: .36rem;color: #2b2b2b;display: flex;align-items: center;}
        .service-hot .title span i{flex-shrink: 0;width: .08rem;height: .36rem;border-radius: .08rem;background: #0bcaab;margin-right: .2rem;}
        .service-hot .title a{font-size: .24rem;color: #989898;display: flex;align-items: center;}
        .service-hot .title a i{margin-left: .15rem;}
        .service-hot .items{width: 100%;display: flex;justify-content: space-between;}
        .service-hot .items .block{width: 3.3rem;height: 1.9rem;border-radius: .18rem;display: flex;flex-direction: column;justify-content: center;padding: 0 .25rem 0 .3rem;position: relative;}
        .service-hot .items .block:nth-child(1)::before{content: "";position: absolute;right: .15rem;display: block;width: .98rem;height: 100%;background: url(//repo.bfw.wiki/bfwrepo/images/hospital/icon-zj.png) center bottom .15rem no-repeat;background-size: .98rem auto;z-index: 1;}
        .service-hot .items .block:nth-child(2)::before{content: "";position: absolute;right: .15rem;display: block;width: .98rem;height: 100%;background: url(//repo.bfw.wiki/bfwrepo/images/hospital/icon-yl.png) center bottom .15rem no-repeat;background-size: .83rem auto;z-index: 1;}
        .service-hot .items .block h3{color: #ffffff;font-size: .32rem;font-weight: bold;margin-bottom: .1rem;display: flex;justify-content: space-between;align-items: center;position: relative;z-index: 2;}
        .service-hot .items .block h3 i{font-size: .36rem;}
        .service-hot .items .block p{font-size: .22rem;margin-bottom: .2rem;color: #ffffff;position: relative;z-index: 2;}
        .service-hot .items .block a{flex-shrink: 0;align-self: flex-start;font-size: .18rem;display: inline-block;padding: .02rem .2rem;border-radius: .3rem;background: #ffffff;color: #fcabb1;position: relative;z-index: 2;}
        .service-hot .items .block.red{background: linear-gradient(to right bottom,#ffbdc1,#f1747a);}
        .service-hot .items .block.purple{background: linear-gradient(to right bottom,#b4b4fe,#7574fc);}
        .service-hot .items .block.purple a{color:#a5a5ff}
        .service-hot .list{width: 100%;padding-top: .4rem;}
        .service-hot .list ul li{display: flex;justify-content: space-between;align-items: center;wid.........完整代码请登录后点击上方下载按钮下载查看