slibra-module-web/src/views/answer/AnswerView.vue

<script setup>
import SvgIcon from '@/components/SvgIcon';
import TheMenu from "@/components/Layout/TheMenu.vue";
</script>

<template>
  <div class="viewport">
    <aside class="aside-container w-60 h-full">
      <div class="logo-main py-[14px] px-[20px]">
        <div class="title flex items-center space-x-2">
          <div class="w-[28px] h-[28px]">
            <SvgIcon name="common-logo" :size="28"></SvgIcon>
          </div>
          <span class="block w-[70px] font-[10px]">人工智能运营体智慧决策助手</span>
        </div>
      </div>

      <div class="menu-cotainer">
        <TheMenu></TheMenu>
      </div>

      <div class="warn-container px-[20px]">
        <dl class="warn-content px-[12px] py-[12px]">
          <dt class="title h-[20px] mb-[12px] text-[16px]"></dt>
          <dd class="info">
            <SvgIcon name="menu-warn-tips"></SvgIcon>
            <span class="pl-[4px]">您有100个报警信息，请解决</span>
          </dd>
          <dd class="info">
            <SvgIcon name="menu-warn-tips"></SvgIcon>
            <span class="pl-[4px]">您有100个报警信息，请解决</span>
          </dd>
        </dl>
      </div>
    </aside>
  </div>

</template>

<style scoped lang="scss">
.warn-container {
  height: 100px;

  .warn-content {
    border: 1px solid #fff;
    border-radius: 6px;
    background: #FAF5F7;

    .title {
      background: url("@/assets/images/warn-text.png") left center no-repeat;
      background-size: 62px 14px;
    }

    .info {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #333;
      cursor: pointer;

      &:not(:last-child) {
        margin-bottom: 10px;
      }

      &:hover {
        color: #5E5E5E;
      }
    }
  }
}

.viewport {
  @include flex(y, start, start);
  width: 100vw;
  height: 100vh;
  background: #F2F6FC;
}

.aside-container {
  border-right: 1px solid #DBE5ED;
}

.menu-cotainer {
  // padding: 0 7px;
}

.logo-main {
  font-family: AlimamaShuHeiTi;

  .title {
    font-size: 10px;
    line-height: 12px;
  }
}
</style>