zhaoshangyinziV3_UI/src/views/project/boxlist.vue

<template>
  <div>
    <block v-if="type=='xmgl'">
      <div class="boxlist" v-for="(item,index) in datalist.noticeList" :key="index" v-if='datalist.noticeList.length != 0'>
        <div class="ltop flex ">
            <div class="check">
              <img src="@/assets/images/project/check.png"/>
              <!-- <img src="@/assets/images/project/ncheck.png"/> -->
            </div>
           <div style="display: flex;flex-wrap: wrap;align-items: center;">
             <div class="tit">{{item.xmmc == null?'暂无数据' : item.xmmc}}</div>
             <div class="txt">项目编号：<span>{{item.xmbh == null?'暂无数据' : item.xmbh}}</span></div>
             <div class="txt">投资方：{{item.tzf == null?'暂无数据' : item.tzf}}</div>
             <div class="txt">属地政府：{{item.sdzf == null?'暂无数据' : item.sdzf}}</div>
           </div>
            <div class="flex1"></div>
			<div @click="hunge(item)" style="cursor: pointer;">
				查看/修改
			</div>
            
        </div>
        <div class="lbox">
          <div class="lboxl">
            <div class="lbtab">
              <div class="tit">实际投资总额</div>
              <div class="txt">{{item.sjtzze == null?'暂无数据' : item.sjtzze}} 亿元</div>
            </div>
            <div class="lbtab">
              <div class="tit">固定资产投资额</div>
              <div class="txt">{{item.sjgdzctze == null?'暂无数据' : item.sjgdzctze}} 万元</div>
            </div>
        			  <div class="lbtab ">
        			    <div class="tit">投资回收周期</div>
        			    <div class="txt ">{{item.tzhszq == null?'暂无数据' : item.tzhszq}} 年</div>
        			  </div>
            <div class="lbtab isno">
              <div class="tit">项目进度</div>
              <div class="txt coa">建设中</div>
            </div>
            
          </div>
                
          <div class="rbox">
            <div class="tit">签约日期：{{item.qyrq == null?'暂无数据' : item.qyrq}}</div>
            <div class="tit">投资方法人：{{item.fddbr == null?'暂无数据' : item.fddbr}}</div>
            <div class="tit">联系方式：{{item.lxfs == null?'暂无数据' : item.lxfs}}</div>
            <div class="tit">供地面积：{{item.gdmj == null?'暂无数据' : item.gdmj}}亩</div>
            <div class="tit">租赁厂房面积：{{item.zlcf == null?'暂无数据' : item.zlcf}}平</div>
            <div class="tit">流转土地面积：{{item.lztd == null?'暂无数据' : item.lztd}}亩</div>
          </div>
        </div>
      </div>
	  <div v-if='datalist.noticeList.length == 0'>
	    <el-empty :image-size="200"></el-empty>
	  </div>
    </block>
	
	
    <block v-if="type=='xmyq'">
      <div class="boxlist" v-for="ite in 5">
        <div class="ltop flex yqtop">
            <div class="check">
              <!-- <img src="@/assets/images/project/check.png"/> -->
              <img src="@/assets/images/project/ncheck.png"/>
            </div>
           <div style="display: flex;flex-wrap: wrap;align-items: center;">
             <div class="tit">智能装备制造项目</div>
             <div class="txt">项目编号：<span>zs1000</span></div>
             <div class="txt">投资方：华能新能源科技有限公司</div>
             <div class="txt">属地政府：某某市经济开发区管委会</div>
           </div>
            <div class="flex1"></div>
            <div class="flex0">
              <div class="btna coa flexc">
                <img  src="@/assets/images/project/yqicoa.png"/>
              </div>
              <!-- 严重逾期 -->
              <!-- <div class="btna cob flexc">
                <img  src="@/assets/images/project/yqicob.png"/>
              </div> -->
            </div>
        </div>
        <div class="lbox">
          <div class="lboxl">
            <div class="lbtab">
              <div class="tit">逾期环节</div>
              <div class="txt coe">建设环节</div>
            </div>
            <div class="lbtab">
              <div class="tit">逾期天数</div>
              <div class="txt coe">6 天</div>
            </div>
            <div class="lbtab isno">
              <div class="tit">逾期触发点</div>
              <div class="txt coe">6月项目进展未上报</div>
            </div>
          </div>
          <div class="rbox">
            <div class="flex1 rboxa">
              <div class="tit">投资方联系人：王敏溪</div>
              <div class="tit">联系方式：13804235698</div>
              <div class="tit">逾期原因：因土地摘牌延迟，导致后续建设连环延误</div>
            </div>

             <!-- <el-button type="success" class="rbtns" plain>催办</el-button> -->
          </div>
        </div>
      </div>
    </block>
  </div>
