727 lines
16 KiB
Vue
727 lines
16 KiB
Vue
<template>
|
||
<scroll-view scroll-y="true" class="page-scroll">
|
||
<view class="container">
|
||
<view class="header">
|
||
<text class="title">黄金实时价格</text>
|
||
<text class="subtitle">黄金9999 (1053)</text>
|
||
</view>
|
||
|
||
<!-- 当前价格卡片 -->
|
||
<view class="price-card" v-if="currentPrice">
|
||
<view class="price-main">
|
||
<view class="price-main-left">
|
||
<text class="price-label">当前价格</text>
|
||
<text class="price-value">¥{{ formatPrice(currentPrice.price) }}</text>
|
||
</view>
|
||
<view class="price-main-right">
|
||
<view class="refresh-btn" @click="handleRefreshPrice" :class="{ loading: refreshing }">
|
||
<text>{{ refreshing ? '查询中...' : '立马查询' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="price-change" :class="priceChangeClass">
|
||
<text class="change-value">{{ priceChangeText }}</text>
|
||
<text class="change-percent">{{ priceChangePercentText }}</text>
|
||
</view>
|
||
<view class="price-details">
|
||
<view class="detail-item">
|
||
<text class="detail-label">最高</text>
|
||
<text class="detail-value">¥{{ formatPrice(currentPrice.highPrice) }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">最低</text>
|
||
<text class="detail-value">¥{{ formatPrice(currentPrice.lowPrice) }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">开盘</text>
|
||
<text class="detail-value">¥{{ formatPrice(currentPrice.openPrice) }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">昨收</text>
|
||
<text class="detail-value">¥{{ formatPrice(currentPrice.yesterdayClose) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="update-time">
|
||
<text>更新时间: {{ currentPrice.updateTime }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view class="loading-card" v-if="loading">
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 无数据状态 -->
|
||
<view class="error-card" v-if="!loading && !error && !currentPrice">
|
||
<text class="error-text">暂无黄金价格数据，请稍后再试</text>
|
||
</view>
|
||
|
||
<!-- 错误状态 -->
|
||
<view class="error-card" v-if="error && !loading">
|
||
<text class="error-text">{{ error }}</text>
|
||
<view class="retry-btn" @click="loadCurrentPrice">
|
||
<text>重试</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日期切换区域 -->
|
||
<view class="date-switch-section" v-if="currentDate">
|
||
<view class="date-switch-container">
|
||
<view class="date-btn" @click="goToPreviousDay" :class="{ disabled: isFirstDay }">
|
||
<text>前一天</text>
|
||
</view>
|
||
<view class="date-display">
|
||
<text class="date-text">{{ currentDate }}</text>
|
||
</view>
|
||
<view class="date-btn" @click="goToNextDay" :class="{ disabled: isToday }">
|
||
<text>后一天</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 历史价格图表 -->
|
||
<view class="chart-section" v-if="dailyPrices.length > 0">
|
||
<text class="section-title">{{ currentDate }} 价格走势</text>
|
||
<view class="chart-container">
|
||
<canvas canvas-id="priceChart" id="priceChart" type="2d" class="price-chart"></canvas>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 无数据提示 -->
|
||
<view class="error-card" v-if="!loading && dailyPrices.length === 0 && currentDate">
|
||
<text class="error-text">该日期暂无数据</text>
|
||
</view>
|
||
|
||
<!-- 历史价格列表 -->
|
||
<view class="history-section" v-if="dailyPrices.length > 0">
|
||
<text class="section-title">{{ currentDate }} 价格记录</text>
|
||
<view class="history-list">
|
||
<view class="history-item" v-for="(item, index) in dailyPrices" :key="index">
|
||
<text class="history-date">{{ item.updateTime }}</text>
|
||
<text class="history-price">¥{{ formatPrice(item.price) }}</text>
|
||
<text class="history-change" :class="getChangeClass(item.priceChange)">
|
||
{{ formatChange(item.priceChange) }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部预留空白区域，避免历史记录被底部导航遮挡 -->
|
||
<view class="bottom-spacer"></view>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import { getCurrentGoldPrice, getGoldPricesByDate, getLatestGoldPriceDate, refreshGoldPrice } from '../../api/gold-price';
|
||
|
||
const currentPrice = ref(null);
|
||
const dailyPrices = ref([]);
|
||
const currentDate = ref('');
|
||
const loading = ref(false);
|
||
const error = ref('');
|
||
const refreshing = ref(false);
|
||
|
||
const priceChangeClass = computed(() => {
|
||
if (!currentPrice.value || !currentPrice.value.priceChange) return '';
|
||
return currentPrice.value.priceChange >= 0 ? 'up' : 'down';
|
||
});
|
||
|
||
const priceChangeText = computed(() => {
|
||
if (!currentPrice.value || currentPrice.value.priceChange === null) return '--';
|
||
const change = currentPrice.value.priceChange;
|
||
return change >= 0 ? `+${formatPrice(change)}` : formatPrice(change);
|
||
});
|
||
|
||
const priceChangePercentText = computed(() => {
|
||
if (!currentPrice.value || currentPrice.value.priceChangePercent === null) return '--';
|
||
const percent = currentPrice.value.priceChangePercent;
|
||
return percent >= 0 ? `+${percent.toFixed(2)}%` : `${percent.toFixed(2)}%`;
|
||
});
|
||
|
||
const isToday = computed(() => {
|
||
if (!currentDate.value) return false;
|
||
const today = formatDate(new Date());
|
||
return currentDate.value === today;
|
||
});
|
||
|
||
const isFirstDay = computed(() => {
|
||
// 简单判断：如果当前日期是今天，则不能往前
|
||
// 实际应该查询数据库是否有更早的数据，这里简化处理
|
||
return false;
|
||
});
|
||
|
||
const formatPrice = (price) => {
|
||
if (price === null || price === undefined) return '--';
|
||
return Number(price).toFixed(2);
|
||
};
|
||
|
||
const formatChange = (change) => {
|
||
if (change === null || change === undefined) return '--';
|
||
return change >= 0 ? `+${Number(change).toFixed(2)}` : Number(change).toFixed(2);
|
||
};
|
||
|
||
const getChangeClass = (change) => {
|
||
if (change === null || change === undefined) return '';
|
||
return change >= 0 ? 'up' : 'down';
|
||
};
|
||
|
||
const formatDate = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
};
|
||
|
||
const formatTime = (dateTimeStr) => {
|
||
if (!dateTimeStr) return '';
|
||
// dateTimeStr 格式: "2024-01-15 10:15:00"
|
||
return dateTimeStr;
|
||
};
|
||
|
||
const loadCurrentPrice = async () => {
|
||
loading.value = true;
|
||
error.value = '';
|
||
try {
|
||
const res = await getCurrentGoldPrice();
|
||
if (res && res.code === 200) {
|
||
if (res.data) {
|
||
currentPrice.value = res.data;
|
||
} else {
|
||
currentPrice.value = null;
|
||
}
|
||
} else {
|
||
error.value = res?.message || '获取价格失败';
|
||
}
|
||
} catch (e) {
|
||
console.error('获取当前价格失败', e);
|
||
error.value = '网络请求失败，请稍后重试';
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const handleRefreshPrice = async () => {
|
||
if (refreshing.value) return;
|
||
|
||
refreshing.value = true;
|
||
try {
|
||
const res = await refreshGoldPrice('1053');
|
||
if (res && res.code === 200) {
|
||
if (res.data) {
|
||
currentPrice.value = res.data;
|
||
uni.showToast({
|
||
title: '查询成功',
|
||
icon: 'success'
|
||
});
|
||
// 如果当前查看的是今天，刷新当天的价格列表
|
||
const today = formatDate(new Date());
|
||
if (currentDate.value === today) {
|
||
await loadDailyPrices(today);
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: '查询失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res?.message || '查询失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (e) {
|
||
console.error('立即查询失败', e);
|
||
uni.showToast({
|
||
title: '查询失败，请稍后重试',
|
||
icon: 'none'
|
||
});
|
||
} finally {
|
||
refreshing.value = false;
|
||
}
|
||
};
|
||
|
||
const loadDailyPrices = async (date) => {
|
||
try {
|
||
const res = await getGoldPricesByDate('1053', date);
|
||
if (res && res.code === 200) {
|
||
dailyPrices.value = res.data || [];
|
||
if (dailyPrices.value.length > 0) {
|
||
// 确保数据按时间排序
|
||
dailyPrices.value.sort((a, b) => {
|
||
return new Date(a.updateTime) - new Date(b.updateTime);
|
||
});
|
||
// 延迟绘制图表，确保 canvas 已渲染
|
||
setTimeout(() => {
|
||
drawChart();
|
||
}, 100);
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('获取当天价格失败', e);
|
||
}
|
||
};
|
||
|
||
const goToPreviousDay = () => {
|
||
if (isFirstDay.value) return;
|
||
const date = new Date(currentDate.value);
|
||
date.setDate(date.getDate() - 1);
|
||
currentDate.value = formatDate(date);
|
||
loadDailyPrices(currentDate.value);
|
||
};
|
||
|
||
const goToNextDay = () => {
|
||
if (isToday.value) return;
|
||
const date = new Date(currentDate.value);
|
||
date.setDate(date.getDate() + 1);
|
||
const newDate = formatDate(date);
|
||
const today = formatDate(new Date());
|
||
if (newDate > today) return;
|
||
currentDate.value = newDate;
|
||
loadDailyPrices(currentDate.value);
|
||
};
|
||
|
||
const drawChart = () => {
|
||
const ctx = uni.createCanvasContext('priceChart');
|
||
const data = [...dailyPrices.value];
|
||
|
||
if (data.length === 0) return;
|
||
|
||
const width = 320;
|
||
const height = 180;
|
||
const padding = 40;
|
||
const chartWidth = width - padding * 2;
|
||
const chartHeight = height - padding * 2;
|
||
|
||
const prices = data.map((item) => Number(item.price));
|
||
const minPrice = Math.min(...prices) * 0.998;
|
||
const maxPrice = Math.max(...prices) * 1.002;
|
||
const priceRange = maxPrice - minPrice;
|
||
|
||
// 绘制背景
|
||
ctx.setFillStyle('#FFF8E1');
|
||
ctx.fillRect(0, 0, width, height);
|
||
|
||
// 绘制网格线
|
||
ctx.setStrokeStyle('#E0E0E0');
|
||
ctx.setLineWidth(0.5);
|
||
for (let i = 0; i <= 4; i++) {
|
||
const y = padding + (chartHeight / 4) * i;
|
||
ctx.beginPath();
|
||
ctx.moveTo(padding, y);
|
||
ctx.lineTo(width - padding, y);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// 绘制价格线
|
||
ctx.setStrokeStyle('#FFB300');
|
||
ctx.setLineWidth(2);
|
||
ctx.beginPath();
|
||
|
||
data.forEach((item, index) => {
|
||
const x = padding + (chartWidth / (data.length - 1 || 1)) * index;
|
||
const y = padding + chartHeight - ((Number(item.price) - minPrice) / priceRange) * chartHeight;
|
||
|
||
if (index === 0) {
|
||
ctx.moveTo(x, y);
|
||
} else {
|
||
ctx.lineTo(x, y);
|
||
}
|
||
});
|
||
ctx.stroke();
|
||
|
||
// 绘制数据点
|
||
ctx.setFillStyle('#FF8F00');
|
||
data.forEach((item, index) => {
|
||
const x = padding + (chartWidth / (data.length - 1 || 1)) * index;
|
||
const y = padding + chartHeight - ((Number(item.price) - minPrice) / priceRange) * chartHeight;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 3, 0, 2 * Math.PI);
|
||
ctx.fill();
|
||
});
|
||
|
||
// 绘制Y轴标签
|
||
ctx.setFillStyle('#5D4037');
|
||
ctx.setFontSize(10);
|
||
for (let i = 0; i <= 4; i++) {
|
||
const price = maxPrice - (priceRange / 4) * i;
|
||
const y = padding + (chartHeight / 4) * i;
|
||
ctx.fillText(price.toFixed(1), 5, y + 3);
|
||
}
|
||
|
||
// 绘制X轴标签（时间点）
|
||
ctx.setFillStyle('#5D4037');
|
||
ctx.setFontSize(9);
|
||
const labelInterval = Math.max(1, Math.floor(data.length / 6)); // 最多显示6个标签
|
||
data.forEach((item, index) => {
|
||
if (index % labelInterval === 0 || index === data.length - 1) {
|
||
const x = padding + (chartWidth / (data.length - 1 || 1)) * index;
|
||
// 从 updateTime 提取时间部分（HH:mm）
|
||
const timeStr = item.updateTime ? item.updateTime.split(' ')[1]?.substring(0, 5) : '';
|
||
if (timeStr) {
|
||
ctx.fillText(timeStr, x - 15, height - 10);
|
||
}
|
||
}
|
||
});
|
||
|
||
ctx.draw();
|
||
};
|
||
|
||
const initPage = async () => {
|
||
// 先加载当前价格
|
||
await loadCurrentPrice();
|
||
|
||
// 获取最近有数据的日期
|
||
try {
|
||
const res = await getLatestGoldPriceDate('1053');
|
||
if (res && res.code === 200 && res.data) {
|
||
const latestDate = res.data;
|
||
const today = formatDate(new Date());
|
||
// 如果最近有数据的日期是今天，则显示今天；否则显示最近有数据的日期
|
||
currentDate.value = latestDate === today ? today : latestDate;
|
||
} else {
|
||
// 如果没有数据，默认显示今天
|
||
currentDate.value = formatDate(new Date());
|
||
}
|
||
} catch (e) {
|
||
console.error('获取最近日期失败', e);
|
||
// 出错时默认显示今天
|
||
currentDate.value = formatDate(new Date());
|
||
}
|
||
|
||
// 加载当前日期的数据
|
||
if (currentDate.value) {
|
||
await loadDailyPrices(currentDate.value);
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
initPage();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-scroll {
|
||
height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #ffe5cc 0%, #ffd4a8 50%, #ffc08a 100%);
|
||
padding: 20rpx;
|
||
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
padding: 30rpx 0;
|
||
}
|
||
|
||
.title {
|
||
display: block;
|
||
font-size: 44rpx;
|
||
font-weight: bold;
|
||
color: #5d4037;
|
||
text-shadow: 2rpx 2rpx 0 #ffd700;
|
||
}
|
||
|
||
.subtitle {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #8d6e63;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.price-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border: 3rpx solid #c8956e;
|
||
box-shadow: 0 8rpx 20rpx rgba(200, 149, 110, 0.15);
|
||
}
|
||
|
||
.price-main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.price-main-left {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.price-main-right {
|
||
flex: 0 0 auto;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.price-label {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #8d6e63;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.price-value {
|
||
display: block;
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
color: #5d4037;
|
||
}
|
||
|
||
.refresh-btn {
|
||
padding: 12rpx 24rpx;
|
||
background: linear-gradient(135deg, #c8956e, #ffd700);
|
||
border-radius: 20rpx;
|
||
border: 2rpx solid #5d4037;
|
||
text-align: center;
|
||
min-width: 120rpx;
|
||
}
|
||
|
||
.refresh-btn text {
|
||
font-size: 24rpx;
|
||
color: #5d4037;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.refresh-btn.loading {
|
||
opacity: 0.7;
|
||
background: linear-gradient(135deg, #bdbdbd, #e0e0e0);
|
||
}
|
||
|
||
.refresh-btn.loading text {
|
||
color: #757575;
|
||
}
|
||
|
||
.price-change {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.price-change.up .change-value,
|
||
.price-change.up .change-percent {
|
||
color: #fa3534;
|
||
}
|
||
|
||
.price-change.down .change-value,
|
||
.price-change.down .change-percent {
|
||
color: #19be6b;
|
||
}
|
||
|
||
.change-value,
|
||
.change-percent {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.price-details {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.detail-item {
|
||
flex: 1;
|
||
min-width: 45%;
|
||
background: linear-gradient(135deg, rgba(200, 149, 110, 0.1), rgba(255, 215, 0, 0.1));
|
||
padding: 15rpx;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.detail-label {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #8d6e63;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.detail-value {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #5d4037;
|
||
}
|
||
|
||
.update-time {
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
font-size: 22rpx;
|
||
color: #bcaaa4;
|
||
}
|
||
|
||
.loading-card,
|
||
.error-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 20rpx;
|
||
padding: 60rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border: 3rpx solid #c8956e;
|
||
text-align: center;
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 28rpx;
|
||
color: #8d6e63;
|
||
}
|
||
|
||
.error-text {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: #fa3534;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.retry-btn {
|
||
display: inline-block;
|
||
padding: 15rpx 40rpx;
|
||
background: linear-gradient(135deg, #c8956e, #ffd700);
|
||
border-radius: 30rpx;
|
||
border: 2rpx solid #5d4037;
|
||
}
|
||
|
||
.retry-btn text {
|
||
font-size: 26rpx;
|
||
color: #5d4037;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.date-switch-section {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border: 3rpx solid #c8956e;
|
||
}
|
||
|
||
.date-switch-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.date-btn {
|
||
flex: 1;
|
||
padding: 15rpx 20rpx;
|
||
background: linear-gradient(135deg, #c8956e, #ffd700);
|
||
border-radius: 15rpx;
|
||
border: 2rpx solid #5d4037;
|
||
text-align: center;
|
||
}
|
||
|
||
.date-btn text {
|
||
font-size: 26rpx;
|
||
color: #5d4037;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.date-btn.disabled {
|
||
background: #e0e0e0;
|
||
border-color: #bdbdbd;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.date-btn.disabled text {
|
||
color: #9e9e9e;
|
||
}
|
||
|
||
.date-display {
|
||
flex: 2;
|
||
text-align: center;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.date-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #5d4037;
|
||
}
|
||
|
||
.chart-section,
|
||
.history-section {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border: 3rpx solid #c8956e;
|
||
}
|
||
|
||
.section-title {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #5d4037;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 360rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.price-chart {
|
||
width: 640rpx;
|
||
height: 360rpx;
|
||
}
|
||
|
||
.history-list {
|
||
max-height: 500rpx;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.history-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid rgba(200, 149, 110, 0.2);
|
||
}
|
||
|
||
.history-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.history-date {
|
||
font-size: 24rpx;
|
||
color: #8d6e63;
|
||
flex: 1.5;
|
||
}
|
||
|
||
.history-price {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #5d4037;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.history-change {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
|
||
.history-change.up {
|
||
color: #fa3534;
|
||
}
|
||
|
||
.history-change.down {
|
||
color: #19be6b;
|
||
}
|
||
|
||
.bottom-spacer {
|
||
height: 200px;
|
||
}
|
||
</style>
|