Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

调整Head头部布局,动态接口加载书签列表

Browse Source
This commit is contained in:
WangHao
2020-08-17 22:00:59 +08:00
parent b712dd1aa7
commit ff7b4da8a6
7 changed files with 156 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
ruoyi-ui/src/views/bookmark/content/index.vue
View File

@@ -3,13 +3,13 @@
<template>
<div>
<div class="filter">
<div class="filter" >
<div class="filter-sort">
<el-dropdown trigger="click" size="small">
<span class="el-dropdown-link">
<span>按时间排序(正)</span> <i class="el-icon-caret-bottom"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
@@ -53,10 +53,10 @@
</div>
<div class="bookmarklist">
<el-row>
<el-row >
<hr class="bookamrk-hr"/>
<el-col :span="24" v-for="bm in bookmark">
<el-col :span="24" v-for="bm in bookmarkList">
<div class="bookmark">
<p class="bookmark-title">{{bm.title}}</p>
@@ -68,7 +68,7 @@
<div class="bookmark-icon">
<img :err-src='bm.icon' :ng-src="bm.icon" :src="bm.icon" />
</div>
<div class="bookmark-official">{{bm.official}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.time}}</div>
<div class="bookmark-official">{{bm.urls}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.createTime|changeTime}}</div>
</div>
</div>
</div>
@@ -92,14 +92,20 @@
</div>
</template>
<script>
export default {
components: {},
import { selectBymenuIdUserID, getBookmark, delBookmark, addBookmark, updateBookmark, exportBookmark } from "@/api/bookmark/bookmark";
import { format } from 'timeago.js';
export default {
components: {
format
},
data: function () {
return {
loading:true,
bookmark:[
{id:1,title:"最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎",description:"阅读使人充实，会谈使人敏捷，写作使人精确。——培根",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
{id:1,title:"意志坚强的人能把世界放在手中像泥块一样任意揉捏。——歌德",description:"最具挑战性的挑战莫过于提升自我。——迈克尔·F·斯特利",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
@@ -111,9 +117,51 @@
{id:1,title:"我的努力求学没有得到别的好处，只不过是愈来愈发觉自己的无知。——笛卡儿",description:"少而好学，如日出之阳；壮而好学，如日中之光；志而好学，如炳烛之光。——刘向",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
],
queryParams: {
pageNum: 1,
pageSize: 15,
userid: undefined,
title: undefined,
url: undefined,
urls: undefined,
description: undefined,
image: undefined,
label: undefined,
menuId: undefined,
zcount: undefined,
idelete: undefined,
start: undefined,
},
bookmarkList:[],
}
},
methods: {}
filters: {
//timeago.js插件
//计算时间，类似于几分钟前，几小时前，几天前等
changeTime(val){
let time = new Date(val); //先将接收到的json格式的日期数据转换成可用的js对象日期
return format(time, 'zh_CN'); //转换成类似于几天前的格式
}
},
created() {
this.queryParams.menuId=1;
this.getList();
},
methods: {
/** 查询书签管理列表 */
getList() {
this.loading = true;
selectBymenuIdUserID(this.queryParams).then(response => {
this.bookmarkList = response.rows;
this.total = response.total;
this.loading = false;
});
},
},
}
</script>

166
ruoyi-ui/src/views/bookmark/index/index.vue
View File

@@ -12,8 +12,8 @@
<div class="aside-title"><i class="el-icon-s-tools"></i><span>所有书签</span></div>
<div class="aside-title"><i class="el-icon-help"></i><span>发现书签</span></div>
<div class="aside-title"><i class="el-icon-s-tools"></i><span>全部书签</span></div>
<div class="aside-title"><i class="el-icon-help"></i><span>发现</span></div>
<div class="aside-title"><i class="el-icon-s-platform"></i><span>任意门</span></div>
<div class="aside-title"><i class="el-icon-message-solid"></i><span>收件箱</span></div>
<div class="reminder">我的收藏</div>
@@ -44,9 +44,6 @@
<!-- <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>-->
<el-container>
@@ -54,7 +51,6 @@
<div class="sousou-left">
<div class="sousouleft-switch" @click="drawer = true"><i class="el-icon-s-unfold"/></div>
<div class="sousou-leftico" @click="drawer = true"><img src="https://favicon.lucq.fun/?url=https://www.baidu.com"/></div>
</div>
<div class="sousou-input">
@@ -62,30 +58,40 @@
<el-input placeholder="请输入书签名字" v-model="sousou" size="small">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="header-list">
<el-dropdown trigger="click" size="small" :hide-on-click="false">
<span class="el-dropdown-link">
<i class="el-icon-s-operation margintop"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">按时间排序(正序)</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">按时间排序(到序)</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="c">按字母A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="d" divided>按网站A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="e">按网站A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="f">按网站A-Z排序</el-dropdown-item>
<el-dropdown-item class="filter-item" divided>
<el-switch
v-model="swictxuanran"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
开启渲染
</el-dropdown-item>
<el-dropdown-item class="filter-item" divided>关闭</el-dropdown-item>
<div class="sousouright-icon"><el-badge :value="5" :max="99" class="item" ><i class="el-icon-message-solid" style="font-size: 17px;"></i></el-badge></div>
<div class="sousouright-icon">
<el-dropdown trigger="click" size="small" :hide-on-click="false" >
<span class="el-dropdown-link">
<i class="el-icon-plus" style="font-size: 18px;"/>
</span>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">添加连接</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">添加文本</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="d" >导入书签</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="header-list">
<el-dropdown trigger="click" size="small" :hide-on-click="false" >
<span class="el-dropdown-link">
<el-avatar :size="28" src="https://up.raindrop.io/collection/templates/social-media-logos-6/97social.png"></el-avatar>
</span>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">外观显示</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">用户中心</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="d" >建议反馈</el-dropdown-item>
<el-dropdown-item class="filter-item" icon="el-icon-plus" command="e" divided>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -95,95 +101,8 @@
</el-header>
<el-main class="bookmarkmain" >
<!-- <div class="filter">-->
<!-- <div class="filter-sort">-->
<!-- <el-dropdown trigger="click" size="small">-->
<!-- <span class="el-dropdown-link">-->
<!-- <span>选择排序方式</span> <i class="el-icon-bottom"></i> <i class="el-icon-caret-bottom"></i>-->
<!-- </span>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正序)</el-dropdown-item>-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(到序)</el-dropdown-item>-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>-->
<!-- <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
<!-- </div>-->
<!-- <div >-->
<!-- <el-divider direction="vertical" ></el-divider>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- <div class="main-label">-->
<!-- <span><i class="el-icon-star-on"></i></span>-->
<!-- <span>稍后再读</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="bookmarklist">-->
<!-- <el-row>-->
<!--<hr>-->
<!-- <el-col :span="24" v-for="bm in bookmark">-->
<!-- <div class="bookmark">-->
<!-- <p class="bookmark-title">{{bm.title}}</p>-->
<!-- <div class="">-->
<!-- <p class="description">{{bm.description}}</p>-->
<!-- </div>-->
<!-- <div class="info-wrap">-->
<!-- <div class="info">-->
<!-- <div class="bookmark-icon">-->
<!-- <img :err-src='bm.icon' :ng-src="bm.icon" :src="bm.icon" />-->
<!-- </div>-->
<!-- <div class="bookmark-official">{{bm.official}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.time}}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <el-divider class="bookmark-hr"></el-divider>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<router-view></router-view>
<!--&lt;!&ndash; <div class="announcement"></div>&ndash;&gt;-->
</el-main>
<el-footer>Footer</el-footer>
@@ -229,7 +148,6 @@
drawerS:false,
drawer: false,
direction: 'ltr',
swictxuanran:true,
sousou:'',//搜索书签
enterable:false,
@@ -629,14 +547,17 @@
.sousou-input{
float: left;
width: 100%;
width: 82.5%;
margin-right: 15px;
}
.header-list{
line-height: 50px;
margin-top: 3px;
/*line-height: 50px;*/
margin-top: 10px;
/*align-content: center;*/
/*justify-content: center;*/
}
.header-list:hover{
color: #7a6df0;
@@ -782,6 +703,11 @@
/*background-color: #fff;*/
float: left
}
.sousouright-icon{
margin-right: 24px;
margin-top: 10px;
}