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

美化左侧div宽度拖拉 按钮

Browse Source
This commit is contained in:
WangHao 2020-10-03 17:38:46 +08:00
parent d869b770e3
commit 96186a3b07
3 changed files with 775 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ruoyi-ui/src/assets/styles/base.css
View File

@ -14,7 +14,7 @@
.header-listtxet{ .header-listtxet{
display: none; display: none;
} }
.transition-box{ .main-right{
width: 250px!important; width: 250px!important;
} }
.tabBar{ .tabBar{
@ -52,6 +52,9 @@
.transition-box{ .transition-box{
display: none; display: none;
} }
.isresize{
display: none;
}
.sousouleft-switch{ .sousouleft-switch{
display: block; display: block;
} }

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

@ -1,37 +1,119 @@
<template>
<div>
<div style="width: 500px"> <template>
<tags-input <div class="box" ref="box">
v-model="tagList" <div class="left">
:defaulList="defaulList" <!--左侧div内容-->
:listFilter=true </div>
placeholder="按enter键创建标签" <div class="resize" title="收缩侧边栏">
@tagClose="tagClose"></tags-input> ⋮
</div>
<div class="mid">
<!--右侧div内容-->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import TagsInput from '../../../components/TagsInput'
export default { export default {
components: { name: 'Dashboard',
TagsInput mounted () {
}, this.dragControllerDiv();
data() {
return {
// 子组件返回的list
tagList: null,
// 付默认值
defaulList:[],
// 是否去重
listFilter:false
}
}, },
methods: { methods: {
// 标签关闭方法 dragControllerDiv: function () {
tagClose(tag){ var resize = document.getElementsByClassName('resize');
console.log(tag) var left = document.getElementsByClassName('left');
var mid = document.getElementsByClassName('mid');
var box = document.getElementsByClassName('box');
for (let i = 0; i < resize.length; i++) {
// 鼠标按下事件
resize[i].onmousedown = function (e) {
//颜色改变提醒
resize[i].style.background = 'red';
var startX = e.clientX;
console.log("鼠标按下后："+e.clientX)
resize[i].left = resize[i].offsetLeft;
console.log("鼠标按下后："+resize[i].left)
console.log("鼠标按下后："+resize[i].offsetLeft)
// 鼠标拖动事件
document.onmousemove = function (e) {
var endX = e.clientX;
var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
resize[i].style.left = moveLen; // 设置左侧区域的宽度
for (let j = 0; j < left.length; j++) {
left[j].style.width = moveLen + 'px';
mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
} }
};
// 鼠标松开事件
document.onmouseup = function (evt) {
//颜色恢复
resize[i].style.background = '#d6d6d6';
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
}
},
} }
} }
</script> </script>
<style lang="scss" scoped>
/* 拖拽相关样式 */
/*包围div样式*/
.box {
width: 100%;
height: 100%;
margin: 1% 0px;
overflow: hidden;
box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {
width: calc(32% - 10px); /*左侧初始化宽度*/
height: 100%;
background: #FFFFFF;
float: left;
}
/*拖拽区div样式*/
.resize {
cursor: col-resize;
float: left;
position: relative;
top: 45%;
background-color: #d6d6d6;
border-radius: 5px;
margin-top: -10px;
width: 10px;
height: 50px;
background-size: cover;
background-position: center;
/*z-index: 99999;*/
font-size: 32px;
color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
color: #444444;
}
/*右侧div'样式*/
.mid {
float: left;
width: 68%; /*右侧初始化宽度*/
height: 100%;
background: #fff;
box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
}
</style>

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

@ -1,12 +1,10 @@
<template> <template>
<div > <div class="box" ref="box">
<el-container > <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"
<el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box" style="overflow-x:hidden;overflow-y: hidden;"> style="overflow-x:hidden;overflow-y: hidden;">
<el-header class="aside-logo"> <el-header class="aside-logo">
<!-- <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>--> <!-- <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
<div class="logoname"> <div class="logoname">
@ -40,11 +38,9 @@
</div> </div>
<div class="tabBar"> <div class="tabBar">
<div class="" style="width: 100%;height: 30px;background-color: #cacaca;float: left;text-align: center;line-height: 30px" > <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> <i class="el-icon-folder-checked"></i>
<span>新的收藏集</span> <span>新的收藏集</span>
</div> </div>
@ -58,12 +54,16 @@
</el-aside> </el-aside>
<!-- <el-footer class="aside-navigation">--> <!-- <el-footer class="aside-navigation">-->
<!-- </el-footer>--> <!-- </el-footer>-->
</transition> </transition>
<div class="isresize">
</div>
<!-- <el-drawer--> <!-- <el-drawer-->
<!-- title="我是标题"--> <!-- title="我是标题"-->
<!-- :visible.sync="drawer"--> <!-- :visible.sync="drawer"-->
@ -75,14 +75,16 @@
<!-- </el-drawer>--> <!-- </el-drawer>-->
<!-- <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>--> <!-- <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>-->
<el-container >
<el-container class="mid">
<el-header class="header-sousou" style="height: 50px"> <el-header class="header-sousou" style="height: 50px">
<div class="sousou-left"> <div class="sousou-left">
<div class="sousouleft-switch" @click="drawer = true"><i class="el-icon-s-unfold"/></div> <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 class="sousou-leftico" @click="drawer = true"><img
src="https://favicon.lucq.fun/?url=https://www.baidu.com"/></div>
</div> </div>
<div class="sousou-input"> <div class="sousou-input">
@ -108,7 +110,10 @@
</div> </div>
<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-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"> <div class="sousouright-icon">
<el-dropdown trigger="click" size="small" :hide-on-click="false"> <el-dropdown trigger="click" size="small" :hide-on-click="false">
@ -116,7 +121,8 @@
<i class="el-icon-plus" style="font-size: 18px;"/> <i class="el-icon-plus" style="font-size: 18px;"/>
</span> </span>
<el-dropdown-menu slot="dropdown" class="sq-dropdown"> <el-dropdown-menu slot="dropdown" class="sq-dropdown">
<el-dropdown-item class="filter-item" icon="el-icon-plus" @click.native="addbookmarkurl">添加连接</el-dropdown-item> <el-dropdown-item class="filter-item" icon="el-icon-plus" @click.native="addbookmarkurl">添加连接
</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="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="d">导入书签</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
@ -126,13 +132,11 @@
</div> </div>
<div class="header-list"> <div class="header-list">
<el-dropdown trigger="click" size="small" :hide-on-click="false"> <el-dropdown trigger="click" size="small" :hide-on-click="false">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<el-avatar :size="28" src="https://up.raindrop.io/collection/templates/social-media-logos-6/97social.png"></el-avatar> <el-avatar :size="28"
src="https://up.raindrop.io/collection/templates/social-media-logos-6/97social.png"></el-avatar>
</span> </span>
<el-dropdown-menu slot="dropdown" class="sq-dropdown"> <el-dropdown-menu slot="dropdown" class="sq-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="a">外观显示</el-dropdown-item>
@ -155,8 +159,8 @@
</el-container> </el-container>
</el-container>
</el-container>
<!-- 编辑弹窗--> <!-- 编辑弹窗-->
@ -182,7 +186,8 @@
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item prop="menuOrder"> <el-form-item prop="menuOrder">
<div class="labelname">排序(小到大)</div><br/> <div class="labelname">排序(小到大)</div>
<br/>
<el-input-number v-model="form.menuOrder" placeholder="计数器"></el-input-number> <el-input-number v-model="form.menuOrder" placeholder="计数器"></el-input-number>
</el-form-item> </el-form-item>
@ -198,8 +203,6 @@
</el-dialog> </el-dialog>
<!-- 添加链接--> <!-- 添加链接-->
<!-- 添加或修改书签管理对话框 --> <!-- 添加或修改书签管理对话框 -->
<el-dialog title="添加连接" :visible.sync="addopen" width="500px" append-to-body> <el-dialog title="添加连接" :visible.sync="addopen" width="500px" append-to-body>
@ -256,20 +259,20 @@
<el-form-item label="选择状态" prop="start"> <el-form-item label="选择状态" prop="start">
<el-radio-group v-model="form.start" size="medium"> <el-radio-group v-model="form.start" size="medium">
<el-radio v-for="(item, index) in bookmarkstatus" :key="index" :label="item.value" <el-radio v-for="(item, index) in bookmarkstatus" :key="index" :label="item.value"
:disabled="item.disabled">{{item.name}}</el-radio> :disabled="item.disabled">{{item.name}}
</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!-- 1.未读稍后再看 2 已读 2.續看--> <!-- 1.未读稍后再看 2 已读 2.續看-->
<el-form-item label="选择类型" prop="type"> <el-form-item label="选择类型" prop="type">
<el-radio-group v-model="form.type" size="medium"> <el-radio-group v-model="form.type" size="medium">
<el-radio v-for="(item, index) in bookmarktype" :key="index" :label="item.value" <el-radio v-for="(item, index) in bookmarktype" :key="index" :label="item.value"
:disabled="item.disabled">{{item.name}}</el-radio> :disabled="item.disabled">{{item.name}}
</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addbookmark">确 定</el-button> <el-button type="primary" @click="addbookmark">确 定</el-button>
@ -278,10 +281,6 @@
</el-dialog> </el-dialog>
</div> </div>
@ -301,6 +300,7 @@
import "../ztree/zTreeStyle.css" import "../ztree/zTreeStyle.css"
import "../ztree/jquery.ztree.exedit.js" import "../ztree/jquery.ztree.exedit.js"
import {listMenuByUserId} from "@/api/bookmark/menu"; import {listMenuByUserId} from "@/api/bookmark/menu";
export default { export default {
name: 'areaTree', name: 'areaTree',
components: { components: {
@ -348,8 +348,7 @@
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {},
},
drawerS: false, drawerS: false,
drawer: false, drawer: false,
direction: 'ltr', direction: 'ltr',
@ -412,12 +411,19 @@
}], }],
asideHeight: { asideHeight: {
height: "", height: "",
width:"",
} }
} }
}, },
mounted () {
window['editBookmark'] = (e) => {
this.editBookmark(e)
},
//div拖动
this.dragControllerDivs();
},
created() { created() {
var that = this; var that = this;
//书签菜单 //书签菜单
@ -427,7 +433,59 @@
window.addEventListener('resize', this.getHeight); window.addEventListener('resize', this.getHeight);
this.getHeight() this.getHeight()
}, },
methods: { methods: {
/**div拖拽宽度**/
dragControllerDivs: function () {
console.log("开始拖拽")
var resize = document.getElementsByClassName('isresize');
var left = document.getElementsByClassName('main-right');
var mid = document.getElementsByClassName('el-container mid is-vertical');
var box = document.getElementsByClassName('box');
var transition = document.getElementsByClassName('transition-box');
for (let i = 0; i < resize.length; i++) {
// 鼠标按下事件
resize[i].onmousedown = function (e) {
//颜色改变提醒
resize[i].style.background = 'transparent';
var startX = e.clientX;
console.log("鼠标按下后：" + e.clientX)
resize[i].left = resize[i].offsetLeft;
console.log("鼠标按下后：" + resize[i].left)
console.log("鼠标按下后：" + resize[i].offsetLeft)
// 鼠标拖动事件
document.onmousemove = function (e) {
var endX = e.clientX;
var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
resize[i].style.left = moveLen; // 设置左侧区域的宽度
for (let j = 0; j < left.length; j++) {
console.log("開始設置宽度")
left[j].style.width = moveLen + 'px';
// this.asideHeight.width = moveLen + 'px';
mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
}
};
// 鼠标松开事件
document.onmouseup = function (evt) {
//颜色恢复
resize[i].style.background = 'transparent';
document.onmousemove = null;
document.onmouseup = null;
resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
return false;
};
}
},
/**自动获取高度**/ /**自动获取高度**/
getHeight() { getHeight() {
@ -531,11 +589,6 @@
}, },
/** 转换书签菜单数据结构 */ /** 转换书签菜单数据结构 */
normalizer(node) { normalizer(node) {
if (node.children && !node.children.length) { if (node.children && !node.children.length) {
@ -658,7 +711,6 @@
var switchObjspan = $("#" + treeNode.tId + "_span"); var switchObjspan = $("#" + treeNode.tId + "_span");
// console.log("进入addHoverDom:统计"+treeNode.bookmarkCount+"_sz 的数量:"+confCount); // console.log("进入addHoverDom:统计"+treeNode.bookmarkCount+"_sz 的数量:"+confCount);
// console.log("addDiyDom:统计2"+$.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes()[0].bookmarkCount); // console.log("addDiyDom:统计2"+$.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes()[0].bookmarkCount);
//console.log("addDiyDom:统计2"+$.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes()[0]); //console.log("addDiyDom:统计2"+$.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes()[0]);
@ -753,7 +805,6 @@
}, },
editBookmark: function (e) { editBookmark: function (e) {
this.reset(); this.reset();
this.getTreeselect(); this.getTreeselect();
@ -829,11 +880,7 @@
}, },
mounted(){
window['editBookmark'] = (e) => {
this.editBookmark(e)
}
},
destroyed() { destroyed() {
window.removeEventListener('resize', this.getHeight) window.removeEventListener('resize', this.getHeight)
}, },
@ -842,52 +889,107 @@
}, },
} }
</script> </script>
<style > <style >
body { body {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
} }
.ztree li ul{ margin:0; padding:0} .ztree li ul {
.ztree li {line-height:32px} margin: 0;
.ztree li a {width:200px;height:32px;padding-top: 0px;font-size: 14px;width:100%} padding: 0
.ztree li a:hover {text-decoration:none; background-color: #E5E5E5;} }
.ztree li a span.button.switch {vertical-align:middle}
.ztree.showIcon li a span.button.switch {visibility:visible}
.ztree li a.curSelectedNode {background-color:#E5E5E5;border:0;height:32px;}
.ztree li span {line-height:32px;}
.ztree li span.button {margin-top: 0px;margin-left:2px;width: 20px;height: 20px;}
.ztree li span.button.switch {width: 20px;height: 20px;} .ztree li {
line-height: 32px
}
.ztree li a {
width: 200px;
height: 32px;
padding-top: 0px;
font-size: 14px;
width: 100%
}
.ztree li a:hover {
text-decoration: none;
background-color: #E5E5E5;
}
.ztree li a span.button.switch {
vertical-align: middle
}
.ztree.showIcon li a span.button.switch {
visibility: visible
}
.ztree li a.curSelectedNode {
background-color: #E5E5E5;
border: 0;
height: 32px;
}
.ztree li span {
line-height: 32px;
}
.ztree li span.button {
margin-top: 0px;
margin-left: 2px;
width: 20px;
height: 20px;
}
.ztree li span.button.switch {
width: 20px;
height: 20px;
}
/*.ztree li a.level0 span {font-size: 100%;font-weight: bold}*/ /*.ztree li a.level0 span {font-size: 100%;font-weight: bold}*/
.ztree li span.button {background-image:url("../ztree/bottom.png");} .ztree li span.button {
.ztree li span.button.switch.level0 {width: 20px; height:20px} background-image: url("../ztree/bottom.png");
.ztree li span.button.switch.level1 {width: 20px; height:20px} }
.ztree li span.button.noline_open {background-position: 0 0;}
.ztree li span.button.noline_close {background-position: 0 0;background-image:url("../ztree/right.png");} .ztree li span.button.switch.level0 {
width: 20px;
height: 20px
}
.ztree li span.button.switch.level1 {
width: 20px;
height: 20px
}
.ztree li span.button.noline_open {
background-position: 0 0;
}
.ztree li span.button.noline_close {
background-position: 0 0;
background-image: url("../ztree/right.png");
}
/*.ztree li span.button.noline_open.level0 {background-position: 0 0;}*/ /*.ztree li span.button.noline_open.level0 {background-position: 0 0;}*/
/*.ztree li span.button.noline_close.level0 {background-position:-18px 0;}*/ /*.ztree li span.button.noline_close.level0 {background-position:-18px 0;}*/
.ztree li span.button.ico_close{vertical-align: middle} .ztree li span.button.ico_close {
vertical-align: middle
}
.ztree li span.button.ico_open{vertical-align: middle} .ztree li span.button.ico_open {
vertical-align: middle
}
.ztree li span.button.ico_docu {vertical-align: middle} .ztree li span.button.ico_docu {
vertical-align: middle
}
.ztr { .ztr {
@ -911,6 +1013,7 @@
overflow-y: hidden; overflow-y: hidden;
} }
aside { aside {
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
@ -929,32 +1032,39 @@
.aside-title { .aside-title {
height: 32px; height: 32px;
} }
.aside-title:hover { .aside-title:hover {
background-color: #c5c5c5; background-color: #c5c5c5;
} }
.aside-title i { .aside-title i {
margin-left: 26px; margin-left: 26px;
font-size: 20px; font-size: 20px;
margin-right: 11px; margin-right: 11px;
vertical-align: middle; vertical-align: middle;
} }
.aside-title span { .aside-title span {
font-size: 14px; font-size: 14px;
margin-right: 11px; margin-right: 11px;
} }
.aside-logo { .aside-logo {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.aside-logo div { .aside-logo div {
width: 50%; width: 50%;
} }
.logoname span { .logoname span {
margin-left: 8px; margin-left: 8px;
font-family: "PingFang SC"; font-family: "PingFang SC";
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
} }
.logoright i { .logoright i {
float: right; float: right;
display: block; display: block;
@ -968,17 +1078,12 @@
} }
.logoright i:active { .logoright i:active {
background-color: #7a6df0; background-color: #7a6df0;
color: #FFFFFF; color: #FFFFFF;
} }
.reminder { .reminder {
margin-left: 27px; margin-left: 27px;
color: #878787; color: #878787;
@ -993,6 +1098,7 @@
background-color: #a0c4ff; background-color: #a0c4ff;
} }
.filter { .filter {
/*width: 100%;*/ /*width: 100%;*/
/*height: 30px;*/ /*height: 30px;*/
@ -1004,6 +1110,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-sort { .filter-sort {
color: #7e868d; color: #7e868d;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -1px 0 rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -1px 0 rgba(0, 0, 0, .04);
@ -1017,6 +1124,7 @@
padding: 0 8px; padding: 0 8px;
} }
.filter-sort:hover { .filter-sort:hover {
color: #6f8eee; color: #6f8eee;
background-color: #e6e6e6; background-color: #e6e6e6;
@ -1024,24 +1132,24 @@
} }
.bookmarkmain { .bookmarkmain {
padding-top: 0px !important; padding-top: 0px !important;
} }
.separator { .separator {
float: left; float: left;
} }
.filter-sort i { .filter-sort i {
margin-left: -4px; margin-left: -4px;
margin-right: -1px; margin-right: -1px;
} }
.filter div { .filter div {
margin-bottom: 3px; margin-bottom: 3px;
} }
.header-sousou { .header-sousou {
display: flex; display: flex;
} }
@ -1056,6 +1164,7 @@
} }
.header-sousou input:focus { .header-sousou input:focus {
background-color: #FFFFFF !important; background-color: #FFFFFF !important;
border: 1px solid #C0C4CC; border: 1px solid #C0C4CC;
@ -1072,7 +1181,6 @@
} }
.sousou-input { .sousou-input {
width: 82.5%; width: 82.5%;
@ -1080,24 +1188,25 @@
} }
.header-list { .header-list {
/*line-height: 50px;*/ /*line-height: 50px;*/
margin-top: 10px; margin-top: 10px;
/*align-content: center;*/ /*align-content: center;*/
/*justify-content: center;*/ /*justify-content: center;*/
} }
.header-list:hover { .header-list:hover {
color: #7a6df0; color: #7a6df0;
} }
.header-list i { .header-list i {
font-size: 25px; font-size: 25px;
margin-right: 2px; margin-right: 2px;
} }
.main-label span i { .main-label span i {
margin-left: 5px; margin-left: 5px;
} }
@ -1105,9 +1214,11 @@
.main-label span { .main-label span {
line-height: 22px; line-height: 22px;
} }
.main-label :nth-child(1) { .main-label :nth-child(1) {
margin-right: -1px; margin-right: -1px;
} }
.main-label :nth-child(2) { .main-label :nth-child(2) {
margin-right: 5px; margin-right: 5px;
} }
@ -1135,6 +1246,7 @@
color: #545454; color: #545454;
font-size: 13px; font-size: 13px;
} }
.bookmark { .bookmark {
height: 65px; height: 65px;
} }
@ -1144,6 +1256,7 @@
margin-right: 5px; margin-right: 5px;
} }
.bookmark-icon img { .bookmark-icon img {
width: 14px; width: 14px;
height: 14px; height: 14px;
@ -1151,17 +1264,19 @@
} }
.bookmark-official { .bookmark-official {
float: left; float: left;
} }
.info { .info {
font-size: 12px; font-size: 12px;
} }
.info-wrap { .info-wrap {
color: #8c8c8c; color: #8c8c8c;
} }
.bookmark-time { .bookmark-time {
float: left; float: left;
@ -1173,6 +1288,7 @@
margin-top: 2px !important; margin-top: 2px !important;
margin-bottom: 7px !important; margin-bottom: 7px !important;
} }
.sousouleft-switch { .sousouleft-switch {
width: 30px; width: 30px;
@ -1188,6 +1304,7 @@
opacity: 0.8; opacity: 0.8;
} }
.sousou-left { .sousou-left {
display: flex; display: flex;
} }
@ -1224,24 +1341,29 @@
border-left: #8c8c8c 1px solid; border-left: #8c8c8c 1px solid;
margin-left: 10px; margin-left: 10px;
} }
.bookmarklist { .bookmarklist {
width: 100%; width: 100%;
height: 600px; height: 600px;
/*background-color: #fff;*/ /*background-color: #fff;*/
float: left float: left
} }
.sousouright-icon { .sousouright-icon {
margin-right: 24px; margin-right: 24px;
margin-top: 10px; margin-top: 10px;
} }
.sq-dropdown { .sq-dropdown {
top: 33px !important; top: 33px !important;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2) !important; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2) !important;
font-weight: 800 !important; font-weight: 800 !important;
} }
.sq-dropdown div { .sq-dropdown div {
display: none !important; display: none !important;
} }
.labelname { .labelname {
font-weight: 800; font-weight: 800;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
@ -1249,17 +1371,21 @@
margin-bottom: -10px; margin-bottom: -10px;
margin-right: 5px; margin-right: 5px;
} }
.el-form-item__content { .el-form-item__content {
margin-left: 0px !important; margin-left: 0px !important;
} }
.el-dialog__body { .el-dialog__body {
padding-top: 0px !important; padding-top: 0px !important;
} }
.custom-input input { .custom-input input {
border: 0px; border: 0px;
border-radius: 0px; border-radius: 0px;
border-bottom: 1px solid #C0C4CC; border-bottom: 1px solid #C0C4CC;
} }
.custom-input input:focus { .custom-input input:focus {
border: 0px; border: 0px;
border-radius: 0px; border-radius: 0px;
@ -1272,9 +1398,11 @@
border-radius: 0px; border-radius: 0px;
border-bottom: 1px solid #409EFF; border-bottom: 1px solid #409EFF;
} }
.addbookmarkurl input:focus { .addbookmarkurl input:focus {
border-bottom: 1px solid #409EFF; border-bottom: 1px solid #409EFF;
} }
.addbookmarkurl input:hover { .addbookmarkurl input:hover {
border-bottom: 1px solid #409EFF; border-bottom: 1px solid #409EFF;
@ -1296,11 +1424,13 @@
float: left; float: left;
font-size: 13px; font-size: 13px;
} }
.addbookmarkurl-button { .addbookmarkurl-button {
float: left; float: left;
margin-left: 5px; margin-left: 5px;
border: 1px solid #409EFF !important; border: 1px solid #409EFF !important;
} }
.addbookmarkurl-button:hover { .addbookmarkurl-button:hover {
background-color: #409EFF !important; background-color: #409EFF !important;
color: #FFFFFF !important; color: #FFFFFF !important;
@ -1322,7 +1452,7 @@
.main-right { .main-right {
/*overflow:scroll;*/ /*overflow:scroll;*/
/*width: 300px;*/ width: 300px;
height: 85%; height: 85%;
min-height: 40%; min-height: 40%;
overflow: auto; overflow: auto;
@ -1332,6 +1462,7 @@
z-index: 1; z-index: 1;
} }
.main-right::-webkit-scrollbar { .main-right::-webkit-scrollbar {
/*滚动条整体样式*/ /*滚动条整体样式*/
width: 0px; width: 0px;
@ -1348,6 +1479,7 @@
} }
/*定义滚动条轨道 内阴影+圆角 透明效果*/ /*定义滚动条轨道 内阴影+圆角 透明效果*/
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1360,14 +1492,47 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
} }
.popover-suosou { .popover-suosou {
width: 70% !important; width: 70% !important;
top: 40px; top: 40px;
left: 72px; left: 72px;
} }
/* 拖拽相关样式 */
/*包围div样式*/
/*拖拽区div样式*/
.isresize {
background-color: transparent ;
/*border-radius: 6px;*/
width: 12px;
/*height: 50px;*/
font-size: 25px;
color: white;
/*margin-top: 23%;*/
}
/*拖拽区鼠标悬停样式*/
.isresize:hover {
/*color: #f2f2f2;*/
/*color: #f2f2f2;*/
}
.isresize i{
line-height: 36px;
transform: rotate(90deg);
width: 8px;
}
.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属性 */
}
</style> </style>