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 18:11:27 +08:00
parent 96186a3b07
commit 9287eaaaa9
1 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,7 @@
</transition> </transition>
<div class="isresize"> <div class="isresize">
<i class="el-icon-caret-top"></i>
</div> </div>
<!-- <el-drawer--> <!-- <el-drawer-->
<!-- title="我是标题"--> <!-- title="我是标题"-->
@ -466,7 +466,6 @@
resize[i].style.left = moveLen; // 设置左侧区域的宽度 resize[i].style.left = moveLen; // 设置左侧区域的宽度
for (let j = 0; j < left.length; j++) { for (let j = 0; j < left.length; j++) {
console.log("開始設置宽度")
left[j].style.width = moveLen + 'px'; left[j].style.width = moveLen + 'px';
// this.asideHeight.width = moveLen + 'px'; // this.asideHeight.width = moveLen + 'px';
mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px'; mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
@ -1018,8 +1017,13 @@
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
/*background:url('https://ftp.bmp.ovh/imgs/2020/08/4ac1d6b4f41049ef.jpg') no-repeat;*/ /*background:url('https://ftp.bmp.ovh/imgs/2020/08/4ac1d6b4f41049ef.jpg') no-repeat;*/
background-color: #F6F6F6; /*background-color: #F6F6F6;*/
/*background: url("https://s1.ax1x.com/2020/08/16/dEcqVU.jpg") no-repeat;*/ background: url("https://s1.ax1x.com/2020/08/16/dEcqVU.jpg") no-repeat;
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
/*background-size: cover;*/ /*background-size: cover;*/
/*z-index: -1;!*-1 可以当背景*!*/ /*z-index: -1;!*-1 可以当背景*!*/
@ -1504,23 +1508,24 @@
/*拖拽区div样式*/ /*拖拽区div样式*/
.isresize { .isresize {
background-color: transparent; background-color: transparent;
width: 10px;
/*border-radius: 6px;*/
width: 12px;
/*height: 50px;*/
font-size: 25px; font-size: 25px;
color: white; display:-webkit-flex;
/*margin-top: 23%;*/ justify-content:center;
align-items:center;
background-color: transparent;
color: transparent;
} }
/*拖拽区鼠标悬停样式*/ /*拖拽区鼠标悬停样式*/
.isresize:hover{ .isresize:hover{
/*color: #f2f2f2;*/ color: #a4a4a4;
/*color: #f2f2f2;*/
} }
.isresize i{ .isresize i{
line-height: 36px; margin-left: 2px;
transform: rotate(90deg); transform: rotate(90deg);
width: 8px; width: 10px;
/*color: transparent;*/
/*background-color: black;*/
} }
.main-right{ .main-right{
min-width: 250px; min-width: 250px;