deepChartVueApp/pages/marketSituation/forexMetals.vue

<template>
	<view class="content">
		<view class="section" v-if="type === 'forex'">
			<view class="section_title">
				<text class="title_icon">💱</text>
				<text>外汇市场</text>
			</view>
			<view class="forex_grid">
				<view v-for="(item, index) in forexData" :key="index" class="forex_item">
					<view class="forex_pair">
						<text class="base_currency">{{ item.base }}</text>
						<text class="separator">/</text>
						<text class="quote_currency">{{ item.quote }}</text>
					</view>
					<view class="forex_price">
						<text class="price">{{ item.price }}</text>
						<text :class="['change', item.isRising ? 'rising' : 'falling']">
							{{ item.change }}
						</text>
					</view>
				</view>
			</view>
		</view>

		<view class="section" v-if="type === 'metals'">
			<view class="section_title">
				<text class="title_icon">🥇</text>
				<text>贵金属</text>
			</view>
			<view class="metals_grid">
				<view v-for="(item, index) in metalsData" :key="index" class="metal_item">
					<view class="metal_info">
						<text class="metal_icon">{{ item.icon }}</text>
						<text class="metal_name">{{ item.name }}</text>
					</view>
					<view class="metal_price">
						<text class="price">{{ item.price }}</text>
						<text class="unit">{{ item.unit }}</text>
						<text :class="['change', item.isRising ? 'rising' : 'falling']">
							{{ item.change }}
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 市场动态 -->
		<view class="market_news">
			<view class="section_title">
				<text class="title_icon">📰</text>
				<text>市场动态</text>
			</view>
			<view class="news_list">
				<view v-for="(news, index) in newsData" :key="index" class="news_item">
					<view class="news_content">
						<text class="news_title">{{ news.title }}</text>
						<text class="news_time">{{ news.time }}</text>
					</view>
					<view class="news_impact" :class="news.impact">
						<text>{{ news.impactText }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部安全区域 -->
		<view class="bottom_safe_area"></view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// Props
const props = defineProps({
	countryId: {
		type: Number,
		required: true
	}
})

// 判断类型
const type = computed(() => {
	return props.countryId === 11 ? 'forex' : 'metals'
})

// 外汇数据
const forexData = ref([
	{ base: 'USD', quote: 'CNY', price: '7.2456', change: '+0.0123', isRising: true },
	{ base: 'EUR', quote: 'USD', price: '1.0876', change: '-0.0034', isRising: false },
	{ base: 'GBP', quote: 'USD', price: '1.2654', change: '+0.0087', isRising: true },
	{ base: 'USD', quote: 'JPY', price: '149.87', change: '+0.45', isRising: true },
	{ base: 'AUD', quote: 'USD', price: '0.6543', change: '-0.0021', isRising: false },
	{ base: 'USD', quote: 'SGD', price: '1.3456', change: '+0.0012', isRising: true }
])

// 贵金属数据
const metalsData = ref([
	{ icon: '🥇', name: '黄金', price: '2,034.56', unit: 'USD/盎司', change: '+12.34', isRising: true },
	{ icon: '🥈', name: '白银', price: '24.87', unit: 'USD/盎司', change: '-0.23', isRising: false },
	{ icon: '⚪', name: '铂金', price: '987.65', unit: 'USD/盎司', change: '+5.67', isRising: true },
	{ icon: '⚫', name: '钯金', price: '1,234.56', unit: 'USD/盎司', change: '-8.90', isRising: false }
])

// 新闻数据
const newsData = ref([
	{
		title: '美联储暗示可能暂停加息',
		time: '2小时前',
		impact: 'high',
		impactText: '高影响'
	},
	{
		title: '欧洲央行维持利率不变',
		time: '4小时前',
		impact: 'medium',
		impactText: '中影响'
	},
	{
		title: '黄金价格创新高',
		time: '6小时前',
		impact: 'medium',
		impactText: '中影响'
	},
	{
		title: '美元指数小幅下跌',
		time: '8小时前',
		impact: 'low',
		impactText: '低影响'
	}
])
</script>

<style scoped>
.content {
	padding: 20rpx;
}

.section {
	margin-bottom: 40rpx;
}

.section_title {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.title_icon {
	font-size: 32rpx;
	margin-right: 12rpx;
}

.forex_grid, .metals_grid {
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
}

.forex_item, .metal_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.forex_item:last-child, .metal_item:last-child {
	border-bottom: none;
}

.forex_pair {
	display: flex;
	align-items: center;
}

.base_currency {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.separator {
	font-size: 24rpx;
	color: #999;
	margin: 0 8rpx;
}

.quote_currency {
	font-size: 28rpx;
	color: #666;
}

.forex_price, .metal_price {
	text-align: right;
}

.price {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.unit {
	font-size: 20rpx;
	color: #999;
	margin-left: 8rpx;
}

.change {
	font-size: 24rpx;
}

.change.rising {
	color: #e74c3c;
}

.change.falling {
	color: #27ae60;
}

.metal_info {
	display: flex;
	align-items: center;
}

.metal_icon {
	font-size: 32rpx;
	margin-right: 16rpx;
}

.metal_name {
	font-size: 28rpx;
	color: #333;
}

.market_news {
	margin-bottom: 30rpx;
}

.news_list {
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
}

.news_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.news_item:last-child {
	border-bottom: none;
}

.news_content {
	flex: 1;
}

.news_title {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.news_time {
	font-size: 24rpx;
	color: #999;
}

.news_impact {
	padding: 6rpx 12rpx;
	border-radius: 16rpx;
	font-size: 20rpx;
	color: #fff;
}

.news_impact.high {
	background: #e74c3c;
}

.news_impact.medium {
	background: #f39c12;
}

.news_impact.low {
	background: #95a5a6;
}

.bottom_safe_area {
	height: 120rpx;
}
</style>