包裹view顶层 不能添加 display: flex;
<template>
<view class="container">
<tHeader :title="'采购管理'" :showScrollTar="true" :scroll="scroll" :tabList="tabList" :isFixed="true"
@change="changeTar" :current='current'>
</tHeader>
<view class="container-content-box">
<view v-for="(item,index) in inventoryCostList" :key="index">
<view class="cost-item-title-box">
<uni-icons type="staff" color="#2167FF" size="24"></uni-icons>
<view class="cost-item-title-name-box">
{{item.deptName}}
</view>
</view>
<view class="cost-item-content-box">
<view class="cost-item-content-flex-box">
<view class="cost-item-content-flex-name-box">
自采成本
</view>
<view class="cost-item-content-flex-value-box">
¥{{item.selfPrice}}
</view>
</view>
<view class="cost-item-content-flex-box">
<view class="cost-item-content-flex-name-box">
采购调拨成本
</view>
<view class="cost-item-content-flex-value-box">
¥{{item.allotPrice}}
</view>
</view>
<view class="cost-item-content-flex-box">
<view class="cost-item-content-flex-name-box">
采购调拨成本
</view>
<view class="cost-item-content-flex-value-box">
¥{{item.allotPrice}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss">
.container {
background-color: #F4F8FB;
height: 100%;
width: 100%;
.btn-box {
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 24rpx;
color: #FFF;
}
.container-title-height {
height: calc(var(--status-bar-height) + 150rpx);
}
.date-picker-box {
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
color: #00327D;
font-size: 30rpx;
line-height: 30rpx;
padding: 30rpx 0;
.date-icon {
display: inline-block;
width: 30rpx;
height: 30rpx;
}
.start-text {
padding-left: 20rpx;
}
.date-connect {
padding: 0 8rpx;
}
}
.container-content-box {
background-color: #FFF;
border-radius: 10rpx;
margin: 25rpx;
padding: 25rpx;
.cost-item-title-box {
display: flex;
align-items: center;
justify-content: center;
color: #333;
flex-direction: row;
.cost-item-title-name-box {
font-size: 30rpx;
font-weight: bold;
}
}
.cost-item-content-box {
background-color: #F7FAFF;
padding: 25rpx;
margin: 20rpx;
flex-direction: row;
border-radius: 10rpx;
display: flex;
.cost-item-content-flex-box {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
color: #333;
flex-direction: column;
.cost-item-content-flex-name-box {
color: #666;
display: flex;
font-size: 26rpx;
}
.cost-item-content-flex-value-box {
color: #333;
font-size: 24rpx;
margin-top: 15rpx;
font-weight: bold;
}
}
}
}
}
</style>
这一层级,不能写display: flex;写了底下的 flex:1 不生效
.container-content-box{}