You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
916 lines
22 KiB
916 lines
22 KiB
<template>
|
|
<view class="cotainer">
|
|
<view class="navBarBox">
|
|
<image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image>
|
|
<!-- 状态栏占位 -->
|
|
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
|
<image class="navBarBox-title" :style="{marginTop: navBarTop+'rpx'}"
|
|
:src="require('@/static/index-title.png')" mode=""></image>
|
|
<!-- 真正的导航栏内容 -->
|
|
<view class="navBar">
|
|
<view @click="showTips = true,showNear = false">
|
|
<image class="navBar-left" :src="require('@/static/index-icon.png')" mode=""></image>
|
|
</view>
|
|
<view class="navBar-center" @click="openPicker">
|
|
<view class="">
|
|
<image :src="require('@/static/home-area.png')" mode=""></image>
|
|
{{area}}
|
|
</view>
|
|
|
|
<u-icon name="arrow-down-fill"></u-icon>
|
|
</view>
|
|
<view class="" @click="goSearch">
|
|
<image class="navBar-right" :src="require('@/static/home-search.png')" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="maps">
|
|
<map id="myMap" min-scale="6" max-scale="16" :longitude="lng" show-location :enable-scroll="!showLoad"
|
|
@regionchange="pushMarkers" :scale="scale" :latitude="lat" :markers="markers" @callouttap="showDetail">
|
|
<cover-view slot="callout" class="maps-covers">
|
|
<block v-for="(item,index) in markers" :key="item.id">
|
|
<cover-view :marker-id="item.id" :key='index'>
|
|
<cover-view class="maps-cover">
|
|
<cover-view class="maps-cover-wrap">
|
|
<cover-image class="maps-cover-img" :src='item.truePath'></cover-image>
|
|
|
|
<block v-if="item.has_answer===0">
|
|
<cover-view class="maps-cover-lock">
|
|
<cover-image class="maps-cover-lockimg"
|
|
:src="'/static/home-lock.png'"></cover-image>
|
|
<cover-view></cover-view>
|
|
</cover-view>
|
|
</block>
|
|
</cover-view>
|
|
<cover-view class="maps-cover-label" v-if="showLabel">
|
|
<!-- <cover-image class="maps-labelbg" :src="'/static/home-cur.png'"></cover-image> -->
|
|
{{item.title}}
|
|
</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
</block>
|
|
</cover-view>
|
|
<cover-view class="maps-info" v-if="showNear">
|
|
<cover-view class="maps-info-near" @click="getNears" v-if="!showLocationTip">
|
|
<cover-image src="../../static/home-near.png" mode=""></cover-image>
|
|
</cover-view>
|
|
<cover-view class="maps-info-pointer" v-if="showPointer && pointer">
|
|
<cover-view class="maps-info-pointer-title">
|
|
<cover-view style="width:100%">
|
|
<cover-view>{{pointer.name}}</cover-view>
|
|
<cover-image @click="closeDetail" style="width:40rpx;height:39rpx;"
|
|
src="/static/home-close.png" mode=""></cover-image>
|
|
</cover-view>
|
|
<cover-view>距你{{pointer.distance?pointer.distance:'-'}}</cover-view>
|
|
<cover-view v-if="pointer.config.length>0">
|
|
<block v-for="(con, cIdx) in pointer.config" :key="con.key || cIdx">
|
|
<block v-if="con.key==='address'">
|
|
{{con.value}}
|
|
</block>
|
|
</block>
|
|
</cover-view>
|
|
</cover-view>
|
|
<cover-view style="width:100%;height:1px;background:#e9e9e9"></cover-view>
|
|
<cover-view class="maps-info-pointer-btn">
|
|
<cover-view @click="toMap">
|
|
<cover-image style="width:29rpx;height:30rpx;" src="/static/home-go.png"
|
|
mode=""></cover-image>
|
|
<cover-view style="display:inline-block;vertical-align: middle;">开始前往</cover-view>
|
|
</cover-view>
|
|
<cover-image @click="toDetail" style="width:201rpx;height:55rpx;" src="/static/home-btn.png"
|
|
mode=""></cover-image>
|
|
</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
<cover-view class="maps-info-tip" v-if="showLocationTip" @click="retryLocationAuth">
|
|
使用完整功能，需要获取您的定位，点击授权
|
|
</cover-view>
|
|
|
|
</map>
|
|
</view>
|
|
|
|
<u-picker class="areaPicker" v-model="showArea" :visibleItemCount='10' @confirm="confirmArea" @cancel="cancelArea" :range="listArea" range-key="value"
|
|
:confirm-color="'#e50015'" mode="selector"></u-picker>
|
|
<!-- 锦囊 -->
|
|
<view class="tips" v-if="showTips" :class="showTips?'fade-in':'fade-out'">
|
|
<view class="tips-wrap" @click="showTips=false,showNear=true">
|
|
<view class="tips-wrap-close" @click="showTips=false,showNear=true">
|
|
x
|
|
</view>
|
|
<view class="tips-wrap-img">
|
|
<u-image :show-loading="false" :fade="false" mode="widthFix" :width="711"
|
|
:src="require('../../static/toast.png')"></u-image>
|
|
<view class="tips-wrap-tip">
|
|
|
|
<view class="">
|
|
<rich-text v-if='showTips' :nodes="tips?tips:' '"></rich-text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
<myloading ref="myloading"></myloading>
|
|
<tabbar :currentPage="0"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from '@/components/tabbar/tabbar.vue'
|
|
import myloading from '@/components/myloading.vue'
|
|
import {
|
|
ROOTPATH as baseUrl
|
|
} from "@/common/config.js"
|
|
import {
|
|
isNull,
|
|
shareInfo,
|
|
toast,
|
|
getDistance,
|
|
toMapAPP
|
|
} from '@/common/util.js'
|
|
|
|
export default {
|
|
components: {
|
|
tabbar,
|
|
myloading
|
|
},
|
|
data() {
|
|
return {
|
|
navBarTop: 0,
|
|
showTips: false,
|
|
tips: '',
|
|
theme_id: '',
|
|
area: '区域',
|
|
mapContext: null,
|
|
mapTimer: null,
|
|
scale: 11,
|
|
lat: null,
|
|
lng: null,
|
|
markers: [],
|
|
pointers: [],
|
|
done: 0,
|
|
showPointer: false,
|
|
pointer: null,
|
|
listArea: [{
|
|
id: '',
|
|
value: '全部',
|
|
sort: -999999
|
|
}],
|
|
showArea: false,
|
|
tips: '',
|
|
showLoad: false,
|
|
showNear: true,
|
|
showLabel:false,
|
|
showLocationTip: false
|
|
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return shareInfo
|
|
},
|
|
onShareTimeline() {
|
|
return shareInfo
|
|
},
|
|
onReady() {
|
|
this.initLocationAuth()
|
|
this.mapContext = uni.createMapContext('myMap', this);
|
|
// 获取当前地图层级
|
|
let _this = this
|
|
|
|
if (this.mapTimer) {
|
|
clearInterval(this.mapTimer)
|
|
} else {
|
|
this.mapTimer = setInterval(function() {
|
|
_this.mapContext.getScale({
|
|
success: function(res) {
|
|
if(res.scale>12){
|
|
_this.showLabel = true
|
|
}else{
|
|
_this.showLabel = false
|
|
}
|
|
},
|
|
fail: function(error) {
|
|
console.log('获取地图缩放级别失败：', error);
|
|
}
|
|
});
|
|
}, 1000)
|
|
|
|
}
|
|
|
|
},
|
|
onLoad(option) {
|
|
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
|
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
|
// this.getUserLocation()
|
|
if (isNull(this.vuex_token)) {
|
|
this.getToken()
|
|
}
|
|
this.getArea()
|
|
this.getConfig()
|
|
|
|
},
|
|
onShow() {
|
|
let vuex_pointer = uni.getStorageSync('vuex_pointer') ? uni.getStorageSync('vuex_pointer') : null
|
|
let vuex_latlng = uni.getStorageSync('vuex_latlng') ? uni.getStorageSync('vuex_latlng') : ''
|
|
let vuex_point_id = uni.getStorageSync('vuex_point_id') ? uni.getStorageSync('vuex_point_id') : ''
|
|
// 通过搜索获取的点位信息
|
|
if (vuex_pointer) {
|
|
this.pointer = vuex_pointer
|
|
this.pointer.distance = getDistance(vuex_latlng.lat, vuex_latlng.lng, this.pointer.lat, this.pointer.lng)
|
|
this.showPointer = true
|
|
this.scale = 13
|
|
uni.removeStorageSync('vuex_pointer')
|
|
this.mapContext.moveToLocation({
|
|
longitude: parseFloat(this.pointer.lng),
|
|
latitude: parseFloat(this.pointer.lat)
|
|
});
|
|
}
|
|
// 答题的点位解锁
|
|
if (vuex_point_id) {
|
|
this.markers.map(item => {
|
|
if (item.id == vuex_point_id) {
|
|
item.has_answer = 1
|
|
uni.removeStorageSync("vuex_point_id")
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onHide() {
|
|
this.showTips = false
|
|
this.showPointer = false
|
|
this.pointer = null
|
|
if(!this.mapTimer){
|
|
this.mapTimer = null
|
|
clearInterval(this.mapTimer)
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
initLocationAuth() {
|
|
uni.getSetting({
|
|
success: (res) => {
|
|
const setting = res.authSetting || {}
|
|
const loc = setting['scope.userLocation']
|
|
if (loc === true) {
|
|
this.showLocationTip = false
|
|
this.getUserLocation()
|
|
} else if (loc === false) {
|
|
this.showLocationTip = true
|
|
} else {
|
|
// undefined: first time, try authorize
|
|
uni.authorize({
|
|
scope: 'scope.userLocation',
|
|
success: () => {
|
|
this.showLocationTip = false
|
|
this.getUserLocation()
|
|
},
|
|
fail: () => {
|
|
this.showLocationTip = true
|
|
}
|
|
})
|
|
}
|
|
},
|
|
fail: () => {
|
|
this.showLocationTip = true
|
|
}
|
|
})
|
|
},
|
|
// 我的位置
|
|
getUserLocation() {
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success: (res) => {
|
|
this.showLocationTip = false
|
|
uni.removeStorageSync('vuex_latlng')
|
|
this.lng = res.longitude
|
|
this.lat = res.latitude
|
|
uni.setStorageSync('vuex_latlng', {
|
|
lng: this.lng,
|
|
lat: this.lat
|
|
})
|
|
this.getPointers()
|
|
},
|
|
fail: (err) => {
|
|
console.log("err", err)
|
|
this.showLocationTip = true
|
|
}
|
|
})
|
|
},
|
|
retryLocationAuth() {
|
|
// 根据当前授权状态选择 authorize 或直接打开设置
|
|
uni.getSetting({
|
|
success: (res) => {
|
|
const setting = res.authSetting || {}
|
|
const loc = setting['scope.userLocation']
|
|
if (loc === true) {
|
|
this.showLocationTip = false
|
|
this.getUserLocation()
|
|
} else if (loc === false) {
|
|
uni.openSetting({
|
|
success: (rs) => {
|
|
if (rs.authSetting && rs.authSetting['scope.userLocation']) {
|
|
this.showLocationTip = false
|
|
this.getUserLocation()
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
uni.authorize({
|
|
scope: 'scope.userLocation',
|
|
success: () => {
|
|
this.showLocationTip = false
|
|
this.getUserLocation()
|
|
},
|
|
fail: () => {
|
|
uni.openSetting({
|
|
success: (rs) => {
|
|
if (rs.authSetting && rs.authSetting['scope.userLocation']) {
|
|
this.showLocationTip = false
|
|
this.getUserLocation()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
async getToken() {
|
|
await uni.login({
|
|
provider: 'weixin',
|
|
success: (res) => {
|
|
this.$u.api.login({
|
|
code: res.code
|
|
}).then(res => {
|
|
this.$u.vuex('vuex_token', res.token)
|
|
this.$u.api.user().then(res => {
|
|
this.$u.vuex('vuex_user', res)
|
|
})
|
|
this.getPointers()
|
|
}).catch(err => {
|
|
console.log('login-error:', JSON.stringify(err))
|
|
})
|
|
},
|
|
fail: (res) => {
|
|
console.log("errtoken", JSON.stringify(res))
|
|
}
|
|
});
|
|
},
|
|
async getArea() {
|
|
let that = this
|
|
let url = baseUrl + '/api/mobile/base-form/show'
|
|
url = url + '?filter[0][key]=number&filter[0][op]=eq&filter[0][value]=theme&with_relations[0]=detail'
|
|
await uni.request({
|
|
url: url,
|
|
method: "GET",
|
|
data: {
|
|
table_name: "parameters",
|
|
id: 1,
|
|
token: this.vuex_token,
|
|
activity_list_id: 13,
|
|
activity_tag: "walksz",
|
|
},
|
|
success(res) {
|
|
that.listArea.push(...res.data.detail)
|
|
that.listArea.sort((a, b) => a.sort - b.sort);
|
|
},
|
|
fail(err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
confirmArea(e) {
|
|
if (e) {
|
|
this.area = this.listArea[e].value
|
|
this.theme_id = this.listArea[e].id
|
|
this.showPointer = false
|
|
this.pointer = null
|
|
this.showNear = true
|
|
this.scale = 11
|
|
this.markers = []
|
|
|
|
// 根据区域id 遍历所有 重新生成markers
|
|
if (this.theme_id == '') {
|
|
// this.mapContext.moveToLocation({
|
|
// longitude: this.lng,
|
|
// latitude: this.lat,
|
|
// });
|
|
// this.getPointers()
|
|
this.pointers.map((item, index) => {
|
|
if (index < 10) {
|
|
this.markers.push({
|
|
id: item.id,
|
|
latitude: parseFloat(item.lat),
|
|
longitude: parseFloat(item.lng),
|
|
iconPath: '/static/home-marker.png',
|
|
truePath: item.logo ? item.logo.url : item.image.url,
|
|
width: 0,
|
|
height: 0,
|
|
title: item.name,
|
|
distance: item.distance ? parseInt(item.distance) : 0,
|
|
has_answer: item.has_answer,
|
|
customCallout: {
|
|
anchorX: 70,
|
|
anchorY: 30,
|
|
display: 'ALWAYS'
|
|
},
|
|
})
|
|
}
|
|
|
|
|
|
})
|
|
} else {
|
|
this.pointers.map((item, index) => {
|
|
if (this.theme_id && item.theme_id == this.theme_id) {
|
|
this.markers.push({
|
|
id: item.id,
|
|
latitude: parseFloat(item.lat),
|
|
longitude: parseFloat(item.lng),
|
|
iconPath: '/static/home-marker.png',
|
|
truePath: item.logo ? item.logo.url : (item.image?item.image.url:'/static/share.jpg'),
|
|
width: 0,
|
|
height: 0,
|
|
title: item.name,
|
|
distance: item.distance ? parseInt(item.distance) : 0,
|
|
has_answer: item.has_answer,
|
|
customCallout: {
|
|
anchorX: 70,
|
|
anchorY: 30,
|
|
display: 'ALWAYS'
|
|
},
|
|
})
|
|
}
|
|
})
|
|
this.mapContext.moveToLocation({
|
|
longitude: this.markers[0].longitude,
|
|
latitude: this.markers[0].latitude,
|
|
});
|
|
}
|
|
// this.getPointers()
|
|
}
|
|
},
|
|
cancelArea() {
|
|
|
|
this.showNear = true
|
|
this.showArea = false
|
|
this.showPointer = false
|
|
this.pointer = null
|
|
},
|
|
openPicker() {
|
|
uni.hideKeyboard()
|
|
this.showArea = true
|
|
this.showNear = false
|
|
this.showPointer = false
|
|
this.pointer = null
|
|
},
|
|
goSearch() {
|
|
uni.navigateTo({
|
|
url: '/packages/search/search'
|
|
})
|
|
},
|
|
getConfig() {
|
|
this.$u.api.getAppId().then((res) => {
|
|
res.config.map(item => {
|
|
if (item.key === 'tips') {
|
|
this.tips = item.value
|
|
}
|
|
})
|
|
|
|
})
|
|
},
|
|
getNears() {
|
|
this.scale = 13
|
|
this.showPointer = false
|
|
this.pointer = null
|
|
this.mapContext.moveToLocation({
|
|
longitude: this.lng,
|
|
latitude: this.lat
|
|
});
|
|
},
|
|
async getPointers() {
|
|
this.pointers = []
|
|
this.markers = []
|
|
const res = await this.$u.api.getPoints({
|
|
theme_id: this.theme_id,
|
|
})
|
|
this.pointers = res.points
|
|
this.pointers.map((item, index) => {
|
|
item.distance = getDistance(this.lat, this.lng, item.lat, item.lng)
|
|
if (index < 10) {
|
|
this.markers.push({
|
|
id: item.id,
|
|
latitude: parseFloat(item.lat),
|
|
longitude: parseFloat(item.lng),
|
|
iconPath: '/static/home-marker.png',
|
|
truePath: item.logo ? item.logo.url : (item.image?item.image.url:'/static/share.jpg'),
|
|
width: 0,
|
|
height: 0,
|
|
title: item.name,
|
|
distance: item.distance ? parseInt(item.distance) : 0,
|
|
has_answer: item.has_answer,
|
|
customCallout: {
|
|
anchorX: 70,
|
|
anchorY: 30,
|
|
display: 'ALWAYS'
|
|
},
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 移动地图加载更多
|
|
pushMarkers(e) {
|
|
let lengthM = this.markers.length //当前markers数量
|
|
// 加载完毕 或 区域选择 移动不加载
|
|
if (this.showLoad || this.theme_id) {
|
|
return
|
|
}
|
|
if (e && this.markers.length < this.pointers.length) {
|
|
this.pointers.map((item, index) => {
|
|
// 每次移动加载10条
|
|
if (index > lengthM - 1 && index < lengthM + 10) {
|
|
// uni.showLoading()
|
|
this.$refs.myloading.showLoading()
|
|
this.showLoad = true
|
|
this.markers.push({
|
|
id: item.id,
|
|
latitude: parseFloat(item.lat),
|
|
longitude: parseFloat(item.lng),
|
|
iconPath: '/static/home-marker.png',
|
|
truePath: item.logo ? item.logo.url : (item.image?item.image.url:'/static/share.jpg'),
|
|
width: 0,
|
|
height: 0,
|
|
title: item.name,
|
|
distance: item.distance ? parseInt(item.distance) : 0,
|
|
has_answer: item.has_answer,
|
|
customCallout: {
|
|
anchorX: 70,
|
|
anchorY: 30,
|
|
display: 'ALWAYS'
|
|
},
|
|
})
|
|
let that = this
|
|
setTimeout(function() {
|
|
// uni.hideLoading()
|
|
that.$refs.myloading.hideLoading()
|
|
|
|
that.showLoad = false
|
|
}, 2000)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
toDetail() {
|
|
uni.navigateTo({
|
|
url: '/packages/detail/detail?id=' + this.pointer.id,
|
|
});
|
|
},
|
|
closeDetail() {
|
|
this.showPointer = false
|
|
setTimeout(function() {
|
|
this.pointer = null
|
|
}, 100);
|
|
|
|
},
|
|
showDetail(e) {
|
|
const arr = this.pointers.filter(item => item.id === e.markerId)
|
|
if (arr.length > 0) {
|
|
this.pointer = arr[0]
|
|
this.pointer.distance = getDistance(this.lat, this.lng, this.pointer.lat, this.pointer.lng)
|
|
}
|
|
|
|
this.showPointer = true
|
|
|
|
},
|
|
toMap(e) {
|
|
toMapAPP(this.pointer.lat, this.pointer.lng, this.pointer.name)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cotainer {
|
|
.navBarBox {
|
|
// height: 299rpx;
|
|
position: fixed;
|
|
padding-bottom: 30rpx;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
border-bottom: 10rpx solid #dbd0ba;
|
|
|
|
&-top {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0
|
|
}
|
|
|
|
&-title {
|
|
width: 399rpx;
|
|
height: 102rpx;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.navBar {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
|
|
&-left {
|
|
width: 57rpx;
|
|
height: 87rpx;
|
|
}
|
|
|
|
&-center {
|
|
background: rgba(219, 208, 186, .4);
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 50rpx;
|
|
width: 55%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #73685c;
|
|
|
|
>view {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
image {
|
|
width: 31rpx;
|
|
height: 32rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
width: 58rpx;
|
|
height: 86rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.maps {
|
|
|
|
#myMap {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
&-info {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 160rpx;
|
|
width: 100%;
|
|
z-index: 99;
|
|
|
|
&-pointer {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
width: 85%;
|
|
margin: 0 auto;
|
|
padding: 30rpx;
|
|
font-size: 28rpx;
|
|
box-shadow: -2px -3rpx 12px rgba(0, 0, 0, 0.1);
|
|
|
|
&-title {
|
|
color: #919191;
|
|
padding-bottom: 20rpx;
|
|
|
|
cover-view {
|
|
margin-bottom: 10rpx;
|
|
white-space: normal;
|
|
|
|
&:first-child {
|
|
font-size: 36rpx;
|
|
color: #000;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: normal;
|
|
white-space: normal;
|
|
width: 97%;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
&-btn {
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
color: #c89a73;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
// border-top: 1px solid #e9e9e9;
|
|
|
|
cover-view {
|
|
cover-image {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-near {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
text-align: right;
|
|
|
|
cover-image {
|
|
width: 246rpx;
|
|
height: 132rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
&-tip {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 160rpx;
|
|
transform: translate(-50%,-50%);
|
|
width: 80%;
|
|
z-index: 99;
|
|
text-align: center;
|
|
background: rgba(0,0,0,0.6);
|
|
color: #fff;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
}
|
|
|
|
|
|
&-cover {
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
flex-flow: column;
|
|
&-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
&-img {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 70rpx;
|
|
border: 4rpx solid #dbd0ba;
|
|
}
|
|
|
|
&-lock {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
position: absolute;
|
|
top: 4rpx;
|
|
left: 4rpx;
|
|
text-align: center;
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 70rpx;
|
|
line-height: 70rpx;
|
|
|
|
}
|
|
|
|
&-lockimg {
|
|
width: 26rpx;
|
|
height: 34rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-top: 18rpx;
|
|
}
|
|
|
|
&-label {
|
|
// cover-image {
|
|
// width: 270rpx;
|
|
// height: 65rpx;
|
|
|
|
// }
|
|
|
|
font-size: 22rpx;
|
|
color: #960909;
|
|
width: 200rpx;
|
|
text-align: center;
|
|
white-space: normal;
|
|
// cover-view {
|
|
// padding: 10rpx;
|
|
// width: 200rpx;
|
|
// white-space: normal;
|
|
// position: absolute;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
|
|
&-wrap {
|
|
&-close {
|
|
color: #fff;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 80rpx;
|
|
line-height: 70rpx;
|
|
text-align: center;
|
|
border: 1px solid #fff;
|
|
position: absolute;
|
|
top: 135rpx;
|
|
left: 20rpx;
|
|
font-size: 50rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
&-img {
|
|
position: relative;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
u-image {
|
|
&>view {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-tip {
|
|
color: #333;
|
|
font-size: 33rpx;
|
|
margin: 0 auto;
|
|
line-height: 1.7;
|
|
height: 610rpx;
|
|
overflow: scroll;
|
|
position: absolute;
|
|
top: 390rpx;
|
|
left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
width: 80%;
|
|
|
|
view {
|
|
p {
|
|
text-indent: 2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.areaPicker{
|
|
.u-drawer{
|
|
>view{
|
|
.u-picker-body{
|
|
height:750rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fade-in .5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fade-out .4s ease-out both;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style> |