|
@@ -1,263 +1,467 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-popup v-model="showUMessage" mode="bottom" border-radius="14" :closeable="true" >
|
|
|
- <view>
|
|
|
-
|
|
|
- <view class="UMessage">
|
|
|
- <view class="q1" >系统通知</view>
|
|
|
- <view class="q2 margin" >尊敬的优电用户,当前站点采用动态调能技术检测到区域用电负荷较高(实时负载率X%), 系统已为您智能匹配以下选项:</view>
|
|
|
- <view class="q3card q3card0 margin" @click="payValue=0" :class="{
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-popup v-model="showUMessage" mode="bottom" border-radius="14" :closeable="true">
|
|
|
+ <view>
|
|
|
+
|
|
|
+ <view class="UMessage">
|
|
|
+ <view class="q1">系统通知</view>
|
|
|
+ <view class="q2 margin">尊敬的优电用户,当前站点采用动态调能技术检测到区域用电负荷较高(实时负载率{{loadRate}}%)<br /> 系统已为您智能匹配以下选项:
|
|
|
+ </view>
|
|
|
+ <view class="q3card q3card0 margin" @click="payValue=0" :class="{
|
|
|
cardselect:payValue==0,
|
|
|
cardno:payValue!=0
|
|
|
- }" >
|
|
|
- <view class="cardgo">
|
|
|
- <view class="cardinfo">
|
|
|
- <img src="@/assets/img/riFill-check-fill.svg" alt="">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="title"> 前往附近站点 享受即时充电</view>
|
|
|
- <view class="q4" v-show="payValue==0">
|
|
|
- <view class="q41">最近<span class="q4span">荆鹏软件园充电站</span> </view>
|
|
|
- <view class="q41">距离 <span class="q4span" style="margin-right: 32rpx;">1.2km</span> 空闲桩 <span class="q4span">4个</span></view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="q3card q3card1 margin" @click="payValue=1" :class="{
|
|
|
- cardselect:payValue==1,
|
|
|
- cardno:payValue!=1
|
|
|
- }" >
|
|
|
- <view class="cardgo">
|
|
|
- <view class="cardinfo">
|
|
|
- <img src="@/assets/img/riFill-check-fill.svg" alt="">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="title">预约<span v-show="payValue==1"> 10:00 </span>充电</view>
|
|
|
-
|
|
|
- <view class="q4" >
|
|
|
- 点击查看[负荷预测曲线],了解最佳充电时段。
|
|
|
- </view>
|
|
|
- <view class="q4" v-show="payValue==1">
|
|
|
- 图
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="q5">再次感谢您对我们的信任,期待您的下次光临!</view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="q6">
|
|
|
- <view class="q6n1 q6n" @click="cancelBtn">取消充电</view>
|
|
|
- <view class=" q6n" :class="{
|
|
|
- 'q6n2 a':payValue==0,
|
|
|
- 'q6n3':payValue==1&&!payValue1bl,
|
|
|
- 'q6n2 b':payValue==1&&payValue1bl
|
|
|
- }"
|
|
|
- @click="confirmBtn">查找附近站点</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import * as API from '@/apis/umessage.js'
|
|
|
-
|
|
|
- export default {
|
|
|
- name:"UMessage",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- groupId:"8bc25585-4e5b-4895-a94e-431a23a095df",
|
|
|
- showUMessage:true,
|
|
|
- payValue:0,
|
|
|
- payValue1bl:false,//预约的时间是否合格
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- readyToTimingCharging(){
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.readyToTimingCharging({
|
|
|
- groupId:this.groupId
|
|
|
- }).then((res) => {
|
|
|
- uni.hideLoading();
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- loadPredictionCurve(){
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.loadPredictionCurve({
|
|
|
- groupId:this.groupId
|
|
|
- }).then((res) => {
|
|
|
- uni.hideLoading();
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
+ }">
|
|
|
+ <view class="cardgo">
|
|
|
+ <view class="cardinfo">
|
|
|
+ <img src="@/assets/img/riFill-check-fill.svg" alt="">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="title"> 前往附近站点 享受即时充电</view>
|
|
|
+ <view class="q4" v-show="payValue==0" v-if="searchNearStationData.station">
|
|
|
+ <view class="q41">最近<span class="q4span">{{searchNearStationData.station.name}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="q41">距离 <span class="q4span" style="margin-right: 32rpx;">1.2km</span> 空闲桩
|
|
|
+ <span class="q4span">{{searchNearStationData.availableDeviceNum}}个</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="q3card q3card1 margin" @click="payValue=1,loadPredictionCurve()" :class="{
|
|
|
+ cardselect:payValue==1,
|
|
|
+ cardno:payValue!=1
|
|
|
+ }">
|
|
|
+ <view class="cardgo">
|
|
|
+ <view class="cardinfo">
|
|
|
+ <img src="@/assets/img/riFill-check-fill.svg" alt="">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="title">预约<span v-show="payValue==1&&payTime"
|
|
|
+ style="color:#00B962;margin: 0 12rpx;">{{payTime}}</span>充电</view>
|
|
|
+ <view class="q4" style="margin: 12rpx 0;" v-if="payValue==1&&payTime">
|
|
|
+ 享 <span style="color: rgba(51, 51, 51, 1);font-weight: bold;margin: 0 8rpx;">{{price}}元/度</span> 充电优惠
|
|
|
+ </view>
|
|
|
+ <view class="q4">
|
|
|
+ 点击查看[负荷预测曲线],了解最佳充电时段。
|
|
|
+ </view>
|
|
|
+ <view class="q4" v-show="payValue==1">
|
|
|
+ <view id="UMessage_pieEcharts">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="q5">再次感谢您对我们的信任,期待您的下次光临!</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="q6">
|
|
|
+ <view class="q6n1 q6n" @click="bHide">取消充电</view>
|
|
|
+
|
|
|
+ <view class=" q6n q6n2" v-if="payValue==0" @click="toSearchPile">查找附近站点 </view>
|
|
|
+
|
|
|
+ <view class=" q6n q6n3" v-if="payValue==1&&personInfo.userType==1" @click="toLogin">登录后可预约充电</view>
|
|
|
+
|
|
|
+ <view class=" q6n q6n3" v-else-if="payValue==1&&!payValue1bl">{{payTime?'当前时间不可预约':'点击曲线预约充电'}}
|
|
|
+ </view>
|
|
|
+ <view class=" q6n q6n2" v-else-if="payValue==1&&payValue1bl" @click="confirmBtn">立即预约</view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/umessage.js'
|
|
|
+ import * as echarts from "echarts";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "UMessage",
|
|
|
+ props: {
|
|
|
+ stationId: "",
|
|
|
+ deviceNo: "",
|
|
|
+ channelNo: ""
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ groupId: "8bc25585-4e5b-4895-a94e-431a23a095df",
|
|
|
+ showUMessage: false,
|
|
|
+ payValue: 0,
|
|
|
+ payValue1bl: false, //预约的时间是否合格
|
|
|
+ payTime: "",
|
|
|
+ loadRate: 0,
|
|
|
+ ampereList: [],
|
|
|
+ myChart: null,
|
|
|
+ maxAmpere: 0,
|
|
|
+ personInfo: {},
|
|
|
+ price:"",
|
|
|
+ searchNearStationData: {},
|
|
|
+ cache: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ bShow() {
|
|
|
+ this.payValue = 0
|
|
|
+ this.payTime = ""
|
|
|
+ this.myChart = null
|
|
|
+ this.price='';
|
|
|
+ this.payValue1bl = false;
|
|
|
+ this.showUMessage = true;
|
|
|
+ this.findChargingGroup()
|
|
|
},
|
|
|
- findChargingGroup(){
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.findChargingGroup({
|
|
|
- groupId:this.groupId
|
|
|
- }).then((res) => {
|
|
|
- uni.hideLoading();
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- this.findChargingGroup()
|
|
|
- this.loadPredictionCurve()
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss" >
|
|
|
- .q6{
|
|
|
- border: 1px solid rgba(242, 242, 242, 1);
|
|
|
- padding:24rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- .q6n{
|
|
|
- padding:20rpx 0;
|
|
|
- border-radius: 50px;
|
|
|
-
|
|
|
- font-size: 34rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .q6n1{
|
|
|
- width: 30%;
|
|
|
- background-color: rgba(187, 187, 187, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
-
|
|
|
- }
|
|
|
- .q6n2{
|
|
|
- background-color: rgba(0, 185, 98, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
- .q6n3{
|
|
|
- width: 60%;
|
|
|
- background-color: rgba(187, 187, 187, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .UMessage{
|
|
|
- padding:40rpx;
|
|
|
- .q1{
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .margin{
|
|
|
- margin: 24rpx 0;
|
|
|
- }
|
|
|
- .q2{
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 32rpx;
|
|
|
-
|
|
|
- }
|
|
|
- .q5{
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 28rpx;
|
|
|
- //margin-bottom: 40rpx;
|
|
|
- }
|
|
|
- .q4{
|
|
|
-
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 28rpx;
|
|
|
- .q4span{
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- margin: 0 8rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .q41{
|
|
|
- margin: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .q3card {
|
|
|
- overflow: hidden;
|
|
|
- padding: 40rpx;
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cardselect {
|
|
|
- border-radius: 8px;
|
|
|
- border: 2px solid rgba(0, 185, 98, 1);
|
|
|
-
|
|
|
-
|
|
|
- .cardgo {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .cardinfo {
|
|
|
- background-color: #00b962;
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- position: absolute;
|
|
|
- top: -44rpx;
|
|
|
- right: -44rpx;
|
|
|
- border-radius: 0 0 0 8px;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 64rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cardno {
|
|
|
- border: 2px solid rgba(204, 204, 204, 1);
|
|
|
- border-radius: 8px;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- .cardgo {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .cardinfo {
|
|
|
- background-color: rgba(204, 204, 204, 1);
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- position: absolute;
|
|
|
- top: -44rpx;
|
|
|
- right: -44rpx;
|
|
|
- border-radius: 0 0 0 8px;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 64rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ toHTML(data,params){
|
|
|
+ console.log(params)
|
|
|
+ this.price=data.data.price;
|
|
|
+ var result = params[0].name + '<br>';
|
|
|
+ result += `${params[0].marker} ${params[0].seriesName}: ${params[0].value} A<br>`;
|
|
|
+ result += `${params[0].marker} 电价: ${data.data.price} 元/度<br>`;
|
|
|
+ return result
|
|
|
+ },
|
|
|
+ bHide() {
|
|
|
+ this.showUMessage = false;
|
|
|
+
|
|
|
+ },
|
|
|
+ toLogin() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ toSearchPile() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/searchPile/searchPile'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initLine() {
|
|
|
+ if (!this.myChart) {
|
|
|
+ this.myChart = echarts.init(document.getElementById('UMessage_pieEcharts'), null, {
|
|
|
+
|
|
|
+ height: uni.upx2px(300)
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //this.myChart.clear()
|
|
|
+
|
|
|
+ var _this = this
|
|
|
+ var data1 = []
|
|
|
+ var data2 = []
|
|
|
+ for (var i in this.ampereList) {
|
|
|
+ var item = this.ampereList[i]
|
|
|
+ var key = item.createTime.split(' ')[1]
|
|
|
+ key = key.substring(0, 5)
|
|
|
+ data1.push(key)
|
|
|
+ data2.push(item.ampere)
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+
|
|
|
+ top: '25px',
|
|
|
+ left: '30px',
|
|
|
+ right: '20px',
|
|
|
+ bottom: '25px',
|
|
|
+ // containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function(params, ticket, callback) {
|
|
|
+
|
|
|
+ _this.payTime=params[0].name ;
|
|
|
+
|
|
|
+ if( params[0].data>_this.maxAmpere){
|
|
|
+ _this.payValue1bl=false;
|
|
|
+ }else{
|
|
|
+ _this.payValue1bl=true;
|
|
|
+ }
|
|
|
+
|
|
|
+ API.timePointPrice({
|
|
|
+ deviceNo: _this.deviceNo,
|
|
|
+ timePoint: params[0].name
|
|
|
+ }).then((res) => {
|
|
|
+
|
|
|
+ callback(ticket, _this.toHTML(res,params));
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ return '加载中...';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: data2,
|
|
|
+ type: 'line',
|
|
|
+ name: '电流',
|
|
|
+ markLine: {
|
|
|
+ data: [{
|
|
|
+ name: '参考线',
|
|
|
+ yAxis: this.maxAmpere, // 参考线的值
|
|
|
+
|
|
|
+ lineStyle: {
|
|
|
+ color: 'red',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ };
|
|
|
+ console.log(option)
|
|
|
+ this.myChart.setOption(option);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ readyToTimingCharging() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ var submitForm = {
|
|
|
+ deviceNo: this.deviceNo,
|
|
|
+ channelNo: this.channelNo,
|
|
|
+ startTime: this.payTime
|
|
|
+ }
|
|
|
+ API.readyToTimingCharging(submitForm).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.showUMessage = false
|
|
|
+ uni.showModal({
|
|
|
+ title: '预约成功',
|
|
|
+ showCancel: false,
|
|
|
+ content: "预约成功,拔枪将会自动取消预约"
|
|
|
+ })
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadPredictionCurve() {
|
|
|
+ if (this.myChart) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.loadPredictionCurve({
|
|
|
+ deviceNo: this.deviceNo
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log(res)
|
|
|
+ this.ampereList = res.data.ampereList
|
|
|
+ this.maxAmpere = res.data.maxAmpere
|
|
|
+ this.initLine()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ confirmBtn() {
|
|
|
+ this.readyToTimingCharging()
|
|
|
+ },
|
|
|
+ fetchAdditionalValue() {
|
|
|
+
|
|
|
+ },
|
|
|
+ searchNearStation() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.searchNearStation({
|
|
|
+ stationId: this.stationId
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log(res)
|
|
|
+ this.searchNearStationData = res.data;
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ findChargingGroup() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.findChargingGroup({
|
|
|
+ deviceNo: this.deviceNo
|
|
|
+ }).then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log(res)
|
|
|
+ this.loadRate = res.data.loadRate
|
|
|
+ this.searchNearStation()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.personInfo = this.carhelp.getPersonInfo()
|
|
|
+ this.cache = new Map()
|
|
|
+
|
|
|
+ //this.searchNearStation()
|
|
|
+ //this.loadPredictionCurve()
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .q6 {
|
|
|
+ border: 1px solid rgba(242, 242, 242, 1);
|
|
|
+ padding: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .q6n {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-radius: 50px;
|
|
|
+
|
|
|
+ font-size: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .q6n1 {
|
|
|
+ width: 30%;
|
|
|
+ background-color: rgba(187, 187, 187, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .q6n2 {
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .q6n3 {
|
|
|
+ width: 60%;
|
|
|
+ background-color: rgba(187, 187, 187, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .UMessage {
|
|
|
+ padding: 30rpx 40rpx;
|
|
|
+
|
|
|
+ .q1 {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .margin {
|
|
|
+ margin: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .q2 {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .q5 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ //margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .q4 {
|
|
|
+
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .q4span {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ margin: 0 8rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .q41 {
|
|
|
+ margin: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .q3card {
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 30rpx 40rpx;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cardselect {
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 2px solid rgba(0, 185, 98, 1);
|
|
|
+
|
|
|
+
|
|
|
+ .cardgo {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .cardinfo {
|
|
|
+ background-color: #00b962;
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: -44rpx;
|
|
|
+ right: -44rpx;
|
|
|
+ border-radius: 0 0 0 8px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 64rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cardno {
|
|
|
+ border: 2px solid rgba(204, 204, 204, 1);
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .cardgo {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .cardinfo {
|
|
|
+ background-color: rgba(204, 204, 204, 1);
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: -44rpx;
|
|
|
+ right: -44rpx;
|
|
|
+ border-radius: 0 0 0 8px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 64rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|