|
|
@@ -51,7 +51,7 @@
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
|
|
|
- <div class="alert-list">
|
|
|
+ <div class="alert-list" v-show="!isBackground">
|
|
|
<div
|
|
|
v-for="item in alertCards"
|
|
|
:key="item.id"
|
|
|
@@ -82,20 +82,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</floating-panel>
|
|
|
-
|
|
|
- <div class="expand-btn-wrap" v-show="height === defaultHeight">
|
|
|
- <span>{{ t("growthReport.cropTitle") }}</span>
|
|
|
- <div class="expand-btn" @click="handleExpandBtnClick">
|
|
|
- <span>{{ t("growthReport.expand") }}</span>
|
|
|
- <el-icon><ArrowUpBold /></el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { FloatingPanel, Icon } from "vant";
|
|
|
-import { ArrowUpBold, Link } from "@element-plus/icons-vue";
|
|
|
+import { Link } from "@element-plus/icons-vue";
|
|
|
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
|
|
import { useI18n } from "@/i18n";
|
|
|
|
|
|
@@ -141,12 +133,12 @@ const handleSelectCrop = (name) => {
|
|
|
emit("switchCategory", name);
|
|
|
};
|
|
|
|
|
|
-const PANEL_HEADER_BAR = 30; // 隐藏原生 header 后,内容顶部留白
|
|
|
+const PANEL_HEADER_BAR = 30; // van-floating-panel 原生 header 高度
|
|
|
const PANEL_BOTTOM_GAP = 16;
|
|
|
+const COLLAPSED_HEIGHT = 130;
|
|
|
|
|
|
-const defaultHeight = ref(0);
|
|
|
-const fullHeight = Math.round(window.innerHeight);
|
|
|
-const anchors = ref([defaultHeight.value, 280 + tabBarHeight.value, fullHeight]);
|
|
|
+const defaultHeight = ref(COLLAPSED_HEIGHT);
|
|
|
+const anchors = ref([defaultHeight.value + tabBarHeight.value, 280 + tabBarHeight.value]);
|
|
|
const height = ref(anchors.value[1]);
|
|
|
|
|
|
const isBackground = ref(false);
|
|
|
@@ -164,14 +156,14 @@ const syncMidAnchor = () => {
|
|
|
contentH + PANEL_HEADER_BAR + PANEL_BOTTOM_GAP + tabBarHeight.value
|
|
|
);
|
|
|
// 留一点顶部空间,避免直接顶满屏
|
|
|
- const maxMid = fullHeight - 48;
|
|
|
+ const maxMid = Math.round(window.innerHeight) - 48;
|
|
|
const nextMid = Math.max(240, Math.min(idealMid, maxMid));
|
|
|
|
|
|
if (Math.abs(nextMid - anchors.value[1]) < 2) return;
|
|
|
|
|
|
syncing = true;
|
|
|
const wasAtMid = Math.abs(height.value - anchors.value[1]) < 2;
|
|
|
- anchors.value = [defaultHeight.value, nextMid, fullHeight];
|
|
|
+ anchors.value = [defaultHeight.value, nextMid];
|
|
|
if (wasAtMid) {
|
|
|
height.value = nextMid;
|
|
|
}
|
|
|
@@ -206,15 +198,10 @@ const handlePatrolTip = (item) => {
|
|
|
};
|
|
|
|
|
|
const handleHeightChange = ({ height: nextHeight }) => {
|
|
|
- isBackground.value = nextHeight > anchors.value[1];
|
|
|
+ isBackground.value = nextHeight < anchors.value[1];
|
|
|
emit("heightChange", nextHeight);
|
|
|
};
|
|
|
|
|
|
-const handleExpandBtnClick = () => {
|
|
|
- height.value = anchors.value[1];
|
|
|
- emit("heightChange", anchors.value[1]);
|
|
|
-};
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
nextTick(() => {
|
|
|
// 等布局完成后再量一次,避免首屏高度偏小
|
|
|
@@ -249,26 +236,26 @@ onBeforeUnmount(() => {
|
|
|
background: transparent;
|
|
|
|
|
|
::v-deep {
|
|
|
- .van-floating-panel__content {
|
|
|
+ .van-floating-panel__header {
|
|
|
background: transparent;
|
|
|
- overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
- // 隐藏拖拽条,并取消其占位
|
|
|
- .van-floating-panel__header {
|
|
|
- height: 0 !important;
|
|
|
- min-height: 0 !important;
|
|
|
- padding: 0 !important;
|
|
|
- margin: 0 !important;
|
|
|
- overflow: hidden;
|
|
|
- opacity: 0;
|
|
|
- pointer-events: none;
|
|
|
+ .van-floating-panel__header-bar {
|
|
|
+ width: 36px;
|
|
|
+ height: 4px;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-floating-panel__content {
|
|
|
+ background: transparent;
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.floating-panel-content {
|
|
|
width: calc(100% - 20px);
|
|
|
- margin: 30px auto 0; // 补偿隐藏 header 的 30px,整体下移
|
|
|
+ margin: 0 auto;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
@@ -413,32 +400,17 @@ onBeforeUnmount(() => {
|
|
|
}
|
|
|
|
|
|
&.background-panel {
|
|
|
- background: #f5f7fb;
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-.expand-btn-wrap {
|
|
|
- position: absolute;
|
|
|
- bottom: 62px;
|
|
|
- left: 12px;
|
|
|
- width: calc(100% - 24px);
|
|
|
- background-image: linear-gradient(180deg, #d7eafc 0%, #ffffff 100%);
|
|
|
- border-radius: 14px;
|
|
|
- padding: 15px 12px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
-
|
|
|
- .expand-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 4px;
|
|
|
- font-size: 13px;
|
|
|
- color: #2199f8;
|
|
|
+ .panel-shell {
|
|
|
+ padding: 6px 10px 10px 10px;
|
|
|
+ background: url("@/assets/img/report/type-bg.png");
|
|
|
+ background-size: calc(100vw - 20px) 40px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center top;
|
|
|
+ .crop-header {
|
|
|
+ // padding-bottom: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|