6-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">交流论坛</h2>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ===============  breadcrumb area end =============== -->
        <div style="width:80%;margin-left:10%;margin-top:50px;">
            <el-row>
                <el-col :span="4"  >
                    <div   class=" typeitem   " style="color:#fff;">
                        全部
                    </div>
                </el-col>
                <el-col :span="4"  >
                    <div  class=" typeitem   ">
                        <span> xxxx</span>
                    </div>
                </el-col>
            </el-row>
            <br>
            <br>
            <br>

            <!--/content-inner-section-->
            <div class="row" >
                <div class="col-md-8 ">
                    <el-row>
                        <el-col :span="20">
                            <el-input     placeholder="请输入标题,昵称，内容" type="text"/>

                        </el-col>
                        <el-col :span="4">
                            <el-button icon="el-icon-search"  type="danger"  > 搜索</el-button>

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






                    <el-card   style="margin-bottom: 10px;">

                        <el-row   >
                            <el-col :span="4">
                                <img  alt="" class="txx">

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

                                <h5 class="hh">xxx </h5>
                                <p class="hh">xxx...<a style="color: blue">详情</a></p>
                                <div class="imgsdiv" >
                                    <div class="imgsitem"  > <img  > </div>
                                </div>
                                <div class="clearfix"></div>

                                <el-divider></el-divider>
                                <div class="agile-post">
                                    <span   style="color: #f40;">xxx</span> 于 xxx 发布 xxx
                                    评论 ，xxx浏览，分类xxx

                                </div>

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


                    </el-card>
                    <div class="zwsj"  >

                        <img style="width:50%" src="../../assets/img/notz.png">
                        <br>
                        <br>
                        <br>
                    </div>
                    <div class="pagination"  >

                    </div>

                    <el-card id="fatiediv">
                        <div slot="header" class="clearfix">
                            <span>发布帖子</span>
                        </div>



                    </el-card>



                </div>
                <div class="col-md-4 ">

                    <div>
                        <table style="width: 100%;text-align: center;">
                            <tr>
                                <td> <el-button style="width:90%" type="danger"  >发布帖子</el-button></td>
                                <td>
                                    <el-button   style="width: 90%" type="success" >管理帖子</el-button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <br>
                    <br>
                    <h4 >最新评论</h4>


                    <table   width="100%" style="border-bottom: 1px solid #f3f3f3;margin-bottom: 10px;margin-top: 10px;">
                        <tr>
                            <td width="60px;"> <img  class="pftx"></td>
                            <td class="hh">
                                <div   > xxx</div>

                                <p style="font-size: 12px;color: #666666;">xxx<small style="float: right;">xxxx</small></p>
                            </td>
                        </tr>
                    </table>



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


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

                </div>
                <div class="clearfix"></div>
            </div>
            <!--//content-inner-section-->

        </div>


    </div>

</template>

<style scoped>
    .sel{color: darkgreen;font-weight: bolder;}
    .imgsdiv{height: 110px; overflow: hidden;}
    .imgsdiv .imgsitem{width: 100px;height:100px;
        overflow: hidden; float: left;margin-right: 10px;background: #dddddd;text-align: center;border-radius: 5px;}
    .imgsdiv .imgsitem img{ width: 100px; height: 100px;}
    .txx{width: 90px;height: 90px;border-radius: 50%;}
    .pftx{width: 50px;height: 50px;border-radius: 50%;margin-right: 10px; }
    .agile-post{font-size: 12px;color: #666;}
    .zwsj{text-align: center;}

    .typeitem{
        width:150px;
        height:150px;
        line-height:150px;
        background-color: #f4792b;
        border-radius: 50%;
        border:3px dotted #ddd;
        margin:5px auto  ;
        text-align: center;
        cursor: pointer;
    }
    .typeitem span{  background-color: rgba(0,0,0,0.5);color: #fff; padding: 10px;font-size: 13px;}
    .typeitemsel{

        border:3px dotted #e70205;

    }
    .typeitemsel span{
        background-color: rgba(0,0,0,0.8);color: #fff; padding: 10px;

    }
</style>