parent
c4ef61612f
commit
1cea09c4d6
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "SCUI-Admin",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
|
|
|
|||
|
|
@ -79,6 +79,14 @@
|
|||
"hidden": true
|
||||
},
|
||||
"component": "template/show"
|
||||
},
|
||||
{
|
||||
"path": "/template/itemList",
|
||||
"name": "itemList",
|
||||
"meta": {
|
||||
"title": "个性列表"
|
||||
},
|
||||
"component": "template/itemList"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue