<style lang="scss"> .container{ background:#f6f6f6; min-height: 100%; padding:30rpx 0; .card{ margin-top:0; &.info{ .name{ display: flex; align-items: center; margin-bottom: 14rpx; text{ &:first-child{ flex-shrink: 0; color:#fff; background:#10C176; font-size:20rpx; height:40rpx; width:80rpx; border-radius: 4rpx; text-align: center; line-height: 40rpx; margin-right:16rpx; } &:nth-child(2){ flex-grow: 1; } &:nth-child(3){ flex-shrink: 0; color:#fff; background:#10C176; border-radius: 50%; width:34rpx; height:34rpx; text-align: center; line-height: 34rpx; } } } } } .u-popup{ .u-popup__content{ &>.btns{ display:flex; justify-content: space-between; padding:10rpx; } picker-view{ height:500rpx; picker-view-column{ view.item{ padding:0 30rpx; display:flex; flex-direction: column; justify-content: space-evenly; .name{ display:flex; align-items: center; text{ font-size:16rpx; &:first-child{ color:#fff; background:#10C176; border-radius:0 20rpx 0 20rpx; width:80rpx; height:34rpx; text-align: center; line-height: 34rpx; margin-right:16rpx; } &:nth-child(2){ font-weight: bold; font-size:20rpx; } &:nth-child(3){ color:#999; margin-left:6rpx; } } } .company{ font-size:16rpx; &:before{ content:attr(data-name); color:#FBA83C; margin-right:20rpx; } &:after{ content:attr(data-company); color:#999999; } } } } } } } } </style> <template> <view class="container"> <cu-navbar style="--bg:#10C176;--c:#fff;" isBack> <button slot="right" class="cu-btn round">确定</button> </cu-navbar> <view class="card info"> <view class="name"> <text>化肥</text> <text>中量元素水溶肥</text> <text @click="show=true" class="plant-jiantou_zuoyouqiehuan"/> </view> <view style="color:#707070;font-size:20rpx;">云南云天化股份有限公司</view> </view> <view class="card"> <u-form class="inline" labelWidth="auto" :model="formData" :rules="rules"> <d-form v-for="(v,k) in fields" :key="k" v-bind="v" :field="k" :required="!!rules[k]"/> </u-form> </view> <u-popup :show="show" @close="show=false"> <view class="btns"> <button class="cu-btn sm" @click="show=false">取消</button> <button class="cu-btn sm bg-green">确定</button> </view> <picker-view :value="[3]" indicator-style="height:90rpx;"> <picker-view-column> <view v-for="i in 10" :key="i" class="item" style="height:90rpx;"> <view class="name"><text>化肥</text><text>中量元素水溶肥</text><text>(袋)</text></view> <view class="company" data-name="微量元素肥" data-company="云南云天化股份有限公司"/> </view> </picker-view-column> </picker-view> </u-popup> </view> </template> <script> export default { data(){ return{ fields:{ specs:{label:"规格",tip:"库存:2袋(200kg)",type:"select"}, num:{label:"投入数量",suffix:"kg"}, }, formData:{}, rules:{ }, show:false, } } } </script>