smartmeter-app/pages/index/index.vue
2024-05-13 02:34:58 +08:00

1442 lines
32 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<u-navbar :is-back="false" :title="tittxt" :border-bottom="false" :background="bgc" title-color='#2E4975'
title-size='44' height='44' id="navbar">
</u-navbar>
<!-- <view class="" @click="scanQRCode()">
扫码添加
</view> -->
<u-mask :show="showtip" @click="show = false" :z-index='1000'/>
<view class="tip_box" v-if="showtip">
<view class="top">
<view class="txt">
系统检测到您的设备未联网或者为蓝牙版本,金额充值失败,请靠近设备进行蓝牙充值
</view>
<!-- <view class="txt">
</view> -->
</view>
<view class="bot">
<view class="bot_left" @click="showtip=false">
取消
</view>
<view class="bot_right" @click="tocz()">
蓝牙充值
</view>
</view>
</view>
<view class="zhuhu" v-if="userType=='00'&&deviceInfo && sbflag">
<view class="card1">
<view class="top">
<view class="left">
设备
</view>
<view class="right">
<image class="imgs" src="https://api.ccttiot.com/smartmeter/img/static/uBBUe4xESiOEfxYEe0qQ"
mode="" style="margin-right: 20rpx;" @click="switchs"></image>
<image class="img1" src="https://api.ccttiot.com/smartmeter/img/static/uGvS4RQvbw7OOfhzy6xf"
mode="" style="margin-right: 30rpx;" @click="opendevice()"></image>
<image class="img1" src="https://api.ccttiot.com/smartmeter/img/static/uNEKwe2WKsJdtQzOdEay"
mode="" @click="toewm()"></image>
</view>
</view>
<view class="mid">
<view class="mid_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/uoQO0pUZ1UHcW5uVKkuR" mode=""></image>
</view>
<view class="mid_right">
<view class="mid_top">
{{ deviceInfo.deviceName }}
</view>
<view class="mid_bot">
<view class="txt" v-if="deviceInfo">电表号:{{ deviceInfo.deviceId }}</view>
<div class="tip" v-if="deviceInfo.onlineStatus==1">在线</div>
<div class="tip" v-if="deviceInfo.onlineStatus==0">离线</div>
<div class="tip" v-if="deviceInfo.powerStatus==0">断电</div>
<div class="tip" v-if="deviceInfo.powerStatus==1">正常</div>
</view>
</view>
</view>
<view class="bot">
<view class="bot_left">
<view class="echarts">
<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
</uni-ec-canvas>
</view>
</view>
<view class="bot_right">
<view class="cont">
<view class="tit">
{{deviceInfo.totalElectriQuantity}}KWH
</view>
<view class="txt">
总用电量
</view>
</view>
<view class="cont" style="margin-left: 60rpx;">
<view class="tit">
{{deviceInfo.price}}元/度
</view>
<view class="txt">
电价
</view>
</view>
</view>
</view>
</view>
<view class="card2">
<view class="tit">实时</view>
<view class="cont_box">
<view class="cont">
<view class="top">{{deviceInfo.realTimePower}}KW</view>
<view class="bot">实时功率</view>
</view>
<view class="cont" style="width: 70rpx;">
<view class="top">{{deviceInfo.electricity}}A</view>
<view class="bot">电流</view>
</view>
<view class="cont">
<view class="top">{{deviceInfo.voltage}}V</view>
<view class="bot">电压</view>
</view>
</view>
</view>
<view class="card3">
<view class="tit">其他</view>
<view class="cont_box">
<!-- <view class="cont">
<view class="top">
<image src="@/static/sz.png" mode=""></image>
</view>
<view class="bot">其他设置</view>
</view> -->
<!-- <view class="cont" style="width: 58rpx;">
<view class="top">
<image src="https://api.ccttiot.com/smartmeter/img/static/u8QfFAKCq8wE32dFA9Go" mode="" style="width: 58rpx;height: 60rpx;"></image>
</view>
<view class="bot">异常</view>
</view> -->
<!-- <view class="cont" @click="tochaobiao">
<view class="top">
<image src="https://api.ccttiot.com/smartmeter/img/static/uFzwAtuoU63FHMXE2P6I" mode=""></image>
</view>
<view class="bot">抄表</view>
</view> -->
<view class="cont" @click="topay()">
<view class="top">
<image src="https://api.ccttiot.com/smartmeter/img/static/uFzwAtuoU63FHMXE2P6I" mode="">
</image>
</view>
<view class="bot">充值</view>
</view>
<view class="cont" @click="towifi(deviceInfo.mac)" >
<view class="top">
<image src="https://api.ccttiot.com/smartmeter/img/static/ujdDETrcV5NhdC20YOLi" mode=""></image>
</view>
<view class="bot">配网</view>
</view>
</view>
</view>
<!-- <view class="button" @click="topay()">电费充值</view>
<view class="zhanwei" style="width: 100%;height: 300rpx;">
</view> -->
</view>
<!-- 房东 -->
<view class="fd" v-if="userType=='01' && sbflag">
<view class="fd_top">
<view class="fd_tit" v-for="(item,index) in titlist" :key="index" :class="index==curtitidx?'act1':''"
@click="changeidx(index)">
{{item}}
</view>
<view class="right">
<view class="fd_set" @click="show = true">
+
</view>
<view class="fd_set iconfont icon-liebiao" @click="showfz = true">
</view>
</view>
</view>
<u-mask :show="showfz"></u-mask>
<view class="fz" v-show="showfz">
<view class="fz_top">
<view class="iconfont icon-shanchu" @click="showfz=false">
</view>
<view class="tit">
设备分组
</view>
<view class="txt" @click="tosetpage()">
管理
</view>
</view>
<view class="card_cont">
<view class="cards" @click="changeGp(1)">
<view class="txt">
全部
</view>
<view class="num">
{{total}}
</view>
</view>
<view class="cards" v-for="(item,index) in groupList" :key="index" @click="changeGp(item)">
<view class="txt">
{{item.groupName}}
</view>
<view class="num">
{{item.deviceCount}}
</view>
</view>
<view class="zhanwei" style="width: 100%;height: 100rpx;">
</view>
</view>
</view>
<view class="warp_box">
<swiper class="swiper" style="height: 150vh;" :current='curtitidx' @change="swiperchange">
<swiper-item>
<view class="swiper-item ">
<view class="card_box" @click="todetail(item.deviceId)" v-for="(item,index) in deviceList"
:key="index">
<view class="card">
<view class="card_left">
<view class="card_left_tit">
{{item.deviceName}}电表
</view>
<view class="card_left_sta">
<image
src="https://api.ccttiot.com/smartmeter/img/static/uZSiz7XWpxcXEkl6sTwj"
mode=""></image>
<view class="sta_txt" v-if="item.status==3">
剩余电量{{item.surplusElectriQuantity}}
</view>
<view class="sta_txt" v-if="item.status==2" style="color:#95989D ;">
已欠费
</view>
<view class="sta_txt" v-if="item.status==1" style="color:#FF4F4F ;">
欠费已断电
</view>
</view>
<view class="card_left_no">
电表号:{{item.deviceId}}
</view>
</view>
<view class="card_right">
<image src="https://api.ccttiot.com/smartmeter/img/static/uoQO0pUZ1UHcW5uVKkuR"
mode=""></image>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item ">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item ">C</view>
</swiper-item>
</swiper>
</view>
</view>
<view class="noDevice" v-if="addflag">
<view class="img_box">
<image src="https://api.ccttiot.com/smartmeter/img/static/uD3h9FDe458MjVW5H7VB" mode=""></image>
<view class="tps">
暂无设备
</view>
</view>
<!-- <view class="addbutn" v-if="userType=='00'">
扫码添加
</view> -->
<view class="addbutn" @click="show = true">
添加方式
</view>
<view class="tip">需要添加设备后方可使用</view>
</view>
<tab-bar :indexs='0'></tab-bar>
<!-- <u-popup v-model="show" mode="bottom" border-radius="14" width="750rpx" height="464rpx" closeable="true"
close-icon-pos="top-left">
<view class="popup-content">
<text class="add">添加方式</text>
<text class="saoma">扫码添加</text>
<text class="sousuo" @click="btnserch">搜索附近设备添加</text>
</view>
</u-popup> -->
<view class="dd">
<u-select v-model="show" :list="list" title='添加方式' @confirm="confirm"></u-select>
</view>
</view>
</template>
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts'
let chart = null
export default {
components: {
uniEcCanvas
},
data() {
return {
ec: {
lazyLoad: true
},
bgc: {
backgroundColor: "#F7FAFE",
},
deviceInfo: {},
loadings: false,
info: '',
tittxt: "首页",
titlist: [
"全部",
"电表",
"水表",
],
curtitidx: 0,
background: ['color1', 'color2', 'color3'],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
deviceList: [],
userType: '',
addflag: false,
sbflag: true,
show: false,
list: [{
value: '1',
label: '扫码添加'
},
{
value: '2',
label: '搜索附近设备添加'
}
],
qrResult: '',
showfz: false,
groupList: {},
total: '',
gps: {},
mac: '',
deviceId:'',
showtip:false,
orderinfo:[]
}
},
onShow() {
this.logins();
this.getgroup();
this.deviceId=uni.getStorageSync('deviceIds');
this.name=uni.getStorageSync('name');
console.log(this.deviceId,'aaa',this.name);
let that = this; // 将外部的 this 绑定到 that 上
// let options= JSON.parse(storedData);
setTimeout(() => {
if (this.userType === '01') { // 注意 '01' 是一个字符串
if (uni.getStorageSync('mac')) {
this.mac = uni.getStorageSync('mac');
uni.getLocation({
type: 'wgs84',
success: function(lb) {
console.log('位置信息', lb);
console.log('当前位置的经度:' + lb.longitude);
console.log('当前位置的纬度:' + lb.latitude);
that.gps.lat = lb.latitude;
that.gps.lon = lb.longitude;
that.tobind()
},
fail: function(error) {
console.error('获取位置信息失败:', error);
that.gps.lat = 0;
that.gps.lon = 0;
that.tobind()
}
});
}
}else{
setTimeout(() => {
this.$refs.canvas.init(this.initChart)
}, 500);
if (uni.getStorageSync('billNo')) {
let billNo= uni.getStorageSync('billNo')
this.$u.get(`/app/bill/recharge/${billNo}/bluetoothSuccess`).then((res) => {
if(res.code==200){
uni.removeStorageSync('billNo');
this.showtip=false
this.order()
}
// console.log(this.deviceInfo,'this.deviceInfo');
});
}
}
}, 2000);
},
methods: {
tocz(){
this.showtip=false
uni.navigateTo({
url: '/pages/device/czDevice?orderinfo=' + JSON.stringify(this.orderinfo)
});
},
checkModelTags(modelTags) {
return modelTags && modelTags.some(tag => tag === 2);
},
order(){
console.log('调用了');
this.$u.get("/app/bill/recharge/device/fail/list").then((res) => {
if(res.data.length!=0){
this.showtip=true
this.orderinfo=res.data[0]
}else{
this.orderinfo=null
}
// console.log(this.deviceInfo,'this.deviceInfo');
});
},
towifi(mac){
uni.navigateTo({
url: '/pages/device/wifiDevice?mac=' + mac
})
},
tobind(){
this.$u.put(`/app/device/bind/${this.mac}`, this.gps).then((res) => {
if (res.code === 200) {
let systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'android') {
// 当前设备是 Android
} else if (systemInfo.platform === 'ios') {
console.log('aaaaaaaaaaaa');
uni.navigateTo({
url: '/pages/wifilist/index?deviceId=' + this.deviceId + '&name=' + this.name
})
}
uni.showToast({
title: '绑定成功',
icon: 'none',
duration: 2000
});
uni.removeStorageSync('mac');
uni.removeStorageSync('deviceIds');
uni.removeStorageSync('name');
this.getDeviceList(); // 使用 that 而不是 this
} else {
// 处理失败情况
}
});
},
opendevice() {
let stause = 0
if (this.deviceInfo.powerStatus == 1) {
stause = 0
} else {
stause = 1
}
console.log(stause, 'stausestause');
this.$u.put(`/app/device/${this.deviceInfo.deviceId}/changePower?status=` + stause).then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
// this.groupList=res.rows
setTimeout(() => {
this.getdevice()
}, 2000)
// this.loadings=true
// this.initChart()
} else {
uni.showToast({
title: res.msg,
icon: 'none'
});
}
});
},
getgroup() {
this.$u.get("/app/group/list").then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.groupList = res.rows
// this.loadings=true
// this.initChart()
}
});
},
changeGp(item, index) {
this.showfz = false
if (item == 1) {
this.getDeviceList()
} else {
this.$u.get("/app/device/list?groupId=" + item.groupId).then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
// console.log(res,'resres');
this.deviceList = res.rows
// this.loadings=true
// this.initChart()
}
});
}
},
tosetpage() {
this.showfz = false
uni.navigateTo({
url: '/pages/shebei/fenzu'
})
},
// 点击更换用户模式
confirm(e) {
// console.log(e,'eeeeeeeeee');
let type = e[0].value
if (type == '1') {
this.scanQRCode()
} else if (type == '2') {
uni.navigateTo({
url: '/pages/device/index'
})
}
// console.log(e);
// this.mode = e[0].label
// this.gettype()
},
scanQRCode() {
uni.scanCode({
onlyFromCamera: true,
scanType: ['qrCode'],
success: res => {
console.log('扫描结果:', res);
this.qrResult = res.result; // 将扫描结果存储在数据中
},
fail: err => {
console.error('扫描失败:', err);
uni.showToast({
title: '扫描失败',
icon: 'none'
});
}
});
},
logins() {
if (uni.getStorageSync('userType')) {
this.userType = uni.getStorageSync('userType')
this.userType = '01'
if (this.userType == '01') {
this.getDeviceList()
} else if (this.userType == '00') {
this.getdevice()
}
} else {
}
this.getuserinfo()
},
// 点击搜索附近设备进行跳转
btnserch() {
uni.navigateTo({
url: '/pages/device/index'
})
},
topay() {
uni.navigateTo({
url: '/page_user/czindex?price=' + this.deviceInfo.price + '&tenantBearServiceFee=' + this
.deviceInfo.tenantBearServiceFee + '&deviceId=' + this.deviceInfo.deviceId
})
},
initChart(canvas, width, height, canvasDpr) {
let that = this
console.log(canvas, width, height, canvasDpr)
let value = 100;
let value2 = this.deviceInfo.totalElectriQuantity
const option = {
// backgroundColor:"#061740",
// title: {
// show: false,
// text: `历史请求满意度`, // 图表标题
// x: 'center',
// y: '20',
// textStyle: {
// color: '#333', //'#fff',
// fontSize: 20,
// },
// },
series: [{
type: 'pie', // 饼图类型
radius: ['98%', '70%'], // 饼图半径,第一个值是内半径,第二个值是外半径
silent: true,
clockwise: true,
startAngle: 90, // 起始角度
z: 0,
zlevel: 0,
data: [{
value: value,
name: '占比', // 数据项名称
itemStyle: {
normal: {
color: '#8883F0', // 数据项颜色
},
},
label: {
normal: {
position: 'center',
formatter: ` {a|${value2}}\n\n{b|剩余电量}`, // 标签内容格式
rich: {
a: {
fontSize: 15,
fontWeight: '700',
color: '#333',
},
b: {
fontSize: 11,
color: '#888',
},
},
},
},
},
// {
// value: 100 - value2,
// name: '',
// label: {
// normal: {
// show: false,
// },
// },
// itemStyle: {
// normal: {
// color: '#173164',
// },
// },
// },
],
},
// {
// type: 'gauge', // 仪表盘类型
// radius: '130%', // 仪表盘半径,占图表容器的百分比
// center: ['50%', '50%'], // 仪表盘中心位置
// startAngle: 359,
// endAngle: 359.9,
// splitNumber: 2, // 刻度分割段数
// hoverAnimation: true,
// axisTick: {
// show: true, // 是否显示刻度线
// length: 10, // 刻度线长度
// lineStyle: {
// color: 'auto',
// width: 1,
// },
// },
// splitLine: {
// length: 0, // 刻度线分隔线长度
// lineStyle: {
// width: 1,
// color: '#061740',
// },
// },
// axisLabel: {
// show: false, // 是否显示刻度标签
// },
// pointer: {
// show: false, // 是否显示指针
// },
// axisLine: {
// lineStyle: {
// opacity: 0,
// },
// },
// detail: {
// show: false, // 是否显示仪表盘详情
// },
// data: [{
// value: 0,
// name: '',
// }, ],
// },
],
};
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
console.log(chart);
// option.series[0].data = that.chartData
canvas.setChart(chart)
chart.setOption(option)
return chart
},
// 获取设备详情
getDevice() {
this.$u.get("app/device/1").then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.deviceInfo = res.data
// console.log(this.deviceInfo, 1111);
this.loadings = true
}
});
},
getuserinfo() {
this.$u.get("/app/user/userInfo").then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
uni.setStorageSync('userType', res.data.userType)
this.userType = res.data.userType
if (this.userType == '01') {
this.getDeviceList()
} else if (this.userType == '00') {
this.getdevice()
}
} else {
this.jmlogin()
}
});
},
jmlogin() {
let taht = this
wx.login({
success(res) {
if (res.code) {
// console.log('登录!', res);
let data = {
wxOpenId: res.code,
};
taht.$u.post('/app/auth/wxLogin', data).then(res => {
if (res.code == 10003) {
uni.navigateTo({
url: '/pages/login/login'
})
} else if (res.code == 200) {
// console.log("老用户登录",res.data)
uni.setStorageSync('token', res.token);
taht.logins()
}
});
}
},
});
},
getDeviceList() {
this.$u.get("/app/device/list").then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.deviceList = res.rows
this.total = res.total
console.log(this.deviceList, '10101010');
if (this.deviceList == '') {
this.addflag = true
this.sbflag = false
} else {
this.addflag = false
this.sbflag = true
}
// this.addflag = false
// this.sbflag = true
}
});
},
swiperchange(e) {
this.curtitidx = e.detail.current
// console.log(e, 'aaaa');
},
getdevice() {
this.$u.get("/app/device/tenant").then((res) => {
this.deviceInfo = res.rows.find(item => item.isDefault === true);
if (this.deviceInfo == undefined) {
this.addflag = true
this.sbflag = false
} else {
this.addflag = false
this.sbflag = true
}
uni.setStorageSync('deviceId', this.deviceInfo.deviceId);
// this.initChart()
this.order()
// console.log(this.deviceInfo,'this.deviceInfo');
});
},
changeidx(index) {
this.curtitidx = index
},
toewm() {
uni.navigateTo({
url: "/pages/shebei/ewm"
})
},
toydfx() {
uni.navigateTo({
url: "/pages/shebei/eletj"
})
},
todetail(id) {
uni.navigateTo({
url: "/pages/shebei/sbdetail?id=" + id
})
},
// 跳转到抄表
tochaobiao() {
uni.navigateTo({
url: '/page_user/cbRecord'
})
},
// 点击切换设备
switchs() {
uni.navigateTo({
url: '/page_user/switchs'
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #F7FAFE;
}
.page {
.tip_box{
position: fixed;
left: 72rpx;
top: 788rpx;
width: 610rpx;
// height: 282rpx;
background: #F7FAFE;
border-radius: 30rpx 30rpx 30rpx 30rpx;
z-index: 10000000;
.top{
padding: 52rpx 38rpx 42rpx 36rpx;
.txt{
width: 100%;
text-align: center;
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
}
}
.bot{
border-top: 2rpx solid #D8D8D8 ;
display: flex;
flex-wrap: nowrap;
height: 100%;
.bot_left{
width: 50%;
height: 98rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
}
.bot_right{
width: 50%;
height: 98rpx;
display: flex;
align-items: center;
justify-content: center;
border-left: 2rpx solid #D8D8D8 ;
font-weight: 500;
font-size: 36rpx;
color: #4C97E7;
}
}
}
.noDevice {
margin-top: 432rpx;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
.img_box {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
image {
width: 252rpx;
height: 252rpx;
}
.tps {
margin-top: 4rpx;
width: 100%;
text-align: center;
font-weight: 700;
font-size: 32rpx;
color: #BDBCBC;
}
}
.addbutn {
margin-top: 32rpx;
display: flex;
align-items: center;
justify-content: center;
width: 266rpx;
height: 96rpx;
background: #8883F0;
border-radius: 16rpx;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
}
.tip {
margin-top: 30rpx;
width: 100%;
text-align: center;
font-weight: 400;
font-size: 40rpx;
color: #BDBCBC;
}
}
.zhuhu {
margin-top: 20rpx;
padding: 0 40rpx;
.card1 {
padding: 34rpx 0 0 40rpx;
width: 670rpx;
height: 583rpx;
background: #FFFFFF;
box-shadow: 0rpx 14rpx 35rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx 28rpx 28rpx 28rpx;
.top {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.left {
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.right {
margin-right: 56rpx;
.imgs {
width: 94rpx;
height: 94rpx;
vertical-align: bottom;
}
.img1 {
width: 76rpx;
height: 76rpx;
}
}
}
.mid {
margin-top: 54rpx;
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
.mid_left {
image {
width: 37rpx;
height: 98rpx;
}
}
.mid_right {
margin-left: 40rpx;
display: flex;
flex-wrap: wrap;
.mid_top {
width: 100%;
font-size: 42rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
.mid_bot {
display: flex;
flex-wrap: nowrap;
align-items: center;
.txt {
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #95989D;
}
.tip {
display: flex;
align-items: center;
justify-content: center;
margin-left: 19rpx;
width: 38rpx;
height: 23rpx;
background: rgba(204, 204, 204, 0);
opacity: 1;
border: 2rpx solid #8883F0;
border-radius: 40rpx;
font-size: 14rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
}
}
}
.bot {
margin-top: 83rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.bot_left {
width: 210rpx;
height: 190.14rpx;
margin-right: 34rpx;
.echarts {
width: 210rpx;
height: 190.14rpx;
}
}
.bot_right {
// margin-top: 50rpx;
display: flex;
flex-wrap: nowrap;
.cont {
.tit {
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 600;
color: #262B37;
line-height: 49rpx;
}
.txt {
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
}
}
.card2 {
padding-top: 40rpx;
margin-top: 24rpx;
width: 670rpx;
height: 254rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx;
.tit {
margin-left: 40rpx;
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.cont_box {
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
text-align: center;
.cont {
width: 110rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
.top {
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
width: 110rpx;
}
.bot {
margin-top: 20rpx;
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #262B37;
}
}
}
}
.card3 {
padding-top: 40rpx;
margin-top: 24rpx;
width: 670rpx;
height: 318rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53, 140, 255, 0.1);
border-radius: 28rpx;
.tit {
margin-left: 40rpx;
font-size: 35rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #8883F0;
}
.cont_box {
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
// justify-content: space-around;
padding-left: 50rpx;
box-sizing: border-box;
.cont {
width: 100rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-right: 40rpx;
.top {
image {
width: 56rpx;
height: 56rpx;
}
}
.bot {
margin-top: 28rpx;
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #808080;
}
}
}
}
.button {
margin-left: 76rpx;
margin-top: 178rpx;
display: flex;
justify-content: center;
align-items: center;
width: 520rpx;
height: 104rpx;
background: #8883F0;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
border-radius: 52rpx 52rpx 52rpx 52rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
}
.fd {
margin-top: 20rpx;
padding: 0 40rpx;
padding-bottom: 200rpx;
height: 100%;
.fz {
margin: 0 -40rpx;
position: fixed;
bottom: 0;
width: 750rpx;
height: 1152rpx;
background: #F7FAFE;
border-radius: 30rpx 30rpx 0 0;
z-index: 10071;
.fz_top {
margin: 18rpx 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.icon-shanchu {
margin-left: 40rpx;
font-size: 50rpx;
}
.tit {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
.txt {
margin-right: 40rpx;
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #2A82E4;
}
}
.card_cont {
width: 750rpx;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
height: 1030rpx;
overflow-y: auto;
overflow-x: hidden;
.cards {
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
width: 682rpx;
border-radius: 30rpx;
height: 114rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
.txt {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
.num {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
}
}
}
.fd_top {
display: flex;
flex-wrap: nowrap;
// justify-content: space-between;
align-items: center;
.fd_tit {
// width: 40%;
margin-right: 20rpx;
font-size: 36rpx;
font-weight: 400;
color: #95989D;
}
.act1 {
color: #000000;
}
.right {
margin-left: auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
.fd_set {
// margin-bottom: 10rpx;
// margin-left: 200rpx;
// margin-left: auto;
font-size: 60rpx;
}
.icon-liebiao {
margin-top: 10rpx;
margin-left: 20rpx;
font-size: 40rpx;
}
}
}
.swiper {
.swiper-item {
height: 100%;
.card_box {
margin-top: 34rpx;
display: flex;
flex-wrap: wrap;
.card {
display: flex;
// align-items: center;
margin-top: 20rpx;
width: 658rpx;
height: 282rpx;
background: #fff;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(255, 255, 255, 0);
border-radius: 24rpx 24rpx 24rpx 24rpx;
.card_left {
width: 310rpx;
margin-top: 46rpx;
margin-left: 50rpx;
.card_left_tit {
font-size: 44rpx;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 500;
color: #8883F0;
}
.card_left_sta {
margin-top: 15rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
image {
width: 23.32rpx;
height: 36.47rpx;
}
.sta_txt {
margin-left: 15rpx;
color: #262B37;
font-size: 24rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
}
}
.card_left_no {
margin-top: 15rpx;
font-size: 24rpx;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
color: #95989D;
}
}
.card_right {
margin-top: 60rpx;
margin-left: auto;
margin-right: 94rpx;
image {
width: 63.04rpx;
height: 167.48rpx;
}
}
}
}
}
}
}
}
.popup-content {
text-align: center;
text {
display: block;
}
.add {
margin-top: 10rpx;
font-size: 36rpx;
color: #000000;
line-height: 80rpx;
}
.saoma {
margin-top: 68rpx;
font-size: 40rpx;
color: #000000;
line-height: 54rpx;
border: 1px solid #ccc;
padding: 30rpx 0;
box-sizing: border-box;
}
.sousuo {
margin-top: 46rpx;
font-size: 40rpx;
color: #000000;
line-height: 54rpx;
border: 1px solid #ccc;
padding: 30rpx 0;
box-sizing: border-box;
}
}
</style>