<template>
  <!-- userSetting -->
  <div
    class="
      v-layout
      sds-personal-settings-window
      layout-window-app
      v-window
      active-win
    "
    style="
      position: absolute;
      width: 850px;
      height: 574px;
      top: 10px;
      left: 10px;
      z-index: 9040;
    "
  >
    <div class="v-window-header-wrapper draggable">
      <div
        class="app-icon"
        style="
          background-image: url('../../../public/image/index/personalSetting.png');
        "
      ></div>
      <div class="v-window-header-text">
        <div class="v-window-header-title">个人设置</div>
      </div>
      <div class="window-header-tool-wrapper light">
        <div class="tool help"></div>
        <div class="tool minimize"></div>
        <div class="tool maximize"></div>
        <div class="tool restore" style="display:none"></div>
        <div class="tool close"></div>
      </div>
    </div>
    <div  class="v-window-body">
      <div  class="v-trap-focus-indicator"></div>
      <div class="v-trap-focus-body">
        <div
          class="v-trap-focus-indicator"
        ></div>
        <div class="syno-sds-personal">
          <div
            class="
              v-layout
              syno-sds-personal-tabs
              layout-tabs-content
              v7
              v-tabs
            "
            id="tabs"
          >
            <div
              class="v-layout layout-tab-tbar v-tabs-bar"
              style="
                --svc-layout-padding: 16px 20px 0 20px;
                --svc-layout-margin: 0 0 0 0;
              "
            >
              <div class="v-tabs-nav-container">
                <div class="v-tabs-nav-wrap">
                  <div
                    
                    id="tab-account"
                    class="v-tabs-tab v-tabs-tab-active"
                  >
                    帐号
                    <div class="v-tabs-tab-text-guard">帐号</div>
                  </div>
                  <div
                    
                    id="tab-display-preferences"
                    class="v-tabs-tab"
                  >
                    显示首选项
                    <div class="v-tabs-tab-text-guard">显示首选项</div>
                  </div>
                  <div
                    id="tab-email"
                    class="v-tabs-tab"
                  >
                    电子邮件投递
                    <div class="v-tabs-tab-text-guard">电子邮件投递</div>
                  </div>
                  <div
                    id="tab-quota"
                    class="v-tabs-tab"
                  >
                    空间配额
                    <div class="v-tabs-tab-text-guard">空间配额</div>
                  </div>
                  <div
                    id="tab-others"
                    class="v-tabs-tab"
                  >
                    其他
                    <div class="v-tabs-tab-text-guard">其他</div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="v-layout layout-tab-body v-tabs-tab-content"
              style="
                --svc-layout-padding: 4px 20px 6px 20px;
                --svc-layout-margin: 0 0 0 0;
              "
            >
              <div
                id="tab-pane-account"
                class="v-tabs-tabpane"
                
              >
                <div  class="account-page">
                  <div  class="v-ps ps ps--active-y">
                    <form
                      class="v-layout layout-form v-form v-form-horizontal"
                      style="--svc-layout-padding: 8px 0px 0 0px"
                    >
                      <div  class="fieldset-body">
                        <div
                          
                          class="account-form-item v-form-item"
                        >
                          <div class="v-form-item-label">
                            <label>名称:</label>
                          </div>
                          <div class="v-form-item-input">
                            <div class="v-form-item-control">
                              <div>
                                <span  class="account-name"
                                  >synology</span
                                >
                              </div>
                            </div>
                          </div>
                        </div>
                        <div  class="v-form-item">
                          <div class="v-form-item-label">
                            <label for="syno-5">描述:</label>
                          </div>
                          <div class="v-form-item-input">
                            <div class="v-form-item-control">
                              <div>
                                <div
                                  class="v-textfield-wrapper"
                                >
                                  <div
                                    class="
                                      v-textfield-input-wrapper
                                      mask-password
                                    "
                                  >
                                    <input
                                      type="text"
                                      autocomplete="off"
                                      maxlength="63"
                                      name="fullname"
                                      class="v-textfield-input fit-container"
                                    />
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div  class="v-form-item">
                          <div class="v-form-item-label">
                            <label for="syno-6">电子邮件:</label>
                          </div>
                          <div class="v-form-item-input">
                            <div class="v-form-item-control has-success">
                              <div>
                                <div
                                  class="v-textfield-wrapper"
                                >
                                  <div
                                    class="
                                      v-textfield-input-wrapper
                                      mask-password
                                    "
                                  >
                                    <input
                                      type="text"
                                      autocomplete="off"
                                      name="email"
                                      class="v-textfield-input fit-container"
                                    />
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            
                            
                            class="v-whitetip-wrapper normal"
                          >
                            <span class="v-whitetip-icon"></span>
                            <div class="v-portal" style="display: none"></div>
                          </div>
                        </div>
                        <div  class="v-form-item">
                          <div class="v-form-item-label">
                            <label for="syno-7">界面显示语言</label>
                          </div>
                          <div class="v-form-item-input">
                            <div class="v-form-item-control">
                              <div>
                                <div
                                  class="v-select-wrapper readonly"
                                  style="width: 270px"
                                >
                                  <div class="input-wrapper">
                                    <input
                                      type="text"
                                      name="lang-select"
                                     
                                      readonly="readonly"
                                      
                                      autocomplete="off"
                                      
                                      class="v-select-input"
                                    />
                                    <span class="v-select-dropdown-icon"></span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div  class="introduceText">
                          查看您的帐户活动，包括当前的连接、信任的设备和登录历史。
                        </div>
                        <button
                          type="button"
                          class="v-btn v-btn-grey"
                        >
                          <span> 帐户活动 </span>
                        </button>
                      </div>
                      <div
                        
                        class="
                          v-layout
                          password-field-set
                          layout-fieldset
                          v-fieldset
                        "
                        
                        style="--svc-layout-padding: 0 0 0 0"
                      >
                        <div class="v-fieldset-title-wrapper">
                          <div class="v-fieldset-title">密码</div>
                        </div>
                        <div
                          style="
                            height: auto;
                            overflow: hidden;
                            transition-property: height;
                            transition-timing-function: ease;
                            transition-duration: 240ms;
                          "
                        >
                          <div
                            class="
                              v-layout
                              layout-fieldset-body
                              v-fieldset-body
                            "
                            style="--svc-layout-padding: 8px 8px 8px 8px"
                          >
                            <div  class="introduceText">
                              您的密码会保护您的帐户。您也可以通过双重验证加强保护。
                            </div>
                            <div  class="password-field">
                              <div  class="label text inline">
                                密码:
                              </div>
                              <div
                                
                                class="last-changed-desc text inline"
                              >
                                上次更改 : 2022-05-13
                              </div>
                              <button
                                
                                type="button"
                                class="btn v-btn v-btn-grey"
                              >
                                <span> 修改密码 </span>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        
                        class="
                          v-layout
                          signin-field-set
                          layout-fieldset
                          v-fieldset
                        "
                        
                        style="--svc-layout-padding: 8px 0 0 0"
                      >
                        <div class="v-fieldset-title-wrapper">
                          <div class="v-fieldset-title">登录方法</div>
                        </div>
                        <div
                          style="
                            height: auto;
                            overflow: hidden;
                            transition-property: height;
                            transition-timing-function: ease;
                            transition-duration: 240ms;
                          "
                        >
                          <div
                            class="
                              v-layout
                              layout-fieldset-body
                              v-fieldset-body
                            "
                            style="--svc-layout-padding: 8px 8px 8px 8px"
                          >
                            <div
                              
                              class="syno-securesignin-advance-signin-method"
                            >
                              <div class="signin-desc">
                                使用验证码 (OTP)
                                作为第二步登录验证来加强帐户安全性。
                              </div>
                              <div class="card-wrapper">
                                <div
                                  class="method-card-wrapper"
                                  style="display: none"
                                >
                                  <div class="method-card">
                                    <div class="card-icon"></div>
                                    <div class="card-info">
                                      <div class="title">无密码登录</div>
                                      <div class="content">
                                        通过 Synology Secure SignIn
                                        应用程序或硬件安全密钥登录
                                        DSM，无需输入密码。仍可选择使用密码。
                                      </div>
                                      <div
                                        class="signin_method first-step"
                                        style="display: none"
                                      >
                                        登录方法: <span class="bold"></span>
                                      </div>
                                    </div>
                                    <div class="arrow"></div>
                                  </div>
                                </div>
                                <div class="method-card-wrapper">
                                  <div class="method-card">
                                    <div class="card-icon"></div>
                                    <div class="card-info">
                                      <div class="title">双重验证</div>
                                      <div class="content">
                                        可通过实施第二步验证来增加安全性。
                                      </div>
                                      <div
                                        class="signin_method first-step"
                                        style="display: none"
                                      >
                                        第一步登录验证:
                                        <span class="bold">输入密码</span>
                                      </div>
                                      <div
                                        class="signin_method second-step"
                                        style="display: none"
                                      >
                                        第二步登录验证:
                                        <span class="bold"></span>
                                      </div>
                                    </div>
                                    <div class="arrow"></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                    <div class="ps__rail-x" style="left: 0px; bottom: 0px">
                      <div
                        class="ps__thumb-x"
                        
                        style="left: 0px; width: 0px"
                      ></div>
                    </div>
                    <div
                      class="ps__rail-y"
                      style="top: 0px; right: 0px; height: 430px"
                    >
                      <div
                        class="ps__thumb-y"
                        
                        style="top: 0px; height: 361px"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                id="tab-pane-display-preferences"
                class="v-tabs-tabpane"
                style="display: none"
              >
                <div  class="display-preferences-page">
                  <form
                    
                    class="v-layout layout-form v-form v-form-horizontal"
                    style="--svc-layout-padding: 8px 0px 0 0px"
                  >
                    <div
                      
                      class="v-layout first layout-fieldset v-fieldset"
                      style="--svc-layout-padding: 0 0 0 0"
                    >
                      <div class="v-fieldset-title-wrapper">
                        <div class="v-fieldset-title">日期和时间格式</div>
                      </div>
                      <div
                        style="
                          height: auto;
                          overflow: hidden;
                          transition-property: height;
                          transition-timing-function: ease;
                          transition-duration: 240ms;
                        "
                      >
                        <div
                          class="v-layout layout-fieldset-body v-fieldset-body"
                          style="--svc-layout-padding: 8px 8px 8px 8px"
                        >
                          <div  class="v-form-item">
                            <div class="v-form-item-label">
                              <label for="syno-8">日期格式</label>
                            </div>
                            <div class="v-form-item-input">
                              <div class="v-form-item-control">
                                <div>
                                  <div
                                    
                                    class="v-select-wrapper readonly"
                                    style="width: 270px"
                                  >
                                    <div class="input-wrapper">
                                      <input
                                        type="text"
                                        name="date-select"
                                        readonly="readonly"
                                        
                                        autocomplete="off"
                                        
                                        class="v-select-input"
                                      />
                                      <span
                                        class="v-select-dropdown-icon"
                                      ></span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div  class="v-form-item">
                            <div class="v-form-item-label">
                              <label for="syno-9">时间格式</label>
                            </div>
                            <div class="v-form-item-input">
                              <div class="v-form-item-control">
                                <div>
                                  <div
                                    class="v-select-wrapper readonly"
                                    style="width: 270px"
                                  >
                                    <div class="input-wrapper">
                                      <input
                                        type="text"
                                        name="time-select"
                                        readonly="readonly"
                                        
                                        autocomplete="off"
                                        
                                        class="v-select-input"
                                      />
                                      <span
                                        class="v-select-dropdown-icon"
                                      ></span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      
                      class="v-layout layout-fieldset v-fieldset"
                      
                      style="--svc-layout-padding: 8px 0 0 0"
                    >
                      <div class="v-fieldset-title-wrapper">
                        <div class="v-fieldset-title">桌面</div>
                      </div>
                      <div
                        style="
                          height: auto;
                          overflow: hidden;
                          transition-property: height;
                          transition-timing-function: ease;
                          transition-duration: 240ms;
                        "
                      >
                        <div
                          class="v-layout layout-fieldset-body v-fieldset-body"
                          style="--svc-layout-padding: 8px 8px 8px 8px"
                        >
                          <div  class="v-form-item">
                            <div class="v-form-item-label">
                              <label for="syno-10">主菜单样式</label>
                            </div>
                            <div class="v-form-item-input">
                              <div class="v-form-item-control">
                                <div>
                                  <div
                                    class="v-select-wrapper readonly"
                                    style="width: 270px"
                                  >
                                    <div class="input-wrapper">
                                      <input
                                        type="text"
                                        name="menu-style-select"
                                        readonly="readonly"
                                        
                                        autocomplete="off"
                                        
                                        class="v-select-input"
                                      />
                                      <span
                                        class="v-select-dropdown-icon"
                                      ></span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div  class="v-form-item">
                            <div class="v-form-item-label">
                              <label for="syno-11">桌面图标大小</label>
                            </div>
                            <div class="v-form-item-input">
                              <div class="v-form-item-control">
                                <div>
                                  <div
                                    class="v-select-wrapper readonly"
                                    style="width: 270px"
                                  >
                                    <div class="input-wrapper">
                                      <input
                                        type="text"
                                        name="icon-size-select"
                                        readonly="readonly"
                                        
                                        autocomplete="off"
                                        
                                        class="v-select-input"
                                      />
                                      <span
                                        class="v-select-dropdown-icon"
                                      ></span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div  class="v-form-item">
                            <div class="v-form-item-label">
                              <label for="syno-12">文字颜色</label>
                            </div>
                            <div class="v-form-item-input">
                              <div class="v-form-item-control">
                                <div>
                                  <div
                                    class="
                                      v-select-wrapper v-color-picker-wrapper
                                    "
                                  >
                                    <span
                                      class="v-select-color-icon"
                                      style="
                                        background-color: rgb(255, 255, 255);
                                      "
                                    ></span>
                                    <span class="v-select-dropdown-icon"></span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div  class="v-form-item">
                            <div class="v-form-item-input">
                              <div class="v-form-item-control">
                                <div>
                                  <div
                                    class="v-checkbox-wrapper"
                                  >
                                    <div class="v-checkbox-icon"></div>
                                    <input
                                      type="checkbox"
                                      class="v-checkbox-input"
                                      value="false"
                                    />
                                    <label
                                      for="syno-13"
                                      class="v-checkbox-label"
                                    >
                                      自定义背景
                                    </label>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            
                            class="wallpaper-block disabled"
                          >
                            <div
                              
                              
                              class="
                                personal-settings-thumbnail
                                thumbnail
                                disabled
                              "
                            >
                              <div  class="thumbnail-wrapper">
                                <img
                                  
                                  src="webman/resources/images/1x/default_wallpaper/dsm7_01.jpg?v=42661"
                                  class="thumb-img"
                                />
                                <div
                                  
                                  class="img"
                                  style="display: none"
                                >
                                  <img
                                    
                                    src="webman/resources/images/1x/default_wallpaper/dsm7_01.jpg?v=42661"
                                    class="stretch-thumb-img"
                                  />
                                </div>
                                <div
                                  
                                  class="img"
                                  style="display: none"
                                ></div>
                              </div>
                            </div>
                            <div  class="right-side-info">
                              <div  class="v-form-item">
                                <div class="v-form-item-input">
                                  <div class="v-form-item-control">
                                    <div>
                                      <div
                                        
                                        class="
                                          v-select-wrapper
                                          disabled
                                          readonly
                                        "
                                        style="width: 270px"
                                      >
                                        <div class="input-wrapper">
                                          <input
                                            type="text"
                                            name="icon-size-select"
                                            readonly="readonly"
                                            disabled="disabled"
                                            
                                            autocomplete="off"
                                            class="v-select-input"
                                          />
                                          <span
                                            class="v-select-dropdown-icon"
                                          ></span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div  class="info-block image">
                                <div  class="v-form-item">
                                  <div class="v-form-item-input">
                                    <div class="v-form-item-control">
                                      <div>
                                        <button
                                          
                                          type="button"
                                          class="
                                            v-btn v-btn-grey v-btn-disabled
                                          "
                                        >
                                          <span> 选择图片 </span>
                                        </button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  
                                  class="v-form-multi-wrapper"
                                >
                                  <div class="v-form-multi-item-wrapper">
                                    <div class="v-form-multi-item small">
                                      <div
                                        
                                        class="v-form-item"
                                      >
                                        <div class="v-form-item-input">
                                          <div class="v-form-item-control">
                                            <div>
                                              <div
                                                
                                                class="
                                                  v-select-wrapper
                                                  disabled
                                                  readonly
                                                "
                                                style="width: 270px"
                                              >
                                                <div class="input-wrapper">
                                                  <input
                                                    type="text"
                                                    name="wallpaper-pos-select"
                                                    readonly="readonly"
                                                    disabled="disabled"
                                                    
                                                    autocomplete="off"
                                                    class="v-select-input"
                                                  />
                                                  <span
                                                    class="
                                                      v-select-dropdown-icon
                                                    "
                                                  ></span>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                      <div
                                        
                                        class="v-form-item"
                                      >
                                        <div class="v-form-item-input">
                                          <div class="v-form-item-control">
                                            <div>
                                              <div
                                                class="
                                                  v-select-wrapper
                                                  v-color-picker-wrapper
                                                  disabled
                                                "
                                                readonly="readonly"
                                                width="270"
                                                style="display: none"
                                              >
                                                <span
                                                  
                                                  class="v-select-color-icon"
                                                  style="
                                                    background-color: rgb(
                                                      255,
                                                      255,
                                                      255
                                                    );
                                                  "
                                                ></span>
                                                <span
                                                  class="v-select-dropdown-icon"
                                                ></span>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div
                id="tab-pane-email"
                class="email-tab v-tabs-tabpane"
                style="display: none"
              >
                <div
                  class="
                    syno-sds-personal-settings-email-page-spin
                    v-spin-wrapper
                    circle
                  "
                >
                  <div
                    class="v-spin-wrapper-masking"
                    style="display: none"
                  ></div>
                  <div class="email-page">
                    <div class="empty-page" >
                      <div class="icon"></div>
                      <div class="desc">
                        添加电子邮件帐户以将 File Station
                        中的文件作为附件发送。可以使用这些电子邮件帐户通过
                        Synology Calendar 发送活动邀请，以及在通过 Synology
                        Drive 与他人共享文件时发送电子邮件通知。
                      </div>
                      <div class="action">
                        <button
                          type="button"
                          class="v-btn v-btn-blue"
                        >
                          <span> 新增 </span>
                        </button>
                      </div>
                    </div>
                    <div
                      class="v-layout email-content-wrapper layout-content"
                      style="
                        --svc-layout-padding: 8px 0 0 0;
                        --svc-layout-height: 100%;
                      "
                    >
                      <div class="v-toolbar">
                        <button
                          type="button"
                          class="v-btn v-btn-blue"
                        >
                          <span> 新增 </span>
                        </button>
                        <button
                          type="button"
                          class="v-btn v-btn-grey v-btn-disabled"
                        >
                          <span> 编辑 </span>
                        </button>
                        <button
                          type="button"
                          class="v-btn v-btn-grey v-btn-disabled"
                        >
                          <span> 删除 </span>
                        </button>
                        <button
                          type="button"
                          class="v-btn v-btn-grey v-btn-disabled"
                        >
                          <span> 设为默认 </span>
                        </button>
                        <div class="right-wrapper"></div>
                      </div>
                      <div
                        class="
                          email-data-table
                          data-table
                          v-spin-wrapper
                          circle
                          v-table-wrapper
                        "
                      >
                        <div
                          class="v-spin-wrapper-masking"
                          style="display: none"
                        ></div>
                        <div
                          class="v-table"
                          style="width: 100%"
                        >
                          <div class="v-table-header">
                            <table
                            >
                              <colgroup>
                                <col
                                  width="undefined"
                                />
                                <col
                                  width="undefined"
                                />
                                <col
                                  width="undefined"
                                />
                                <col
                                  width="undefined"
                                />
                              </colgroup>
                              <thead class="v-table-thead">
                                <tr class="row">
                                  <th
                                    colspan="1"
                                    rowspan="1"
                                    class="cell-first"
                                  >
                                    <div class="inner-cell">
                                      <div class="head-cell cell">
                                        <span class="cell-title"
                                          >服务供应商</span
                                        >
                                        <span
                                          class="v-table-column-sorter down"
                                        ></span>
                                      </div>
                                    </div>
                                  </th>
                                  <th
                                    colspan="1"
                                    rowspan="1"
                                    
                                  >
                                    <div class="inner-cell">
                                      <div class="head-cell cell">
                                        <span class="cell-title">电子邮件</span>
                                        <span
                                          class="v-table-column-sorter down"
                                        ></span>
                                      </div>
                                    </div>
                                  </th>
                                  <th
                                    colspan="1"
                                    rowspan="1"
                                    
                                  >
                                    <div class="inner-cell">
                                      <div class="head-cell cell">
                                        <span class="cell-title">状态</span>
                                        <span
                                          class="v-table-column-sorter down"
                                        ></span>
                                      </div>
                                    </div>
                                  </th>
                                  <th
                                    colspan="1"
                                    rowspan="1"
                                    class="last-th-cell"
                                  >
                                    <div class="inner-cell">
                                      <div class="head-cell cell">
                                        <span class="cell-title">默认</span>
                                        <span
                                          class="v-table-column-sorter down"
                                        ></span>
                                      </div>
                                    </div>
                                  </th>
                                </tr>
                              </thead>
                            </table>
                            <div class="hd-menu-btn-wrapper">
                              <button
                                type="button"
                                class="
                                  v-btn
                                  v-btn-styleless
                                  v-btn-grey
                                  v-btn-dropdown
                                  v-table-header-hd-menu
                                "
                              >
                                <span><i class="hd-menu-icon"></i></span>
                              </button>
                            </div>
                          </div>
                          <div class="v-ps ps">
                            <div class="v-table-content">
                              <div class="v-table-empty-body"></div>
                            </div>
                            <div
                              class="ps__rail-x"
                              style="left: 0px; bottom: 0px"
                            >
                              <div
                                class="ps__thumb-x"
                                
                                style="left: 0px; width: 0px"
                              ></div>
                            </div>
                            <div
                              class="ps__rail-y"
                              style="top: 0px; right: 0px"
                            >
                              <div
                                class="ps__thumb-y"
                                
                                style="top: 0px; height: 0px"
                              ></div>
                            </div>
                          </div>
                          <div
                            class="
                              col-resizable-indicator
                              col-resizable-indicator--hidden
                            "
                          ></div>
                          <div
                            class="
                              col-resizable-indicator
                              col-resizable-indicator--hidden
                            "
                          ></div>
                          <div
                            class="
                              col-resizable-indicator
                              col-resizable-indicator--hidden
                            "
                          ></div>
                        </div>
                        <div
                          class="v-pagination"
                        >
                          <div class="v-pagination-left"></div>
                          <div class="v-pagination-right">
                            <div class="v-pagination-total">0 个项目</div>
                            <div
                              class="v-pagination-refresh"
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                id="tab-pane-quota"
                class="v-tabs-tabpane"
                style="display: none"
              >
                <div
                  class="v-layout quota-page layout-content"
                  style="
                    --svc-layout-padding: 8px 0 0 0;
                    --svc-layout-height: 100%;
                  "
                >
                  <div class="quota v-spin-wrapper circle v-table-wrapper">
                    <div
                      class="v-spin-wrapper-masking"
                      style="display: none"
                    ></div>
                    <div
                      class="v-table"
                      style="width: 100%"
                    >
                      <div class="v-table-header">
                        <table
                        >
                          <colgroup>
                            <col
                              width="undefined"
                            />
                            <col
                              width="undefined"
                            />
                            <col
                              width="undefined"
                            />
                            <col
                              width="undefined"
                            />
                            <col
                              width="undefined"
                            />
                          </colgroup>
                          <thead class="v-table-thead">
                            <tr class="row">
                              <th
                                colspan="1"
                                rowspan="1"
                                class="cell-first"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title"
                                      >存储空间/共享文件夹</span
                                    >
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title"
                                      >共享文件夹配额</span
                                    >
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title"
                                      >共享文件夹大小</span
                                    >
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">用户配额</span>
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                              <th
                                colspan="1"
                                rowspan="1"
                                class="last-th-cell"
                              >
                                <div class="inner-cell">
                                  <div class="head-cell cell">
                                    <span class="cell-title">已用容量</span>
                                    <span
                                      class="v-table-column-sorter down"
                                    ></span>
                                  </div>
                                </div>
                              </th>
                            </tr>
                          </thead>
                        </table>
                        <div class="hd-menu-btn-wrapper"></div>
                      </div>
                      <div class="v-ps ps">
                        <div class="v-table-content">
                          <div class="v-table-tree-body">
                            <div class="v-table-tree-node-ct">
                              <table class="v-table-tree-node-table">
                                <tr>
                                  <td
                                  >
                                    <div class="cell-content">
                                      <span class="cell-indent-0"></span>
                                      <span
                                        class="cell-expandable show expand"
                                      ></span>
                                      <span class="cell-text">
                                        存储空间 1
                                      </span>
                                    </div>
                                  </td>
                                  <td
                                  >
                                    <div class="cell-content">
                                      <span class="cell-text"> </span>
                                    </div>
                                  </td>
                                  <td
                                  >
                                    <div class="cell-content">
                                      <span class="cell-text"> </span>
                                    </div>
                                  </td>
                                  <td
                                  >
                                    <div class="cell-content">
                                      <span class="cell-text"> </span>
                                    </div>
                                  </td>
                                  <td
                                  >
                                    <div class="cell-content">
                                      <span class="cell-text"> </span>
                                    </div>
                                  </td>
                                </tr>
                              </table>
                              <div
                                style="
                                  height: auto;
                                  overflow: hidden;
                                  transition-property: height;
                                  transition-timing-function: ease;
                                  transition-duration: 240ms;
                                "
                              >
                                <div class="tree-child">
                                  <div class="v-table-tree-node-ct">
                                    <table class="v-table-tree-node-table">
                                      <tr>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-indent-1"></span>
                                            <span
                                              class="cell-expandable collapse"
                                            ></span>
                                            <span class="cell-text">
                                              chat
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              0.098 MB
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              0.000 MB
                                            </span>
                                          </div>
                                        </td>
                                      </tr>
                                    </table>
                                    <div
                                      style="height: 0px; overflow: hidden"
                                    >
                                      <div class="tree-child"></div>
                                    </div>
                                  </div>
                                  <div class="v-table-tree-node-ct">
                                    <table class="v-table-tree-node-table">
                                      <tr>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-indent-1"></span>
                                            <span
                                              class="cell-expandable collapse"
                                            ></span>
                                            <span class="cell-text">
                                              homes
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              940.496 MB
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              896.547 MB
                                            </span>
                                          </div>
                                        </td>
                                      </tr>
                                    </table>
                                    <div
                                      style="height: 0px; overflow: hidden"
                                    >
                                      <div class="tree-child"></div>
                                    </div>
                                  </div>
                                  <div class="v-table-tree-node-ct">
                                    <table class="v-table-tree-node-table">
                                      <tr>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-indent-1"></span>
                                            <span
                                              class="cell-expandable collapse"
                                            ></span>
                                            <span class="cell-text">
                                              MailPlus
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              488.984 MB
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              488.914 MB
                                            </span>
                                          </div>
                                        </td>
                                      </tr>
                                    </table>
                                    <div
                                      style="height: 0px; overflow: hidden"
                                    >
                                      <div class="tree-child"></div>
                                    </div>
                                  </div>
                                  <div class="v-table-tree-node-ct">
                                    <table class="v-table-tree-node-table">
                                      <tr>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-indent-1"></span>
                                            <span
                                              class="cell-expandable collapse"
                                            ></span>
                                            <span class="cell-text">
                                              music
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              27.008 MB
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              27.008 MB
                                            </span>
                                          </div>
                                        </td>
                                      </tr>
                                    </table>
                                    <div
                                      style="height: 0px; overflow: hidden"
                                    >
                                      <div class="tree-child"></div>
                                    </div>
                                  </div>
                                  <div class="v-table-tree-node-ct">
                                    <table class="v-table-tree-node-table">
                                      <tr>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-indent-1"></span>
                                            <span
                                              class="cell-expandable collapse"
                                            ></span>
                                            <span class="cell-text">
                                              photo
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              0.000 MB
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              0.000 MB
                                            </span>
                                          </div>
                                        </td>
                                      </tr>
                                    </table>
                                    <div
                                      style="height: 0px; overflow: hidden"
                                    >
                                      <div class="tree-child"></div>
                                    </div>
                                  </div>
                                  <div class="v-table-tree-node-ct">
                                    <table class="v-table-tree-node-table">
                                      <tr>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-indent-1"></span>
                                            <span
                                              class="cell-expandable collapse"
                                            ></span>
                                            <span class="cell-text">
                                              video
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              399.793 MB
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              无限制
                                            </span>
                                          </div>
                                        </td>
                                        <td
                                        >
                                          <div class="cell-content">
                                            <span class="cell-text">
                                              399.676 MB
                                            </span>
                                          </div>
                                        </td>
                                      </tr>
                                    </table>
                                    <div
                                      style="height: 0px; overflow: hidden"
                                    >
                                      <div class="tree-child"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="ps__rail-x" style="left: 0px; bottom: 0px">
                          <div
                            class="ps__thumb-x"
                            
                            style="left: 0px; width: 0px"
                          ></div>
                        </div>
                        <div class="ps__rail-y" style="top: 0px; right: 0px">
                          <div
                            class="ps__thumb-y"
                            
                            style="top: 0px; height: 0px"
                          ></div>
                        </div>
                      </div>
                      <div
                        class="
                          col-resizable-indicator
                          col-resizable-indicator--hidden
                        "
                      ></div>
                      <div
                        class="
                          col-resizable-indicator
                          col-resizable-indicator--hidden
                        "
                      ></div>
                      <div
                        class="
                          col-resizable-indicator
                          col-resizable-indicator--hidden
                        "
                      ></div>
                    </div>
                    <div
                      class="v-pagination"
                      style="display: none"
                    >
                      <div class="v-pagination-left"></div>
                      <div class="v-pagination-right">
                        <div class="v-pagination-total">1 个项目</div>
                        <div
                          class="v-pagination-refresh"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                id="tab-pane-others"
                class="v-tabs-tabpane"
                style="display: none"
              >
                <div
                  class="v-layout layout-content"
                  style="
                    --svc-layout-padding: 8px 0 0 0;
                    --svc-layout-height: 100%;
                  "
                >
                  <form
                    class="v-layout layout-form v-form v-form-horizontal"
                    style="--svc-layout-padding: 0 8px 0 8px"
                  >
                    <div class="v-form-item">
                      <div class="v-form-item-input">
                        <div class="v-form-item-control">
                          <div>
                            <div
                              class="v-checkbox-wrapper"
                            >
                              <div class="v-checkbox-icon"></div>
                              <input
                                type="checkbox"
                                name="rememberWindowState"
                                class="v-checkbox-input"
                                value="false"
                              />
                              <label for="syno-17" class="v-checkbox-label">
                                登录后显示 DSM 上次退出前的状态
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-input">
                        <div class="v-form-item-control">
                          <div>
                            <div
                              class="v-checkbox-wrapper checked"
                            >
                              <div class="v-checkbox-icon"></div>
                              <input
                                type="checkbox"
                                name="enableTaskbarThumbnail"
                                class="v-checkbox-input"
                                value="true"
                              />
                              <label for="syno-18" class="v-checkbox-label">
                                启用任务栏上的即时预览
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-input">
                        <div class="v-form-item-control">
                          <div>
                            <div
                              class="v-checkbox-wrapper checked"
                            >
                              <div class="v-checkbox-icon"></div>
                              <input
                                type="checkbox"
                                name="hotkeyEnabled"
                                class="v-checkbox-input"
                                value="true"
                              />
                              <label for="syno-19" class="v-checkbox-label">
                                启用桌面键盘快捷方式
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-input">
                        <div class="v-form-item-control">
                          <div>
                            <div
                              class="v-checkbox-wrapper"
                            >
                              <div class="v-checkbox-icon"></div>
                              <input
                                type="checkbox"
                                name="disableAccessibility"
                                class="v-checkbox-input"
                                value="false"
                              />
                              <label for="syno-20" class="v-checkbox-label">
                                禁用辅助功能 (无可用听觉提示)
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="v-form-item">
                      <div class="v-form-item-input">
                        <div class="v-form-item-control">
                          <div>
                            <div
                              class="v-checkbox-wrapper"
                            >
                              <div class="v-checkbox-icon"></div>
                              <input
                                type="checkbox"
                                name="enableDesktopNotification"
                                class="v-checkbox-input"
                                value="false"
                              />
                              <label for="syno-21" class="v-checkbox-label">
                                启用浏览器桌面通知
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div
              class="v-layout layout-tab-fbar v-tabs-footer"
            >
              <div class="default pull-right">
                <button
                  type="button"
                  class="v-btn v-btn-footbar v-btn-cancel"
                >
                  <span>取消 </span>
                </button>
                <button
                  type="button"
                  class="v-btn v-btn-footbar v-btn-main"
                >
                  <span>保存</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div  class="v-trap-focus-indicator"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
