<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",

  mounted() {
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i
      )
    ) {
      //alert("shouji");
    } else {
      //alert("diannao");
      document.write(
        '<link href="http://edu.oytour.com/font.css" rel="stylesheet" type="text/css" media="screen" />'
      );
    }
  }
};
</script>

<style>
@import url("//at.alicdn.com/t/c/font_2077629_i7yuqryh01e.css");
@font-face {
  font-family: "din";
  src: url("./assets/font/DIN-Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

.border-radius {
  border-radius: 5px;
}

.din {
  font-family: din !important;
}

.q-scrollarea__thumb {
  z-index: 999999 !important;
}

body {
  /* min-width: 1360px !important; */
}

header {
  min-width: 1360px;
}

html,
body,
#q-app {
  min-height: 100vh;
  min-width: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "pingfang", " Microsoft YaHei",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #3f4254;
}

.q-position-engine {
  z-index: 9999;
}

.el-date-picker,
.time-select {
  z-index: 999999 !important;
}

.remark-font {
  font-size: 12px;
  font-family: Poppins, Helvetica, sans-serif;
  font-weight: 400;
  color: #b5b5c3 !important;
}

.svg-icon.svg-icon-primary g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-primary) !important;
}

.svg-icon.svg-icon-secondary g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-secondary) !important;
}

.svg-icon.svg-icon-grey g [fill] {
  transition: fill 0.3s ease;
  fill: #ccc !important;
}

.svg-icon.svg-icon-warning g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-warning) !important;
}

.svg-icon.svg-icon-negative g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-negative) !important;
}

.svg-icon.svg-icon-accent g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-accent) !important;
}

.svg-icon.svg-icon-dark g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-dark) !important;
}

.svg-icon.svg-icon-orange g [fill] {
  transition: fill 0.3s ease;
  fill: rgb(255, 152, 0) !important;
}

.svg-icon.svg-icon-positive g [fill] {
  transition: fill 0.3s ease;
  fill: "#C9F7F5" !important;
}

.svg-icon.svg-icon-white g [fill] {
  transition: fill 0.3s ease;
  fill: white !important;
}

.svg-icon.svg-icon-g-p g [fill] {
  transition: fill 0.3s ease;
  fill: grey !important;
}

.svg-icon.svg-icon-g-p {
  cursor: pointer;
}

.svg-icon.svg-icon-g-p:hover g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-primary) !important;
}

.svg-icon.svg-icon-b-p g [fill] {
  transition: fill 0.3s ease;
  fill: #000 !important;
}

.svg-icon.svg-icon-b-p {
  cursor: pointer;
}

.svg-icon.svg-icon-b-p:hover g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-primary) !important;
}

.hover-primary:hover .svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: white !important;
}

.hover-primary:hover .q-avatar {
  background-color: var(--q-color-primary) !important;
}

.hover-primary:hover {
  color: var(--q-color-primary) !important;
}

.hover-d-p {
  cursor: pointer;
  color: var(--q-color-dark) !important;
}

.hover-d-p .svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-dark) !important;
}

.hover-d-p:hover {
  color: var(--q-color-primary) !important;
}

.hover-d-p:hover .svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-primary) !important;
}

.hover-g-p {
  cursor: pointer;
  color: #ccc !important;
}

.hover-g-p .svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: #ccc !important;
}

.hover-g-p:hover {
  color: var(--q-color-primary) !important;
}

.hover-g-p:hover .svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-primary) !important;
}

.text-muted {
  color: #b5b5c3 !important;
}

.page-body {
  border-radius: 8px;
  background: #fff;
  padding: 30px;
}

.page-search {
  margin-bottom: 16px;
  font-family: "perfectFont";
}

.page-content .q-table__title {
  font-family: "perfectFont";
}

.page-content .q-table__container .scroll::-webkit-scrollbar,
.myscroll::-webkit-scrollbar {
  width: 6px;
  height: 5px;
}

.page-content .q-table__container .scroll::-webkit-scrollbar-thumb,
.myscroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}

.page-content .q-table__container .scroll::-webkit-scrollbar-track,
.myscroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}

.micfont {
  font-family: perfectFont !important;
}

.fixed-right,
.absolute-right {
  overflow: unset;
}

.dialog-out-close {
  background: var(--q-color-primary);
  position: absolute !important;
  top: 30% !important;
  left: -40px !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px;
  text-align: center;
  color: #fff;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  cursor: pointer;
}

.q-dialog__backdrop {
  background: rgba(0, 0, 0, 0.1);
}

/***************************************************** Begin 重写ElementUI 抽屉效果 ***************************************************************/
.el-drawer__wrapper {
  top: 61px !important;
}

.v-modal {
  display: none !important;
}

.el-drawer__wrapper .drawerTop {
  background: none !important;
  border-bottom: 1px solid #f5f5f5;
}

.el-drawer__wrapper .drawerTop .drawer_Span {
  font-size: 18px !important;
  font-weight: 500 !important;
  font-family: perfectFont !important;
}

.el-drawer__wrapper .drawerTop .icon-guanbi {
  display: none !important;
}

.el-tabs__item.is-active {
  color: var(--q-color-primary) !important;
}

.el-tabs__active-bar {
  background-color: var(--q-color-primary) !important;
}

.page-body {
  padding: 15px !important;
  min-height: calc(100% - 30px);
  margin: 15px !important;
}

.q-table__top {
  padding: 0 0 12px 0px !important;
}

.q-btn__wrapper .row,
.q-btn__wrapper .column,
.q-btn__wrapper .flex {
  flex-wrap: nowrap !important;
}

.q-toolbar__title {
  flex: unset !important;
}

button.bg-accent {
  background: linear-gradient(90deg, #37adf7, #2961fe) !important;
}

button.bg-accent:active {
  background: linear-gradient(270deg, #37adf7, #2961fe) !important;
}

/*.q-avatar__content{
    font-family: perfectFont !important;
    font-size: 14px !important;
}
.left-menu-box .q-item.q-router-link--active,.left-menu-box .q-item--active{
    background:var(--q-color-secondary) !important;
    color:#f5f5f5 !important;
    border-radius: 0px 4px 4px 0px !important;
    margin:0 4px;
    position: relative;
}
.left-menu-box .q-item.q-router-link--active::before{
    position: absolute;
    width: 7px;
    height: 7px;
    background: #FAFAFA;
    border-radius: 50%;
    top: calc(50% - 3.5px);
    right: 20px;
    display: block;
    content: ' ';
}*/
.left-menu-box a.q-item.q-link {
  margin: 0 13px;
  min-height: 32px !important;
  border-radius: 4px !important;
}

.left-menu-box a.q-item.q-router-link--active,
.left-menu-box .q-item--active {
  background: #ecf1ff !important;
  color: var(--q-color-primary) !important;
}

.big-dialog .q-dialog__inner--minimized>div {
  max-width: unset !important;
}

.f12 {
  font-size: 12px;
}

/***************************************************** End 重写ElementUI 抽屉效果 ***************************************************************/
</style>
