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