RZGY/src/renderer/components/Animation.vue

<template>
  <div class="main_right_height">
    <div class="main_tab_double">
      <el-button
        :class="{
          xl_tab_active_button: singlePeople == 0,
          xl_tab_button: singlePeople != 0,
        }"
        style="margin-right: 50px"
        @click="singlePeople = 0"
        >单人训练</el-button
      >
      <el-button
        :class="{
          xl_tab_active_button: singlePeople == 1,
          xl_tab_button: singlePeople != 1,
        }"
        @click="singlePeople = 1"
        style="margin-right: 50px"
        >双人训练</el-button
      >

      <el-button
        :class="{
          xl_tab_active_button: singlePeople == 2,
          xl_tab_button: singlePeople != 2,
        }"
        @click="singlePeople = 2"
        >自主神经稳定性训练</el-button
      >
    </div>

    <div :class="{ animation_zong: true }">
      <div class="animation_main" v-show="singlePeople == 2">
        <div class="animation_k">
          <el-button
           @click="startFX"
            icon="el-icon-video-play"
            style="background-color: #1ba784; color: #fff; height: 200px; width: 200px;font-size:30px;
    box-shadow:inset -15px 0px  10px -15px #000,inset 0px -15px 15px -15px #000;"
            class="xl_tab_button"
          >
            启动</el-button
          >
        </div>
      </div>
      <div class="animation_main" v-show="singlePeople == 1">
        <div class="animation_k" @click="goPage('/menu/animationDes', 1)">
          <img class="animation_img_cla" src="../assets/newAnimation/tianping.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">天平倾斜</span>
        </div>
        <div class="animation_k" @click="goPage('/menu/animationDes', 2)">
          <img class="animation_img_cla" src="../assets/newAnimation/run.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">双人奔跑</span>
        </div>

        <div
          class="animation_k"
          @click="goPage('/menu/animationDes', 3)"
          style="visibility: hidden"
        >
          <img class="animation_img_cla" src="../assets/newAnimation/cat.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">心之花</span>
        </div>
      </div>
      <div class="animation_main" v-show="singlePeople == 1">
        <div
          class="animation_k"
          @click="goPage('/menu/animationDes', 1)"
          style="visibility: hidden"
        >
          <img class="animation_img_cla" src="../assets/newAnimation/tianping.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">天平倾斜</span>
        </div>
        <div
          class="animation_k"
          @click="goPage('/menu/animationDes', 2)"
          style="visibility: hidden"
        >
          <img class="animation_img_cla" src="../assets/newAnimation/run.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">双人奔跑</span>
        </div>

        <div
          class="animation_k"
          @click="goPage('/menu/animationDes', 3)"
          style="visibility: hidden"
        >
          <img class="animation_img_cla" src="../assets/newAnimation/cat.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">心之花</span>
        </div>
      </div>
      <div class="animation_main" v-show="singlePeople == 0">
        <div class="animation_k" @click="goPage('/menu/animationDes', 1)">
          <img class="animation_img_cla" src="../assets/newAnimation/long.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">龙飞行</span>
        </div>
        <div class="animation_k" @click="goPage('/menu/animationDes', 2)">
          <img class="animation_img_cla" src="../assets/newAnimation/ma.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">马奔跑</span>
        </div>

        <div class="animation_k" @click="goPage('/menu/animationDes', 3)">
          <img class="animation_img_cla" src="../assets/newAnimation/tianqi.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">天气变化</span>
        </div>
      </div>
      <div class="animation_main" v-show="singlePeople == 0">
        <div class="animation_k" @click="goPage('/menu/animationDes', 4)">
          <img class="animation_img_cla" src="../assets/newAnimation/yanhua.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">烟花</span>
        </div>
        <div class="animation_k" @click="goPage('/menu/animationDes', 5)">
          <img class="animation_img_cla" src="../assets/newAnimation/saiche.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">赛车</span>
        </div>
        <!-- display:none -->
        <!-- visibility: hidden -->
        <div
          class="animation_k"
          @click="goPage('/menu/animationDes', 2)"
          style="visibility: hidden"
        >
          <img class="animation_img_cla" src="../assets/newAnimation/cat.png" />
          <div class="animation_des">&nbsp;</div>
          <span class="animation_des_font">别点我</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

//想主进程发送信息
//主进程去启动服务
const { ipcRenderer } = require("electron");
export default {
  data() {
    return {
      singlePeople: 0,
    };
  },
  mounted(){

  },
  destroyed(){

  },
  methods: {
    startFX(){
      ipcRenderer.send("main-windows-fx-exe");
    },
    goPage(val, typeName) {
      //当singlePeople 为false时跳进双人选择的界面
      if (this.singlePeople) {
        this.$router.push({
          path: val,
          query: { gameType: typeName, single: this.singlePeople },
        });
      } else {
        this.$router.push({
          path: "/menu/animationDouble",
          query: { gameType: typeName, single: this.singlePeople },
        });
      }
    },
  },
};
</script>
<style scoped>
.animation_main {
  margin-top: 2vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* flex-wrap: wrap; */
}

.animation_img_cla {
  width: 307px;
  height: 250px;
}

.main_right_height {
  /* padding:40px; */
  height: 100vh !important;
  display: flex !important;
  overflow-y: auto !important;
  background-color: #ffffff;
  flex-direction: column;
}

.animation_main_two {
  margin-top: 8vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.animation_k {
  position: relative;
  cursor: pointer;
}

.animation_des {
  background: #0f0f0f;
  position: absolute;
  margin-top: -43px;
  line-height: 40px;
  display: flex;
  width: 100%;
  opacity: 0.3;
  color: #ffffff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  justify-content: center;
}

.animation_des_font {
  color: #ffffff;
  z-index: 100;
  position: absolute;

  position: absolute;
  margin-top: -43px;
  line-height: 40px;
  display: flex;
  width: 100%;
  /* opacity: 0.5; */
  color: #ffffff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  justify-content: center;
}

.main_tab_double {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10vh;
}

.xl_tab_button,
.xl_tab_button:hover,
.xl_tab_button:focus,
.xl_tab_button:active {
  background: #e4e4e4;
  opacity: 1;
  border-radius: 8px;
  border: 1px solid #e4e4e4;
  color: #000000;
  font-weight: 700;
  /* border-radius: 18px; */
  /* font-size: 14px; */
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: PingFang SC;
  font-weight: 400;
}

.xl_tab_active_button,
.xl_tab_active_button:hover,
.xl_tab_active_button:focus,
.xl_tab_active_button:active {
  background: #0fb577;
  opacity: 1;
  border-radius: 8px;
  border: 1px solid #0fb577;
  color: #ffffff;
  font-weight: 700;
  /* border-radius: 18px; */
  /* font-size: 14px; */
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: PingFang SC;
  font-weight: 400;
}

.animation_zong {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* justify-content: space-around; */
  flex: 1;
  padding-bottom: 20px;
}

.animation_zong_shuang {
  display: flex;
  flex-direction: column;

  flex: 1;
  padding-bottom: 20px;
}
</style>