<template>
  <div class="hobby-set">
    <div class="app-lock margin-top15">
      <div class="pf500 fs14 fc333333">语言</div>
      <div class="password-right pf500 fs14 fc999999">
        简体中文
        <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
      </div>
    </div>
    <div class="app-lock margin-top22">
      <div class="pf500 fs14 fc333333">主题模式</div>
      <div class="password-right pf500 fs14 fc999999">
        跟随系统
        <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
      </div>
    </div>
    <div class="app-lock margin-top22">
      <div class="pf500 fs14 fc333333">颜色设置</div>
      <div class="password-right pf500 fs14 fc999999">
        绿涨红跌
        <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
      </div>
    </div>
    <div class="app-lock margin-top22">
      <div class="pf500 fs14 fc333333">交易通知</div>
      <div class="password-right pf500 fs14 fc999999">
        <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
      </div>
    </div>
    <div class="hidden-address">
      <div class="pf500 fs14 fc333333">点击K线带入价格</div>
      <Switch v-model="price" :disabled="false"></Switch>
    </div>
    <div class="hidden-address">
      <div class="pf500 fs14 fc333333">点击订单表带入数量</div>
      <Switch v-model="number" :disabled="false"></Switch>
    </div>
  </div>
</template>
<script setup>
  import Switch from "../../../components/ui/Switch.vue";
  import { ref } from "vue";

  const price = ref(true);
  const number = ref(false);
</script>
<style lang="less" scoped>
  .hobby-set {
    margin-top: 15px;
    width: 349rpx;

    .margin-top15 {
      margin-top: 15px;
    }

    .margin-top22 {
      margin-top: 22px;
    }

    .app-lock {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 349px;
      height: 24px;

      .password-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        height: 24px;

        img {
          margin-left: 7.5px;
          margin-right: 7.5px;
        }
      }
    }

    .hidden-address {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      width: 349px;
      height: 24px;
    }
  }
</style>
