119 lines
2.6 KiB
Vue
119 lines
2.6 KiB
Vue
<style lang='scss' scoped>
|
||
.placeDetail{
|
||
width: 100%;
|
||
&-info{
|
||
padding: 30rpx $paddingLR;
|
||
position: relative;
|
||
&-row{
|
||
padding-bottom: 20rpx;
|
||
&-label{
|
||
color: #777;
|
||
}
|
||
&:last-child{
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
&-state{
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 30rpx;
|
||
color: #F69906;
|
||
}
|
||
}
|
||
&-line{
|
||
width: 100%;
|
||
height: 20rpx;
|
||
background: #F5F5F9;
|
||
}
|
||
&-director-ctn{
|
||
padding: 30rpx $paddingLR;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
&-director{
|
||
&-row{
|
||
padding-bottom: 20rpx;
|
||
&-label{
|
||
color: #777;
|
||
}
|
||
&:last-child{
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
&-director-icon{
|
||
background-color: #1C9AFF;
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
border-radius: 50%;
|
||
}
|
||
&-bottom-btn{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="placeDetail">
|
||
<view class="placeDetail-info">
|
||
<view class="placeDetail-info-state">故障</view>
|
||
<view class="placeDetail-info-row">
|
||
<text class="placeDetail-info-row-label">名称：</text>
|
||
<text>场所19#</text>
|
||
</view>
|
||
<view class="placeDetail-info-row">
|
||
<text class="placeDetail-info-row-label">区域：</text>
|
||
<text>德润科技18楼101北区</text>
|
||
</view>
|
||
<view class="placeDetail-info-row">
|
||
<text class="placeDetail-info-row-label">详情地址：</text>
|
||
<text>福建省福州市闽侯县上街镇乌龙江中青大厦18楼</text>
|
||
</view>
|
||
<view class="placeDetail-info-row">
|
||
<text class="placeDetail-info-row-label">所属项目：</text>
|
||
<text>德润项目A1</text>
|
||
</view>
|
||
</view>
|
||
<view class="placeDetail-line"></view>
|
||
<view class="placeDetail-director-ctn">
|
||
<view class="placeDetail-director">
|
||
<view class="placeDetail-director-row">
|
||
<text class="placeDetail-director-row-label">负责人：</text>
|
||
<text>陈工</text>
|
||
</view>
|
||
<view class="placeDetail-director-row">
|
||
<text class="placeDetail-director-row-label">手机号：</text>
|
||
<text>158600000000</text>
|
||
</view>
|
||
</view>
|
||
<view class="placeDetail-director-icon flex-center" @click="callPhoneFn">
|
||
<tuiIcon name="lianxiwomen" color="#fff"></tuiIcon>
|
||
</view>
|
||
</view>
|
||
<view class="placeDetail-line"></view>
|
||
<view class="placeDetail-bottom-btn">
|
||
<u-button type="default" class="flex1">删除</u-button>
|
||
<u-button type="primary" class="flex1">修改</u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
callPhoneFn(){
|
||
uni.makePhoneCall({
|
||
phoneNumber: '114' //仅为示例
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|