ecmo-frontend/src/components/Tab.vue

<template>
  <div class="tab_container">
    <div class="tab_box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="38"
        height="38"
        viewBox="0 0 38 38"
      >
        <g>
          <path
            d="M35.465,22.798L32.396,22.798C32.1045,23.8321,31.6952,24.8293,31.176,25.77L33.328,27.922C34.3228,28.917,34.3228,30.53,33.328,31.525L31.528,33.325C30.5328,34.3192,28.9202,34.3192,27.925,33.325L25.772,31.173C24.841,31.692,23.846,32.1,22.8,32.393L22.8,35.466C22.7994,36.8657,21.6646,38,20.265,38L17.731,38C16.3313,38,15.1966,36.8656,15.196,35.466L15.196,32.393C14.1258,32.0898,13.0955,31.6601,12.127,31.113L9.912,33.328C8.91802,34.3224,7.30598,34.3224,6.312,33.328L4.512,31.528C3.51788,30.5331,3.51788,28.9209,4.512,27.926L6.765,25.673C6.27186,24.7621,5.88243,23.7987,5.604,22.801L2.534,22.801C1.13455,22.7971,0.001647,21.6625,0,20.263L0,17.73C0.000552177,16.3303,1.13535,15.196,2.535,15.196L5.604,15.196C5.9,14.149,6.309,13.155,6.824,12.224L4.512,9.912C3.51701,8.91825,3.51701,7.30575,4.512,6.312L6.312,4.513C7.30598,3.51856,8.91802,3.51856,9.912,4.513L12.224,6.825C13.155,6.305,14.15,5.897,15.196,5.604L15.196,2.534C15.1966,1.13435,16.3314,0,17.731,0L20.265,0C21.6646,0,22.7994,1.13435,22.8,2.534L22.8,5.603C23.806,5.889,24.77,6.275,25.672,6.764L27.925,4.512C28.9202,3.51777,30.5328,3.51777,31.528,4.512L33.328,6.312C34.3223,7.30564,34.3223,8.91737,33.328,9.911L31.113,12.126C31.6632,13.093,32.0931,14.1236,32.393,15.195L35.465,15.195C36.8646,15.195,37.9995,16.3293,38,17.729L38,20.263C38,21.663,36.865,22.798,35.465,22.798ZM19,11.398C14.8026,11.398,11.4,14.8006,11.4,18.998C11.4,23.1954,14.8026,26.598,19,26.598C23.1974,26.598,26.6,23.1954,26.6,18.998C26.6,14.8006,23.1974,11.398,19,11.398ZM19,22.798C16.9,22.798,15.2,21.098,15.2,18.998C15.2,16.898,16.9,15.198,19,15.198C21.1,15.198,22.8,16.898,22.8,18.998C22.8,21.098,21.1,22.798,19,22.798Z"
            fill="#15D0A1"
            fill-opacity="1"
          />
        </g>
      </svg>
    </div>
    <div class="tab_box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="38"
        height="37.52723693847656"
        viewBox="0 0 38 37.52723693847656"
      >
        <g>
          <path
            d="M26.4914,10.6735C27.146,11.2489,28.1423,11.1854,28.719,10.5308L31.7965,7.03247C32.3725,6.37863,32.3095,5.3816,31.6556,4.80555C31.0018,4.2295,30.0048,4.29257,29.4287,4.94642L26.3476,8.44356C26.0391,8.79419,25.9021,9.26364,25.9735,9.72516C26.0275,10.0812,26.2001,10.4169,26.4914,10.6735ZM19.0536,11.2238L18.9157,11.2238L18.9157,11.2226C13.5634,11.2239,9.22515,15.5621,9.22515,20.9131L9.22515,32.8204L21.6384,32.8204C22.0707,29.0062,24.9641,25.9327,28.7453,25.2711L28.7453,20.9131C28.744,15.5615,24.4053,11.2238,19.0536,11.2238ZM26.0455,22.0209C25.5867,22.0202,25.2148,21.6488,25.2134,21.1901C25.2095,17.8281,22.4851,15.1037,19.1231,15.0998L18.9852,15.0998C18.5267,15.0998,18.155,14.728,18.155,14.2695C18.155,13.811,18.5267,13.4393,18.9852,13.4393L19.1231,13.4393C23.3983,13.4393,26.8739,16.9161,26.8739,21.1901C26.8739,21.6492,26.5022,22.0209,26.0455,22.0209ZM36.1844,15.0602L31.5747,15.7615C30.713,15.8926,30.1206,16.6975,30.2517,17.5593C30.3828,18.421,31.1877,19.0133,32.0495,18.8822L36.6568,18.1809C37.519,18.051,38.1125,17.2464,37.982,16.3842C37.8515,15.522,37.0465,14.9291,36.1844,15.0602ZM6.61878,6.43903L9.52966,10.0788C10.0741,10.7601,11.0678,10.8708,11.7488,10.3259C12.4297,9.78111,12.5398,8.7873,11.9946,8.10667L9.08368,4.46807C8.54019,3.786,7.54597,3.67529,6.86575,4.2211C6.18305,4.76424,6.07228,5.75901,6.61878,6.43903ZM8.05384,33.7879L6.82619,37.5272L22.438,37.5272C21.8742,36.3612,21.5808,35.0831,21.5796,33.7879L8.05384,33.7879ZM11.8687,36.8319L7.87521,36.8319L8.64729,34.4785L14.2221,34.4785L11.8687,36.8319ZM17.6581,6.47739C17.7803,7.28817,18.5028,7.87046,19.321,7.81766C20.1393,7.76486,20.7809,7.09454,20.798,6.27478L20.7848,1.61473C20.805,0.743371,20.115,0.020627,19.2436,0.000432213C18.3722,-0.0197624,17.6495,0.67024,17.6293,1.54159L17.6401,6.20165C17.6389,6.29516,17.6449,6.38748,17.6581,6.47739ZM7.6654,17.0276C7.83668,16.1721,7.2823,15.3398,6.42696,15.1681L1.85802,14.2509C1.01211,14.0992,0.20018,14.6519,0.0311329,15.4945C-0.137914,16.3371,0.398012,17.1602,1.237,17.3465L5.80714,18.2648C6.66204,18.4368,7.49434,17.8826,7.6654,17.0276Z"
            fill="#D8D8D8"
            fill-opacity="1"
          />
        </g>
      </svg>
    </div>
    <div class="tab_box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="28.717952728271484"
        height="32"
        viewBox="0 0 28.717952728271484 32"
      >
        <g>
          <path
            d="M28.592,26.0322C28.4404,26.2642,28.1931,26.4002,27.9218,26.4002L0.797896,26.4002C0.218873,26.4008,-0.167105,25.8011,0.0719316,25.2723L2.3663,20.0941C2.91016,18.8675,3.19119,17.5394,3.19119,16.1958L3.19119,11.508C3.19119,5.46024,7.84374,0.269243,13.8692,0.0116539C16.9998,-0.131851,20.0456,1.05525,22.2577,3.28113C24.3638,5.40104,25.5286,8.20893,25.5286,11.2008L25.5286,16.1958C25.5286,17.539,25.8094,18.8661,26.3534,20.0933L28.6478,25.2715C28.7595,25.5203,28.7356,25.8082,28.592,26.0322ZM17.5509,28.8001C17.5509,29.6561,17.2159,30.4561,16.6175,31.064C16.0112,31.664,15.2135,32,14.3599,32C12.5968,32,11.1688,30.5681,11.1688,28.8001C11.1688,28.3601,11.5278,28.0002,11.9666,28.0002L16.7532,28.0002C17.1919,28.0002,17.5509,28.3601,17.5509,28.8001Z"
            fill="#D8D8D8"
            fill-opacity="1"
          />
        </g>
      </svg>
    </div>
    <div class="tab_box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="33"
        height="26"
        viewBox="0 0 33 26"
      >
        <g>
          <rect
            x="0"
            y="0"
            width="33"
            height="26"
            rx="6"
            fill="#D8D8D8"
            fill-opacity="1"
          />
        </g>
      </svg>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.tab_container {
  width: 420px;
  height: 56px;
  background: #ffffff;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 19px;
  .tab_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 67px;
    height: 47px;
    border-radius: 47px;
    background: rgba(21, 208, 161, 0.1);
  }
}
</style>