完成搜索功能
This commit is contained in:
WangHao
@@ -3,16 +3,34 @@
|
||||
|
||||
<div class="filter-tbar">
|
||||
<div class="filter-classification">
|
||||
<div class="classification " @click="showopen(0)"><span>全部</span></div>
|
||||
<div class="classification" @click="showopen(1)"><span>网页</span></div>
|
||||
<div class="classification" @click="showopen(2)"><span>文本</span></div>
|
||||
<div class="classification" @click="showopen(3)"><span>其他</span></div>
|
||||
<div class="classification " @click="showopen(0)"><span>网页</span></div>
|
||||
<div class="classification" @click="showopen(1)"><span>文本</span></div>
|
||||
<div class="classification" @click="showopen(2)"><span>其他</span></div>
|
||||
<!-- <div class="classification" @click="showopen(3)"><span>其他</span></div>-->
|
||||
</div>
|
||||
<div class="setUpThe">
|
||||
<div class="filter-content">
|
||||
<el-dropdown trigger="hover" size="small" @command="handleCommand">
|
||||
<div class="el-dropdown-link dropdownList">
|
||||
<i class="el-icon-document-checked "></i> <span>排序</span>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
|
||||
<el-dropdown-item class="filter-item" command="0"><i class="el-icon-bottom"></i>按时间排序(正)
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="filter-item" command="1"><i class="el-icon-bottom"></i>按时间排序(反)
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="filter-item" command="2"><i class="el-icon-bottom"></i>按标题A-Z排序(正)
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="filter-item" command="3"><i class="el-icon-bottom"></i>按标题A-Z排序(反)
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
<div class="filter-content">
|
||||
<el-dropdown trigger="hover" size="small">
|
||||
<div class="el-dropdown-link dropdownList">
|
||||
<i class="el-icon-document-checked "></i> <span>排序模式</span>
|
||||
<i class="el-icon-tickets "></i> <span>列表</span>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
|
||||
<el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
|
||||
@@ -24,39 +42,28 @@
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
<div class="filter-content">
|
||||
<el-dropdown trigger="hover" size="small">
|
||||
<div class="el-dropdown-link dropdownList">
|
||||
<i class="el-icon-tickets "></i> <span>卡片模式</span>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="filter-sort-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 class="filter-content">
|
||||
<el-dropdown trigger="hover" size="small">
|
||||
<div class="el-dropdown-link dropdownList">
|
||||
<i class="el-icon-setting "></i> <span>批量设置</span>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="filter-sort-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>排序</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 class="filter-content">-->
|
||||
<!-- <el-dropdown trigger="hover" size="small">-->
|
||||
<!-- <div class="el-dropdown-link dropdownList">-->
|
||||
<!-- <i class="el-icon-setting "></i> <span>设置</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <el-dropdown-menu slot="dropdown" class="filter-sort-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>排序</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>
|
||||
</div>
|
||||
|
||||
<div v-if="queryParams.sousuo!=''" class="sousuoContent">
|
||||
<i class="el-icon-success"></i>
|
||||
<!-- <span> 当前搜索的内容是:{{queryParams.sousuo}}</span>-->
|
||||
<span> 共为您找到约{{total}}个结果</span>
|
||||
</div>
|
||||
|
||||
<div class="nullbookmark" v-if="showimg">
|
||||
<div class="nullbookmark-img">
|
||||
</div>
|
||||
@@ -66,10 +73,11 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bookmarklist" :style="datalist" infinite-scroll-distance="10" v-loading="loading" v-if="showbookmark" v-infinite-scroll="load"
|
||||
<div class="bookmarklist" :style="datalist" infinite-scroll-distance="10" v-loading="loading" v-if="showbookmark"
|
||||
v-infinite-scroll="load"
|
||||
infinite-scroll-disabled="disabled" style="overflow:auto;" infinite-scroll-immediate="false">
|
||||
<el-row>
|
||||
<hr class="bookamrk-hr"/>
|
||||
<!-- <hr class="bookamrk-hr" v-if="!queryParams.sousuo!=''"/>-->
|
||||
<el-col :span="24" v-for="bm in bookmarkList">
|
||||
<div class="editBookamrk">
|
||||
<div class="editlist">
|
||||
@@ -90,9 +98,12 @@
|
||||
|
||||
|
||||
<div class="bookmark" :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
|
||||
<p class="bookmark-title">{{bm.title}}</p>
|
||||
<p class="bookmark-title" v-if="highlighted"><span v-html="highLight(bm.title,queryParams.sousuo)"/></p>
|
||||
<p class="bookmark-title" v-if="!highlighted">{{bm.title}}</p>
|
||||
<div class="">
|
||||
<p class="description">{{bm.description}}</p>
|
||||
<p class="description" v-if="highlighted"><span v-html="highLight(bm.description,queryParams.sousuo)"/>
|
||||
</p>
|
||||
<p class="description" v-if="!highlighted">{{bm.description}}</p>
|
||||
</div>
|
||||
<div class="info-wrap">
|
||||
<div class="info">
|
||||
@@ -198,7 +209,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
<script>
|
||||
|
||||
|
||||
import {
|
||||
@@ -244,7 +255,9 @@
|
||||
zcount: undefined,
|
||||
idelete: undefined,
|
||||
start: undefined,
|
||||
sqTags: []
|
||||
sqTags: [],
|
||||
sort: 0,
|
||||
sousuo: '',
|
||||
},
|
||||
inputVisible: false, //标签
|
||||
inputValue: '', //标签
|
||||
@@ -277,40 +290,51 @@
|
||||
},
|
||||
listloading: false,//滚动加载提示
|
||||
listnoMore: false,
|
||||
total:0,//总条数
|
||||
noMore:false,//是否可以滚动瀑布流
|
||||
total: 0,//总条数
|
||||
noMore: false,//是否可以滚动瀑布流
|
||||
highlighted: true,//搜索是否高亮
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
filters: {
|
||||
//timeago.js插件
|
||||
//计算时间，类似于几分钟前，几小时前，几天前等
|
||||
changeTime(val) {
|
||||
let time = new Date(val); //先将接收到的json格式的日期数据转换成可用的js对象日期
|
||||
return format(time, 'zh_CN'); //转换成类似于几天前的格式
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// document.querySelector("#datalist").addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
computed:{
|
||||
computed: {
|
||||
/**list加载完毕就禁止滚动**/
|
||||
|
||||
/**是否禁用滚动**/
|
||||
disabled(){
|
||||
disabled() {
|
||||
return this.listloading || this.noMore
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var that = this;
|
||||
|
||||
|
||||
var routedata = that.$route.query.menuId;
|
||||
var sousuo = that.$route.query.sousuo;
|
||||
if (routedata == undefined) {
|
||||
that.queryParams.menuId = 1;
|
||||
// that.queryParams.menuId = 1;
|
||||
} else {
|
||||
that.queryParams.menuId = routedata;
|
||||
}
|
||||
|
||||
//搜索值
|
||||
if (sousuo != null && sousuo != undefined && sousuo != '') {
|
||||
this.queryParams.sousuo = sousuo;
|
||||
}
|
||||
if (routedata == 'BOOKMARK') {
|
||||
//全部书签
|
||||
this.getBookmarkList();
|
||||
@@ -333,7 +357,7 @@
|
||||
this.newBookmark();
|
||||
},
|
||||
methods: {
|
||||
/**初始化**/
|
||||
/**初始化 分类全部的意思**/
|
||||
newBookmark() {
|
||||
//默认选中 全部
|
||||
document.getElementsByClassName("classification")[0].classList.add("classification-click");
|
||||
@@ -352,37 +376,51 @@
|
||||
/**滚动监控**/
|
||||
load() {
|
||||
console.log("滚动开始")
|
||||
|
||||
var that=this;
|
||||
//判断是否加载了所有数据
|
||||
this.queryParams.pageNum=this.queryParams.pageNum+1;
|
||||
// 2 15 26
|
||||
var listcount=Math.ceil(this.total/15);
|
||||
if (this.queryParams.pageNum>listcount){
|
||||
var i=that.queryParams.pageNum+1;
|
||||
that.$set(that.queryParams,'pageNum',i)
|
||||
console.log("this.queryParams.pageNum:"+that.queryParams.pageNum)
|
||||
var listcount = Math.ceil(that.total / 15);
|
||||
console.log("该目录共有页数:" +listcount)
|
||||
|
||||
if (i > listcount) {
|
||||
//加载完毕了 禁止滚动
|
||||
this.noMore=true;
|
||||
this.listnoMore=true;
|
||||
this.listloading = false
|
||||
that.noMore = true;
|
||||
that.listnoMore = true;
|
||||
that.listloading = false
|
||||
console.log("禁止滚动了")
|
||||
return;
|
||||
}else {
|
||||
} else {
|
||||
|
||||
this.listloading = true
|
||||
setTimeout(() =>{
|
||||
selectBymenuIdUserID(this.queryParams).then(response => {
|
||||
if (response.rows.length!=0 && response.code == 200) {
|
||||
console.log("response.rows"+response.rows)
|
||||
this.bookmarkList = this.bookmarkList.concat( response.rows);
|
||||
this.total = response.total;
|
||||
this.listloading = false
|
||||
} else {
|
||||
//加载完毕了 禁止滚动
|
||||
this.noMore=true;
|
||||
this.listloading = false
|
||||
}
|
||||
});
|
||||
},1000);
|
||||
this.listloading = true
|
||||
setTimeout(() => {
|
||||
selectBymenuIdUserID(this.queryParams).then(response => {
|
||||
if (response.rows.length != 0 && response.code == 200) {
|
||||
console.log("response.rows" + response.rows)
|
||||
this.bookmarkList = this.bookmarkList.concat(response.rows);
|
||||
|
||||
this.total = response.total;
|
||||
this.listloading = false
|
||||
console.log("请求完毕"+that.queryParams.pageNum)
|
||||
} else {
|
||||
//出错了
|
||||
//加载完毕了 禁止滚动
|
||||
this.noMore = true;
|
||||
this.listloading = false
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// if (this.queryParams.pageNum = listcount) {
|
||||
// //加载完毕了 禁止滚动
|
||||
// that.noMore = true;
|
||||
// that.listnoMore = true;
|
||||
// that.listloading = false
|
||||
// console.log("刚刚好2页 禁止滚动了")
|
||||
// }
|
||||
|
||||
},
|
||||
|
||||
/**切换显示 全部 网页 文本 其他**/
|
||||
@@ -513,7 +551,9 @@
|
||||
zcount: undefined,
|
||||
idelete: undefined,
|
||||
start: undefined,
|
||||
createTime: undefined
|
||||
createTime: undefined,
|
||||
sqTags: undefined,
|
||||
sort: undefined,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
@@ -546,6 +586,11 @@
|
||||
});
|
||||
},
|
||||
|
||||
/**切换排序规则**/
|
||||
handleCommand(command) {
|
||||
this.queryParams.sort = command;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 查询书签管理列表 */
|
||||
getList() {
|
||||
@@ -566,6 +611,57 @@
|
||||
window.open(url);
|
||||
},
|
||||
|
||||
/**搜索高亮 开始**/
|
||||
highLight(item, highLight) {
|
||||
return this.highLightTableMsg(item, highLight)
|
||||
},
|
||||
highLightTableMsg(msg, highLightStr) {
|
||||
if (msg == null) {
|
||||
msg = ''
|
||||
}
|
||||
if (highLightStr == null) {
|
||||
highLightStr = ''
|
||||
}
|
||||
if (msg instanceof Object) {
|
||||
msg = JSON.stringify(msg)
|
||||
}
|
||||
if (highLightStr instanceof Object) {
|
||||
highLightStr = JSON.stringify(highLightStr)
|
||||
}
|
||||
if (!(msg instanceof String)) {
|
||||
msg = msg.toString()
|
||||
}
|
||||
if (!(highLightStr instanceof String)) {
|
||||
highLightStr = highLightStr.toString()
|
||||
}
|
||||
var htmlStr = ''
|
||||
if (highLightStr.length > 0) {
|
||||
if (msg.indexOf(highLightStr) !== -1) {
|
||||
assemblyStr(msg, highLightStr)
|
||||
|
||||
} else {
|
||||
htmlStr = '<span>' + msg + '</span>'
|
||||
}
|
||||
} else {
|
||||
htmlStr = '<span>' + msg + '</span>'
|
||||
}
|
||||
|
||||
function assemblyStr(msgAssembly, highLightAssembly) {
|
||||
if (msgAssembly.indexOf(highLightAssembly) !== -1) {
|
||||
var length = highLightAssembly.length
|
||||
// alert(length)
|
||||
var start = msgAssembly.indexOf(highLightAssembly)
|
||||
htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="color:red;">' + highLightAssembly + '</span>'
|
||||
msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
|
||||
assemblyStr(msgAssembly, highLightAssembly)
|
||||
} else {
|
||||
htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
|
||||
}
|
||||
}
|
||||
|
||||
return htmlStr;
|
||||
},
|
||||
/**搜索高亮 结束**/
|
||||
|
||||
},
|
||||
|
||||
@@ -577,7 +673,6 @@
|
||||
<style scoped>
|
||||
|
||||
|
||||
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 32px;
|
||||
@@ -664,14 +759,17 @@
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.bookmark-time {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bookmark-hr {
|
||||
background-color: #fff !important;
|
||||
margin-top: 2px !important;
|
||||
margin-bottom: 7px !important;
|
||||
}
|
||||
|
||||
.editlist div {
|
||||
margin-left: 10px;
|
||||
width: 50px;
|
||||
@@ -683,9 +781,11 @@
|
||||
.bookmarktag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.bookmark-official {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -701,6 +801,7 @@
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.filter-tbar {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -781,7 +882,8 @@
|
||||
border-radius: 0px;
|
||||
border: 1px solid #EAEAEF;
|
||||
}
|
||||
.bookmark-list-tag:hover{
|
||||
|
||||
.bookmark-list-tag:hover {
|
||||
color: #569cd5;
|
||||
}
|
||||
|
||||
@@ -791,20 +893,23 @@
|
||||
background: #dcdfe682;
|
||||
font-weight: 600;
|
||||
}
|
||||
.bookmark-title:hover{
|
||||
|
||||
.bookmark-title:hover {
|
||||
|
||||
color: #3C4DAC;
|
||||
}
|
||||
.description{
|
||||
|
||||
.description {
|
||||
color: #9EABB3;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.info-wrap{
|
||||
|
||||
.info-wrap {
|
||||
color: #9EABB3;
|
||||
}
|
||||
|
||||
/**evanyou背景特效**/
|
||||
/**evanyou背景特效**/
|
||||
|
||||
.bookmark-title {
|
||||
/*设置文本框大小*/
|
||||
@@ -831,6 +936,7 @@
|
||||
color: #545454;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bookmarklist {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
@@ -844,8 +950,8 @@
|
||||
/*滚动条的宽度*/
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width:5px;
|
||||
height:3px;
|
||||
width: 5px;
|
||||
height: 3px;
|
||||
/*background-color: red;*/
|
||||
}
|
||||
|
||||
@@ -853,28 +959,49 @@
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
width: 6px;
|
||||
background-color:#fff;
|
||||
background-color: transparent;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius:2em;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
/*滚动条的设置*/
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color:#606d71;
|
||||
background-clip:padding-box;
|
||||
min-height:28px;
|
||||
/*设置为透明 隐藏掉*/
|
||||
/*background-color: #606d71;*/
|
||||
background-color: transparent;
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius:2em;
|
||||
border-radius: 2em;
|
||||
|
||||
}
|
||||
|
||||
/*滚动条移上去的背景*/
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #7c6fff;
|
||||
}
|
||||
|
||||
/*滚动条美化结束*/
|
||||
|
||||
|
||||
|
||||
|
||||
.sousuoContent {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background-color: #F2F2F2;
|
||||
color: #6a6a6a;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
border-radius: 3px;
|
||||
text-indent: 4px;
|
||||
/*text-align:center;*/
|
||||
margin-bottom: 4px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,77 +1,25 @@
|
||||
<template>
|
||||
<div class="app-container" style="overflow-y: scroll;height:750px">
|
||||
<!-- <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">-->
|
||||
<!-- <el-form-item label="标签名字" prop="name">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.name"-->
|
||||
<!-- placeholder="请输入标签名字"-->
|
||||
<!-- clearable-->
|
||||
<!-- size="small"-->
|
||||
<!-- @keyup.enter.native="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="引用数量" prop="icount">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.icount"-->
|
||||
<!-- placeholder="请输入引用数量"-->
|
||||
<!-- clearable-->
|
||||
<!-- size="small"-->
|
||||
<!-- @keyup.enter.native="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="谁增加的该标签" prop="userId">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.userId"-->
|
||||
<!-- placeholder="请输入谁增加的该标签"-->
|
||||
<!-- clearable-->
|
||||
<!-- size="small"-->
|
||||
<!-- @keyup.enter.native="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="标签的字体颜色" prop="isFontColor">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.isFontColor"-->
|
||||
<!-- placeholder="请输入标签的字体颜色"-->
|
||||
<!-- clearable-->
|
||||
<!-- size="small"-->
|
||||
<!-- @keyup.enter.native="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="标签的背景颜色" prop="isBgColor">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.isBgColor"-->
|
||||
<!-- placeholder="请输入标签的背景颜色"-->
|
||||
<!-- clearable-->
|
||||
<!-- size="small"-->
|
||||
<!-- @keyup.enter.native="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="S系统标签,P用户标签" prop="tagType">-->
|
||||
<!-- <el-select v-model="queryParams.tagType" placeholder="请选择S系统标签,P用户标签" clearable size="small">-->
|
||||
<!-- <el-option label="请选择字典生成" value="" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="状态 0显示默认" prop="istatus">-->
|
||||
<!-- <el-select v-model="queryParams.istatus" placeholder="请选择状态 0显示默认" clearable size="small">-->
|
||||
<!-- <el-option label="请选择字典生成" value="" />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="排序" prop="tagSort">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.tagSort"-->
|
||||
<!-- placeholder="请输入排序"-->
|
||||
<!-- clearable-->
|
||||
<!-- size="small"-->
|
||||
<!-- @keyup.enter.native="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item>-->
|
||||
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
|
||||
<!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<div class="app-container" >
|
||||
<div class="mainlist">
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="float: left">
|
||||
<el-form-item label="" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入标签名字"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<el-row :gutter="10" class="mb8" style="float: left;margin-top: 6px">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
@@ -101,27 +49,19 @@
|
||||
v-hasPermi="['system:tag:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['system:tag:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="tagList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="标签名字" width="155" >
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" size="medium">{{ scope.row.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="引用数量" align="center" prop="icount" />
|
||||
<el-table-column label="标签的字体颜色" align="center" prop="isFontColor" />
|
||||
<el-table-column label="标签的背景颜色" align="center" prop="isBgColor" />
|
||||
<el-table-column label="字体颜色" align="center" prop="isFontColor" />
|
||||
<el-table-column label="背景颜色" align="center" prop="isBgColor" />
|
||||
<el-table-column label="排序" align="center" prop="tagSort" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
@@ -151,6 +91,8 @@
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 添加或修改书签_标签对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
@@ -338,25 +280,23 @@
|
||||
this.msgSuccess("删除成功");
|
||||
}).catch(function() {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有书签_标签数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportTag(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
}).catch(function() {});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.app-container{
|
||||
padding: 0px;
|
||||
|
||||
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="box" ref="box">
|
||||
<div class="box" ref="box">
|
||||
|
||||
<el-container class="box" ref="box">
|
||||
<transition name="el-zoom-in-left" >
|
||||
<transition name="el-zoom-in-left">
|
||||
<el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside"
|
||||
style="overflow-x:hidden;overflow-y: hidden;">
|
||||
<el-header class="aside-logo">
|
||||
@@ -38,18 +38,20 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tabBar">
|
||||
<div class=""
|
||||
style="width: 100%;height: 30px;background-color: #cacaca;float: left;text-align: center;line-height: 30px">
|
||||
<i class="el-icon-folder-checked"></i>
|
||||
<span>新的收藏集</span>
|
||||
</div>
|
||||
<!-- <div class="tabBar">-->
|
||||
<!-- <div class=""-->
|
||||
<!-- style="width: 100%;height: 30px;background-color: #cacaca;float: left;text-align: center;line-height: 30px">-->
|
||||
<!-- <i class="el-icon-folder-checked"></i>-->
|
||||
<!-- <span>新的收藏集</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div style="float: left;width: 100%;height: 50px;background-color: black">
|
||||
<img src="https://s1.ax1x.com/2020/09/13/w0jfy9.png" style="width: 100%;height: 100%">
|
||||
</div>
|
||||
<!-- <div class="tabBarList" >-->
|
||||
<!-- <div><i class="el-icon-folder-checked"></i></div>-->
|
||||
<!-- <div><i class="el-icon-folder-checked"></i></div>-->
|
||||
<!-- <div><i class="el-icon-s-tools"></i></div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
</el-aside>
|
||||
@@ -78,7 +80,7 @@
|
||||
<!-- <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>-->
|
||||
|
||||
|
||||
<el-container class="mid">
|
||||
<el-container class="mid">
|
||||
|
||||
<el-header class="header-sousou" style="height: 50px">
|
||||
<div class="sousou-left">
|
||||
@@ -88,21 +90,23 @@
|
||||
</div>
|
||||
|
||||
<div class="sousou-input">
|
||||
<!-- <el-popover-->
|
||||
<!-- placement="bottom"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- :visible-arrow="false"-->
|
||||
<!-- popper-class="popover-suosou"-->
|
||||
<!-- >-->
|
||||
<!-- <div v-for="o in 4" :key="o">-->
|
||||
<!-- {{'列表内容 ' + o }}-->
|
||||
<!-- </div>-->
|
||||
<el-input slot="reference" placeholder="请输入书签名字" v-model="sousou" size="small">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
<!-- <el-button slot="append" icon="el-icon-search"></el-button>-->
|
||||
</el-input>
|
||||
<!-- </el-popover>-->
|
||||
<!-- <el-popover-->
|
||||
<!-- placement="bottom"-->
|
||||
<!-- width="400"-->
|
||||
<!-- trigger="click"-->
|
||||
<!-- :visible-arrow="false"-->
|
||||
<!-- popper-class="popover-suosou"-->
|
||||
<!-- >-->
|
||||
<!-- <div v-for="o in 4" :key="o">-->
|
||||
<!-- {{'列表内容 ' + o }}-->
|
||||
<!-- </div>-->
|
||||
<el-input slot="reference" @keyup.enter.native="gosousuo" placeholder="请输入要查找的关键词" v-model="sousuo"
|
||||
size="small">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search" style="font-size: 15px;margin-top: 7px"></i>
|
||||
|
||||
<!-- <el-button slot="append" icon="el-icon-search"></el-button>-->
|
||||
</el-input>
|
||||
<!-- </el-popover>-->
|
||||
</div>
|
||||
|
||||
<div class="sousouright-icon">
|
||||
@@ -144,13 +148,29 @@
|
||||
</el-header>
|
||||
<el-main class="bookmarkmain">
|
||||
|
||||
<router-view :key="$route.query.menuId"></router-view>
|
||||
<router-view :key="$route.query.t"></router-view>
|
||||
|
||||
|
||||
</el-main>
|
||||
|
||||
|
||||
</el-container>
|
||||
<!-- <el-aside class="mianUrl">-->
|
||||
<!-- <el-header class="mianUrl-top" style="height: 50px">-->
|
||||
<!-- <div class="mianUrl-top-left">-->
|
||||
<!-- <i class="el-icon-folder-delete"></i>-->
|
||||
<!-- <i class="el-icon-rank"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="mianUrl-top-right">-->
|
||||
<!-- <i class="el-icon-edit-outline"></i>-->
|
||||
<!-- <i class="el-icon-position"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-header>-->
|
||||
<!-- <div class="mianUrl-botoom">-->
|
||||
<!-- <iframe class="openurl" :src="gourl"/>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<!-- </el-aside>-->
|
||||
|
||||
|
||||
</el-container>
|
||||
@@ -281,7 +301,7 @@
|
||||
</template>
|
||||
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
|
||||
<style scoped src="../ztree/demo.css"/>
|
||||
<script >
|
||||
<script>
|
||||
// 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
|
||||
import {addBookmark} from "@/api/bookmark/bookmark";
|
||||
|
||||
@@ -347,7 +367,7 @@
|
||||
drawer: false,
|
||||
direction: 'ltr',
|
||||
swictxuanran: true,
|
||||
sousou: '',//搜索书签
|
||||
sousuo: '',//搜索书签
|
||||
enterable: false,
|
||||
isShowZtree: true,//ztree树显示
|
||||
expandAll: false,//是否展开ztree树
|
||||
@@ -405,18 +425,20 @@
|
||||
}],
|
||||
asideHeight: {
|
||||
height: "",
|
||||
width:"",
|
||||
}
|
||||
width: "",
|
||||
},
|
||||
//点击的网址
|
||||
gourl:'https://element.eleme.cn/#/zh-CN/theme',
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
window['editBookmark'] = (e) => {
|
||||
this.editBookmark(e)
|
||||
},
|
||||
//div拖动
|
||||
this.dragControllerDivs();
|
||||
this.dragControllerDivs();
|
||||
/**背景彩带**/
|
||||
// this.backgroundcss();
|
||||
|
||||
@@ -438,7 +460,7 @@
|
||||
|
||||
methods: {
|
||||
/**粒子球背景特效**/
|
||||
backgroundparticle:function(){
|
||||
backgroundparticle: function () {
|
||||
!function () {
|
||||
//封装方法，压缩之后减少文件大小
|
||||
function get_attribute(node, attr, default_value) {
|
||||
@@ -558,7 +580,7 @@
|
||||
},
|
||||
|
||||
/**evanyou 背景特效**/
|
||||
evanyoucss:function(){
|
||||
evanyoucss: function () {
|
||||
var c = document.getElementById('evanyou'),
|
||||
x = c.getContext('2d'),
|
||||
pr = window.devicePixelRatio || 1,
|
||||
@@ -575,11 +597,13 @@
|
||||
c.height = h * pr;
|
||||
x.scale(pr, pr);
|
||||
x.globalAlpha = 0.6;
|
||||
|
||||
function evanyou() {
|
||||
x.clearRect(0, 0, w, h)
|
||||
q = [{ x: 0, y: h * .7 + f }, { x: 0, y: h * .7 - f }]
|
||||
q = [{x: 0, y: h * .7 + f}, {x: 0, y: h * .7 - f}]
|
||||
while (q[1].x < w + f) d(q[0], q[1])
|
||||
}
|
||||
|
||||
function d(i, j) {
|
||||
x.beginPath()
|
||||
x.moveTo(i.x, i.y)
|
||||
@@ -592,12 +616,14 @@
|
||||
x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16)
|
||||
x.fill()
|
||||
q[0] = q[1]
|
||||
q[1] = { x: k, y: n }
|
||||
q[1] = {x: k, y: n}
|
||||
}
|
||||
|
||||
function y(p) {
|
||||
var t = p + (z() * 2 - 1.1) * f
|
||||
return (t > h || t < 0) ? y(p) : t
|
||||
}
|
||||
|
||||
document.onclick = evanyou
|
||||
document.ontouchstart = evanyou
|
||||
evanyou();
|
||||
@@ -652,7 +678,7 @@
|
||||
}
|
||||
},
|
||||
/**背景特效彩带**/
|
||||
backgroundcss:function(){
|
||||
backgroundcss: function () {
|
||||
(function (name, factory) {
|
||||
if (typeof window === "object") {
|
||||
window[name] = factory();
|
||||
@@ -1138,6 +1164,7 @@
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.sqTags = [],
|
||||
this.sousuo = '',
|
||||
this.form = {
|
||||
menuId: undefined,
|
||||
userId: undefined,
|
||||
@@ -1224,7 +1251,8 @@
|
||||
that.$router.push({
|
||||
path: "/content",
|
||||
query: {
|
||||
menuId: treeNode.menuId
|
||||
menuId: treeNode.menuId,
|
||||
t:Date.now(),
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1338,7 +1366,17 @@
|
||||
path: "/UserTagAll",
|
||||
})
|
||||
},
|
||||
|
||||
/**搜索功能**/
|
||||
gosousuo() {
|
||||
var that = this;
|
||||
that.$router.push({
|
||||
path: "/content",
|
||||
query: {
|
||||
sousuo: this.sousuo,
|
||||
t:Date.now(),
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
@@ -1353,16 +1391,15 @@
|
||||
|
||||
}
|
||||
</script>
|
||||
<style >
|
||||
<style>
|
||||
|
||||
|
||||
body {
|
||||
/*font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;*/
|
||||
font-family: "Merriweather","Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif;
|
||||
font-family: "Merriweather", "Open Sans", "Microsoft Jhenghei", "Microsoft Yahei", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ztree li ul {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
@@ -1478,7 +1515,7 @@
|
||||
|
||||
}
|
||||
|
||||
.isaside{
|
||||
.isaside {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
/*background:url('https://ftp.bmp.ovh/imgs/2020/08/4ac1d6b4f41049ef.jpg') no-repeat;*/
|
||||
@@ -1499,11 +1536,9 @@
|
||||
/*filter:alpha(opacity=90);*/
|
||||
|
||||
|
||||
|
||||
|
||||
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
|
||||
-moz-background-size:100% 100%;
|
||||
background-size:100% 100%;
|
||||
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
|
||||
-moz-background-size: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
|
||||
|
||||
/*background: url("https://s1.ax1x.com/2020/10/03/03sAeK.md.jpg") no-repeat, linear-gradient(90deg, rgb(107, 165, 255) 40%, rgb(197, 197, 197) 100%) ;*/
|
||||
@@ -1517,8 +1552,6 @@
|
||||
/*!*background: linear-gradient(to right, #000C40, #F0F2F0); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*!*/
|
||||
|
||||
|
||||
|
||||
|
||||
/*background-size: cover;*/
|
||||
/*z-index: -1;!*-1 可以当背景*!*/
|
||||
/*-webkit-filter: blur(3px);*/
|
||||
@@ -1585,9 +1618,9 @@
|
||||
.reminder {
|
||||
color: #878787;
|
||||
opacity: 0.7;
|
||||
font-size: 14px!important;
|
||||
font-weight: 500!important;
|
||||
margin-left: 27px!important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
margin-left: 27px !important;
|
||||
|
||||
}
|
||||
|
||||
@@ -1672,7 +1705,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sousou-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1687,7 +1719,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 35px;
|
||||
margin-top: 9px!important;
|
||||
margin-top: 9px !important;
|
||||
|
||||
|
||||
}
|
||||
@@ -1720,26 +1752,14 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bookmark {
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.sousouleft-switch {
|
||||
margin-top: 4px!important;
|
||||
margin-right: 10px!important;
|
||||
margin-top: 4px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.sousouleft-switch i {
|
||||
@@ -1755,7 +1775,7 @@
|
||||
/*background-color: red;*/
|
||||
}
|
||||
|
||||
.sousou-leftico {
|
||||
.sousou-leftico {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -1763,12 +1783,13 @@
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #e6e6e6 !important;
|
||||
margin-top: 9px!important;
|
||||
margin-right: 10px!important;
|
||||
margin-top: 9px !important;
|
||||
margin-right: 10px !important;
|
||||
|
||||
|
||||
}
|
||||
.sousou-leftico img{
|
||||
|
||||
.sousou-leftico img {
|
||||
|
||||
}
|
||||
|
||||
@@ -1779,22 +1800,20 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.sousouright-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
margin-top: 7px!important;
|
||||
margin-top: 7px !important;
|
||||
}
|
||||
|
||||
.sousouright-iconadd {
|
||||
.sousouright-iconadd {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
margin-top: 7px!important;
|
||||
margin-top: 7px !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -1895,16 +1914,11 @@
|
||||
|
||||
|
||||
.main-right {
|
||||
/*overflow:scroll;*/
|
||||
width: 300px;
|
||||
height: 85%;
|
||||
height: 95%;
|
||||
min-height: 40%;
|
||||
overflow: auto;
|
||||
/*overflow: hidden;*/
|
||||
|
||||
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
|
||||
.main-right::-webkit-scrollbar {
|
||||
@@ -1931,10 +1945,34 @@
|
||||
}
|
||||
|
||||
.tabBar {
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
/*width: inherit;*/
|
||||
/*overflow: hidden;*/
|
||||
/*position: fixed;*/
|
||||
/*bottom: 0;*/
|
||||
}
|
||||
.tabBarList{
|
||||
display: flex;
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #e6e6e6;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.tabBarList div{
|
||||
display: flex;
|
||||
width: 33.33%;
|
||||
height: 50px;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tabBarList div i{
|
||||
margin: 0 auto;
|
||||
font-size: 25px;
|
||||
|
||||
}
|
||||
|
||||
.popover-suosou {
|
||||
@@ -1942,6 +1980,7 @@
|
||||
top: 40px;
|
||||
/*left: 72px;*/
|
||||
}
|
||||
|
||||
/* 拖拽相关样式 */
|
||||
/*包围div样式*/
|
||||
|
||||
@@ -1950,48 +1989,99 @@
|
||||
background-color: transparent;
|
||||
width: 10px;
|
||||
font-size: 25px;
|
||||
display:-webkit-flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
display: -webkit-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/*拖拽区鼠标悬停样式*/
|
||||
.isresize:hover{
|
||||
.isresize:hover {
|
||||
color: #a4a4a4;
|
||||
}
|
||||
.isresize i{
|
||||
|
||||
.isresize i {
|
||||
margin-left: 2px;
|
||||
transform: rotate(90deg);
|
||||
width: 10px;
|
||||
/*color: transparent;*/
|
||||
/*background-color: black;*/
|
||||
}
|
||||
.main-right{
|
||||
|
||||
.main-right {
|
||||
min-width: 250px;
|
||||
}
|
||||
.box{
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
|
||||
.box {
|
||||
-moz-user-select: none; /* Firefox私有属性 */
|
||||
-webkit-user-select: none; /* WebKit内核私有属性 */
|
||||
-ms-user-select: none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select: none; /* KHTML内核私有属性 */
|
||||
-o-user-select: none; /* Opera私有属性 */
|
||||
user-select: none; /* CSS3属性 */
|
||||
}
|
||||
|
||||
/* 拖拽相关样式 结束 */
|
||||
#evanyou{
|
||||
position:fixed;
|
||||
width:100%;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0;
|
||||
#evanyou {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mianUrl{
|
||||
padding: 0px;
|
||||
color: #8F8F8F;
|
||||
}
|
||||
.mianUrl-top{
|
||||
display: flex;
|
||||
padding: 0px!important;
|
||||
}
|
||||
.mianUrl-top div{
|
||||
width: 50%;
|
||||
height: 50px;
|
||||
background-color: #FFFFFF;
|
||||
font-size: 22px;
|
||||
color: #414141;
|
||||
}
|
||||
.mianUrl i{
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mianUrl-top-left i{
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.mianUrl i:hover{
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
.mianUrl-top-right i{
|
||||
float: right;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.mianUrl-botoom{
|
||||
height: 900px;
|
||||
}
|
||||
.openurl{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user