master

分支 (1)

管理

管理

master

pocket
/
jiepai_detailed.html

<!DOCTYPE html>
<html>
    <head>
        <title>Pocket</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/swiper.min.css" rel="stylesheet" type="text/css"/>
        <link href="css/common.css" rel="stylesheet" type="text/css"/>
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery.min.js" type="text/javascript"></script>

    </head>
    <body>
        <div class="top no-bg">
            <a href="" class="pull-left"><i class="fa fa-angle-left"></i></a>
            <a href="" class="pull-right"><i class="fa fa-share-alt text-lg mr-1"></i></a>
        </div>
        <div class="products-img">
            <div class="swiper-container swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/jiepai-img.jpg" alt=""/>
                    </div>
                    <div class="swiper-slide">
                        <img src="images/jiepai-img.jpg" alt=""/>
                    </div>
                </div>
                  <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--ad end-->

        <div class="p-1 mb-8">
                <div class="head pull-left">
                    <img src="images/jiepai-img.jpg" alt=""/>
                </div>
                <div class="head-title">神奇的帽子</div>
                <div class="pull-right">
                    <a href="" class="btn btn-guanzhu">+關注</a>
                </div>
                <div class="line-b clearfix"></div>
                <p>標籤：時尚/時裝/搭配 <span class="ml-5">日期：2017-04-17</span></p>
                <div class="text-con">
                    地點：澳門XXX街XXXXXXXXXX <br />
                    搭配：XXXXX上衣/XXXXXX下裝/XXXXXXX鞋子
                </div>
                <p>
                    昨天  10：26 <span class="pull-right">2478次瀏覽</span>
                </p>
            <div class="title2 mt-3"><span>相關產品</span></div>
            <ul class="p-li2 mt-1">
                <li>
                    <a href="">
                        <div class="col-xs-3 p-0">
                            <div class="item-img">
                                <img src="images/jiepai-img.jpg" alt=""/>
                            </div>
                        </div>
                        <div class="col-xs-8 ">
                            <div class="item-title"> [外套]服裝名XXXXXXX.</div>
                            <p>
                                規格：XXXXXXX. <br />
                                功效：名XXXXXXX.
                            </p>
                            <div class="item-bottom">
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <span class="ml-3">113 條點評</span>
                            </div>
                        </div>
                        <div class="col-xs-1 p-0">
                            <i class="fa fa-angle-right text-lg mt-4"></i>
                        </div>
                    </a>
                </li>
                 <li>
                    <a href="">
                        <div class="col-xs-3 p-0">
                            <div class="item-img">
                                <img src="images/jiepai-img.jpg" alt=""/>
                            </div>
                        </div>
                        <div class="col-xs-8">
                            <div class="item-title"> [外套]服裝名XXXXXXX.</div>
                            <p>
                                規格：XXXXXXX. <br />
                                功效：名XXXXXXX.
                            </p>
                            <div class="item-bottom">
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <span class="ml-3">113 條點評</span>
                            </div>
                        </div>
                        <div class="col-xs-1 p-0">
                            <i class="fa fa-angle-right text-lg mt-4"></i>
                        </div>
                    </a>
                </li>
                 <li>
                    <a href="">
                        <div class="col-xs-3 p-0">
                            <div class="item-img">
                                <img src="images/jiepai-img.jpg" alt=""/>
                            </div>
                        </div>
                        <div class="col-xs-8">
                            <div class="item-title"> [外套]服裝名XXXXXXX.</div>
                            <p>
                                規格：XXXXXXX. <br />
                                功效：名XXXXXXX.
                            </p>
                            <div class="item-bottom">
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <i class="fa fa-star text-red"></i>
                                <span class="ml-3">113 條點評</span>
                            </div>
                        </div>
                        <div class="col-xs-1 p-0">
                            <i class="fa fa-angle-right text-lg mt-4"></i>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="title mt-2"><span>評論</span></div>
            <ul class="pinlun">
               <li>
                   <div class="col-xs-2 p-0">
                       <div class="head">
                           <img src="images/jiepai-img.jpg" alt=""/>
                       </div>
                   </div>
                   <div class="col-xs-10">

                           <div class="pan" data-toggle="modal" data-target="#myModal">
                               來說兩句吧.....
                           </div>


                   </div>
               </li>
               <li>
                   <div class="col-xs-2 p-0">
                       <div class="head">
                           <img src="images/jiepai-img.jpg" alt=""/>
                       </div>
                   </div>
                   <div class="col-xs-10">
                       <div class="item-title">二次元小公舉</div>
                       <div class="item-text">超贊，好喜歡帽子你的搭配啊~~~~</div>
                       <div class="item-bottom">
                           <a href=""><i class="fa fa-thumbs-up"></i>12</a> <a data-toggle="modal" data-target="#myModal">回複</a>
                           <span class="pull-right">昨天 13：12</span>
                       </div>
                       <div class="pan">巴黎左岸：看上面的相關產品，有介紹的</div>
                   </div>
               </li>
                <li>
                   <div class="col-xs-2 p-0">
                       <div class="head">
                           <img src="images/jiepai-img.jpg" alt=""/>
                       </div>
                   </div>
                   <div class="col-xs-10">
                       <div class="item-title">二次元小公舉</div>
                       <div class="item-text">超贊，好喜歡帽子你的搭配啊~~~~</div>
                       <div class="item-bottom">
                           <a href=""><i class="fa fa-thumbs-up"></i>12</a> <a >回複</a>
                           <span class="pull-right">昨天 13：12</span>
                       </div>
                       <div class="pan">巴黎左岸等人<a href="">共2條回複></a></div>
                   </div>
               </li>
               <li>
                   <div class="col-xs-2 p-0">
                       <div class="head">
                           <img src="images/jiepai-img.jpg" alt=""/>
                       </div>
                   </div>
                   <div class="col-xs-10">
                       <div class="item-title">二次元小公舉</div>
                       <div class="item-text">超贊，好喜歡帽子你的搭配啊~~~~</div>
                       <div class="item-bottom">
                           <a href=""><i class="fa fa-thumbs-up"></i>12</a> <a >回複</a>
                           <span class="pull-right">昨天 13：12</span>
                       </div>
                   </div>
               </li>
           </ul>
            <a href="" class="more no-bg">查看全部32條評論</a>
       <div class="title"><span>相關街拍</span></div>
       <ul class="wrap">
                <li>
                    <a href="">
                        <div class="item-img"> <img src="images/jiepai-img.jpg" alt=""/></div>
                        <div class="text-con">
                            <h4>XXX街XXXX處</h4>
                            <div class="item-text">搭配：XXX上衣、XXX下裝
                                XXXX鞋子...</div>
                            <div>
                                <span><i class="fa fa-commenting-o"></i>1256</span>
                                <span><i class="fa fa-heart"></i>256</span>
                            </div>
                        </div>
                    </a>

                </li>
                <li>
                    <a href="">
                        <div class="item-img"> <img src="images/jiepai-img2.jpg" alt=""/></div>
                        <div class="text-con">
                            <h4>XXX街XXXX處</h4>
                            <div class="item-text">搭配：XXX上衣、XXX下裝
                                XXXX鞋子...</div>
                            <div>
                                <span><i class="fa fa-commenting-o"></i>1256</span>
                                <span><i class="fa fa-heart"></i>256</span>
                            </div>
                        </div>
                    </a>

                </li>
                <li>
                    <a href="">
                        <div class="item-img"> <img src="images/jiepai-img2.jpg" alt=""/></div>
                        <div class="text-con">
                            <h4>XXX街XXXX處</h4>
                            <div class="item-text">搭配：XXX上衣、XXX下裝
                                XXXX鞋子...</div>
                            <div>
                                <span><i class="fa fa-commenting-o"></i>1256</span>
                                <span><i class="fa fa-heart"></i>256</span>
                            </div>
                        </div>
                    </a>

                </li>
                 <li>
                     <a href="">
                         <div class="item-img"> <img src="images/jiepai-img.jpg" alt=""/></div>
                         <div class="text-con">
                             <h4>XXX街XXXX處</h4>
                             <div class="item-text">搭配：XXX上衣、XXX下裝
                                 XXXX鞋子...</div>
                             <div>
                                 <span><i class="fa fa-commenting-o"></i>1256</span>
                                 <span><i class="fa fa-heart"></i>256</span>
                             </div>
                         </div>
                     </a>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <a href="index.html" class="bottom-ico1 active">街拍</a>
            <a href="shiyong_ing.html" class="bottom-ico2">試用區</a>
            <a href="woshuo.html" class="bottom-ico3">我說</a>
            <a href="xunbao.html" class="bottom-ico4">尋寶</a>
            <a href="my_home.html" class="bottom-ico5">我的</a>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                      <textarea class="form-control" rows="5"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div><!-- /.modal -->

        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/swiper.min.js" type="text/javascript"></script>
        <script src="js/main.js" type="text/javascript"></script>
    </body>
</html>