好家伙
大概效果如下:
总的来说效果还行,但部分区域还是比较拉胯
代码部分感觉有些过于臃肿了,
<template>
<div>
<div class="header">
<div class="column shi"><h1>Rococo</h1></div>
<div class="column qishi"></div>
<div class="column san">
<img src="./assets/tel.png" alt="">
</div>
<div class="column shiyi">
<h3>088-88888888</h3>
</div>
<div class="column san">
<img src="./assets/chinese_icon.png" alt="">
</div>
<div class="column san">
<img src="./assets/english_icon.png" alt="">
</div>
<!--input框-->
</div>
<div class="header">
<input type="text" placeholder="找医生/科室">
</div>
<!--导航栏-->
<div class="topnav">
<a href="#">首页</a>
<a href="#">医院概况</a>
<a href="#">医院动态</a>
<a href="#">专家学科</a>
<a href="#">服务指南</a>
<a href="#">医院文化</a>
<a href="#">信息工资</a>
<a href="#">互动交流</a>
</div>
<div class="row">
<!--这里放图片轮播-->
<div class="column baifenbai">
<div class="container">
<ul style="">
<li><img src="./assets/banner.png" alt=""></li>
<li><img src="./assets/banner.png" alt=""></li>
<li><img src="./assets/banner.png" alt=""></li>
</ul>
<ol style="
position: absolute;
bottom: 0;
left: 50%;
padding: 10px;
margin-left: -50px;
z-index: 999;
">
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
<!--以下是图片廊-->
<div class="column ershi"></div>
<div class="column bashi">
<div class="responsive">
<div class="img">
<a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg">
<img src="./assets/icon_jzxz.png" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">就诊需知</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
<img src="./assets/icon_jylc.png" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">就医流程</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//static.runoob.com/images/demo/demo3.jpg">
<img src="./assets/icon_zjjs.png" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">专家介绍</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
<img src="./assets/icon_ksjs.png" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">科室介绍</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
<img src="./assets/icon_ybjy.png" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">医保就医</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
<img src="./assets/icon_jktj.png" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">健康体检</div>
</div>
</div>
</div>
<!--以下是医院动态-->
<div class="column qi">
</div>
<div class="column ershiwu">
<h2>医院动态</h2>
<br>
<img src="./assets/news_pic.png" alt="莫得啦">
</div>
<div class="column ershiwu">
<br>
<br>
<ul class="b">
<a href="www.baidu.com">好家伙</a>
<br>
<li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX 11-16</li>
<br>
<li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX 11-16</li>
<br>
<li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX 11-16</li>
<br>
<li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX 11-16</li>
<br>
<li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX 11-16</li>
<br>
<li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX 11-16</li>
<br>
</ul>
</div>
<!--以下是医院公告-->
<div class="column sishisan">
<h2>医院公告</h2>
<div class="column shi">
<div class="square"><h1 class="xuhaozi">01</h1></div>
<br>
<div class="square"><h1 class="xuhaozi">02</h1></div>
<br>
<div class="square"><h1 class="xuhaozi">03</h1></div>
<br>
<div class="square"><h1 class="xuhaozi">04</h1></div>
</div>
<div class="column ershi">
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<br>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<br>
<br>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<br>
<br>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
<h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
</div>
</div>
<div class="column next">
<h2>这里塞宣传图片</h2>
<img src="./assets/xuanchuan.png" alt="莫得啦" class="photo">
<br>
<br>
</div>
<!--以下是科室介绍的四个板块-->
<div class="column qi">
</div>
<div class="column ershiyidianwu">
<div id="rectangle"></div>
<h1>科室介绍</h1>
<h2>内科</h2>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
</div>
<div class="column ershiyidianwu">
<br>
<br>
<h2>肿瘤科</h2>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
</div>
<div class="column ershiyidianwu">
<br>
<br>
<h2>外科</h2>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
</div>
<div class="column ershiyidianwu">
<br>
<br>
<h2>儿科</h2>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
<br>
<button class="button1">呼吸内科</button>
<button class="button1">呼吸内科</button>
<br>
</div>
<div class="column qi">
<a href="www.baidu.com">查看更多</a>
</div>
<!--以下是专家介绍板块-->
<div class="column next">
<a href="www.baidu.com"></a>
</div>
<div class="column qi">
</div>
<div class="column shi">
<h2>专家介绍</h2>
</div>
<div class="column qishiliu">
</div>
<div class="column qi">
<a href="www.baidu.com">查看更多</a>
</div>
<div class="column next">
</div>
<!--以下是真正的专家介绍板块-->
<div class="column qi">
</div>
<div class="column shi">
<img src="./assets/lilin.png" alt="">
</div>
<div class="column ershi">
<h3>姓名:rococo n号</h3>
<h3>科室:肿瘤科</h3>
<h3>职称:主任医师</h3>
<h3>介绍:...........</h3>
</div>
<div class="column shi">
<img src="./assets/maoxiaohui.png" alt="">
</div>
<div class="column ershi">
<h3>姓名:rococo n号</h3>
<h3>科室:肿瘤科</h3>
<h3>职称:主任医师</h3>
<h3>介绍:...........</h3>
</div>
<div class="column shi">
<img src="./assets/huangcibo.png" alt="">
</div>
<div class="column ershisan">
<h3>姓名:rococo n号</h3>
<h3>科室:肿瘤科</h3>
<h3>职称:主任医师</h3>
<h3>介绍:...........</h3>
</div>
<div class="column next">
</div>
<div class="column qi">
</div>
<div class="column shi">
<img src="./assets/caosuyan.png" alt="">
</div>
<div class="column ershi">
<h3>姓名:rococo n号</h3>
<h3>科室:肿瘤科</h3>
<h3>职称:主任医师</h3>
<h3>介绍:...........</h3>
</div>
<div class="column shi">
<img src="./assets/chenhaibo.png" alt="">
</div>
<div class="column ershi">
<h3>姓名:rococo n号</h3>
<h3>科室:肿瘤科</h3>
<h3>职称:主任医师</h3>
<h3>介绍:...........</h3>
</div>
<div class="column shi">
<img src="./assets/jack.png" alt="">
</div>
<div class="column ershisan">
<h3>姓名:rococo n号</h3>
<h3>科室:肿瘤科</h3>
<h3>职称:主任医师</h3>
<h3>介绍:...........</h3>
</div>
</div>
<div class="footer">
<h2 class="d">友情链接</h2>
<div class="topnava">
<a href="#">院长信箱</a>
<a href="#">头绪信箱</a>
<a href="#">在线调查</a>
<a href="#">地理位置</a>
<a href="#">网站地图</a>
<a href="#">网站帮助</a>
<a href="#">隐私声明</a>
</div>
<br>
<br>
<h3>地址:国防大厦111号     
电话:088-88888888     
邮箱:kefu@rococo.com     </h3>
<br>
<br>
<h3>邮编:666666        
网址:<a href="www.rococo.com">www.rococo.com</a>
   
举报热线:088-88888888     </h3>
</div>
<view-router></view-router>
</div>
</template>
400行,吓死人,真的太臃肿了.
明天去看看别人是怎么完成的,优化一下.