45 changed files with 423 additions and 213 deletions
@ -1,16 +0,0 @@ |
|||
import cuNavbar from './colorui/components/cu-navbar.vue' |
|||
import dSearch from './search.vue' |
|||
import dForm from './form.vue' |
|||
|
|||
const components=[ |
|||
cuNavbar, |
|||
dSearch, |
|||
dForm |
|||
] |
|||
export default{ |
|||
install(Vue, opt){ |
|||
components.forEach(v=>{ |
|||
Vue.component(v.name, v) |
|||
}) |
|||
} |
|||
} |
|||
@ -0,0 +1,161 @@ |
|||
<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> |
|||
@ -0,0 +1,77 @@ |
|||
<style lang="scss"> |
|||
.container{ |
|||
min-height:100%; |
|||
background:#f6f6f6; |
|||
padding:30rpx 0; |
|||
|
|||
.card{ |
|||
.name{ |
|||
display:flex; |
|||
align-items: center; |
|||
margin-bottom:20rpx; |
|||
text{ |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
color:#fff; |
|||
font-size:20rpx; |
|||
border-radius: 0px 20rpx 0px 20rpx; |
|||
background:#10C176; |
|||
width:80rpx; |
|||
height:40rpx; |
|||
text-align: center; |
|||
line-height: 40rpx; |
|||
margin-right:10rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
flex-grow: 1; |
|||
display:flex; |
|||
align-items: center; |
|||
font-weight: bold; |
|||
margin-right:20rpx; |
|||
&:after{ |
|||
content:"("attr(data-unit)")"; |
|||
font-weight: bold; |
|||
color:#999; |
|||
font-size:24rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.company{ |
|||
text{ |
|||
font-size:24rpx; |
|||
&:first-child{ |
|||
color:#FBA83C; |
|||
margin-right:16rpx; |
|||
} |
|||
&:nth-child(2){ |
|||
color:#999; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<view class="container"> |
|||
<d-search/> |
|||
|
|||
<view class="card" @click="$u.route({url:'pages/massif/agrSpecs'})"> |
|||
<view class="name"> |
|||
<text>化肥</text> <text data-unit="袋">中量元素水溶肥</text> <text class="plant-youbian"/> |
|||
</view> |
|||
<view class="company"> |
|||
<text>微量元素肥</text> <text>云南云天化股份有限公司</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
Loading…
Reference in new issue