AIProd/pages/Launches/FinanceDetail/index.vue

<template>
	<div id="normal-container">
		<IntegratedLayout>
			<div class="content">
				<div class="title-text">{{ financeDetail.title || '' }}</div>
				<div class="rate-box">
					<Rate v-model="financeDetail.rating" readonly />
					<div class="flex" style="gap: 20px">
						<CommentBtn :comment-count="commentCount" />
					</div>
				</div>
				<div class="terms-item">
					<div class="item-title">
						<img src="/ToolDetail/icon_note.png" alt="">
						<span>Introduction: </span>
					</div>
					<div class="item-content">
						<div style="padding-right: 70px">
							{{ financeDetail.summary || '' }}
						</div>
					</div>
				</div>
				<div class="terms-item">
					<div class="item-title">
						<img src="/ToolDetail/icon_clock.png" alt="">
						<span>Data update: </span>
					</div>
					<div class="item-content">{{ financeDetail.publishTime || '' }}</div>
				</div>
				<div class="terms-item">
					<div class="item-title">
						<img src="/ToolDetail/like_icon.png" alt="">
						<span>Like: </span>
					</div>
					<div class="item-content">{{ financeDetail.likeCount || 0 }}</div>
				</div>
				<div class="tags">
					<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it }}</div>
				</div>
				<div class="diver"></div>
				<div class="title">Special Financing</div>
				<div class="card content-box">
					<SpecialFinanceItem />
				</div>
			</div>
		</IntegratedLayout>
	</div>
</template>

<script>
import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
import SpecialFinanceItem from "@/pages/Launches/FinanceDetail/SpecialFinanceItem.vue";

export default {
	components: {CommentBtn, SpecialFinanceItem},
	data() {
		return {
			commentCount: 0,
			financeDetail: {
				title: 'The Timeline Of Sketch',
				rating: 1,
				summary: 'The newly upgraded Sketch of Athens has optimized the loading speed of offline maps, added an AR real-scene navigation function, and expanded the hidden scenic spots recommended by local creators, making the exploration of Athens smoother, smarter and more in-depth',
				publishTime: 'Sep 03 2025',
				likeCount: 100,
			},
			tagList: [
				'Sketch',
				'Athens',
				'Offline Maps',
				'AR',
				'Navigation',
				'Scenic Spots',
				'Exploration',
			],
		}
	},
	methods: {},
}
</script>

<style scoped lang="scss">
.card {
	padding: 50px 30px;
	background-color: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
}
.title {
	margin-bottom: 20px;
	font-size: 30px;
	color: #1E293B;
	font-family: 'Poppins-SemiBold', serif;
	font-weight: 600;
	&::before {
		content: '';
		display: inline-block;
		width: 6px;
		height: 26px;
		background: $header-backgroungd;
		margin-right: 8px;
		border-radius: 0 6px 6px 0;
	}
}
.content {
	padding-top: 180px;
	padding-bottom: 100px;

	.content-box {
		padding: 50px 30px;
	}

	.diver {
		margin-top: 20px;
		border-top: 4px solid #E2E8F0;
		margin-bottom: 20px;
	}

	.title-text {
		font-size: 34px;
		color: #1E293B;
		font-family: 'Poppins-SemiBold', serif;
		font-weight: 600;
		margin-top: 80px;
	}

	.rate-box {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn-wrapper {
			display: flex;
			align-items: center;
			gap: 20px;
		}
	}

	.terms-item {
		margin-bottom: 30px;
		display: flex;
		align-items: flex-start;
		gap: 7px;

		.item-title {
			display: flex;
			align-items: center;
			gap: 8px;
			color: #1E293B;
			font-family: 'Poppins-Medium', serif;

			img {
				width: 24px;
				height: 24px;
			}
		}

		.item-content {
			font-family: 'Poppins-Regular', serif;
			color: #64748B;
		}
	}

	.tags {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		user-select: none;
		flex-wrap: wrap;
		width: 80%;

		.tag-item {
			font-family: 'Poppins-Medium', serif;
			flex-shrink: 0;
			padding: 4px 12px;
			border-radius: 12px;
			@include gradient-border($linear-gradient-start, $linear-gradient-end);
		}
	}
}
</style>