404页面和错误页面处理

src/views/Editor/CanvasTool/index.vue

@@ -62,7 +62,7 @@
         <img class="itemImg" src="./imgs/yp.png" alt="" />
         <div class="tit">乐谱</div>
       </div>
-      <div class="handler-item">
+      <!-- <div class="handler-item">
         <img class="itemImg" src="./imgs/jzlx.png" alt="" />
         <div class="tit">节奏练习</div>
       </div>
@@ -73,7 +73,7 @@
       <div class="handler-item">
         <img class="itemImg" src="./imgs/zyk.png" alt="" />
         <div class="tit">资源库</div>
-      </div>
+      </div> -->
       <div class="handler-item" @click="drawText()" :class="{ active: creatingElement?.type === 'text' }">
         <img class="itemImg" src="./imgs/wz.png" alt="" />
         <Popover trigger="click" v-model:value="textTypeSelectVisible" :offset="10">

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

@@ -9,9 +9,7 @@
     }"
   >
     <div class="rotate-wrapper" :style="{ transform: `rotate(${elementInfo.rotate}deg)` }">
-      <div class="element-content">
-        <div class="text">云教练</div>
-      </div>
+      <div class="element-content"></div>
     </div>
   </div>
 </template>
@@ -38,10 +36,7 @@ defineProps<{
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #213793;
-  .text {
-    color: #fff;
-    font-size: 80px;
-  }
+  background: url("./cloudCoachList//imgs/musicBg.png") no-repeat;
+  background-size: 100% 100%;
 }
 </style>

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

@@ -1,606 +1,22 @@
 <template>
   <div class="cloudCoachList">
