|
|
@@ -11,8 +11,25 @@
|
|
|
<div>
|
|
|
<!-- 右边弹窗 -->
|
|
|
<div :class="mailCon">
|
|
|
- <div :class="iconCon">
|
|
|
- <i :class="iconClose" @click="handleClose(iconClose)"></i>
|
|
|
+ <div class="changeBox" @click="handleClose()">
|
|
|
+ <!-- <i v-if="showRight" class="iconfont icon-icomx_rightt1"></i> -->
|
|
|
+ <!-- <i v-if="!showRight" class="iconfont icon-iconm_leftt1"></i> -->
|
|
|
+
|
|
|
+ <el-icon
|
|
|
+ v-if="!showRight"
|
|
|
+ color="#fff"
|
|
|
+ size="18"
|
|
|
+ style="margin-top: 10px"
|
|
|
+ ><Back
|
|
|
+ /></el-icon>
|
|
|
+ <el-icon
|
|
|
+ v-if="showRight"
|
|
|
+ color="#fff"
|
|
|
+ size="18"
|
|
|
+ style="margin-top: 10px"
|
|
|
+ >
|
|
|
+ <Right
|
|
|
+ /></el-icon>
|
|
|
</div>
|
|
|
<mailRight v-show="showRight" />
|
|
|
</div>
|
|
|
@@ -25,27 +42,14 @@ import mailLeft from "./com/left.vue";
|
|
|
import mailMain from "./com/main.vue";
|
|
|
import mailRight from "./com/right.vue";
|
|
|
const mailCon = ref("mail-right-con");
|
|
|
-const iconCon = ref("icon-con");
|
|
|
-const iconClose = ref("iconfont icon-iconm_yewtx");
|
|
|
const showRight = ref(true);
|
|
|
-const handleClose = (icon) => {
|
|
|
- let iconConArr = "";
|
|
|
- let iconArr = "";
|
|
|
- let conArr = "";
|
|
|
- if (icon.split(" ").indexOf("icon-closed") !== -1) {
|
|
|
- iconConArr = "icon-con";
|
|
|
- iconArr = "iconfont icon-iconm_yewtx";
|
|
|
- conArr = "mail-right-con";
|
|
|
- showRight.value = true;
|
|
|
+const handleClose = () => {
|
|
|
+ if (showRight.value) {
|
|
|
+ mailCon.value = "mail-right-con move-to-close";
|
|
|
} else {
|
|
|
- iconConArr = "icon-con icon-con-closed";
|
|
|
- iconArr = "iconfont icon-iconm_yewtx icon-closed";
|
|
|
- conArr = "mail-right-con move-to-close";
|
|
|
- showRight.value = false;
|
|
|
+ mailCon.value = "mail-right-con";
|
|
|
}
|
|
|
- mailCon.value = conArr;
|
|
|
- iconClose.value = iconArr;
|
|
|
- iconCon.value = iconConArr;
|
|
|
+ showRight.value = !showRight.value;
|
|
|
};
|
|
|
const route = useRoute();
|
|
|
const leftDom = ref(null);
|
|
|
@@ -58,12 +62,11 @@ onMounted(() => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.box {
|
|
|
- width: calc(100vw - 20px);
|
|
|
+ width: calc(100vw - 0px);
|
|
|
height: calc(100vh - 50px - 50px);
|
|
|
padding: 10px;
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
- // box-sizing: border-box;
|
|
|
|
|
|
.left,
|
|
|
.right {
|
|
|
@@ -79,25 +82,36 @@ onMounted(() => {
|
|
|
}
|
|
|
.mail-right {
|
|
|
position: absolute;
|
|
|
- right: 10px;
|
|
|
+ right: 0px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.mail-right-con {
|
|
|
+ .changeBox {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ left: -40px;
|
|
|
+ top: 10px;
|
|
|
+ background: #ff9315;
|
|
|
+ border-radius: 10px 0px 0px 10px;
|
|
|
+ }
|
|
|
// border-radius: 5px;
|
|
|
border-top-left-radius: 5px;
|
|
|
border-bottom-left-radius: 5px;
|
|
|
z-index: 1000;
|
|
|
position: fixed;
|
|
|
- margin-top: 100px;
|
|
|
+ margin-top: 50px;
|
|
|
top: 0;
|
|
|
width: 400px;
|
|
|
transition: all cubic-bezier(0.05, 0.91, 0.22, 1.03) 0.5s;
|
|
|
- padding: 0px 10px;
|
|
|
- height: calc(100vh - 50px - 50px - 10px);
|
|
|
+ padding: 10px 15px 0px 15px;
|
|
|
+ height: calc(100vh - 50px - 10px);
|
|
|
background: white;
|
|
|
left: 100%;
|
|
|
- margin-left: -428px;
|
|
|
+ margin-left: -398px;
|
|
|
box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 20px 0)
|
|
|
var(--devui-shadow, rgba(0, 0, 0, 0.08));
|
|
|
i {
|
|
|
@@ -111,7 +125,6 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.move-to-close {
|
|
|
transform: translateX(400px);
|
|
|
.mail-right {
|
|
|
@@ -119,25 +132,4 @@ onMounted(() => {
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
-.icon-closed {
|
|
|
- // display: block;
|
|
|
- transform: rotate(-180deg);
|
|
|
- &:hover {
|
|
|
- transform: rotate(180deg) !important;
|
|
|
- }
|
|
|
-}
|
|
|
-.icon-con {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- text-align: center;
|
|
|
- line-height: 30px;
|
|
|
- left: 100%;
|
|
|
- // top: 13px;
|
|
|
- margin-left: -17px;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.icon-con-closed {
|
|
|
- left: 0;
|
|
|
- margin-left: -10px;
|
|
|
-}
|
|
|
</style>
|
cz