From 1cea09c4d6f310a72953cfb16cfdbd2714d0e632 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Sun, 9 May 2021 20:32:44 +0800
Subject: [PATCH] =?UTF-8?q?!1=20UP=201.0.3=20*=20UP=201.0.3=20*=20UP=20?=
 =?UTF-8?q?=E5=A4=A7=E5=B8=83=E5=B1=80=E6=9B=B4=E6=8D=A2=E4=B8=BAflex?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=20*=20ADD=20=E4=B8=AA=E6=80=A7=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  2 +-
 public/json/user.json            |  8 ++++
 src/layout/components/head.vue   |  4 +-
 src/style/app.less               | 17 ++++---
 src/views/home/components/C2.vue | 26 ++++++++---
 src/views/other/iframe.vue       |  2 +-
 src/views/template/itemList.vue  | 76 ++++++++++++++++++++++++++++++++
 7 files changed, 119 insertions(+), 16 deletions(-)
 create mode 100644 src/views/template/itemList.vue

diff --git a/package.json b/package.json
index 58ceea13..4dde2df8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "SCUI-Admin",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"private": true,
 	"scripts": {
 		"serve": "vue-cli-service serve",
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/layout/components/head.vue b/src/layout/components/head.vue
index 45b8093c..dbdc3244 100644
--- a/src/layout/components/head.vue
+++ b/src/layout/components/head.vue
@@ -17,7 +17,7 @@
 			<div class="setting panel-item">
 				<i class="el-icon-setting"></i>
 			</div>
-			<el-popover placement="bottom" :width="360" trigger="hover">
+			<el-popover placement="bottom" :width="360" trigger="click">
 				<template #reference>
 					<div class="msg panel-item">
 						<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
@@ -46,7 +46,7 @@
 					</div>
 				</div>
 			</el-popover>
-			<el-dropdown trigger="hover" @command="handleUser">
+			<el-dropdown trigger="click" @command="handleUser">
 				<div class="user panel-item">
 					<el-avatar :size="30">{{ userNameF }}</el-avatar>
 					<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
diff --git a/src/style/app.less b/src/style/app.less
index 8ef9db00..2cb41559 100644
--- a/src/style/app.less
+++ b/src/style/app.less
@@ -15,8 +15,12 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 ::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}
 ::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
 
-.aminui-side-split {position: absolute;top:0px;left:0px;bottom:0px;width:65px;background: #333;z-index: 5;}
-.adminui-side-split-scroll {position: absolute;top:0px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
+/* 大布局样式 */
+.aminui {display: flex;}
+
+/* 左侧菜单 */
+.aminui-side-split {width:65px;background: #333;}
+.adminui-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;}
 .aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
 .aminui-side-split li i {font-size: 16px;}
 .aminui-side-split li p {margin-top:5px;}
@@ -28,12 +32,13 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
 .adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
 
-.aminui-side {position: absolute;z-index: 5;top:0px;left:65px;bottom:0px;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
+.aminui-side {display: flex;flex-flow: column;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
 .adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
 .adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
-.adminui-side-scroll {position: absolute;top:50px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
+.adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
 
-.aminui-body {position: absolute;z-index: 4;top:0px;left:275px;bottom:0px;right:0px;}
+/* 右侧内容 */
+.aminui-body {flex: 1;display: flex;flex-flow: column;}
 
 .adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
 .adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
@@ -67,4 +72,4 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-tags li.active {background: #09f;}
 .adminui-tags li.active a {color: #fff;}
 
-.adminui-main {position: absolute;top:85px;left:0px;right:0px;bottom:0px;overflow: auto;background-color: #f6f8f9;}
+.adminui-main {overflow: auto;background-color: #f6f8f9;flex: 1;}
diff --git a/src/views/home/components/C2.vue b/src/views/home/components/C2.vue
index 86fe5134..732f086b 100644
--- a/src/views/home/components/C2.vue
+++ b/src/views/home/components/C2.vue
@@ -2,9 +2,9 @@
 
 	<div style="height: 248px;">
 		<el-scrollbar >
-			<el-timeline>
-				<el-timeline-item v-for="(item, index) in activities" :key="index" :timestamp="item.timestamp" placement="top">
-					<div v-html="item.content"></div>
+			<el-timeline style="padding-left: 20px;">
+				<el-timeline-item v-for="(item, index) in activities" :key="index" :timestamp="item.timestamp" :color="index==0?'#409EFF':''" placement="top">
+					<li v-for="li in item.content" :key="li"  v-html="li"></li>
 				</el-timeline-item>
 			</el-timeline>
 		</el-scrollbar>
@@ -23,15 +23,29 @@
 			return {
 				activities: [
 					{
-						content: '1.0.2 增加自定义隐藏排序列，修复scEcharts组件主题警告',
+						content: [
+							"[新增] 个性列表模板",
+							"[调整] 大布局更换为flex布局"
+						],
+						timestamp: '2021-05-09'
+					},
+					{
+						content: [
+							'[新增] 增加自定义隐藏排序列',
+							'[修复] scEcharts组件主题警'
+						],
 						timestamp: '2021-05-08'
 					},
 					{
-						content: '1.0.1 提升部分组件为全局组件',
+						content: [
+							'[调整] 提升部分组件为全局组件'
+						],
 						timestamp: '2021-05-07'
 					},
 					{
-						content: '1.0.0 版本开源 <i class="el-icon-present"></i>',
+						content: [
+							'1.0.0 版本开源 <i class="el-icon-present"></i>'
+						],
 						timestamp: '2021-05-07'
 					}
 				]
diff --git a/src/views/other/iframe.vue b/src/views/other/iframe.vue
index 0e6a1575..6bf36335 100644
--- a/src/views/other/iframe.vue
+++ b/src/views/other/iframe.vue
@@ -13,5 +13,5 @@
 </script>
 
 <style scoped>
-	iframe {border:0;position: absolute;top:0px;left:0px;right:0px;bottom:0px;width:100%;height:100%;}
+	iframe {border:0;width:100%;height:100%;display: block;}
 </style>
diff --git a/src/views/template/itemList.vue b/src/views/template/itemList.vue
new file mode 100644
index 00000000..0b569be8
--- /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" :preview-src-list="[item.image]"></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>