7-forum_django_vue论坛详情页面

 <template>
    <div>
        <!-- ===============  breadcrumb area start =============== -->
        <div class="breadcrumb-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="breadcrumb-wrap ">
                            <h2 class="hh">xxx</h2>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ===============  breadcrumb area end =============== -->
        <div class="container" >

            <el-row>
                <el-col :span="16">




                    <table  style="width: 100%;margin-top: 30px;margin-bottom: 30px;">
                        <tr>
                            <td valign="top" class="td td1 hh">
                                <img class="touxx" >
                                <br>
                                <el-tag size="mini" type="danger">作者</el-tag>
                                <br>
                                <p>xxx</p>

                            </td>
                            <td class="td hh">
                                <el-button  icon="el-icon-star-on" size="mini"   style="float:right;"> 收藏</el-button>
                                <h3>xxx</h3>
                                <br>
                                <div >xxx</div>
                                <div >
                                    视频
                                </div>

                                <div>
                                    <hr>
                                    <div class="row actions">

                                        <div class="col-sm-6">发布时间 &nbsp; &nbsp; &nbsp;xx</div>
                                        <div class="col-sm-2">浏览 &nbsp; &nbsp;xx</div>
                                        <div class="col-sm-2">评论 &nbsp; &nbsp;xxx</div>
                                        <div class="col-sm-2"><el-button   style="color: red;" type="text"><i class="el-icon-delete"></i>删除该帖</el-button></div>

                                    </div>
                                </div>

                            </td>

                        </tr>
                        <tr  >
                            <td valign="top" class="td td1 hh">
                                <img class="touxx"  >
                                <br>
                                <el-tag   size="mini" type="danger">作者</el-tag>
                                <br>
                                <p>xxx</p>

                            </td>
                            <td class="td hh">
                                <div  >xxxx</div>
                                <br>
                                <div>
                                    <hr>
                                    <div  class="row actions">

                                        <div class="col-sm-4"> &nbsp;xxx</div>
                                        <div class="col-sm-2">回复 &nbsp; &nbsp;0</div>
                                        <div class="col-sm-2"><el-button    style="color: green;" type="text"><i class="el-icon-news"></i>回复</el-button></div>
                                        <div class="col-sm-2"><el-button    type="text"><i class="el-icon-thumb"></i>点赞0</el-button></div>
                                        <div class="col-sm-2"><el-button     style="color: red;" type="text"><i class="el-icon-delete"></i>删除</el-button></div>

                                    </div>
                                </div>
                                <div  >
                                    <div  class="ritem">
                                        <p><img class="xtxx"  >
                                            <span style="color: blue">xxx</span>
                                            <el-tag   size="mini" type="danger">作者</el-tag>
                                            回复
                                            <img class="xtxx"  >
                                            <span  style="color: blue">xxx</span>
                                            <el-tag   size="mini" type="danger">作者</el-tag>
                                        </p>
                                        <div style="padding: 20px;" >xx</div>
                                        <hr>
                                        <div  class="row actions">

                                            <div class="col-sm-6">回复时间 &nbsp; &nbsp; &nbsp;xx</div>
                                            <div class="col-sm-2"><el-button   style="color: green;" type="text"><i class="el-icon-news"></i>回复</el-button></div>
                                            <div class="col-sm-2"><el-button    type="text"><i class="el-icon-thumb"></i>点赞0</el-button></div>

                                            <div class="col-sm-2"><el-button   style="color: red;" type="text"><i class="el-icon-delete"></i>删除</el-button></div>

                                        </div>
                                    </div>
                                    <div  class="ritem">
                                        <p><img class="xtxx"  >
                                            <span style="color: blue">xxxx</span>
                                            <el-tag  size="mini" type="danger">作者</el-tag>
                                            回复
                                            <img class="xtxx"  >
                                            <span  style="color: blue">xxx</span>
                                            <el-tag   size="mini" type="danger">作者</el-tag>
                                        </p>
                                        <div style="padding: 20px;" >xxx</div>
                                        <hr>
                                        <div  class="row actions">

                                            <div class="col-sm-8">回复时间 &nbsp; &nbsp; &nbsp;xxx</div>
                                            <div class="col-sm-2"><el-button    style="color: green;" type="text"><i class="el-icon-news"></i>回复</el-button></div>
                                            <div class="col-sm-2"><el-button    style="color: red;" type="text"><i class="el-icon-delete"></i>删除</el-button></div>

                                        </div>
                                    </div>
                                    <div class="zwsj" > 剩余x条数据</div>


                                </div>
                            </td>

                        </tr>
                    </table>
                    <div class="pagination"  >

                    </div>

                    <div class="all-comments-info">
                        <h5>发布评论</h5>
                        <div class="agile-info-wthree-box">


                            <div class="col-md-12 form-info">

                               <el-input></el-input>
                                <br>
                                <el-button  type="success" >发布评论</el-button>

                            </div>
                            <div class="clearfix"> </div>

                            <br>
                            <br>
                            <br>



                        </div>
                    </div>


                </el-col>
                <el-col :span="8"  >

                    <br>

                    <div style=" margin-left: 10px;">

                        <h4 >最新帖子</h4>
                        <br>

                        <el-card  >
                            <table  width="100%"  >
                                <tr>
                                    <td width="60px;"> <img   class="pftx"></td>
                                    <td class="hh">xxx<small style="float: right;">xx</small><div style="font-size: 12px;color: #666666;"  >
                                       xxx
                                    </div> </td>
                                </tr>
                            </table>
                        </el-card>





                        <p  class="zwsj"  >
                            <br>
                            <img style="width: 50%" src="../../assets/img/nopj.png">
                            <br>
                            暂无数据
                            <br>
                        </p>

                    </div>


                </el-col>
            </el-row>




        </div>

    </div>

</template>

<style scoped>
    .ritem{background: #f3f3f3;margin-bottom: 5px;padding: 10px;}
    .xtxx{width: 20px;height:20px;border-radius: 50%;margin-right: 5px;}
    .touxx{width: 70px;height: 70px;border-radius: 50%}
    .td{border: 1px solid #dddddd;padding: 20px;}
    .center{text-align: center;}
    .td1{text-align: center;background: #f3f3f3;width: 150px ;}
    .actions{width: 100%;font-size: 12px;color: #666666;line-height: 50px;}
    .zwsj{text-align: center;}
    .pftx{width: 50px;height: 50px;border-radius: 50%;margin-right: 10px; }
</style>