|
|
@@ -0,0 +1,192 @@
|
|
|
+<template>
|
|
|
+ <div class="prescription-page">
|
|
|
+ <div class="prescription-title">
|
|
|
+ <img @click="goBack" src="@/assets/img/home/back.png" alt="" />
|
|
|
+ <div class="title-name">农事处方维护单</div>
|
|
|
+ <div class="title-desc">请确定您的果园设施以及内容</div>
|
|
|
+ </div>
|
|
|
+ <div class="prescription-box">
|
|
|
+ <div class="box-title">
|
|
|
+ <img src="@/assets/img/home/label-icon.png" />
|
|
|
+ 农场设施
|
|
|
+ </div>
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-item" v-for="(group, i) in prescriptionList" :key="i">
|
|
|
+ <div class="item-name">{{group.name}}</div>
|
|
|
+ <div class="item-checkbox">
|
|
|
+ <el-radio-group v-model="group.checked">
|
|
|
+ <el-radio-button v-for="(item, index) in group.items" :key="index" :label="item.name" :value="item.name" />
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="prescription-box">
|
|
|
+ <div class="box-title">
|
|
|
+ <img src="@/assets/img/home/label-icon.png" />
|
|
|
+ 生产基础
|
|
|
+ </div>
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-item" v-for="(group, i) in productList" :key="i">
|
|
|
+ <div class="item-name">{{group.name}}</div>
|
|
|
+ <div class="item-checkbox">
|
|
|
+ <el-radio-group v-model="group.checked">
|
|
|
+ <el-radio-button v-for="(item, index) in group.items" :key="index" :label="item.name" :value="item.name" />
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="prescription-box">
|
|
|
+ <div class="box-title">
|
|
|
+ <img src="@/assets/img/home/label-icon.png" />
|
|
|
+ 投入产出
|
|
|
+ </div>
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-item" v-for="(group, i) in outputList" :key="i">
|
|
|
+ <div class="item-name">{{group.name}}</div>
|
|
|
+ <div class="item-checkbox">
|
|
|
+ <el-radio-group v-model="group.checked">
|
|
|
+ <el-radio-button v-for="(item, index) in group.items" :key="index" :label="item.name" :value="item.name" />
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="submit-btn">生成处方</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+const router = useRouter();
|
|
|
+const prescriptionList = ref([
|
|
|
+ {name: "喷药方式", items: [{name: "植保机"}, {name: "人工"}, {name: "喷药车"}]},
|
|
|
+ {name: "肥水设施", items: [{name: "漫灌"}, {name: "滴灌"}, {name: "喷灌"}, {name: "无"}]},
|
|
|
+ {name: "除草方式", items: [{name: "人工"}, {name: "除草机"}]},
|
|
|
+ {name: "生长调节", items: [{name: "人工"}, {name: "药物"}]},
|
|
|
+])
|
|
|
+const productList = ref([
|
|
|
+ {name: "土壤类型", items: [{name: "砂质土"}, {name: "黏质土"}, {name: "壤土"}]},
|
|
|
+ {name: "土壤改善", items: [{name: "结果树需要"}, {name: "全需要"}]},
|
|
|
+ {name: "除草方式", items: [{name: "结果树需要"}, {name: "全需要"}]},
|
|
|
+])
|
|
|
+const outputList = ref([
|
|
|
+ {name: "品质要求", items: [{name: "品质优先"}, {name: "质量优先"}]},
|
|
|
+ {name: "农残要求", items: [{name: "出口"}, {name: "商超"}, {name: "量贩"}]},
|
|
|
+])
|
|
|
+
|
|
|
+const goBack = () => {
|
|
|
+ router.go(-1)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.prescription-page {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(to left, #E6F2FF, #8Fc5FE);
|
|
|
+ .prescription-title {
|
|
|
+ padding: 16px 14px;
|
|
|
+ background: url('@/assets/img/home/page-bg.png') no-repeat bottom right /149px 116px;
|
|
|
+ background-position-y: 30px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ }
|
|
|
+ .title-name {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #2E2E2E;
|
|
|
+ text-shadow: 0px 1px 1px rgba(0,0,0,0.05);
|
|
|
+ font-weight: 800;
|
|
|
+ padding: 21px 0 4px 6px;
|
|
|
+ }
|
|
|
+ .title-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(49,49,49,0.56);
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .prescription-box {
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 0 10px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .box-title {
|
|
|
+ margin: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid rgba(0,0,0,0.17);
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #222222;
|
|
|
+ padding: 15px 0 10px;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-content {
|
|
|
+ padding: 0 10px;
|
|
|
+ .box-item {
|
|
|
+ padding-top: 10px;
|
|
|
+ .item-name {
|
|
|
+ font-size: 15px;
|
|
|
+ color: rgba(0,0,0,0.9);
|
|
|
+ }
|
|
|
+ .item-checkbox {
|
|
|
+ ::v-deep {
|
|
|
+ .el-radio-button {
|
|
|
+ margin: 10px 7px 0 0;
|
|
|
+ .el-radio-button__inner {
|
|
|
+ border: none;
|
|
|
+ background: #F1F1F1;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 18px 30px;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0);
|
|
|
+ color: #000000;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ &.is-active {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 18px;
|
|
|
+ height: 16px;
|
|
|
+ background: url('@/assets/img/home/checked-bg.png') no-repeat bottom right / 18px 16px;
|
|
|
+ }
|
|
|
+ .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
|
|
|
+ background: #FFFFFF;
|
|
|
+ color: #2199F8;
|
|
|
+ border: 2px solid #2199F8;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submit-btn {
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
+ background: #2199F8;
|
|
|
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
|
|
|
+ border-radius: 10px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 10px 45px 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|