138 lines
3.4 KiB
Vue
138 lines
3.4 KiB
Vue
<template>
|
|
<view class="content_wrapper">
|
|
<view
|
|
class="box"
|
|
v-for="(item,index) of 10"
|
|
:key="index"
|
|
>
|
|
<!-- 车辆编号 -->
|
|
<view class="row">
|
|
<text class="label">车辆编号</text>
|
|
<view class="value">
|
|
<text style="margin-right: 30rpx;">100757</text>
|
|
<uni-icons type="sound" size="25" style="position: relative;top: 6rpx;" color="blue"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<!-- 接单原因 -->
|
|
<view class="row">
|
|
<text class="label">接单原因</text>
|
|
<text class="value">23123123123231231231232312312312323123123123231231231232312312312323123123123</text>
|
|
</view>
|
|
<!-- 中控品牌 -->
|
|
<view class="row">
|
|
<text class="label">中控品牌</text>
|
|
<text class="value">-</text>
|
|
</view>
|
|
<!-- 设备位置 -->
|
|
<view class="row">
|
|
<text class="label">设备位置</text>
|
|
<view>
|
|
<view>查看地图</view>
|
|
<view style="color: darkgrey;font-size: 28rpx;">110.41,123123.11</view>
|
|
</view>
|
|
<uni-icons type="right" size="20" class="arrows" color="grey"></uni-icons>
|
|
</view>
|
|
<!-- 设备位置 -->
|
|
<view class="row">
|
|
<text class="label">设备距离</text>
|
|
<text class="value">100757m</text>
|
|
</view>
|
|
<!-- 删除 -->
|
|
<uni-icons type="trash" size="25" class="deleteBtn" color="orange"></uni-icons>
|
|
</view>
|
|
<view style="width: 100%;height: 100rpx;"></view>
|
|
<!-- 确认接单按钮 -->
|
|
<view class="btn_wrapper">
|
|
<button class="btn_style">确认接单</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import navigator from '@/utils/navigator.js';
|
|
|
|
onLoad((options) => {
|
|
//TODO: 页面加载可能会获取参数
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content_wrapper{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding: 30rpx;
|
|
background-color: rgb(226, 223, 223,.5);
|
|
overflow-y: auto;
|
|
|
|
.box{
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 35rpx 25rpx;
|
|
background-color: white;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2px 8px #0000000d;
|
|
margin-bottom: 30rpx;
|
|
|
|
.row{
|
|
position: relative;
|
|
display: flex;
|
|
font-size: 30rpx;
|
|
align-items: baseline;
|
|
margin-bottom: 30rpx;
|
|
:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label{
|
|
width: 150rpx;
|
|
color: gray;
|
|
}
|
|
|
|
.value{
|
|
width: calc(100% - 230rpx);
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.arrows{
|
|
position: absolute;
|
|
right: 0;
|
|
top:0;
|
|
}
|
|
}
|
|
|
|
.deleteBtn{
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 25rpx;
|
|
color: red;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.btn_wrapper{
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 20rpx 40rpx 30rpx 40rpx;
|
|
background-color: white;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.btn_style{
|
|
color: white;
|
|
background-color: #3875f6;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |