AnswerView.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <script setup>
  2. import SvgIcon from '@/components/SvgIcon';
  3. import TheMenu from "@/components/Layout/TheMenu.vue";
  4. </script>
  5. <template>
  6. <div class="viewport">
  7. <aside class="aside-container w-60 h-full">
  8. <div class="logo-main py-[14px] px-[20px]">
  9. <div class="title flex items-center space-x-2">
  10. <div class="w-[28px] h-[28px]">
  11. <SvgIcon name="common-logo" :size="28"></SvgIcon>
  12. </div>
  13. <span class="block w-[70px] font-[10px]">人工智能运营体智慧决策助手</span>
  14. </div>
  15. </div>
  16. <div class="menu-cotainer">
  17. <TheMenu></TheMenu>
  18. </div>
  19. <div class="warn-container px-[20px]">
  20. <dl class="warn-content px-[12px] py-[12px]">
  21. <dt class="title h-[20px] mb-[12px] text-[16px]"></dt>
  22. <dd class="info">
  23. <SvgIcon name="menu-warn-tips"></SvgIcon>
  24. <span class="pl-[4px]">您有100个报警信息,请解决</span>
  25. </dd>
  26. <dd class="info">
  27. <SvgIcon name="menu-warn-tips"></SvgIcon>
  28. <span class="pl-[4px]">您有100个报警信息,请解决</span>
  29. </dd>
  30. </dl>
  31. </div>
  32. </aside>
  33. </div>
  34. </template>
  35. <style scoped lang="scss">
  36. .warn-container {
  37. height: 100px;
  38. .warn-content {
  39. border: 1px solid #fff;
  40. border-radius: 6px;
  41. background: #FAF5F7;
  42. .title {
  43. background: url("@/assets/images/warn-text.png") left center no-repeat;
  44. background-size: 62px 14px;
  45. }
  46. .info {
  47. display: flex;
  48. align-items: center;
  49. font-size: 12px;
  50. color: #333;
  51. cursor: pointer;
  52. &:not(:last-child) {
  53. margin-bottom: 10px;
  54. }
  55. &:hover {
  56. color: #5E5E5E;
  57. }
  58. }
  59. }
  60. }
  61. .viewport {
  62. @include flex(y, start, start);
  63. width: 100vw;
  64. height: 100vh;
  65. background: #F2F6FC;
  66. }
  67. .aside-container {
  68. border-right: 1px solid #DBE5ED;
  69. }
  70. .menu-cotainer {
  71. // padding: 0 7px;
  72. }
  73. .logo-main {
  74. font-family: AlimamaShuHeiTi;
  75. .title {
  76. font-size: 10px;
  77. line-height: 12px;
  78. }
  79. }
  80. </style>