<script setup>
|
import { onMounted, ref } from "vue";
|
import { BASE_URL } from '../../config/baseUrl';
|
import { getVipInfoApi,getUserInfo,reportLossApi,removeBindingApi,buyWaterApi } from '../../api/index.js'
|
import { onShow,getCurrentPages } from '@dcloudio/uni-app'
|
//状态栏高度
|
const topHeight = ref(0)
|
function getTopHeight(){
|
if(uni.getMenuButtonBoundingClientRect){
|
// topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
|
topHeight.value = uni.getMenuButtonBoundingClientRect().top * 2
|
}
|
}
|
/**
|
* 会员卡相关
|
*/
|
const cardInfo = ref({
|
//用户档案信息
|
id:'',
|
userName:'微信用户',
|
headImg:'',
|
userPhone:'',
|
integral:'',
|
|
waterCardNumber:'',
|
balance:'',
|
count:'',
|
state:'',//state:true：挂失，false：正常
|
cardType:'',//卡类型01卡消费 02计次消费 03游客消费 04电子卡
|
userCardType:'',//userCardType：true：共享卡，false：正常卡
|
})
|
// const showHeadImg = ref(BASE_URL + '/upload' + cardInfo.value.headImg)
|
const isLoss = ref(false)
|
const isVip = ref(false)
|
const isShareCard = ref(false)
|
//获取会员卡信息
|
async function getVipInfo(){
|
await getVipInfoApi().then((res) =>{
|
console.log('会员卡信息响应',res)
|
if(res.code == 200 && res.data.id){
|
//用户信息处理存储
|
cardInfo.value.waterCardNumber = res.data.cardNumber
|
cardInfo.value.cardType = res.data.cardType
|
cardInfo.value.state = res.data.state == 2 ? true : false//state：2：挂失，1：正常
|
cardInfo.value.userCardType = res.data.userCardType == 2 ? true : false //userCardType：2：共享卡，1：正常卡
|
|
//数据使用
|
isLoss.value = cardInfo.value.state
|
isShareCard.value = cardInfo.value.userCardType
|
|
//判断费用卡还是计次卡
|
if(res.data.cardType == 1){
|
cardInfo.value.balance = res.data.balance
|
}else if(res.data.cardType == 2){
|
cardInfo.value.count = res.data.count
|
}
|
isVip.value = true
|
console.log('会员卡及用户信息',cardInfo.value)
|
}
|
})
|
}
|
//获取用户信息
|
async function getInfo(){
|
await getUserInfo().then(async(res) =>{
|
console.log('用户信息响应',res)
|
if(res.code == 200){
|
cardInfo.value.userName = res.data.userInfo.userName ? res.data.userInfo.userName : cardInfo.value.userName
|
cardInfo.value.headImg = res.data.userInfo.headImg
|
cardInfo.value.integral = res.data.userInfo.integral
|
cardInfo.value.userPhone = res.data.userInfo.userPhone
|
cardInfo.value.id = res.data.userInfo.id
|
await getVipInfo()
|
console.log('用户信息',cardInfo.value)
|
uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
|
}
|
})
|
}
|
/**
|
* 扫码取水相关
|
*/
|
function toScan(){
|
//调用二维码扫描接口
|
uni.scanCode({
|
scanType: ['qrCode'],
|
success: async function (res) {
|
let code = res.result.split('=')[1]
|
console.log('条码内容：' + res.result,'code',code);
|
uni.navigateTo({
|
url:`/pages/scanWater/index?facilityCode=${code}`
|
})
|
}
|
});
|
}
|
/**
|
* 功能列表相关
|
*/
|
const functionList = ref([
|
//isUrl:1:页面跳转，2：弹窗功能，3：弹窗功能，4：未开发
|
{text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/functionList/balanceRecord/index',isUrl:1},
|
{text:'消费记录',icon:'../../static/images/index/icon32.png',url:'/pages/functionList/paymentRecord/index',isUrl:1},
|
{text:'充值记录',icon:'../../static/images/index/icon33.png',url:'/pages/functionList/rechargeRecord/index',isUrl:1},
|
{text:'水卡共享',icon:'../../static/images/index/icon34.png',url:'/pages/functionList/share/cardShare/index',isUrl:1},
|
{text:'故障上报',icon:'../../static/images/index/icon35.png',url:'/pages/infoBreakdown/index',isUrl:1},
|
{text:'优惠卷',icon:'../../static/images/index/icon36.png',url:'',isUrl:4},
|
{text:'卡挂失',icon:'../../static/images/index/icon37.png',url:'',isUrl:2},
|
{text:'卡解绑',icon:'../../static/images/index/icon38.png',url:'',isUrl:3},
|
])
|
function navTo(itemUrl){
|
if(itemUrl){
|
uni.navigateTo({
|
url:itemUrl
|
})
|
}
|
}
|
//功能列表点击功能
|
async function setEvent(isUrl,url){
|
if(isUrl == 1){
|
navTo(url)
|
}else if(isUrl == 2){
|
if(cardInfo.value.waterCardNumber){
|
//不是共享卡且未挂失
|
if(!isShareCard.value && !cardInfo.value.state){
|
uni.showModal({
|
title: '会员卡挂失',
|
content: '确认挂失会员卡？',
|
success: async function(res) {
|
if (res.confirm) {
|
await reportLossApi(cardInfo.value.waterCardNumber).then(async(res) =>{
|
if(res.code == 200){
|
uni.showToast({
|
title: '已挂失',
|
duration: 2000,
|
});
|
await getVipInfoApi().then((res) =>{
|
if(res.code == 200){
|
if(res.data.state == 2){
|
isLoss.value = true
|
}
|
}
|
})
|
}
|
})
|
}
|
}
|
})
|
}else if(isShareCard.value){
|
uni.showToast({
|
title:'共享卡无权限',
|
icon:'none'
|
})
|
}else if(cardInfo.value.state){
|
uni.showToast({
|
title:'已挂失',
|
icon:'none'
|
})
|
}
|
}else{
|
uni.showToast({
|
title:'未绑定会员卡！',
|
icon:'none'
|
})
|
}
|
}else if(isUrl == 3){
|
if(cardInfo.value.waterCardNumber){
|
//判断是否是分享卡：分享卡不许注销
|
if(!isShareCard.value){
|
uni.showModal({
|
title: '会员卡注销',
|
content: '确认注销会员卡？',
|
success: async function(res){
|
if (res.confirm) {
|
await removeBindingApi(cardInfo.value.waterCardNumber).then(async(res) =>{
|
if(res.code == 200){
|
uni.showToast({
|
title: '已注销',
|
duration: 2000,
|
icon:'none',
|
});
|
await getVipInfoApi().then((res) =>{
|
if(res.code == 200){
|
if(!res.data.id){
|
isVip.value = false
|
cardInfo.value.balance = ''
|
cardInfo.value.count = ''
|
cardInfo.value.waterCardNumber = ''
|
uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
|
}
|
}
|
})
|
}
|
})
|
}
|
}
|
})
|
}else{
|
uni.showToast({
|
title:'共享卡无权限',
|
icon:'none'
|
})
|
}
|
}else{
|
uni.showToast({
|
title:'未绑定会员卡！',
|
icon:'none'
|
})
|
}
|
}else{
|
upGrade()
|
}
|
}
|
function upGrade(){
|
uni.showToast({
|
title: '该功能正在升级中！',
|
duration: 1000,
|
icon:'none',
|
});
|
}
|
//申请获取用户位置权限----------------------------------------------------
|
let userLocation = {
|
lat:'',
|
lon:'',
|
}
|
function getUserLocation(){
|
// 请求用户授权，第一次进入首页会有位置授权的提示
|
uni.authorize({
|
scope: 'scope.userLocation',
|
success() {
|
console.log("成功授权位置信息1")
|
storageLocation()
|
},
|
fail() {
|
console.log("用户拒绝授权位置信息，再次提示用户授权")
|
showToast()
|
}
|
})
|
//获取用户位置并存储
|
function storageLocation(){
|
uni.getLocation({
|
type:'gcj02',
|
isHighAccuracy:true,
|
success:(res) =>{
|
userLocation.lat = res.latitude
|
userLocation.lon = res.longitude
|
uni.setStorageSync('userLocation',JSON.stringify(userLocation))
|
},
|
fail:() =>{
|
showToast()
|
}
|
})
|
}
|
//用户拒绝授权
|
function showToast(){
|
uni.showModal({
|
title: "请求授权当前位置",
|
content: "请求获取您的位置，加载附近饮水设备信息！",
|
confirmText: "前往设置",
|
success: (res) => {
|
if (res.confirm) {
|
uni.openSetting({
|
success:(res1) =>{ //打开设置成功
|
if (res1.authSetting['scope.userLocation']){
|
console.log('用户二次授权成功')
|
setTimeout(() =>{
|
storageLocation()
|
},1000)
|
}else{
|
showToast()
|
console.log('用户拒绝授权')
|
}
|
},
|
})
|
}else{
|
uni.showToast({
|
title: '请先授权！',
|
duration: 2000,
|
icon:'none'
|
});
|
showToast()
|
}
|
},
|
});
|
}
|
}
|
onMounted( async() =>{
|
console.log('空用户信息',cardInfo.value)
|
uni.setStorageSync('userInfo',JSON.stringify(cardInfo.value))
|
getTopHeight()
|
await getInfo()
|
await getUserLocation()
|
console.log('onMounted','用户存储本地数据',JSON.parse(uni.getStorageSync('userInfo')))
|
})
|
onShow(async() =>{
|
getTopHeight()
|
await getInfo()
|
console.log('onShow','用户存储本地数据',JSON.parse(uni.getStorageSync('userInfo')))
|
})
|
uni.showShareMenu({
|
withShareTicket: true,
|
menus: ['shareAppMessage', 'shareTimeline'],
|
success: function () {
|
// console.log('分享菜单显示成功');
|
},
|
fail: function (err) {
|
// console.error('分享菜单显示失败', err);
|
}
|
});
|
</script>
|
|
<template>
|
<view class="container">
|
<view class="content">
|
<view class="card-box" :style="{paddingTop:topHeight + 'rpx'}">
|
<view class="user-info" >
|
<image v-if="cardInfo.headImg" class="user-img" :src= "BASE_URL + '/upload' + cardInfo.headImg" alt=''></image>
|
<image v-else class="user-img" src='../../static/images/index/head.png' alt=''></image>
|
<text @click="navTo('/pages/userInfo/index')">{{cardInfo.userName}}</text>
|
<image @click="navTo('/pages/userInfo/index')" class="user-more"src="../../static/images/index/back.png"></image>
|
</view>
|
<view class="card">
|
<image class="card-bg" src="../../static/images/index/card11.png" alt=""></image>
|
<view v-if="isVip" class="card-detail">
|
<view class="card-top">
|
<view class="vip">VIP</view>
|
<view class="top-right">
|
<view v-if="isShareCard" class="card-name">
|
<text>共享卡</text>
|
<text v-if="isLoss">[已挂失]</text>
|
</view>
|
<view v-if="!isShareCard" class="card-name">
|
<text>会员卡</text>
|
<text v-if="isLoss" class="card-loss">[已挂失]</text>
|
</view>
|
<view class="card-num">
|
卡号：{{cardInfo.waterCardNumber}}
|
</view>
|
</view>
|
</view>
|
<view class="card-bottom">
|
<view class="bottom-left">
|
<text class="bottom-left-text">余额：</text>
|
<text class="bottom-left-money">{{cardInfo.balance}}</text>
|
</view>
|
<view v-if="!isShareCard" @click="navTo('/pages/recharge/index')" class="card-btn">充值</view>
|
</view>
|
</view>
|
<view v-if="!isVip" class="card-none">
|
<view class="card-none-top"><text>未绑定会员卡</text></view>
|
<view class="card-none-bottom"><view @click="navTo('/pages/addCard/index')" class="card-btn">去绑定</view></view>
|
</view>
|
</view>
|
</view>
|
<!-- 功能区 -->
|
<view class="function-box1">
|
<view class="box1-bg box1-one" @click="upGrade">
|
<image class="box-one-image1" src="../../static/images/index/home21.svg" alt=""></image>
|
<view>送水到家</view>
|
</view>
|
<view @click="navTo('/pages/facilityList/index')" class="box1-bg box1-two">
|
<image class="box-one-image2" src="../../static/images/index/icon22.svg" alt=""></image>
|
<view>附近设备</view>
|
</view>
|
</view>
|
<!-- 扫码取水 -->
|
<view class="scan-box">
|
<view class="scan" @click="toScan()">
|
<image class="scan-img" src="../../static/images/index/scan.png"></image>
|
<view>扫码取水</view>
|
</view>
|
</view>
|
<view class="function-box2">
|
<view class="box2-title"><text>功能列表</text></view>
|
<view class="box2-content">
|
<block v-for="(item,index) in functionList" :key="index">
|
<view class="box2-item" @click="setEvent(item.isUrl,item.url)">
|
<view class="box2-item-img"><image class="box2-image" :src= "item.icon" alt=""></image></view>
|
<view class="box2-item-text">{{item.text}}</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
<!-- 积分商城 -->
|
<view class="advertisement-box" @click="navTo('/pagesPoints/pointsMall/index')">
|
<image class="banner-img" src="../../static/images/index/point-banner.png"></image>
|
</view>
|
<view class="service-box">
|
<view class="service-title"><text>服务指南</text></view>
|
<view class="service-content">
|
<view class="service-bg" @click="navTo('/pages/station/index')">
|
<view>
|
<image src="../../static/images/index/icon51.svg" alt=""></image>
|
<text>附近站点</text>
|
</view>
|
<view class="service-info">服务中心正在营业中……</view>
|
<view>
|
<text>查看更多</text>
|
<image src="../../static/images/index/more-info5.png" alt=""></image>
|
</view>
|
</view>
|
<view class="service-bg" @click="upGrade">
|
<!-- <view class="service-bg" @click="navTo('/pages/counterRecharge/index')"> -->
|
<view>
|
<image src="../../static/images/index/notice5.svg" alt=""></image>
|
<text>公示公告</text>
|
</view>
|
<view class="service-info">停水公告的部分摘要的内容展示……</view>
|
<view>
|
<text>查看更多</text>
|
<image src="../../static/images/index/more-info5.png" alt=""></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
// height:100vh;
|
// overflow-y:scroll;
|
.content{
|
width:100%;
|
// height:100vh;
|
background:#F6F6F6;
|
overflow:scroll;
|
.card-box{
|
width: 100%;
|
height: auto;
|
box-sizing: border-box;
|
padding: 0 32rpx;
|
background: linear-gradient(to bottom,#5EA1FA,#D2F2FE);
|
.user-info{
|
width:100%;
|
height:100rpx;
|
align-items: center;
|
padding-left:15rpx;
|
box-sizing: border-box;
|
margin-bottom: 14rpx;
|
display:flex;
|
.user-img{
|
width:90rpx;
|
height:90rpx;
|
border-radius:50%;
|
margin-right:20rpx;
|
}
|
text{
|
margin-right:20rpx;
|
color: #fff;
|
}
|
.user-more{
|
width: 12rpx;
|
height: 28rpx;
|
}
|
}
|
.card{
|
width: 100%;
|
height: 256rpx;
|
position:relative;
|
.card-bg{
|
height:256rpx;
|
width:100%;
|
top:0;
|
position: absolute;
|
z-index:1;
|
}
|
.card-none{
|
width: 100%;
|
height:100%;
|
padding:38rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content:space-around;
|
color:#fff;
|
z-index:2;
|
.card-none-top{
|
font-size:40rpx;
|
font-weight:600;
|
z-index:2;
|
letter-spacing:2rpx;
|
}
|
.card-none-bottom{
|
display: flex;
|
justify-content: flex-end;
|
z-index:2;
|
.card-btn{
|
width: 196rpx;
|
height: 80rpx;
|
background: linear-gradient( to right,#338AFD 0%, #65A7FD 100%);
|
border-radius: 40rpx;
|
text-align: center;
|
line-height: 80rpx;
|
font-size:44rpx;
|
letter-spacing:3rpx;
|
font-weight:500;
|
}
|
}
|
}
|
.card-detail{
|
width: 100%;
|
height:100%;
|
padding:38rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
color:#fff;
|
z-index:2;
|
.card-top{
|
width:100%;
|
display: flex;
|
align-items: center;
|
z-index:2;
|
.vip{
|
font-size:114rpx;
|
font-weight: 600;
|
}
|
.top-right{
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
margin-left:20rpx;
|
.card-name{
|
font-size:40rpx;
|
font-weight:400;
|
.card-loss{
|
font-size:34rpx;
|
font-weight:600;
|
margin-left:10rpx;
|
letter-spacing:2rpx;
|
color: #333434;
|
}
|
}
|
.card-num{
|
font-size:34rpx;
|
font-weight:400;
|
}
|
}
|
}
|
.card-bottom{
|
width:100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
z-index: 2;
|
.bottom-left{
|
display: flex;
|
align-items:center;
|
.bottom-left-text{
|
font-size:40rpx;
|
font-weight:400;
|
letter-spacing:2rpx;
|
}
|
.bottom-left-money{
|
font-size:60rpx;
|
font-weight:600;
|
}
|
}
|
.card-btn{
|
width: 196rpx;
|
height: 80rpx;
|
background: linear-gradient( 270deg, #65B5FD 0%, #338AFD 100%, #65A7FD 100%);
|
border-radius: 40rpx;
|
text-align: center;
|
line-height: 80rpx;
|
font-size:48rpx;
|
letter-spacing:6rpx;
|
}
|
}
|
}
|
// .share-card{
|
// position:absolute;
|
// top:16rpx;
|
// left:28rpx;
|
// z-index:100;
|
// font-weight:400;
|
// font-size: 36rpx;
|
// color: #FFFFFF;
|
// }
|
// .card-content{
|
// width: 100%;
|
// height: 100%;
|
// box-sizing: border-box;
|
// padding:20rpx 15rpx;
|
// display: flex;
|
// justify-content:space-between;
|
// font-weight: 300;
|
// font-size: 30rpx;
|
// color: #FFFFFF;
|
// z-index:100;
|
// .card-left{
|
// height:100%;
|
// display: flex;
|
// justify-content:space-between;
|
// flex-direction:column;
|
// align-items:flex-start;
|
// z-index:100;
|
// .left-top{
|
// display: flex;
|
// flex-direction: column;
|
// view:first-child{
|
// display: flex;
|
// align-items: center;
|
// image{
|
// width:48rpx;
|
// height:48rpx;
|
// }
|
// text{
|
// font-weight:400;
|
// font-size: 36rpx;
|
// color: #FFFFFF;
|
// }
|
// .lossed{
|
// color:#fff;
|
// }
|
// }
|
// view:last-child{
|
// margin-left:10rpx;
|
// font-size: 26rpx;
|
// font-weight:500;
|
// }
|
// }
|
// }
|
// .card-right{
|
// display: flex;
|
// justify-content: space-between;
|
// align-items:flex-end;
|
// flex-direction: column;
|
// height:100%;
|
// z-index:100;
|
// .card-right-top{
|
// align-items:flex-end;
|
// display: flex;
|
// justify-content: space-between;
|
// flex-direction: column;
|
// font-size:34rpx;
|
// .user-add-card{
|
// display:flex;
|
// align-items:center;
|
// height:52rpx;
|
// font-size:28rpx;
|
// background:linear-gradient(to right,#B1D9FD 0%,#65A7FD 70%,#65A7FD 100%);
|
// border-radius:50rpx;
|
// padding: 0 20rpx;
|
// image{
|
// width:36rpx;
|
// height:36rpx;
|
// margin-right:6rpx;
|
// opacity:0.8;
|
// }
|
// text{
|
// color:#FFF;
|
// }
|
// }
|
// text:last-child{
|
// font-weight:500;
|
// }
|
// }
|
// .card-right-bottom{
|
// width:137rpx;
|
// height:56rpx;
|
// background:linear-gradient(to right,#65A7FD ,#B1D9FD);
|
// border-radius:50rpx;
|
// text-align: center;
|
// line-height: 56rpx;
|
// color:#212DDE;
|
// font-weight: 400;
|
// }
|
// }
|
// }
|
}
|
}
|
.function-box1{
|
width:100%;
|
box-sizing:border-box;
|
height: 172rpx;
|
padding: 20rpx 32rpx 22rpx;
|
// background: rgba(85, 170, 0, 0.1);
|
display:flex;
|
justify-content: space-between;
|
align-items:center;
|
font-size:36rpx;
|
font-weight:500;
|
color: #4d4d4d;
|
letter-spacing:2rpx;
|
.box1-bg{
|
width:326rpx;
|
height:130rpx;
|
border-radius:24rpx;
|
background: #fff;
|
box-shadow:0 0 12rpx 3rpx rgba(13,118,255,0.16);
|
}
|
.box1-one{
|
text-align: center;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
justify-content:space-evenly;
|
.box-one-image1{
|
width: 86rpx;
|
height: 86rpx;
|
}
|
}
|
.box1-two{
|
display: flex;
|
align-items:center;
|
justify-content:space-evenly;
|
.box-one-image2{
|
width:96rpx;
|
height: 96rpx;
|
// margin-bottom:20rpx;
|
}
|
// view:first-child{
|
// font-weight: 300;
|
// font-size: 24rpx;
|
// color: #464646;
|
// text-align: center;
|
// margin-bottom:10rpx;
|
// }
|
// .recharge{
|
// text:first-child{
|
// font-weight: 500;
|
// font-size: 32rpx;
|
// color: #000;
|
// }
|
// text:last-child{
|
// font-weight: 300;
|
// font-size: 32rpx;
|
// color: #2269E5;
|
// }
|
// }
|
// view:last-child{
|
// width: 140rpx;
|
// height: 70rpx;
|
// font-weight:300;
|
// font-size: 24rpx;
|
// color: #000141;
|
// background-image: url('../../static/images/index/icon22.png');
|
// background-repeat: no-repeat;
|
// background-position: center;
|
// background-size: 100% 100%;
|
// text-align:center;
|
// line-height:70rpx;
|
// margin-top:10rpx;
|
// }
|
}
|
.box1-three{
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #000000;
|
text-align: center;
|
display: flex;
|
flex-direction:column;
|
align-items: center;
|
justify-content: center;
|
image{
|
width: 83rpx;
|
height:83rpx;
|
margin-bottom:20rpx;
|
}
|
}
|
}
|
.scan-box{
|
width:100%;
|
height:116rpx;
|
padding:0 42rpx 16rpx;
|
box-sizing: border-box;
|
.scan{
|
width:100%;
|
height:100rpx;
|
background: #1678FF;
|
border-radius:178rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size:44rpx;
|
font-weight:500;
|
letter-spacing:1rpx;
|
.scan-img{
|
width:44rpx;
|
height:44rpx;
|
margin-right:20rpx;
|
}
|
}
|
}
|
.function-box2{
|
width:100%;
|
box-sizing:border-box;
|
height: 420rpx;//374 + 44 + 距离 + 底部padding32
|
padding:0 32rpx 0;
|
// background: rgba(46, 121, 170, 0.5);
|
.box2-title{
|
width: 100%;
|
font-weight:300;
|
font-size: 32rpx;
|
color: #000000;
|
text-align: left;
|
margin-bottom: 10rpx;
|
margin-left: 30rpx;
|
}
|
.box2-content{
|
box-sizing: border-box;
|
padding:22rpx 35rpx;
|
width: 686rpx;
|
height:360rpx;
|
background: #fff;
|
border-radius: 24rpx;
|
box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
align-items: center;
|
.box2-item{
|
width: 146rpx;
|
height:143rpx;
|
display: flex;
|
flex-direction:column;
|
justify-content:space-between;
|
align-items: center;
|
.box2-item-img{
|
width: 100rpx;
|
height:100rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
// background:linear-gradient(to right,#18acff,#639fff);
|
background: #5EA1FA;
|
border-radius:50%;
|
.box2-image{
|
width: 48rpx;
|
height:48rpx;
|
}
|
}
|
.box2-item-text{
|
width:100%;
|
height: 40rpx;
|
font-weight: 300;
|
font-size:30rpx;
|
color: #3e3e3e;
|
text-align: center;
|
font-weight:600;
|
}
|
}
|
}
|
}
|
.advertisement-box{
|
width:100%;
|
height:188rpx;
|
padding:0 32rpx 10rpx;
|
box-sizing: border-box;
|
display: flex;
|
justify-content:center;
|
.banner-img{
|
width:686rpx;
|
height:178rpx;
|
}
|
// .point-advert{
|
// width:640rpx;
|
// height:136rpx;
|
// border-radius:10rpx;
|
// background:linear-gradient(140deg,#5c9dff 0%,#b5dcff 30%,#52aafc 70%,#b5dcff 90%,#5daffc 100%);
|
// display: flex;
|
// justify-content: space-around;
|
// align-items: center;
|
// box-shadow: 0 0 4rpx 2rpx #4978de;
|
// .advert-title{
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
// color: #fff;
|
// font-size:46rpx;
|
// font-weight:800;
|
// text-shadow:4rpx 2rpx #5EA1FA;
|
// .advert-title2{
|
// margin-top:10rpx;
|
// font-size:28rpx;
|
// font-weight:500;
|
// width:180rpx;
|
// height:40rpx;
|
// background: #5c9dff;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// border-radius:30rpx;
|
// letter-spacing:2rpx;
|
// }
|
// }
|
// .advert-image{
|
// width:200rpx;
|
// height:100%;
|
// // background: #76bfa1;
|
// position: relative;
|
// .image-icon1{
|
// position:absolute;
|
// left: calc(50% - 65rpx);
|
// top: calc(50% - 65rpx);
|
// width:130rpx;
|
// height:130rpx;
|
// transform: rotate(20deg);
|
// }
|
// .image-icon2{
|
// position:absolute;
|
// left:60%;
|
// top: calc(50% - 30rpx);
|
// width:90rpx;
|
// height:90rpx;
|
// transform: rotate(-10deg);
|
// }
|
// .image-icon3{
|
// position:absolute;
|
// left: calc(50% - 100rpx);
|
// top: 30%;
|
// width:80rpx;
|
// height:80rpx;
|
// transform: rotate(-10deg);
|
// }
|
// .image-icon4{
|
// position:absolute;
|
// left:140%;
|
// top: 60%;
|
// width:50rpx;
|
// height:50rpx;
|
// transform: rotate(5deg);
|
// }
|
// }
|
// }
|
// image{
|
// width:320rpx;
|
// height:136rpx;
|
// border-radius:10rpx;
|
// }
|
}
|
.service-box{
|
width: 100%;
|
height: 255rpx;
|
// background: #D2F2FE;
|
padding:0 32rpx;
|
box-sizing: border-box;
|
.service-title{
|
height: 44rpx;
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #000000;
|
text-align: left;
|
margin-bottom: 5rpx;
|
margin-left: 30rpx;
|
}
|
.service-content{
|
width: 100%;
|
height: 206rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.service-bg{
|
width: 330rpx;
|
height: 206rpx;
|
background: linear-gradient(to bottom,#AFD5FF,#FFFFFF);
|
border-radius: 24rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items:flex-start;
|
view:first-child{
|
display: flex;
|
align-items: center;
|
margin-left:40rpx;
|
image{
|
width:48rpx;
|
height:48rpx;
|
margin-right:10rpx;
|
}
|
text{
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #000000;
|
}
|
}
|
.service-info{
|
width: 214rpx;
|
font-weight: 300;
|
font-size: 24rpx;
|
color: #4D4B4B;
|
margin-left:96rpx;
|
}
|
view:last-child{
|
margin-left: 174rpx;
|
margin-top: 18rpx;
|
display: flex;
|
align-items: center;
|
image{
|
width:32rpx;
|
height:32rpx;
|
}
|
text{
|
font-weight: 300;
|
font-size: 24rpx;
|
color: #4D4B4B;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
.popup-content{
|
height: 560rpx;
|
position: relative;
|
z-index: 1000;
|
.popup-title{
|
width: 100%;
|
display: block;
|
text-align: center;
|
margin: 15rpx 0;
|
font-weight: 600;
|
font-size: 36rpx;
|
}
|
.hr {
|
width: 100%;
|
height: 2rpx;
|
background: #e2e2e2;
|
}
|
.img-box {
|
width: 65rpx;
|
height: 65rpx;
|
margin: 40rpx auto 30rpx;
|
border: 1rpx solid #e2e2e2;
|
border-radius: 50%;
|
padding: 15rpx;
|
.img{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.info-box {
|
width: 100%;
|
padding: 0 80rpx;
|
box-sizing: border-box;
|
.hr2{
|
width: 100%;
|
height: 2rpx;
|
background: #e2e2e2;
|
margin: 20rpx 0;
|
}
|
.info-text2{
|
font-size: 26rpx;
|
color: #767676;
|
}
|
}
|
.button-box{
|
display: flex;
|
margin-top: 20rpx;
|
button{
|
width: 230rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
border: none;
|
box-shadow: none;
|
margin-top: 30rpx;
|
}
|
button::after {
|
border: none !important;
|
}
|
.button1{
|
background-color: #F0F0F0;
|
color: #333333;
|
}
|
.button2{
|
background-color: #06BF5E;
|
color: #ffffff;
|
}
|
}
|
}
|
}
|
</style>
|
