解决冲突pages/common/index/index.vue

This commit is contained in:
liub
2025-07-11 16:22:31 +08:00

View File

@ -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-if="item.communicationMode==0">ID:{{item.deviceImei}}
</view>
<view class="ID" v-else>ID:{{item.deviceMac}}</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 class="device-status online">已连接</view> --> </view>
<view class="" v-if="item.communicationMode==1">
<view class="device-status online">已连接</view>
<view class="device-status unline">未连接</view> <view class="device-status unline">未连接</view>
<view class="device-info" v-if="item.communicationMode==0">
<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>
@ -344,8 +371,7 @@
// 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;
} }
@ -410,8 +436,10 @@
.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,6 +457,7 @@
margin-bottom: 30rpx; margin-bottom: 30rpx;
font-size: 28rpx; font-size: 28rpx;
} }
.gprs { .gprs {
width: 28rpx; width: 28rpx;
height: 35rpx; height: 35rpx;
@ -438,36 +467,28 @@
.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 { .callpolice {
border: 1px solid rgba(224, 52, 52, 0.4);
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;
} }
/* 遮罩层 */ /* 遮罩层 */