text.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div class="tag-layer" @click.stop>
  3. <div class="tag-header">
  4. <span> </span>
  5. <i @click.stop="close" class="iconfont close icon-close-middle"></i>
  6. </div>
  7. <div class="txtcon">
  8. <div class="txtbody" v-html="metadata.work.description"></div>
  9. </div>
  10. </div>
  11. </template>
  12. <script setup>
  13. import {
  14. reactive,
  15. defineEmits,
  16. onBeforeMount,
  17. onMounted,
  18. ref,
  19. watchEffect,
  20. computed,
  21. watch,
  22. nextTick,
  23. } from "vue";
  24. import { useStore } from "vuex";
  25. const store = useStore();
  26. const metadata = computed(() => store.getters["scene/metadata"]);
  27. const close = () => {
  28. store.commit("functions/setShowIntroduce", false);
  29. };
  30. </script>
  31. <style lang="scss" scoped>
  32. .tag-layer {
  33. width: 100vw;
  34. height: 100vh;
  35. z-index: 10000;
  36. top: 0;
  37. position: fixed;
  38. left: 0;
  39. background: rgba(27, 27, 28, 0.8);
  40. box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  41. backdrop-filter: blur(4px);
  42. .tag-header {
  43. display: flex;
  44. width: 100%;
  45. padding: 0 20px;
  46. justify-content: space-between;
  47. align-items: center;
  48. height: 50px;
  49. border-bottom: solid 1px rgba(255, 255, 255, 0.16);
  50. font-size: 18px;
  51. .close {
  52. color: rgba(255, 255, 255, 0.6);
  53. z-index: 999;
  54. }
  55. }
  56. .txtcon {
  57. display: flex;
  58. align-items: flex-start;
  59. justify-content: center;
  60. height: 100%;
  61. width: 100%;
  62. :deep(p) {
  63. line-height: 24px;
  64. }
  65. .txtbody {
  66. width: 100%;
  67. border-radius: 10px;
  68. font-size: 14px;
  69. color: #fff;
  70. padding: 20px;
  71. max-height: calc(100vh - 60px);
  72. overflow-y: auto;
  73. line-height: 24px;
  74. word-wrap: break-word;
  75. white-space: normal;
  76. }
  77. }
  78. }
  79. </style>