Merge branch 'master' of http://172.16.20.1:3000/duanhao/SocialNetworks_duan
This commit is contained in:
commit
fb8bcdda16
|
|
@ -43,6 +43,8 @@ const scanAngle = ref(0)
|
|||
const scanTimer = ref(null)
|
||||
const containerWidth = 350
|
||||
const containerHeight = 276
|
||||
// 添加状态变量跟踪是否已完成第一个周期
|
||||
const hasCompletedFirstCycle = ref(false)
|
||||
|
||||
const words = ref(props.wordsCloudList)
|
||||
|
||||
|
|
@ -80,17 +82,31 @@ const startScan = () => {
|
|||
const progress = (elapsedTime / duration) % 1
|
||||
const newScanAngle = progress * 360
|
||||
|
||||
// 只在第一个周期结束时执行一次重置
|
||||
if (newScanAngle < scanAngle.value) {
|
||||
words.value.forEach((w) => (w.visible = false))
|
||||
if (!hasCompletedFirstCycle.value) {
|
||||
// 第一个周期结束,标记为已完成
|
||||
hasCompletedFirstCycle.value = true
|
||||
} else {
|
||||
// 后续周期不再重置词语可见性
|
||||
// 但仍需更新startTime以保持动画流畅
|
||||
startTime = timestamp
|
||||
}
|
||||
}
|
||||
scanAngle.value = newScanAngle
|
||||
|
||||
// 始终显示所有词语(第一个周期后)或根据扫描角度显示(第一个周期)
|
||||
if (hasCompletedFirstCycle.value) {
|
||||
words.value.forEach((word) => {
|
||||
word.visible = true
|
||||
})
|
||||
} else {
|
||||
words.value.forEach((word) => {
|
||||
if (!word.visible && scanAngle.value >= word.angle) {
|
||||
word.visible = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
scanTimer.value = requestAnimationFrame(animate)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center class="leader-custom-dialog">
|
||||
<el-dialog
|
||||
v-model="isVisible"
|
||||
:style="{ height: '560px' }"
|
||||
align-center
|
||||
class="leader-custom-dialog"
|
||||
>
|
||||
<template v-if="store.activeLeader">
|
||||
<img src="@/assets/images/chuanbo_node_Info.png" alt="" class="dialogTitleImg" />
|
||||
<div class="dialog-content">
|
||||
|
|
@ -8,9 +13,9 @@
|
|||
<div class="leaderInfo-message">
|
||||
<div class="leader-name">{{ store.activeLeader.name }}</div>
|
||||
<div class="leader-heat">
|
||||
<div class="fancy">粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}</div>
|
||||
<div class="fancy">粉丝量: {{ store.activeLeader.leaderOriginInfo.followers }}</div>
|
||||
<div class="post-number">
|
||||
发帖数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
发帖数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,25 +47,25 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="dialog-content-heat-degree">
|
||||
<div class="heat-item">
|
||||
<!-- <div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
粉丝数量: {{ store.activeLeader.leaderOriginInfo.followers }}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
关注数量:{{ store.activeLeader.leaderOriginInfo.followerCount }}
|
||||
关注数量: {{ store.activeLeader.leaderOriginInfo.followerCount }}
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<!-- <div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
发帖总数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div> -->
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
贴文被转总数: {{ store.activeLeader.leaderOriginInfo.labelling[0].transmit }}
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
贴文被转总数: {{ store.activeLeader.leaderOriginInfo.labelling[0].transmit }}
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
参与互动次数:{{ store.activeLeader.leaderOriginInfo.interactionCount }}
|
||||
参与互动次数: {{ store.activeLeader.leaderOriginInfo.interactionCount }}
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
|
|
@ -73,20 +78,20 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { useKeyNodeStore2 } from "@/store/keyNodeStore2";
|
||||
import { Icon } from "@iconify/vue";
|
||||
import { computed } from "vue"
|
||||
import { useKeyNodeStore2 } from "@/store/keyNodeStore2"
|
||||
import { Icon } from "@iconify/vue"
|
||||
|
||||
const store = useKeyNodeStore2();
|
||||
const store = useKeyNodeStore2()
|
||||
|
||||
const isVisible = computed({
|
||||
get: () => store.isLeaderDetailDialogVisible,
|
||||
set: (value) => {
|
||||
if (!value) {
|
||||
store.closeLeaderDetail();
|
||||
store.closeLeaderDetail()
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ const scanAngle = ref(0)
|
|||
const scanTimer = ref(null)
|
||||
const containerWidth = 370
|
||||
const containerHeight = 257
|
||||
const hasCompletedFirstCycle = ref(false) // 添加新状态跟踪是否完成第一个周期
|
||||
|
||||
const words = ref(props.wordsCloudList)
|
||||
|
||||
|
|
@ -82,16 +83,28 @@ const startScan = () => {
|
|||
const newScanAngle = progress * 360
|
||||
|
||||
if (newScanAngle < scanAngle.value) {
|
||||
// 只在第一个周期结束时执行一次隐藏操作
|
||||
if (!hasCompletedFirstCycle.value) {
|
||||
words.value.forEach((w) => (w.visible = false))
|
||||
hasCompletedFirstCycle.value = true // 标记已完成第一个周期
|
||||
}
|
||||
startTime = timestamp
|
||||
}
|
||||
scanAngle.value = newScanAngle
|
||||
|
||||
// 只有在第一个周期内才根据角度显示词语
|
||||
if (!hasCompletedFirstCycle.value) {
|
||||
words.value.forEach((word) => {
|
||||
if (!word.visible && scanAngle.value >= word.angle) {
|
||||
word.visible = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 第一个周期结束后,所有词语保持可见
|
||||
words.value.forEach((word) => {
|
||||
word.visible = true
|
||||
})
|
||||
}
|
||||
|
||||
scanTimer.value = requestAnimationFrame(animate)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<el-dialog v-model="isVisible" width="640" align-center :show-close="false" class="custom-leader-dialog">
|
||||
<el-dialog
|
||||
v-model="isVisible"
|
||||
:style="{ height: '618px' }"
|
||||
align-center
|
||||
:show-close="false"
|
||||
class="custom-leader-dialog"
|
||||
>
|
||||
<!-- <img src="@/assets/images/leaderDialogTitle.png" alt="" class="dialogTitleImg" /> -->
|
||||
<!-- 自定义标题栏插槽,包含关闭按钮 -->
|
||||
<template #header="{ close }">
|
||||
|
|
@ -13,7 +19,7 @@
|
|||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="dialog-content" style="padding: 14px, 23px;">
|
||||
<div class="dialog-content" style="padding: 14px, 23px">
|
||||
<div class="dialog-content-leaderInfo">
|
||||
<img class="leaderInfo-avatar" :src="store.activeLeader.leaderOriginInfo.avatar" alt="" />
|
||||
<div class="leaderInfo-message">
|
||||
|
|
@ -26,14 +32,16 @@
|
|||
</div>
|
||||
<div class="dialog-content-postInfo">
|
||||
<div class="post-type">
|
||||
<img src="@/assets/images/postTag.png" alt="">
|
||||
<img src="@/assets/images/postTag.png" alt="" />
|
||||
</div>
|
||||
<span class="timestamp">{{ store.activeLeader.leaderOriginInfo.labelling[0].time }}</span>
|
||||
<span class="author">【{{ store.activeLeader.name }}】发布了帖文</span>
|
||||
<span class="influence">影响力:{{ store.activeLeader.leaderOriginInfo.labelling[0].influence }}</span>
|
||||
<span class="influence"
|
||||
>影响力:{{ store.activeLeader.leaderOriginInfo.labelling[0].influence }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="post-bottom-line">
|
||||
<img src="@/assets/images/post_bottom_line.png" alt="">
|
||||
<img src="@/assets/images/post_bottom_line.png" alt="" />
|
||||
</div>
|
||||
<div class="dialog-content-post">
|
||||
<div class="leader-post-detail-content">
|
||||
|
|
@ -48,13 +56,13 @@
|
|||
<div class="item-time">{{ item.time }}</div>
|
||||
<div class="item-heat-detail">
|
||||
<div class="item-heat-like">
|
||||
<img src="@/assets/images/icon/like_icon.png" alt=""> {{ item.like }}
|
||||
<img src="@/assets/images/icon/like_icon.png" alt="" /> {{ item.like }}
|
||||
</div>
|
||||
<div class="item-heat-comment">
|
||||
<img src="@/assets/images/icon/commit_icon.png" alt=""> {{ item.comment }}
|
||||
<img src="@/assets/images/icon/commit_icon.png" alt="" /> {{ item.comment }}
|
||||
</div>
|
||||
<div class="item-heat-transmit">
|
||||
<img src="@/assets/images/icon/transmit_icon.png" alt=""> {{ item.transmit }}
|
||||
<img src="@/assets/images/icon/transmit_icon.png" alt="" /> {{ item.transmit }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -62,18 +70,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="dialog-content-heat-degree">
|
||||
<div class="heat-item">
|
||||
<!-- <div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
粉丝数量: {{ store.activeLeader.leaderOriginInfo.followers }}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
关注数量: 1329
|
||||
</div>
|
||||
<div class="heat-item">
|
||||
<!-- <div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
发帖总数: {{ store.activeLeader.leaderOriginInfo.posts }}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="heat-item">
|
||||
<p class="diamond"></p>
|
||||
贴文被转总数: 1329
|
||||
|
|
@ -92,33 +100,33 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch } from "vue";
|
||||
import { useKeyNodeStore1 } from "@/store/keyNodeStore1";
|
||||
import { computed, watch } from "vue"
|
||||
import { useKeyNodeStore1 } from "@/store/keyNodeStore1"
|
||||
|
||||
const store = useKeyNodeStore1();
|
||||
const store = useKeyNodeStore1()
|
||||
|
||||
console.log('store.activeLeader:', store.activeLeader);
|
||||
console.log("store.activeLeader:", store.activeLeader)
|
||||
watch(
|
||||
() => store.activeLeader,
|
||||
(newValue) => {
|
||||
console.log('store.activeLeader 变化:', newValue);
|
||||
console.log("store.activeLeader 变化:", newValue)
|
||||
},
|
||||
{ immediate: true } // 立即执行一次
|
||||
);
|
||||
)
|
||||
|
||||
// 添加关闭弹窗的方法
|
||||
const handleClose = () => {
|
||||
store.closeLeaderDetail();
|
||||
};
|
||||
store.closeLeaderDetail()
|
||||
}
|
||||
|
||||
const isVisible = computed({
|
||||
get: () => store.isLeaderDetailDialogVisible,
|
||||
set: (value) => {
|
||||
if (!value) {
|
||||
store.closeLeaderDetail();
|
||||
store.closeLeaderDetail()
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -152,7 +160,6 @@ const isVisible = computed({
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
.dialog-content-leaderInfo {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
|
@ -216,7 +223,6 @@ const isVisible = computed({
|
|||
border-radius: 4px;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(90deg, #3e607c71 0%, #2f455f62 100%);
|
||||
|
||||
}
|
||||
|
||||
.leader-post-detail-content::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ const scanAngle = ref(0)
|
|||
const scanTimer = ref(null)
|
||||
const containerWidth = 370
|
||||
const containerHeight = 276
|
||||
const hasCompletedFirstCycle = ref(false) // 添加新状态跟踪是否完成第一个周期
|
||||
|
||||
const words = ref(props.wordsCloudList)
|
||||
|
||||
|
|
@ -82,16 +83,28 @@ const startScan = () => {
|
|||
const newScanAngle = progress * 360
|
||||
|
||||
if (newScanAngle < scanAngle.value) {
|
||||
// 只在第一个周期结束时执行一次隐藏操作
|
||||
if (!hasCompletedFirstCycle.value) {
|
||||
words.value.forEach((w) => (w.visible = false))
|
||||
hasCompletedFirstCycle.value = true // 标记已完成第一个周期
|
||||
}
|
||||
startTime = timestamp
|
||||
}
|
||||
scanAngle.value = newScanAngle
|
||||
|
||||
// 只有在第一个周期内才根据角度显示词语
|
||||
if (!hasCompletedFirstCycle.value) {
|
||||
words.value.forEach((word) => {
|
||||
if (!word.visible && scanAngle.value >= word.angle) {
|
||||
word.visible = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 第一个周期结束后,所有词语保持可见
|
||||
words.value.forEach((word) => {
|
||||
word.visible = true
|
||||
})
|
||||
}
|
||||
|
||||
scanTimer.value = requestAnimationFrame(animate)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ const scanAngle = ref(0)
|
|||
const scanTimer = ref(null)
|
||||
const containerWidth = 370
|
||||
const containerHeight = 276
|
||||
const hasCompletedFirstCycle = ref(false) // 添加新状态跟踪是否完成第一个周期
|
||||
|
||||
const words = ref(props.wordsCloudList)
|
||||
|
||||
|
|
@ -82,16 +83,28 @@ const startScan = () => {
|
|||
const newScanAngle = progress * 360
|
||||
|
||||
if (newScanAngle < scanAngle.value) {
|
||||
// 只在第一个周期结束时执行一次隐藏操作
|
||||
if (!hasCompletedFirstCycle.value) {
|
||||
words.value.forEach((w) => (w.visible = false))
|
||||
hasCompletedFirstCycle.value = true // 标记已完成第一个周期
|
||||
}
|
||||
startTime = timestamp
|
||||
}
|
||||
scanAngle.value = newScanAngle
|
||||
|
||||
// 只有在第一个周期内才根据角度显示词语
|
||||
if (!hasCompletedFirstCycle.value) {
|
||||
words.value.forEach((word) => {
|
||||
if (!word.visible && scanAngle.value >= word.angle) {
|
||||
word.visible = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 第一个周期结束后,所有词语保持可见
|
||||
words.value.forEach((word) => {
|
||||
word.visible = true
|
||||
})
|
||||
}
|
||||
|
||||
scanTimer.value = requestAnimationFrame(animate)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
:space-between="32"
|
||||
:loop="true"
|
||||
:speed="500"
|
||||
:mousewheel="true"
|
||||
navigation
|
||||
:pagination="{ clickable: true }"
|
||||
:preventClicksPropagation="true"
|
||||
|
|
@ -77,7 +78,8 @@
|
|||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import { Swiper, SwiperSlide } from "swiper/vue"
|
||||
import { Navigation, Pagination, EffectCoverflow } from "swiper/modules"
|
||||
import { Navigation, Pagination, EffectCoverflow, Mousewheel } from "swiper/modules"
|
||||
|
||||
import { useRouter } from "vue-router" // 引入路由钩子
|
||||
|
||||
// Swiper 样式
|
||||
|
|
@ -85,7 +87,7 @@ import "swiper/css"
|
|||
import "swiper/css/navigation"
|
||||
import "swiper/css/pagination"
|
||||
|
||||
const modules = [Navigation, Pagination, EffectCoverflow]
|
||||
const modules = [Navigation, Pagination, EffectCoverflow, Mousewheel]
|
||||
|
||||
// 10 个导航项(按你的要求)
|
||||
const navItems = ref([
|
||||
|
|
@ -194,10 +196,8 @@ const onSetTransition = (swiper, duration) => {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
.header-image {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user