You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
5.8 KiB
278 lines
5.8 KiB
<template> |
|
<view class="tabzt"> |
|
<view @click="details.state=1" :class="state==1?'xz':''">统计表</view> |
|
<view @click="details.state=2" :class="state==2?'xz':''">填报状态</view> |
|
</view> |
|
<view class="box_caa"> |
|
<view class="xuanx"> |
|
<view>场站名称：</view> |
|
<view class="czmc"> |
|
<input placeholder="请输入场站名称"/> |
|
</view> |
|
</view> |
|
<view class="mabox"> |
|
<view class="xuanx"> |
|
<view>时间：</view> |
|
<view class="quxxz"> |
|
<view>2022年6月</view> |
|
<image src="../../static/xiajian.png"></image> |
|
</view> |
|
</view> |
|
<view class="xuanx"> |
|
<view>场站类型：</view> |
|
<view class="quxxz"> |
|
<view>全选</view> |
|
<image src="../../static/xiajian.png"></image> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="mabox"> |
|
<view class="xuanx"> |
|
<view>区县：</view> |
|
<view class="quxxz"> |
|
<view>巴南区</view> |
|
<image src="../../static/xiajian.png"></image> |
|
</view> |
|
</view> |
|
<view class="xuanx" v-if="state==2"> |
|
<view>填报状态：</view> |
|
<view class="quxxz"> |
|
<view>全选</view> |
|
<image src="../../static/xiajian.png"></image> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <view class="mabox"> |
|
<view class="xuanx"> |
|
<view>是否隐患排查：</view> |
|
<view class="quxxz"> |
|
<view>全选</view> |
|
<image src="../../static/xiajian.png"></image> |
|
</view> |
|
</view> |
|
</view> --> |
|
<view class="buts"> |
|
<view @click="gotrou" class="chabutton"> |
|
新增 |
|
</view> |
|
<view class="chabutton"> |
|
查询 |
|
</view> |
|
</view> |
|
</view> |
|
<scroll-view class="scv" scroll-y="true"> |
|
<view class="max_box"> |
|
<view v-for="(item,index) in [1,2,3,4]"> |
|
<view class="title_top"> |
|
<view>城南加气站</view> |
|
<image @click="xuanzdq(index)" src="../../static/minicon/genduo.png"></image> |
|
</view> |
|
<view class="nrcon"> |
|
<view>所在区县：巴南区</view> |
|
<view>进货渠道：85</view> |
|
<view>均价(元)：39</view> |
|
<view>销售量(立方米)：64</view> |
|
<view>库存(立方米)：85</view> |
|
<view>入库量：46</view> |
|
<view>电子运单<text @click="gopcbg" style="color:#3d7aed ;margin-left: 20rpx;">查看</text></view> |
|
</view> |
|
<view v-if="qhxz==index" class="cdxuanx"> |
|
<view>修改</view> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</template> |
|
|
|
<script setup> |
|
import { reactive, toRefs } from "vue"; |
|
let details=reactive({ |
|
state:1, |
|
qhxz:-1 |
|
}) |
|
function xuanzdq(index){ |
|
if(details.qhxz==index){ |
|
details.qhxz=-1 |
|
}else{ |
|
details.qhxz=index |
|
} |
|
} |
|
function gopcbg(){ |
|
uni.navigateTo({ |
|
url:'/pages/managelistdetails/managelistdetails' |
|
}) |
|
} |
|
let {state,qhxz}=toRefs(details) |
|
</script> |
|
|
|
<style lang="scss"> |
|
.scv{ |
|
width: 100%; |
|
height: 61vh; |
|
box-sizing: border-box; |
|
padding: 30upx 0; |
|
padding-bottom: 20upx; |
|
.max_box{ |
|
display: flex; |
|
flex-direction: column; |
|
>view{ |
|
width: 700upx; |
|
padding: 30upx 20upx; |
|
margin: auto; |
|
margin-bottom: 30upx; |
|
box-sizing: border-box; |
|
background-color: #ffffff; |
|
border-radius: 10upx; |
|
position: relative; |
|
.cdxuanx{ |
|
position: absolute; |
|
right: 50upx; |
|
top: 80upx; |
|
width: 160upx; |
|
background-color: #ffffff; |
|
border-radius: 10upx; |
|
border: 1upx solid #ececec; |
|
display: flex; |
|
flex-direction: column; |
|
>view{ |
|
width: 100%; |
|
padding: 20upx 30upx; |
|
box-sizing: border-box; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 28upx; |
|
} |
|
} |
|
.title_top{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding-bottom: 30upx; |
|
border-bottom: 1upx solid #ececec; |
|
>view{ |
|
font-size: 32upx; |
|
color: #3d7aed; |
|
font-weight: 500; |
|
} |
|
>image{ |
|
width: 50upx; |
|
height: 50upx; |
|
} |
|
} |
|
.nrcon{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
>view{ |
|
width: 50%; |
|
font-size: 25upx; |
|
padding: 20upx 0; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.box_caa{ |
|
width: 700upx; |
|
margin: auto; |
|
padding: 30upx 20upx; |
|
box-sizing: border-box; |
|
background-color: #ffffff; |
|
margin-top: 20upx; |
|
border-radius: 10upx; |
|
.mabox{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
.xuanx{ |
|
// width: 50%; |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 20upx; |
|
>view{ |
|
// width: 150upx; |
|
} |
|
.czmc{ |
|
flex: 1; |
|
background-color: #f2f2f2; |
|
padding: 20upx; |
|
box-sizing:border-box; |
|
>input{ |
|
flex: 1; |
|
} |
|
} |
|
.quxxz{ |
|
// flex: 3; |
|
width: 211upx; |
|
background-color: #f2f2f2; |
|
padding: 20upx; |
|
box-sizing:border-box; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
>view{ |
|
// margin-right: 100upx; |
|
} |
|
>image{ |
|
width: 23upx; |
|
height: 15upx; |
|
} |
|
} |
|
.duoxuan{ |
|
display: flex; |
|
align-items: center; |
|
// flex-wrap: wrap; |
|
flex: 1; |
|
>view{ |
|
display: flex; |
|
align-items: center; |
|
font-size: 28upx; |
|
margin-right: 30upx; |
|
>image{ |
|
width: 40upx; |
|
height: 40upx; |
|
} |
|
} |
|
} |
|
} |
|
.buts{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
.chabutton{ |
|
width: 250upx; |
|
padding: 20upx 0; |
|
margin:20upx 0; |
|
// margin-top: 50upx; |
|
background-color: #3d7aed; |
|
color: #ffffff; |
|
font-size: 28upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-radius: 10upx; |
|
} |
|
} |
|
.tabzt{ |
|
width: 100%; |
|
// height: 120upx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background-color: #ffffff; |
|
border-bottom: 1upx solid #ececec; |
|
.xz{ |
|
border-bottom: 2upx solid #3d7aed !important; |
|
} |
|
>view{ |
|
border-bottom: 5upx solid #ffffff; |
|
padding: 20upx 30upx; |
|
&:nth-of-type(1){ |
|
margin-right: 165upx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|