cloudfile-ui/src/layout/indexCommon.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="nav" style="position: sticky; top: 0; left: 0; width: 100%; z-index: 999">
        <div class="nav-top">
          <div>
            <img class="logoImg" src="@/assets/images/logos.png" /><span>聚合智慧文档管理系统</span>
          </div>
          <div class="search">
            <el-input v-model="searchText" maxlength="32" class="w-50 m-2" size="small" placeholder="搜索文件"
              suffix-icon="Search" clearable @keyup.enter="toSearch" />
          </div>
          <div>
            <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
              <div class="avatar-wrapper">
                <img :src="userStore.avatar
                  ? userStore.avatar
                  : '@/assets/images/profile.png'
                  " class="head-img" /><span style="cursor: pointer;margin-right: 6px;">{{ userStore.name }}</span>
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <router-link to="/user/profile">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item divided command="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="92px" class="asides">
          <div class="aside-con">
            <router-link :to="item.path" v-for="(item, index) in menuList.data" :key="index"
              @click="clickPath(index, item)">
              <div style="position: relative" :class="$route.path == item.path
                ? 'acitve-img-style img-style'
                : 'img-style'
                ">
                <img :src="$route.path == item.path ? item.beimgs : item.imgs" />
                <div class="text-style" v-if="$route.path != item.path">
                  {{ item.label }}
                </div>
                <span class="yuandian" v-if="hasNewMessage &&
                  item.path == '/index' &&
                  ($route.path != item.path || isSwitchFileIframe)
                  "></span>
              </div>
            </router-link><br />
          </div>
        </el-aside>
        <el-main class="main">
          <div class="tab_box">
            <!-- <el-tabs
              v-model="editableTabsValue"
              @tab-change="clickTab"
              @tab-add="addTab"
              type="card"
              class="common-tabs"
            > -->
            <el-tabs v-model="editableTabsValue" @tab-add="addTab" type="card" class="common-tabs">
              <!-- <el-tab-pane label="首页" @click="clickTab('/index')"> </el-tab-pane> -->
              <el-tab-pane v-for="(item, index) in toRaw(editableTabs)" :key="item.path" :label="item.label"
                :name="item.path" :data-item="JSON.stringify(item)">
                <template #label>
                  <div class="tab_pane" @click="paneClick(item)">
                    <div class="tab_text">{{ item.label }}</div>
                    <img v-if="item.label != '首页'" src="@/assets/images/close.png" @click="closeTab(item, index, $event)"
                      alt="" />
                  </div>
                  <!-- <router-link
                    :key="item"
                    :data-path="item.path"
                    :to="{
                      path: item.path,
                      query: { row: item.clickRowId },
                    }"
                    @click="paneClick(item)"
                    class="tags-view-item"
                  >
                    {{ item.label }}
                  </router-link> -->
                </template>
              </el-tab-pane>
              <!-- 文件的iframe -->
              <div v-for="item in iFrameData" :key="item.id">
                <el-tab-pane :label="item.name" :name="item.id" v-if="item.src">
                  <template #label>
                    <div class="tab_pane" @click="filePaneClick(item)">
                      <div class="tab_text">{{ item.name }}</div>
                      <img src="@/assets/images/close.png" @click="closeFileTab(item, index, $event)" alt="" />
                    </div>
                  </template>
                </el-tab-pane>
              </div>
            </el-tabs>
          </div>
          <div v-show="isAlive">
            <router-view v-slot="{ Component }" :key="$router.currentRoute.value.fullPath">
              <KeepAlive :exclude="['identifyFont', 'allback', 'search']">
                <component :is="Component" />
              </KeepAlive>
            </router-view>
          </div>
          <div v-show="!isAlive" style="width: 100%">
            <div v-for="item in iFrameData" :key="item.id">
              <div style="width: 100%" v-show="item.show">
                <iframe :src="item.src" frameborder="0" :id="`iframe${item.id}`" :name="`iframe${item.id}`" width="100%"
                  height="800px" class="iframeBox" v-show="item.show"></iframe>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { nextTick, onMounted, provide, ref, watchEffect, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import useAppStore from "@/store/modules/app";
import useUserStore from "@/store/modules/user";
import useSettingsStore from "@/store/modules/settings";
import Cookies from "js-cookie";
import chat from "@/assets/images/chat.png";
import bechat from "@/assets/images/bechat.png";
import zuijin from "@/assets/images/zuijin.png";
import bezuijin from "@/assets/images/bezuijin.png";
import colloect from "@/assets/images/colloect.png";
import becolloect from "@/assets/images/becolloect.png";
import system from "@/assets/images/system.png";
import issystem from "@/assets/images/issystem.png";
import my from "@/assets/images/my.png";
import bemy from "@/assets/images/bemy.png";
import bumen from "@/assets/images/bumen.png";
import bebumen from "@/assets/images/bebumen.png";
import common from "@/assets/images/common.png";
import becommon from "@/assets/images/becommon.png";
import chuanshu from "@/assets/images/chuanshu.png";
import bechuanshu from "@/assets/images/bechuanshu.png";
import highsearch from "@/assets/images/highsearch.png";
import behighsearch from "@/assets/images/behighsearch.png";
import manyBody from "@/assets/images/manyBody.png";
import manyBodyFalse from "@/assets/images/manyBodyFalse.png";
import { AppMain, Navbar, Settings, TagsView } from "./components";
import { flieSearch } from "@/api/search/search.js";
import { useRouter, useRoute } from "vue-router";
import useWebsoctStore from "@/store/modules/websocket";
import { toRaw } from "@vue/reactivity";
import iFrame from "@/components/iFrame/index.vue";
const websoctStore = useWebsoctStore();
const router = useRouter(); //注册路由
const route = useRoute();
const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();
const searchText = ref(""); //搜索ipt的值
const selectValue = ref(1); //文档空间类型
const wangzhi = import.meta.env.VITE_APP_BASE_API;
const isAlive = ref(true);
const toFileData = ref();
const uid = useUserStore().uid;
let hasNewMessage = ref(false)
let isSwitchFileIframe = ref(false); //是否切换到文件预览标签
const iFrameData = ref(JSON.parse(sessionStorage.getItem('fileTabData')) || [
  {
    id: 1,
    // src: `${window.location.origin}/fileEdit?clickRowId=113`,
    show: false,
    name: "file1",
    docId: ''
  },
  {
    id: 2,
    src: ``,
    // src: `http://192.168.1.9:81/fileEdit?clickRowId=1198`,
    show: false,
    name: "file2",
    docId: ''
  },
  {
    id: 3,
    src: ``,
    show: false,
    name: "",
    docId: ''
  },
  {
    id: 4,
    src: ``,
    show: false,
    name: "",
    docId: ''
  },
  {
    id: 5,
    src: ``,
    show: false,
    name: "",
    docId: ''
  },
  {
    id: 6,
    src: ``,
    show: false,
    name: "",
    docId: ''
  },
  {
    id: 7,
    src: ``,
    show: false,
    name: "",
    docId: ''
  },
  {
    id: 8,
    src: ``,
    show: false,
    name: "",
    docId: ''
  },
  {
    id: 9,
    src: ``,
    show: false,
    name: "",
    docId: ''
  },
  {
    id: 10,
    src: ``,
    show: false,
    name: "",
    docId: ''
  },
]);
//--------tabs-----------------
let tabIndex = 2;
const editableTabsValue = ref(JSON.parse(sessionStorage.getItem('editableTabsValue')) || "/index");
// const editableTabsValue = ref("/index");
const editableTabs = ref(JSON.parse(sessionStorage.getItem('tabData')) || [{ label: '首页', path: '/reindex' }]);

// const removeTab = (targetName) => {
//   const tabs = editableTabs.value;
//   let activeName = editableTabsValue.value;
//   if (activeName === targetName) {
//     tabs.forEach((tab, index) => {
//       if (tab.name === targetName) {
//         const nextTab = tabs[index + 1] || tabs[index - 1];
//         if (nextTab) {
//           activeName = nextTab.name;
//         }
//       }
//     });
//   }

//   editableTabsValue.value = activeName;
//   editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
// };
//-------------------------

function reload() {
  isAlive.value = false;
  nextTick(() => {
    isAlive.value = true;
  });
}

provide("reload", reload);

function toggleSideBar() {
  appStore.toggleSideBar();
}
const logingName = ref("");
let lisetenMessageTime = null;
onMounted(() => {
  logingName.value = Cookies.get("username");
  clearInterval(lisetenMessageTime)
  lisetenMessageTime = setInterval(() => {
    //if(router.currentRoute.value.path=='/index') return;
    //console.log("===============window.noReadList：", localStorage.getItem("noreadlist"),'===========',isSwitchFileIframe.value)
    let tmplist = localStorage.getItem("noreadlist")
    if (tmplist == null || tmplist == '') {
      hasNewMessage.value = false
      return
    }
    tmplist = JSON.parse(tmplist);
    if (tmplist != null) hasNewMessage.value = true
    else hasNewMessage.value = false
  }, 1000);
  // console.log('onMt',editableTabsValue.value);
  // console.log('type',typeof editableTabsValue.value);

  nextTick(() => { // 要放在对响应式数据修改之后
    if (typeof editableTabsValue.value == 'number') {
      setTimeout(() => {
        iframeSize(editableTabsValue.value)
      }, 1000);
    }
  })


  // console.log('router',router)
});
watchEffect(async () => {
  if (router.currentRoute.value.path == '/index') return;
  if (websoctStore.noReadList != null) hasNewMessage.value = true
  else hasNewMessage.value = false
  // console.log("===============websoctStore.noReadList：",websoctStore.noReadList,'===========',hasNewMessage.value)
});


function handleCommand(command) {
  switch (command) {
    case "setLayout":
      setLayout();
      break;
    case "logout":
      logout();
      break;
    default:
      break;
  }
}

function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      sessionStorage.clear()
      userStore.logOut().then(() => {
        location.href = "/index";
      });
    })
    .catch(() => { });
}

