129 lines
2.5 KiB
Vue
129 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<view class="card">
|
||
|
|
<view class="card-li tit">
|
||
|
|
<view class="">
|
||
|
|
土地
|
||
|
|
</view>
|
||
|
|
<view style="color: #00A15E;font-weight: bold;">
|
||
|
|
未种植
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="card-li tit">
|
||
|
|
<view class="">
|
||
|
|
面积: 10亩
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="card">
|
||
|
|
<view class="card-li">
|
||
|
|
<view class="card-li-tit">
|
||
|
|
种植品牌
|
||
|
|
</view>
|
||
|
|
<view class="">
|
||
|
|
<up-input placeholder="请输入品种" border="surround" v-model="value" @change="change"></up-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="card-li">
|
||
|
|
<view class="card-li-tit">
|
||
|
|
具体品种
|
||
|
|
</view>
|
||
|
|
<view class="">
|
||
|
|
<up-input placeholder="请输入品种" border="surround" v-model="value" @change="change"></up-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="card-li">
|
||
|
|
<view class="card-li-tit">
|
||
|
|
种子品牌
|
||
|
|
</view>
|
||
|
|
<view class="">
|
||
|
|
<up-input placeholder="请输入品种" border="surround" v-model="value" @change="change"></up-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="card-li">
|
||
|
|
<view class="card-li-tit">
|
||
|
|
种子收购时间
|
||
|
|
</view>
|
||
|
|
<view class="">
|
||
|
|
<up-input placeholder="点击输入时间" border="surround" v-model="value"
|
||
|
|
@focus="showDatePicker=true"></up-input>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="confim-btn">
|
||
|
|
确认
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="up-img confim-btn">
|
||
|
|
+上传播种图片
|
||
|
|
</view>
|
||
|
|
<view class="today-btn confim-btn">
|
||
|
|
今日播种
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 组件 -->
|
||
|
|
<view class="">
|
||
|
|
<up-calendar :closeOnClickOverlay='true' :show="showDatePicker" @confirm="confirm"
|
||
|
|
@close="showDatePicker=false"></up-calendar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
reactive,
|
||
|
|
ref
|
||
|
|
} from "vue"
|
||
|
|
const showDatePicker = ref(false)
|
||
|
|
|
||
|
|
const formData = reactive({
|
||
|
|
brand: "",
|
||
|
|
variety: "",
|
||
|
|
|
||
|
|
})
|
||
|
|
const confirm = (e) => {
|
||
|
|
console.log(e)
|
||
|
|
showDatePicker.value = false
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.tit {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-li-tit {
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.confim-btn {
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 196.26rpx;
|
||
|
|
height: 66.59rpx;
|
||
|
|
/* border: ; */
|
||
|
|
border: #00A15E 1px solid;
|
||
|
|
color: #00A15E;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.up-img {
|
||
|
|
width: 341.71rpx
|
||
|
|
}
|
||
|
|
|
||
|
|
.today-btn {
|
||
|
|
width: 588.79rpx;
|
||
|
|
background-color: #00A15E;
|
||
|
|
color: white;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 40rpx;
|
||
|
|
/* transform: ; */
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: linear-gradient(to right, #00A15E, #4CC593);
|
||
|
|
/* margin: 0 auto; */
|
||
|
|
}
|
||
|
|
</style>
|