hy

dsk-operate-ui/src/router/index.js

@@ -122,6 +122,20 @@ export const constantRoutes = [
         meta: { title: '区域专项债详情', icon: 'user' }
       }
     ]
+  },
+	{
+	  path: '/debtProject',
+	  component: Layout,
+	  hidden: true,
+	  redirect: 'noredirect',
+	  children: [
+	    {
+	      path: '/radar/debtProject/details/:id(\\d+)',
+	      component: () => import('@/views/radar/debtProject/details'),
+	      name: 'debtProjectDetails',
+	      meta: { title: '企业专项债详情', icon: 'radar' }
+	    }
+	  ]
 	}
 ]
 

dsk-operate-ui/src/views/radar/components/debtProject/index.vue

 <template>
+	<div>
 		<div class="content">
 			<div class="content_item">
 			    <div class="label">项目名称</div>
@@ -77,6 +78,74 @@
 			</div>
 		   
 		</div>
+		<div class="bottomlist">
+			<div class="bottomlist-title">
+				  <p>共有{{total}}条</p>
+				  <p>
+					  <img src="@/assets/images/EXCEL.png" alt="">
+					  <span>导出EXCEL</span>
+				  </p>
+			</div>
+			<ul class="bottomlist-content">
+				<li class="bottomlist-list">
+					<p class="list-titel">
+						 <router-link :to="'/radar/debtProject/details/'+ 1" tag="a" class="list-titel-a">轨道交通13号线扩能提升工程</router-link>
+					</p>
+					
+					<div class="content-label">
+						<span class="list-label">江西省-南昌市</span>
+					</div>
+					
+					<div  class="list-content">
+						<p class="list-content-text">
+							<span>项目类型：</span>
+							<span>轨道交通</span>
+						</p>
+						<p class="list-content-text">
+							<span>项目总投资(亿)：</span>
+							<span>26</span>
+						</p>
+						<p class="list-content-text">
+							<span>项目资本金(亿)：</span>
+							<span>96</span>
+						</p>
+						<p class="list-content-text">
+							<span>专项债金额(亿)：</span>
+							<span>200</span>
+						</p>
+					</div>
+					<div  class="list-content">
+						<p class="list-content-text">
+							<span>项目主体：</span>
+							<span class="blue">江西合胜合招标咨询有限公司</span>
+						</p>
+						<p class="list-content-text">
+							<span>主管部门：</span>
+							<span class="blue">江西胜合招标咨询有限公司</span>
+						</p>
+						<p class="list-content-text">
+							<span>实施单位：</span>
+							<span class="blue">江西合胜合招标咨询有限公司</span>
+						</p>
+					</div>
+				</li>
+			</ul>
+			<div class="pagination clearfix"  v-show="total>0">
+				  <el-pagination
+				    background
+				    :page-size="pageSize"
+				    :current-page="page"
+				    @current-change="handleCurrentChange"
+				    layout="prev, pager, next"
+				    :total="total">
+				  </el-pagination>
+			</div>
+			
+			
+		</div>
+		
+	</div>
+	
 </template>
 
 <script>
@@ -158,7 +227,11 @@
 					},
 				],
 				projectTypeText: ['不限'],
-				arrList:[]
+				arrList:[],
+				total:6000,
+				page:1,
+				pageSize:20
+				
 				
 			}
 		},
@@ -372,6 +445,9 @@
 				}
 				// this.landMarketDto = obj
 			},
+			handleCurrentChange(val){
+				
+			}
 		}
 	}
 </script>
@@ -379,6 +455,8 @@
 <style lang="scss" scoped>
 	.content{
 	  padding: 0px 16px;
+	  
+      border-radius: 4px 4px 4px 4px;
 	   background: #FFFFFF;
 	   .content_item{
 		   padding-top: 12px;
@@ -456,5 +534,115 @@
 	   }
 		
 	}
+	.bottomlist{
+		width: 100%;
+		background-color: #FFFFFF;
+		
+         border-radius: 4px 4px 4px 4px;
+		.bottomlist-title{
+			display: flex;
+			justify-content: end;
+			align-items: center;
+			margin-top: 12px;
+			padding: 24px ;
+			border-bottom: 1px solid #EFEFEF;
+			p:first-child{
+				font-size: 12px;
+				font-weight: 400;
+				color: #3D3D3D;
+				margin-right: 10px;
+			}
+			p:last-child{
+				font-size: 14px;
+				font-weight: 400;
+				color: rgba(35,35,35,0.8);
+			}
+			img{
+				width: 18px;
+				height: 18px;
+			}
+		}
+		.bottomlist-content{
+			padding: 14px;
+			padding-bottom: 0px;
+		}
+		.bottomlist-list{
+			font-size: 14px;
+			border-bottom: 1px solid #EFEFEF;
+			padding-bottom: 14px;
+			.list-titel{
+				font-size: 16px;
+				font-weight: 700;
+				color: #3D3D3D;
+				line-height: 19px;
+				.list-titel-a{
+					text-decoration: none;
+					color:#3D3D3D;
+				}
+				a:hover, a:visited, a:link, a:active{
+					color:#3D3D3D;
+				}
+			}
+			.content-label{
+				margin-top: 7px;
+				.list-label{
+					background: #F3F3FF;
+					color: #8491E8;
+					border-radius: 1px 1px 1px 1px;
+				
+					padding: 3px 7px;
+					font-size: 12px;
 					
+				}
+			}
+			
+			
+			.list-content{
+				margin-top: 3px;
+				display: flex;
+				justify-content: start;
+				align-items: center;
+				
+				.list-content-text{
+					margin-top: 7px;
+					display: flex;
+					justify-content: start;
+					align-items: center;
+					margin-right: 27px;
+					font-size: 14px;
+					
+					span:first-child{
+						font-weight: 400;
+						color: rgba(35,35,35,0.4);
+						line-height: 15px
+					}
+					span:last-child{
+						font-weight: 400;
+						color: rgba(35,35,35,0.8);
+						line-height: 15px
+					}
+					.blue{
+						color: #0081FF !important;
+						cursor: pointer;
+						
+					}
+					
+				}
+				
+				
+			}
+			
+			
+		}
+		.bottomlist-list:hover{
+			background: #F6F9FC;
+			cursor: pointer;
+		}
+		.pagination{
+			padding: 14px ;
+		   .el-pagination{
+			   float: right;
+		   }
+		}
+	}
 </style>
\ No newline at end of file