|
|
@@ -1,28 +1,226 @@
|
|
|
-<!--手机详情页-->
|
|
|
+<!--手机列表页-->
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head lang="en">
|
|
|
<meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
|
|
|
<title></title>
|
|
|
+ <style>
|
|
|
+ .main{
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .main .container{
|
|
|
+ /*width: 1190px;*/
|
|
|
+ max-width: 640px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .main .container .header p{
|
|
|
+ text-align: left;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #6c6a6b;
|
|
|
+ }
|
|
|
+ .main .container .header div{
|
|
|
+ margin: 5px 0;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8c8c8c;
|
|
|
+ }
|
|
|
+ .main .container .header div span:first-child{
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .main .container .section .audio{
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .main .container .section .video{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .main .container .section p{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #6c6a6b;
|
|
|
+ text-indent: 2em;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .main .container .section div.readCount{
|
|
|
+ margin: 30px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #8c8c8c;
|
|
|
+ }
|
|
|
+ .main .container .section div.readCount div{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .main .container .section div.readCount div span{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .main .container .section div.readCount div span em{
|
|
|
+ color: #5f9ac6;
|
|
|
+ margin-right: 5px;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ .main .container .section div.readCount div span i{
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8c8c8c;
|
|
|
+ }
|
|
|
+ .main .container .section div.readCount p{
|
|
|
+ float: right;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .main .container .footer{
|
|
|
+ border-top: 1px solid #d7d5d6;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-header{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-header div{
|
|
|
+ position: absolute;
|
|
|
+ left: 278px;
|
|
|
+ top: -30px;
|
|
|
+ width: 90px;
|
|
|
+ height: 25px;
|
|
|
+ color: #8ca8bd;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-header div span{
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .message{
|
|
|
+ overflow: hidden ;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .message .left{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .message .right{
|
|
|
+ float: right;
|
|
|
+ width: 85%;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .img{
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 5px;
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .img img{
|
|
|
+ max-width: 70px;
|
|
|
+ max-height: 70px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .detail{
|
|
|
+ /*overflow: hidden;*/
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .detail .title{
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .detail .title span:first-child{
|
|
|
+ float: left;
|
|
|
+ color: #6c6a6b;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .detail .title span:first-child em{
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8c8c8c;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .detail .title span:last-child{
|
|
|
+ color: #8c8c8c;
|
|
|
+ font-size: 14px;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .detail .title span:last-child em{
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #5f9ac6;
|
|
|
+ padding-right: 5px;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .detail p{
|
|
|
+ text-align: left;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .detail .reply {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .pull{
|
|
|
+ margin: 40px 0;
|
|
|
+ }
|
|
|
+ .main .container .footer .footer-section .pull a{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8c8c8c;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div class="main">
|
|
|
- <div class="container">
|
|
|
- <div class="header">
|
|
|
- <p>一个轻盈、智慧、便捷的企业互联网综合服务平台。</p>
|
|
|
- <span>2017-08-16</span><span>周兵</span>
|
|
|
+<div class="main">
|
|
|
+ <div class="container">
|
|
|
+ <div class="header">
|
|
|
+ <p>一个轻盈、智慧、便捷的企业互联网综合服务平台。</p>
|
|
|
+ <div><span>2017-08-16</span><span>周兵</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <!--音频-->
|
|
|
+ <div class="audio">
|
|
|
+ <audio controls="controls">
|
|
|
+ <source src="" type="">
|
|
|
+ <source src="" type="">
|
|
|
+ 您的浏览器不支持 audio 标签。
|
|
|
+ </audio>
|
|
|
+ </div>
|
|
|
+ <!--视频-->
|
|
|
+ <div class="video">
|
|
|
+ <video controls="controls">
|
|
|
+ <source src="" type="">
|
|
|
+ <source src="" type="">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
+ <!--文本-->
|
|
|
+ <p>深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技</p>
|
|
|
+ <div class="readCount"><div><span>阅读 <em>10007</em></span><span><i class="fa fa-thumbs-up"></i><em>30</em></span></div><p>版权归优软科技所有</p></div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div class="footer-header">
|
|
|
+ <div><span>写留言</span><i class="fa fa-pencil" aria-hidden="true"></i></div>
|
|
|
</div>
|
|
|
- <div class="section">
|
|
|
- <!--音频-->
|
|
|
- <div></div>
|
|
|
- <!--视频-->
|
|
|
- <div></div>
|
|
|
- <!--文本-->
|
|
|
- <p>深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技深圳市优软科技</p>
|
|
|
+ <div class="footer-section">
|
|
|
+ <div class="message">
|
|
|
+ <div class="left">
|
|
|
+ <div class="img" >
|
|
|
+ <img src="/jpress/static/jpress/admin/image/dot.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="detail">
|
|
|
+ <div class="title">
|
|
|
+ <span>钟总 <em>昨天</em></span>
|
|
|
+ <span><i class="fa fa-thumbs-up"></i><em>30</em></span>
|
|
|
+ </div>
|
|
|
+ <p>优软科技拥有一支由优秀优软科技拥有一支由优秀优软科技拥有一支由优优软科技拥有一支由优秀优软科技拥有一支由优秀优软科技拥有一支由优秀优软科技拥有一支由优秀优软科技拥有一支由优秀优软科技拥有一支由优秀秀</p>
|
|
|
+ <div class="title reply">
|
|
|
+ <span>作者回复 <em>今天</em></span>
|
|
|
+ <span><i class="fa fa-thumbs-up"></i><em>1</em></span>
|
|
|
+ </div>
|
|
|
+ <p>谢谢！</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pull"><a href="">上拉加载更多</a></div>
|
|
|
</div>
|
|
|
- <div class="footer"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+</div>
|
|
|
</body>
|
|
|
+<script>
|
|
|
+ $('html').css('fontSize',$(window).width()/640 * 30);
|
|
|
+</script>
|
|
|
</html>
|
hangb