-    <div class="headCon">
-      <div class="headLeft">
-        <img class="tipImg" src="@/views/Editor/CanvasTool/imgs/yp.png" alt="" />
-        <div class="title">乐谱</div>
-      </div>
-      <div class="headright">
-        <img @click="emits('close')" class="closeBtn" src="./imgs/close.png" alt="" />
-      </div>
-    </div>
-    <div class="content">
-      <div class="tabTools">
-        <div class="tabCon">
-          <div class="tab" :class="{ active: item.value === querData.tab }" v-for="item in tabData" :key="item.value">{{ item.label }}</div>
-        </div>
-        <div class="query">
-          <Input :placeholder="'请输入搜索关键词'" v-model:value="querData.value">
-            <template #prefix>
-              <img class="img" src="./imgs/query.png" alt="" />
-            </template>
-            <template #suffix>
-              <div class="queryBtn">搜索</div>
-            </template>
-          </Input>
-        </div>
-      </div>
-      <div class="musicListCon">
-        <div class="queryFrom">
-          <div class="queryFromList">
-            <div class="tit">标签：</div>
-            <div class="queryFromCon">
-              <div class="queryTip active">全部</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-            </div>
-          </div>
-          <div class="queryFromList">
-            <div class="tit">标签：</div>
-            <div class="queryFromCon">
-              <div class="queryTip">全部</div>
-              <div class="queryTip active">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <div class="queryTip">最新</div>
-              <Popover trigger="mouseenter" :offset="-4">
-                <template #content>
-                  <PopoverMenuItem>英式竖笛</PopoverMenuItem>
-                  <PopoverMenuItem>德式竖笛</PopoverMenuItem>
-                </template>
-                <div class="queryTip" :class="{ hoverActive: true }">
-                  <div>我是</div>
-                  <img src="./imgs/jt.png" alt="" />
-                </div>
-              </Popover>
-            </div>
-          </div>
-          <div class="isExpand" :class="{ active: isExpand }">
-            <div>{{ isExpand ? "收起" : "展开" }}</div>
-            <img src="./imgs/jiao.png" alt="" />
-          </div>
-        </div>
-        <!-- <div class="musicList empty"> -->
-        <div class="musicList">
-          <div class="musicListBox">
-            <div class="musicCon">
-              <div class="musicLeft">
-                <div class="iconCon">
-                  <img class="icon" src="" alt="" />
-                  <img class="jxImg" src="./imgs/jx.png" alt="" />
-                </div>
-                <div class="musicInfo">
-                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
-                  <div class="info">
-                    <div class="hotInfo">
-                      <img src="./imgs/hot.png" alt="" />
-                      <div>1.8万</div>
-                    </div>
-                    <div class="play">演唱</div>
-                    <div class="sing">演奏</div>
-                    <div class="musicUserName">
-                      <EllipsisScroll :title="'耶寒尔'" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="musicRight">
-                <img class="sc" src="./imgs/sc.png" alt="" />
-                <div class="addBtn">添加</div>
-              </div>
-            </div>
-            <div class="musicCon">
-              <div class="musicLeft">
-                <div class="iconCon">
-                  <img class="icon" src="" alt="" />
-                  <img class="jxImg" src="./imgs/jx.png" alt="" />
-                </div>
-                <div class="musicInfo">
-                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
-                  <div class="info">
-                    <div class="hotInfo">
-                      <img src="./imgs/hot.png" alt="" />
-                      <div>1.8万</div>
-                    </div>
-                    <div class="play">演唱</div>
-                    <div class="sing">演奏</div>
-                    <div class="musicUserName">
-                      <EllipsisScroll :title="'耶寒尔'" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="musicRight">
-                <img class="sc" src="./imgs/sc.png" alt="" />
-                <div class="addBtn">添加</div>
-              </div>
-            </div>
-            <div class="musicCon">
-              <div class="musicLeft">
-                <div class="iconCon">
-                  <img class="icon" src="" alt="" />
-                  <img class="jxImg" src="./imgs/jx.png" alt="" />
-                </div>
-                <div class="musicInfo">
-                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
-                  <div class="info">
-                    <div class="hotInfo">
-                      <img src="./imgs/hot.png" alt="" />
-                      <div>1.8万</div>
-                    </div>
-                    <div class="play">演唱</div>
-                    <div class="sing">演奏</div>
-                    <div class="musicUserName">
-                      <EllipsisScroll :title="'耶寒尔'" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="musicRight">
-                <img class="sc" src="./imgs/sc.png" alt="" />
-                <div class="addBtn">添加</div>
-              </div>
-            </div>
-            <div class="musicCon">
-              <div class="musicLeft">
-                <div class="iconCon">
-                  <img class="icon" src="" alt="" />
-                  <img class="jxImg" src="./imgs/jx.png" alt="" />
-                </div>
-                <div class="musicInfo">
-                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
-                  <div class="info">
-                    <div class="hotInfo">
-                      <img src="./imgs/hot.png" alt="" />
-                      <div>1.8万</div>
-                    </div>
-                    <div class="play">演唱</div>
-                    <div class="sing">演奏</div>
-                    <div class="musicUserName">
-                      <EllipsisScroll :title="'耶寒尔'" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="musicRight">
-                <img class="sc" src="./imgs/sc.png" alt="" />
-                <div class="addBtn">添加</div>
-              </div>
-            </div>
-          </div>
-          <!-- <Empty /> -->
-        </div>
-      </div>
-    </div>
+    <ElButton @click="handleUpdate">点击云教练</ElButton>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ElButton } from "element-plus"
-import Input from "@/components/Input.vue"
-import Popover from "@/components/Popover.vue"
-import PopoverMenuItem from "@/components/PopoverMenuItem.vue"
-import Empty from "@/components/Empty"
-import EllipsisScroll from "@/components/ellipsisScroll"
-import { reactive, ref } from "vue"
-
-const emits = defineEmits<{
+const emit = defineEmits<{
   (event: "update", id: string): void
-  (event: "close"): void
 }>()
 function handleUpdate() {
-  emits("update", "1760123974848413697")
+  emit("update", "1760123974848413697")
 }
-
-const tabData = [
-  {
-    label: "相关资源",
-    value: "1"
-  },
-  {
-    label: "共享资源",
-    value: "2"
-  },
-  {
-    label: "我的资源",
-    value: "3"
-  },
-  {
-    label: "我的收藏",
-    value: "4"
-  }
-]
-
-const isExpand = ref(true)
-
-const querData = reactive({
-  tab: "1",
-  value: ""
-})
 </script>
 
 <style lang="scss" scoped>
 .cloudCoachList {
   width: 100%;
-  height: 100%;
-  position: relative;
-  &::after {
-    width: 100%;
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
-    bottom: 0;
-    left: 0;
-  }
-  .headCon {
-    width: 100%;
-    height: 64px;
-    border-bottom: 1px solid #eaeaea;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .headLeft {
-      margin-left: 30px;
-      display: flex;
-      align-items: center;
-      .tipImg {
-        width: 24px;
-        height: 24px;
-      }
-      .title {
-        font-weight: 600;
-        font-size: 18px;
-        color: #131415;
-        margin-left: 8px;
-      }
-    }
-    .headright {
-      margin-right: 30px;
-      display: flex;
-      align-items: center;
-      .closeBtn {
-        width: 24px;
-        height: 24px;
-        cursor: pointer;
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-  .content {
-    width: 100%;
-    height: calc(100% - 64px);
-    .tabTools {
-      height: 72px;
-      width: 100%;
-      padding: 18px 30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .tabCon {
-        display: flex;
-        .tab {
-          margin-right: 32px;
-          font-weight: 400;
-          font-size: 16px;
-          color: #8b8d98;
-          line-height: 22px;
-          cursor: pointer;
-          &:hover {
-            opacity: 0.8;
-          }
-          &:last-child {
-            margin-right: 0;
-          }
-          &.active {
-            font-weight: 600;
-            color: #131415;
-            position: relative;
-            &::after {
-              content: "";
-              position: absolute;
-              width: 100%;
-              height: 10px;
-              background: linear-gradient(90deg, #77bbff 0%, rgba(163, 231, 255, 0.22) 100%);
-              bottom: 0;
-              left: 0;
-              z-index: -1;
-            }
-          }
-        }
-      }
-      .query {
-        width: 400px;
-        height: 36px;
-        &::v-deep(.input) {
-          align-items: center;
-          padding: 0 3px 0 12px;
-          border-radius: 18px;
-          height: 100%;
-          &:not(.disabled):hover,
-          &.focused {
-            .img {
-              opacity: 1;
-            }
-            .queryBtn {
-              opacity: 1;
-            }
-          }
-          input {
-            font-size: 14px;
-          }
-          .img {
-            width: 16px;
-            height: 16px;
-            opacity: 0.4;
-          }
-          .queryBtn {
-            width: 60px;
-            height: 30px;
-            background: #198cfe;
-            border-radius: 16px;
-            font-weight: 500;
-            font-size: 14px;
-            color: #ffffff;
-            line-height: 30px;
-            text-align: center;
-            opacity: 0.4;
-            cursor: pointer;
-            &:hover {
-              opacity: 0.8 !important;
-            }
-          }
-        }
-      }
-    }
-    .musicListCon {
-      width: 100%;
-      height: calc(100% - 72px);
-      overflow: auto;
-      overflow: overlay;
-      display: flex;
-      flex-direction: column;
-      .queryFrom {
-        padding: 0 30px;
-        .queryFromList {
-          display: flex;
-          margin-bottom: 4px;
-          .tit {
-            flex-shrink: 0;
-            font-weight: 500;
-            font-size: 14px;
-            color: #131415;
-            line-height: 32px;
-            margin-right: 16px;
-          }
-          .queryFromCon {
-            display: flex;
-            flex-wrap: wrap;
-            .queryTip {
-              margin: 0 16px 12px 0;
-              font-weight: 400;
-              font-size: 14px;
-              color: rgba(0, 0, 0, 0.6);
-              line-height: 20px;
-              padding: 6px 16px;
-              background: #f5f6fa;
-              border-radius: 6px;
-              cursor: pointer;
-              display: flex;
-              align-items: center;
-              & > img {
-                width: 7px;
-                height: 4px;
-                margin-left: 6px;
-              }
-              &.active,
-              &:hover {
-                background: #d2ecff;
-                color: rgba(0, 0, 0, 1);
-              }
-              &.hoverActive {
-                > img {
-                  transform: rotate(180deg);
-                }
-              }
-            }
-          }
-        }
-        .isExpand {
-          margin-bottom: 16px;
-          cursor: pointer;
-          display: flex;
-          justify-content: center;
-          font-weight: 400;
-          font-size: 14px;
-          color: #198cfe;
-          line-height: 20px;
-          align-items: center;
-          &:hover {
-            opacity: 0.8;
-          }
-          &.active > img {
-            transform: rotate(180deg);
-          }
-          & > img {
-            margin-left: 4px;
-            width: 10px;
-            height: 10px;
-          }
-        }
-      }
-      .musicList {
-        display: flex;
-        padding: 0 30px;
-        &.empty {
-          flex-grow: 1;
-          justify-content: center;
-          align-items: center;
-        }
-        .musicListBox {
-          width: calc(100% + 24px);
-          margin-left: -24px;
-          display: flex;
-          flex-wrap: wrap;
-          .musicCon {
-            margin-bottom: 24px;
-            width: calc(33.3333% - 24px);
-            margin-left: 24px;
-            padding: 16px;
-            background: #f5f6fa;
-            border-radius: 12px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            &:hover {
-              outline: 2px solid #198cfe;
-            }
-            .musicLeft {
-              display: flex;
-              align-items: center;
-              margin-right: 14px;
-              overflow: hidden;
-              .iconCon {
-                position: relative;
-                .icon {
-                  width: 70px;
-                  height: 70px;
-                  border-radius: 8px;
-                }
-                .jxImg {
-                  position: absolute;
-                  left: 0;
-                  top: 0;
-                  width: 34px;
-                  height: 16px;
-                }
-              }
-              .musicInfo {
-                margin-left: 12px;
-                overflow: hidden;
-                .musicTit {
-                  font-weight: 600;
-                  font-size: 15px;
-                  color: #131415;
-                  line-height: 21px;
-                }
-                .info {
-                  margin-top: 13px;
-                  display: flex;
-                  align-items: center;
-                  .hotInfo {
-                    margin-right: 4px;
-                    padding: 0 4px;
-                    background: #fff3f3;
-                    border-radius: 3px;
-                    border: 1px solid rgba(254, 67, 67, 0.5);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    flex-shrink: 0;
-                    line-height: 16px;
-                    & > img {
-                      width: 10px;
-                      height: 12px;
-                    }
-                    & > div {
-                      font-weight: 400;
-                      font-size: 12px;
-                      color: #fe4343;
-                    }
-                  }
-                  .play {
-                    margin-right: 4px;
-                    flex-shrink: 0;
-                    padding: 0 4px;
-                    background: #ffffff;
-                    border-radius: 3px;
-                    border: 1px solid rgba(243, 130, 26, 0.5);
-                    font-weight: 400;
-                    font-size: 12px;
-                    color: #f3821a;
-                    line-height: 16px;
-                    text-align: center;
-                  }
-                  .sing {
-                    margin-right: 4px;
-                    flex-shrink: 0;
-                    padding: 0 4px;
-                    background: #ffffff;
-                    border-radius: 3px;
-                    border: 1px solid rgba(21, 178, 253, 0.5);
-                    font-weight: 400;
-                    font-size: 12px;
-                    color: #00adff;
-                    line-height: 16px;
-                    text-align: center;
-                  }
-                  .musicUserName {
-                    overflow: hidden;
-                    font-weight: 400;
-                    font-size: 13px;
-                    color: #777777;
-                    line-height: 16px;
-                  }
-                }
-              }
-            }
-            .musicRight {
-              flex-shrink: 0;
-              display: flex;
-              align-items: center;
-              .sc {
-                width: 26px;
-                height: 26px;
-                cursor: pointer;
-                &:hover {
-                  opacity: 0.8;
-                }
-              }
-              .addBtn {
-                margin-left: 12px;
-                width: 58px;
-                height: 26px;
-                background: #198cfe;
-                border-radius: 4px;
-                font-weight: 600;
-                font-size: 13px;
-                color: #ffffff;
-                line-height: 26px;
-                text-align: center;
-                cursor: pointer;
-                &:hover {
-                  opacity: 0.8;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+  height: 200px;
 }
 </style>

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

@@ -0,0 +1,606 @@
+<template>
+  <div class="cloudCoachList">
+    <div class="headCon">
+      <div class="headLeft">
+        <img class="tipImg" src="@/views/Editor/CanvasTool/imgs/yp.png" alt="" />
+        <div class="title">乐谱</div>
+      </div>
+      <div class="headright">
+        <img @click="emits('close')" class="closeBtn" src="./imgs/close.png" alt="" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="tabTools">
+        <div class="tabCon">
+          <div class="tab" :class="{ active: item.value === querData.tab }" v-for="item in tabData" :key="item.value">{{ item.label }}</div>
+        </div>
+        <div class="query">
+          <Input :placeholder="'请输入搜索关键词'" v-model:value="querData.value">
+            <template #prefix>
+              <img class="img" src="./imgs/query.png" alt="" />
+            </template>
+            <template #suffix>
+              <div class="queryBtn">搜索</div>
+            </template>
+          </Input>
+        </div>
+      </div>
+      <div class="musicListCon">
+        <div class="queryFrom">
+          <div class="queryFromList">
+            <div class="tit">标签：</div>
+            <div class="queryFromCon">
+              <div class="queryTip active">全部</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+            </div>
+          </div>
+          <div class="queryFromList">
+            <div class="tit">标签：</div>
+            <div class="queryFromCon">
+              <div class="queryTip">全部</div>
+              <div class="queryTip active">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <div class="queryTip">最新</div>
+              <Popover trigger="mouseenter" :offset="-4">
+                <template #content>
+                  <PopoverMenuItem>英式竖笛</PopoverMenuItem>
+                  <PopoverMenuItem>德式竖笛</PopoverMenuItem>
+                </template>
+                <div class="queryTip" :class="{ hoverActive: true }">
+                  <div>我是</div>
+                  <img src="./imgs/jt.png" alt="" />
+                </div>
+              </Popover>
+            </div>
+          </div>
+          <div class="isExpand" :class="{ active: isExpand }">
+            <div>{{ isExpand ? "收起" : "展开" }}</div>
+            <img src="./imgs/jiao.png" alt="" />
+          </div>
+        </div>
+        <!-- <div class="musicList empty"> -->
+        <div class="musicList">
+          <div class="musicListBox">
+            <div class="musicCon">
+              <div class="musicLeft">
+                <div class="iconCon">
+                  <img class="icon" src="" alt="" />
+                  <img class="jxImg" src="./imgs/jx.png" alt="" />
+                </div>
+                <div class="musicInfo">
+                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
+                  <div class="info">
+                    <div class="hotInfo">
+                      <img src="./imgs/hot.png" alt="" />
+                      <div>1.8万</div>
+                    </div>
+                    <div class="play">演唱</div>
+                    <div class="sing">演奏</div>
+                    <div class="musicUserName">
+                      <EllipsisScroll :title="'耶寒尔'" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="musicRight">
+                <img class="sc" src="./imgs/sc.png" alt="" />
+                <div class="addBtn">添加</div>
+              </div>
+            </div>
+            <div class="musicCon">
+              <div class="musicLeft">
+                <div class="iconCon">
+                  <img class="icon" src="" alt="" />
+                  <img class="jxImg" src="./imgs/jx.png" alt="" />
+                </div>
+                <div class="musicInfo">
+                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
+                  <div class="info">
+                    <div class="hotInfo">
+                      <img src="./imgs/hot.png" alt="" />
+                      <div>1.8万</div>
+                    </div>
+                    <div class="play">演唱</div>
+                    <div class="sing">演奏</div>
+                    <div class="musicUserName">
+                      <EllipsisScroll :title="'耶寒尔'" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="musicRight">
+                <img class="sc" src="./imgs/sc.png" alt="" />
+                <div class="addBtn">添加</div>
+              </div>
+            </div>
+            <div class="musicCon">
+              <div class="musicLeft">
+                <div class="iconCon">
+                  <img class="icon" src="" alt="" />
+                  <img class="jxImg" src="./imgs/jx.png" alt="" />
+                </div>
+                <div class="musicInfo">
+                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
+                  <div class="info">
+                    <div class="hotInfo">
+                      <img src="./imgs/hot.png" alt="" />
+                      <div>1.8万</div>
+                    </div>
+                    <div class="play">演唱</div>
+                    <div class="sing">演奏</div>
+                    <div class="musicUserName">
+                      <EllipsisScroll :title="'耶寒尔'" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="musicRight">
+                <img class="sc" src="./imgs/sc.png" alt="" />
+                <div class="addBtn">添加</div>
+              </div>
+            </div>
+            <div class="musicCon">
+              <div class="musicLeft">
+                <div class="iconCon">
+                  <img class="icon" src="" alt="" />
+                  <img class="jxImg" src="./imgs/jx.png" alt="" />
+                </div>
+                <div class="musicInfo">
+                  <EllipsisScroll class="musicTit" :title="'流浪地球流浪地球流浪地球流浪地球'" />
+                  <div class="info">
+                    <div class="hotInfo">
+                      <img src="./imgs/hot.png" alt="" />
+                      <div>1.8万</div>
+                    </div>
+                    <div class="play">演唱</div>
+                    <div class="sing">演奏</div>
+                    <div class="musicUserName">
+                      <EllipsisScroll :title="'耶寒尔'" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="musicRight">
+                <img class="sc" src="./imgs/sc.png" alt="" />
+                <div class="addBtn">添加</div>
+              </div>
+            </div>
+          </div>
+          <!-- <Empty /> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElButton } from "element-plus"
+import Input from "@/components/Input.vue"
+import Popover from "@/components/Popover.vue"
+import PopoverMenuItem from "@/components/PopoverMenuItem.vue"
+import Empty from "@/components/Empty"
+import EllipsisScroll from "@/components/ellipsisScroll"
+import { reactive, ref } from "vue"
+
+const emits = defineEmits<{
+  (event: "update", id: string): void
+  (event: "close"): void
+}>()
+function handleUpdate() {
+  emits("update", "1760123974848413697")
+}
+
+const tabData = [
+  {
+    label: "相关资源",
+    value: "1"
+  },
+  {
+    label: "共享资源",
+    value: "2"
+  },
+  {
+    label: "我的资源",
+    value: "3"
+  },
+  {
+    label: "我的收藏",
+    value: "4"
+  }
+]
+
+const isExpand = ref(true)
+
+const querData = reactive({
+  tab: "1",
+  value: ""
+})
+</script>
+
+<style lang="scss" scoped>
+.cloudCoachList {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  &::after {
+    width: 100%;
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+    bottom: 0;
+    left: 0;
+  }
+  .headCon {
+    width: 100%;
+    height: 64px;
+    border-bottom: 1px solid #eaeaea;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .headLeft {
+      margin-left: 30px;
+      display: flex;
+      align-items: center;
+      .tipImg {
+        width: 24px;
+        height: 24px;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 18px;
+        color: #131415;
+        margin-left: 8px;
+      }
+    }
+    .headright {
+      margin-right: 30px;
+      display: flex;
+      align-items: center;
+      .closeBtn {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 64px);
+    .tabTools {
+      height: 72px;
+      width: 100%;
+      padding: 18px 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .tabCon {
+        display: flex;
+        .tab {
+          margin-right: 32px;
+          font-weight: 400;
+          font-size: 16px;
+          color: #8b8d98;
+          line-height: 22px;
+          cursor: pointer;
+          &:hover {
+            opacity: 0.8;
+          }
+          &:last-child {
+            margin-right: 0;
+          }
+          &.active {
+            font-weight: 600;
+            color: #131415;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              width: 100%;
+              height: 10px;
+              background: linear-gradient(90deg, #77bbff 0%, rgba(163, 231, 255, 0.22) 100%);
+              bottom: 0;
+              left: 0;
+              z-index: -1;
+            }
+          }
+        }
+      }
+      .query {
+        width: 400px;
+        height: 36px;
+        &::v-deep(.input) {
+          align-items: center;
+          padding: 0 3px 0 12px;
+          border-radius: 18px;
+          height: 100%;
+          &:not(.disabled):hover,
+          &.focused {
+            .img {
+              opacity: 1;
+            }
+            .queryBtn {
+              opacity: 1;
+            }
+          }
+          input {
+            font-size: 14px;
+          }
+          .img {
+            width: 16px;
+            height: 16px;
+            opacity: 0.4;
+          }
+          .queryBtn {
+            width: 60px;
+            height: 30px;
+            background: #198cfe;
+            border-radius: 16px;
+            font-weight: 500;
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 30px;
+            text-align: center;
+            opacity: 0.4;
+            cursor: pointer;
+            &:hover {
+              opacity: 0.8 !important;
+            }
+          }
+        }
+      }
+    }
+    .musicListCon {
+      width: 100%;
+      height: calc(100% - 72px);
+      overflow: auto;
+      overflow: overlay;
+      display: flex;
+      flex-direction: column;
+      .queryFrom {
+        padding: 0 30px;
+        .queryFromList {
+          display: flex;
+          margin-bottom: 4px;
+          .tit {
+            flex-shrink: 0;
+            font-weight: 500;
+            font-size: 14px;
+            color: #131415;
+            line-height: 32px;
+            margin-right: 16px;
+          }
+          .queryFromCon {
+            display: flex;
+            flex-wrap: wrap;
+            .queryTip {
+              margin: 0 16px 12px 0;
+              font-weight: 400;
+              font-size: 14px;
+              color: rgba(0, 0, 0, 0.6);
+              line-height: 20px;
+              padding: 6px 16px;
+              background: #f5f6fa;
+              border-radius: 6px;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              & > img {
+                width: 7px;
+                height: 4px;
+                margin-left: 6px;
+              }
+              &.active,
+              &:hover {
+                background: #d2ecff;
+                color: rgba(0, 0, 0, 1);
+              }
+              &.hoverActive {
+                > img {
+                  transform: rotate(180deg);
+                }
+              }
+            }
+          }
+        }
+        .isExpand {
+          margin-bottom: 16px;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          font-weight: 400;
+          font-size: 14px;
+          color: #198cfe;
+          line-height: 20px;
+          align-items: center;
+          &:hover {
+            opacity: 0.8;
+          }
+          &.active > img {
+            transform: rotate(180deg);
+          }
+          & > img {
+            margin-left: 4px;
+            width: 10px;
+            height: 10px;
+          }
+        }
+      }
+      .musicList {
+        display: flex;
+        padding: 0 30px;
+        &.empty {
+          flex-grow: 1;
+          justify-content: center;
+          align-items: center;
+        }
+        .musicListBox {
+          width: calc(100% + 24px);
+          margin-left: -24px;
+          display: flex;
+          flex-wrap: wrap;
+          .musicCon {
+            margin-bottom: 24px;
+            width: calc(33.3333% - 24px);
+            margin-left: 24px;
+            padding: 16px;
+            background: #f5f6fa;
+            border-radius: 12px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            &:hover {
+              outline: 2px solid #198cfe;
+            }
+            .musicLeft {
+              display: flex;
+              align-items: center;
+              margin-right: 14px;
+              overflow: hidden;
+              .iconCon {
+                position: relative;
+                .icon {
+                  width: 70px;
+                  height: 70px;
+                  border-radius: 8px;
+                }
+                .jxImg {
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  width: 34px;
+                  height: 16px;
+                }
+              }
+              .musicInfo {
+                margin-left: 12px;
+                overflow: hidden;
+                .musicTit {
+                  font-weight: 600;
+                  font-size: 15px;
+                  color: #131415;
+                  line-height: 21px;
+                }
+                .info {
+                  margin-top: 13px;
+                  display: flex;
+                  align-items: center;
+                  .hotInfo {
+                    margin-right: 4px;
+                    padding: 0 4px;
+                    background: #fff3f3;
+                    border-radius: 3px;
+                    border: 1px solid rgba(254, 67, 67, 0.5);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    line-height: 16px;
+                    & > img {
+                      width: 10px;
+                      height: 12px;
+                    }
+                    & > div {
+                      font-weight: 400;
+                      font-size: 12px;
+                      color: #fe4343;
+                    }
+                  }
+                  .play {
+                    margin-right: 4px;
+                    flex-shrink: 0;
+                    padding: 0 4px;
+                    background: #ffffff;
+                    border-radius: 3px;
+                    border: 1px solid rgba(243, 130, 26, 0.5);
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #f3821a;
+                    line-height: 16px;
+                    text-align: center;
+                  }
+                  .sing {
+                    margin-right: 4px;
+                    flex-shrink: 0;
+                    padding: 0 4px;
+                    background: #ffffff;
+                    border-radius: 3px;
+                    border: 1px solid rgba(21, 178, 253, 0.5);
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #00adff;
+                    line-height: 16px;
+                    text-align: center;
+                  }
+                  .musicUserName {
+                    overflow: hidden;
+                    font-weight: 400;
+                    font-size: 13px;
+                    color: #777777;
+                    line-height: 16px;
+                  }
+                }
+              }
+            }
+            .musicRight {
+              flex-shrink: 0;
+              display: flex;
+              align-items: center;
+              .sc {
+                width: 26px;
+                height: 26px;
+                cursor: pointer;
+                &:hover {
+                  opacity: 0.8;
+                }
+              }
+              .addBtn {
+                margin-left: 12px;
+                width: 58px;
+                height: 26px;
+                background: #198cfe;
+                border-radius: 4px;
+                font-weight: 600;
+                font-size: 13px;
+                color: #ffffff;
+                line-height: 26px;
+                text-align: center;
+                cursor: pointer;
+                &:hover {
+                  opacity: 0.8;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/viewsframe/errorPage/errorPage.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="errorPage">
     <div class="error">
-      <div>您访问的页面不存在!</div>
-      <ElButton type="primary" @click="handleGoHome">返回首页</ElButton>
+      <img src="./imgs/404.png" class="img" alt="" />
+      <div class="tit">页面找不到了～</div>
+      <ElButton class="backBtn" type="primary" plain @click="handleGoHome">返回</ElButton>
     </div>
   </div>
 </template>
@@ -13,9 +14,7 @@ import { ElButton } from "element-plus"
 const router = useRouter()
 
 function handleGoHome() {
-  router.push({
-    path: "/"
-  })
+  router.back()
 }
 </script>
 
@@ -27,17 +26,26 @@ function handleGoHome() {
   justify-content: center;
   align-items: center;
   .error {
-    width: 600px;
-    height: 160px;
     background-color: #fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    & > div:first-child {
+    margin-top: -100px;
+    .img {
+      width: 272px;
+      height: 227px;
+    }
+    .tit {
+      font-weight: 400;
       font-size: 16px;
-      color: #ccc;
-      margin-bottom: 10px;
+      color: #999999;
+      margin-top: 16px;
+      margin-bottom: 20px;
+    }
+    .backBtn {
+      width: 88px;
+      height: 36px;
     }
   }
 }

src/viewsframe/login/login.vue

@@ -1,7 +1,50 @@
 <template>
-  <div class="login">没有登录的页面</div>
+  <div class="login">
+    <div class="error">
+      <img src="../errorPage/imgs/404.png" class="img" alt="" />
+      <div class="tit">登录已过期或服务器错误!</div>
+      <ElButton class="backBtn" type="primary" plain @click="handleGoHome">关闭页面</ElButton>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ElButton } from "element-plus"
 
-<style lang="scss" scoped></style>
+function handleGoHome() {
+  window.close()
+}
+</script>
+
+<style lang="scss" scoped>
+.login {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .error {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: -100px;
+    .img {
+      width: 272px;
+      height: 227px;
+    }
+    .tit {
+      font-weight: 400;
+      font-size: 16px;
+      color: #999999;
+      margin-top: 16px;
+      margin-bottom: 20px;
+    }
+    .backBtn {
+      width: 88px;
+      height: 36px;
+    }
+  }
+}
+</style>