zuel-itsm-3.0.2/assets/views/customform/tpl/searchknowledge.html

<!-- start: SETTINGS -->
<button ct-toggle="toggle" tooltip="知识库查询" tooltip-placement="left" target="seachknowledge" parent-active-class="active"
    class="btn btn-info">
    <i class="iconfont icon-zhishiku11"></i>
</button>
<div class="ng-scope headersize">
    知识库查询
</div>
<div class="container" style="border-top: 1px solid #c8c7cc;padding-right: 55px;">
    <div class="searchInp">
        <input type="text" ng-model="searchKeyWord" placeholder="请输入..." ng-keypress="keypressModel($event,searchKeyWord)">
        <i class="iconfont icon-fangdajing1" ng-click="openModel(searchKeyWord)"></i>
    </div>
    <div class="mainlist">
        <div class="grid">
            <div class="grid__item" ng-repeat="item in searchData">
                <div>
                    <div class="knowledgetitle">
                        <span><span class="titleLabel">事件分类：</span> {{item.category?item.category.category:''}}</span>
                        <div class="btn btn-zancun ng-binding ng-scope fr" ng-click="related(item)">引用</div>
                    </div>
                    <div class="loader"></div>
                    <div class="col-sm-12">
                        <span class="item pull-left"><span class="titleLabel">故障描述：</span> {{item.title}}</span>
                    </div>
                    <div class="col-sm-12">
                        <div class="titleLabel" ng-style="{{}}">解决方案：</div>
                        <div
                            ng-class="{'showAllDiv':(showId==item.id&&ifshow),'showOverDiv':(showId!=item.id||!ifshow)}">
                            <div ng-bind-html="item.content"></div>
                            <div ng-if="showId==item.id&&ifshow">
                                <label class="titleLabel">附件信息:</label>
                                <table style="width: 414px;" class="solutionTable">
                                    <tbody>
                                        <tr ng-repeat="attachment in attachments">
                                            <td class="hidden-xs">{{attachment.name}}</td>
                                            <td class="center">
                                                <div class="visible-md visible-lg hidden-sm hidden-xs">
                                                    <a ng-click="download(attachment.token,attachment.name)"
                                                        class="downBtn" tooltip-placement="top"
                                                        tooltip="下载"><i class="fa fa-download"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="overVis">
                    <span class="fr" ng-click="showAll(item.id)">{{(ifshow&&showId==item.id)?'收起':'展开'}}</span>
                </div>
            </div>
        </div>


        <!-- <button type="button" class="btn btn-success getin" ng-click="related(tempData)">引用</button> -->

    </div>
</div>
<style type="text/css">
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .changeRightDiv {
        transition: all 1s linear;
        position: fixed;
        top: 40px;
        left: 0px;
        width: 100%;
        height: 0px;
        /*border: 1px #d8d8d8 solid;*/
        background: white;
        overflow: hidden;
        z-index: 10;
        /*margin: 5px;*/
        /*border-radius:5px ;*/
    }

    .changeRightDiv.active {
        /*width: 100%;*/
        height: 100%;
        max-height: 460px;
        overflow-y: auto;
        padding-right: 55px;
        ;
    }

    .showDiv {
        transition: all 1s linear 1s;
        opacity: 0;
    }

    .showDiv.active {
        opacity: 1;
    }

    .mainlist {
        color: #333;
    }

    .mainlist .grid__item::before {
        background: #f9f9f9;
    }

    .searchInp {
        width: 100%;
        height: 32px;
        position: relative;
        margin-top: 10px;
        line-height: 33px;
        overflow: hidden;
    }

    .searchInp input {
        width: 100%;
        height: 100%;
    }

    .searchInp i {
        position: absolute;
        right: 6px;
        font-size: 22px;
        color: #d1d1d1;
        border-left: 1px solid #d1d1d1;
        padding-left: 6px;
    }

    .grid__item {
        width: 100%;
    }

    .knowledgetitle {
        text-align: left;
        font-size: 14px;
        height: 20px;
        line-height: 28px;
        color: #333;
        font-family: unset;
    }

    .titleLabel {
        color: #333;
        font-weight: 800;
    }

    .knowledgetitle .btn {
        height: 22px;
        line-height: 22px;
        padding: 0 12px;
        cursor: pointer;
    }

    .overVis {
        padding: 0 20px;

    }

    .overVis span {
        display: inline-block;
        width: 100%;
        text-align: right;
        color: #005395;
        border-top: 1px dashed #d1d1d1;
    }

    .showOverDiv {
        max-height: 100px;
        overflow: hidden;
        padding-bottom: 10px;
    }

    .showAllDiv {
        height: auto;
        width: 414px;
        padding-bottom: 10px;
    }

    .center {
        text-align: center !important;
    }

    .solutionTable td {
        line-height: 20px;
        color: #005395;
        text-decoration: underline;
    }
    .solutionTable .downBtn{
        color: #005395;
    }
    .solutionTable tr:hover{
        background: #fff;
    }
</style>