保存1025

This commit is contained in:
chengdandan 2022-10-25 15:07:39 +08:00
parent bb3c65dd1a
commit 50dc59419e
17 changed files with 944 additions and 157 deletions

View File

@ -3,8 +3,7 @@
"pages/start/start",
"pages/map/map",
"pages/list/list",
"pages/item/item",
"pages/index/index"
"pages/item/item"
],
"plugins": {
"routePlan": {

View File

@ -1,60 +0,0 @@
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
openId:'',
page:'',
url:'',
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad(options) {
if (wx.getUserProfile) {
// let url = 'https://www.umayle.com/inland/dist/index.html?openId='+options.openId+'&page='+options.page;
// console.log(url);
// this.setData({
// openId: options.openId,
// page: options.page,
// url: url,
// canIUseGetUserProfile: true
// })
}
console.log(options,'options');
this.setData({
url: options.weburl //获取H5页面传递过来的weburl
});
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息开发者每次通过该接口获取用户个人信息均需用户确认开发者妥善保管用户快速填写的头像昵称避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息预计自2021年4月13日起getUserInfo将不再弹出弹窗并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

View File

@ -1,3 +0,0 @@
{
"usingComponents": {}
}

View File

@ -1,4 +0,0 @@
<!--index.wxml-->
<view class="container">
<web-view src='{{url}}'></web-view>
</view>

View File

@ -1,19 +0,0 @@
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
}

View File

@ -8,11 +8,31 @@ Page({
title: '',
loading: true,
movie: {},
currentIndex: 0,
},
/**
* 生命周期函数--监听页面加载
*/
pagechange: function (e) {
// 通过touch判断改变tab的下标值
if ("touch" === e.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
// 拿到当前索引并动态改变
this.setData({
currentIndex: currentPageIndex,
})
}
},
//点击tab时触发
titleClick: function (e) {
this.setData({
//拿到当前索引并动态改变
currentIndex: e.currentTarget.dataset.idx
})
},
onLoad: function (options) {
const _this = this;
// 拼接请求url
@ -44,7 +64,8 @@ Page({
onReady: function () {
// 修改导航栏标题
wx.setNavigationBarTitle({
title: this.data.title + '<<预警信息<<详情'
// title: this.data.title + '<<预警信息<<详情'
title: this.data.title+ '详情'
})
}
})

View File

@ -4,8 +4,7 @@
<loading hidden="{{!loading}}">加载中...</loading>
<!--滚动列表-->
<scroll-view scroll-y="true" wx:if="{{movie.title}}">
<view class='meta'>
<!-- <image src='{{movie.images}}' background-size="cover"></image> -->
<!-- <view class='meta'>
<view class='poster'>
<video
id="myVideo"
@ -21,14 +20,62 @@
</view>
<text class='info'>描述:{{movie.average}}</text>
<!-- <text class='info'>导演:<block wx:for="{{movie.directors}}" wx:key="id">{{movie.name}}</block></text>
<text class='info'>主演:<block wx:for="{{movie.casts}}" wx:key="id">{{movie.name}}</block></text> -->
<!-- <view class='summary'>
<text class='label'>摘要:</text>
<text class='content'>{{movie.summary}}</text>
</view> -->
</view> -->
<view>
<!-- Tab布局 -->
<view class='navBox'>
<view class='titleBox' bindtap='titleClick' data-idx='0'>
<text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">事件回放</text>
<hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
</view>
<view class='titleBox' bindtap='titleClick' data-idx='1'>
<text class="{{1 == currentIndex ? 'fontColorBox1' : ''}}">现场直播</text>
<hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
</view>
</view>
<!-- 内容布局 -->
<swiper class='swiperTtemBox' bindchange='pagechange' current='{{currentIndex}}'>
<swiper-item class='swiperTtemBox'>
<view class='meta'>
<view class='poster'>
<video
id="myVideo"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
danmu-list="{{danmuList}}"
enable-danmu
danmu-btn
controls>
</video>
</view>
<view class='main'>
<text class='title'>{{movie.title}}({{movie.year}})</text>
</view>
<text class='info'>描述:{{movie.average}}</text>
</view>
</swiper-item>
<swiper-item class='swiperTtemBox'>
<view class='meta'>
<view class='poster'>
<video
id="myVideo"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
danmu-list="{{danmuList}}"
enable-danmu
danmu-btn
controls
></video>
</view>
<view class='main'>
<text class='title'>{{movie.title}}({{movie.year}})</text>
</view>
<text class='info'>描述:{{movie.average}}</text>
</view>
</swiper-item>
</swiper>
</view>
</scroll-view>

View File

@ -39,3 +39,59 @@
.main{
margin-top: -20px;
}
.fontColorBox,
.fontColorBox1 {
/* 文字默认颜色 */
color: black;
}
.navBox {
/* 顶部tab盒子样式 */
width: 100%;
height: 108rpx;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.navBox view:last-child {
/* 最后一个tab标题的样式 */
padding-left: 20%;
}
.titleBox {
/* 未选中文字的样式 */
color: rgb(168, 170, 175);
font-size: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.lineBox,.notLineBox{
/* 选中及未选中底线共同样式 */
width: 32rpx;
height: 8rpx;
}
.lineBox {
/* 选中底线样式 */
background: rgb(43, 44, 45);
margin-top: 16rpx;
border-radius: 4rpx;
}
.notLineBox {
/* 未选中底线样式 */
background: transparent;
}
.swiperTtemBox {
/* 底部内容样式 */
height: 100vh;
overflow: scroll;
margin: 12rpx 0rpx;
background: white;
font-size: 28rpx;
}

View File

@ -30,13 +30,13 @@ Page({
page: a,
})
},
changeNext:function () {
setTimeout(() => {
wx.redirectTo({
url:'/pages/item/item'
})
}, 2000);
},
// changeNext:function () {
// setTimeout(() => {
// wx.redirectTo({
// url:'/pages/item/item'
// })
// }, 2000);
// },
onLoad: function (options) { // options 为 board页传来的参数
const _this = this;
// 拼接请求url
@ -62,7 +62,7 @@ Page({
// })
_this.setData({
title: '日本7.2级地震',
list: [{id:'001',title:'日本7.2级地震',content:'17:00:00日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'002',title:'日本7.2级地震',content:'17:00:00日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'003',title:'日本7.2级地震',content:'17:00:00日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'003',title:'日本7.2级地震',content:'17:00:00日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'003',title:'日本7.2级地震',content:'17:00:00日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'003',title:'日本7.2级地震',content:'17:00:00日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'}],
list: [{id:'001',title:'日本7.2级地震',content:'17:00:00日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'}],
type: '1111',
loading: false // 关闭等待框
})

View File

@ -5,7 +5,6 @@
<view class="swiper-tab">
<view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}
<!-- ({{item.num}}) -->
<hr class="{{page==index?'selected-line':'unselect-line'}}" />
</view>
</view>
@ -27,7 +26,7 @@
<view class='meta'>
<view class='titContent'>
<text class='title'>{{item.title}}</text>
<text class='titleButton' bindtap="changeNext">详情</text>
<text class='titleButton' >详情</text>
</view>
<text class='sub-title'>{{item.year}}</text><text>{{item.content}}</text>
@ -43,7 +42,7 @@
<view class='meta'>
<view class='titContent'>
<text class='title'>{{item.title}}</text>
<text class='titleButton' bindtap="changeNext">详情</text>
<text class='titleButton' >详情</text>
</view>
<view class='subContent'>
<text class='sub-year'>{{item.year}}</text><text class='sub-title'>{{item.content}}</text>

BIN
pages/map/images/cmhdq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
pages/map/images/sxhdq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

View File

@ -9,11 +9,177 @@ Page({
* 页面的初始数据
*/
data: {
isChecked:false,
inputVal:'',
latitude: 31.22786,
longitude: 121.46658,
latitude: 33.963864,
longitude: 118.277435,
suggestion:[],
district:{}
district:{},
distance: '',
distance: '',
scale: 11,
currMaker: {},
markers: [],
customCalloutMarkerIds: [1,2,3],
list:{name:'1111',},
mapShow:true,
listShow:false,
tabList: [{
title: '总体情况',
num: 0
}, {
title: '特殊事件',
num: 1
}],
listNew: [{id:'01',title:'日本7.2级地震',content:'170000日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'170000日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'170000日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'170000日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'170000日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'},{id:'01',title:'日本7.2级地震',content:'170000日本发生7.2级地震,张家港桥跨中位移超限,其余桥梁无异',year:'2022年7月7日'}], // 数据列表
page: 0, // page当前页--
currentIndex: 0,
bridge:[{
iconPath: './images/mapIcon.png',
width: 25,
height: 25,
address: 'S324 淮沭新河特大桥',
latitude: 34.079334,
longitude: 118.726242,
img:'./images/hsxhtdq.png',
id: 900000000,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: './images/mapIcon.png',
width: 25,
height: 25,
address: 'S245 沭新河大桥',
latitude: 34.157661,
longitude: 118.713860,
img:'./images/sxhdq.png',
id: 900000001,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: './images/mapIcon.png',
width: 25,
height: 25,
address: 'S324 柴米河大桥',
img:'./images/cmhdq.png',
latitude: 34.064072,
longitude: 118.827042,
id: 900000002,
callout: {
display: 'BYCLICK'
}
}],
bridgeItem:{
iconPath: './images/mapIcon.png',
width: 25,
height: 25,
address: 'S324 淮沭新河特大桥',
latitude: 34.079334,
longitude: 118.726242,
img:'./images/hsxhtdq.png',
id: 900000000,
callout: {
display: 'BYCLICK'
}
},
flag: true,
// 用户输入的学校关键词
searchValue:'',
// 滚动选择的学校索引
selectSchoolIndex:'',
school_name:'',
schoolValidate:'',
school_id:''
},
pagechange: function (e) {
console.log("e",e)
// 通过touch判断改变tab的下标值
if ("touch" === e.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
// 拿到当前索引并动态改变
this.setData({
currentIndex: currentPageIndex,
})
}
},
showSchoolPicker()
{
console.log("1111")
let self = this;
self.showDatePicker()
},
hiddeDatePicker()
{
let self = this;
self.setData({
flag: !self.data.flag
})
},
showDatePicker()
{
let self = this;
self.setData({
flag: !self.data.flag
})
// self.getItems(self.bridge)
},
confirm(e)
{
let self = this;
console.log("self.data")
self.setData({
flag: !self.data.flag
})
// self.inputVal
// 获取用户选择的学校
let item = self.data.bridge[self.data.selectSchoolIndex]?self.data.bridge[self.data.selectSchoolIndex]:self.data.bridge[0];
console.log("item",item)
// 通过发送自定义事件把用户选择的学校传递到父组件
self.setData({
// 用户选择的学校索引
inputVal:item.address
})
self.bindmarkertap(e,item)
},
bindChangePicker(e)
{
console.log("e.detail.value[0]",e)
console.log("e.detail.value[0]",e.detail.value[0])
let self = this;
self.setData({
// 用户选择的学校索引
selectSchoolIndex:e.detail.value[0]
})
},
getItems(e){
console.log("e",e)
let self = this;
if (self.data.items.length && self.data.initValue) {
let items = self.data.items
for (let i = 0; i < items.length; i++) {
if (self.data.initValue == items[i].id) {
self.setData({
bridge: [i]
})
return
}
}
}
self.setData({
bridge: [0]
})
},
//点击tab时触发
titleClick: function (e) {
console.log("e",e.currentTarget.dataset.idx)
this.setData({
//拿到当前索引并动态改变
currentIndex: e.currentTarget.dataset.idx
})
},
// 选择位置
handlePos(val){
@ -50,41 +216,236 @@ Page({
}
});
},
// 获取我的位置
getMyLocation: function () {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
let arr = [{
iconPath: './images/mapIcon.png',
width: 25,
height: 25,
address: 'S324 淮沭新河特大桥',
latitude: 34.079334,
longitude: 118.726242,
img:'./images/hsxhtdq.png',
id: 900000000,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: './images/mapIcon.png',
width: 25,
height: 25,
address: 'S245 沭新河大桥',
latitude: 34.157661,
longitude: 118.713860,
img:'./images/sxhdq.png',
id: 900000001,
callout: {
display: 'BYCLICK'
}
}, {
iconPath: './images/mapIcon.png',
width: 25,
height: 25,
address: 'S324 柴米河大桥',
img:'./images/cmhdq.png',
latitude: 34.064072,
longitude: 118.827042,
id: 900000002,
callout: {
display: 'BYCLICK'
}
}]
that.setData({
markers: arr
})
}
})
},
// marker的点击事件
bindmarkertap(e,index) {
console.log('e', e)
if(index){
console.log('index', index)
let that = this
that.setData({
currMaker: index
})
let _markers = that.data.markers
console.log('_markers', _markers)
let arr = []
for (let i = 0; i < _markers.length; i++) {
if (parseInt(_markers[i].id) === index.id) {
console.log("_markers[i].id",_markers[i].id)
that.setData({
isChecked:true ,
list:_markers[i]
})
arr.push({
address: _markers[i].address,
latitude: _markers[i].latitude,
longitude: _markers[i].longitude,
img:_markers[i].img,
id: _markers[i].id,
width: 40,
height: 40,
iconPath: './images/mapIcon.png',
callout: {
// content: `距您${distanceKm}`,
content: _markers[i].address,
img:_markers[i].img,
display: 'ALWAYS',
color: '#333333',
bgColor: '#fff',
padding: 10,
borderRadius: 10,
borderColor: '#fff',
fontSize: 16,
borderWidth: 5,
textAlign: 'center',
},
})
} else {
arr.push({
address: _markers[i].address,
img:_markers[i].img,
latitude: _markers[i].latitude,
longitude: _markers[i].longitude,
id: _markers[i].id,
width: 25,
height: 25,
iconPath: './images/mapIcon.png',
callout: {
display: 'BYCLICK'
}
})
}
}
that.setData({
markers: arr
})
wx.hideLoading({
success: (res) => {
console.log(arr)
},
})
}else{
let that = this
let _markers = that.data.markers
console.log('_markers', _markers)
let markerId = parseInt(e.detail.markerId)
console.log('markerId', markerId)
wx.showLoading({
title: `${markerId}`,
})
_markers.forEach(item => {
// console.log('item', item)
if (parseInt(item.id) === markerId) {
// console.log('11111', item)
that.setData({
currMaker: item
})
}
})
let currMaker = that.data.currMaker
console.log('currMaker', that.data.currMaker)
// qqmapsdk.calculateDistance({
// to: [{
// latitude: currMaker.latitude,
// longitude: currMaker.longitude
// }],
// success: function (res) {
// console.log("res",res)
let arr = []
for (let i = 0; i < _markers.length; i++) {
if (parseInt(_markers[i].id) === markerId) {
console.log("_markers[i].id",_markers[i].id)
that.setData({
isChecked:true ,
list:_markers[i]
})
arr.push({
address: _markers[i].address,
latitude: _markers[i].latitude,
longitude: _markers[i].longitude,
img:_markers[i].img,
id: _markers[i].id,
width: 40,
height: 40,
iconPath: './images/mapIcon.png',
callout: {
// content: `距您${distanceKm}`,
content: _markers[i].address,
img:_markers[i].img,
display: 'ALWAYS',
color: '#333333',
bgColor: '#fff',
padding: 10,
borderRadius: 10,
borderColor: '#fff',
fontSize: 16,
borderWidth: 5,
textAlign: 'center',
},
})
} else {
arr.push({
address: _markers[i].address,
img:_markers[i].img,
latitude: _markers[i].latitude,
longitude: _markers[i].longitude,
id: _markers[i].id,
width: 25,
height: 25,
iconPath: './images/mapIcon.png',
callout: {
display: 'BYCLICK'
}
})
}
}
that.setData({
markers: arr
})
wx.hideLoading({
success: (res) => {
console.log(arr)
},
})
}
// }
// })
},
// 跳转列表
handleRouter(){
wx.navigateTo({
url:'/pages/list/list'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var that = this
wx.getLocation({
type: 'wgs84',
altitude: false,
success: (result) => {
that.getOnlineDistrict(result.latitude, result.longitude)
var obj = {
latitude:result.latitude,longitude:result.longitude
}
this.setData({
district:obj
})
console.log(this.district,obj,'district');
},
});
},
getOnlineDistrict(latitude, longitude) {
var that = this;
//通过这个方法来实现经纬度反推省市区
qqmapsdk.reverseGeocoder({
// location: {
// latitude: latitude,
// longitude: longitude
// },
location: {
latitude: latitude,
longitude: longitude
latitude: 34.093003,
longitude: 118.756021,
},
success: function (res) {
that.setData({
// district:res.result.address_component.city
@ -98,7 +459,34 @@ Page({
*/
onReady() {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getMyLocation()
var that = this
wx.getLocation({
type: 'wgs84',
altitude: false,
success: (result) => {
that.getOnlineDistrict(result.latitude, result.longitude)
// var obj = {
// latitude:result.latitude,longitude:result.longitude
// }
var obj = {
latitude: 34.093003,
longitude: 118.756021,
}
this.setData({
district:obj
})
console.log(this.district,obj,'district');
},
});
},
/**
* 生命周期函数--监听页面显示
*/
@ -133,6 +521,10 @@ Page({
onReachBottom() {
},
//点击地图
handleClickMarker(e){
console.log("111",e)
},
/**
* 用户点击右上角分享

View File

@ -1,24 +1,50 @@
<!--pages/map.wxml-->
<view class="mapContent">
<!-- Tab布局 -->
<view>
<!-- 内容布局 -->
<swiper class='swiperTtemBox' bindchange='pagechange' current='{{currentIndex}}'>
<swiper-item class='swiperTtemBox'>
<view class="mapContent" >
<view class="mapTop">
<view class="inputVal">
<!-- <view class="inputVal">
<input class="weui-input" placeholder-class="phcolor" value="{{inputVal}}" bindinput="handlePos" placeholder="输入关键字查询"/>
<image style="width: 20px; height: 20px;margin-left: 10rpx; margin-top: 5rpx;" src="./images/icon1.png"></image>
</view>
</view> -->
<!-- <view class="inputVal" style="{{school_id?'':'color:#808080'}};{{schoolValidate?'border:1rpx solid #BD3731':''}}" bindtap="showSchoolPicker">{{school_name}}</view> -->
<view class="inputVal" >
<input class="weui-input" disabled="true" placeholder-class="phcolor" value="{{inputVal}}" bindtap="showSchoolPicker" placeholder="请选择桥梁"/>
</view>
<map id="myMap"
latitude="{{district.latitude}}"
longitude="{{district.longitude}}"
show-location scale="14" style="width: 100%; height: calc(100% - 100rpx);"></map>
class="{{isChecked?'is_checked':'normal'}}"
latitude="{{district.latitude}}"
longitude="{{district.longitude}}"
markers="{{markers}}"
controls="{{controls}}"
scale="{{scale}}"
bindmarkertap="bindmarkertap"
bindcontroltap="controltap"
bindcallouttap="clickCallout"
bindtap="clearMap"
polyline="{{polyline}}"
show-location
show-scale show-compass>
</map>
<view class="contentBottomBox">
<view class="location" bindtap="controltap">
<image src="./images/mapIcon.png" class="locationIcon"></image>
</view>
</view>
</view>
<view class="info">
<view class="top">
<view class="image">
<image mode="aspectFill" src="./images/qiao.png"></image>
<image mode="aspectFill" src="{{list.img}}"></image>
</view>
<view class="title">
<view class="text">
<span style="font-size:15px;font-weight: 600;">董滨枢纽小桥</span>
<span style="font-size:15px;font-weight: 600;">{{list.address}}</span>
<view style="display: flex;align-items: center" bindtap='handleRouter'>
<span style="font-size:14px;color:rgb(105, 131, 255)">详情</span>
<van-icon name="arrow" style="font-size:14px;color:rgb(105, 131, 255);margin: 8rpx 0 0 5rpx;"/>
@ -40,9 +66,56 @@
最大预警级别:红色预警。
</view>
</view>
</view>
</swiper-item>
<swiper-item class='swiperTtemBox'>
<view class='page-body' wx:for="{{listNew}}" wx:key="id" v-if='listShow'>
<block wx:if="{{type === 'us_box'}}">
<navigator url='../item/item?id={{item.id}}'>
<view class='item'>
<view class='meta'>
<view class='titContent'>
<text class='title'>{{item.title}}</text>
<text class='titleButton' >详情</text>
</view>
<text class='sub-title'>{{item.year}}</text><text>{{item.content}}</text>
</view>
</view>
</navigator>
</block>
<block wx:else>
<navigator url='../item/item?id={{ item.id }}'>
<view class='item'>
<view class='meta'>
<view class='titContent'>
<text class='title'>{{item.title}}</text>
<text class='titleButton' >详情</text>
</view>
<view class='subContent'>
<text class='sub-year'>{{item.year}}</text><text class='sub-title'>{{item.content}}</text>
</view>
</view>
</view>
</navigator>
</block>
</view>
</swiper-item>
</swiper>
<!-- Tab布局 -->
<view class='navBox'>
<view class='titleBox' bindtap='titleClick' data-idx='0'>
<text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">总体情况</text>
<hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
</view>
<view class='titleBox' bindtap='titleClick' data-idx='1'>
<text class="{{1 == currentIndex ? 'fontColorBox1' : ''}}">特殊事件</text>
<hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
</view>
</view>
</view>
</view>
<!--关键词输入提示列表渲染-->
<view class="listPos">
<view wx:for="{{suggestion}}" wx:key="index" >
<!--绑定回填事件-->
@ -55,3 +128,34 @@
</view>
</view>
</view>
<view class="date-background" hidden="{{flag}}">
<view class='date-gray-background' bindtap='hiddeDatePicker'></view>
<view class='date-container'>
<view class="transparent">
<view class='date-confirm'>
<view bindtap='hiddeDatePicker'>取消</view>
<!-- <van-search
value="{{searchValue}}"
input-align="center"
placeholder="请输入学校名称关键词"
bind:change="searchSchool"
/> -->
<view bindtap='confirm'>确定</view>
</view>
<picker-view
indicator-class="indicator"
value="{{bridgeItem}}"
bindchange="bindChangePicker"
bindpickend="_bindpickend"
indicator-style="height: 100rpx;"
mask-style="height:900rpx;"
style="width: 100%; height: 90%;position:absolute;bottom:0rpx;text-align:center;background:white"
>
<picker-view-column class="pickViewColumn">
<view wx:for="{{bridge}}" wx:key="id" style="line-height: 104rpx">{{item.address}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>

View File

@ -1,20 +1,21 @@
/* pages/map.wxss */
.mapContent{
width: 100%;
height: 100%;
height: 90%;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.mapContent .mapTop{
width: 100%;
height: 900rpx;
height: 80%;
display: flex;
flex-flow: column nowrap;
}
.inputVal{
width: 100%;
height: 100rpx;
padding-bottom: 10rpx;
background-color: rgb(54, 105, 248);
display: flex;
flex-flow: row nowrap;
@ -26,7 +27,8 @@
height: 60rpx;
border-radius: 40rpx;
background-color: rgb(156, 133, 252);
padding-left: 40rpx;
/* padding-left: 40rpx; */
text-align: center;
color: #ffffff;
font-size: 14px;
box-sizing: border-box;
@ -53,7 +55,7 @@
.mapContent .info .top .image{
width: 280rpx;
height: 100%;
background-color: blue;
background-color: #fff;
}
.mapContent .info .top .image image{
width: 100%;
@ -97,3 +99,256 @@
left: 0;
background-color: #ffffff;
}
.location {
float: right;
width: 80rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.1);
}
.contentBottomBox {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.locationIcon {
width: 42rpx;
height: 42rpx;
}
.is_checked{
width: 100%; height: 90%;
}
.normal{
width: 100%; height: 90vh;
}
/* tab栏 */
.swiper-tab {
width: 100%;
height: 80rpx;
text-align: center;
display: flex;
justify-content: space-between;
background: white;
position: relative;
z-index: 99999;
top: 30%;
}
.selected-menu {
display: flex;
flex-direction: column;
align-items: center;
color: #2e0c77;
background: #fff;
font-size: 14px;
font-weight: bold;
font-family: PingFang SC;
font-weight: 400;
width: 50%;
height: 60rpx;
line-height: 75rpx;
opacity: 1;
/* border-bottom: 2px solid #ff5050; */
position: relative;
}
.unselect-menu {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #9f9fad;
width: 50%;
height: 60rpx;
line-height: 75rpx;
background: #fff;
opacity: 1;
position: relative;
/* border-radius: 34rpx; */
}
.selected-line {
background: #2e0c77;
height: 4rpx;
width: 150rpx;
position: absolute;
/* margin-top: 10rpx; */
bottom: -18rpx;
/* width: 60rpx; */
}
.fontColorBox,
.fontColorBox1 {
/* 文字默认颜色 */
color: black;
}
.navBox {
/* 顶部tab盒子样式 */
width: 100%;
height: 108rpx;
/* background: white; */
display: flex;
align-items: center;
justify-content: center;
}
.navBox view:last-child {
/* 最后一个tab标题的样式 */
padding-left: 20%;
}
.titleBox {
/* 未选中文字的样式 */
color: rgb(168, 170, 175);
font-size: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.lineBox,.notLineBox{
/* 选中及未选中底线共同样式 */
width: 32rpx;
height: 8rpx;
}
.lineBox {
/* 选中底线样式 */
background: rgb(43, 44, 45);
margin-top: 16rpx;
border-radius: 4rpx;
}
.notLineBox {
/* 未选中底线样式 */
background: transparent;
}
.swiperTtemBox {
/* 底部内容样式 */
height: 90vh;
overflow: scroll;
margin: 0rpx 0rpx;
/* background: white; */
background-color: rgb(240, 239, 239);
font-size: 28rpx;
}
.page-body {
display: flex;
flex: 1;
flex-direction: column;
}
.item {
display: flex;
/* border-bottom: 1rpx solid #eee; */
cursor: pointer;
padding-top: 20rpx;
}
.item .poster {
height: 128rpx;
margin-right: 20rpx;
}
.item .meta {
/* flex: 1; */
width: 100%;
height: 210rpx;
background-color: #fff;
}
.item .meta .titContent{
/* width: 100%; */
padding: 10rpx 40rpx;
/* line-height: 50rpx; */
border-bottom: 1rpx solid #ccc;
}
.item .meta .subContent{
padding: 20rpx 40rpx;
}
.item .meta .title,.item .meta .sub-title {
display:inline-block;
margin-bottom: 15rpx;
}
.item .meta .titleButton{
color: blue;
float: right;
line-height: 60rpx;
font-size: 25rpx;
}
.item .meta .title {
font-size: 32rpx;
padding-top: 10rpx;
/* line-height: 50rpx; */
}
.item .meta .sub-year {
font-size: 26rpx;
color: #c0c0c0;
margin-right: 20rpx;
display: inline;
}
.item .meta .sub-title {
font-size: 26rpx;
color: #c0c0c0;
line-height: 37rpx;
display: inline;
}
.item .meta .artists {
font-size: 26rpx;
color: #999;
}
.item .rating {
font-size: 28rpx;
font-weight: bold;
color: #f74c31;
}
.date-background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.date-gray-background {
position: absolute;
width: 100%;
top: 0;
background: rgba(0, 0, 0, .5);
height: calc(100% - 500rpx);
}
.date-container {
position: absolute;
width: 100%;
height: 900rpx;
overflow: hidden;
background: #fff;
bottom:0;
z-index: 1000;
}
.date-confirm {
display: flex;
justify-content: space-between;
align-items: center;
padding:0 20rpx;
font-size:34rpx;
line-height: 70rpx;
color:var(--ThemeColor)
}
.pickViewColumn{
height: 900rpx;
margin-top: -300rpx;
}
.indicator{
height: 80rpx;
border: 1rpx solid #E5E8E8;
}