170 lines
4.4 KiB
Vue
170 lines
4.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="container-card">
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">设备类型</view>
|
|
<view class="container-card-item-right">设备类型1</view>
|
|
</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">维修状态</view>
|
|
<view class="container-card-item-right" style="color: #F5AB4C;">未处理</view>
|
|
<view class="container-card-item-right" style="color: #06cc76;">处理中</view>
|
|
<view class="container-card-item-right" style="color: #FF5842;">已取消</view>
|
|
<view class="container-card-item-right" style="color: #0e7ff5 ;">已完工</view>
|
|
</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">设备编号</view>
|
|
<view class="container-card-item-right">ST1234845465</view>
|
|
</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">故障现象</view>
|
|
<view class="container-card-item-right">瓷砖破损</view>
|
|
</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">保修时间</view>
|
|
<view class="container-card-item-right">2023-08-05</view>
|
|
</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">报修人</view>
|
|
<view class="container-card-item-right">张三三</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="container-card">
|
|
<view class="container-info">报修信息</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">报修单号</view>
|
|
<view class="container-card-item-right">873783783</view>
|
|
</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">指定维修人员</view>
|
|
<view class="container-card-item-right">请选择
|
|
<image src="@/static/right.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">维修单号</view>
|
|
<view class="container-card-item-right">873783783</view>
|
|
</view>
|
|
<view class="container-card-item" style="display: block;">
|
|
<view class="container-card-item-left">中止原因</view>
|
|
<view class="container-card-item-stop">8737782525252525252525252525252525252525252525252525252525252525252525583783</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="container-card">
|
|
<view class="container-info">处理信息</view>
|
|
<view class="container-card-item">
|
|
<view class="container-card-item-left">处理时间</view>
|
|
<view class="container-card-item-right">873783783</view>
|
|
</view>
|
|
|
|
<view class="container-card-item" style="display: block;">
|
|
<view class="container-card-item-left">处理意见</view>
|
|
<view class="container-card-item-stop">8737782525252525252525252525252525252525252525252525252525252525252525583783</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="container-bottom">
|
|
<view class="container-finish">完成</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$globalWidth: 650rpx;
|
|
$buttonColor: #0e7ff5;
|
|
|
|
.container {
|
|
display: flex;
|
|
background: -webkit-linear-gradient(270deg,
|
|
rgba(227, 239, 249, 1) 0%,
|
|
rgba(245, 245, 247, 1) 100%);
|
|
flex-direction: column;
|
|
/* align-items: center; */
|
|
width: 100%;
|
|
height: calc(100vh - 150rpx);
|
|
overflow-y: scroll;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.container-card{
|
|
width: $globalWidth;
|
|
border-radius: 20rpx;
|
|
background-color: white;
|
|
padding: 20rpx;
|
|
margin-top: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
// 报修信息
|
|
.container-info{
|
|
font-size: 35rpx;
|
|
margin-bottom: 10rpx;
|
|
width: 140rpx;
|
|
height: 35rpx;
|
|
border-bottom: 10rpx solid #b6d8fc;
|
|
|
|
}
|
|
|
|
.container-card-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
min-height: 80rpx;
|
|
font-size: 25rpx;
|
|
align-items: center;
|
|
|
|
.container-card-item-right{
|
|
color: #7E848F;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
|
|
.container-card-item-stop{
|
|
background-color: #F0F7FF;
|
|
word-wrap: break-word;
|
|
margin-top: 10rpx;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.container-bottom{
|
|
height: 150rpx;
|
|
width: 100%;
|
|
position: fixed;
|
|
background-color: white;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.container-finish{
|
|
width: $globalWidth;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
color: white;
|
|
|
|
background: $buttonColor;
|
|
}
|
|
|
|
}
|
|
</style> |