|
@@ -1,40 +1,12 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div class='action-box'>
|
|
|
- <div class='small-block'>
|
|
|
- <el-dropdown size='mini' placement='top-start' @command='handleCommand'>
|
|
|
- <i>
|
|
|
- <!-- <img src='../../assets/imgs/dl.png' alt /> -->
|
|
|
- </i>
|
|
|
- <el-dropdown-menu slot='dropdown'>
|
|
|
- <el-dropdown-item command='savePng'>保存为png</el-dropdown-item>
|
|
|
- <!-- <el-dropdown-item command='saveSvg'>保存为svg</el-dropdown-item> -->
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
- <div class='small-block' @click='showText'>
|
|
|
- <i>
|
|
|
- <el-tooltip v-if='isShow' effect='dark' content='隐藏店铺名称' placement='top'>
|
|
|
- <!-- <img src='../../assets/imgs/yl.png' alt /> -->
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip v-else effect='dark' content='显示店铺名称' placement='top'>
|
|
|
- <!-- <img src='../../assets/imgs/er.png' alt /> -->
|
|
|
- </el-tooltip>
|
|
|
- </i>
|
|
|
- </div>
|
|
|
<div class='small-block' @click='fitToWindow'>
|
|
|
- <i>
|
|
|
- <!-- <img src='../../assets/imgs/eye2.jpg' alt /> -->
|
|
|
- </i>
|
|
|
- </div>
|
|
|
- <div class='small-size' @click='reduce'>
|
|
|
- <i>-</i>
|
|
|
- </div>
|
|
|
- <div class='small-slide'>
|
|
|
- <el-slider tooltip-class='tooltip-class' :min='min' v-model='sliderVal' :show-tooltip='false' @input='scale' :max='max'></el-slider>
|
|
|
+ <i class="iconfont wanda-suofang"></i>
|
|
|
</div>
|
|
|
- <div class='small-size' @click='plus'>
|
|
|
- <i>+</i>
|
|
|
+ <div class='small-block' @click='showText'>
|
|
|
+ <i v-if='isShow' class="iconfont wanda-yulan" title="隐藏店铺名称"></i>
|
|
|
+ <i v-else class="iconfont wanda-yincang" title="显示店铺名称"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -108,18 +80,19 @@ export default {
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.action-box {
|
|
|
- width: 400px;
|
|
|
- height: 40px;
|
|
|
+ width: 40px;
|
|
|
background: rgba(255, 255, 255, 1);
|
|
|
box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
|
|
|
border-radius: 2px;
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
overflow: hidden;
|
|
|
.small-block {
|
|
|
border-right: 1px solid #e4e5e7;
|
|
|
padding: 12px;
|
|
|
+ position: relative;
|
|
|
cursor: pointer;
|
|
|
i {
|
|
|
width: 16px;
|
|
@@ -130,48 +103,27 @@ export default {
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -20%;
|
|
|
+ bottom: 0;
|
|
|
+ content: "";
|
|
|
+ width: 14px;
|
|
|
+ height: 1px;
|
|
|
+ background: rgba(195, 199, 203, 1);
|
|
|
+ border: 0px solid rgba(228, 229, 231, 1);
|
|
|
+ }
|
|
|
}
|
|
|
- .small-size {
|
|
|
- cursor: pointer;
|
|
|
- padding: 12px;
|
|
|
- font-size: 28px;
|
|
|
- }
|
|
|
- .small-slide {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- padding: 0 8px;
|
|
|
- margin-top: 10px;
|
|
|
- border-left: 1px solid #e4e5e7;
|
|
|
- border-right: 1px solid #e4e5e7;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="less">
|
|
|
-.action-box {
|
|
|
- .el-slider__button {
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- border: 2px solid #025baa;
|
|
|
- }
|
|
|
- .el-slider__runway {
|
|
|
- height: 3px;
|
|
|
- background-color: #e4e7ed;
|
|
|
- background: rgba(0, 0, 0, 0.45);
|
|
|
- border-radius: 1px;
|
|
|
- }
|
|
|
- .el-slider__button-wrapper {
|
|
|
- top: -17px;
|
|
|
- }
|
|
|
- .el-slider__bar {
|
|
|
- height: 3px;
|
|
|
- background-color: #025baa;
|
|
|
- border-top-left-radius: 1px;
|
|
|
- border-bottom-left-radius: 1px;
|
|
|
+ .small-block:last-child {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
}
|
|
|
- .action-box .el-slider__runway {
|
|
|
- background-color: #e8e8e8 !important;
|
|
|
- background: #e8e8e8 !important;
|
|
|
+ .small-block:active {
|
|
|
+ background: #D2D9DF;
|
|
|
}
|
|
|
}
|
|
|
</style>
|