tropsCode/src/views/set/index.vue

<template>
  <div class="set">
    <Header @confirmExit="confirmExit"></Header>
    <div class="main">
      <div class="li" @click="getConfig">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set1.png"></div>
          <div class="name">
            部署
          </div>
        </div>
      </div>
      <div class="li" @click="getConsole">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set1.png"></div>
          <div class="name">
            调试开关
          </div>
        </div>
      </div>
      <div class="li" @click="getLogout">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set2.png"></div>
          <div class="name">
            退出
          </div>
        </div>
      </div>
      <!-- <div class="li" @click="getGesture">
        <div class="liBox">
          <div class="pic"><img src="@/assets/images/common/set2.png"></div>
          <div class="name">
            手势项目
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup name="Login" lang="ts">
const { proxy } = getCurrentInstance() as any;
const router = useRouter();

//设置
const getConfig = () => {
  //跳转
  router.push({ path: '/set/config' });
};

// 退出
const getLogout = async () => {
  await proxy?.$modal.confirm("确定退出吗？").then(() => {
    proxy?.$modal.loading();
    let params = {};
    proxy?.$http.common.logout(params).then((res: any) => {
    });
    proxy?.$modal?.closeLoading()
    //跳转
    router.push({ path: '/login' });
  }).finally(() => {
  });
  //清空缓存
  //localStorage.clear();
  localStorage.removeItem('token');
  localStorage.removeItem('userInfo');
};

/**
 * 调试
*/
const getConsole = () => {
  const vConsoleIcon: any = document.querySelector('.vc-switch');
  let vConsole = localStorage.getItem('vConsole');
  if (vConsole == "1") {
    localStorage.setItem('vConsole', "0");
    vConsoleIcon.style.display = 'none';
  } else {
    localStorage.setItem('vConsole', "1");
    vConsoleIcon.style.display = 'block';
  }
};

/**
 * 返回
*/
const getGesture = () => {
  router.push({ path: '/gesture' });
};

/**
 * 返回
*/
const confirmExit = () => {
  router.go(-1);
};

onMounted(() => {

})
</script>

<style lang="scss" scoped>
$topPadding: 5.19rem;
$waiPadding: 6.51rem;

.main {
  width: calc(100% - ($waiPadding * 2));
  height: 60vh;
  padding-top: 10rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .li {
    width: 13vw;
    height: 19vw;
    border-radius: 1.6rem;
    box-sizing: border-box;
    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: 0 20px;
    background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);

    .liBox {
      .name {
        width: 100%;
        font-size: 2.48rem;
        color: #1A293A;
        padding: 0.5rem 0;
      }


      .pic {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        background: radial-gradient(78% 78% at 53% 50%, #07121A 0%, #2A4256 49%, #5180A9 100%);
        box-shadow: 0px 0px 2px 2px #FFFFFF;
        margin-bottom: 2vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        img {
          width: 50%;
          height: 50%;
          transition: all 1s;
        }
      }

    }

    &:hover {
      img {
        transform: translateY(-0.5vw);
      }
    }

  }

}
</style>