</template>

<script>
import { number } from 'echarts'
  export default{
    props: {
      info: {
        type: Object,
        default: null
      },
      type: {
        type: String,
        default: ''
      },
	  datalist: {
	    type: Object,
	    default: null
	  }
    },
    data() {
      return{
      }
    },
	created() {
		console.log(8)
		console.log(this.datalist,this.type,7)
	},
	methods:{
		hunge(row){
			this.$router.push({
			  path: '/zhaoshang/add',
			  query: {
			  	'id':row.xmId,
				'bh':row.xmbh
			  }
			})
		}
	}
  }
</script>

<style lang="scss" scoped>
::v-deep {
 .el-popover{box-shadow: 0px 0px 10px 0px #D1D1D1;
 border-radius: 8px;border: none;}

}
 .boxlist{
   border-radius: 4px;margin-bottom: 17px;
   border: 1px solid #E6E6E6;
   .ltop{background: #F6FAFD;padding:13px 16px;display: flex;border-bottom: 1px solid #E6E6E6;align-items: flex-start;
      &.yqtop{background: #FFF4EF;}
      .check{width: 20px;height: 20px;margin-right: 13px;flex: 0 0 auto;
        img{width: 100%;height: 100%;}
      }
      .tit{font-weight: bold;font-size: 16px;color: #3D455B;margin-right: 53px;}
      .txt{font-size: 14px;color: #3d455b;margin-right: 49px;line-height: 20px;
        span{color:#1890ff ;}
      }
      .btna{margin-left: 28px;font-weight: bold;flex: 0 0 auto;
      font-size: 14px;line-height: 20px;
          &.coa{color: #FE960E;}
          &.cob{color: #FF6969;}
            img{width: 12px;height: 14px;margin-right: 7px;}
          }

   }
   .lbox{display: flex;align-items: center;
    .lboxl{width: 56%;flex: 0 0 auto;display: flex;align-items: center;flex-wrap: wrap;}
     .lbtab{display: flex;flex-direction: column;align-items: center;position: relative;padding: 0px 12px;box-sizing: border-box;flex: 1 0 auto;
      &::after{content: '';width: 1px;height: 44px;background: #E6E6E6;position: absolute;right: 0;top: 50%;margin-top: -22px;}
      &.isno::after{display: none;}
        .tit{font-size: 16px;color: #3D455B;margin-bottom: 6px;font-weight: bold;}
        .txt{font-size: 14px;color: #3D455B;
          &.coa{color: #1890ff;}
          &.cob{color: #00A854;}
          &.coc{color: #FF6969;}
          &.cod{color: #B4B4B4;}
          &.coe{color: #FE5A0E;}

        }
     }
     .rbox{background: #FAFAFA;min-height: 94px;flex: 1;display: flex;flex-wrap: wrap;align-items: center;padding: 15px 0;
      .tit{font-weight: 500;font-size: 12px;color: #666666;line-height: 32px;padding-left: 23px;min-width: 33.3%;box-sizing: border-box;}
      .rboxa{flex: 1;display: flex;flex-wrap: wrap;
        .tit{min-width: 50%;}
      }
      .rbtns{margin-right: 23px;background: #E9FFF4;
border-radius: 4px;
border: 1px solid #00A854;color: #00A854;padding: 0 12px;line-height: 30px;box-sizing: border-box;}
     }
   }

 }
 .tipbox{font-weight: 500;font-size: 14px;color: #FE960E;}
</style>