itsm-pc-handle/assets/views/knowledge/forum.html

<style>
    .know-text-group {
        display: inline-block;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #eeeeee;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    
    .know-text-group-div {
        display: inline-block;
        width: 130px;
        padding-left: 14px;
    }
    
    .know-text-color {
        color: #93989e;
    }
    
    .know-span {
        display: inline-block;
        text-align: center;
    }
    
    .know-num {
        width: 28px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        border-radius: 10px;
        margin-right: 10px;
        color: white;
    }
    
    .bg-yellow {
        background: #005395;
    }
    
    .bg-green {
        background: #2edbb8;
    }
    
    .bg-blue {
        background: #6f9ad4;
    }
    
    .leftBorder {
        border-left: 1px solid #eeeeee;
    }
    
    .divRight {
        float: right;
    }
    
    input[type="text"] {}
    
    .searchInput {
        border: none !important;
    }
    
    input:focus {
        box-shadow: none !important;
        border: none !important;
        background-color: white !important;
    }
    
    .know-left-div {
        width: 706px;
        /* margin-top: 15px; */
        /* display: inline-block; */
        float: left;
        margin-right: 20px;
    }
    
    .know-right-div {
        /* margin-top: 15px; */
        /* display: inline-block; */
        overflow: hidden;
    }
    
    .know-left-up-div {
        margin-bottom: 20px;
    }
    
    .know-left-down-div {
        /* margin-bottom: 20px; */
    }
    
    .know-left-div-head {
        height: 34px;
        line-height: 34px;
        background: #e9eff8;
        font-size: 16px;
        color: #606367;
        border-radius: 8px 8px 0 0;
        padding-left: 10px;
    }
    
    .know-left-div-head-span {}
    
    .mainDiv {
        border-top: 1px solid #eeeeee;
        width: 706px;
        box-sizing: border-box;
    }
    
    .mainDivLeft {
        display: inline-block;
        width: 82px;
        position: relative;
    }
    
    .mainDivLeftiImg {
        width: 50px;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        display: block;
        top: -150px;
        left: 16px;
    }
    
    .mainDivRight {
        display: inline-block;
        width: 620px;
    }
    
    .mainDivRight-1 {
        color: #6f9ad4;
        font-size: 16px;
        padding-top: 4px;
        padding-bottom: 4px;
        margin-top: 4px;
    }
    
    .mainDivRight-2 {
        color: #93989e;
        font-size: 12px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    
    .mainDivRight-3 {
        color: #606367;
        font-size: 14px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    
    .mainDivRight-4 {
        color: #93989e;
        font-size: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        border-top: 1px dashed #eeeeee;
        border-bottom: 1px dashed #eeeeee;
    }
    
    .mainDivRight-5 {
        color: #93989e;
        font-size: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .mainDivRight-6 {
        color: #93989e;
        font-size: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
        float: right;
    }
    
    .know-left-div {
        /* margin-top: 15px; */
        display: inline-block;
        box-sizing: border-box;
    }
    
    .leftDiv-1 {
        border: 1px solid #eeeeee;
        border-top: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .leftDiv-2 {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 7px;
        border-left: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
    }
    
    .leftDiv-2-group {
        border-bottom: 1px dashed #eeeeee;
    }
    
    .leftDiv-2-group:last-child {
        border-bottom: none;
    }
    
    .leftDiv-2-all {
        display: inline-block;
        /* padding-left: 7px; */
        /* padding-right: 7px; */
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 7px;
        margin-bottom: 7px;
    }
    
    .leftDiv-2-1 {
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 50%;
        color: white;
        font-size: 12px;
        text-align: center;
    }
    
    .leftDiv-2-2 {
        border-radius: 50%;
        color: #606367;
        font-size: 14px;
    }
    
    .leftDiv-2-3 {
        border-radius: 50%;
        color: #606367;
        font-size: 14px;
    }
    
    .leftDiv-2-4 {
        border-radius: 50%;
        color: #ff5d06;
        font-size: 14px;
        float: right;
    }
    
    .leftDiv-2-5 {
        border-radius: 50%;
        color: #606367;
        font-size: 12px;
    }
    
    p>img {
        height: 60px;
    }
    
    .ng-table-pager {
        text-align: center;
    }
    
    .pagination>.active>a,
    .pagination>.active>a:hover,
    .pagination>.active>span:hover,
    .pagination>.active>a:focus,
    .pagination>.active>span:focus {
        background-color: #f5f5f5;
        border: 1px solid #d1d1d1;
        color: #93989e;
    }
    
    .pagination>li>a,
    .pagination>li>span {
        color: #93989e;
        width: 40px;
    }
</style>


<div ng-controller="knowledgeForumCtrl" class="">
    <section id="page-title">
        <div class="row">
            <!-- <i class="iconfont icon-bianji pull-left"></i> -->
            <div class="col-sm-8">
                <h1 class="mainTitle">知识库交流
                    <i tooltip='知识库交流,查看知识' tooltip-placement="right" class="fa  ti-help-alt margin-left-10 fontcolor-five pointfont"></i>
                </h1>
            </div>
        </div>
    </section>
    <div class="listbote">
        <div class="list-controls clearfix">
            <div class="know-text-group">
                <div class="know-text-group-div">
                    <span class="know-span know-num bg-yellow">{{todayHits}}</span>
                    <span class="know-text-color">今日浏览数</span>
                </div>
                <div class="know-text-group-div leftBorder">
                    <span class="know-span know-num bg-green">{{lastHits}}</span>
                    <span class="know-text-color">昨日浏览数</span>
                </div>
                <div class="know-text-group-div leftBorder">
                    <span class="know-span know-num bg-blue">{{num}}</span>
                    <span class="know-text-color">知识库数量</span>
                </div>
            </div>
            <div class="know-text-group divRight">
                <!-- <input class="form-control pull-right inputcolor" style="width:132px !important;border-color: #dedede;color: #93989e;" type="text" ng-model="inspectdata.title" placeholder="搜索" /> -->
                <div class="know-text-group-div" style="width:240px;">
                    <input type="text" class="searchInput" id="input_box" ng-keyup="myKeyup($event,searchInput)" ng-model="searchInput" placeholder="搜索知识...">
                </div>
                <!-- <td width="44" height="34" id="searchSpan" ng-click="searchSolution(searchInput)">&nbsp;</td> -->
                <div class="know-text-group-div leftBorder" style="width:34px;margin-right: 10px;" ng-click="searchSolution(searchInput)">
                    <span class="iconfont icon-search" style="font-size: 12px;">
                </div>
            </div>
        </div>
        <div class="list-controls clearfix" style="margin-top: 15px;">
            <div class="know-left-div ">
                <div class="know-left-div-head">
                    <i style="font-size: 18px !important;" class="icon iconfont icon-wodexiaoxi_tiezi bluefont"></i>
                    <span>最新贴</span>
                </div>
                <table class="" ng-table="tableParams">
                    <tr ng-repeat="item in $data">
                        <td>
                            <div class="mainDiv">
                                <div class="mainDivLeft">
                                    <!-- <img src="assets/images/avatar-1.jpg" alt="" class="comment-avatar" style="display: block; float: left;width:44px;height:44px;border-radius: 50%;  margin-top: 10px;"> -->
                                    <img src="assets/images/avatar-1.jpg" alt="" class="mainDivLeftiImg">
                                </div>
                                <div class="mainDivRight">
                                    <div class="mainDivRight-1">
                                        {{item.title}}
                                    </div>
                                    <div class="mainDivRight-2">
                                        {{item.createUserName}} 于 {{item.creationTime}} 创建 | {{item.releasetime}} 发布
                                    </div>
                                    <div class="mainDivRight-3">
                                        摘要 : {{item.fileAbstract}}
                                    </div>
                                    <div class="mainDivRight-4">
                                        <!-- 最近评论 : {{item.content}} -->
                                        最近评论 : <span ng-bind-html='item.content'></span>
                                    </div>
                                    <div class="mainDivRight-5">
                                        <!-- <span ng-if="item.solutionReviewDTO.userName!='暂无回复人'">最近评论 : <span>{{item.solutionReviewDTO.userName}}</span>于 {{item.solutionReviewDTO.reviewTime}} 评论 </span> -->
                                        <span ng-if="item.solutionReviewDTO.userName!='暂无回复人'"><span>{{item.solutionReviewDTO.userName}}</span>于 {{item.solutionReviewDTO.reviewTime}} 发表评论 </span>
                                        <span ng-if="item.solutionReviewDTO.userName=='暂无回复人'"> 暂无评论！</span>
                                    </div>
                                    <div class="mainDivRight-6">
                                        <div class="know-text-group-div" style="width: 70px; cursor: pointer;" ng-click="commentshowSolution(item)">
                                            <i style="font-size: 18px !important;" class="icon iconfont icon-iconmingchengpaixu65-copy bluefont"></i>
                                            <span class="know-text-color">查看</span>
                                        </div>
                                        <div class="know-text-group-div leftBorder">
                                            <i style="font-size: 18px !important;" class="icon iconfont icon-pingfenqiaguanli yellofont"></i>
                                            <span class="know-text-color">平均评分 ( {{item.solutionTotalDTO.average}} ) </span>
                                        </div>
                                        <div class="know-text-group-div leftBorder">
                                            <i style="font-size: 18px !important;" class="icon iconfont icon-iconfontshu greenfont"></i>
                                            <span class="know-text-color">总浏览量 ( {{item.solutionTotalDTO.totalBrowse}} ) </span>
                                        </div>
                                        <div class="know-text-group-div leftBorder">
                                            <i style="font-size: 18px !important;" class="icon iconfont icon-pingluncishu printfont"></i>
                                            <span class="know-text-color">评分次数 ( {{item.solutionTotalDTO.scoreNum}} ) </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="know-right-div">
                <div class="know-left-up-div">
                    <div class="know-left-div-head">
                        <i style="font-size: 18px !important;" class="icon iconfont icon-paihang bluefont"></i>
                        <span>评分排行榜</span>
                    </div>
                    <div class="leftDiv-1">
                        <div class="stat-panel" style="background-color:white;">
                            <div class="stat-row">
                                <div class="stat-cell  padding-sm text-center">
                                    <div class="text-xs" style="margin-bottom:5px;"><span>分数图</span></div>
                                    <span jq-sparkline ng-model="topscore" ng-if="topscore" type="line" width="40%" height="80px" line-color="#8e8e93" highlight-line-color="#c2c2c5" highlight-spot-color="#CE4641" max-spot-color="#5CB85C" min-spot-color="#D9534F" spot-radius="4" fill-color="transparent"
                                        resize="true"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="leftDiv-2">
                        <div class="leftDiv-2-group " ng-repeat="s in scoreRankings">
                            <div class="leftDiv-2-all leftDiv-2-1 label-{{ clses[s.index].cls }}">
                                {{$index+1}}
                            </div>
                            <div class="leftDiv-2-all leftDiv-2-2" ng-click="findSolutionReviewByType('{{s.id}}');">
                                {{s.solutionDTO.title}}
                            </div>
                            <div class="leftDiv-2-all leftDiv-2-3">
                                创建人 : {{s.userName}} 日期 : [#{{s.approvetime}}]
                            </div>
                            <div class="leftDiv-2-all leftDiv-2-4">
                                评分 : {{s.totalScore}}
                            </div>
                            <!-- <span class="label label-{{ clses[s.index].cls }}  ticket-label">{{s.totalScore}}</span>
                            <a ng-click="findSolutionReviewByType('{{s.id}}');" data-toggle="modal" data-target="#commentSolutions" title="" class="ticket-title" class="panel-title">{{s.solutionDTO.title}}</a>
                            <span class="ticket-info">创建人:<a href="#" title="">{{s.userName}}</a>&nbsp;&nbsp;日期:<span>[#{{s.approvetime}}]</span>
                            </span> -->
                        </div>
                    </div>
                </div>
                <div class="know-left-up-div">
                    <div class="know-left-div-head">
                        <i style="font-size: 18px !important;" class="icon iconfont icon-paihang bluefont"></i>
                        <span>热度排行榜</span>
                    </div>
                    <div class="leftDiv-1">
                        <div class="stat-panel" style="background-color:white;">
                            <div class="stat-row">
                                <div class="stat-cell  padding-sm no-padding-t text-center">
                                    <div class="text-xs" style="margin-bottom: 5px;"><span style="color:white;">热度图</span></div>
                                    <!--div id="stats-sparklines-2" class="stats-sparklines" style="width: 100%"></div-->
                                    <span jq-sparkline ng-model="tophot" ng-if="tophot" type="bar" width="100%" height="80px" zeroAxis="false" barSpacing="2px" bar-color="#8e8e93"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="leftDiv-2">
                        <div class="leftDiv-2-group" ng-repeat="h in hotRankings">
                            <div class="leftDiv-2-all leftDiv-2-1 label-{{ clses[h.index].cls }}">
                                {{$index+1}}
                            </div>
                            <div class="leftDiv-2-all leftDiv-2-2" ng-click="findSolutionReviewByType('{{s.id}}');">
                                {{h.solutionDTO.title}}
                            </div>
                            <div class="leftDiv-2-all leftDiv-2-3">
                                创建人 : {{h.userName}} 日期 : [#{{h.approvetime}}]
                            </div>
                            <div class="leftDiv-2-all leftDiv-2-4">
                                热度 : {{h.totalBrowse}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>