添加了一个 广播 详情完成

src/utils/EventBus.js

@@ -0,0 +1,32 @@
+class EventBus {
+	constructor() {
+		this.events = {}
+	}
+
+	// 注册事件监听
+	on(eventName, callback) {
+		if (!this.events[eventName]) {
+			this.events[eventName] = []
+		}
+		this.events[eventName].push(callback)
+	}
+
+	// 移除事件监听
+	off(eventName, callback) {
+		if (this.events[eventName]) {
+			this.events[eventName] = this.events[eventName].filter((cb) => cb !== callback)
+		}
+	}
+
+	// 触发事件，并传入发送者标识
+	emit(eventName, payload, sender) {
+		if (this.events[eventName]) {
+			this.events[eventName].forEach((callback) => callback(payload, sender))
+		}
+	}
+}
+
+// 创建全局实例
+const eventBus = new EventBus()
+
+export default eventBus

src/views/resourceDetails/components/EqualItem.vue

@@ -0,0 +1,269 @@
+<template>
+	<div class="itemLayou">
+		<div style="display: flex; flex-direction: column">
+			<div style="width: 100%; height: 150px; background-color: aqua"></div>
+			<div style="padding: 10px">
+				<span style="display: block">{{ props.item.title }}</span>
+				<div style="display: flex; align-items: center">
+					<span style="display: block; font-size: 10px; color: darkgray">{{ props.item.name }}</span>
+					<div style="width: 1px; height: 10px; margin-left: 5px; margin-right: 5px; background-color: black"></div>
+					<span style="display: block; font-size: 10px; color: darkgray">{{ props.item.follw }}</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import TabSwitcher from './TabSwitcher.vue'
+	import EventBus from '@/utils/EventBus'
+	const emit = defineEmits(['selectTab'])
+
+	// id: 1,
+	// 			name: '张三',是1000元，请给我一个好评，谢谢',
+	// 			follw: 0,
+
+	const props = defineProps({
+		item: {
+			type: Object,
+			default: () => {}
+		}
+		// name: {
+		// 	type: String,
+		// 	default: () => ''
+		// },
+		// talk: {
+		// 	type: String,
+		// 	default: () => ''
+		// },
+		// follw: {
+		// 	type: Number,
+		// 	default: () => 0
+		// },
+		// callBackTalk: {
+		// 	type: Array,
+		// 	default: () => []
+		// }
+	})
+	const listUnpublishedView = ref(null)
+	const tallTag = ref(false)
+	const handerMessage = (form) => {
+		console.log('查询内容', form)
+		tallTag.value == true ? (tallTag.value = false) : (tallTag.value = true)
+		EventBus.emit('closeInput', null, props.item.id)
+		//....
+
+		// listUnpublishedView.value.setData(tableData.value)
+	}
+	watch(
+		() => props.item,
+		(val) => {
+			console.log('item有变化吗', val)
+		}
+	)
+	const handerPublish = () => {
+		tallTag.value = false
+		emit('publish')
+
+		//....
+		// listUnpublishedView.value.setData(tableData.value)
+	}
+	const handleCloseInput = (data, tag) => {
+		if (props.item.id != tag) {
+			tallTag.value = false
+		}
+	}
+	onMounted(() => {
+		// getList()
+	})
+
+	EventBus.off('closeInput', handleCloseInput)
+	EventBus.on('closeInput', handleCloseInput)
+</script>
+
+<style scoped>
+	.tab-switcher {
+		display: flex;
+		border-radius: 20px;
+		border: 1px solid #1e90ff;
+		overflow: hidden;
+	}
+
+	.tab-switcher div {
+		padding: 2px 20px;
+		background-color: #f5f5f5;
+
+		cursor: pointer;
+	}
+
+	.tab-switcher div.active {
+		background-color: #1e90ff;
+		color: white;
+	}
+
+	.tab-switcher div:not(:last-child) {
+	}
+
+	.user-info {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 200px;
+		border: 1px solid #dfe2e5;
+		padding: 20px;
+	}
+
+	.resource-container {
+		width: 850px;
+		margin: 0 auto;
+		padding: 20px;
+		border: 1px solid #dfe2e5;
+	}
+
+	.user-avatar {
+		width: 40px;
+		height: 40px;
+		background: #1e90ff;
+		border-radius: 50%;
+		margin-right: 10px;
+	}
+
+	.user-details {
+		flex: 1;
+	}
+
+	.user-name {
+		font-size: 13px;
+		font-weight: bold;
+	}
+
+	.publish-time {
+		font-size: 12px;
+		color: #999;
+		margin-top: 5px;
+	}
+
+	.metrics {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.metric-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	.metric-item span:first-child {
+		font-size: 18px;
+		font-weight: bold;
+	}
+
+	.metric-item span:last-child {
+		font-size: 12px;
+		color: #666;
+	}
+
+	.actions {
+		display: flex;
+	}
+
+	.share-btn,
+	.favorite-btn {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
+
+	.course-info {
+		margin-top: 20px;
+		line-height: 1.6;
+	}
+
+	.liene {
+		height: 35px;
+		width: 1px;
+		background: #00000018;
+	}
+
+	.resource-container {
+		width: 850px;
+		margin: 0 auto;
+		padding: 20px;
+		border: 1px solid #dfe2e5;
+	}
+
+	h1 {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	.ant-descriptions {
+		margin-top: 20px;
+	}
+
+	.ant-typography-title {
+		margin-top: 20px;
+	}
+
+	.ant-typography-paragraph {
+		margin-top: 10px;
+	}
+
+	.ant-space {
+		margin-top: 10px;
+	}
+	.video-info {
+		height: 100%; /* 确保填满容器高度 */
+	}
+	.resInfo {
+		margin-left: 10px;
+		width: 350px;
+		height: 570px;
+		border: 1px solid #dfe2e5;
+		padding: 10px;
+	}
+
+	.user-info-container {
+		display: flex;
+	}
+
+	.resInfoTitile {
+		width: 5px;
+		height: 14px;
+		background-color: cadetblue;
+		margin-right: 5px;
+	}
+
+	.tallList {
+		display: flex;
+		flex-direction: column;
+		width: 850px;
+		border: 1px solid #dfe2e5;
+		padding: 20px;
+		margin-top: 10px;
+	}
+
+	.tallListInfo {
+		color: rgba(0, 0, 0, 0.116);
+		font-size: 12px;
+	}
+
+	.line {
+		width: 100%;
+		height: 0.5px;
+		background-color: rgba(0, 0, 0, 0.075);
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+
+	.itemLayou {
+		padding: 0px;
+		border: 1px solid #dfe2e5;
+		cursor: pointer;
+	}
+</style>

src/views/resourceDetails/components/TabSwitcher.vue

@@ -0,0 +1,47 @@
+<template>
+	<div class="tab-switcher">
+		<div :class="{ active: selectedTab === 'latest' }" @click="selectTab('latest')">
+			<span style="font-size: 10px">最新</span>
+		</div>
+		<div :class="{ active: selectedTab === 'hot' }" @click="selectTab('hot')">
+			<span style="font-size: 10px">热门</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	const emit = defineEmits(['selectTab'])
+	const selectedTab = ref('latest')
+
+	const selectTab = (tab) => {
+		if (selectedTab.value != tab) {
+			selectedTab.value = tab
+			emit('selectTab', tab)
+		}
+	}
+</script>
+
+<style scoped>
+	.tab-switcher {
+		display: flex;
+		border-radius: 20px;
+		border: 1px solid #1e90ff;
+		overflow: hidden;
+	}
+
+	.tab-switcher div {
+		padding: 1px 15px;
+		background-color: #f5f5f5;
+
+		cursor: pointer;
+	}
+
+	.tab-switcher div.active {
+		background-color: #1e90ff;
+		color: white;
+	}
+
+	.tab-switcher div:not(:last-child) {
+	}
+</style>

src/views/resourceDetails/components/TallItem.vue

@@ -0,0 +1,318 @@
+<template>
+	<div>
+		<div>
+			<div style="display: flex; margin-left: 10px; margin-right: 10px">
+				<div style="width: 40px; height: 40px; background: #1e90ff; border-radius: 50%; margin-right: 10px"></div>
+				<div style="width: 100%">
+					<div style="display: flex; flex-direction: column; margin-bottom: 0px">
+						<span style="display: block; font-size: 14px; font-weight: bold; margin-bottom: 0px">{{
+							props.item.name
+						}}</span>
+						<span style="display: block; font-size: 12px">{{ props.item.talk }}</span>
+					</div>
+					<div style="width: 100%; display: flex; justify-content: space-between">
+						<div>
+							<span style="font-size: 10px">1天前</span>
+						</div>
+						<div style="display: flex">
+							<div>
+								<MessageOutlined @click="handerMessage" />
+								<span style="margin-left: 5px">10</span>
+							</div>
+							<div style="margin-left: 15px">
+								<LikeOutlined @click="handerfollw" />
+								<span style="margin-left: 5px">10</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-show="props.item.callBackTalk.length > 0" v-for="(item, index) in props.item.callBackTalk" :key="index">
+				<div style="display: flex; margin-left: 50px; margin-right: 0px">
+					<div style="width: 40px; height: 40px; background: #1e90ff; border-radius: 50%; margin-right: 10px"></div>
+					<div style="width: 100%">
+						<div style="display: flex; flex-direction: column; margin-bottom: 0px">
+							<span style="display: block; font-size: 14px; font-weight: bold; margin-bottom: 5px">{{
+								item.name
+							}}</span>
+							<span style="display: block; font-size: 12px">{{ item.talk }}</span>
+						</div>
+						<div style="width: 100%; display: flex; justify-content: space-between">
+							<div>
+								<span style="font-size: 10px">1天前</span>
+							</div>
+							<div style="display: flex">
+								<!-- <div>
+								<MessageOutlined @click="handerMessage" />
+								<span style="margin-left: 5px">10</span>
+							</div> -->
+								<div style="margin-left: 15px">
+									<LikeOutlined @click="handerfollw" />
+									<span style="margin-left: 5px">10</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div v-if="tallTag">
+				<div>
+					<a-textarea placeholder="" :rows="4" style="margin-top: 5px" />
+					<div style="display: flex; justify-content: flex-end; margin-top: 10px">
+						<a-button style="width: 100px" @click="handerPublish">发布</a-button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import TabSwitcher from './TabSwitcher.vue'
+	import EventBus from '@/utils/EventBus'
+	const emit = defineEmits(['selectTab'])
+
+	// id: 1,
+	// 			name: '张三',
+	// 			talk: '今天，我被你给打赏了1000元，请给我一个好评，谢谢',
+	// 			follw: 0,
+
+	const props = defineProps({
+		item: {
+			type: Object,
+			default: () => {}
+		}
+		// name: {
+		// 	type: String,
+		// 	default: () => ''
+		// },
+		// talk: {
+		// 	type: String,
+		// 	default: () => ''
+		// },
+		// follw: {
+		// 	type: Number,
+		// 	default: () => 0
+		// },
+		// callBackTalk: {
+		// 	type: Array,
+		// 	default: () => []
+		// }
+	})
+	const listUnpublishedView = ref(null)
+	const tallTag = ref(false)
+	const handerMessage = (form) => {
+		console.log('查询内容', form)
+		tallTag.value == true ? (tallTag.value = false) : (tallTag.value = true)
+		EventBus.emit('closeInput', null, props.item.id)
+		//....
+
+		// listUnpublishedView.value.setData(tableData.value)
+	}
+	watch(
+		() => props.item,
+		(val) => {
+			console.log('item有变化吗', val)
+		}
+	)
+	const handerPublish = () => {
+		tallTag.value = false
+		emit('publish')
+
+		//....
+		// listUnpublishedView.value.setData(tableData.value)
+	}
+	const handleCloseInput = (data, tag) => {
+		if (props.item.id != tag) {
+			tallTag.value = false
+		}
+	}
+	onMounted(() => {
+		// getList()
+	})
+
+	EventBus.off('closeInput', handleCloseInput)
+	EventBus.on('closeInput', handleCloseInput)
+</script>
+
+<style scoped>
+	.tab-switcher {
+		display: flex;
+		border-radius: 20px;
+		border: 1px solid #1e90ff;
+		overflow: hidden;
+	}
+
+	.tab-switcher div {
+		padding: 2px 20px;
+		background-color: #f5f5f5;
+
+		cursor: pointer;
+	}
+
+	.tab-switcher div.active {
+		background-color: #1e90ff;
+		color: white;
+	}
+
+	.tab-switcher div:not(:last-child) {
+	}
+
+	.user-info {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 200px;
+		border: 1px solid #dfe2e5;
+		padding: 20px;
+	}
+
+	.resource-container {
+		width: 850px;
+		margin: 0 auto;
+		padding: 20px;
+		border: 1px solid #dfe2e5;
+	}
+
+	.user-avatar {
+		width: 40px;
+		height: 40px;
+		background: #1e90ff;
+		border-radius: 50%;
+		margin-right: 10px;
+	}
+
+	.user-details {
+		flex: 1;
+	}
+
+	.user-name {
+		font-size: 13px;
+		font-weight: bold;
+	}
+
+	.publish-time {
+		font-size: 12px;
+		color: #999;
+		margin-top: 5px;
+	}
+
+	.metrics {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.metric-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	.metric-item span:first-child {
+		font-size: 18px;
+		font-weight: bold;
+	}
+
+	.metric-item span:last-child {
+		font-size: 12px;
+		color: #666;
+	}
+
+	.actions {
+		display: flex;
+	}
+
+	.share-btn,
+	.favorite-btn {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
+
+	.course-info {
+		margin-top: 20px;
+		line-height: 1.6;
+	}
+
+	.liene {
+		height: 35px;
+		width: 1px;
+		background: #00000018;
+	}
+
+	.resource-container {
+		width: 850px;
+		margin: 0 auto;
+		padding: 20px;
+		border: 1px solid #dfe2e5;
+	}
+
+	h1 {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	.ant-descriptions {
+		margin-top: 20px;
+	}
+
+	.ant-typography-title {
+		margin-top: 20px;
+	}
+
+	.ant-typography-paragraph {
+		margin-top: 10px;
+	}
+
+	.ant-space {
+		margin-top: 10px;
+	}
+	.video-info {
+		height: 100%; /* 确保填满容器高度 */
+	}
+	.resInfo {
+		margin-left: 10px;
+		width: 350px;
+		height: 570px;
+		border: 1px solid #dfe2e5;
+		padding: 10px;
+	}
+
+	.user-info-container {
+		display: flex;
+	}
+
+	.resInfoTitile {
+		width: 5px;
+		height: 14px;
+		background-color: cadetblue;
+		margin-right: 5px;
+	}
+
+	.tallList {
+		display: flex;
+		flex-direction: column;
+		width: 850px;
+		border: 1px solid #dfe2e5;
+		padding: 20px;
+		margin-top: 10px;
+	}
+
+	.tallListInfo {
+		color: rgba(0, 0, 0, 0.116);
+		font-size: 12px;
+	}
+
+	.line {
+		width: 100%;
+		height: 0.5px;
+		background-color: rgba(0, 0, 0, 0.075);
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+</style>

src/views/resourceDetails/components/TallList.vue

@@ -0,0 +1,354 @@
+<template>
+	<div style="display: flex">
+		<div class="tallList">
+			<div>
+				<span style="font-weight: bold; font-size: 14px">发表评论</span>
+				<span class="tallListInfo">文明上网理性发言,请遵守评论服务协议</span>
+			</div>
+			<!-- 切换 -->
+			<div>
+				<div style="display: flex">
+					<div style="display: flex; flex-direction: column; margin-left: 10px; margin-right: 10px">
+						<div
+							style="
+								width: 30px;
+								height: 30px;
+								background: #1e90ff;
+								border-radius: 50%;
+								margin-top: 15px;
+								margin-right: 15px;
+							"
+						></div>
+						<span style="display: block; font-size: 10px">未登录</span>
+					</div>
+
+					<div style="width: 100%; height: 100%; display: flex; position: relative">
+						<a-textarea placeholder="" :rows="4" disabled style="margin-top: 5px" />
+						<div
+							style="
+								flex-direction: column;
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								position: absolute;
+								left: 50%;
+								top: 50%;
+								transform: translate(-50%, -50%);
+							"
+						>
+							<span style="display: block; cursor: pointer; font-size: 12px">登陆后可以发表评论</span>
+							<span style="display: block; cursor: pointer; font-size: 12px; color: #1e90ff">立即登录</span>
+						</div>
+					</div>
+				</div>
+				<div style="display: flex; justify-content: flex-end; margin-top: 10px">
+					<a-button style="width: 100px" disabled>发布</a-button>
+				</div>
+			</div>
+
+			<div style="display: flex; justify-content: space-between; margin-top: 40px">
+				<div style="display: flex; align-items: center">
+					<span style="font-weight: bold">全部评论</span>
+					<span style="font-size: 10px; color: darkgray; margin-left: 5px">1000</span>
+				</div>
+				<TabSwitcher></TabSwitcher>
+			</div>
+			<div class="line"></div>
+
+			<div>
+				<TallItem v-for="(item, index) in list" :key="index" :item="item" @publish="publish"></TallItem>
+			</div>
+		</div>
+
+		<div class="equalList">
+			<div style="display: flex; align-items: center">
+				<div class="resInfoTitile"></div>
+				<span style="font-size: 14px; font-weight: bold">同类型资源</span>
+			</div>
+			<div style="display: flex; flex-direction: column; padding: 10px">
+				<EqualItem v-for="(item, index) in equalList" :key="index" :item="item"></EqualItem>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import TabSwitcher from './TabSwitcher.vue'
+	import TallItem from './TallItem.vue'
+	import EqualItem from './EqualItem.vue'
+	const emit = defineEmits(['selectTab'])
+	const listUnpublishedView = ref(null)
+
+	const equalList = ref([
+		{
+			id: 1,
+			name: '作者名称1',
+			title: '视频名称1',
+			follw: 1
+		},
+		{
+			id: 2,
+			name: '作者名称2',
+			title: '视频名称2',
+			follw: 2
+		},
+		{
+			id: 3,
+			name: '作者名称3',
+			title: '视频名称3',
+			follw: 3
+		}
+	])
+
+	// callBackTalk: [
+	// 			{
+	// 				id: 2,
+	// 				name: '李四',
+	// 				talk: '不给',
+	// 				follw: 0
+	// 			}
+	// 		]
+
+	const list = ref([
+		{
+			id: 1,
+			name: '张三',
+			talk: '今天，我被你给打赏了1000元，请给我一个好评，谢谢',
+			follw: 0,
+			callBackTalk: []
+		},
+		{
+			id: 2,
+			name: '王五',
+			talk: '今天，我被你给打赏了1000元，请给我一个好评，谢谢222222',
+			follw: 0,
+			callBackTalk: []
+		}
+	])
+
+	const publish = () => {
+		list.value[0].callBackTalk.push({
+			id: 1,
+			name: '张三',
+			talk: '今天，我被你给打赏了1000元，请给我一个好评，谢谢123123123',
+			follw: 0
+		})
+
+		list.value = [...list.value]
+
+		console.log('最后的', list.value)
+	}
+
+	const onQuery = (form) => {
+		console.log('查询内容', form)
+		//....
+
+		// listUnpublishedView.value.setData(tableData.value)
+	}
+
+	const getList = () => {
+		//....
+		// listUnpublishedView.value.setData(tableData.value)
+	}
+
+	onMounted(() => {
+		getList()
+	})
+</script>
+
+<style scoped>
+	.tab-switcher {
+		display: flex;
+		border-radius: 20px;
+		border: 1px solid #1e90ff;
+		overflow: hidden;
+	}
+
+	.tab-switcher div {
+		padding: 2px 20px;
+		background-color: #f5f5f5;
+
+		cursor: pointer;
+	}
+
+	.tab-switcher div.active {
+		background-color: #1e90ff;
+		color: white;
+	}
+
+	.tab-switcher div:not(:last-child) {
+	}
+
+	.user-info {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 200px;
+		border: 1px solid #dfe2e5;
+		padding: 20px;
+	}
+
+	.resource-container {
+		width: 850px;
+		margin: 0 auto;
+		padding: 20px;
+		border: 1px solid #dfe2e5;
+	}
+
+	.user-avatar {
+		width: 40px;
+		height: 40px;
+		background: #1e90ff;
+		border-radius: 50%;
+		margin-right: 10px;
+	}
+
+	.user-details {
+		flex: 1;
+	}
+
+	.user-name {
+		font-size: 13px;
+		font-weight: bold;
+	}
+
+	.publish-time {
+		font-size: 12px;
+		color: #999;
+		margin-top: 5px;
+	}
+
+	.metrics {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.metric-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	.metric-item span:first-child {
+		font-size: 18px;
+		font-weight: bold;
+	}
+
+	.metric-item span:last-child {
+		font-size: 12px;
+		color: #666;
+	}
+
+	.actions {
+		display: flex;
+	}
+
+	.share-btn,
+	.favorite-btn {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+	}
+
+	.course-info {
+		margin-top: 20px;
+		line-height: 1.6;
+	}
+
+	.liene {
+		height: 35px;
+		width: 1px;
+		background: #00000018;
+	}
+
+	.resource-container {
+		width: 850px;
+		margin: 0 auto;
+		padding: 20px;
+		border: 1px solid #dfe2e5;
+	}
+
+	h1 {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	.ant-descriptions {
+		margin-top: 20px;
+	}
+
+	.ant-typography-title {
+		margin-top: 20px;
+	}
+
+	.ant-typography-paragraph {
+		margin-top: 10px;
+	}
+
+	.ant-space {
+		margin-top: 10px;
+	}
+	.video-info {
+		height: 100%; /* 确保填满容器高度 */
+	}
+	.resInfo {
+		margin-left: 10px;
+		width: 350px;
+		height: 570px;
+		border: 1px solid #dfe2e5;
+		padding: 10px;
+	}
+
+	.user-info-container {
+		display: flex;
+	}
+
+	.resInfoTitile {
+		width: 5px;
+		height: 14px;
+		background-color: cadetblue;
+		margin-right: 5px;
+	}
+
+	.tallList {
+		display: flex;
+		flex-direction: column;
+		width: 850px;
+		border: 1px solid #dfe2e5;
+		padding: 20px;
+		margin-top: 10px;
+	}
+
+	.tallListInfo {
+		color: rgba(0, 0, 0, 0.116);
+		font-size: 12px;
+	}
+
+	.line {
+		width: 100%;
+		height: 0.5px;
+		background-color: rgba(0, 0, 0, 0.075);
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+
+	.equalList {
+		display: flex;
+		flex-direction: column;
+		width: 300px;
+		border: 1px solid #dfe2e5;
+		padding: 10px;
+		margin-top: 10px;
+		margin-left: 10px;
+	}
+	.resInfoTitile {
+		width: 5px;
+		height: 14px;
+		background-color: #1e90ff;
+		margin-right: 5px;
+	}
+</style>

src/views/resourceDetails/components/VideoDetails.vue

@@ -110,23 +110,6 @@
 				</div>
 			</div>
 		</div>
-
-		<div class="tallList">
-			<div>
-				<span style="font-weight: bold; font-size: 14px">发表评论</span>
-				<span class="tallListInfo">文明上网理性发言,请遵守评论服务协议</span>
-			</div>
-			<div>
-				<div style="display: flex">
-					<div style="display: flex">
-						<div style="width: 30px; height: 30px; background: #1e90ff; border-radius: 50%"></div>
-						<span style="display: block; font-size: 12px">未登录</span>
-					</div>
-
-					<a-textarea placeholder="请输入内容" :rows="4" style="margin-top: 5px" v-model="textAreaValue" />
-				</div>
-			</div>
-		</div>
 	</div>
 </template>
 
@@ -308,7 +291,7 @@
 	}
 	.resInfo {
 		margin-left: 10px;
-		width: 350px;
+		width: 300px;
 		height: 570px;
 		border: 1px solid #dfe2e5;
 		padding: 10px;
@@ -321,7 +304,7 @@
 	.resInfoTitile {
 		width: 5px;
 		height: 14px;
-		background-color: cadetblue;
+		background-color: #1e90ff;
 		margin-right: 5px;
 	}
 

src/views/resourceDetails/index.vue

@@ -1,11 +1,13 @@
 <template>
-	<div>
+	<div style="scroll-container">
 		<VideoDetails />
+		<TallList />
 	</div>
 </template>
 
 <script setup>
 	import VideoDetails from './components/VideoDetails.vue'
+	import TallList from './components/TallList.vue'
 
 	const handlerItemSidebar = (item) => {
 		// emit('handlerItemSidebar', item)
@@ -20,4 +22,8 @@
 	.content {
 		border: 1px solid #00000011; /* 灰色细边框 */
 	}
+	.scroll-container {
+		height: 100vh;
+		overflow-y: auto;
+	}
 </style>