153 lines
3.9 KiB
Vue
153 lines
3.9 KiB
Vue
<template>
|
|
<div class="pageMain">
|
|
<div class="top">
|
|
<div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
|
|
<img class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>
|
|
<div class="timeSelect">
|
|
<img class="selectIcon" src="/static/images/newCommercial/selectDateIcon.svg"/>
|
|
<picker mode="date" :value="single" :end="endData" @change="bindDateChange" >
|
|
<view class="time">
|
|
<view class="text">{{ single }}2023/07/06</view>
|
|
<image class="icon" src="/static/images/newCommercial/arrow_bottom.svg"></image>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picker">
|
|
<div class="selectService">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="content">
|
|
<view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
|
|
<p class="area" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "flowAnalysis",
|
|
data() {
|
|
return {
|
|
menu:'',
|
|
statusBarHeight:'',
|
|
single:'',
|
|
thisDay:'',
|
|
endData:'',
|
|
serviceInfo:{}, //当前服务区信息
|
|
}
|
|
},
|
|
onLoad(){
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
console.log('systemInfo',systemInfo)
|
|
console.log('this.menu',this.menu)
|
|
},
|
|
methods:{
|
|
bindDateChange(){
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.pageMain{
|
|
width: 100%;
|
|
height: 100%;
|
|
.top{
|
|
width: 100%;
|
|
height: 152px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
background: linear-gradient(90deg, #60AAFF 0%,#3E74FF 100%);
|
|
.header{
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
.backArrow{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 16px;
|
|
}
|
|
.timeSelect{
|
|
display: flex;
|
|
align-items: center;
|
|
.selectIcon{
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.time{
|
|
display: flex;
|
|
align-items: center;
|
|
.text{
|
|
margin: 0 5px;
|
|
}
|
|
.icon{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.picker{
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
.uni-input{
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|