bug 修改

src/assets/elementTheme.scss

@@ -25,3 +25,42 @@
    font-size: 22px;
    color: #aaaaaa;
 }
+
+.el-cascader__dropdown {
+   .el-cascader-node:not(.is-disabled):hover,
+   .el-cascader-node:not(.is-disabled):focus {
+      background-color: transparent;
+   }
+   .el-cascader-menu:last-child .el-cascader-node {
+      padding: 0 8px;
+   }
+   .el-cascader-node__prefix {
+      display: none;
+   }
+   .is-active .el-cascader-node__label {
+      color: #994d1c;
+   }
+   .el-cascader-node__label {
+      font-size: 16px;
+      line-height: 40px;
+      border-radius: 8px;
+      &:hover {
+         color: #994d1c;
+         background: #fff3d7;
+      }
+   }
+}
+
+.el-popper.is-light {
+   box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 17px 0px;
+   border-radius: 12px;
+   border: none;
+   .el-popper__arrow {
+      display: none;
+   }
+}
+
+.el-scrollbar__thumb {
+   opacity: 1;
+   background-color: #ececec;
+}

src/components/ellipsisScroll/ellipsisScroll.vue

@@ -0,0 +1,76 @@
+<!--
+* @FileDescription: 文本超出显示省略号 移动鼠标上去滚动显示
+* @Author: 黄琪勇
+* @Date:2024-03-25 11:50:36
+-->
+<template>
+   <div class="xx">
+      <div ref="ellipsisScrollDom" :class="{ isScroll: isScroll }" class="ellipsisScroll">
+         {{ props.title }}
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue"
+
+const props = defineProps<{
+   title: string
+}>()
+
+const ellipsisScrollDom = ref<HTMLElement>()
+const isScroll = ref(false)
+
+onMounted(() => {
+   ellipsisScrollDom.value?.addEventListener("mouseenter", handleIsScroll)
+   ellipsisScrollDom.value?.addEventListener("mouseleave", handleLeaveScroll)
+})
+onUnmounted(() => {
+   ellipsisScrollDom.value?.removeEventListener("mouseenter", handleIsScroll)
+   ellipsisScrollDom.value?.removeEventListener("mouseleave", handleLeaveScroll)
+})
+
+let widthCalc = 0
+
+function handleIsScroll(e: MouseEvent) {
+   const target = e.target as HTMLElement
+   widthCalc = target.scrollWidth - target.clientWidth
+   if (widthCalc > 0) {
+      isScroll.value = true
+   } else {
+      isScroll.value = false
+   }
+}
+function handleLeaveScroll() {
+   isScroll.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.xx {
+   width: 100%;
+}
+.ellipsisScroll {
+   width: 100%;
+   display: inline-block;
+   white-space: nowrap;
+   text-overflow: ellipsis;
+   overflow: hidden;
+   line-height: 16px;
+   &.isScroll {
+      &:hover {
+         width: auto;
+         overflow: visible;
+         animation: 3s roll linear infinite normal;
+      }
+      @keyframes roll {
+         0% {
+            transform: translateX(0);
+         }
+         100% {
+            transform: translateX(-clac(100% - v-bind(widthCalc + "px")));
+         }
+      }
+   }
+}
+</style>

src/components/ellipsisScroll/index.ts

@@ -0,0 +1,2 @@
+import ellipsisScroll from "./ellipsisScroll.vue"
+export default ellipsisScroll

src/components/tooltipAutoShow/tooltipAutoShow.vue

@@ -6,7 +6,7 @@
 <template>
    <el-tooltip :placement="props.placement" :disabled="disabled">
       <template #content>
-         <div :style="{ maxWidth: `${props.maxWidth}px` }">{{ props.title }}</div>
+         <div :style="{ width: `${props.maxWidth}px` }">{{ props.title }}</div>
       </template>
       <div ref="tooltipDom" class="tooltipAutoShow">{{ props.title }}</div>
    </el-tooltip>

src/hooks/useDialogConfirm/dialogConfirm.vue

@@ -5,9 +5,7 @@
 -->
 <template>
    <div class="dialogConfirm">
-      <div class="close" @click="close">
-         <img src="@/img/useDialogConfirm/close.png" />
-      </div>
+      <div class="close" @click="close"></div>
       <img class="headImg" v-if="props.modalData.headImg" :src="props.modalData.headImg" />
       <div class="textCon">
          <div class="text">{{ props.modalData.text }}</div>
@@ -66,6 +64,11 @@ function ok() {
       width: 42px;
       height: 44px;
       cursor: pointer;
+      background: url("@/img/useDialogConfirm/close.png") no-repeat;
+      &:hover {
+         background: url("@/img/useDialogConfirm/closeHover.png") no-repeat;
+         background-size: cover;
+      }
    }
    .headImg {
       position: absolute;

src/hooks/useDialogConfirm/index.scss

@@ -5,7 +5,7 @@
    }
    .modalFrameBox {
       background: linear-gradient(180deg, #fdfef2 0%, #fdf6de 100%);
-      box-shadow: 0px 7px 10px 0px #6e6e6e, 0px 5px 0px 0px #ca8e2d;
+      box-shadow: 0px 5px 0px 0px #ca8e2d, 0px 7px 10px 0px #6e6e6e;
       border-radius: 20px;
       border: 8px solid #ffdd98;
       position: relative;

src/libs/auth.ts

@@ -2,7 +2,7 @@ import Cookies from "js-cookie"
 
 /* code */
 // eslint-disable-next-line prefer-const
-export let CODE401 = 401 //没有权限   管乐迷为401  管乐团为5000
+export let CODE401 = 403 //没有权限   管乐迷为403  管乐团为5000
 export function setCODE401(code: number) {
    CODE401 = code
 }

src/views/cloudTextbooks/chooseDialog.vue

@@ -5,9 +5,7 @@
 -->
 <template>
    <div class="chooseDialog">
-      <div class="close" @click="close">
-         <img src="@/img/useDialogConfirm/close.png" />
-      </div>
+      <div class="close" @click="close"></div>
       <div class="chooseCon" v-loading="loading">
          <img class="imgMid" src="@/img/cloudTextbooks/shu.png" />
          <div class="chooseBox" v-for="(listDetails, index) in listDetailData" :key="index">
@@ -81,6 +79,11 @@ function handlePaly(id: string) {
       width: 42px;
       height: 44px;
       cursor: pointer;
+      background: url("@/img/useDialogConfirm/close.png") no-repeat;
+      &:hover {
+         background: url("@/img/useDialogConfirm/closeHover.png") no-repeat;
+         background-size: cover;
+      }
    }
    .chooseCon {
       width: 100%;

src/views/cloudTextbooks/cloudTextbooks.vue

@@ -12,11 +12,14 @@
                <el-input
                   @keyup.enter="handleQuery"
                   @input="handleInputQuery"
+                  @focus="handleInputFocus"
+                  @blur="handleInputBlur"
                   v-model="queryStr"
                   style="max-width: 600px"
                   placeholder="请输入教材名称"
                   clearable
                   class="iptSelect"
+                  :class="{ isInputFocus: isInputFocus }"
                >
                   <template #prepend>
                      <img src="@/img/cloudTextbooks/ss.png" />
@@ -32,9 +35,14 @@
                <div class="cloudTextbooksBox">
                   <div class="bookshelf" v-for="(list, index) in listData" :key="index">
                      <div class="book" v-for="item in list" :key="item.id">
-                        <ElImage class="img" :src="item.img" @click="handleClick(item.id)" />
+                        <div class="imgCon">
+                           <ElImage class="img" :src="item.img" @click="handleClick(item.id)" />
+                           <img class="imgbg" src="@/img/cloudTextbooks/yy.png" />
+                           <img class="imgbg1" src="@/img/cloudTextbooks/hd1.png" />
+                           <img class="imgbg2" src="@/img/cloudTextbooks/hd.png" />
+                           <div class="courseNum">共{{ item.courseNum }}课</div>
+                        </div>
                         <div class="name">{{ item.name }}</div>
-                        <div class="courseNum">共{{ item.courseNum }}课</div>
                      </div>
                   </div>
                   <el-empty
@@ -81,6 +89,15 @@ const classType = ref("")
 const classTypeOpt = shallowRef<{ value: string; label: string }[]>([])
 const queryStr = ref("")
 
+// 选中样式
+const isInputFocus = ref(false)
+function handleInputFocus() {
+   isInputFocus.value = true
+}
+function handleInputBlur() {
+   isInputFocus.value = false
+}
+
 handleGetClassTypeOpt()
 handleGetList()
 
@@ -166,17 +183,26 @@ function handleClick(id: string) {
             .el-input__wrapper {
                border-radius: 20px;
                box-shadow: none;
-               padding: 1px 26px;
+               padding: 1px 26px 1px 16px;
+               border: 1px solid transparent;
+               &.is-focus {
+                  border-color: #ff8057 !important;
+                  box-shadow: 0px 0px 4px 0px rgba(255, 155, 109) !important;
+               }
                .el-input__inner {
                   --el-input-inner-height: 40px;
-                  text-align: center;
                }
             }
          }
+         .isInputFocus {
+            border-color: #ff8057 !important;
+            box-shadow: 0px 0px 4px 0px rgba(255, 155, 109);
+         }
          & > :deep(.iptSelect) {
+            border: 1px solid transparent;
             margin-left: 12px;
             width: 382px;
-            background: #ffffff;
+            background: #fff;
             border-radius: 21px;
             &.el-input {
                --el-input-text-color: #333;
@@ -232,6 +258,7 @@ function handleClick(id: string) {
          flex-direction: column;
          align-items: center;
          min-width: 1500px;
+         padding-top: 10px;
          .bookshelf {
             width: 1500px;
             padding: 0 116px;
@@ -248,38 +275,72 @@ function handleClick(id: string) {
                width: 20%;
                text-align: center;
                position: relative;
-               .img {
-                  cursor: pointer;
+               padding-top: 4px;
+               .imgCon {
                   width: 172px;
                   height: 212px;
+                  display: inline-block;
+                  position: relative;
                   &:hover {
-                     opacity: $opacity-hover;
+                     transform: translateY(-4px);
+                  }
+                  .img {
+                     cursor: pointer;
+                     width: 172px;
+                     height: 212px;
+                  }
+                  .imgbg {
+                     position: absolute;
+                     top: -20px;
+                     right: -50px;
+                     width: 76px;
+                     height: 247px;
+                  }
+                  .imgbg1 {
+                     position: absolute;
+                     top: 0px;
+                     right: -4px;
+                     width: 4px;
+                     height: 212px;
+                  }
+                  .imgbg2 {
+                     position: absolute;
+                     top: 0px;
+                     left: 0px;
+                     width: 9px;
+                     height: 212px;
+                  }
+                  .courseNum {
+                     position: absolute;
+                     left: 50%;
+                     bottom: 10px;
+                     transform: translateX(-50%);
+                     background: #ffffff;
+                     padding: 0 10px;
+                     border-radius: 13px;
+                     opacity: 0.83;
+                     line-height: 25px;
+                     font-weight: 400;
+                     font-size: 16px;
+                     color: #6b3c2d;
                   }
                }
                .name {
-                  margin-top: 50px;
+                  margin-top: 48px;
                   font-weight: 400;
                   font-size: 19px;
                   color: #393939;
                   line-height: 26px;
                }
-               .courseNum {
-                  position: absolute;
-                  left: 50%;
-                  top: 176px;
-                  transform: translateX(-50%);
-                  background: #ffffff;
-                  padding: 0 10px;
-                  border-radius: 13px;
-                  opacity: 0.83;
-                  line-height: 25px;
-                  font-weight: 400;
-                  font-size: 16px;
-                  color: #6b3c2d;
-               }
             }
          }
       }
    }
 }
+:global(.headDropdown.el-dropdown__popper.el-popper) {
+   box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
+   background: #ffffff;
+   border-radius: 16px;
+   inset: 84px 54px auto auto !important;
+}
 </style>

src/views/homePage/components/navContainer/navContainer.vue

@@ -10,11 +10,11 @@
             <div class="navImg" :class="{ cursor: props.headImg.url }">
                <img :src="props.headImg.img" @click="handleRouter(props.headImg.url)" />
             </div>
+            <img class="horn" src="@/img/layout/jiao.png" />
             <div class="nav" v-for="(nav, index) in navs" :key="nav.name">
                <div class="name" :class="{ cursor: nav.url }" @click="handleRouter(nav.url)">{{ nav.name }}</div>
                <div class="arrow" v-if="navs.length > index + 1">></div>
             </div>
-            <img class="horn" src="@/img/layout/jiao.png" />
          </div>
          <slot></slot>
       </div>
@@ -85,6 +85,9 @@ function handleRouter(url?: string) {
          font-weight: 600;
          font-size: 20px;
          color: #994d1c;
+         &:last-child {
+            margin-right: 10px;
+         }
          .arrow {
             margin: 0 6px;
          }
@@ -93,6 +96,8 @@ function handleRouter(url?: string) {
          position: absolute;
          top: -3px;
          right: -49px;
+         width: 49px;
+         height: 60px;
       }
    }
    .container {

src/views/homePage/homePage_gym.vue

@@ -14,7 +14,7 @@
          </div>
          <div class="courseBoard">
             <div class="details">
-               <el-empty :image-size="360" :image="require('@/img/layout/empty.png')" description="您还没有待上课程哦～" />
+               <el-empty style="margin-top: 50px" :image-size="360" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
             </div>
          </div>
       </div>
@@ -81,8 +81,17 @@ function handleRouter(url?: string) {
 </script>
 
 <style lang="scss" scoped>
-.navContainer :deep(.navImg > img) {
-   top: 72% !important;
+.navContainer :deep(.navCon) {
+   .navImg > img {
+      top: 72% !important;
+   }
+   .nav {
+      font-size: 28px;
+      font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
+      &:last-child {
+         margin-right: 30px;
+      }
+   }
 }
 .homePage {
    width: 100%;
@@ -108,7 +117,8 @@ function handleRouter(url?: string) {
          flex-direction: column;
          cursor: pointer;
          &:hover {
-            opacity: $opacity-hover;
+            transform: scale(1.02);
+            box-shadow: 0px 2px 14px 0px #e4d7c2;
          }
          > div {
             margin-top: 10px;
@@ -130,7 +140,7 @@ function handleRouter(url?: string) {
       width: 572px;
       height: calc(100% + 35px);
       background: url("@/img/homePage/bg.png") no-repeat;
-      background-size: cover;
+      background-size: 100% 100%;
       position: relative;
       .details {
          width: 100%;

src/views/homePage/homePage_gyt.vue

@@ -14,7 +14,7 @@
          </div>
          <div class="courseBoard">
             <div class="details">
-               <el-empty :image-size="360" :image="require('@/img/layout/empty.png')" description="您还没有待上课程哦～" />
+               <el-empty style="margin-top: 50px" :image-size="360" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
             </div>
          </div>
       </div>
@@ -81,8 +81,17 @@ function handleRouter(url?: string) {
 </script>
 
 <style lang="scss" scoped>
-.navContainer :deep(.navImg > img) {
-   top: 72% !important;
+.navContainer :deep(.navCon) {
+   .navImg > img {
+      top: 72% !important;
+   }
+   .nav {
+      font-size: 28px;
+      font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
+      &:last-child {
+         margin-right: 30px;
+      }
+   }
 }
 .homePage {
    width: 100%;
@@ -108,7 +117,8 @@ function handleRouter(url?: string) {
          flex-direction: column;
          cursor: pointer;
          &:hover {
-            opacity: $opacity-hover;
+            transform: scale(1.02);
+            box-shadow: 0px 2px 14px 0px #e4d7c2;
          }
          > div {
             margin-top: 10px;
@@ -130,7 +140,7 @@ function handleRouter(url?: string) {
       width: 572px;
       height: calc(100% + 35px);
       background: url("@/img/homePage/bg.png") no-repeat;
-      background-size: cover;
+      background-size: 100% 100%;
       position: relative;
       .details {
          width: 100%;

src/viewsframe/layout/layout.vue

@@ -8,16 +8,18 @@
       <div class="head">
          <el-dropdown :popper-options="{}" popper-class="headDropdown" class="avatar-con" trigger="click" @visible-change="visibleChange">
             <div class="avatar">
-               <div class="imgCon"><el-image class="avatarImg" :src="userInfo.avatar" /></div>
-               <div class="name">{{ userInfo.username }}</div>
+               <div class="imgCon"><el-image class="avatarImg" :src="userInfo.avatar || require('@/img/layout/userImg.png')" /></div>
+               <div class="name">
+                  {{ userInfo.username }}
+               </div>
                <img class="horn" :class="{ isVisible: visible }" src="@/img/layout/horn.png" />
             </div>
             <template #dropdown>
                <div class="dropdown">
                   <div class="avatar-item">
-                     <el-image class="avatarImg" :src="userInfo.avatar" />
+                     <el-image class="avatarImg" :src="userInfo.avatar || require('@/img/layout/userImg.png')" />
                      <div class="userInfo">
-                        <div class="realName">{{ userInfo.realName }}</div>
+                        <div class="realName">{{ userInfo.username }}</div>
                         <div class="phone">{{ userInfo.phone }}</div>
                      </div>
                   </div>
@@ -166,12 +168,11 @@ function handleLogout() {
          padding: 0 12px;
          width: 100%;
          height: 50px;
-         background: #f5f6fa;
          border-radius: 10px;
          display: flex;
          align-items: center;
          &:hover {
-            opacity: $opacity-hover;
+            background: #f5f6fa;
          }
          .text {
             margin-left: 20px;