style: 计划列表格式化

This commit is contained in:
yangzhe 2025-04-10 09:39:43 +08:00
parent 8ea14a72c9
commit 1c5771d6ed
1 changed files with 136 additions and 132 deletions

View File

@ -40,7 +40,7 @@
</view>
</view>
</view>
<view class="arealist">
<view class="arealist" v-if="dataInfo.areas.length > 0">
<view class="block-info" v-for="item in dataInfo.areas" :key="item.id">
<view v-if="!item.isCompleted" class="schedule schedule-wait"
>待保洁</view
@ -67,12 +67,11 @@
</view>
</view>
</view>
<button @click="nfcResFn">
{{errorShow}}
</button>
<button @click="nfcResFn(true)">刷卡成功</button>
<button @click="nfcResFn(false)">刷卡失败</button>
<!-- nfc刷卡成功弹窗 -->
<u-popup v-model="successShow" mode="center" :round="30" >
<view class="success-box">
<u-popup v-model="successShow" mode="center" :round="30">
<view class="success-box">
<view class="box-content">
<view class="logo"></view>
<view class="content-title">刷卡成功</view>
@ -81,11 +80,11 @@
<view class="btn-success" @click="uploadFn">上传图片</view>
</view>
</view>
</view>
</u-popup>
</view>
</u-popup>
<!-- nfc刷卡失败弹窗 -->
<u-popup v-model="errorShow" mode="center" :round="30" >
<view class="error-box">
<u-popup v-model="errorShow" mode="center" :round="30">
<view class="error-box">
<view class="box-content">
<view class="logo"></view>
<view class="content-title">刷卡失败</view>
@ -94,8 +93,8 @@
<view class="btn-success" @click="exceptionReportFn">异常上报</view>
</view>
</view>
</view>
</u-popup>
</view>
</u-popup>
</view>
</template>
@ -141,11 +140,12 @@ export default {
paramsId: "",
//
successShow:false,
successShow: false,
//
errorShow:false,
errorShow: false,
dataInfo: {
planName: "",
areas: [],
},
};
},
@ -173,29 +173,33 @@ export default {
},
methods: {
minutesToTime,
nfcResFn(data){
if(false){
console.log('%c%s', 'color:red', 'nfc刷卡成功');
minutesToTime,
nfcResFn(data) {
if (data) {
console.log("%c%s", "color:red", "nfc刷卡成功");
this.successShow = true;
}else{
console.log('%c%s', 'color:red', '刷卡失败');
} else {
console.log("%c%s", "color:red", "刷卡失败");
this.errorShow = true;
}
},
//
uploadFn(){
console.log('%c%s', 'color:red', '上传图片');
uni.navigateTo({
url: "/pages/index/uploadPhoto",
});
uploadFn() {
console.log("%c%s", "color:red", "上传图片");
uni.navigateTo({
url: "/pages/index/uploadPhoto",
});
},
//
exceptionReportFn(){
console.log('%c%s', 'color:red', '异常上报');
exceptionReportFn() {
console.log("%c%s", "color:red", "异常上报");
uni.navigateTo({
url: "/pages/index/list",
});
},
openFn(){},
closeFn(){},
openFn() {},
closeFn() {},
changeTab(i) {
this.selectIdx = i;
@ -363,128 +367,128 @@ export default {
}
}
}
.success-box{
.success-box {
// overflow:hidden;
width:650rpx;
padding-top:50rpx;
background-color:transparent;
.box-content{
height:450rpx;
width: 650rpx;
padding-top: 50rpx;
background-color: transparent;
.box-content {
height: 450rpx;
background-color: #ffffff;
background: linear-gradient(to bottom, #A7DAFC, white 60%, white);
border-radius:30rpx;
background: linear-gradient(to bottom, #a7dafc, white 60%, white);
border-radius: 30rpx;
// border:1px solid red;
position:relative;
.logo{
position:absolute;
top:-50rpx;
left:50%;
transform:translateX(-50%);
width:200rpx;
height:200rpx;
background-color:red;
position: relative;
.logo {
position: absolute;
top: -50rpx;
left: 50%;
transform: translateX(-50%);
width: 200rpx;
height: 200rpx;
background-color: red;
}
.content-title{
position:absolute;
top:40%;
width:100%;
color:black;
font-size:40rpx;
text-align:center;
.content-title {
position: absolute;
top: 40%;
width: 100%;
color: black;
font-size: 40rpx;
text-align: center;
}
.btn-box{
position:absolute;
bottom:10%;
width:100%;
display:flex;
justify-content:space-evenly;
.btn-cancel{
width:200rpx;
height:70rpx;
background-color:#F3F6F7;
border-radius:50rpx;
display:flex;
align-items:center;
justify-content:center;
font-size:30rpx;
color:#32353B;
.btn-box {
position: absolute;
bottom: 10%;
width: 100%;
display: flex;
justify-content: space-evenly;
.btn-cancel {
width: 200rpx;
height: 70rpx;
background-color: #f3f6f7;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #32353b;
}
.btn-success{
width:200rpx;
height:70rpx;
background-color:#4278F4;
border-radius:50rpx;
display:flex;
align-items:center;
justify-content:center;
font-size:30rpx;
color:white;
.btn-success {
width: 200rpx;
height: 70rpx;
background-color: #4278f4;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: white;
}
}
}
}
.error-box{
.error-box {
// overflow:hidden;
width:650rpx;
padding-top:50rpx;
background-color:transparent;
.box-content{
height:450rpx;
width: 650rpx;
padding-top: 50rpx;
background-color: transparent;
.box-content {
height: 450rpx;
background-color: #ffffff;
background: linear-gradient(to bottom, #A7DAFC, white 60%, white);
border-radius:30rpx;
background: linear-gradient(to bottom, #a7dafc, white 60%, white);
border-radius: 30rpx;
// border:1px solid red;
position:relative;
.logo{
position:absolute;
top:-50rpx;
left:50%;
transform:translateX(-50%);
width:200rpx;
height:200rpx;
background-color:red;
position: relative;
.logo {
position: absolute;
top: -50rpx;
left: 50%;
transform: translateX(-50%);
width: 200rpx;
height: 200rpx;
background-color: red;
}
.content-title{
position:absolute;
top:40%;
width:100%;
color:black;
font-size:40rpx;
text-align:center;
.content-title {
position: absolute;
top: 40%;
width: 100%;
color: black;
font-size: 40rpx;
text-align: center;
}
.btn-box{
position:absolute;
bottom:10%;
width:100%;
display:flex;
justify-content:space-evenly;
.btn-cancel{
width:200rpx;
height:70rpx;
background-color:#F3F6F7;
border-radius:50rpx;
display:flex;
align-items:center;
justify-content:center;
font-size:30rpx;
color:#32353B;
.btn-box {
position: absolute;
bottom: 10%;
width: 100%;
display: flex;
justify-content: space-evenly;
.btn-cancel {
width: 200rpx;
height: 70rpx;
background-color: #f3f6f7;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #32353b;
}
.btn-success{
width:200rpx;
height:70rpx;
background-color:#4278F4;
border-radius:50rpx;
display:flex;
align-items:center;
justify-content:center;
font-size:30rpx;
color:white;
.btn-success {
width: 200rpx;
height: 70rpx;
background-color: #4278f4;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: white;
}
}
}
}
::v-deep .u-mode-center-box{
margin-top:-500rpx !important;
background-color:transparent !important;
::v-deep .u-mode-center-box {
margin-top: -500rpx !important;
background-color: transparent !important;
}
</style>