web_dist/src/components/zhu-yuan-yi-sheng/yi-zhu-lu-ru/GongJuZuJian.vue

<template>
  <div class="gong-ju-body" style="right: 20px;top: 100px;" @click="dianJiGongJuLan">
    <div class="gong-ju-wen-zi"><i class="el-icon-setting"></i></div>
  </div>
  <el-dialog title="工具箱" v-model="dialog">
    兼容模式：
    <el-switch
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="启用"
        inactive-text="停用"
        :active-value="true"
        :inactive-value="false"
        v-model="jianRongMoShi"
        @change="dianJiJianRongKaiGuan"
    >
    </el-switch>
    <span style="color: #e9ae62;margin-left: 10px;">如果电脑过于卡顿请使用该模式</span>
  </el-dialog>
</template>

<script>
import {ref} from "vue";
import store from '../../../store'

export default {
  name: "GongJuZuJian",
  setup() {
    const dialog = ref(false)
    const jianRongMoShi = ref(true)
    jianRongMoShi.value = store.state.app.yiZhuLuRu.jianRongMoShi

    const dianJiGongJuLan = () => {
      dialog.value = true
    }

    const dianJiJianRongKaiGuan = (val) => {
      store.commit('app/setJianRongMuShi', val)
    }

    return {
      dianJiGongJuLan,
      dialog,
      jianRongMoShi,
      dianJiJianRongKaiGuan
    }
  }

}
</script>

<style scoped>
.gong-ju-body {
  position: fixed;
  background-color: #bacff3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #bacff3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 6px #0000001f;
  cursor: pointer;
  z-index: 5;
}

.gong-ju-wen-zi {
  height: 100%;
  width: 100%;
  background-color: rgb(242, 245, 246);
  box-shadow: rgb(0 0 0 / 12%) 0 0 6px;
  text-align: center;
  line-height: 40px;
  color: rgb(25, 137, 250);
}
</style>