解决dist.zip文件的合并冲突
This commit is contained in:
commit
6b95cc62e6
BIN
src/assets/images/head/big-title.png
Normal file
BIN
src/assets/images/head/big-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
|
|
@ -335,7 +335,7 @@ const wordCloudData = ref([
|
||||||
.top-container {
|
.top-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
background-image: url("@/assets/images/head/leaderOptionText.png");
|
background-image: url("@/assets/images/head/big-title.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
fill: linear-gradient(270deg, rgba(6, 61, 113, 0.1) 0%, rgba(8, 30, 56, 0.38) 100%);
|
fill: linear-gradient(270deg, rgba(6, 61, 113, 0.1) 0%, rgba(8, 30, 56, 0.38) 100%);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="post-dynamics-container">
|
<div class="anchorStatistics-component">
|
||||||
<!-- <div class="header">事件脉络分析</div> -->
|
<img
|
||||||
|
src="@/assets/images/head/ContextoftheincidentTitle.png"
|
||||||
|
alt=""
|
||||||
|
style="margin-top: -17px; margin-left: -11px"
|
||||||
|
/>
|
||||||
<div
|
<div
|
||||||
class="post-list-wrapper"
|
class="post-list-wrapper"
|
||||||
ref="listRef"
|
ref="listRef"
|
||||||
|
|
@ -38,14 +42,14 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, onBeforeUnmount } from "vue"
|
import { ref, computed, onMounted, onBeforeUnmount } from "vue"
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
posts: {
|
posts: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const emit = defineEmits(["handle:openDialog"])
|
|
||||||
|
const emit = defineEmits(["click:openDialog"])
|
||||||
const animationDuration = computed(() => `${props.posts.length * 3}s`)
|
const animationDuration = computed(() => `${props.posts.length * 3}s`)
|
||||||
|
|
||||||
const maxInfluence = 10000
|
const maxInfluence = 10000
|
||||||
|
|
@ -55,7 +59,8 @@ const getInfluenceWidth = (influence) => {
|
||||||
return `${Math.min(percentage, 100)}%`
|
return `${Math.min(percentage, 100)}%`
|
||||||
}
|
}
|
||||||
const handleLeaderPost = (item) => {
|
const handleLeaderPost = (item) => {
|
||||||
emit("handle:openDialog", item)
|
emit("click:openDialog", item)
|
||||||
|
console.log(item)
|
||||||
}
|
}
|
||||||
|
|
||||||
const listRef = ref(null)
|
const listRef = ref(null)
|
||||||
|
|
@ -99,158 +104,151 @@ onBeforeUnmount(() => {
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="less">
|
||||||
.post-dynamics-container {
|
.anchorStatistics-component {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: "PingFang SC", sans-serif;
|
.post-list-wrapper {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
height: 80%;
|
||||||
border: none;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
/* 滚动条整体样式 - WebKit浏览器 */
|
||||||
|
.post-list-wrapper::-webkit-scrollbar {
|
||||||
|
width: 3px; /* 垂直滚动条宽度 */
|
||||||
|
height: 5px; /* 水平滚动条高度 */
|
||||||
|
}
|
||||||
|
|
||||||
.post-list-wrapper {
|
/* 滚动条滑块 */
|
||||||
flex-grow: 1;
|
.post-list-wrapper::-webkit-scrollbar-thumb {
|
||||||
overflow: hidden;
|
background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
|
||||||
position: relative;
|
border-radius: 4px;
|
||||||
overflow: auto;
|
}
|
||||||
padding-right: 8px;
|
|
||||||
}
|
|
||||||
/* 滚动条整体样式 - WebKit浏览器 */
|
|
||||||
.post-list-wrapper::-webkit-scrollbar {
|
|
||||||
width: 5px; /* 垂直滚动条宽度 */
|
|
||||||
height: 5px; /* 水平滚动条高度 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 滚动条滑块 */
|
/* 鼠标悬停在滑块上的效果 */
|
||||||
.post-list-wrapper::-webkit-scrollbar-thumb {
|
.post-list-wrapper::-webkit-scrollbar-thumb:hover {
|
||||||
background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
|
background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
|
||||||
border-radius: 4px;
|
}
|
||||||
}
|
.scrolling-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1px;
|
||||||
|
animation-name: scroll-up;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
/* 鼠标悬停在滑块上的效果 */
|
.post-list-wrapper:hover .scrolling-content {
|
||||||
.post-list-wrapper::-webkit-scrollbar-thumb:hover {
|
animation-play-state: paused;
|
||||||
background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
|
}
|
||||||
}
|
|
||||||
.scrolling-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1px;
|
|
||||||
animation-name: scroll-up;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list-wrapper:hover .scrolling-content {
|
.post-item {
|
||||||
animation-play-state: paused;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 16px;
|
||||||
|
background: linear-gradient(90deg, rgba(63, 169, 245, 0.16) 0%, rgba(0, 84, 187, 0) 100%);
|
||||||
|
border-left: 2px solid #3fa9f5;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
gap: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.post-item {
|
.post-item.highlighted {
|
||||||
display: flex;
|
background: linear-gradient(90deg, rgba(63, 169, 245, 0.4) 0%, rgba(0, 84, 187, 0) 100%);
|
||||||
align-items: center;
|
}
|
||||||
height: 36px;
|
|
||||||
padding: 0 16px;
|
|
||||||
background: linear-gradient(90deg, rgba(63, 169, 245, 0.16) 0%, rgba(0, 84, 187, 0) 100%);
|
|
||||||
border-left: 2px solid #3fa9f5;
|
|
||||||
color: white;
|
|
||||||
font-size: 14px;
|
|
||||||
gap: 12px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 8px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-item.highlighted {
|
.post-type {
|
||||||
background: linear-gradient(90deg, rgba(63, 169, 245, 0.4) 0%, rgba(0, 84, 187, 0) 100%);
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.post-type {
|
.post-type-text {
|
||||||
display: flex;
|
color: #8efbff;
|
||||||
align-items: center;
|
font-size: 14px;
|
||||||
gap: 8px;
|
font-weight: 400;
|
||||||
flex-shrink: 0;
|
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-type-text {
|
.timestamp {
|
||||||
color: #8efbff;
|
flex-shrink: 0;
|
||||||
font-size: 14px;
|
}
|
||||||
font-weight: 400;
|
|
||||||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timestamp {
|
.author {
|
||||||
flex-shrink: 0;
|
flex-grow: 1;
|
||||||
}
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
.author {
|
.influence-section {
|
||||||
flex-grow: 1;
|
display: flex;
|
||||||
text-align: left;
|
align-items: center;
|
||||||
white-space: nowrap;
|
gap: 8px;
|
||||||
overflow: hidden;
|
flex-shrink: 0;
|
||||||
text-overflow: ellipsis;
|
}
|
||||||
}
|
.influence-label {
|
||||||
|
width: 90px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.influence-bar {
|
||||||
|
width: 200px;
|
||||||
|
height: 10px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.influence-section {
|
.bar-track {
|
||||||
display: flex;
|
width: 100%;
|
||||||
align-items: center;
|
height: 2px;
|
||||||
gap: 8px;
|
background-color: rgba(208, 222, 238, 0.1);
|
||||||
flex-shrink: 0;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.influence-label {
|
|
||||||
width: 90px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
.influence-bar {
|
|
||||||
width: 200px;
|
|
||||||
height: 10px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-track {
|
.bar-fill {
|
||||||
width: 100%;
|
position: absolute;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background-color: rgba(208, 222, 238, 0.1);
|
background: linear-gradient(270deg, #00f3ff 0%, #00527d 100%);
|
||||||
position: absolute;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.bar-fill {
|
.bar-handle-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 2px;
|
top: 50%;
|
||||||
background: linear-gradient(270deg, #00f3ff 0%, #00527d 100%);
|
transform: translateY(-50%);
|
||||||
}
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.bar-handle-wrapper {
|
.bar-handle {
|
||||||
position: absolute;
|
width: 10px;
|
||||||
top: 50%;
|
height: 10px;
|
||||||
transform: translateY(-50%);
|
border-radius: 50%;
|
||||||
height: 16px;
|
background-color: #e0f1ff;
|
||||||
width: 16px;
|
position: relative;
|
||||||
display: flex;
|
box-shadow: 0 0 6px 0 rgba(13, 97, 255, 0.8);
|
||||||
justify-content: center;
|
}
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-handle {
|
.bar-handle::before {
|
||||||
width: 10px;
|
content: "";
|
||||||
height: 10px;
|
position: absolute;
|
||||||
border-radius: 50%;
|
top: 50%;
|
||||||
background-color: #e0f1ff;
|
left: 50%;
|
||||||
position: relative;
|
transform: translate(-50%, -50%);
|
||||||
box-shadow: 0 0 6px 0 rgba(13, 97, 255, 0.8);
|
width: 16px;
|
||||||
}
|
height: 16px;
|
||||||
|
border-radius: 50%;
|
||||||
.bar-handle::before {
|
border: 1px solid rgba(21, 154, 255, 0.3);
|
||||||
content: "";
|
}
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 1px solid rgba(21, 154, 255, 0.3);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -62,10 +62,6 @@
|
||||||
粉丝量：
|
粉丝量：
|
||||||
<p>{{ curSelectedUser.fans }}</p>
|
<p>{{ curSelectedUser.fans }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="posts">
|
|
||||||
发帖数：
|
|
||||||
<p>{{ curSelectedUser.postNum }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -61,10 +61,6 @@
|
||||||
粉丝量：
|
粉丝量：
|
||||||
<p>{{ curSelectedUser.fans }}</p>
|
<p>{{ curSelectedUser.fans }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="posts">
|
|
||||||
发帖数：
|
|
||||||
<p>{{ curSelectedUser.postNum }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -82,10 +82,6 @@
|
||||||
粉丝量：
|
粉丝量：
|
||||||
<p>{{ curSelectedUser.fans }}</p>
|
<p>{{ curSelectedUser.fans }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="posts">
|
|
||||||
发帖数：
|
|
||||||
<p>{{ curSelectedUser.postNum }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user