ズームインとズームアウトの閉じるボタンを実現する CSS (サンプル コード)

<テンプレート>
  <div class="windowAction">
    <button class="min">ズームアウト</button>
    <button class="fullpage">拡大</button>
    <button class="close">閉じる</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      flag_fullpageWebView: 1
    };
  }
};
</スクリプト>

<style lang="scss" スコープ>
.windowAction {
  上マージン: -5px;
  -webkit-app-region: ドラッグなし;
  最小幅: 70px;
  テキスト配置: 右;
  ボタン {
    &:ホバー{
      色: #a8aabd;
    }
  }
  .分{
    幅: 14px;
    高さ: 14px;
    背景色: 透明;
    フォントサイズ: 0;
    右マージン: 18px;
    位置: 相対的;
    色: #878896;
    ＆：後 {
      コンテンツ： "";
      幅: 100%;
      位置: 絶対;
      左: 0;
      下部: 0;
      下境界線: 2px 実線;
    }
  }
  .フルページ{
    幅: 16px;
    高さ: 16px;
    色: #878896;
    境界線: 2px 実線;
    背景色: 透明;
    フォントサイズ: 0;
    右マージン: 18px;
  }
  。近い {
    幅: 18px;
    高さ: 18px;
    フォントサイズ: 0;
    背景色: 透明;
    位置: 相対的;
    色: #878896;
    変換: 回転(45度) 移動(-2px, 2px);
    ＆：前に、
    ＆：後 {
      コンテンツ： "";
      位置: 絶対;
    }
    ＆：前に {
      幅: 100%;
      左: 0;
      上位: 50%;
      変換: translateY(-50%);
      上境界線: 2px 実線;
    }
    ＆：後 {
      高さ: 100%;
      左: 50%;
      上: 0;
      変換: translateX(-50%);
      左境界線: 2px 実線;
    }
  }
}
</スタイル>