| | |
|---|
| | | <template> |
|---|
| | | <view class="content"> |
|---|
| | | <image class="logo" src="/static/logo.png"></image> |
|---|
| | | <view class="text-area"> |
|---|
| | | <text class="title">{{title}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | title: 'Hello' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | onLoad() { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | |
|---|
| | | <script setup> |
|---|
| | | import { onMounted, ref } from "vue"; |
|---|
| | | import { getVipInfoApi } from '../../api/index.js' |
|---|
| | | import { getUserInfo } from '../../api/index.js' |
|---|
| | | //胶囊高度 |
|---|
| | | const topHeight = ref(0) |
|---|
| | | function getTopHeight(){ |
|---|
| | | if(uni.getMenuButtonBoundingClientRect){ |
|---|
| | | topHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * 会员卡相关 |
|---|
| | | */ |
|---|
| | | const vipInfo = ref() |
|---|
| | | const isVip = ref(false) |
|---|
| | | //获取会员卡信息 |
|---|
| | | async function getVipInfo(){ |
|---|
| | | let res = await getUserInfo() |
|---|
| | | if(res.data.userInfo.waterCardNumber){ |
|---|
| | | let res1 = await getVipInfoApi() |
|---|
| | | vipInfo.value = res1.data |
|---|
| | | isVip.value = true |
|---|
| | | }else{ |
|---|
| | | isVip.value = false |
|---|
| | | } |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * 扫码取水相关 |
|---|
| | | */ |
|---|
| | | function toScan(){ |
|---|
| | | uni.navigateTo({ |
|---|
| | | url:'/pages/scanWater/index' |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * 功能列表相关 |
|---|
| | | */ |
|---|
| | | const functionList = ref([ |
|---|
| | | {text:'余额记录',icon:'../../static/images/index/icon31.png',url:'/pages/balanceRecord/index'}, |
|---|
| | | {text:'消费记录',icon:'../../static/images/index/icon32.png',url:''}, |
|---|
| | | {text:'充值记录',icon:'../../static/images/index/icon33.png',url:''}, |
|---|
| | | {text:'账户共享',icon:'../../static/images/index/icon34.png',url:''}, |
|---|
| | | {text:'优惠卷',icon:'../../static/images/index/icon35.png',url:''}, |
|---|
| | | {text:'电子发票',icon:'../../static/images/index/icon36.png',url:''}, |
|---|
| | | {text:'联系客服',icon:'../../static/images/index/icon37.png',url:''}, |
|---|
| | | {text:'推广分佣',icon:'../../static/images/index/icon38.png',url:''}, |
|---|
| | | ]) |
|---|
| | | function navTo(itemUrl){ |
|---|
| | | if(itemUrl){ |
|---|
| | | uni.navigateTo({ |
|---|
| | | url:itemUrl |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //获取用户地理位置 |
|---|
| | | async function getUserLocation(){ |
|---|
| | | wx.getLocation({ |
|---|
| | | type: 'wgs84', |
|---|
| | | success(res){ |
|---|
| | | const latitude = res.latitude |
|---|
| | | const longitude = res.longitude |
|---|
| | | const speed = res.speed |
|---|
| | | const accuracy = res.accuracy |
|---|
| | | }, |
|---|
| | | fail(e){ |
|---|
| | | console.log('e',e) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | console.log('location') |
|---|
| | | } |
|---|
| | | onMounted( async() =>{ |
|---|
| | | getTopHeight() |
|---|
| | | await getVipInfo() |
|---|
| | | // await getUserLocation() |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | .content { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .logo { |
|---|
| | | height: 200rpx; |
|---|
| | | width: 200rpx; |
|---|
| | | margin-top: 200rpx; |
|---|
| | | margin-left: auto; |
|---|
| | | margin-right: auto; |
|---|
| | | margin-bottom: 50rpx; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .text-area { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .title { |
|---|
| | | font-size: 36rpx; |
|---|
| | | color: #8f8f94; |
|---|
| | | <template> |
|---|
| | | <view class="container"> |
|---|
| | | <view class="content"> |
|---|
| | | <view class="card-box" :style="{paddingTop:topHeight + 'rpx'}"> |
|---|
| | | <view class="card"> |
|---|
| | | <view class="card-content"> |
|---|
| | | <view v-if="isVip" class="card-title"> |
|---|
| | | <view>会员卡</view> |
|---|
| | | <image src="../../static/images/index/code1.png" alt=""></image> |
|---|
| | | </view> |
|---|
| | | <view v-else class="card-add"> |
|---|
| | | <view @click="navTo('/pages/addCard/index')"> |
|---|
| | | <image src="../../static/images/index/vip-add.png" alt=""></image> |
|---|
| | | <text>添加会员卡</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="card-info"> |
|---|
| | | <view class="info-head"><image src="../../static/images/index/hend1.png" alt=""></image></view> |
|---|
| | | <view class="info-content"> |
|---|
| | | <view class="info-content-top"> |
|---|
| | | <view>张大左</view> |
|---|
| | | <view>vip1</view> |
|---|
| | | </view> |
|---|
| | | <view class="info-content-bottom">YL123654987521</view> |
|---|
| | | </view> |
|---|
| | | <view class="info-more"><image src="../../static/images/index/back.png"></image></view> |
|---|
| | | </view> |
|---|
| | | <view class="card-bottom"> |
|---|
| | | <view>我的积分：200</view> |
|---|
| | | <view>消费折扣：9.9折</view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="function-box1"> |
|---|
| | | <view class="box1-bg box1-one" @click="navTo('/pages/sendWater/index')"> |
|---|
| | | <image src="../../static/images/index/home21.png" alt=""></image> |
|---|
| | | <view>送水到家</view> |
|---|
| | | </view> |
|---|
| | | <view class="box1-bg box1-two"> |
|---|
| | | <view>账户余额（元)</view> |
|---|
| | | <view class="recharge"> |
|---|
| | | <text>￥</text> |
|---|
| | | <text>120.00</text> |
|---|
| | | </view> |
|---|
| | | <view @click="navTo('/pages/recharge/index')"> |
|---|
| | | 充值 |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="box1-bg box1-three" @click="toScan()"> |
|---|
| | | <image src="../../static/images/index/icon23.png" alt=""></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="navTo(item.url)"> |
|---|
| | | <image :src= "item.icon" alt=""></image> |
|---|
| | | <view class="box2-item-text">{{item.text}}</view> |
|---|
| | | </view> |
|---|
| | | </block> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | <view class="advertisement-box"><image src="../../static/images/index/bg4.png" alt=""></image></view> |
|---|
| | | <view class="service-box"> |
|---|
| | | <view class="service-title"><text>服务指南</text></view> |
|---|
| | | <view class="service-content"> |
|---|
| | | <view class="service-bg"> |
|---|
| | | <view> |
|---|
| | | <image src="../../static/images/index/icon51.png" 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"> |
|---|
| | | <view> |
|---|
| | | <image src="../../static/images/index/notice5.png" 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> |
|---|
| | | |
|---|
| | | <!-- 微信授权弹窗 --> |
|---|
| | | <!-- <uni-popup ref="popupRef" background-color="#fff"> |
|---|
| | | <view class="popup-content"> |
|---|
| | | <text class="popup-title">微信登录</text> |
|---|
| | | <view class="hr"></view> |
|---|
| | | <view class="img-box"><img src="../../static/images/login/logo.png" alt="" class="img"/></view> |
|---|
| | | <view class="info-box"> |
|---|
| | | <view class="info-text1">青源直饮水平台申请获取以下权限:</view> |
|---|
| | | <view class="hr2"></view> |
|---|
| | | <view class="info-text2">· 获得你的公开信息（昵称、头像、地区及性别)</view> |
|---|
| | | <view class="button-box"> |
|---|
| | | <button class="button1" @click="popupRef.close('bottom')">取消</button> |
|---|
| | | <button class="button2" @click="wxLoginFn()">确定</button> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </uni-popup> --> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .container{ |
|---|
| | | width:100%; |
|---|
| | | height:100vh; |
|---|
| | | overflow:scroll; |
|---|
| | | .content{ |
|---|
| | | width:100%; |
|---|
| | | height:100vh; |
|---|
| | | background:#F6F6F6; |
|---|
| | | .card-box{ |
|---|
| | | width: 100%; |
|---|
| | | height: auto; |
|---|
| | | // background: #a0b5c7; |
|---|
| | | box-sizing: border-box; |
|---|
| | | padding: 0 32rpx; |
|---|
| | | background: linear-gradient(to bottom,#5EA1FA,#D2F2FE); |
|---|
| | | .card{ |
|---|
| | | width: 100%; |
|---|
| | | height: 304rpx; |
|---|
| | | background-image: url("../../static/images/index/card1.png"); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size: 100%; |
|---|
| | | .card-content{ |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | box-sizing: border-box; |
|---|
| | | // background: #AFD5FF; |
|---|
| | | padding: 14rpx 42rpx 64rpx 22rpx; |
|---|
| | | .card-title{ |
|---|
| | | width:100%; |
|---|
| | | height:64rpx; |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | // background: #82fec5; |
|---|
| | | align-items: center; |
|---|
| | | view{ |
|---|
| | | font-weight:300; |
|---|
| | | font-size: 36rpx; |
|---|
| | | color: #FFFFFF; |
|---|
| | | letter-spacing:5rpx; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | image{ |
|---|
| | | width:64rpx; |
|---|
| | | height:64rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .card-add{ |
|---|
| | | width:100%; |
|---|
| | | height:64rpx; |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | align-items: center; |
|---|
| | | view{ |
|---|
| | | width: 172rpx; |
|---|
| | | height:38rpx; |
|---|
| | | border-radius:24rpx; |
|---|
| | | background: #fff; |
|---|
| | | display: flex; |
|---|
| | | justify-content:flex-start; |
|---|
| | | align-items:center; |
|---|
| | | image{ |
|---|
| | | width:22rpx; |
|---|
| | | height:22rpx; |
|---|
| | | margin-left:15rpx; |
|---|
| | | } |
|---|
| | | text{ |
|---|
| | | font-weight: 300; |
|---|
| | | font-size: 20rpx; |
|---|
| | | color: #0088FF; |
|---|
| | | margin-left:15rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .card-info{ |
|---|
| | | width: 100%; |
|---|
| | | height:100rpx; |
|---|
| | | // background: #8ff6c3; |
|---|
| | | margin-top: 18rpx; |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-start; |
|---|
| | | align-items: center; |
|---|
| | | .info-head{ |
|---|
| | | width: 100rpx; |
|---|
| | | height:100rpx; |
|---|
| | | margin-right: 20rpx; |
|---|
| | | image{ |
|---|
| | | width: 100rpx; |
|---|
| | | height:100rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .info-content{ |
|---|
| | | width: 216rpx;//108+86+22 |
|---|
| | | height:100rpx; |
|---|
| | | // background: #54dac4; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: flex-start; |
|---|
| | | align-items: flex-start; |
|---|
| | | .info-content-top{ |
|---|
| | | width: 100%; |
|---|
| | | display: flex; |
|---|
| | | justify-content:space-between; |
|---|
| | | align-items:center; |
|---|
| | | margin-bottom:8rpx; |
|---|
| | | view:first-child{ |
|---|
| | | width: 108rpx; |
|---|
| | | height: 50rpx; |
|---|
| | | font-weight: 400; |
|---|
| | | font-size: 36rpx; |
|---|
| | | color: #FFFFFF; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | view:last-child{ |
|---|
| | | width: 86rpx; |
|---|
| | | height: 32rpx; |
|---|
| | | font-weight:300; |
|---|
| | | font-size: 26rpx; |
|---|
| | | color: #FFFFFF; |
|---|
| | | text-align: center; |
|---|
| | | background-image: url('../../static/images/index/vip1.png'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .info-content-bottom{ |
|---|
| | | width: 100%; |
|---|
| | | font-weight: 300; |
|---|
| | | font-size: 20rpx; |
|---|
| | | color: #FFFFFF; |
|---|
| | | letter-spacing:5rpx; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .info-more{ |
|---|
| | | width: 12rpx; |
|---|
| | | height: 28rpx; |
|---|
| | | margin-left:274rpx; |
|---|
| | | image{ |
|---|
| | | width: 12rpx; |
|---|
| | | height: 28rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .card-bottom{ |
|---|
| | | margin-top:36rpx; |
|---|
| | | width:100%; |
|---|
| | | display: flex; |
|---|
| | | justify-content:space-evenly; |
|---|
| | | font-weight: 300; |
|---|
| | | font-size: 20rpx; |
|---|
| | | color: #D8D8D8; |
|---|
| | | line-height: 0rpx; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .function-box1{ |
|---|
| | | width:100%; |
|---|
| | | box-sizing:border-box; |
|---|
| | | height: 227rpx; |
|---|
| | | padding: 20rpx 32rpx 15rpx; |
|---|
| | | // background: rgba(85, 170, 0, 0.1); |
|---|
| | | display:flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items:center; |
|---|
| | | .box1-bg{ |
|---|
| | | width:212rpx; |
|---|
| | | height:200rpx; |
|---|
| | | border-radius:24rpx; |
|---|
| | | background: #fff; |
|---|
| | | box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16); |
|---|
| | | } |
|---|
| | | .box1-one{ |
|---|
| | | font-weight: 300; |
|---|
| | | font-size: 32rpx; |
|---|
| | | color: #000000; |
|---|
| | | text-align: center; |
|---|
| | | display: flex; |
|---|
| | | flex-direction:column; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | image{ |
|---|
| | | width: 86rpx; |
|---|
| | | height: 78rpx; |
|---|
| | | margin-bottom:20rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .box1-two{ |
|---|
| | | box-sizing: border-box; |
|---|
| | | padding:25rpx 0 10rpx; |
|---|
| | | display: flex; |
|---|
| | | flex-direction:column; |
|---|
| | | align-items:center; |
|---|
| | | justify-content:space-around; |
|---|
| | | 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: 80rpx; |
|---|
| | | 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:80rpx; |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .function-box2{ |
|---|
| | | width:100%; |
|---|
| | | box-sizing:border-box; |
|---|
| | | height: 443rpx;//374 + 44 + 距离 + 底部padding32 |
|---|
| | | padding:0 32rpx 15rpx; |
|---|
| | | // 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:374rpx; |
|---|
| | | 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; |
|---|
| | | image{ |
|---|
| | | width: 90rpx; |
|---|
| | | height:90rpx; |
|---|
| | | } |
|---|
| | | .box2-item-text{ |
|---|
| | | width:100%; |
|---|
| | | height: 40rpx; |
|---|
| | | font-weight: 300; |
|---|
| | | font-size: 28rpx; |
|---|
| | | color: #000000; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .advertisement-box{ |
|---|
| | | width:100%; |
|---|
| | | height: 188rpx; |
|---|
| | | padding:0 32rpx 10rpx; |
|---|
| | | box-sizing: border-box; |
|---|
| | | image{ |
|---|
| | | width:100%; |
|---|
| | | height: 178rpx; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .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> |
|---|
