|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <Popup v-model:show="show" class="problem-reminder-popup">
|
|
|
+ <div class="problem-reminder">
|
|
|
+ <!-- 标题区域 -->
|
|
|
+ <div class="problem-reminder-header">
|
|
|
+ <div class="title-section">
|
|
|
+ <div class="main-title">填写以下问题</div>
|
|
|
+ <div class="sub-title">为您定制农事提醒</div>
|
|
|
+ </div>
|
|
|
+ <img class="header-icon" src="@/assets/img/home/file-icon.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="question-section-wrapper">
|
|
|
+ <span class="question-text">在白点期,您当前农场是否出现白点?</span>
|
|
|
+ <div class="img"></div>
|
|
|
+ <div class="options-section">
|
|
|
+ <span class="options-label">您可以选择</span>
|
|
|
+ <div class="options-buttons">
|
|
|
+ <div class="option-btn">拍照识别</div>
|
|
|
+ <div class="option-btn">咨询专家</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 底部按钮区域 -->
|
|
|
+ <div class="bottom-buttons">
|
|
|
+ <div class="bottom-btn no-btn" @click="noClick">否</div>
|
|
|
+ <div class="bottom-btn yes-btn" @click="yesClick">是</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Popup>
|
|
|
+ <Popup v-model:show="noShow" class="no-popup">
|
|
|
+ <div class="no-popup-title">
|
|
|
+ <span>感谢您的配合</span>
|
|
|
+ <div class="no-popup-title-sub">飞鸟将会记录下您当前的农场情况</div>
|
|
|
+ </div>
|
|
|
+ <div class="no-popup-btn" @click="noShow = false">我知道了</div>
|
|
|
+ </Popup>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { Popup } from "vant";
|
|
|
+import { ref } from "vue";
|
|
|
+
|
|
|
+const show = ref(true);
|
|
|
+const noShow = ref(false);
|
|
|
+const noClick = () => {
|
|
|
+ show.value = false;
|
|
|
+ noShow.value = true;
|
|
|
+}
|
|
|
+const yesClick = () => {
|
|
|
+ console.log("yesClick");
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.problem-reminder-popup {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 20px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image: linear-gradient(180deg, #d1e7fd 0%, #ffffff 25%);
|
|
|
+ .problem-reminder {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // 标题区域样式
|
|
|
+ .problem-reminder-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 15px;
|
|
|
+
|
|
|
+ .title-section {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #1d1e1f;
|
|
|
+ line-height: 1.2;
|
|
|
+ div {
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-icon {
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ margin-top: -10px;
|
|
|
+ margin-right: -5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .question-section-wrapper {
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 10px 8px;
|
|
|
+ margin-top: -10px;
|
|
|
+ background-color: #fff;
|
|
|
+ .question-text {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #252525;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ margin: 12px 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 140px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: green;
|
|
|
+ }
|
|
|
+ .options-section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: rgba(33, 153, 248, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 7px 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ .options-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2199F8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .options-buttons {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ .option-btn {
|
|
|
+ padding: 5px 14px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: #fff;
|
|
|
+ color: #252525;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 底部按钮区域样式
|
|
|
+ .bottom-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .bottom-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-radius: 25px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+
|
|
|
+ &.yes-btn {
|
|
|
+ background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.no-popup {
|
|
|
+ width: 76%;
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 28px 15px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .no-popup-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ .no-popup-title-sub{
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .no-popup-btn {
|
|
|
+ background-color: #2199F8;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 20px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 32px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi
