样式修改

src/assets/styles/global.scss

@@ -149,7 +149,7 @@ textarea {
 }
 
 ::-webkit-scrollbar {
-  width: 5px;
+  width: 4px;
   height: 5px;
   background-color: transparent;
 }

src/views/Editor/CanvasTool/index.vue

@@ -390,7 +390,7 @@
     </Modal>
     <Modal
       :contentStyle="{
-        width: '70%',
+        width: '72%',
         minWidth: '1200px',
         height: '86%',
         boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.08)',

src/views/Screen/BaseView.vue

@@ -246,7 +246,7 @@ const contextmenus = (): ContextmenuItem[] => {
     height: 66px;
     position: absolute;
     left: 0;
-    top: -66px;
+    bottom: 0;
   }
 
   .content {

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

@@ -73,7 +73,7 @@
                 >
                   {{ item.instruments[0].name }}
                 </div>
-                <Popover v-model:value="item.isExpand" trigger="mouseenter" v-else :offset="-4" :key="item.id + '_'">
+                <Popover v-model:value="item.isExpand" trigger="mouseenter" :placement="'bottom-start'" v-else :offset="-4" :key="item.id + '_'">
                   <template #content>
                     <PopoverMenuItem
                       @click="

src/views/components/element/enjoyElement/resourcesList/resourcesList.vue

@@ -60,7 +60,7 @@
                 >
                   {{ item.instruments[0].name }}
                 </div>
-                <Popover v-model:value="item.isExpand" trigger="mouseenter" v-else :offset="-4" :key="item.id + '_'">
+                <Popover v-model:value="item.isExpand" trigger="mouseenter" :placement="'bottom-start'" v-else :offset="-4" :key="item.id + '_'">
                   <template #content>
                     <PopoverMenuItem
                       @click="

src/views/components/element/musicResourcesElement/musicResourcesList/components/instrumentList.vue

@@ -37,15 +37,15 @@ const emits = defineEmits<{
   .musicCon {
     width: calc(16.6666% - 40px);
     margin-left: 40px;
-    margin-bottom: 32px;
+    margin-top: 32px;
     display: flex;
     flex-direction: column;
     align-items: center;
     border-radius: 12px;
     cursor: pointer;
     position: relative;
-    &:nth-last-child(-n + 6) {
-      margin-bottom: 0;
+    &:nth-child(-n + 6) {
+      margin-top: 0;
     }
     &:hover {
       .avatar {
@@ -75,8 +75,8 @@ const emits = defineEmits<{
       border-radius: 12px;
     }
     .addBtn {
-      top: 6px;
-      right: 6px;
+      top: 8px;
+      right: 8px;
       position: absolute;
       font-weight: 600;
       font-size: 12px;

src/views/components/element/musicResourcesElement/musicResourcesList/components/musicList.vue

@@ -37,7 +37,7 @@ const emits = defineEmits<{
   .musicCon {
     width: calc(33.3333% - 24px);
     margin-left: 24px;
-    margin-bottom: 24px;
+    margin-top: 24px;
     padding: 16px;
     display: flex;
     align-items: center;
@@ -50,8 +50,8 @@ const emits = defineEmits<{
       transform: scale(1.02);
       transition: all 0.2s ease;
     }
-    &:nth-last-child(-n + 3) {
-      margin-bottom: 0;
+    &:nth-child(-n + 3) {
+      margin-top: 0;
     }
     .highName {
       overflow: hidden;
@@ -78,7 +78,7 @@ const emits = defineEmits<{
       font-size: 13px;
       color: #ffffff;
       line-height: 19px;
-      padding: 4px 12px;
+      padding: 4px 14px;
       background: #198cfe;
       border-radius: 4px;
       &:hover {

src/views/components/element/musicResourcesElement/musicResourcesList/components/musicianList.vue

@@ -37,15 +37,15 @@ const emits = defineEmits<{
   .musicCon {
     width: calc(16.6666% - 40px);
     margin-left: 40px;
-    margin-bottom: 32px;
+    margin-top: 32px;
     display: flex;
     flex-direction: column;
     align-items: center;
     border-radius: 12px;
     cursor: pointer;
     position: relative;
-    &:nth-last-child(-n + 6) {
-      margin-bottom: 0;
+    &:nth-child(-n + 6) {
+      margin-top: 0;
     }
     &:hover {
       .avatar {
@@ -75,8 +75,8 @@ const emits = defineEmits<{
       border-radius: 12px;
     }
     .addBtn {
-      top: 6px;
-      right: 6px;
+      top: 8px;
+      right: 8px;
       position: absolute;
       font-weight: 600;
       font-size: 12px;

src/views/components/element/musicResourcesElement/musicResourcesList/musicResourcesList.vue

@@ -67,7 +67,7 @@
                 >
                   {{ item.name }}
                 </div>
-                <Popover v-model:value="item.isExpand" trigger="mouseenter" v-else :offset="-4" :key="item.id + '_'">
+                <Popover v-model:value="item.isExpand" trigger="mouseenter" :placement="'bottom-start'" v-else :offset="-4" :key="item.id + '_'">
                   <template #content>
                     <PopoverMenuItem
                       @click="
@@ -115,9 +115,9 @@
   </div>
   <Modal
     :contentStyle="{
-      width: '70%',
+      width: '86%',
       minWidth: '1200px',
-      height: '86%',
+      height: '90%',
       boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.08)',
       borderRadius: '16px',
       border: '1px solid #DEDEDE',

src/views/components/element/musicResourcesElement/musicTheoryList/courseCollapse.vue

@@ -61,6 +61,7 @@ function handleCollapseItem(item: Record<string, any>) {
 
 <style lang="scss" scoped>
 .courseCollapse {
+  --el-collapse-header-height: 50px !important;
   border: none;
   ::v-deep(.el-collapse-item) {
     padding: 0 8px;
@@ -142,7 +143,9 @@ function handleCollapseItem(item: Record<string, any>) {
         margin-top: 0;
       }
       &:hover {
-        opacity: 0.8;
+        .itemName {
+          color: #0482ff;
+        }
       }
       &.active {
         background: rgba(16, 31, 87, 0.06);

src/views/components/element/musicResourcesElement/musicTheoryList/musicTheoryList.vue

@@ -110,15 +110,14 @@ function handleAdd() {
     height: calc(100% - 130px);
     background: #f5f6fa;
     display: flex;
-    padding: 24px 12px 0 12px;
+    padding: 24px 0 24px 30px;
     .leftCon {
       overflow-y: auto;
       width: 360px;
       height: 100%;
       flex-shrink: 0;
       background: #ffffff;
-      border-top-left-radius: 16px;
-      border-top-right-radius: 16px;
+      border-radius: 16px;
       padding: 12px;
     }
     .rightCon {