是小王呀\24601
10 months ago
33 changed files with 1445 additions and 32 deletions
@ -1,5 +1,6 @@ |
|||
NODE_ENV='development' |
|||
# must start with VUE_APP_ |
|||
VUE_APP_ENV = 'development' |
|||
VUE_APP_BASE_URL = 'http://192.168.1.144/api' |
|||
VUE_APP_BASE_URL = http://192.168.1.140/api' |
|||
# VUE_APP_BASE_URL = 'http://192.168.1.144/api' |
|||
outputDir = 'epmet-work-wx-dev' |
|||
|
|||
@ -0,0 +1,10 @@ |
|||
// axios
|
|||
import request from '@/utils/request' |
|||
|
|||
//获取我的社区
|
|||
export function sphereLifeSearchList(parm) { |
|||
return request({ |
|||
url: `/voluntary/sphereLife/searchList?lon=${parm.lon}&lat=${parm.lat}&name=${parm.name}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 981 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,412 @@ |
|||
<template> |
|||
<div> |
|||
<div class="content"> |
|||
<div class="card"> |
|||
<div class="title"> {{type==='sign'?'打卡描述':'实况描述'}}</div> |
|||
<textarea style="width: 100%; height: 300px; border: none; resize: none; margin-top: 10px;" v-model="content" bind:input="handelChangTextarea" placeholder="请输入500字以内" maxlength="500px"/> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="title">上传图片或视频</div> |
|||
<van-uploader v-model="fileList" :after-read="afterRead" :max-count="3" :max-size="10 * 1024 * 1024" /> |
|||
</div> |
|||
<div class="card flex flex-sb address flex-center-i"> |
|||
<image src="../../../../images/icon/address.png" mode="" /> |
|||
<span class="flex-1">{{address}}</span> |
|||
<van-icon name="replay" color="#0d957f"/> |
|||
</div> |
|||
</div> |
|||
<div class="bot-btn"> |
|||
<van-button slot="button" size="small" type="primary" round color="#f53e1f" bind:tap="submit"> |
|||
{{type==='sign'?'打卡签到':'发布实况'}} |
|||
</van-button> |
|||
</div> |
|||
<Android @send-number="handleNumber" /> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { activitySignIn,activityApply,addActivityRecord,cancelSignUp, detail, communityActivityApplicationRecordDelete,getById,activityApplySave} from "@/api/activity" |
|||
import Share from "@/components/Share" |
|||
import registerDialog from '@/components/registerDialog'; |
|||
import { setConfig } from '@/utils/jweixin' |
|||
import { Toast, Dialog } from 'vant' |
|||
import {uploadvariedfile} from '@/api/basic' |
|||
import Map from '@/components/Map' |
|||
import {mapKey} from '@/config' |
|||
export default { |
|||
data() { |
|||
return { |
|||
address:"", |
|||
fileList: [], |
|||
applyedTimeType:false, |
|||
ActName:"", |
|||
info:null, |
|||
signInList:[], |
|||
applyType:false, |
|||
activityId:null, |
|||
realTimeList:[], |
|||
projectList:[], |
|||
realTimeList:[], |
|||
signInList:[], |
|||
applyList:[], |
|||
activityList: [], |
|||
signUp: [ |
|||
{ name: "", mobile: "", remark: "" }, |
|||
], |
|||
info: {}, |
|||
isPast: false, |
|||
showShare: false, |
|||
showRegister: false, |
|||
phone:"" |
|||
}; |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
async mounted() { |
|||
// 初始化腾讯地图 |
|||
this.geolocation = new qq.maps.Geolocation(mapKey, 'myapp') |
|||
// 获取定位 |
|||
this.getMyLocation() |
|||
setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData']) |
|||
if (this.$route.query.id) { |
|||
this.activityId= this.$route.query.id |
|||
await this.detail(this.$route.query.id) |
|||
if(this.$route.query.flag === 'share'){ |
|||
await this.getById(this.$route.query.id) |
|||
} |
|||
await this.share() |
|||
this.activityApplyList() |
|||
this.activitySignIn(1) |
|||
this.activitySignIn(0) |
|||
} |
|||
}, |
|||
methods: { |
|||
getMyLocation() { |
|||
this.geolocation.getLocation(this.showPosition, this.errorPosition) //开启定位 |
|||
}, |
|||
showPosition(position) { |
|||
this.longitude = position.lng |
|||
this.latitude = position.lat |
|||
this.address = position.city + position.addr |
|||
console.log(position, this.longitude, this.latitude ,"dsjfdsk"); |
|||
|
|||
}, |
|||
locationChange(data) { |
|||
this.longitude = data.latlng.lng |
|||
this.latitude = data.latlng.lat |
|||
this.address = data.poiaddress |
|||
this.ifRange(this.longitude,this.latitude) |
|||
}, |
|||
afterRead(file) { |
|||
file.status = 'uploading' |
|||
file.message = '上传中...' |
|||
uploadvariedfile(file.file) |
|||
.then(res => { |
|||
file.status = '' |
|||
file.message = '上传成功' |
|||
file.url = res.data.url |
|||
|
|||
// this.uploadFileList.push(res.url) |
|||
}) |
|||
.catch(() => { |
|||
file.status = 'failed' |
|||
file.message = '上传失败' |
|||
}) |
|||
}, |
|||
//取消报名 |
|||
cancelSignUp(){ |
|||
Dialog.confirm({ |
|||
title: '提示', |
|||
message: '确定取消报名吗？', |
|||
}) |
|||
.then(() => { |
|||
cancelSignUp(this.data.activityId).then(res=>{ |
|||
if(res.code === 0){ |
|||
this.setData({ |
|||
applyType:true |
|||
}) |
|||
} |
|||
}) |
|||
}) |
|||
.catch(() => { |
|||
}); |
|||
}, |
|||
//报名 |
|||
toApply() { |
|||
console.log("dsklfjklsf"); |
|||
Dialog.confirm({ |
|||
title: '提示', |
|||
message: '您确定要报名吗？', |
|||
}) |
|||
.then(() => { |
|||
activityApplySave(this.activityId).then(res => { |
|||
console.log(res,"sdflkjlsfjd"); |
|||
Dialog.alert({ |
|||
// title: '吧', |
|||
message: '报名成功', |
|||
}) |
|||
// wx.showToast({ |
|||
// title: '报名成功', |
|||
// duration: 2000, |
|||
// success: () => { |
|||
// setTimeout(() => { |
|||
// wx.navigateBack() |
|||
// }, 2000) |
|||
// } |
|||
// }) |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}) |
|||
}) |
|||
.catch(() => { |
|||
// on cancel |
|||
}); |
|||
|
|||
}, |
|||
share() { |
|||
let than = this |
|||
if (wx.updateAppMessageShareData) { |
|||
wx.ready(function () { |
|||
wx.updateAppMessageShareData({ |
|||
title: than.info.activityName || '活动详情', |
|||
desc: '', |
|||
link: `https://epmet-prediv.elinkservice.cn/epmet-wx-pa/#/activityDetail?id=${than.$route.query.id}&appId=${than.$store.state.app.appId}&flag=share`, |
|||
imgUrl: than.info.coverPic || 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png', |
|||
success: function () {} |
|||
}) |
|||
wx.updateTimelineShareData({ |
|||
title: than.info.activityName, |
|||
desc: '', |
|||
link: `https://epmet-prediv.elinkservice.cn/epmet-wx-pa/#/activityDetail?id=${than.$route.query.id}&appId=${than.$store.state.app.appId}`, |
|||
imgUrl: than.info.coverPic || 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png', |
|||
success: function () {} |
|||
}) |
|||
}); |
|||
} else { |
|||
wx.onMenuShareAppMessage({ |
|||
title: than.info.activityName, |
|||
desc: '', |
|||
link: `https://epmet-prediv.elinkservice.cn/epmet-wx-pa/#/activityDetail?id=${than.$route.query.id}&appId=${than.$store.state.app.appId}`, |
|||
imgUrl: than.info.coverPic || 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png', |
|||
success: function () {} |
|||
}) |
|||
} |
|||
}, |
|||
//获取打卡信息 |
|||
activitySignIn(whether) { |
|||
let parm = { |
|||
pageNo: 1, |
|||
pageSize: 100, |
|||
activityId: this.activityId, |
|||
whether: whether |
|||
} |
|||
activitySignIn(parm).then(res => { |
|||
if (res.code === 0) { |
|||
if (whether === 1) { |
|||
this.signInList=res.data.list |
|||
|
|||
} else { |
|||
this.realTimeList=res.data.list |
|||
|
|||
|
|||
} |
|||
} |
|||
}).catch(err => { |
|||
|
|||
}) |
|||
}, |
|||
//获取报名志愿者 |
|||
activityApplyList() { |
|||
let parm = { |
|||
pageNo: 1, |
|||
pageSize: 100, |
|||
activityId: this.activityId |
|||
} |
|||
activityApply(parm).then(res => { |
|||
if (res.code === 0) { |
|||
|
|||
this.applyList=res.data.list |
|||
|
|||
} |
|||
}).catch(err => { |
|||
|
|||
}) |
|||
}, |
|||
handleNumber(value){ |
|||
console.log(value,"wl kgnsl, "); |
|||
this.phone=value |
|||
}, |
|||
checkIfPast() { |
|||
const currentTimestamp = Date.now(); |
|||
const specifiedTimestamp = new Date(this.info.cutOffTime.replace(/-/g, '/')).getTime(); |
|||
this.isPast = specifiedTimestamp < currentTimestamp; |
|||
}, |
|||
//获取信息 |
|||
async detail(id, delId) { |
|||
const handleResponse = (res) => { |
|||
if (res.code === 0) { |
|||
this.info = res.data; |
|||
this.info.signInTime=res.data.signInTime.slice(0, 16), |
|||
this.info.signOutTime=res.data.signOutTime.slice(0, 16), |
|||
console.log(this.info,"wl info"); |
|||
// this.applyType = res.data.applyed === 0 ? true : false, |
|||
this.applyedTimeType = this.isCurrentTimeBefore(res.data.deadline), |
|||
console.log(this.applyedTimeType,"sdfkjdskfl"); |
|||
|
|||
this.signOutTimeType = this.isCurrentTimeBetween(res.data.signInTime, res.data.signOutTime) |
|||
// this.info.participants = res.data.participants; |
|||
// this.info.currentParticipants = res.data.currentParticipants; |
|||
// if (res.data.recordList && res.data.recordList.length > 0) { |
|||
// this.signUp = res.data.recordList; |
|||
// } |
|||
// if (res.data.cutOffTime) { |
|||
// this.checkIfPast(); |
|||
// } |
|||
} |
|||
}; |
|||
// if (delId) { |
|||
// this.signUp = this.signUp.filter(item => item.id != delId); |
|||
// } |
|||
let res = await detail(id); |
|||
handleResponse(res); |
|||
}, |
|||
async getById(id) { |
|||
const handleResponse = (res) => { |
|||
if (res.code === 0) { |
|||
this.info = res.data; |
|||
this.info.participants = res.data.participants; |
|||
this.info.currentParticipants = res.data.currentParticipants; |
|||
if (res.data.recordList && res.data.recordList.length > 0) { |
|||
this.signUp = res.data.recordList; |
|||
} |
|||
if (res.data.cutOffTime) { |
|||
this.checkIfPast(); |
|||
} |
|||
} |
|||
}; |
|||
if (delId) { |
|||
this.signUp = this.signUp.filter(item => item.id != delId); |
|||
} |
|||
|
|||
let res = await getById(id); |
|||
handleResponse(res); |
|||
}, |
|||
handelAddResi() { |
|||
this.signUp.push({ name: "", mobile: "", remark: "", }) |
|||
}, |
|||
isCurrentTimeBetween(startTime, endTime) { |
|||
const current = new Date().getTime(); |
|||
const startTimestamp = new Date(startTime).getTime(); |
|||
const endTimestamp = new Date(endTime).getTime(); |
|||
return current >= startTimestamp && current <= endTimestamp; |
|||
}, |
|||
isCurrentTimeBefore(targetTime) { |
|||
const current = new Date().getTime(); |
|||
const targetTimestamp = new Date(targetTime).getTime(); |
|||
return current < targetTimestamp; |
|||
}, |
|||
handelDelResi(item, index) { |
|||
if (item.id) { |
|||
let than = this |
|||
communityActivityApplicationRecordDelete([item.id]).then(res => { |
|||
if (res.code === 0) { |
|||
than.detail(this.$route.query.id, item.id); |
|||
} |
|||
}).catch(err => { |
|||
console.log(err); |
|||
}) |
|||
} else { |
|||
this.signUp.splice(index, 1) |
|||
} |
|||
}, |
|||
async save() { |
|||
if (this.$store.state.app.userInfo.mobile) { |
|||
this.signUp.forEach((item) => { |
|||
item.activityId = this.info.id; |
|||
item.applicationId = this.$store.state.app.userInfo.id; |
|||
item.customerId = this.$store.state.app.userInfo.customerId; |
|||
}) |
|||
if(this.signUp.findIndex(item=>!item.name) != -1){ |
|||
this.$toast('人员姓名不能为空') |
|||
return |
|||
} |
|||
if(this.signUp.findIndex(item=>!item.mobile) != -1){ |
|||
this.$toast('联系电话不能为空') |
|||
return |
|||
} |
|||
let parm = { |
|||
formDTOList: this.signUp |
|||
} |
|||
let res = await addActivityRecord(parm) |
|||
if (res.code === 0) { |
|||
this.$toast.success(res.data) |
|||
this.signUp = [{ name: "", mobile: "", remark: "" }] |
|||
this.detail(this.$route.query.id) |
|||
} |
|||
} else { |
|||
this.showRegister = true; |
|||
} |
|||
|
|||
}, |
|||
}, |
|||
components: { Share, registerDialog }, |
|||
computed: { |
|||
disabledRecord() { |
|||
return (item) => { |
|||
if (!item.cutOffTime || item.online != 1) return true |
|||
let flag = new Date(item.cutOffTime.replace(/-/g, '/')).getTime() < Date.now() || item.currentParticipants >= item.participants || item.currentParticipants >= item.participants; |
|||
return flag || false |
|||
} |
|||
}, |
|||
}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.phone{ |
|||
height: 50px; |
|||
bottom:8vh; |
|||
} |
|||
/* subpages/activity/pages/sign/sign.wxss */ |
|||
page { |
|||
height: 100vh; |
|||
background-color:#f7f7f7; |
|||
} |
|||
.title{ |
|||
color: #222222; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
} |
|||
.content{ |
|||
width: calc(100% - 40rpx); |
|||
margin: 0 auto; |
|||
} |
|||
textarea{ |
|||
margin-top: 24rpx; |
|||
background-color:#f7f7f7 ; |
|||
width: 100%; |
|||
height: 460rpx; |
|||
padding: 24rpx; |
|||
box-sizing: border-box; |
|||
} |
|||
.address{ |
|||
image{ |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
margin-right: 11rpx; |
|||
} |
|||
} |
|||
.card{ |
|||
margin-top: 14rpx; |
|||
} |
|||
.bot-btn{ |
|||
margin-top: 84rpx; |
|||
text-align: center; |
|||
button{ |
|||
width:400rpx ; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,76 @@ |
|||
.blueBg{ |
|||
background: #3974F6; |
|||
border-radius: 0px 0px 20px 20px; |
|||
width: 100%; |
|||
height: 160px; |
|||
} |
|||
.content{ |
|||
position: absolute |
|||
; |
|||
width: 100%; |
|||
// height: 100%; |
|||
top: 0; |
|||
padding: 0 15px; |
|||
box-sizing: border-box; |
|||
// overflow-y: scroll; |
|||
} |
|||
.content1{ |
|||
height: 100%; |
|||
} |
|||
.notice_time{ |
|||
padding-right: 5px; |
|||
box-sizing: border-box; |
|||
border-right: solid 1px #999999; |
|||
margin-right: 6px; |
|||
height: 20px; |
|||
line-height: 20px; |
|||
} |
|||
.van-ellipsis{ |
|||
color: #555555; |
|||
} |
|||
.notice{ |
|||
height: 50px; |
|||
line-height: 50px; |
|||
} |
|||
.appeal,.verify{ |
|||
width: 158px; |
|||
height: 73px; |
|||
background-size: 100% 100%; |
|||
padding: 17px 14px; |
|||
box-sizing: border-box; |
|||
:nth-child(1){ |
|||
font-family:pingfang-bold; |
|||
} |
|||
} |
|||
.appeal{ |
|||
background-image: url('@/assets/images/home/appeal.png'); |
|||
} |
|||
.verify{ |
|||
background-image: url('@/assets/images/home/verify.png'); |
|||
} |
|||
.nav{ |
|||
color: #333333; |
|||
img{ |
|||
width: 41px; |
|||
height: 40px; |
|||
} |
|||
} |
|||
.activity_content{ |
|||
padding-bottom: 15px; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
border-bottom: 1px solid #EAEAEA; |
|||
margin-top: 14px; |
|||
.img{ |
|||
width: 231px; |
|||
height: 33px; |
|||
} |
|||
&:last-child{ |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
|
|||
.tip{ |
|||
// background-image: url('@/assets/dialog_bg.png'); |
|||
// background-size: 100% 100%; |
|||
} |
|||
@ -0,0 +1,533 @@ |
|||
<template> |
|||
<div class="pages"> |
|||
<div class="content1"> |
|||
<div class="blueBg"></div> |
|||
<div class="content"> |
|||
<div class="flex flex-end"> |
|||
<div class="flex flex-center2 white" > |
|||
<img src="@/assets/images/icons/home.png" class="img_17 m-right10" alt="" @dblclick="$router.push('/selectAgency')"> |
|||
<span>{{ this.$store.state.app.userInfo.agencyName || '--' }}</span> |
|||
</div> |
|||
<div class="flex flex-center2"> |
|||
<van-search v-model="searchKey" placeholder="请输入搜索关键词" shape="round" background="#3974f6" |
|||
style="width: 170px;" |
|||
@search="$router.push({ path: '/search', query: { searchKey: searchKey } })" /> |
|||
<img src="@/assets/images/icons/mine.png" |
|||
@click="$router.push({ path: '/mine', query: { searchKey: searchKey } })" class="img_20 " |
|||
alt=""> |
|||
</div> |
|||
</div> |
|||
<div class="swipe"> |
|||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> |
|||
<van-swipe-item v-for="item in PublicityListImg"> |
|||
<img :src="item.coverPic" alt="" @click="toDetail(item)" |
|||
style="width: 100%;height: 150px; margin: 0 auto;border-radius: 15px;"> |
|||
</van-swipe-item> |
|||
</van-swipe> |
|||
</div> |
|||
<div class="card flex flex-end flex-center2 m-top15 notice"> |
|||
<img src="@/assets/images/icons/notice.png" class="img_17" alt=""> |
|||
<div class="van-ellipsis flex-1"> |
|||
<van-notice-bar color="#555555" background="#ffffff" :text="messageText" /> |
|||
</div> |
|||
<span class="gray notice_time">{{day}}</span> |
|||
<span class="gray" @click="$router.push('/messages')">更多</span> |
|||
</div> |
|||
<div class="card m-top10"> |
|||
<div class="flex white"> |
|||
<div class="appeal m-right10 flex flex-y" @click="handelClickJump('event')"> |
|||
<div>我有诉求</div> |
|||
<div class="font-size13 m-top5" style="color: #d8e6fe;"> 居民点单 社区接单</div> |
|||
</div> |
|||
<div class="verify" @click="handelClickSatis()"> |
|||
<div>民意调查</div> |
|||
<div class="font-size13 m-top5" style="color: #d8e6fe;">为社区工作提意见</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex flex-centr2 flex-mean m-top18"> |
|||
<div class="flex-y flex flex-center1 flex-center2 nav font-size13 " v-for="(item, index) in tabList" |
|||
@click="handelClickJump(item.path,'tab')" :key="index"> |
|||
<img :src="item.imgSrc" alt=""> |
|||
<span>{{ item.title }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card m-top10"> |
|||
<div class="title"> |
|||
<span>服务中心</span> |
|||
</div> |
|||
<div class="grid-container nav flex-mean m-top18"> |
|||
<div class="flex-y flex flex-center1 flex-center2 nav font-size13 " v-for="(item, index) in squaredList" |
|||
@click="handelClickJump(item.path,'tab')" :key="index"> |
|||
<img :src="item.imgSrc" alt=""> |
|||
<span >{{ item.title }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card m-top10"> |
|||
<div class="title"> |
|||
<span>社区活动</span> |
|||
<span @click="$router.push('/activity')">更多</span> |
|||
</div> |
|||
<div class="activity_content flex" v-for="(item, index) in activityList" :key="index" @click="handelClickJump(`activityDetail`,item)"> |
|||
<img :src="item.coverPic" alt="" class="mr10" style="width: 75px;height: 95px;"> |
|||
<div class="flex flex-y flex1 flex-end" style="overflow: hidden;"> |
|||
<div class="van-ellipsis">{{ item.activityName }}</div> |
|||
<div class="address font-size14 van-ellipsis gray">地点：{{ item.address }}</div> |
|||
<div class="time gray font-size14">时间：{{ item.startTime }}</div> |
|||
<div class="flex flex-end"> |
|||
<div> |
|||
<span>报名人数：</span> <span class="font-size18 orange">{{ item.currentParticipants }}</span>/<span |
|||
class="font-size14">{{ item.participants }}人</span> |
|||
</div> |
|||
<van-button type="info" size="small" round @click="handelClickJump(`activityDetail`,item)" |
|||
:disabled="disabledRecord(item)">{{recordFlag(item)?'已报名':'报名'}}</van-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card m-top10"> |
|||
<div class="title"> |
|||
<span>居民议事</span> |
|||
<span @click="$router.push('/discussion')">更多</span> |
|||
</div> |
|||
<div class="activity_content flex" v-for="(item, index) in eventList" :key="index" @click="$router.push({ path: `/discusionDetail`,query: { eventId:item.eventId} })"> |
|||
<div class="flex flex-y flex1 flex-end" style="overflow: hidden;"> |
|||
<span class="van-multi-ellipsis--l2"> |
|||
{{ item.eventContent }} |
|||
</span> |
|||
<div class="flex flex-end flex-center gray m-top10 font-size13"> |
|||
<div class="flex flex-center"><img src="@/assets/images/icons/resi.png" class="img_16 m-right7" alt=""> |
|||
<span>参与 {{ item.total }}</span></div> |
|||
<div class="flex flex-center" @click.stop="handelClicsupport1(item.eventId)"> |
|||
<img src="@/assets/images/icons/support.png" alt="" class="img_16 m-right7"> |
|||
<span>支持 {{ item.supportNum }}</span></div> |
|||
<div class="flex flex-center" @click.stop="handelClicopposeNum(item.eventId)" ><img src="@/assets/images/icons/oppose.png" alt="" |
|||
class="img_16 m-right7"><span>反对 {{ item.opposeNum }}</span></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card m-top10"> |
|||
<div class="title"> |
|||
<span>社区讯息</span> |
|||
<span @click="$router.push('/communityPublicity')">更多</span> |
|||
</div> |
|||
<div class="activity_content flex"> |
|||
<van-tabs v-model="tagActive" style="width: 100%;" @change="handelChangeTags"> |
|||
<van-tab v-for="item in tagList" :key="item.id" :title="item.tagName"> |
|||
<div class="flex flex-y flex1 flex-end" v-if="PublicityList.length !== 0" > |
|||
<div class="activity_content flex flex-y" v-for="(item, index) in PublicityList" :key="index" @click="$router.push({name:'communityPublicityDetail',query:{id:item.id}})"> |
|||
<div class="flex flex1 "> |
|||
<span class="van-multi-ellipsis--l2 flex1" style="line-height: 28px;" > |
|||
{{ item.title }} |
|||
</span> |
|||
<img v-if="item.coverPic" :src="item.coverPic" style="width: 100px;height: 60px;" alt=""> |
|||
</div> |
|||
<div class="flex flex-end flex-center gray m-top10 font-size13"> |
|||
<div class="flex"> |
|||
<div class="flex flex-center m-right26" v-if="item.tagId && tagList">{{filterTagId(item.tagId)}}</div> |
|||
<div class="flex flex-center" @click.stop="communityPublicityGiveLike(item.id)"><img src="@/assets/images/icons/support.png" |
|||
alt="" class="img_16 m-right7"><span>{{ item.likes || 0}}</span> |
|||
</div> |
|||
</div> |
|||
<div class="flex1 text-align-right">{{item.releaseTime}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-else class="no-data"> |
|||
暂无数据~ |
|||
</div> |
|||
</van-tab> |
|||
</van-tabs> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<register-dialog v-if="showRegister" @close="showRegister = false" :registerFlag="registerFlag" :content="tipContent"></register-dialog> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import registerDialog from '@/components/registerDialog'; |
|||
import { communityActivity, icEventOldDiscuss, advertisingTag, communityPublicity,handelClicsupport,communityPublicityGiveLike } from '@/api/home'; |
|||
import { querystaffmessage } from '@/api/message'; |
|||
import { inspRecord } from '@/api/satisfaction'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchKey: null,//搜索栏 |
|||
squaredList:[ |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/1.png'), |
|||
title: '政务办理', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/2.png'), |
|||
title: '民生选举', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/3.png'), |
|||
title: '居民议事', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/4.png'), |
|||
title: '民生监督', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/5.png'), |
|||
title: '医疗服务', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/6.png'), |
|||
title: '养老服务', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/7.png'), |
|||
title: '就业服务', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/8.png'), |
|||
title: '生活圈', |
|||
path: 'livingCircle' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/9.png'), |
|||
title: '网上缴费', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/10.png'), |
|||
title: 'VR博物馆', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/11.png'), |
|||
title: '社区便利店', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/squaredPaper/12.png'), |
|||
title: '一次办结清单', |
|||
path: 'communityPublicity' |
|||
}, |
|||
|
|||
], |
|||
|
|||
tabList: [ |
|||
{ |
|||
imgSrc: require('@/assets/images/nav/1.png'), |
|||
title: '社区讯息', |
|||
path: 'communityPublicity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/nav/2.png'), |
|||
title: '社区活动', |
|||
path: 'activity' |
|||
}, |
|||
{ |
|||
imgSrc: require('@/assets/images/nav/3.png'), |
|||
title: '居民议事', |
|||
path: 'discussion' |
|||
}, |
|||
// { |
|||
// imgSrc: require('@/assets/images/nav/4.png'), |
|||
// title: '满意度测评', |
|||
// path: 'mySatisfaction' |
|||
// }, |
|||
{ |
|||
imgSrc: require('@/assets/images/nav/5.png'), |
|||
title: '可享服务', |
|||
path: 'Enjoyableservices' |
|||
} |
|||
], |
|||
activityList: [], |
|||
eventList: [], |
|||
showRegister: false, |
|||
tagList: [], |
|||
tagActive: 'new', |
|||
tagId: null, |
|||
PublicityList:[], |
|||
PublicityListImg:[], |
|||
messageText:'没有新的消息！', |
|||
day:null, |
|||
tipContent:null, |
|||
registerFlag:null, |
|||
pageSize: 5, |
|||
pageNo: 1, |
|||
list: {}, |
|||
questionnaireUrl:"", |
|||
|
|||
}; |
|||
}, |
|||
created() { |
|||
this.agencyId = this.$store.state.app.agencyId; |
|||
this.userId = this.$store.state.app.userInfo.id; |
|||
this.customerId = this.$store.state.app.userInfo.customerId; |
|||
this.communityActivity()//获取轮播图与活动列表 |
|||
this.icEventOldDiscuss()//获取居民议事列表 |
|||
this.advertisingTag()//获取社区讯息菜单 |
|||
this.communityPublicity()//获取讯息列表 |
|||
this.querystaffmessage()//获取消息提醒 |
|||
let date = new Date() |
|||
this.day = this.$dayjs(date).format('MM-DD'); |
|||
this.mounth = this.$dayjs(date).format('M'); |
|||
this.data=this |
|||
this.inspRecord() |
|||
}, |
|||
methods: { |
|||
async inspRecord() { |
|||
let parm = { |
|||
pageSize:this.pageSize, |
|||
pageNo:this.pageNo++, |
|||
agencyId:this.agencyId |
|||
} |
|||
let res = await inspRecord(parm) |
|||
if (res.code === 0) { |
|||
this.loading = false; |
|||
const now = new Date(); |
|||
this.month = now.getMonth() + 1; |
|||
if(res.data.list.findIndex(item=>item.monthName == this.month) == -1){ |
|||
this.currentMonth = true; |
|||
} |
|||
if (!res.data || res.data.list.length < this.pageSize) { |
|||
this.finished = true; |
|||
} |
|||
console.log(this.mounth); |
|||
this.list= res.data.list.filter(item=>{ |
|||
console.log(item.monthName); |
|||
if(item.monthName == this.mounth){ |
|||
return item |
|||
} |
|||
}) |
|||
console.log(this.list); |
|||
if(this.list[0]){ |
|||
|
|||
this.questionnaireUrl=this.list[0].questionnaireUrl |
|||
console.log(this.questionnaireUrl); |
|||
} |
|||
|
|||
} |
|||
}, |
|||
async advertisingTag(){ |
|||
let res = await advertisingTag() |
|||
if(res.code === 0){ |
|||
this.tagList = res.data |
|||
} |
|||
}, |
|||
toDetail(item){ |
|||
console.log(item.id,"sldkf") |
|||
if(item.coverPic){ |
|||
this.$router.push({name:'communityPublicityDetail',query:{id:item.id}}) |
|||
} |
|||
}, |
|||
async querystaffmessage(){ |
|||
let parm = { |
|||
agencyId: this.agencyId, |
|||
app:'resi', |
|||
userId: this.userId, |
|||
pageSize:10, |
|||
customerId:this.customerId, |
|||
pageNo:1 |
|||
} |
|||
let res = await querystaffmessage(parm) |
|||
if(res.data.length>0){ |
|||
this.messageText = res.data.map(item=>item.messageContent).join(' ') |
|||
} |
|||
}, |
|||
async handelClicopposeNum(id){ |
|||
let parm = { |
|||
eventId:id, |
|||
agencyId: this.agencyId, |
|||
userId: this.userId, |
|||
opinionFlag:1 |
|||
} |
|||
console.log(parm); |
|||
let res = await handelClicsupport(parm) |
|||
if(res.code === 0){ |
|||
this.icEventOldDiscuss() |
|||
} |
|||
}, |
|||
async communityPublicityGiveLike(id){ |
|||
let parm = { |
|||
id, |
|||
likes:1, |
|||
transpond:0 |
|||
} |
|||
let res = await communityPublicityGiveLike(parm) |
|||
if(res.code === 0){ |
|||
this.communityPublicity() |
|||
} |
|||
}, |
|||
async handelClicsupport1(id){ |
|||
let parm = { |
|||
eventId:id, |
|||
agencyId: this.agencyId, |
|||
userId: this.userId, |
|||
opinionFlag:0 |
|||
} |
|||
console.log(parm); |
|||
let res = await handelClicsupport(parm) |
|||
if(res.code === 0){ |
|||
this.icEventOldDiscuss() |
|||
} |
|||
}, |
|||
async communityActivity() { |
|||
let parm = { |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
agencyId: this.agencyId, |
|||
activityName: "", |
|||
status: "", |
|||
typeId: "", |
|||
startTime: "", |
|||
endTime: "", |
|||
address: "", |
|||
assistingParty: "", |
|||
online:1 |
|||
} |
|||
let res = await communityActivity(parm) |
|||
if (res.code === 0) { |
|||
this.activityList = res.data.list.slice(0, 2); |
|||
} |
|||
}, |
|||
async icEventOldDiscuss() { |
|||
let parm = { |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
agencyId: null, |
|||
icEventId: null |
|||
} |
|||
let res = await icEventOldDiscuss(parm) |
|||
if (res.code === 0) { |
|||
this.eventList = res.data.list.slice(0, 2) |
|||
} |
|||
}, |
|||
async advertisingTag() { |
|||
let parm = { |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
status: 1, |
|||
tagName: null |
|||
} |
|||
let res = await advertisingTag(parm) |
|||
if (res.code === 0) { |
|||
this.tagList = res.data.list; |
|||
this.tagList.unshift({ tagName: '最新', id: 'new' }) |
|||
} |
|||
}, |
|||
async communityPublicity() { |
|||
let parm = { |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
title: '', |
|||
tagId: this.tagId, |
|||
startTime: '', |
|||
endTime: '', |
|||
agencyId: this.agencyId, |
|||
status:1 |
|||
} |
|||
let res = await communityPublicity(parm) |
|||
if (res.code === 0) { |
|||
this.PublicityList = res.data.list.slice(0, 2) |
|||
this.PublicityListImg = res.data.list.filter((item)=>item.top === 1) |
|||
} |
|||
}, |
|||
handelChangeTags(val,title){ |
|||
if(val !== 0){ |
|||
this.tagId = this.tagList[val].id; |
|||
}else{ |
|||
this.tagId = ''; |
|||
} |
|||
this.communityPublicity() |
|||
}, |
|||
filterTagId(tagId){ |
|||
if(this.tagList.filter(item=>item.id === tagId)[0]){ |
|||
return this.tagList.filter(item=>item.id === tagId)[0].tagName; |
|||
}else{ |
|||
return '--'; |
|||
} |
|||
}, |
|||
handelClickSatis(){ |
|||
if(this.questionnaireUrl){ |
|||
window.open(this.questionnaireUrl) |
|||
} |
|||
else{ |
|||
this.$toast("当前社区没有设置调查问卷") |
|||
} |
|||
}, |
|||
handelClickJump(path,item) { |
|||
if (path === 'event' || path === 'Enjoyableservices') { |
|||
if(path === 'event'){ |
|||
if (this.$store.state.app.userInfo.mobile) { |
|||
this.$router.push({ path: `/${path}` }); |
|||
} else { |
|||
this.tipContent = '请您先进行注册。' |
|||
this.showRegister = true; |
|||
} |
|||
} |
|||
if(path === 'Enjoyableservices'){ |
|||
if (this.$store.state.app.userInfo.idNum) { |
|||
this.$router.push({ path: `/${path}` }); |
|||
} else { |
|||
this.tipContent = '请您先进行实名认证。' |
|||
this.registerFlag = 'real'; |
|||
this.showRegister = true; |
|||
} |
|||
} |
|||
} else if(item){ |
|||
this.$router.push({ path: `/${path}`,query:{id:item.id} }) |
|||
}else{ |
|||
this.$router.push({ path: `/${path}` }) |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
components: { registerDialog }, |
|||
computed: { |
|||
recordFlag(){ |
|||
return (item)=>{ |
|||
if(!item.recordList) return false |
|||
return item.recordList.findIndex(itemC=>itemC.mobile === this.$store.state.app.userInfo.mobile) != -1 |
|||
} |
|||
}, |
|||
disabledRecord() { |
|||
return (item) => { |
|||
if (!item.cutOffTime) return false |
|||
let flag = new Date(item.cutOffTime.replace(/-/g, '/')).getTime() < Date.now() || item.currentParticipants >= item.participants; |
|||
return flag || false |
|||
} |
|||
}, |
|||
}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
@import './index'; |
|||
.grid-container { |
|||
display: grid; |
|||
grid-template-columns: repeat(4, 1fr); /* 每列4个 */ |
|||
gap: 10px; /* 图片之间的间距 */ |
|||
// padding: 16px; |
|||
} |
|||
|
|||
.grid-item { |
|||
background-color: #f0f0f0; |
|||
border: 1px solid #ccc; |
|||
border-radius: 8px; |
|||
text-align: center; |
|||
padding: 20px; |
|||
} |
|||
:deep(.van-field__control) { |
|||
font-size: 13px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,311 @@ |
|||
<template> |
|||
<div> |
|||
<div class="flex flex-mean" style="background-color: #FFFFFF;"> |
|||
<van-search class="flex flex-1" v-model="searchValue" shape="round" placeholder="请输入搜索关键词"> |
|||
</van-search> |
|||
<van-button round type="info" class="custom-button font-size13 m-top10 m-right12" |
|||
@click="handleSearch">查询</van-button> |
|||
</div> |
|||
<van-tabs> |
|||
<van-tab v-for="item in tagList" :key="item.value" :title="item.name"> |
|||
</van-tab> |
|||
</van-tabs> |
|||
<div> |
|||
<div id="content1"></div> |
|||
<div style=" background-color: rgb(255, 255, 255);position: fixed;right: 0;top: 30%;" @click="selectMap"> |
|||
<div> |
|||
<img src=""> |
|||
</div> |
|||
查看地图 |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<van-popup |
|||
round |
|||
position="bottom" |
|||
v-if="showModal" |
|||
@close="onClose" |
|||
|
|||
> |
|||
222 |
|||
<!-- <no-data v-if="list.length === 0"></no-data> --> |
|||
</van-popup> |
|||
|
|||
|
|||
</div> |
|||
<Android></Android> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {Popup } from '@/plugins/vant' |
|||
import Map from '@/components/Map' |
|||
import { sphereLifeSearchList } from '@/api/lingCircle'; |
|||
export default { |
|||
data() { |
|||
return { |
|||
overlay:true, |
|||
showModalDetail:false, |
|||
PublicityList: [], |
|||
tagList: [{name:'全部',value:0},{name:'我的社区',value:1},{name:'教育培训',value:4},{name:'医疗卫生',value:5},{name:'商业服务',value:6},{name:'文化体育',value:7},{name:'金融电邮',value:8},{name:'其他',value:9},], |
|||
tagActive: 'new', |
|||
tagId: null, |
|||
pageSize: 5, |
|||
pageNo: 1, |
|||
agencyId: null, |
|||
finished: false, |
|||
loading: true, |
|||
showRegister: false, |
|||
searchValue: "", |
|||
longitude:"", |
|||
latitude:"", |
|||
showModal:false |
|||
|
|||
}; |
|||
}, |
|||
created() { |
|||
|
|||
this.agencyId = this.$route.query.agencyId?this.$route.query.agencyId: this.$store.state.app.agencyId; |
|||
// this.advertisingTag();//获取社区讯息菜单 |
|||
|
|||
}, |
|||
mounted(){ |
|||
this.loadMap(); |
|||
}, |
|||
methods: { |
|||
//关闭 |
|||
onClose() { |
|||
this.showModal=false, |
|||
this.showModalDetail=false |
|||
|
|||
}, |
|||
//查看生活圈列表 |
|||
selectMap(){ |
|||
this.showModal=true |
|||
this.showModalDetail=true |
|||
console.log(this.showModal); |
|||
|
|||
}, |
|||
loadMap() { |
|||
// 加载腾讯地图 API |
|||
const script = document.createElement('script'); |
|||
script.src = `https://map.qq.com/api/js?v=2.exp&key=5D6BZ-KHLW4-JUXU5-XIM47-5Q2DJ-IPBBT`; |
|||
script.onload = () => { |
|||
this.initMap(); // 地图加载完成后初始化 |
|||
}; |
|||
document.body.appendChild(script); |
|||
}, |
|||
initMap() { |
|||
// 创建地图实例 |
|||
const map = new qq.maps.Map(document.getElementById('content1'), { |
|||
center: new qq.maps.LatLng(39.916527, 116.397128), // 北京 |
|||
zoom: 15, // 缩放级别 |
|||
scrollwheel:true |
|||
}); |
|||
const marker = new qq.maps.Marker({ |
|||
position: new qq.maps.LatLng(39.916527, 116.397128), // 标记位置 |
|||
map: map, // 添加到地图 |
|||
draggable: true, //允许鼠标拖动 |
|||
scrollwheel:true |
|||
}); |
|||
const circle = new qq.maps.Circle({ |
|||
center: new qq.maps.LatLng(36.08743, 120.37479), |
|||
radius: 800, |
|||
strokeColor: "#FF0000", |
|||
strokeWeight: 2, |
|||
// fillColor: "rgba(255, 0, 0, 0.3)", |
|||
// fillOpacity: 0.3 |
|||
}); |
|||
circle.setMap(map) |
|||
// 获取用户当前位置 |
|||
this.getUserLocation(map); |
|||
}, |
|||
getUserLocation(map) { |
|||
console.log(map,"dwskflsdklfj"); |
|||
const geo = new qq.maps.Geolocation("5D6BZ-KHLW4-JUXU5-XIM47-5Q2DJ-IPBBT", "myapp"); |
|||
console.log(geo,"dsflkjlksd"); |
|||
geo.getLocation((position) => { |
|||
console.log(position,"sdfkljsdlfkjlksd"); |
|||
const lat = position.lat; // 纬度 |
|||
const lng = position.lng; // 经度 |
|||
const userMarker = new qq.maps.Marker({ |
|||
position: new qq.maps.LatLng(lat, lng), // 用户位置 |
|||
map: map |
|||
}); |
|||
map.setCenter(new qq.maps.LatLng(lat, lng)); // 设置地图中心为用户位置 |
|||
}, (error) => { |
|||
console.error(error); // 处理错误 |
|||
}); |
|||
console.log(map,"dsl;sfkjslk"); |
|||
this.longitude=map.center.lng |
|||
this.latitude=map.center.lat |
|||
this.sphereLifeSearchList()//获取讯息列表 |
|||
}, |
|||
|
|||
toDetail(item){ |
|||
this.$router.push({name:'communityPublicityDetail',query:{id:item.id}}) |
|||
}, |
|||
handleSearch(){ |
|||
this.PublicityList = []; |
|||
this.pageNo = 1; |
|||
this.sphereLifeSearchList() |
|||
}, |
|||
async sphereLifeSearchList(searchKey) { |
|||
let parm = { |
|||
lon: this.longitude,//'120.372537' |
|||
lat: this.latitude,//'36.098056' |
|||
name: searchKey || '' |
|||
} |
|||
console.log(parm,"sdflksdjflkjdsfk"); |
|||
|
|||
let res = await sphereLifeSearchList(parm) |
|||
if (res.code === 0) { |
|||
this.loading = false; |
|||
res.data.list.forEach(item => { |
|||
if (item.content) { |
|||
item.newContent = this.extractChineseCharactersAndPunctuation(item.content) |
|||
} |
|||
}) |
|||
if (!res.data || res.data.list.length < this.pageSize) { |
|||
this.finished = true; |
|||
} |
|||
this.PublicityList = this.PublicityList.concat(res.data.list); |
|||
} |
|||
}, |
|||
extractChineseCharactersAndPunctuation(str) { |
|||
const chineseCharsAndPunctuation = str.match(/[\u4e00-\u9fa5\u3000-\u303F\uff00-\uffef]/g); |
|||
return chineseCharsAndPunctuation ? chineseCharsAndPunctuation.join('') : ''; |
|||
}, |
|||
|
|||
}, |
|||
components: {Map}, |
|||
computed: {}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.text2{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 12px; |
|||
color: #999999; |
|||
line-height: 48px; |
|||
} |
|||
.text1{ |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 20px; |
|||
color: #000000; |
|||
line-height: 44px; |
|||
} |
|||
.custom-button { |
|||
width: 60px; |
|||
height: 33px; |
|||
} |
|||
|
|||
.activity_content { |
|||
padding-bottom: 10px; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
border-bottom: 1px solid #EAEAEA; |
|||
margin-top: 14px; |
|||
min-height: 50px; |
|||
|
|||
.img { |
|||
width: 231px; |
|||
height: 33px; |
|||
margin: 5px 3px 0 3px; |
|||
} |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
|
|||
.content { |
|||
|
|||
width: 325px; |
|||
height: 40px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
color: #333333; |
|||
line-height: 23px; |
|||
} |
|||
|
|||
.dianzan { |
|||
width: 325px; |
|||
height: 20px; |
|||
display: flex; |
|||
font-size: 13px; |
|||
color: #AAAAAA; |
|||
flex-direction: row; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
|
|||
.img { |
|||
width: 14.5px; |
|||
height: 15px; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.header {} |
|||
|
|||
.header .input_search { |
|||
width: 279px; |
|||
height: 33px; |
|||
background: rgba(193, 193, 193, 0.16); |
|||
border-radius: 17px; |
|||
// flex: 1; |
|||
color: #333333; |
|||
border: none; |
|||
/* 取消边框 */ |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.header .btn_search { |
|||
width: 60px; |
|||
height: 33px; |
|||
background: #3974F6; |
|||
border-radius: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
line-height: 23px; |
|||
border: none; |
|||
/* 取消边框 */ |
|||
margin-right: 10px; |
|||
} |
|||
::v-deep .van-search__content { |
|||
background-color: white; |
|||
border: 1px solid #3974F6; |
|||
} |
|||
|
|||
::v-deep .van-search__input { |
|||
color: #000; |
|||
} |
|||
|
|||
::v-deep .van-field__control::placeholder { |
|||
color: #A0A0A0; |
|||
} |
|||
:deep(.van-field__control) { |
|||
font-size: 13px; |
|||
} |
|||
.van-tab__title { |
|||
padding: 5px 12px; /* 内边距调整 */ |
|||
font-size: 14px; /* 字体大小 */ |
|||
} |
|||
|
|||
.van-tabs__nav { |
|||
justify-content: space-between; /* 平均分布 */ |
|||
} |
|||
#content1 { |
|||
width: 100%; |
|||
height: 600px; /* 确保有足够的高度 */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue