<template> <n-layout class="container"> <!-- 主体内容 --> <n-layout-content class="content"> <n-grid :cols="24" :x-gap="24" responsive="screen"> <!-- 图片
展示区 --> <n-gi :span="14"> <n-image-group> <div class="image-container"> <n-image :src="currentImage.src" :alt="currentImage.alt" object-fit="cover" class="main-image" /> <n-space justify="space-between" class="thumbnails" :wrap="false"> <n-image v-for="(img, index) in images" :key="index" :src="img.src" :alt="img.alt" width="140" height="120" object-fit="cover" class="thumbnail" :class="{ active: img.src === currentImage.src }" @click="setCurrentImage(img)" /> </n-space> </div> </n-image-group> </n-gi> <!-- 信息
展示区 --> <n-gi :span="10"> <n-card title="滆湖基本信息" hoverable class="info-card"> <!-- 基本信息
表格 --> <n-descriptions bordered label-placement="left" column="1"> <n-descriptions-item v-for="(item, index) in lakeInfo" :key="index" :label="item.label" > {{ item.value }} </n-descriptions-item> </n-descriptions> <!-- 详细介绍 --> <n-h2 class="section-title">生态价值</n-h2> <div class="description"> <p>滆湖是太湖流域的重要湖泊，水域面积约{{ lakeInfo[1].value }}，平均水深约{{ lakeInfo[2].value }}。</p> <p>{{ lakeInfo[3].value }}拥有丰富的水生植物资源，包括芦苇、菖蒲等湿地植物，为多种鸟类提供栖息地。</p> <p>湖中生活着{{ lakeInfo[4].value }}等多种鱼类，是重要的水产养殖基地和水源保护地。</p> </div> </n-card> </n-gi> </n-grid> </n-layout-content> <!-- 底部信息 --> <n-layout-footer class="footer"> <p>© 2025 滆湖渔业管理委员会办公室 | 数据更新于 {{ lastUpdated }}</p> </n-layout-footer> </n-layout> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { NLayout, NLayoutContent, NLayoutFooter, NH2, NGrid, NGi, NCard, NDescriptions, NDescriptionsItem, NImage, NImageGroup, NSpace, NButton, NIcon } from '
naive-
ui'; import { MapOutline as MapIcon } from '@vicons/ionicons5'; // 正确导入图片资源 import quanjing1 from '@/assets/GeneralManagement/quanjing1.png'; import quanjing from '@/assets/GeneralManagement/quanjing.png'; import bird from '@/assets/GeneralManagement/bird.png'; import shidi from '@/assets/GeneralManagement/shidi.png'; import yuye from '@/assets/GeneralManagement/yuye.png'; interface LakeInfoItem { label: string; value: string | number; } interface LakeImage { src: string; alt: string; } export default defineComponent({ components: { NLayout, NLayoutContent, NLayoutFooter, NH2, NGrid, NGi, NCard, NDescriptions, NDescriptionsItem, NImage, NImageGroup, NSpace, NButton, NIcon, MapIcon }, setup() { // 滆湖基本信息数据 const lakeInfo: LakeInfoItem[] = [ { label: '地理位置', value: '江苏省常州市武进区' }, { label: '水域面积', value: '146.5平方公里' }, { label: '平均水深', value: '1.18米' }, { label: '湖泊类型', value: '浅水草型湖泊' }, { label: '主要鱼类', value: '鲫鱼、鲤鱼、草鱼、鲢鱼等30余种' }, { label: '水质等级', value: 'III类（良好）' } ]; // 图片数据 - 使用导入的图片变量 const images: LakeImage[] = [ { src: quanjing, alt: '滆湖风光' }, { src: bird, alt: '滆湖鸟类' }, { src: shidi, alt: '滆湖湿地' }, { src: yuye, alt: '滆湖渔业' } ]; const mainImages: LakeImage[] = [ { src: quanjing1, alt: '滆湖全景' } ]; // 当前显示的主图 const currentImage = ref(mainImages[0]); // 设置当前主图 const setCurrentImage = (img: LakeImage) => { currentImage.value = img; }; // 最后更新时间 const lastUpdated = ref('2025-11-12'); return { lakeInfo, images, currentImage, lastUpdated, setCurrentImage, }; } }); </script> <style scoped> /* 整体布局样式 */ .container { min-height: 100%; background: linear-gradient(to bottom, #f0f8ff, #e6f7ff); font-family: 'Microsoft YaHei', sans-serif; padding: 20px 0; } .content { padding: 2rem; max-width: 1200px; margin: 0 auto; } .image-container { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); background: white; padding: 10px; } .main-image { width: 100%; height: 400px; border-radius: 8px; transition: transform 0.3s ease; object-fit: cover; border: 1px solid #eee; } .main-image:hover { transform: scale(1.02); } .thumbnails { margin-top: 20px; padding: 0 10px; overflow-x: auto; display: flex; gap: 10px; } .thumbnail { border-radius: 8px; cursor: pointer; transition: all 0.3s; border: 2px solid transparent; flex-shrink: 0; } .thumbnail:hover { transform: translateY(-5px); border-color: #3498db; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .thumbnail.active { border-color: #1a6dcc; box-shadow: 0 0 0 3px rgba(26, 109, 204, 0.3); } .info-card { border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; height: 100%; display: flex; flex-direction: column; } .info-card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .section-title { color: #1a6dcc; border-left: 4px solid #3498db; padding-left: 12px; margin: 1.5rem 0 1rem; font-weight: bold; } .description { line-height: 1.8; color: #555; text-align: justify; flex-grow: 1; font-size: 16px; } .map-button { margin-top: 20px; background: linear-gradient(90deg, #1a6dcc, #3498db); border: none; font-weight: bold; letter-spacing: 1px; transition: all 0.3s; } .map-button:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(26, 109, 204, 0.3); } .footer { text-align: center; padding: 1.5rem; color: #666; background-color: #f8f9fa; border-top: 1px solid #eee; margin-top: 30px; } /* 响应式调整 */ @media (max-width: 768px) { .content { padding: 1rem; } .image-container, .info-card { margin-bottom: 1.5rem; } .main-image { height: 300px; } n-gi { grid-column: span 24 !important; } } @media (max-width: 480px) { .main-image { height: 250px; } .thumbnails { padding: 0; } .thumbnail { width: 80px; height: 60px; } } </style>
在下方缩略图上增加
展示用的标签
前端开发中一定要加 key 值
扫一扫
到【灌水乐园】发言
3214
