From b2585ff6cd5c4ac6986b7014741d2f4d2f6219d4 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Sun, 9 May 2021 18:21:31 +0800
Subject: [PATCH] =?UTF-8?q?ADD=20=E4=B8=AA=E6=80=A7=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/json/user.json           |  8 ++++
 src/views/template/itemList.vue | 76 +++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/views/template/itemList.vue

diff --git a/public/json/user.json b/public/json/user.json
index b5c7f227..3798e3ae 100644
--- a/public/json/user.json
+++ b/public/json/user.json
@@ -79,6 +79,14 @@
 							"hidden": true
 						},
 						"component": "template/show"
+					},
+					{
+						"path": "/template/itemList",
+						"name": "itemList",
+						"meta": {
+							"title": "个性列表"
+						},
+						"component": "template/itemList"
 					}
 				]
 			},
diff --git a/src/views/template/itemList.vue b/src/views/template/itemList.vue
new file mode 100644
index 00000000..3673900a
--- /dev/null
+++ b/src/views/template/itemList.vue
@@ -0,0 +1,76 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+
+			</div>
+			<div class="right-panel">
+				<div class="right-panel-search">
+					<el-input v-model="keyword" placeholder="请输入内容" clearable></el-input>
+					<el-button type="primary" icon="el-icon-search"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<div class="sc-itemList">
+				<div class="sc-itemList-list">
+					<el-row :gutter="20">
+
+						<el-col :xl="6" :lg="8" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.title">
+							<el-card shadow="hover" :body-style="{ padding: '0px' }">
+								<el-image :src="item.image" fit="cover"></el-image>
+								<div class="title">
+									<h2>{{item.title}}</h2>
+									<p>
+										<el-tag type="warning">免费</el-tag>
+										<el-tag v-for="tag in item.tags" :key="tag">{{tag}}</el-tag>
+									</p>
+								</div>
+							</el-card>
+						</el-col>
+
+					</el-row>
+				</div>
+				<div class="sc-itemList-page">
+					<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="20" :page-size="20" :currentPage="1" ></el-pagination>
+				</div>
+			</div>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+	export default {
+		name: 'itemList',
+		data() {
+			return {
+				keyword: "",
+				list: [
+					{
+						title: "VUE Next",
+						tags: ["跨平台", "3.0", "测试版"],
+						image: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+					},
+					{
+						title: "Element Plus",
+						tags: ["Vue3.0", "个人"],
+						image: ""
+					}
+				]
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 20px;height:310px;}
+	.el-image {width: 100%;height:200px;background: #ddd;}
+	.title {padding:20px;}
+	.title h2 {font-size: 16px;}
+	.title p {font-size: 12px;color: #999;margin-top: 15px;}
+	.title p .el-tag {margin-right:8px;}
+
+	.sc-itemList {display:flex;flex-direction:column;height:100%;}
+	.sc-itemList-list {flex:1;border-bottom: 1px solid #EBEEF5;padding:20px;overflow: auto;}
+	.sc-itemList-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
+</style>