byte-sailing-new/connect/E-mail/mail/com/right.vue

<template>
  <div style="height: calc(100vh - 50px - 50px - 10px - 30px)">
    <!-- <el-radio-group v-model="headRadio" size="mini">
      <el-radio-button label="1">合同制作</el-radio-button>
      <el-radio-button label="2">单证</el-radio-button>
      <el-radio-button label="3">采购合同</el-radio-button>
      <el-radio-button label="4">网盘资料</el-radio-button>
    </el-radio-group> -->
    <el-tabs v-model="headRadio" style="font-size: 13px" stretch>
      <el-tab-pane label="合同制作" name="1"> </el-tab-pane>
      <el-tab-pane label="单证" name="2"> </el-tab-pane>
      <el-tab-pane label="采购合同" name="3"> </el-tab-pane>
      <el-tab-pane label="网盘资料" name="4"> </el-tab-pane>
    </el-tabs>
    <div v-show="headRadio === '1'">
      <Contract></Contract>
    </div>
    <div v-show="headRadio === '2'">
      <Documents></Documents>
    </div>
    <div v-show="headRadio === '3'">
      <Purchase></Purchase>
    </div>
    <div v-show="headRadio === '4'">
      <Netdisk></Netdisk>
    </div>
  </div>
</template>

<script setup>
import Contract from "./right/contract/index.vue";
import Documents from "./right/documents/index.vue";
import Purchase from "./right/purchase/index.vue";
import Netdisk from "./right/netdisk/index.vue";

const headRadio = ref("");
onMounted(() => {
  headRadio.value = "1";
});
</script>
<style lang="scss" scoped>
* {
  font-size: 12px;
}
// :deep(.el-radio-button__inner) {
//   font-size: 12px;
//   padding: 6px 10px;
// }
:deep(.el-tabs__item) {
  font-size: 12px;
  line-height: 30px;
  height: 30px;
  font-weight: normal;
}
:deep(.el-tabs__header) {
  margin: 10px 0;
}
</style>