<template>
    <div v-loading="loading">
        <div class="content">
            <div class="content_item content_item_padding0">
                <div class="label">企业名称</div>
                <div class="content_right item_ckquery_list">
                <el-input class="ename_input" clearable placeholder="多个企业用空格隔开" v-model="keyword" >
                    <div slot="append" class="btn-search" @click="search(1)">搜索</div>
                </el-input>
                </div>
            </div>
            <div class="content_item">
                <div class="label label1" >资质条件</div>
                <div class="content_right content_item_ckquery">
                <div class="item_ckquery_list" v-for="(item,i) in aptitudeDtoList" :key="i" :class="i>0?'item_ckquery_distance':''">
                    <el-cascader :options="optionss" separator='丨' clearable :ref="i" class="content_item_list" v-model="item.codeStr" @change='optionsbtn(i)'
                    filterable :props="{
                                            checkStrictly:true,
                                            label:'name',
                                            value:'id',
                                            children:'list',
                                            expandTrigger:'hover'
                                        }" popper-class='content_item_zizi'>
                    </el-cascader>
                    <div class="ckquery_list_right" v-show="i==aptitudeDtoList.length-1" style="position: relative;">
                    <span class="item_ckquery_btn" @click="addAptitudeDtoList">
                        <i class="el-icon-plus" style="font-size:14px"></i>
                        添加资质
                    </span>

                    

                    </div>
                </div>
                </div>
            </div>
            <div class="content_item" v-if="aptitudeDtoList.length>1" style="margin-left:68px;">
                <span v-for=" (kitme,k)  in queryTypelist" :key="k">
                    <el-radio v-model="queryType" :label="kitme.key">
                    {{kitme.value}}
                    </el-radio>
                </span>
            </div>

            <div class="content_item content_item1">
                <el-button type="primary" size="small" @click="search(1)">查询</el-button>
                <el-button size="small" @click="reset()">重置</el-button>
                <el-button size="small" @click="$refs.batchImport.visible = true">批量查询</el-button>
            </div>
        </div>
        <div class="bottomlist">
            <div class="bottomlist-title">
                <div class="bottomlist-title-left">
                    <p class="title-left">
                    <span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条
                    </p>
                </div>
                <!-- <div class="title-right">
                    <p>
                    <img src="@/assets/images/EXCEL.png" alt="">
                    <span class="excel" @click="clickDialog">导出EXCEL</span>
                    </p>
                </div> -->
            </div>
            <div class="bd"></div>
            <div class="table-item-jf table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
                <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
                <div class="item-jf-titel">抱歉，没找到相关数据！</div>
                <div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
            </div>
            <template v-if="!isSkeleton&&tableData.length>0">
                <div v-for="(item,index) in tableData" :key="index" style="padding-bottom: 16px;">
                    <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
                    <div class=" table-item-jf table-item " >
                        <div class="title_box">
                            <img :src="item.logoUrl?item.logoUrl:require('@/assets/images/enterprise.png')" >
                            <router-link v-if="item.jskEid" :to="`/enterprise/${encodeStr(item.jskEid)}`" tag="a" class="name_box" v-html="item.ename"></router-link>
                            <span v-else class="name_box" v-html="item.ename" ></span>
                            <span class="float_r">符合条件资质（{{ item.size }}）<span v-if="item.size>5" class="show_more" @click="showClick(item)">查看所有 ></span></span>
                        </div>
                        <el-table :data="item.aptitudeListude" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}" v-horizontal-scroll="'hover'"
                            class="table-item1 fixed-table" border highlight-current-row>
                            <el-table-column :resizable="false" label="证书编号" fixed width="119">
                                <template slot-scope="scope">
                                    {{scope.row.serial||"--"}}
                                </template>
                            </el-table-column>
                            
                            <el-table-column :resizable="false" label="资质名称" fixed width="273">
                                <template slot-scope="scope">
                                    {{scope.row.name||"--"}}
                                </template>

                            </el-table-column>
                            <el-table-column :resizable="false" label="承包工程范围" width="415">
                                <template slot-scope="scope">
                                    {{scope.row.contractScope||"--"}}
                                </template>
                            </el-table-column>

                            
                            <el-table-column :resizable="false" label="发证日期" width="119">
                                <template slot-scope="scope">
                                    {{scope.row.issuTime||"--"}}
                                </template>
                            </el-table-column>
                            <el-table-column :resizable="false" label="有效期至" width="119">
                                <template slot-scope="scope">
                                    {{scope.row.validate||"--"}}
                                </template>
                            </el-table-column>
                            <el-table-column :resizable="false" label="发证机关" width="204">
                                <template slot-scope="scope">
                                    {{scope.row.organ||"--"}}
                                </template>
                            </el-table-column>
                            <el-table-column :resizable="false" label="经营范围" width="415">
                                <template slot-scope="scope">
                                    <el-tooltip class="item" effect="light" :content="scope.row.businessScope" placement="bottom">
                                        <span class="line_2"> {{scope.row.businessScope||"--"}}</span>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="pagination clearfix" v-show="total>0">
                    <el-pagination background :page-size="pageSize" :current-page.sync="pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </template>
        </div>
        <el-dialog title="所有符合条件资质" custom-class="show_more_dialog" :visible.sync="showMore">
            <div class=" table-item-jf table-item " >
                <div class="title_box">
                    <img src="@/assets/images/enterprise.png" >
                    <span v-if="jskEid"  @click="linkTo(`/enterprise/${encodeStr(jskEid)}`)" class="name_box" v-html="ename"></span>
                    <span v-else class="name_box" v-html="ename" ></span>
                    <span class="float_r">共有 <span style="color: #0081FF;">{{ dialogData.total }}</span> 个资质</span>
                </div>
                <el-table :data="dialogData.list" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}" v-horizontal-scroll="'hover'" class="table-item1 fixed-table" border highlight-current-row>
                    <el-table-column :resizable="false" label="证书编号" fixed width="119">
                        <template slot-scope="scope">
                            {{scope.row.serial||"--"}}
                        </template>
                    </el-table-column>

                    <el-table-column :resizable="false" label="资质名称" fixed width="273">
                        <template slot-scope="scope">
                            {{scope.row.name||"--"}}
                        </template>

                    </el-table-column>
                    <el-table-column :resizable="false" label="承包工程范围" width="415">
                        <template slot-scope="scope">
                            {{scope.row.contractScope||"--"}}
                        </template>
                    </el-table-column>


                    <el-table-column :resizable="false" label="发证日期" width="119">
                        <template slot-scope="scope">
                            {{scope.row.issuTime||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="有效期至" width="119">
                        <template slot-scope="scope">
                            {{scope.row.validate||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="发证机关" width="204">
                        <template slot-scope="scope">
                            {{scope.row.organ||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column :resizable="false" label="经营范围" width="415">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="light" :content="scope.row.businessScope" placement="bottom">
                                <span class="line_2"> {{scope.row.businessScope||"--"}}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination clearfix" v-show="dialogData.total>5">
                <el-pagination background  :current-page="pageNum1" :page-size="pageSize1" @current-change="handleCurrentChange1" layout="prev, pager, next"
                    :total="dialogData.total">
                </el-pagination>
            </div>
        </el-dialog>
        <BatchImport ref="batchImport" @loadingFn="loadingFn"></BatchImport>
        <ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>
        <el-dialog
            :visible.sync="successDialog"
            :show-close="false"
            custom-class="search_aptittude_success_dialog"
            width="384px">
            <div><img src="@/assets/images/success.png" alt=""><b>查询成功</b></div>
            <div class="text">返回列表可查看批量查询结果</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="reUpload">重新上传</el-button>
                <el-button type="primary" @click="toResult">查看结果</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import "@/assets/styles/public.scss";
import api from '@/api/enterpriseData/enterpriseData.js';
import {zjyjAptitude,enterpriseAptitude} from '@/api/supplier/assistant.js';
import skeleton from '@/views/project/projectList/component/skeleton';
import ExportDialog from "@/views/component/export-dialog"
import BatchImport from "./BatchImport"
import aptitudeCode from '@/assets/json/aptitudeCode.json';
import { encodeStr } from "@/assets/js/common.js";

export default {
    components: { skeleton,ExportDialog,BatchImport },
    data(){
        return{
            encodeStr,
            params:{},
            successDialog:false,
            loading:false,
            batchImport:false,
            ename: '',
            jskEid:'',
            aptitudeDtoList: [
                {
                    nameStr: '',
                    codeStr: [],
                    
                }
            ],
            queryTypelist: [
                {
                    key: 'or',
                    status: false,
                    value: '任意均可'
                },
                {
                    key: 'and',
                    status: true,
                    value: '同时具备'
                },
            ],
            queryType: 'or',
            optionss: [],
            dialogData:{},
            tableData: [],
            total: 0,
            pageNum: 1,
            pageNum1: 1,
            pageSize: 5,
            pageSize1: 5,
            dataEXCEL:{},
            isSkeleton: false,
            exportData:{
                title:'查城投平台',
                dialogExportVisible:false,
                forData: [
                {label: '公司名称', prop: 'companyName',slot: true,minWidth: '140'},
                {label: '区域', prop: 'province', slot: true,minWidth: '160'},
                {label: '招标数量', prop: 'biddingCount',slot: true,minWidth: '80'},
                {label: '城投拿地', prop: 'landInfoCount', slot: true,minWidth: '80'},
                {label: '供应商', prop: 'supplierCount',slot: true,minWidth: '100'},
                {label: '债券余额（亿元）', prop: 'bondBalance',minWidth: '130'},
                {label: '主体评级', prop: 'bratingSubjectLevel',minWidth: '80'},
                {label: '行政级别', prop: 'uipExecutiveLevel',minWidth: '80'},
                {label: '股东背景', prop: 'shareholderBg', slot: true,minWidth: '100'},
                {label: '股权关系', prop: 'equityRelationship', slot: true,minWidth: '100'},
                {label: '平台重要性', prop: 'platformImportance', slot: true,minWidth: '130'},
                {label: '城投业务类型', prop: 'uipBusinessType', slot: true,minWidth: '130'},
                {label: '实控人', prop: 'actualController', slot: true,minWidth: '140'},
                {label: '最新报告期', prop: 'latestReportPeriod', slot: true,minWidth: '120'},
                {label: '总资产（亿元）', prop: 'totalAssets', slot: true,minWidth: '120'},
                {label: '归母净资产（亿元）', prop: 'belongNetAssets', slot: true,minWidth: '140'},
                ],
                exportTableData:[],
                exportEXCEL:{}
            },
            showMore:false,
            keyword:"",
            params1:{},
        }
    },
    created(){
        api.aptitudeCode().then(res => {
            if (res) {
                this.optionss = res;

            } else {
                this.optionss = aptitudeCode;

            }
            }).catch(error => {
            this.optionss = aptitudeCode;
        });
        this.search(1)
    },
    methods:{
        linkTo(url){
            this.showMore = false;
            this.$router.push(url)
        },
        reUpload(){
            this.$refs.batchImport.visible = true;
            this.successDialog = false
        },
        toResult(){
            this.successDialog = false;
            this.$emit("changeActiveName")
        },
        loadingFn(flag){
            this.loading = !this.loading
            if(flag){
                this.successDialog = true
            }
        },
        search(pageNum){
            if(pageNum){
                this.pageNum = pageNum
            }
            var aptitudeDtoList = [];
            var dataList = {
                codeStr: [],
            };
            for (let i = 0; i < this.aptitudeDtoList.length; i++) {
                if (this.aptitudeDtoList[i].codeStr && this.aptitudeDtoList[i].codeStr.length > 0) {
                    dataList.codeStr.push(this.aptitudeDtoList[i].codeStr[this.aptitudeDtoList[i].codeStr.length -
                    1]);
                }
                dataList.queryType = this.queryType;
            }
            dataList.codeStr = dataList.codeStr.join(',');
            aptitudeDtoList.push(dataList);
            let params = {
                "page": {
                    "page": this.pageNum,
                    "limit": this.pageSize
                }
            }
            if(aptitudeDtoList.length>0){
                params.aptitudeQueryDto = {aptitudeDtoList:aptitudeDtoList}
            }
            this.params = params
            params.keyword = this.keyword
            zjyjAptitude(params).then(res=>{
                if(res.code==200){
                    this.tableData = res.data.list
                    this.total = res.data.total
                }
            })
        },
        showClick(item){
            this.pageNum1 = 1
            this.showMore = true;
            let params = {aptitudeQueryDto:this.params.aptitudeQueryDto};
            params.page={
                "page": this.pageNum1,
                "limit": this.pageSize1
            }
            this.ename = item.ename;
            this.jskEid = item.jskEid;
            params.eid=item.jskEid;
            this.params1 = params
            enterpriseAptitude(params).then(res=>{
                if(res.code==200){
                    this.dialogData = res.data
                }
            })

        },
        handleCurrentChange(pageNum) {
            if(pageNum*this.pageSize>10000){
                this.$message.warning("数据达上限")
                this.pageNum = 10000/this.pageSize
            }else{
                this.pageNum = pageNum;
            }
            this.search()

        },
        handleCurrentChange1(pageNum) {
            this.pageNum1 = pageNum;
            this.params1.page.page = pageNum
            enterpriseAptitude(this.params1).then(res=>{
                if(res.code==200){
                    this.dialogData = res.data
                }
            })
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.search(1);
        },
        reloadPage() {
            this.pageFlag = false;
            this.$nextTick(() => {
                this.pageFlag = true;
            });
        },
        optionsbtn(i) {
            this.$refs[i] && this.$refs[i][0].toggleDropDownVisible(false);
            var _this = this;
            //延迟500毫秒执行
            if (this.$refs[i]) {
                setTimeout(function () {
                _this.aptitudeDtoList[i].nameStr = _this.$refs[i][0].$refs.input.$options.propsData.value;
                }, 100);
                console.log(_this.aptitudeDtoList)
            }
        },
        addAptitudeDtoList(){
            var n = 0;
            for (let i = 0; i < this.aptitudeDtoList.length; i++) {
                if (!this.aptitudeDtoList[i].nameStr) {
                n++;
                }
            }
            if (n > 0) {
                this.$message.warning("请选择资质条件后，增加资质！");
            } else {
                if(this.aptitudeDtoList.length<6){
                    this.aptitudeDtoList.push({
                        nameStr: '',
                        codeStr: [],
                    });
                }else{
                    this.$message.warning("最多可添加6组资质条！");
                }
            }
        },
        reset(){
            Object.assign(this.$data, this.$options.data()); //重置data
            api.aptitudeCode().then(res => {
                if (res) {
                this.optionss = res;

                } else {
                this.optionss = aptitudeCode;

                }
            }).catch(error => {
                this.optionss = aptitudeCode;
            });
            this.search(1)
        },
        clickDialog(){
        this.exportData.dialogExportVisible=true;
        },
        clickEXCEL(value,title) {
        if(this.tableData.length === 0){
            this.$message.error('当前信息列表数据为空，请重新筛选数据');
            return
        }
        if(value > 2000){
            return
        }
        this.dataEXCEL.exportExeclName=title;
        if(value){
            this.dataEXCEL.pageSize=value
        }else {
            this.dataEXCEL.pageSize=2000;
        }
        api.uipSerachExport(this.dataEXCEL).then(res => {
            if(res.code === 200){
            this.exportData.exportEXCEL=true;
            }else {
            this.$message.error(res.msg);
            }
        })
        },
        cancel(){
            this.exportData.dialogExportVisible=false;
            this.exportData.exportEXCEL={}
        },
    }
}
</script>
<style lang="scss">
.el-tooltip__popper{
        margin: 30px;
    }
</style>
<style lang="scss" scoped> 
    
    ::v-deep .search_aptittude_success_dialog{
        border-radius: 4px;
        .el-dialog__header{
            display: none;
        }
        .el-dialog__body{
            padding: 20px;
        }
        .el-dialog__footer{
            padding-top: 4px;
        }
        img{
            width: 24px;
            height: 24px;
            margin-right: 12px;
        }
        b{
            color: #232323;
            font-size: 16px;
        }
        .text{
            margin-left: 36px;
        }
        .el-button{
            border-radius: 2px;
        }
        .el-button--default{
            color:#232323;
        }
    }
    .content {
        padding: 0px 16px;
        padding-top: 16px;
        border-radius: 4px 4px 4px 4px;
        background: #ffffff;
        ::v-deep .el-input .el-input__inner{
            height: 32px;
            line-height: 32px;
        }
        ::v-deep .el-radio__label {
                    margin-left: 0px;
                    padding-left: 4px;
                    margin-right: 24px;
                }
        .content_item {
            padding-top: 20px;
            display: flex;
            align-items: center;
            .label {
            width: 68px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(35, 35, 35, 0.8);
            }
            .label1{
                align-self: baseline;
                display: inline-block;
                height: 32px;
                line-height: 32px;
            }
            .content_right {
                .ename_input {
                    width: 405px;

                    margin-right: 20px;
                }
                .el-input-group {
                    display: flex;
                    align-items: center;
                }
                ::v-deep .el-input-group__append {
                    padding: 0px;
                    line-height: 32px;
                    font-weight: 400;
                    color: #0081ff;
                    height: 32px;
                    width: 80px;
                    background: #f5f5f5;
                    border-radius: 0px 0px 0px 0px;
                    text-align: center;
                    cursor: pointer;
                }
                
            }

            .item_ckquery_list {
            display: flex;
            align-items: center;
            .qualifications-tab {
                margin-right: 4px;
                border: 1px solid #e0e0e0;
                padding: 2px 3px;
                border-radius: 2px;
                height: 32px;
                margin-top: 1px;
                span {
                background: #fff;
                display: inline-block;
                cursor: pointer;
                float: left;
                border-radius: 2px;
                padding: 3px 8px;
                margin-top: 0.5px;
                }
                .action {
                color: #ffffff;
                background: #0081ff;
                }
            }

            ::v-deep .content_item_list {
                width: 405px;
                height: 32px;
                line-height: 32px;
            }
            .ckquery_list_right {
                width: 670px;
            }
            }

            .item_ckquery_list .el-input__icon {
            position: relative;
            top: 1px;
            }
            .ckquery_list_right {
                width: 405px;
                top: 1px;
                .item_ckquery_btn{
                    height: 32px;
                    line-height: 32px;
                    margin-left: 12px;
                    top: 1px;
                    border-color: #DCDFE6;
                    color: rgba(35, 35, 35, 0.8);
                    &:hover{
                        color: #ffffff;
                    }
                }
            }
            .register_count_ipt {
            margin-left: 0px;
            }
            .register_count_ipt .el-input__inner {
            width: 174px;
            }
            ::v-deep .el-input-group__prepend {
            padding: 0 8px;
            }
            .content-projecttype {
            display: flex;
            align-items: center;
            justify-content: center;
            .projecttype {
                font-weight: 400;
                color: #232323;
                padding: 1px 5px;
                margin-right: 4px;
                cursor: pointer;
                border-radius: 3px 3px 3px 3px;
                font-size: 14px;
            }
            .projecttype:first-child {
                padding-left: 0px;
            }
            .projecttype:hover {
                background: #f3f4f5;
                padding: 1px 5px;
            }
            .activetype {
                background: #f3f4f5;
                padding: 1px 5px !important;
            }
            }
        }
        .content_item1{
            margin-top: 16px;
            padding: 16px 0;
            border-top: 1px solid #EEEEEE;
            padding-left: 64px;
            .search-new{
                padding-bottom: 16px;
                span{
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    line-height: 32px;
                    cursor: pointer;
                    border-radius: 4px;
                    border: 1px solid #D4D4D4;
                    opacity: 1;
                    margin-right: 12px;
                }
            }
        }
        .content_item_padding0 {
            padding: 0;
        }
        
    }
    .bottomlist {
        width: 100%;
        background-color: #ffffff;

        border-radius: 4px 4px 4px 4px;
        .bottomlist-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding: 16px;

            .title-right {
            display: flex;
            align-items: center;
            p:last-child {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-weight: 400;
                color: rgba(35, 35, 35, 0.8);
            }
            img {
                width: 18px;
                height: 18px;
            }
            .excel {
                cursor: pointer;
            }
            }
        }
        .bd{
            border-top: 1px solid #EEEEEE;
            margin: 0 16px 16px;
        }
        .bottomlist-title-left {
            display: inline-flex;
            align-items: center;
            .title-left {
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            font-weight: 400;
            color: #3d3d3d;
            }
        }
        .bottomlist-content {
            padding-bottom: 0px;
        }

        .table-item-jf {
            padding: 0px 16px;
            .list-titel-a {
            color: #0081ff;
            }
            ::v-deep .el-table--border .el-table__cell:first-child .cell {
            padding: 0px 8px;
            padding-left: 12px;
            font-size: 12px;
            font-weight: 400;
            }
            ::v-deep .el-table th.el-table__cell > .cell {
            padding: 0px 8px;
            padding-left: 12px;
            font-size: 12px;
            font-weight: 400;
            }
            ::v-deep .el-table th.el-table__cell.is-leaf,
            ::v-deep .el-table td.el-table__cell {
            border-bottom: 1px solid #e6eaf1;
            }
            ::v-deep .el-table--border .el-table__cell {
            border-right: 1px solid #e6eaf1;
            }
            ::v-deep.el-table__fixed::before {
            height: 0;
            }
           

            .el-table {
                th,
                td {
                    .cell {
                    font-size: 12px;
                    }
                }
            }
            .title_box{
                font-size: 14px;
                color: #232323;
                margin-bottom: 12px;
                .name_box{
                    font-size: 16px;
                    font-weight: 700;
                    color: #232323;
                    margin-bottom: 12px;
                }
                img{
                    width: 28px;
                    height: 28px;
                    margin-right: 12px;
                }
                .float_r{
                    float:right;
                    .show_more{
                        cursor: pointer;
                        color:#0081FF;
                        margin-left: 8px;
                    }
                }
            }
        }
        .table-item1 {
            ::v-deep .el-table__body-wrapper {
            color: #232323;
            }
        }
        .fixed-table {
            overflow: initial;

            ::v-deep .el-table__header-wrapper {
            position: sticky;
            top: 56px;
            z-index: 9;
            }
            ::v-deep .el-table__fixed-header-wrapper {
            position: sticky;
            z-index: 9;
            top: 56px;
            }
            ::v-deep .el-table__fixed {
            overflow-x: clip;
            overflow-y: clip;
            }
        }
        .pagination {
            padding: 14px;
            .el-pagination {
            float: right;
            }
        }
    }
    .line_2{
        overflow:hidden;
        text-overflow:ellipsis;
        line-clamp:2; 
        display:-webkit-box;
        text-overflow:-o-ellipsis-lastline;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }
    ::v-deep .show_more_dialog{
        border-radius: 4px;
        width: 900px;
        .el-dialog__header{
            font-size: 16px;
            color:#232323;
            font-weight:700;
        }
        .el-dialog__body{
            border-top: 1px solid #E5E6EB;
            padding: 20px 20px 56px;
        }
        .title_box{
            font-size: 14px;
            color: #232323;
            margin-bottom: 20px;
            height: 28px;
            line-height: 28px;
            .name_box{
                font-size: 16px;
                color: #232323;
                margin-bottom: 12px;
            }
            img{
                width: 28px;
                height: 28px;
                margin-right: 12px;
            }
            .float_r{
                float:right;
                .show_more{
                    cursor: pointer;
                    color:#0081FF;
                    margin-left: 8px;
                }
            }
        }
        .pagination{
            float:right;
            margin-top: 12px;
            margin-right: -10px;
        }   
    }
</style>