效果展示:
css:
源码参考:
<template>
<div>
<div style="position: relative; width: 100%; z-index: 1">
<div
@click="goDetail('居住环境')"
style="
position: absolute;
width: 100px;
top: 20vh;
left: 5vh;
z-index: 2;
text-align: center;
opacity: 0.85;
padding: 5px;
border-radius: 5px;
color: aqua;
"
>
<el-icon><Location /></el-icon>
<span style="color: black; background-color: aqua; padding: 3px">居住环境</span>
<span
style="
position: absolute;
width: 100px;
height: 1px;
background-color: aqua;
margin-left: 5px;
left: 10px;
top: 30px;
"
></span>
<span
style="
position: absolute;
width: 50px;
height: 1px;
background-color: aqua;
transform: rotate(45deg);
margin-left: 5px;
left: 103px;
top: 48px;
"
></span>
<span
style="
position: absolute;
width: 10px;
height: 10px;
background-color: aqua;
border-radius: 50%;
left: 143px;
top: 60px;
"
></span>
</div>
<div
@click="goDetail('商业街')"
style="
position: absolute;
width: 100px;
top: 40vh;
left: 5vh;
z-index: 2;
text-align: center;
opacity: 0.85;
padding: 5px;
border-radius: 5px;
color: aqua;
"
>
<el-icon><Location /></el-icon>
<span style="color: black; background-color: aqua; padding: 3px">商业街</span>
<span
style="
position: absolute;
width: 100px;
height: 1px;
background-color: aqua;
margin-left: 5px;
left: 10px;
top: 30px;
"
></span>
<span
style="
position: absolute;
width: 50px;
height: 1px;
background-color: aqua;
transform: rotate(45deg);
margin-left: 5px;
left: 103px;
top: 48px;
"
></span>
<span
style="
position: absolute;
width: 10px;
height: 10px;
background-color: aqua;
border-radius: 50%;
left: 143px;
top: 60px;
"
></span>
</div>
<div
@click="goDetail('历史古迹')"
style="
position: absolute;
width: 100px;
top: 30vh;
right: 10vh;
z-index: 2;
text-align: center;
opacity: 0.85;
padding: 5px;
border-radius: 5px;
color: aqua;
"
>
<el-icon><Location /></el-icon>
<span style="color: black; background-color: aqua; padding: 3px">历史古迹</span>
<span
style="
position: absolute;
width: 100px;
height: 1px;
background-color: aqua;
margin-left: 5px;
left: 10px;
top: 30px;
"
></span>
<span
style="
position: absolute;
width: 50px;
height: 1px;
background-color: aqua;
transform: rotate(-45deg);
margin-left: 5px;
left: -32px;
top: 48px;
"
></span>
<span
style="
position: absolute;
width: 10px;
height: 10px;
background-color: aqua;
border-radius: 50%;
left: -26px;
top: 60px;
"
></span>
</div>
</div>
<div class="next-page">
<h2>建设优美人文自然环境</h2>
<!-- 显示从上一页传递过来的图片 -->
<img src="/waitan.jpg" alt="外滩" class="captured-photo" />
<!-- <img v-if="photo" :src="photo" alt="Captured Photo" class="captured-photo" /> -->
<p style="padding: 10px">
城市建设是城市管理的重要组成部分。城市建设以规划为依据,通过建设工程对城市人居环境进行改造,对城市系统内各物质设施进行建设,城市建设的内容包括城市系统内各个物质设施的实物形态,是为管理城市创造良好条件的基础性、阶段性工作,是过程性和周期性比较明显的一种特殊经济工作。城市经过规划、建设后投入运行并发挥功能,提供服务,真正为市民创造良好的人居环境,保障市民正常生活,服务城市经济社会发展。因此,城市建设是以城市规划为依据最终服务于城市运行。其中分为城市精神文明建设和建筑实物建设。
</p>
</div>
</div>
</template>
<script>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Location } from "@element-plus/icons-vue";
export default {
name: "NextPage",
components: {
Location,
},
setup() {
const route = useRoute();
const photo = ref(route.query.photo);
const router = useRouter();
const goDetail = (title) => {
router.push({
name: "SitePage",
query: {
photo: photo.value,
title: title,
},
});
};
return {
photo,
goDetail,
};
},
};
</script>
<style scoped>
.next-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
background-color: #f9f9f9;
}
h1 {
margin-bottom: 20px;
}
.captured-photo {
width: 95%;
height: 60vh;
border-radius: 8px;
}
</style>