<template>
  <div id="App">
    <div class="musicContainer">
      <div class="songList">
        <songList />
      </div>
      <div class="meting">
        <search-form />
        <meting />
      </div>
    </div>
  </div>
</template>

<script setup>
import meting from "./components/meting.vue";
import searchForm from "./components/searchForm.vue";
import songList from "./components/songList.vue";
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.musicContainer {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.songList {
  width: 180px;
  max-height: 100%;
  overflow-y: auto;
  padding: 5px;
}
.meting {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 5px;
}
</style>
