* UP 1.0.3
* UP 大布局更换为flex布局
* ADD 个性列表模板
This commit is contained in:
sakuya 2021-05-09 20:32:44 +08:00
parent c4ef61612f
commit 1cea09c4d6
7 changed files with 119 additions and 16 deletions

View File

@ -1,6 +1,6 @@
{
"name": "SCUI-Admin",
"version": "1.0.2",
"version": "1.0.3",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

View File

@ -79,6 +79,14 @@
"hidden": true
},
"component": "template/show"
},
{
"path": "/template/itemList",
"name": "itemList",
"meta": {
"title": "个性列表"
},
"component": "template/itemList"
}
]
},

View File

@ -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>

View File

@ -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;}

View File

@ -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'
}
]

View File

@ -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>

View File

@ -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>