xjc-vue/src/views/xjc-integratedmachine/plan/aim/aim_explanation_knowledge.vue

<template>
  <div class="maturity-game-page">
    <head-component :headinfo="headinfo"></head-component>
    <div class="d fd">
      <div class="d fd1" :style="fd1Style"></div>
    </div>
    <div class="wdiv"></div>
    <div class="wdiv1" :style="wdiv1Style"></div>
    <div class="wdiv2" @click="next()"></div>
    <drag_component></drag_component>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const headinfo = ref({});

function setHeadinfo() {
  headinfo.value = {
    title: "时间管理4D法",
    user: {
      avatar: "头像路径",
      nickName: "张三",
    },
    backUrl: "/xjc-integratedmachine/plan/aim/aim_management_index",
    backUrlUse: true,
  };
}

onMounted(() => {
  setHeadinfo();
});

// fd1初始样式
const fd1Style = ref({
  background:
    'url("/src/assets/images/timeManagement/know1.png") -177px -158px',
  height: "1818px",
});

// wdiv1初始样式
const wdiv1Style = ref({
  top: "1752px",
});

function next() {
  // 修改fd1样式
  fd1Style.value.background =
    'url("/src/assets/images/timeManagement/smart.png") -177px -137px';
  fd1Style.value.height = "1594px";

  // 修改wdiv1样式
  wdiv1Style.value.top = "1515px"; // 滚动页面到顶部
  window.scrollTo({
    top: 0,
    behavior: "smooth", // 平滑滚动，可去掉改成 instant
  });
}
</script>

<style scoped lang="scss">
.wdiv {
  width: 131px;
  height: 200px;
  background: #fff;
  position: absolute;
  top: 1695px;
  left: 1712px;
}
.wdiv1 {
  width: 131px;
  height: 215px;
  background: #fff;
  position: absolute;
  top: 1752px;
  left: 1604px;
}
.wdiv2 {
  width: 245px;
  height: 71px;
  position: absolute;
  top: 1880px;
  left: 843px;
}
.fd1 {
  width: 100%;
  height: 1818px;
  background: url("/src/assets/images/timeManagement/know1.png") -177px -158px;
}

.fd1.changeBg {
  background: url("/src/assets/images/timeManagement/smart.png") -177px -158px;
}
.fd {
  width: 1832px;
  height: 2096px;
  box-sizing: border-box;
  padding: 30px 140px;
  background-color: #fff;
  position: absolute;
  border-radius: 42px;
  top: 124px;
  left: 42px;
}
.maturity-game-page {
  //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
  //     no-repeat;
  background: linear-gradient(to right, #bef3fc, #3dd3f5);
  background-attachment: fixed;
  z-index: 10;
  width: 100%;
  min-height: 100vh;
  height: 2256px;
  position: relative;

  .page-content {
    width: 100%;
    position: relative;
    padding-top: 123px;
    min-height: calc(100vh - 123px);
    padding-bottom: 0px; // 添加底部内边距防止内容贴边

    .top {
      width: 100%;
      height: 212px;
      display: flex;
      justify-content: center;
      margin-top: 104px;
      img {
        width: 864px;
        height: 212px;
      }
    }
    .bottom {
      width: 100%;
      height: 248px;
      display: flex;
      justify-content: space-around;
      margin-top: 186px;
      img {
        width: 398px;
        height: 248px;
      }
    }
  }
}
</style>