litian
2024-04-24 6afa80f05bf3f001070fd8a2510ac7cde0d1d15d
src/views/home.vue
@@ -40,12 +40,23 @@
      <!-- 菜单内容 -->
      <div class="menuContent" v-if="menuState.open">
        <div class="searchBox">
          <div class="inputBox">
          <div class="inputBox" v-if="activeMenu !== 2">
            <el-input class="custom-input" placeholder="请输入内容">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
          <div v-else class="resourceTab">
            <div class="tabItem hover" @click="selectResourceType('default')">
              <p>默认资源</p>
              <div :class="resourceType == 'default' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr"/>
            <div class="tabItem hover" @click="selectResourceType('teacher')">
              <p>教师资源</p>
              <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
            </div>
          </div>
        </div>
        <!-- 目录 -->
@@ -71,7 +82,17 @@
          </div>
        </div>
        <!-- 资源 -->
        <div class="" v-if="activeMenu == 2"></div>
        <div class="" v-if="activeMenu == 2">
          <div class="resourceBox">
            <div class="inputBox">
              <el-input class="custom-input" placeholder="请输入内容">
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
          </div>
        </div>
        <!-- 知识图谱 -->
        <div class="" v-if="activeMenu == 3"></div>
        <!-- 截图 -->
@@ -530,12 +551,19 @@
])
// 选中菜单
const activeMenu = ref(0)
//资源类型
const resourceType = ref("default")
// 菜单点击
const menuItemClick = (index) => {
  activeMenu.value = index
  menuState.open = true
}
const selectResourceType = (type) => {
  resourceType.value = type
}
const menuState = reactive({
  open: true,
  notesColor: ''
@@ -1132,16 +1160,53 @@
        display: flex;
        justify-content: center;
        align-items: center;
        .inputBox {
          .custom-input {
            border: 1px solid #0093ff !important;
            border-radius: 50px;
            overflow: hidden;
          }
          .is-focus,
          .el-input__wrapper {
            box-shadow: none !important;
          }
      }
      .resourceBox{
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .resourceTab{
        width:100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:16px;
        .hr{
          height:25px;
          background:#DBDBDB !important;
        }
        .tabItem:first-child(1){
          border-right:1px solid #707070;
        }
        .tabItem{
          flex:1;
          text-align: center;
          line-height:57px;
        }
        .text {
          width: 43px;
          height: 3px;
          margin: 0 auto;
          background: #0093ff;
          border-radius: 3px 3px 0px 0px;
        }
        .line{
          height: 3px;
        }
      }
      .inputBox {
        .custom-input {
          border: 1px solid #0093ff !important;
          border-radius: 50px;
          overflow: hidden;
        }
        .is-focus,
        .el-input__wrapper {
          box-shadow: none !important;
        }
      }
      .screenBox {