TraceabilityAPP/pages/growRecord/index.vue

138 lines
2.3 KiB
Vue

<template>
<view class="cont">
<view class="card">
<view class="tit">
<view class="">
1号土地
</view>
<view class="">
溯源码: 12302
</view>
</view>
<view class="card-li">
<view class="">
当前种植: 土豆
</view>
<view class="">
种植品牌: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
土地面积: 20
</view>
<view class="">
种子品牌: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
播种时间: 2020.12.01
</view>
</view>
</view>
<view class="operate">
<view class="tit">
操作选择
</view>
<view class="card">
<view class="operate-li">
胶水
</view>
<view class="operate-li">
胶水
</view>
<view class="operate-li">
胶水
</view>
<view class="operate-li">
胶水dassdd
</view>
<view class="operate-li">
胶水
</view>
<view class="operate-li">
胶水
</view>
</view>
</view>
</view>
<view class="ripe-btn">
完成今日操作
</view>
</template>
<script setup>
import {
ref,
reactive
} from "vue"
</script>
<style lang="scss" scoped>
.cont {
padding-top: 30rpx;
background-color: #F4F4F4;
min-height: 100vh;
}
.card {
.tit {
display: flex;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1px solid #EBF1EF;
}
.card-li {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
}
}
.operate {
width: 693.93rpx;
margin: auto;
.tit {
margin: 20rpx 0;
}
.card {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.operate-li {
font-size: 29.79rpx;
padding: 0 60rpx;
background-color: #F4F4F4;
margin-bottom: 28rpx;
height: 63.08rpx;
line-height: 63rpx;
border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
}
}
}
.ripe-btn {
position: fixed;
bottom: 50rpx;
left: 50%;
transform: translateX(-50%);
width: 588.79rpx;
height: 84.11rpx;
background-color: #00A15E;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
background: linear-gradient(to right, #00A15E, #4CC593);
}
</style>