解决冲突pages/common/index/index.vue
This commit is contained in:
liub
@ -14,10 +14,9 @@
|
|||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="sendFlex">
|
<view class="sendFlex">
|
||||||
<view>
|
|
||||||
<image src="/static/images/gprs.png" class="gprs"></image>
|
|
||||||
</view>
|
|
||||||
<view class="callpolice">报警</view>
|
<view class="callpolice">报警</view>
|
||||||
|
<view class="Sendmessage">位置</view>
|
||||||
<view class="Sendmessage" @click="handleSend">发送信息</view>
|
<view class="Sendmessage" @click="handleSend">发送信息</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -28,6 +27,31 @@
|
|||||||
<uni-swipe-action-item :right-options="Options" @click.stop="handleSwipeClick($event, item, index)"
|
<uni-swipe-action-item :right-options="Options" @click.stop="handleSwipeClick($event, item, index)"
|
||||||
class="device-card">
|
class="device-card">
|
||||||
<!-- 设备卡片内容保持不变 -->
|
<!-- 设备卡片内容保持不变 -->
|
||||||
|
<!-- <view @click.stop="handleFile(item)">
|
||||||
|
<view class="device-header">
|
||||||
|
<view class="deviceIMG">
|
||||||
|
<image :src="item.devicePic" class="IMG"></image>
|
||||||
|
</view>
|
||||||
|
<view class="device-name">
|
||||||
|
<view>设备:{{item.deviceName}}</view>
|
||||||
|
<view class="device-info">
|
||||||
|
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}
|
||||||
|
</view>
|
||||||
|
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
|
||||||
|
<view class="device-flex" v-if="item.communicationMode==0">
|
||||||
|
<view class="onlines" >在线</view>
|
||||||
|
<view class="line"></view>
|
||||||
|
<view>电量：90%</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="" v-if="item.communicationMode==1">
|
||||||
|
<view class="device-status online">已连接</view>
|
||||||
|
<view class="device-status unline">未连接</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
<view @click.stop="handleFile(item)">
|
<view @click.stop="handleFile(item)">
|
||||||
<view class="device-header">
|
<view class="device-header">
|
||||||
<view class="deviceIMG">
|
<view class="deviceIMG">
|
||||||
@ -35,17 +59,20 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="device-name">
|
<view class="device-name">
|
||||||
<view>设备:{{item.deviceName}}</view>
|
<view>设备:{{item.deviceName}}</view>
|
||||||
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}</view>
|
<view class="ID">
|
||||||
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
|
<view class="ID" v-if="item.communicationMode==0">ID:{{item.deviceImei}}
|
||||||
|
</view>
|
||||||
|
<view class="ID" v-else>ID:{{item.deviceMac}}</view>
|
||||||
|
<view class="onlines" v-if="item.communicationMode==0">在线</view>
|
||||||
|
<view>电量：90%</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="device-status online">已连接</view> -->
|
<view class="" v-if="item.communicationMode==1">
|
||||||
<view class="device-status unline">未连接</view>
|
<view class="device-status online">已连接</view>
|
||||||
<view class="device-info" v-if="item.communicationMode==0">
|
<view class="device-status unline">未连接</view>
|
||||||
<text class="onlines">在线</text>
|
|
||||||
<text class="line"></text>
|
|
||||||
<text>电量：90%</text>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<image src="/static/images/cires.png" class="circle"></image>
|
<image src="/static/images/cires.png" class="circle"></image>
|
||||||
</uni-swipe-action-item>
|
</uni-swipe-action-item>
|
||||||
@ -152,7 +179,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
page: 1, // 当前页码
|
page: 1, // 当前页码
|
||||||
size:10, // 每页条数
|
size: 10, // 每页条数
|
||||||
total: 0, // 总数据量
|
total: 0, // 总数据量
|
||||||
loading: false,
|
loading: false,
|
||||||
finished: false,
|
finished: false,
|
||||||
@ -344,9 +371,8 @@
|
|||||||
// communicationMode 0是4G 1是蓝牙
|
// communicationMode 0是4G 1是蓝牙
|
||||||
if (item.communicationMode == 0) {
|
if (item.communicationMode == 0) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/6170/deviceControl/index'
|
url: `/pages/6170/deviceControl/index?id=${item.id}`
|
||||||
});
|
return;
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(item.typeName=='6155'){
|
if(item.typeName=='6155'){
|
||||||
@ -403,15 +429,17 @@
|
|||||||
/* justify-content: space-around; */
|
/* justify-content: space-around; */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
/* min-width: 100%; */
|
/* min-width: 100%; */
|
||||||
/* 最小宽度 */
|
/* 最小宽度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-item {
|
.tab-item {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
/* min-width: 120rpx; */
|
/* min-width: 120rpx; */
|
||||||
padding: 0 30rpx; /* 左右内边距 */
|
padding: 0 30rpx;
|
||||||
text-align: center; /* 文字居中 */
|
/* 左右内边距 */
|
||||||
|
text-align: center;
|
||||||
|
/* 文字居中 */
|
||||||
/* 设置最小宽度 */
|
/* 设置最小宽度 */
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -429,45 +457,38 @@
|
|||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
.gprs{
|
|
||||||
width:28rpx;
|
.gprs {
|
||||||
height:35rpx;
|
width: 28rpx;
|
||||||
|
height: 35rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left:50rpx
|
left: 50rpx
|
||||||
}
|
}
|
||||||
|
|
||||||
.Sendmessage {
|
.Sendmessage {
|
||||||
margin-left: 50rpx;
|
margin-left: 50rpx;
|
||||||
border: 1px solid rgba(187, 230, 0, 0.4);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
border-radius: 20px;
|
|
||||||
padding: 7rpx 20rpx;
|
|
||||||
color: rgba(187, 230, 0, 1);
|
|
||||||
}
|
}
|
||||||
.callpolice{
|
|
||||||
border: 1px solid rgba(224, 52, 52, 0.4);
|
.callpolice {
|
||||||
border-radius: 20px;
|
|
||||||
color: rgba(224, 52, 52, 1);
|
color: rgba(224, 52, 52, 1);
|
||||||
width: 150rpx;
|
|
||||||
text-align: center;
|
|
||||||
padding: 5rpx 10rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 设备卡片 */
|
/* 设备卡片 */
|
||||||
.device-card {
|
.device-card {
|
||||||
background-color: rgb(26, 26, 26);
|
background-color: rgb(26, 26, 26);
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
/* padding: 30rpx; */
|
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
/* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); */
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-header {
|
/* .device-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 15rpx;
|
margin-bottom: 15rpx;
|
||||||
padding: 30rpx 0 10rpx 30rpx;
|
padding: 30rpx 0 10rpx 30rpx;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.device-name {
|
.device-name {
|
||||||
@ -499,8 +520,8 @@
|
|||||||
width: 8rpx;
|
width: 8rpx;
|
||||||
height: 40rpx;
|
height: 40rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 40rpx;
|
right: 18rpx;
|
||||||
top: 80rpx;
|
top: 65rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.online {
|
.online {
|
||||||
@ -520,11 +541,15 @@
|
|||||||
|
|
||||||
.device-info {
|
.device-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-evenly;
|
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: rgba(255, 255, 255, 0.87);
|
color: rgba(255, 255, 255, 0.87);
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0rpx 0rpx 30rpx 30rpx;
|
width: 100%;
|
||||||
|
}
|
||||||
|
.device-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.deviceIMG {
|
.deviceIMG {
|
||||||
@ -569,19 +594,123 @@
|
|||||||
color: rgba(255, 255, 255, 0.6);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
font-size: 22rpx;
|
font-size: 22rpx;
|
||||||
}
|
} */
|
||||||
|
.device-header {
|
||||||
.device-uplod {
|
display: flex;
|
||||||
background-color: rgb(26, 26, 26);
|
|
||||||
border-radius: 16rpx;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
margin-bottom: 15rpx;
|
||||||
height: 202rpx;
|
padding: 30rpx 0 10rpx 30rpx;
|
||||||
line-height: 200rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-swipe-action-item__options {
|
.unline {
|
||||||
transition: width 0.3s ease;
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
margin-left: 24rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
width: 75%;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ID {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 26rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-status {
|
||||||
|
width: 122rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
border-radius: 0px 8px 0px 8px;
|
||||||
|
background-color: rgb(42, 42, 42);
|
||||||
|
position: absolute;
|
||||||
|
top: 0rpx;
|
||||||
|
right: 0rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 52rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
position: absolute;
|
||||||
|
right: 25rpx;
|
||||||
|
top: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.online {
|
||||||
|
color: rgb(187, 230, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-id {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
position: relative;
|
||||||
|
padding: 0rpx 0rpx 30rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deviceIMG {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(42, 42, 42, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IMG {
|
||||||
|
width: 68rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin-left: 17%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlines {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlines::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
background: rgb(0, 171, 103);
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 20rpx;
|
||||||
|
left: -20rpx
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 2rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
rgba(0, 0, 0, 0) 0%,
|
||||||
|
rgb(255, 255, 255) 50%,
|
||||||
|
rgba(255, 255, 255, 0) 100%);
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-status {
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 遮罩层 */
|
/* 遮罩层 */
|
||||||
|
|||||||
Reference in New Issue
Block a user