修改HOME

src/views/Home.vue

@@ -2,10 +2,45 @@
   <div class="home">
     <div>项目管理</div>
     <router-view></router-view>
-
+    <div id="" class="tableBar">
+		<table cellspacing="" cellpadding="">
+			<tr>
+				<th>项目名称</th>
+				<th>合同额（万）</th>
+				<th>重要程度</th>
+				<th>项目分类</th>
+				<th>项目类型</th>
+				<th>项目进度</th>
+				<th>操作</th>
+			</tr>
+			<tr v-for="item in tableData.list">
+				<td style="color: #409EFF;">{{item.name}}</td>
+				<td>{{item.price + '万'}}</td>
+				<td>{{item.important}}</td>
+				<td>{{item.classification}}</td>
+				<td>{{item.type}}</td>
+				<td>
+					<el-progress :text-inside="true" :stroke-width="18" :status="item.schedule === 100 ? 'success' : ''"
+						:percentage="item.schedule"></el-progress>
+				</td>
+				<td><button type="button">结项</button></td>
+			</tr>
+		</table>
+		<!-- 分页 -->
+		<el-pagination
+		    @current-change="handleCurrentChange" 
+			@size-change="handleSizeChange"
+			:current-page="currentPage"
+		    :page-sizes="[5, 10, 15, 20]"
+		    :page-size="tableData.perPage"
+		    layout="total, sizes, prev, pager, next, jumper"
+		    :total="12"
+			style="float: right;margin-top: 20px;">
+		</el-pagination>
+	  </div>
   </div>
-
 </template>
+
 <script setup>
 </script>
 <script>
@@ -16,26 +51,150 @@ import request from "@/utils/request";
 
 export default {
   name: 'Home',
+  props: ['tableData'],
   components: {
 
   },
   data() {
     return {
-
+		tableData: {
+			count: 100,
+			currentPage: 1,
+			perPage: 10,
+			list: [{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '外包项目',
+					type: '工作量结算类',
+					schedule: 0
+				},
+				{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 50
+				},
+				{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 100
+				},
+				{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 100
+				},
+				{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 100
+				},
+				{
+					name: '教育电商项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 100
+				},
+				{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 100
+				},
+				{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 100
+				},
+				{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 100
+				},
+				{
+					name: 'OTC研发项目',
+					price: 100,
+					important: '非A类',
+					classification: '研发项目',
+					type: '纯研发类',
+					schedule: 100
+				}
+			]
+		}
     }
   },
   mounted() {
 
   },
   methods: {
-
+	// 选择一页显示多少条数据
+	handleSizeChange(val){
+		
+	},
+	// 选择当前的是第几页
+	handleCurrentChange(val){
+		
+	},
   }
 }
 </script>
 <style>
-.home {
-  height: 100%;
-  max-height: 100%;
-}
+  .home {
+    height: 100%;
+    max-height: 100%;
+  }
+
+  .tableBar {
+      width: 1000px;
+  }
+
+	.tableBar table {
+		width: 100%;
+		border-bottom: 1px solid red;
+		border-collapse: collapse;
+	}
+
+	.tableBar table tr th {
+		font-weight: bolder;
+	}
+
+	.tableBar table tr {
+		height: 40px;
+		line-height: 40px;
+		border-bottom: 1px solid #ddd;
+		text-align: center;
+	}
+
+	.tableBar table button {
+		color: #FFF;
+		background-color: #409EFF;
+		border-color: #409EFF;
+		padding: 5px 20px;
+		border: none;
+		border-radius: 5px;
+		font-size: 14px;
+	}
 
 </style>