<style scoped> ._bg_blue{background-color: #297BEF} ._bg_org{background-color: #F16C3C !important} ._bg_gre{background-color: #32B37C} ._bg_greS{background-color:#1C9A65} ._bg_gray{background-color: #666666} ._array{display: inline-block;background-color: #999999} ._array_h{width: 35px;height: 3px;} ._array_h_left{top: 14px;left: -40px;position: absolute;} ._array_h_right{top: 14px;right: -40px;position: absolute;} ._array_w{width: 3px;height: 35px;} .tri_left{width: 0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left: 6px solid #999999;} .tri_down{width: 0;height:0;border-left:6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #999999; } .tri_right{width: 0;height:0;border-top:6px solid transparent;border-bottom: 6px solid transparent;border-right: 6px solid #999999;} ._tag{display: inline-block;border-radius: 4px;padding: 2px 4px;margin-bottom: 4px;font-size: 12px} ._inlineblock_cen{display: inline-block;text-align: center} ._text_right{text-align: right;padding-right: 50px} ._tp_b{padding: 0 20px} .height40{height: 40px;} ._feiyong{padding: 10px;flex-wrap: wrap;/*justify-content: space-between;*/display: flex;} ._feiyong>span{display: inline-block;padding: 4px 20px;color: white;font-size: 14px;border-radius: 4px;margin:0 10px 10px 0;} ._log_t_s{font-size: 12px;color: #666666} .el-popover{text-align: inherit} ._dtel{padding-top: 10px;} ._no_liucheng{padding: 20px;text-align: center} ._liu_block{display: inline-block;width:auto;margin-bottom: 20px;position: relative;} .icon-xiaotuziCduan_,.icon-xiaotuziCduan_2{position: absolute;right: -10px;top: -10px;color: #999999;} ._array_h_left .icon-xiaotuziCduan_2{position: absolute;left: -10px;top: -10px;right: initial;} .text_l{text-align: left;margin-right: 50px} .text_r{text-align: right;margin-left: 50px} ._miaoshu{display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding:6px 15px;border-radius:4px;background-color: #297BEF;color:white;font-size: 14px;min-width: 120px; text-align: center;max-width: 130px;} ._last_ml0{margin-right: 0} ._last_mr0{margin-left: 0} ._array_h_dbox{position:absolute;top: 14px;right: -5px;} ._array_h_dbox_l{right: inherit;left: -40px} ._array_h_down{width: 35px;height: 3px;position: absolute;background-color: #999999} ._array_h_down_{width: 3px;height: 20px;position: absolute;background-color: #999999} ._array_h_down_l{left: 35px} .icon-xiaotuziCduan_1{position: absolute;left: 29px;top: 10px;color: #999999;} .xiaotuziCduan_1_l{left: inherit;right: -9px;} </style> <template> <div class="clearfix" v-if="dataList"> <template v-for="(lc,li) in dataList.AuditList"> <div class="_liu_block clearfix" :class="[Math.floor((li+1)%3==0?li:(li+1)/3)%2==0?'fl text_l ':'fr text_r ']"> <span class="_array _array_h" :class="(li+1)%3!=0&&Math.floor((li+1)%3==0?li:(li+1)/3)%2!=0?'_array_h_left ':''" v-if="(li+1)%3!=0&&Math.floor((li+1)%3==0?li:(li+1)/3)%2!=0&&li!=dataList.AuditList.length-1"><span class="iconfont icon-xiaotuziCduan_2"></span></span> <el-tooltip class="dataList" effect="dark" :content="lc.contentTips" placement="top"> <span :class="lc.AuditType==3?'_bg_org':'_bg_blue'" class="_miaoshu ">{{lc.AuditDescription}} <span v-if="lc.AuditWay!=1">({{lc.AuditWay=="2"?$t('fnc.huiqian'):$t('fnc.huoqian')}})</span></span> </el-tooltip> <span v-if="(li+1)%3!=0&&Math.floor((li+1)%3==0?li:(li+1)/3)%2==0&&li!=dataList.AuditList.length-1" :class="(li+1)%3!=0&&Math.floor((li+1)%3==0?li:(li+1)/3)%2==0?'_array_h_right ':''" class="_array _array_h"><span class="iconfont icon-xiaotuziCduan_"></span></span> <div class="_array_h_dbox" v-if="li!=dataList.AuditList.length-1" :class="Math.floor((li+1)%3==0?li:(li+1)/3)%2==0?'':'_array_h_dbox_l'"> <span v-if="(li+1)%3==0" class="_array_h_down"></span> <span v-if="(li+1)%3==0" class="_array_h_down_" :class="Math.floor((li+1)%3==0?li:(li+1)/3)%2==0?'_array_h_down_l':''"></span> <span v-if="(li+1)%3==0" class="iconfont icon-xiaotuziCduan_1" :class="Math.floor((li+1)%3==0?li:(li+1)/3)%2==0?'':'xiaotuziCduan_1_l'"></span> </div> </div> </template> </div> </template> <script> export default { props:["data"], data(){ return{ dataList:{}, } },methods:{ },mounted(){ },watch: { data: { handler: function(val, oldVal) { this.dataList = val }, deep: true } },created(){ this.dataList = this.data; } } </script>