落日与鲸
2025-02-24 c91a9f61f8e7497e47c8bd60043979178ab5c33b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
    <view class="content">
        <u-navbar title="选择地点" bgColor="transparent" titleStyle="font-size: 35rpx;font-weight:bold;" placeholder>
            <view slot="left">
                <image src="/static/location/back.png" class="w-19 h-35" mode=""></image>
            </view>
        </u-navbar>
        <view class="" id="container">
            
        </view>
        <view class="">
            <view class="searchMain mb-35">
                <view class="search fs-27 ">
                    <text class="mr-35 ml-50">成都市</text>
                    <image class="w-17 h-8 mr-35" src="/static/location/toleft.png" mode=""></image>
                    <image class="w-31 h-31 mr-13" src="/static/location/search.png" mode=""></image>
                    <input class="flex1" placeholder="搜索小区/写字楼等" placeholder-style="font-size:27rpx"></input>
                    <view class="sure">
                        确定
                    </view>
                </view>
 
            </view>
            <view class="card" :class="" v-for="item in 5">
                <text>天府新谷九号楼二单元</text>
                <text class="font-w500 fs-23 mt-25" style="color: rgba(0, 0, 0, 0.6);">四川省成都市高新区府城大道西段399号天</text>
 
            </view>
        </view>
 
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                latitude: 39.909,
                longitude: 116.39742,
            };
        },
        mounted() {
            
        },
         onReady() {
             var map = new BMapGL.Map("container");          // 创建地图实例 
             var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
             map.centerAndZoom(point, 15);   
         }
    }
</script>
 
<style lang="scss" scoped>
    #container {
        width: 100vw;
        height: 517rpx;
    }
 
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
 
    .searchMain {
        padding-left: 40rpx;
        padding-right: 40rpx;
        border-radius: 40rpx;
 
        .search {
            width: 669rpx;
            height: 77rpx;
            background: #FFFFFF;
            border-radius: 38rpx;
            border: 2rpx solid #DADADA;
            display: flex;
 
            align-items: center;
            justify-content: space-between;
        }
    }
 
 
    .sure {
        width: 104rpx;
        height: 69rpx;
        background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
        border-radius: 48rpx;
        font-weight: 500;
        font-size: 23rpx;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .card {
        display: flex;
        flex-direction: column;
        font-weight: 800;
        font-size: 31rpx;
        color: rgba(0, 0, 0, 0.8);
        padding: 34rpx 38rpx 33rpx 38rpx;
        background: #F2F2F2;
        border-bottom: 2rpx solid rgba(0, 10, 26, 0.07);
    }
</style>