Merge branch 'main' of https://git.zdool.com/xs/yxdt/h5 into main
liuyalei
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=4e6d9067f64ad8101ca0f4ceb7cb4083"></script>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"pinia": "^2.1.7",
|
||||
"vant": "^4.8.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 415 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 322 B |
|
After Width: | Height: | Size: 373 B |
|
After Width: | Height: | Size: 948 B |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 775 B |
|
After Width: | Height: | Size: 754 B |
|
|
@ -11,4 +11,10 @@ const app = createApp(App)
|
|||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
import vant from 'vant';
|
||||
import 'vant/lib/index.css';
|
||||
app.use(vant)
|
||||
|
||||
|
||||
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,9 +1,220 @@
|
|||
<script setup>
|
||||
import TheWelcome from '../components/TheWelcome.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TheWelcome />
|
||||
</main>
|
||||
<div class="home_body" id="home">
|
||||
<div class="yxfw" @click="list.show = !list.show">
|
||||
<img class="yxfwtp" :src="list.show == true ? img16 : img15" alt="" />
|
||||
<div :class="list.show == true ? 'yxfwwz' : 'yxfwwzs'">优享服务</div>
|
||||
</div>
|
||||
<div class="yxfwnr" v-show="list.show == true">
|
||||
<div
|
||||
v-for="(item, index) in list.yxfw"
|
||||
:key="index"
|
||||
@click="yxfwxz(item)"
|
||||
>
|
||||
<div class="yxfws">
|
||||
<img
|
||||
class="yxfwtp"
|
||||
:src="item.id == list.index ? item.imgs : item.img"
|
||||
alt=""
|
||||
/>
|
||||
<div :class="item.id == list.index ? 'yxfwwz' : 'yxfwwzs'">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="fgx"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mapDiv"></div>
|
||||
<van-popup
|
||||
:show="true"
|
||||
:overlay="false"
|
||||
round
|
||||
position="bottom"
|
||||
:style="{ height: '30%' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive } from "vue";
|
||||
import img1 from "@/assets/home/yysy.png";
|
||||
import img2 from "@/assets/home/yysyxz.png";
|
||||
import img3 from "@/assets/home/xyyj.png";
|
||||
import img4 from "@/assets/home/xyyjxz.png";
|
||||
import img5 from "@/assets/home/lysd.png";
|
||||
import img6 from "@/assets/home/lysdxz.png";
|
||||
import img7 from "@/assets/home/byly.png";
|
||||
import img8 from "@/assets/home/bylyxz.png";
|
||||
import img9 from "@/assets/home/lysd.png";
|
||||
import img10 from "@/assets/home/lysdxz.png";
|
||||
import img11 from "@/assets/home/zyyj.png";
|
||||
import img12 from "@/assets/home/zyyjxz.png";
|
||||
import img13 from "@/assets/home/ryzf.png";
|
||||
import img14 from "@/assets/home/ryzfxz.png";
|
||||
import img15 from "@/assets/home/yxfw.png";
|
||||
import img16 from "@/assets/home/yxfwxz.png";
|
||||
import img17 from "@/assets/home/yy.png";
|
||||
var map = null;
|
||||
var control = null;
|
||||
const list = reactive({
|
||||
show: true,
|
||||
index: 0,
|
||||
yxfw: [
|
||||
{
|
||||
id: 0,
|
||||
name: "幼有善育",
|
||||
img: img1,
|
||||
imgs: img2,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "学有优教",
|
||||
img: img3,
|
||||
imgs: img4,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "劳有所得",
|
||||
img: img5,
|
||||
imgs: img6,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "病有良医",
|
||||
img: img7,
|
||||
imgs: img8,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "老有康养",
|
||||
img: img9,
|
||||
imgs: img10,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "住有宜居",
|
||||
img: img11,
|
||||
imgs: img12,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "弱有众扶",
|
||||
img: img13,
|
||||
imgs: img14,
|
||||
},
|
||||
],
|
||||
});
|
||||
const init = () => {
|
||||
var T = window.T;
|
||||
map = new T.Map("mapDiv");
|
||||
// map.setMapType(window.TMAP_SATELLITE_MAP);
|
||||
map.centerAndZoom(new T.LngLat(121.91686, 29.42154), 12);
|
||||
control = new T.Control.Zoom();
|
||||
//添加缩放平移控件
|
||||
map.addControl(control);
|
||||
control.setPosition(T_ANCHOR_TOP_RIGHT);
|
||||
var icon = new T.Icon({
|
||||
iconUrl: img17,
|
||||
iconSize: new T.Point(28, 28),
|
||||
iconAnchor: new T.Point(28, 28),
|
||||
});
|
||||
//向地图上添加自定义标注
|
||||
var marker = new T.Marker(new T.LngLat(121.94773, 29.47982), { icon: icon });
|
||||
var markers = new T.Marker(new T.LngLat(121.89074, 29.40876), { icon: icon });
|
||||
map.addOverLay(marker);
|
||||
map.addOverLay(markers);
|
||||
};
|
||||
|
||||
const yxfwxz = (e) => {
|
||||
list.index = e.id;
|
||||
};
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.home_body {
|
||||
position: relative;
|
||||
}
|
||||
#mapDiv {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
}
|
||||
.yxfw {
|
||||
margin-top: 15px;
|
||||
margin-left: 16px;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
.yxfwtp {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 6px auto 0;
|
||||
}
|
||||
.yxfwwz {
|
||||
font-size: 8px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #4379ff;
|
||||
line-height: 5px;
|
||||
}
|
||||
.yxfwwzs {
|
||||
font-size: 8px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
line-height: 5px;
|
||||
}
|
||||
}
|
||||
.yxfwnr {
|
||||
margin-top: 72px;
|
||||
margin-left: 16px;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
.fgx {
|
||||
width: 50%;
|
||||
height: 5px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
margin: 0 auto 5px;
|
||||
}
|
||||
.yxfws {
|
||||
z-index: 2;
|
||||
width: 40px;
|
||||
background: #ffffff;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
|
||||
.yxfwtp {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 6px auto 0;
|
||||
}
|
||||
.yxfwwz {
|
||||
font-size: 8px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #4379ff;
|
||||
line-height: 8px;
|
||||
}
|
||||
.yxfwwzs {
|
||||
font-size: 8px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
line-height: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
21
yarn.lock
|
|
@ -122,6 +122,16 @@
|
|||
resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
|
||||
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
|
||||
|
||||
"@vant/popperjs@^1.3.0":
|
||||
version "1.3.0"
|
||||
resolved "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz#e0eff017124b5b2352ef3b36a6df06277f4400f2"
|
||||
integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
|
||||
|
||||
"@vant/use@^1.6.0":
|
||||
version "1.6.0"
|
||||
resolved "https://registry.npmmirror.com/@vant/use/-/use-1.6.0.tgz#237df3091617255519552ca311ffdfea9de59001"
|
||||
integrity sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==
|
||||
|
||||
"@vitejs/plugin-vue@^4.4.0":
|
||||
version "4.5.1"
|
||||
resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.5.1.tgz#84815bfeb46928c03a9ed765e4a8425c22345e15"
|
||||
|
|
@ -217,7 +227,7 @@
|
|||
"@vue/compiler-ssr" "3.3.10"
|
||||
"@vue/shared" "3.3.10"
|
||||
|
||||
"@vue/shared@3.3.10":
|
||||
"@vue/shared@3.3.10", "@vue/shared@^3.0.0":
|
||||
version "3.3.10"
|
||||
resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.10.tgz#1583a8d85a957d8b819078c465d2a11db7914b2f"
|
||||
integrity sha512-2y3Y2J1a3RhFa0WisHvACJR2ncvWiVHcP8t0Inxo+NKz+8RKO4ZV8eZgCxRgQoA6ITfV12L4E6POOL9HOU5nqw==
|
||||
|
|
@ -422,6 +432,15 @@ to-regex-range@^5.0.1:
|
|||
dependencies:
|
||||
is-number "^7.0.0"
|
||||
|
||||
vant@^4.8.0:
|
||||
version "4.8.0"
|
||||
resolved "https://registry.npmmirror.com/vant/-/vant-4.8.0.tgz#46cc6cf77593abb1ccf023629b3f47e15aade1dd"
|
||||
integrity sha512-JeEcSd1zt0+fcSo/wuyvhF+dUdd1IaaJmrG0BTiUvH/XcBJEUaTSSEaYG0V8iI38xUTUCuDG+TSfSoSeEwGVAQ==
|
||||
dependencies:
|
||||
"@vant/popperjs" "^1.3.0"
|
||||
"@vant/use" "^1.6.0"
|
||||
"@vue/shared" "^3.0.0"
|
||||
|
||||
vite@^4.4.11:
|
||||
version "4.5.1"
|
||||
resolved "https://registry.npmmirror.com/vite/-/vite-4.5.1.tgz#3370986e1ed5dbabbf35a6c2e1fb1e18555b968a"
|
||||
|
|
|
|||