gy-app-shop/pages/home/waterLevel/placeDetail.vue

119 lines
2.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>福建省福州市闽侯县上街镇乌龙江中青大厦</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>