itsm-pc-handle/assets/views/task/taskDetailed.html

<div ng-controller="taskDetailedListCtrl">
    <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="bigbox">
        <div class="col-sm-2 selectBox">
            <div class="head">
                <span class="title">年份选择：</span>
                <ui-select class="tab-mainDiv-body-content pull-left" style="width:60%" ng-model="yearData.data" theme="bootstrap" ng-change="changeYear()">
                    <ui-select-match placeholder="">
                        {{$select.selected.year}}
                    </ui-select-match>
                    <ui-select-choices repeat="item in yearList">
                        <div ng-bind-html="item.year"></div>
                    </ui-select-choices>
                </ui-select>
            </div>
            <div class="body">
                <div ng-repeat="v in monthList" ng-class="{true:'monthBg'}[$index==monthIdx]" class="month" ng-click="selectMonth(v.month,$index)">
                    {{v.month}}月
                </div>
            </div>
        </div>
        <div class="col-sm-10 excalBox">
            <div class="head">
                <button ng-click="export()">导出</button>
            </div>
            <div class="body">
                <div class="title">信息中心{{yearData.data.year}}年{{monthData}}月份工作总结</div>
                <div class="jry_table">
                    <div class="tit">
                        <div class="jry_border">序号</div>
                        <div class="jry_border">目标内容</div>
                        <div class="jry_border">开始时间</div>
                        <div class="jry_border">责任人</div>
                        <div class="jry_border">工作情况</div>
                    </div>
                    <div ng-repeat="v in exeData" class="jry_tr">
                        <div class="jry_border">{{v.item}}</div>
                        <div class="jry_border">{{v.taskDescribe}}</div>
                        <div class="jry_border">{{v.month}}</div>
                        <div class="jry_border">{{v.summary}}</div>
                        <div class="jry_borderLast" ng-bind-html="v.feedback"></div>
                    </div>
                </div>             
            </div>
        </div>
    </div>
</div>
<style>
    .selectBox .head{
        height: 50px;
        /* line-height: 50px */
        padding-top: 12px
    }
    .selectBox .head .title{
        float: left;
        width: 40%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 5px
    }
    .selectBox .body{
        height: 450px;
        border:1px rgb(234,234,234) solid;
        padding:0 10px;
        padding-top: 10px;
        background-color: white
    }
    .selectBox .body .monthBg{
        background-color: rgb(230,238,244)
    }
    .selectBox .body .month{
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
        cursor: pointer;
    }
    .selectBox .body .month:hover{
        background-color: rgb(243, 245, 247)
    }
    .excalBox .head{
        height: 50px;
        line-height: 50px
    }
    .excalBox .head button{
        width: 60px;
        height: 30px;
        line-height: 30px;
        border:1px rgb(1,84,149) solid;
        color:rgb(1,84,149);
        background-color: rgb(234,238,244);
        float: right;
        border-radius: 4px;
        margin-top: 11px
    }
    .excalBox .body{
        height: 450px;
        background-color: white;
        border:1px rgb(234,234,234) solid;
        overflow: hidden;
        overflow-y: scroll;
        padding:0 24px
    }
    .excalBox .body::-webkit-scrollbar{
        display: none
    }
    .excalBox .body .title{
        text-align: center;
        font-size: 16px;
        height: 50px;
        line-height: 50px
    }
    .excalBox .body .jry_table{
        border:2px rgb(234,234,234) solid;
        border-radius: 2px
    }
    .excalBox .body .jry_table .jry_border{
        border:1px rgb(234,234,234) solid;
        margin-left: -1px;
        margin-top: -1px;
        border-right: 0;
        display: flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap;
        height: auto;
        padding: 5px
    }
    .excalBox .body .jry_table .jry_borderLast{
        border:1px rgb(234,234,234) solid;
        margin-left: -1px;
        margin-top: -1px;
        border-right: 0;
        display: flex;
        /* align-items:center; */
        /* justify-content:center; */
        flex-wrap:wrap;
        height: auto;
        padding: 5px
    }
    .excalBox .body .jry_table .tit{
        height: 34px;
        line-height: 34px;
        display: flex
    }
    .excalBox .body .jry_table .tit div:nth-child(1){
        width: 5%;
    }
    .excalBox .body .jry_table .tit div:nth-child(2){
        width: 33%;
    }
    .excalBox .body .jry_table .tit div:nth-child(3){
        width: 15%;
    }
    .excalBox .body .jry_table .tit div:nth-child(4){
        width: 15%;
    }
    .excalBox .body .jry_table .tit div:nth-child(5){
        width: 32%;
    }
    .excalBox .body .jry_table .jry_tr{
        display: flex;
    }
    .excalBox .body .jry_table .jry_tr div:nth-child(1){
        width: 5%;
    }
    .excalBox .body .jry_table .jry_tr div:nth-child(2){
        width: 33%;
    }
    .excalBox .body .jry_table .jry_tr div:nth-child(3){
        width: 15%;
    }
    .excalBox .body .jry_table .jry_tr div:nth-child(4){
        width: 15%;
    }
    .excalBox .body .jry_table .jry_tr div:nth-child(5){
        width: 32%;
    }
    .bigbox{
        height: 550px;
        background-color: rgb(249,249,249)
    }
</style>