|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="tag-view" v-show="canShow">
|
|
<div class="tag-view" v-show="canShow">
|
|
<!-- <div class="tag-view-content" :style="{ height: height + 'px' }"> -->
|
|
<!-- <div class="tag-view-content" :style="{ height: height + 'px' }"> -->
|
|
- <div class="tag-view-content">
|
|
|
|
|
|
+ <div class="tag-view-content" :class="!isLogin ? 'no-comment' : ''">
|
|
<header>
|
|
<header>
|
|
<span>{{ notify.title }}</span>
|
|
<span>{{ notify.title }}</span>
|
|
<!-- <i class="iconfont icon-close" @click="emits('action', null)"></i> -->
|
|
<!-- <i class="iconfont icon-close" @click="emits('action', null)"></i> -->
|
|
@@ -9,18 +9,20 @@
|
|
</header>
|
|
</header>
|
|
<article>
|
|
<article>
|
|
<TagMsg @setShow="setShow"></TagMsg>
|
|
<TagMsg @setShow="setShow"></TagMsg>
|
|
- <Comment :slideHeigt="slideHeigt"></Comment>
|
|
|
|
|
|
+ <Comment v-if="isLogin" :slideHeigt="slideHeigt"></Comment>
|
|
</article>
|
|
</article>
|
|
<!-- <footer></footer> -->
|
|
<!-- <footer></footer> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script setup>
|
|
<script setup>
|
|
-import { ref, onMounted, onBeforeUnmount, computed, inject } from 'vue'
|
|
|
|
|
|
+import { ref, onMounted, onBeforeUnmount, computed, inject, watch } from 'vue'
|
|
|
|
|
|
import TagMsg from './content/TagMsg.vue'
|
|
import TagMsg from './content/TagMsg.vue'
|
|
import Comment from './content/Comment.vue'
|
|
import Comment from './content/Comment.vue'
|
|
import { nextTick } from 'process'
|
|
import { nextTick } from 'process'
|
|
|
|
+
|
|
|
|
+const isLogin = inject('isLogin')
|
|
const notify = inject('notify')
|
|
const notify = inject('notify')
|
|
const emits = defineEmits(['action'])
|
|
const emits = defineEmits(['action'])
|
|
const height = ref(0)
|
|
const height = ref(0)
|
|
@@ -45,7 +47,16 @@ const setShow = data => {
|
|
slideHeigt.value = document.querySelector('.left-item').offsetHeight
|
|
slideHeigt.value = document.querySelector('.left-item').offsetHeight
|
|
})
|
|
})
|
|
}
|
|
}
|
|
-onMounted(() => {
|
|
|
|
|
|
+
|
|
|
|
+watch(
|
|
|
|
+ () => notify.value,
|
|
|
|
+ (val, old) => {
|
|
|
|
+ if (val) {
|
|
|
|
+ goFocusTag()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+)
|
|
|
|
+const goFocusTag = () => {
|
|
if (window.kankan) {
|
|
if (window.kankan) {
|
|
window.kankan.TagManager.focusTag(notify.value.sid, {
|
|
window.kankan.TagManager.focusTag(notify.value.sid, {
|
|
direction: 'left',
|
|
direction: 'left',
|
|
@@ -60,6 +71,9 @@ onMounted(() => {
|
|
sdk.scene.comeToTag(new THREE.Vector3(pos.x, pos.y, pos.z))
|
|
sdk.scene.comeToTag(new THREE.Vector3(pos.x, pos.y, pos.z))
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+}
|
|
|
|
+onMounted(() => {
|
|
|
|
+ goFocusTag()
|
|
onResize()
|
|
onResize()
|
|
window.addEventListener('resize', onResize)
|
|
window.addEventListener('resize', onResize)
|
|
})
|
|
})
|
|
@@ -281,6 +295,9 @@ onBeforeUnmount(() => {
|
|
border: 1px solid #000000;
|
|
border: 1px solid #000000;
|
|
backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
color: #fff;
|
|
color: #fff;
|
|
|
|
+ &.no-comment {
|
|
|
|
+ width: 400px;
|
|
|
|
+ }
|
|
|
|
|
|
header {
|
|
header {
|
|
padding: 0 20px;
|
|
padding: 0 20px;
|
|
@@ -306,7 +323,7 @@ onBeforeUnmount(() => {
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
> div {
|
|
> div {
|
|
width: 50%;
|
|
width: 50%;
|
|
-
|
|
|
|
|
|
+
|
|
// &.left-item {
|
|
// &.left-item {
|
|
// border-right: solid 1px rgba(255, 255, 255, 0.16);
|
|
// border-right: solid 1px rgba(255, 255, 255, 0.16);
|
|
// }
|
|
// }
|