dyf/APP
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备分享模块页面功能开发

Browse Source
This commit is contained in:
fengerli
2025-07-16 16:43:22 +08:00
parent 9b3be8c7d7
commit bc3bea6df0
9 changed files with 752 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
pages/6170/shareManagement/index.vue Normal file
View File

@ -0,0 +1,197 @@
<template>
<view class="share">
<view class="device-title">已分享用户</view>
<view class="device-info" v-for="(item, index) in deviceList" :key="index">
<view class="device-header">
<view class="deviceIMG">
<image :src="item.devicePic" mode="" class="IMG"></image>
</view>
<view class="device-name">
<view>{{item.deviceName}}rr32r23r23</view>
<view class="ID">
<view class="ID">ID:{{item.deviceImei}}ererer
</view>
</view>
</view>
<view class="device-delete" @click="handleDelete">
<text class="delete">移除</text>
</view>
</view>
</view>
<!-- 删除弹框 -->
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
<view class="agreement-popup" @click.stop>
<view class="popup-content">
<image src="/static/images/dell.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">确定移除该用户！</view>
</view>
</view>
<!-- 按钮组 -->
<view class="popup-buttons">
<button class="btn agreeBtn" @click="handleBtn">确定</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
deviceList: [{}],
deleteShow:false
}
},
methods: {
// 删除
handleDelete() {
this.deleteShow=true
},
handleBtn(){
this.deleteShow=false
}
}
}
</script>
<style scoped>
.share {
padding: 30rpx;
background: #121212;
min-height: 100vh;
}
.device-title {
color: rgba(255, 255, 255, 0.87);
padding: 30rpx 0;
}
.device-info {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.87);
padding-top: 10rpx;
position: relative;
}
.device-header {
display: flex;
align-items: center;
margin-bottom: 15rpx;
}
.device-name {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.87);
margin-left: 25rpx;
line-height: 50rpx;
white-space: nowrap;
}
.ID {
color: rgba(255, 255, 255, 0.6);
font-size: 26rpx;
}
.deviceIMG {
width: 100rpx;
height: 100rpx;
border-radius: 16rpx;
position: relative;
background-color: rgba(42, 42, 42, 0.6);
display: flex;
align-items: center;
}
.device-delete {
text-align: end;
width: 50%;
}
.delete {
border-radius: 32px;
background: rgba(255, 200, 78, 0.06);
display: inline-block;
width: 152rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
color: rgba(255, 200, 78, 1);
cursor: pointer;
}
.IMG {
width: 68rpx;
height: 50rpx;
margin-left: 17%;
}
.title {
font-size: 18px;
color: white;
}
.device-info {
width: 100%;
padding: 10px;
background: rgba(26, 26, 26, 1);
border-radius: 16rpx;
}
/* 遮罩层 */
.agreement-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.popup-Title {
color: rgba(255, 255, 255, 0.86);
text-align: center;
padding: 30rpx 0rpx;
}
.popup-buttons {
display: flex;
text-align: center;
}
/* 弹窗主体 */
.agreement-popup {
width: 60%;
background-color: rgb(42, 42, 42);
border-radius: 40rpx;
padding: 30rpx;
text-align: center;
border: 1px solid rgba(255, 200, 78, 0.3);
}
.svg {
width: 58rpx;
height: 62rpx;
}
/* 通用按钮样式 */
.btn {
height: 60rpx;
line-height: 60rpx;
border-radius: 40rpx;
font-size: 24rpx;
margin: 10rpx auto;
text-align: center;
}
/* 同意按钮 */
.agreeBtn {
background: #FFC84E;
color: #232323;
border: none;
width: 170rpx !important;
}
</style>