Merge branch 'hqyDev' of http://git.dayaedu.com/huangqiyong/pptList into test-online

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="cloudCoachList">
-    <el-descriptions title="乐谱">
-      <div>
-        <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
-        <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <div class="name">乐谱</div>
+    <div class="listCon">
+      <div class="list" v-for="item in listData" :key="item.id">
+        <div>曲目名称：{{ item.name }}</div>
+        <ElButton @click="handleUpdate(item.id)">添加</ElButton>
       </div>
-    </el-descriptions>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ElDescriptions, ElDescriptionsItem } from "element-plus"
+import { ElButton } from "element-plus"
 import { getMaterialQueryPage } from "@/api/pptOperate"
 import { httpAjax } from "@/plugins/httpAjax"
 import { ref } from "vue"
@@ -18,11 +19,11 @@ import { ref } from "vue"
 const emit = defineEmits<{
   (event: "update", id: string): void
 }>()
-function handleUpdate() {
-  emit("update", "1760123974848413697")
+function handleUpdate(id: string) {
+  emit("update", id)
 }
 
-const listData = ref([])
+const listData = ref<any[]>([])
 httpAjax(getMaterialQueryPage, {
   type: "MUSIC",
   sourceType: 2,
@@ -38,6 +39,22 @@ httpAjax(getMaterialQueryPage, {
 
 <style lang="scss" scoped>
 .cloudCoachList {
+  padding: 40px;
   width: 100%;
+  height: 100%;
+  .name {
+    height: 40px;
+    font-size: 20px;
+  }
+  .listCon {
+    height: calc(100% - 40px);
+    overflow: auto;
+    .list {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 40px;
+    }
+  }
 }
 </style>