// 跳转到全文搜索
const toSearch = async () => {
  if (!searchText.value) return;
  // console.log('searchText = ',searchText.value);
  const query = {
    keyword: searchText.value,
    isAsc: "asc",
    orderByColumn: "createTime",
    pageSize: 3,
    pageNum: 1,
  };
  const res = await flieSearch(query);
  console.log("res", res);
  if (res) {
    const itemData = {
      name:'全局搜索',
      path:'search',
      clickRowId:{
          searchData: res,
          searchText: searchText.value,
        }
    }
    addFolderAdd(itemData)
    // console.log("res", res);
    // console.log("router", route.path);
    // if (route.path != "/search") {
    //   let listArr = JSON.stringify(res);
    //   router.push({
    //     name: 'search',
    //     params: {
    //       listArr: listArr,
    //       searchText: searchText.value
    //     }
    //   });
    // } else {
    //   router.replace({
    //     path: "/allback",
    //     query: {
    //       searchData: JSON.stringify(res),
    //       searchText: searchText.value,
    //     },
    //   });
    // }
  }
};
const emits = defineEmits(["setLayout"]);

function setLayout() {
  emits("setLayout");
}
const clickId = ref("");
const menuList = reactive({
  data: [
    {
      label: "会话消息",
      path: "/index",
      imgs: chat,
      beimgs: bechat,
    },
    // {
    //   label: "接口",
    //   path: "/swagger",
    //   imgs: chat,
    //   beimgs: bechat,
    //   disabled:true
    // },
    {
      label: "最近文件",
      path: "/recent",
      imgs: zuijin,
      beimgs: bezuijin,
    },
    {
      label: "收藏文件",
      path: "/collect",
      imgs: colloect,
      beimgs: becolloect,
    },
    {
      label: "我的文件",
      path: "/myfile",
      imgs: my,
      beimgs: bemy,
    },
    {
      label: "部门文件",
      path: "/department",
      imgs: bumen,
      beimgs: bebumen,
    },
    {
      label: "公共文件",
      path: "/publicment",
      imgs: common,
      beimgs: becommon,
    },
    {
      label: "高级搜索",
      path: "/highsearch",
      imgs: highsearch,
      beimgs: behighsearch,
    },
    // {
    // 	label: "传输列表",
    // 	path: "/transFile",
    // 	imgs: chuanshu,
    // 	beimgs: bechuanshu,
    // },
    // {
    // 	label: "系统管理",
    // 	path: "/admin",
    // 	imgs: system,
    // 	beimgs: issystem,
    // },
    {
      label: "我的协作",
      path: "/myjoin",
      imgs: manyBody,
      beimgs: manyBodyFalse,
    },
  ],
});

