|
@@ -1,9 +1,70 @@
|
|
<script setup>
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
import dayjs from "dayjs";
|
|
-import { computed, onMounted, onUnmounted, ref } from "vue";
|
|
|
|
|
|
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
|
import { WindowMenuStore } from "@/components/WindowQingXiCheAndQv/store/WindowMenuStore.js";
|
|
import { WindowMenuStore } from "@/components/WindowQingXiCheAndQv/store/WindowMenuStore.js";
|
|
import { ComVal } from "../ThreeWorldEventQingXiCheAndQv/common/ComVal.js";
|
|
import { ComVal } from "../ThreeWorldEventQingXiCheAndQv/common/ComVal.js";
|
|
|
|
|
|
|
|
+let objMainContent = ref(null);
|
|
|
|
+
|
|
|
|
+watch(
|
|
|
|
+ () => WindowMenuStore().obj.index,
|
|
|
|
+ (newVal, oldVal) => {
|
|
|
|
+
|
|
|
|
+ console.log("WindowMenuStore().obj.index ---", WindowMenuStore().obj.index);
|
|
|
|
+
|
|
|
|
+ objMainContentEvent();
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const objMainContentEvent = () => {
|
|
|
|
+
|
|
|
|
+ setTimeout(function() {
|
|
|
|
+
|
|
|
|
+ // console.log("objMainContent", objMainContent);
|
|
|
|
+ let objHtml = objMainContent.value;
|
|
|
|
+ let divAll = objHtml.getElementsByTagName("div");
|
|
|
|
+
|
|
|
|
+ // 找到最后出现的完成对象
|
|
|
|
+ let obj = null;
|
|
|
|
+
|
|
|
|
+ for (let i = 0; i < divAll.length; i++) {
|
|
|
|
+ let objDiv = divAll[i];
|
|
|
|
+ let className = objDiv.className;
|
|
|
|
+
|
|
|
|
+ if (className.indexOf("oneYes") >= 0) {
|
|
|
|
+ obj = objDiv.parentNode;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (obj != null && obj != undefined) {
|
|
|
|
+
|
|
|
|
+ // 获取容器的当前滚动轴
|
|
|
|
+ let scrollTop = objHtml.scrollTop;
|
|
|
|
+ // 容器坐标
|
|
|
|
+ let scrollTopY = objHtml.getBoundingClientRect().top;
|
|
|
|
+ // 获取当前对象的所在容器的坐标
|
|
|
|
+ let scrollTopObj = obj.getBoundingClientRect().top;
|
|
|
|
+
|
|
|
|
+ // 通过坐标差和滚动的结果,得到真实的 Y 坐标
|
|
|
|
+ let newY = scrollTopObj + scrollTop - scrollTopY;
|
|
|
|
+
|
|
|
|
+ // 滚动调自动滚动到对应的选中位置
|
|
|
|
+ objHtml.scrollTop = newY;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }, 500);
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+onMounted(() => {
|
|
|
|
+ objMainContentEvent();
|
|
|
|
+});
|
|
|
|
+
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
@@ -11,13 +72,13 @@ import { ComVal } from "../ThreeWorldEventQingXiCheAndQv/common/ComVal.js";
|
|
|
|
|
|
<div class="main">
|
|
<div class="main">
|
|
<div class="title" >任务提示</div>
|
|
<div class="title" >任务提示</div>
|
|
- <div class="content commonsScrollbar" >
|
|
|
|
|
|
+ <div ref="objMainContent" class="content commonsScrollbar" >
|
|
|
|
|
|
<div v-for="(item, index) of WindowMenuStore().obj.list" :key="index" >
|
|
<div v-for="(item, index) of WindowMenuStore().obj.list" :key="index" >
|
|
|
|
|
|
<div :class="'list ' + (index == WindowMenuStore().obj.index ? 'listBg' : '' )" >
|
|
<div :class="'list ' + (index == WindowMenuStore().obj.index ? 'listBg' : '' )" >
|
|
|
|
|
|
- <div class="one">
|
|
|
|
|
|
+ <div :class="'one ' + ( index < WindowMenuStore().obj.index ? 'oneYes' : '')">
|
|
<img v-if="index < WindowMenuStore().obj.index" class="selectImg" src="./img/menu/yes.webp" />
|
|
<img v-if="index < WindowMenuStore().obj.index" class="selectImg" src="./img/menu/yes.webp" />
|
|
</div>
|
|
</div>
|
|
<div class="two" >
|
|
<div class="two" >
|