223 lines
7.8 KiB
Vue
223 lines
7.8 KiB
Vue
<template>
|
|
<scroll-view :scroll-y="true" class="nearby-scroll">
|
|
<view class="nearby-map" @touchmove.stop.prevent>
|
|
<zhuo-tianditu-MultiPoint-Mapper
|
|
ref="tMap"
|
|
:showLabel="false"
|
|
:showCirle="true"
|
|
api-key="e122b0518f43b32dcc256edbae20a5d1"
|
|
@onLoad="LoadComplite"
|
|
></zhuo-tianditu-MultiPoint-Mapper>
|
|
</view>
|
|
<view class="nearby-list">
|
|
<view class="list-head" @touchmove.stop.prevent>
|
|
<view class="tab-options">
|
|
<view class="tab-scroll" ref="progress">
|
|
<view class="tab-scr-d" :style="`width: ${state.progressWidth}`">
|
|
<view class="">1km</view>
|
|
<view class="">5km</view>
|
|
<view class="">10km</view>
|
|
</view>
|
|
<bingProgressComponent
|
|
strokeWidth="7px"
|
|
:max="10"
|
|
activeColor="#13C57C"
|
|
handleWidth="10px"
|
|
handleHeight="10px"
|
|
handleBorderRadius="5px"
|
|
handleColor="#4778EC"
|
|
@change="progressChange"
|
|
:showInfo="false"
|
|
:width="state.progressWidth"
|
|
></bingProgressComponent>
|
|
</view>
|
|
<view class="tab-op-right">
|
|
<view class="tab-recommend">推荐</view>
|
|
<view class="tab-filter">
|
|
<view class="tab-number">1000+</view>
|
|
<image class="image" src="/static/icon/filter.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="one-cards">
|
|
<view class="card-box" v-for="(item, index) in 20" :key="index">
|
|
<view class="box-row mar_top0">
|
|
<view class="row-left">销售工程师-高级销售经理</view>
|
|
<view class="row-right">1万-2万</view>
|
|
</view>
|
|
<view class="box-row">
|
|
<view class="row-left">
|
|
<view class="row-tag">本科</view>
|
|
<view class="row-tag">1-5年</view>
|
|
</view>
|
|
</view>
|
|
<view class="box-row mar_top0">
|
|
<view class="row-item mineText">2024.1.8</view>
|
|
<view class="row-item mineText">8人</view>
|
|
<view class="row-item mineText textblue">匹配度93%</view>
|
|
<view class="row-item">
|
|
<uni-icons type="star" size="28"></uni-icons>
|
|
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
|
|
</view>
|
|
</view>
|
|
<view class="box-row">
|
|
<view class="row-left mineText">湖南沃森电气科技有限公司</view>
|
|
<view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import bingProgressComponent from '/components/bing-progress/bing-progress.vue';
|
|
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
|
|
const tMap = ref();
|
|
const progress = ref();
|
|
const state = reactive({
|
|
progressWidth: '150px',
|
|
});
|
|
|
|
onMounted(() => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query
|
|
.select('.tab-scroll')
|
|
.boundingClientRect((data) => {
|
|
state.progressWidth = data.width - 50 + 'px';
|
|
})
|
|
.exec();
|
|
tMap.value.open(104.397894, 31.126855);
|
|
});
|
|
|
|
// 初始化
|
|
function LoadComplite() {
|
|
console.log('天地图加载完成');
|
|
const list = [
|
|
{
|
|
id: 0,
|
|
label: '',
|
|
lat: 31.126855,
|
|
lon: 104.397894,
|
|
},
|
|
];
|
|
tMap.value.addFeature(list);
|
|
}
|
|
function progressChange(e) {
|
|
tMap.value.changeRange(e.value);
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.nearby-scroll
|
|
overflow: hidden;
|
|
.nearby-map
|
|
height: 467rpx;
|
|
background: #e8e8e8;
|
|
.nearby-list
|
|
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
|
.list-head
|
|
height: 77rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
|
position: relative;
|
|
top: -17rpx;
|
|
z-index: 9999;
|
|
.tab-options
|
|
margin-top: -15rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 77rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
|
padding: 0 24rpx;
|
|
overflow: hidden;
|
|
.tab-scroll
|
|
height: 77rpx;
|
|
flex: 1;
|
|
padding-right: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
.tab-scr-d
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-weight: 400;
|
|
font-size: 21rpx;
|
|
color: #000000;
|
|
.tab-op-left
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
.tab-list
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
margin-right: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #606060;
|
|
.tab-op-right
|
|
display: flex;
|
|
align-items: center;
|
|
.tab-recommend
|
|
white-space: nowrap;
|
|
width: 92rpx;
|
|
height: 42rpx;
|
|
background: #4778EC;
|
|
border-radius: 17rpx 17rpx 0rpx 17rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 21rpx;
|
|
line-height: 42rpx;
|
|
margin-right: 12rpx;
|
|
.tab-number
|
|
font-size: 21rpx;
|
|
color: #606060;
|
|
line-height: 25rpx;
|
|
text-align: center;
|
|
.tab-filter
|
|
display: flex;
|
|
.image
|
|
width: 28rpx;
|
|
height: 27rpx;
|
|
|
|
.one-cards
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 20rpx;
|
|
.card-box
|
|
width: calc(100% - 36rpx - 36rpx);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 17rpx;
|
|
padding: 15rpx 36rpx;
|
|
margin-top: 24rpx;
|
|
.box-row
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 8rpx;
|
|
align-items: center;
|
|
.mineText
|
|
font-weight: 400;
|
|
font-size: 21rpx;
|
|
color: #606060;
|
|
.textblue
|
|
color: #4778EC;
|
|
.row-left
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.row-tag
|
|
background: #13C57C;
|
|
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
|
font-size: 21rpx;
|
|
color: #FFFFFF;
|
|
line-height: 25rpx;
|
|
text-align: center;
|
|
padding: 4rpx 8rpx;
|
|
margin-right: 23rpx;
|
|
.card-box:first-child
|
|
margin-top: 6rpx;
|
|
</style>
|