sanitizing-machine/src/components/Setting/index.vue

<template>
  <div class="setting_contaienr">
    <div class="left_container">
      <div class="tab_wrap" @click="changeActiveTab(1)">
        <p class="active_line" v-show="activeTab == 1"></p>
        <p :class="activeTab == 1 ? 'title active' : 'title'">设备参数配置</p>
        <div :class="activeTab == 1 ? 'btn style-btn' : 'dis_btn'">配置</div>
      </div>
      <div class="tab_wrap" @click="changeActiveTab(2)">
        <p class="active_line" v-show="activeTab == 2"></p>
        <p :class="activeTab == 2 ? 'title active' : 'title'">修改管理员密码</p>
        <div :class="activeTab == 2 ? 'btn style-btn' : 'dis_btn'">修改</div>
      </div>
      <div class="tab_wrap" @click="changeActiveTab(3)">
        <p class="active_line" v-show="activeTab == 3"></p>
        <p :class="activeTab == 3 ? 'title active' : 'title'">用户管理</p>
        <div :class="activeTab == 3 ? 'btn style-btn' : 'dis_btn'">管理</div>
      </div>
      <div class="tab_wrap" @click="changeActiveTab(4)">
        <p class="active_line" v-show="activeTab == 4"></p>
        <p :class="activeTab == 4 ? 'title active' : 'title'">日期/时间设置</p>
        <div :class="activeTab == 4 ? 'btn style-btn' : 'dis_btn'">配置</div>
      </div>
    </div>
    <div class="right_container">
      <Admin v-if="activeTab == 2" />
      <Date v-if="activeTab == 4" />
      <Device v-if="activeTab == 1" />
      <User v-if="activeTab == 3" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Admin from './components/Admin.vue'
import Date from './components/Date.vue'
import Device from './components/Device.vue'
import User from './components/User.vue'
import { getAllUserJSON } from '@/mock/command'
import { useWebSocketStore } from '@/store'

const webSocketStore = useWebSocketStore()

const activeTab = ref(1)

const changeActiveTab = index => {
  activeTab.value = index
  if (index == 3) {
    webSocketStore.sendCommandMsg(getAllUserJSON)
  }
}
</script>

<style lang="scss" scoped>
.setting_contaienr {
  display: flex;
  align-items: center;
  margin-bottom: 19px;
  height: 580px;
  box-sizing: border-box;
  .left_container {
    height: 580px;
    width: 424px;
    margin-right: 30px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #ffffff;
    padding: 20px;
    padding-bottom: 180px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, 1fr);
    row-gap: 20px;
    .tab_wrap {
      width: 384px;
      height: 80px;
      border-radius: 14px;
      background: #f6f6f6;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      padding-left: 37px;
      position: relative;
      .title {
        font-family: Zona Pro;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 0.06em;
        color: #000000;
      }
      .active {
        color: #06518b;
      }
      .btn {
        width: 87px;
        height: 45px;
        border-radius: 23px;
        background: #06518b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0.1em;
        color: #ffffff;
      }
      .dis_btn {
        width: 87px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0.1em;
        color: #06518b;
      }
      .active_line {
        position: absolute;
        left: 20px;
        top: 24px;
        width: 4px;
        height: 32px;
        border-radius: 2px;
        background: #06518b;
      }
    }
  }
  .right_container {
    height: 580px;
    flex: 1;
    box-sizing: border-box;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
  }
}
</style>