<div class="content">
    <i class="fa fa-arrow-left fa-1x" aria-hidden="true" style="color: #999;cursor:pointer" ng-click="goBack()">Back</i>
    <h3>Log</h3>
    <hr/>
    <div style="display:flex;flex-direction:row">
        <div>
            <div style="margin-top:5px;">Task: {{ taskId }}</div>
        </div>
        <div class="progree-parent"  style="margin-top:10px;margin-left:20px">
            <div class="progree-child" ng-show="taskStatus==0" style="width:50%"></div>
            <div class="progree-child" ng-show="taskStatus==1" style="width:100%"></div>
        </div>
        <i class="fa fa-check" aria-hidden="true" style="margin-top:10px;margin-left:5px;color: #2ecc71;" ng-show="taskStatus==1">finish</i>
        <i class="fa fa-spinner" aria-hidden="true" style="margin-top:10px;margin-left:5px;color: #2ecc71;" ng-show="taskStatus==0">runing</i>
    </div>
    <div class="box">
        <div class="line-block" ng-repeat="line in logLines track by $index">
            <span>{{ line }}</span>
        </div>
    </div>
</div>

<style>
    .box {
        width: 90%%;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
        line-height: 180%;
        margin-top: 20px;
    }

    .line-block {
        margin-left: 10px;
    }

    .content {
        height: 90%;
    }
</style>