const roles = useUserStore().roles;
const permissionRoles = ['admin', 'dept', 'system', 'audit']
const super_admin = "admin";
const hasRole = roles.some(role => {
  return super_admin === role || permissionRoles.includes(role)
})
if (hasRole) {
  menuList.data.push(
    {
      label: "系统管理",
      path: "/admin",
      imgs: system,
      beimgs: issystem,
    }
  );
}

const clickPath = (index, items) => {
  items = toRaw(items);
  localStorage.setItem("inChat", items.path == "/index" ? 1 : 0)
  // toFileData.value = null
  console.log("clickPathitems", items);
  // editableTabs.value = arr;
  isSwitchFileIframe.value = false
  const arr = toRaw(editableTabs.value);
  if (!arr.some((item) => item.label == items.label)) {
    editableTabs.value.push({
      label: items.label,
      path: items.path,
    });
    //需要jSON去转 否则页面无变化 离谱得很
    editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
  } else {
    toFileData.value = null;
    clickTab(items.path);
  }
  editableTabsValue.value = items.path;
  isAlive.value = true;
  // console.log("editableTabs", editableTabs.value);
};
const clickTab = (item) => {
  let url = toRaw(item)
  console.log("item", url);
  setTimeout(() => {
    console.log("toFileData.value", toFileData.value);
    if (toFileData.value) {
      localStorage.setItem("inChat",0)
      // 去全文搜索单独判断
      if(toFileData.value.name == "全局搜索"){
        console.log("clickRowId.value", JSON.stringify(toRaw(toFileData.value).clickRowId));
        editableTabsValue.value = toFileData.value.path
        router.push({
          name: toFileData.value.path,
          state: {
            // row: JSON.stringify(toRaw(toFileData.value.clickRowId)),
            clickRowId: JSON.stringify(toRaw(toFileData.value).clickRowId),
          },
      });
        return
      }
      editableTabsValue.value = toFileData.value.path
      router.push({
        path: toFileData.value.path,
        query: {
          // row: JSON.stringify(toRaw(toFileData.value.clickRowId)),
          clickRowId: toRaw(toFileData.value.clickRowId).dirId,
        },
      });
      return;
    }
    localStorage.setItem("inChat", url == "/index" ? 1 : 0)
    let regExp = new RegExp(/^\//);
    if (!regExp.test(url)) {
      const data = JSON.parse(url);
      console.log("data", data);
      router.push({
        // path: "/fileEdit" + data.docId,
        path: "/fileEdit",
        query: {
          clickRowId: data.docId,
          // row:JSON.stringify(toFileData.value)
          // copyRow: JSON.stringify(data),
        },
      });
    } else {
      editableTabsValue.value = url
      router.push({
        path: item+'?dirId='+item,
      });
    }
  }, 0);
};
const paneClick = (item) => {
  // 可以拿到当前的标签对象
  console.log(item, 'pane');
  isAlive.value = true;
  isSwitchFileIframe.value = false
  // console.log("paneItem", item);
  if (item.clickRowId) {
    // 判断是菜单还是目录
    toFileData.value = item;
  } else {
    toFileData.value = null;
  }
  clickTab(item.path);
};
// 点击文件标签
const filePaneClick = (item) => {
  localStorage.setItem("inChat", 0)
  console.log("filePaneClickitem", item);
  isSwitchFileIframe.value = true
  console.log(98588546543);
  const row = toRaw(item);
  const arr = iFrameData.value.map((par) => {
    if (par.id === row.id) {
      // editableTabsValue.value = row.id
      par.show = true;
      // document.getElementById('iframe'+par.id).window.document.iframe[0]
      const outIframe = document.getElementById("iframe" + par.id);
      const inIframe =
        outIframe.contentDocument.getElementsByTagName("iframe")[0];
      setTimeout(() => {
        // console.log('outIframe',outIframe.parentElement);
        console.error(outIframe.parentElement);
        inIframe.style.height = outIframe.style.height =
          outIframe.parentElement.offsetHeight + "px";
        inIframe.style.width = outIframe.style.width =
          outIframe.parentElement.offsetWidth + "px";
        // console.log('dom',outIframe.parentElement.offsetWidth);
        // console.log('inIframe',inIframe);
      }, 500);
    } else {
      par.show = false;
    }
    return toRaw(par);
  });
  iFrameData.value = arr;
  // console.log("Clicknewfilearr", iFrameData.value);
  isAlive.value = false;
  //   console.log("editableTabsValue", editableTabsValue.value);
};
// 创建文件的标签
const addFileTab = (data,bool) => {
  // console.log("fileTabdata", data);
  console.log();
  const thisData = JSON.parse(JSON.stringify(toRaw(data)));
  const oldIFrameData = iFrameData.value;
  const canAdd = oldIFrameData.some((par) => par.src == ""); //是否达到上限
  if (!canAdd) return ElMessage.error("已到最大数量，请先关闭其他文件！");
  const hasThis = oldIFrameData.find((par) => par.docId == data.docId);//是否已存在
  if (hasThis) {
    const thisPane = toRaw(hasThis)
    // console.log('hasThis',thisPane);
    const arr = oldIFrameData.map((par) => {
      if (par.id == thisPane.id) {
        par.show = true
        editableTabsValue.value = par.id// 标签跳转
        setTimeout(() => {

          iframeSize(par.id)
        }, 1000);
      } else {
        par.show = false
      }
      return toRaw(par);
    });
    iFrameData.value = arr;
    isAlive.value = false;
    return
  }
  const arr = oldIFrameData.map((par) => {
    if (!par.src) {
      if (thisData.docId) {
        // par.src = `${window.location.origin}/fileEdit?clickRowId=${thisData.docId}`;
        par.src = `${window.location.origin}/fileEdit?clickRowId=${thisData.docId}&canEdit=${bool}`;
        par.name = data.fileName;
        par.docId = data.docId
        par.show = true
        thisData.docId = "";
        editableTabsValue.value = par.id// 新建时标签跳转
        setTimeout(() => {

          iframeSize(par.id)
        }, 1000);
      }
    } else {
      par.show = false
    }
    return toRaw(par);
  });
  iFrameData.value = arr;
  isAlive.value = false;
  // console.log("addFileTab", arr);
};
//创建tab标签事件
const addTab = (data) => {
  // console.log("addTab", data);
  const arr = toRaw(editableTabs.value);
  if (!arr.some((item) => item.label == data.fileName)) {
    // editableTabs.value.push({
    //   label: data.fileName,
    //   path: JSON.stringify(data),
    // });
    editableTabs.value.push({
      label: data.fileName,
      path: JSON.stringify(data),
    });
    //需要jSON去转 否则页面无变化 离谱得很
    editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
    // editableTabsValue.value = data.path;
  }
};
const addFolderAdd = (data) => {
  console.log("data", data);
  const arr = toRaw(editableTabs.value);
  if (!arr.some((item) => item.label == data.clickRowId.dirName ||item.label == data.name )) {
    editableTabs.value.push({
      label: data.name,
      path: data.path,
      clickRowId: data.clickRowId,
    });
    //需要jSON去转 否则页面无变化 离谱得很
    editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
  }
  editableTabsValue.value = data.path
  toFileData.value = data
  clickTab(data)
  // console.log("editableTabs", toRaw(editableTabs.value));
};
provide("addTab", addTab);
provide("addFolderAdd", addFolderAdd);
provide("addFileTab", addFileTab);
// TODO 删除tab事件
const closeTab = (item, index, e) => {
  e.preventDefault();
  e.stopPropagation();
  editableTabs.value.splice(index, 1);
  editableTabs.value = JSON.parse(JSON.stringify(editableTabs.value));
  const nextTab = editableTabs.value[index - 1];
  // console.log('nextTab',toRaw(nextTab));
  // console.log('item',item);
  // console.log('editableTabsValue',editableTabsValue.value);
  if (editableTabsValue.value == item.path) {

    paneClick(toRaw(nextTab));
  }
  // console.log("item", item);
  // console.log("index", index);
  // console.log("e", e);
};
// TODO 删除tab事件
const closeFileTab = (item, index, e) => {
  e.preventDefault();
  e.stopPropagation();
  const data = toRaw(item);
  console.log("closeFileTab", data);
  let arr = iFrameData.value.map((par) => {
    if (par.id === data.id) {
      par.src = "";
      par.show = false;
      par.name = "";
      par.docId = ''
    }
    return toRaw(par);
  });
  if (data.id == editableTabsValue.value) {
    console.log('data.id', data.id);
    let isLeft = true
    //如果不是第一个就左移
    for (let thisId = data.id; thisId > 0; thisId--) {
      console.log(arr[thisId - 1].id, arr[thisId - 1].src);
      if (arr[thisId - 1].src) {
        arr[thisId - 1].show = true
        isLeft = false
        editableTabsValue.value = arr[thisId - 1].id
        return
      }

    }
    // 如果是第一个就跳到文件夹标签右一
    if (isLeft) {
      const num = toRaw(editableTabs.value).length - 1
      const nextTab = editableTabs.value[num]
      paneClick(toRaw(nextTab));
      console.log('left', nextTab);
    }
    // isAlive.value = true;
  }
  iFrameData.value = arr;
  // console.log("index", index);
  console.log("iFrameData", iFrameData.value);
};
// 控制iframe大小
const iframeSize = (id) => {
  const outIframe = document.getElementById("iframe" + id);
  const inIframe =
    outIframe.contentDocument.getElementsByTagName("iframe")[0];
  console.log('outIframe', outIframe.parentElement);
  console.error(outIframe.parentElement);
  inIframe.style.height = outIframe.style.height =
    outIframe.parentElement.offsetHeight + "px";
  inIframe.style.width = outIframe.style.width =
    outIframe.parentElement.offsetWidth + "px";

  // console.log('dom',outIframe.parentElement.offsetWidth);
  // console.log('inIframe',inIframe);
}
// 监听和保存标签信息
const setTabLocal = (data) => {
  // console.log('setTabLocal',data);
  sessionStorage.setItem('tabData', JSON.stringify(data))
}
const setFileTabLocal = (data) => {
  console.log('setFileTabLocal', data);
  isSwitchFileIframe.value = true
  // console.log('setFileTabLocal',data);
  sessionStorage.setItem('fileTabData', JSON.stringify(data))
}
const setEditableTabsValue = (data) => {
  // console.log('setEditableTabsValue',data);
  sessionStorage.setItem('editableTabsValue', JSON.stringify(data))
}
watch(() => iFrameData.value, (newValue, oldValue) => {
  // console.log('iFrameData 发生改变了', newValue, oldValue);
  setFileTabLocal(toRaw(toRaw(newValue)))

}, {
  immediate: true,
  deep: true
});
watch(() => editableTabs.value, (newValue, oldValue) => {
  // console.log('editableTabs 发生改变了', newValue, oldValue);
  setTabLocal(toRaw(newValue))
}, {
  immediate: true,
  deep: true
});
watch(() => editableTabsValue.value, (newValue, oldValue) => {
  // console.log('editableTabsValue 发生改变了', newValue, oldValue);
  setEditableTabsValue(toRaw(newValue))
  let regExp = new RegExp(/^\//);
  if (!regExp.test(editableTabsValue.value)) {
    isAlive.value = false;
  }
}, {
  immediate: true,
  deep: true
});
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";

//整体布局css
.common-layout,
.el-container {
  height: 94vh;
}

:deep .el-main {
  --el-main-padding: 8px !important;
}

.nav {
  background: #06286c;
  height: 48px;

  .nav-top {
    width: 98%;
    display: flex;
    justify-content: space-between;

    &>div:first-child {
      font-family: "Inter-SemiBold";
    }

    &>div:first-child,
    &>div:last-child {
      display: flex;
      align-items: center;
      color: #fff;

      &>img {
        width: 48px;
        height: 48px;
      }
    }

    .logoImg {
      width: 150px !important;
      height: 100%;
      margin-right: 10px;
    }
  }

  .head-img {
    border-radius: 12px;
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }

  .avatar-wrapper {
    color: #fff;
    display: flex;
    align-items: center;
  }

  .search {

    .w-50,
    :deep .el-input {
      width: 400px;
      height: 32px;
      border-radius: 4px;
      margin-top: 8px;
      background: #6f85b5 !important;
      --el-input-border-color: #6f85b5;
    }

    ::v-deep .el-input__inner {
      color: #fff !important;
    }
  }

  :deep .el-input__wrapper {
    background: #1f3f7e !important;
  }
}

.asides {
  padding: 8px 10px !important;
  font-size: 14px;
  color: #000;
  background: #fff;
}

.main {
  background: #c7cbd8;
}

// tabs标签
.tab_box {
  width: 100%;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
  background-color: #fff;
  margin-bottom: 8px;

  .common-tabs {
    height: 32px;
    // display: flex;
    // align-items: center;
  }

  .tab_pane {
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      margin-left: 8px;
      width: 10px;
      height: 10px;
    }
  }
}

:deep(.common-tabs .el-tabs__item) {
  height: 24px !important;
  padding: 0px 8px !important;
  margin-top: 4px !important;
  margin-left: 4px !important;
  border: 1px solid #c1cce3 !important;
  color: #505870 !important;
  font-size: 12px !important;
  line-height: 24px;
  font-weight: 400 !important;
}

// tag选中颜色
:deep(.common-tabs .el-tabs__item.is-active) {
  color: #fff !important;
  font-weight: normal;
  background-color: #6f85b5;
}

//侧边栏css
.acitve-img-style {
  background-color: #f5f7f9;
  border-radius: 4px;
}

.img-style {
  width: 72px;
  height: 72px;
  display: flex;
  margin-bottom: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &>img {
    width: 40px;
    height: 40px;
  }
}

.text-style {
  text-align: center;
  color: #000;
}
</style>
<style lang="scss" scoped>
.el-popper.is-light.type_popper {
  background-color: #1f3f7e !important;
  border-radius: 4px 4px 4px 4px !important;
  border: none !important;
  // padding: 0 16px !important;
  // box-sizing: border-box !important;
}

.el-popper__arrow::before {
  content: none;
}

//鼠标移动上去的选中色
.type_popper {

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #6f85b5 !important;
  }

  //下拉框的文本颜色
  .el-select-dropdown__item {
    color: #a4b0d8 !important;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    background: #6f85b5 !important;
    color: #fff !important;
  }
}

.yuandian {
  width: 8px;
  height: 8px;
  position: absolute;
  right: 8px;
  top: 6px;
  background: #fa5151;
  border-radius: 4px;
}

::v-deep .qualityManual-container-office {
  width: 1000px !important;
  height: 1000px !important;

  iframe {
    width: 1000px !important;
    height: 1000px !important;
  }
}
</style>