xmhjc-front-end/connect/E-mail/mail/index.vue

<template>
  <div>
    <div class="box">
      <div class="left">
        <mailLeft ref="leftDom"></mailLeft>
      </div>
      <div class="right">
        <mailMain @changeFloderId="handleChangeFloderId"></mailMain>
      </div>
    </div>
    <div>
      <!-- 右边弹窗 -->
      <div :class="mailCon">
        <div class="changeBox" @click="handleClose()">
          <span
            v-if="showRight"
            class="iconfont icon-icomx_rightt1"
            style="color: #fff; font-size: 20px"
          ></span>
          <span
            v-if="!showRight"
            class="iconfont icon-iconm_leftt1"
            style="color: #fff; font-size: 20px"
          ></span>
        </div>
        <mailRight v-show="showRight" />
      </div>
    </div>
  </div>
</template>

<script setup>
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 showRight = ref(true);
const handleClose = () => {
  if (showRight.value) {
    mailCon.value = "mail-right-con move-to-close";
  } else {
    mailCon.value = "mail-right-con";
  }
  showRight.value = !showRight.value;
};
const route = useRoute();
const leftDom = ref(null);

const handleChangeFloderId = (val) => {
  leftDom.value.changeFloderId(val);
};

onMounted(() => {
  if (route.query.mail) {
    leftDom.value.handleGoWrite({ email: route.query.mail, personal: null });
  }
});
</script>

<style lang="scss" scoped>
.box {
  width: calc(100vw - 0px);
  height: calc(100vh - 50px - 50px);
  padding: 10px;
  display: flex;
  position: relative;

  .left,
  .right {
    background: #fff;
  }
  .left {
    width: 300px;
    margin-right: 10px;
    box-sizing: border-box;
  }
  .right {
    flex: 1;
  }
  .mail-right {
    position: absolute;
    right: 0px;
  }
}

.mail-right-con {
  .changeBox {
    width: 40px;
    height: 40px;
    position: absolute;
    text-align: center;
    line-height: 40px;
    left: -40px;
    top: 5px;
    background: #ff9315;
    border-radius: 10px 0px 0px 10px;
    cursor: pointer;
  }
  // border-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 1000;
  position: fixed;
  margin-top: 50px;
  top: 0;
  width: 400px;
  transition: all cubic-bezier(0.05, 0.91, 0.22, 1.03) 0.5s;
  padding: 10px 15px 0px 15px;
  height: calc(100vh - 50px - 10px);
  background: white;
  left: 100%;
  margin-left: -398px;
  box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 20px 0)
    var(--devui-shadow, rgba(0, 0, 0, 0.08));
  i {
    cursor: pointer;
    transition: all cubic-bezier(0, 0.88, 0, 1.29) 1s;
    font-size: 15px;
    position: relative;
    &:hover {
      color: #169bd5;
      transform: rotate(360deg);
    }
  }
}
.move-to-close {
  transform: translateX(400px);
  .mail-right {
    transition: all linear 0.3s;
    padding-left: 20px;
  }
}
</style>