Home Explore Help
Sign In
chao
/
course_resource
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update

chao 4 months ago
parent
a87745f417
commit
44eb3d9155
23 changed files with 475 additions and 198 deletions
Split View Show Diff Stats
  1. 0 0
      dist/assets/Details-fLxAT7On.js
  2. 0 1
      dist/assets/Details-x9mm4GTM.js
  3. 0 0
      dist/assets/admin-zxRR0MoZ.js
  4. 0 0
      dist/assets/index-M-K4jkb_.css
  5. 0 0
      dist/assets/index-ocwXaO2D.js
  6. 0 0
      dist/assets/index-x4IBk6WM.css
  7. 2 2
      dist/index.html
  8. BIN
      src/assets/icon/1-1.png
  9. BIN
      src/assets/icon/1.png
  10. BIN
      src/assets/icon/2.png
  11. BIN
      src/assets/icon/5EX.png
  12. BIN
      src/assets/icon/PBL.png
  13. BIN
      src/assets/icon/POTE.png
  14. BIN
      src/assets/icon/down.png
  15. BIN
      src/assets/icon/up.png
  16. BIN
      src/assets/icon/创意智造.png
  17. 2 2
      src/assets/main.css
  18. 40 11
      src/components/main/Practice.vue
  19. 153 67
      src/components/main/edu.vue
  20. 70 62
      src/components/main/other.vue
  21. 67 40
      src/components/main/resource.vue
  22. 1 1
      src/views/iframeRoute.vue
  23. 140 12
      src/views/main.vue

File diff suppressed because it is too large
+ 0 - 0
dist/assets/Details-fLxAT7On.js


+ 0 - 1
dist/assets/Details-x9mm4GTM.js
View File 

@@ -1 +0,0 @@
 
-import{u as m,r as i,o as p,a as l,b as a,c as b,d as t,w as s,F as f,H as h,e as n,t as k,f as v,g,h as r,i as y,C,j as x,P as B,k as N}from"./index-u0iT059k.js";const V={class:"iframDiv"},P={__name:"Details",setup(D){const{query:u,params:o}=m();console.log(u,o);const e=i("");return p(()=>{e.value=o.title}),(w,F)=>{const c=l("el-breadcrumb-item"),_=l("el-breadcrumb"),d=l("el-page-header");return a(),b(f,null,[t(h),t(d,null,{breadcrumb:s(()=>[t(_,{separator:"/"},{default:s(()=>[t(c,{to:{path:"/"}},{default:s(()=>[n(" 首页 ")]),_:1}),t(c,null,{default:s(()=>[n(k(v(o).title),1)]),_:1})]),_:1})]),default:s(()=>[g("div",V,[e.value=="课程列表"?(a(),r(C,{key:0})):e.value=="资源中心"?(a(),r(x,{key:1})):e.value=="实践中心"?(a(),r(B,{key:2})):e.value=="其他课程资源"?(a(),r(N,{key:3})):y("",!0)])]),_:1})],64)}}};export{P as default};

File diff suppressed because it is too large
+ 0 - 0
dist/assets/admin-zxRR0MoZ.js


File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-M-K4jkb_.css


File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-ocwXaO2D.js


File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-x4IBk6WM.css


+ 2 - 2
dist/index.html
View File 

@@ -8,8 +8,8 @@
 
     <script>
 
       document.domain = "cocorobo.cn"
 
     </script>
 
-    <script type="module" crossorigin src="./assets/index-u0iT059k.js"></script>
 
-    <link rel="stylesheet" crossorigin href="./assets/index-M-K4jkb_.css">
 
+    <script type="module" crossorigin src="./assets/index-ocwXaO2D.js"></script>
 
+    <link rel="stylesheet" crossorigin href="./assets/index-x4IBk6WM.css">
 
   </head>
 
   <body>
 
     <div id="app"></div>

BIN
src/assets/icon/1-1.png
View File


BIN
src/assets/icon/1.png
View File


BIN
src/assets/icon/2.png
View File


BIN
src/assets/icon/5EX.png
View File


BIN
src/assets/icon/PBL.png
View File


BIN
src/assets/icon/POTE.png
View File


BIN
src/assets/icon/down.png
View File


BIN
src/assets/icon/up.png
View File


BIN
src/assets/icon/创意智造.png
View File


+ 2 - 2
src/assets/main.css
View File 

@@ -101,12 +101,12 @@ table {
 
 }
 
 
 html {
 
-  overflow-y: scroll;
 
+  overflow-y: auto;
 
 }
 
 
 #app {
 
   /* padding: 0 20px; */
 
-  height: 100vh;
 
+  /* height: 100vh; */
 
 }
 
 
 /* 清除浮动 */

+ 40 - 11
src/components/main/Practice.vue
View File 

@@ -6,8 +6,8 @@
 
         <!-- <router-link to="/iframe/实践中心/图形化"> -->
 
         <img :src="GraphicsImg" alt="">
 
         <div>
 
-          <span>图形化</span>
 
-          <p>通过组合图形化程序进行人工智能硬件控制程序编写。</p>
 
+          <p class="title">图形化</p>
 
+          <p title="通过组合图形化程序进行人工智能硬件控制程序编写。">通过组合图形化程序进行人工智能硬件控制程序编写。</p>
 
         </div>
 
         <!-- </router-link> -->
 
 
@@ -18,8 +18,8 @@
 
         <!-- <router-link to="/iframe/实践中心/Python"> -->
 
         <img :src="pythonImg" alt="">
 
         <div>
 
-          <span>Python</span>
 
-          <p>通过编写Python语言进行人工智能硬件控制程序编写。</p>
 
+          <p class="title">Python</p>
 
+          <p title="通过编写Python语言进行人工智能硬件控制程序编写。">通过编写Python语言进行人工智能硬件控制程序编写。</p>
 
         </div>
 
         <!-- </router-link> -->
 
 
@@ -50,32 +50,61 @@ const openApplication = (type) => {
 
       min-height: 36px;
 
       background: #fff;
 
       border-radius: 10px;
 
-      text-decoration: none;
 
-      display: block;
 
       position: relative;
 
       padding: 16px;
 
-      cursor: pointer;
 
+      display: flex;
 
+      align-items: center;
 
 
       img {
 
         width: 56px;
 
+        height: fit-content;
 
+        margin-right: 5px;
 
       }
 
 
-      div {
 
+      .course_down {
 
+        // display: inline-block;
 
+        padding: 5px 8px;
 
         position: absolute;
 
-        left: 80px;
 
-        top: 16px;
 
+        background-color: #efefef;
 
+        top: 5px;
 
+        right: 8px;
 
+        border-radius: 5px;
 
+        font-size: 12px;
 
+        color: #555;
 
+        cursor: pointer;
 
+        z-index: 10;
 
+      }
 
+
 
+      div {
 
+        // position: absolute;
 
+        // left: 80px;
 
+        // top: 16px;
 
+        width: calc(100% - 56px);
 
+        cursor: pointer;
 
+
 
 
-        span {
 
+        .title {
 
+          display: -webkit-box;
 
+          -webkit-line-clamp: 1;
 
+          width: 100%;
 
           color: rgba(0, 0, 0, 0.9);
 
           font-size: 14px;
 
           margin-bottom: 10px;
 
           font-weight: 400;
 
+          text-overflow: ellipsis;
 
+          overflow: hidden;
 
+          word-break: break-all;
 
         }
 
 
         p {
 
           color: rgba(0, 0, 0, 0.4);
 
           font-size: 12px;
 
           padding-right: 20px;
 
+          overflow: hidden;
 
+          text-overflow: ellipsis;
 
+          -webkit-line-clamp: 2;
 
+          display: -webkit-box;
 
+          -webkit-box-orient: vertical;
 
         }
 
       }
 
     }

+ 153 - 67
src/components/main/edu.vue
View File 

@@ -1,76 +1,162 @@
 
 <template>
 
-    <h2 class="contentTitle">教学管理</h2>
 
-    <el-row :gutter="20">
 
-      <el-col :span="6">
 
-        <div class="grid-content" @click="openApplication('evaluate')">
 
-          <!-- <router-link to="/iframe/其他课程资源/学生评价"> -->
 
-          <img :src="Img3" alt="">
 
-          <div>
 
-            <span>学生评价</span>
 
-            <p>教师基于平台数据采集开展对应目标的学生评价。</p>
 
-          </div>
 
-          <!-- </router-link> -->
 
+  <h2 class="contentTitle">其他课程资源</h2>
 
+  <el-row :gutter="20">
 
+    <el-col :span="6" v-if="Identity != 1">
 
+      <div class="grid-content" @click="openApplications('project')">
 
+        <!-- <router-link to="/iframe/其他课程资源/课程管理"> -->
 
+        <img :src="Img1" alt="">
 
+        <div>
 
+          <p class="title" title="创建课程">创建课程</p>
 
+          <p title="教师自定义创建个人人工智能课程教学资源。">教师自定义创建个人人工智能课程教学资源。</p>
 
         </div>
 
-      </el-col>
 
-    </el-row>
 
-  </template>
 
-  <script setup>
 
-  import { ref } from 'vue';
 
-  import Img1 from '@/assets/icon/课程管理.png'
 
-  import Img2 from '@/assets/icon/课程中心.png'
 
-  import Img3 from '@/assets/icon/学生评价icon.png'
 
-  
-  const openApplication = (type) => {
 
-    top.U.MD.D.I.openApplication(type)
 
+        <!-- </router-link> -->
 
+
 
+      </div>
 
+    </el-col>
 
+    <el-col :span="6">
 
+      <div class="grid-content" @click="openApplications('study')">
 
+        <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
 
+        <img :src="Img2" alt="">
 
+        <span class="course_down" @click="courseDown($event)">课件下载</span>
 
+        <div>
 
+          <p class="title" title="拓展课程">拓展课程</p>
 
+          <p title="教师使用预置或自定义补充资源开展授课。">教师使用预置或自定义补充资源开展授课。</p>
 
+        </div>
 
+        <!-- </router-link> -->
 
+      </div>
 
+    </el-col>
 
+    <el-col :span="6">
 
+      <div class="grid-content" @click="openApplication('evaluate')">
 
+        <!-- <router-link to="/iframe/其他课程资源/学生评价"> -->
 
+        <img :src="Img3" alt="">
 
+        <div>
 
+          <p title="学生评价" class="title">学生评价</p>
 
+          <p title="教师基于平台数据采集开展对应目标的学生评价。">教师基于平台数据采集开展对应目标的学生评价。</p>
 
+        </div>
 
+        <!-- </router-link> -->
 
+      </div>
 
+    </el-col>
 
+  </el-row>
 
+  <el-dialog v-model="dialogVisible" :before-close="handleClose" width=1200 >
 
+    <template #header>
 
+      <div class="dialog-header img_text_middle">
 
+        <!-- <img :src="WarningImg" alt=""> -->
 
+        <span class="warning_text">课程中心</span>
 
+      </div>
 
+    </template>
 
+    <CourseSelect :classDown="false"></CourseSelect>
 
+    <template #footer>
 
+      <div class="dialog-footer">
 
+        <!-- <el-button type="primary" @click="updateReduction()">
 
+          确认修改
 
+        </el-button> -->
 
+        <el-button @click="dialogVisible = false">取消</el-button>
 
+      </div>
 
+    </template>
 
+  </el-dialog>
 
+</template>
 
+<script setup>
 
+import { ref } from 'vue';
 
+import Img1 from '@/assets/icon/课程管理.png'
 
+import Img2 from '@/assets/icon/课程中心.png'
 
+import Img3 from '@/assets/icon/学生评价icon.png'
 
+import CourseSelect from './downloadCourse.vue';
 
+import { userInfoStore } from '@/stores/counter'
 
+
 
+const InfoStore = userInfoStore()
 
+const dialogVisible = ref(false)
 
+const courseDown = e => {
 
+  dialogVisible.value = true
 
+  e.stopPropagation();
 
+}
 
+const openApplication = (type) => {
 
+  top.U.MD.D.I.openApplication(type)
 
+}
 
+
 
+const openApplications = (type) => {
 
+  if (type) {
 
+    console.log(type, InfoStore.user)
 
+    window.open('https://cloud.cocorobo.cn//#/' + type)
 
+  }else{
 
+    window.open("https://knowledge.cocorobo.cn/zh-CN/story-telling/643a21ae-d2ef-11ef-9d05-12e77c4cb76b")
 
   }
 
-  </script>
 
-  <style lang="scss" scoped>
 
-  .el-row {
 
-    margin-bottom: 20px;
 
-  
-    .el-col {
 
+}
 
+</script>
 
+<style lang="scss" scoped>
 
+.el-row {
 
+  margin-bottom: 20px;
 
+
 
+  .el-col {
 
+    border-radius: 4px;
 
+
 
+    .grid-content {
 
       border-radius: 4px;
 
-  
-      .grid-content {
 
-        border-radius: 4px;
 
-        min-height: 36px;
 
-        background: #fff;
 
-        border-radius: 10px;
 
-        text-decoration: none;
 
-        display: block;
 
-        position: relative;
 
-        padding: 16px;
 
-  
-  
-        img {
 
-          width: 56px;
 
+      min-height: 36px;
 
+      background: #fff;
 
+      border-radius: 10px;
 
+      position: relative;
 
+      padding: 16px;
 
+      display: flex;
 
+      align-items: center;
 
+
 
+      img {
 
+        width: 56px;
 
+        height: fit-content;
 
+        margin-right: 5px;
 
+      }
 
+
 
+      .course_down {
 
+        // display: inline-block;
 
+        padding: 5px 8px;
 
+        position: absolute;
 
+        background-color: #efefef;
 
+        top: 5px;
 
+        right: 8px;
 
+        border-radius: 5px;
 
+        font-size: 12px;
 
+        color: #555;
 
+        cursor: pointer;
 
+        z-index: 10;
 
+      }
 
+
 
+      div {
 
+        // position: absolute;
 
+        // left: 80px;
 
+        // top: 16px;
 
+        width: calc(100% - 56px);
 
+        cursor: pointer;
 
+
 
+
 
+        .title {
 
+          display: -webkit-box;
 
+          -webkit-line-clamp: 1;
 
+          width: 100%;
 
+          color: rgba(0, 0, 0, 0.9);
 
+          font-size: 14px;
 
+          margin-bottom: 10px;
 
+          font-weight: 400;
 
+          text-overflow: ellipsis;
 
+          overflow: hidden;
 
+          word-break: break-all;
 
         }
 
-  
-        div {
 
-          position: absolute;
 
-          left: 80px;
 
-          top: 16px;
 
-          cursor: pointer;
 
-          span {
 
-            color: rgba(0, 0, 0, 0.9);
 
-            font-size: 14px;
 
-            margin-bottom: 10px;
 
-            font-weight: 400;
 
-          }
 
-  
-          p {
 
-            color: rgba(0, 0, 0, 0.4);
 
-            font-size: 12px;
 
-            padding-right: 20px;
 
-          }
 
+
 
+        p {
 
+          color: rgba(0, 0, 0, 0.4);
 
+          font-size: 12px;
 
+          overflow: hidden;
 
+          text-overflow: ellipsis;
 
+          -webkit-line-clamp: 2;
 
+          display: -webkit-box;
 
+          -webkit-box-orient: vertical;
 
         }
 
       }
 
     }
 
-  
-  
-  }
 
-  
-  .el-row:last-child {
 
-    margin-bottom: 0;
 
   }
 
-  </style>
 
+
 
+
 
+}
 
+
 
+.el-row:last-child {
 
+  margin-bottom: 0;
 
+}
 
+</style>

+ 70 - 62
src/components/main/other.vue
View File 

@@ -1,95 +1,90 @@
 
 <template>
 
-  <h2 class="contentTitle">其他课程资源</h2>
 
+  <h2 class="contentTitle">AI大模型应用</h2>
 
   <el-row :gutter="20">
 
-    <el-col :span="6" v-if="Identity != 1">
 
-      <div class="grid-content" @click="openApplication('project')">
 
-        <!-- <router-link to="/iframe/其他课程资源/课程管理"> -->
 
+    <span class="more" @click="openCocoFlow()">查看更多</span>
 
+    <el-col :span="6">
 
+      <div class="grid-content"
 
+        @click="openApplication('https://knowledge.cocorobo.cn/zh-CN/story-telling/a7fa08b8-cf60-11ef-93e3-12e77c4cb76b')">
 
+        <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
 
         <img :src="Img1" alt="">
 
         <div>
 
-          <span>创建课程</span>
 
-          <p>教师自定义创建个人人工智能课程教学资源。</p>
 
+          <p class="title" title="创意智造">创意智造</p>
 
+          <p title="以设计思维为核心深度启发学生创意，辅助学生从无到有完成科创作品。">以设计思维为核心深度启发学生创意，辅助学生从无到有完成科创作品。</p>
 
+        </div>
 
+        <!-- </router-link> -->
 
+      </div>
 
+    </el-col>
 
+    <el-col :span="6">
 
+      <div class="grid-content"
 
+        @click="openApplication('https://knowledge.cocorobo.cn/zh-CN/run-agent-flow/e31ade78-80ed-4219-ae8e-4d3bdf2ed4f1')">
 
+        <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
 
+        <img :src="Img3" alt="">
 
+        <div>
 
+          <p class="title" title="PBL课程设计助手">PBL课程设计助手</p>
 
+          <p title="支持教师从无到有进行项目式学习课程设计及课时设计。">支持教师从无到有进行项目式学习课程设计及课时设计。</p>
 
         </div>
 
         <!-- </router-link> -->
 
-
 
       </div>
 
     </el-col>
 
     <el-col :span="6">
 
-      <div class="grid-content" @click="openApplication('study')">
 
+      <div class="grid-content"
 
+        @click="openApplication('https://knowledge.cocorobo.cn/zh-CN/run-agent-flow/6a6cc71c-634c-46dd-a7dc-8960203f9aa0')">
 
         <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
 
         <img :src="Img2" alt="">
 
-        <span class="course_down" @click="courseDown($event)">课件下载</span>
 
         <div>
 
-          <span>拓展课程</span>
 
-          <p>教师使用预置或自定义补充资源开展授课。</p>
 
+          <p class="title" title="5EX模型学习活动设计助手">5EX模型学习活动设计助手</p>
 
+          <p title="以5EX教学模型为依据，进行系统化的STEM教学设计。">以5EX教学模型为依据，进行系统化的STEM教学设计。</p>
 
         </div>
 
         <!-- </router-link> -->
 
       </div>
 
     </el-col>
 
     <el-col :span="6">
 
-      <div class="grid-content" @click="openApplication()">
 
+      <div class="grid-content"
 
+        @click="openApplication('https://knowledge.cocorobo.cn/zh-CN/run-agent-flow/a50ddd41-bab8-44b7-8354-34d4d47250bd')">
 
         <!-- <router-link to="/iframe/其他课程资源/课程中心"> -->
 
-        <img :src="Img3" alt="">
 
+        <img :src="img4" alt="">
 
         <div>
 
-          <span>AI大模型应用</span>
 
-          <p>多个基于大模型打造的AI应用，助力人工智能教育。</p>
 
+          <p class="title" title="C-POTE 跨学科主题学习设计">C-POTE 跨学科主题学习设计</p>
 
+          <p title="以C-POTE课程设计模型为依据，进行系统化的跨学科课程设计。">以C-POTE课程设计模型为依据，进行系统化的跨学科课程设计。</p>
 
         </div>
 
         <!-- </router-link> -->
 
       </div>
 
     </el-col>
 
   </el-row>
 
 
-  <el-dialog v-model="dialogVisible" :before-close="handleClose" width=1200>
 
-    <template #header>
 
-      <div class="dialog-header img_text_middle">
 
-        <!-- <img :src="WarningImg" alt=""> -->
 
-        <span class="warning_text">课程中心</span>
 
-      </div>
 
-    </template>
 
-    <CourseSelect :classDown="false"></CourseSelect>
 
-    <template #footer>
 
-      <div class="dialog-footer">
 
-        <!-- <el-button type="primary" @click="updateReduction()">
 
-          确认修改
 
-        </el-button> -->
 
-        <el-button @click="dialogVisible = false">取消</el-button>
 
-      </div>
 
-    </template>
 
-  </el-dialog>
 
 </template>
 
 <script setup>
 
 import { ref, onMounted } from 'vue';
 
-import Img1 from '@/assets/icon/课程管理.png'
 
-import Img2 from '@/assets/icon/课程中心.png'
 
-import Img3 from '@/assets/icon/AI.png'
 
-import CourseSelect from './downloadCourse.vue';
 
+import Img1 from '@/assets/icon/创意智造.png'
 
+import Img2 from '@/assets/icon/5EX.png'
 
+import Img3 from '@/assets/icon/PBL.png'
 
+import img4 from '@/assets/icon/POTE.png'
 
 import { userInfoStore } from '@/stores/counter'
 
 
 const InfoStore = userInfoStore()
 
-const dialogVisible = ref(false)
 
 
 const openApplication = (type) => {
 
-  if (type) {
 
-    console.log(type, InfoStore.user)
 
-    // if (type == "study") {
 
-    //   if (InfoStore.user.type == 2) {
 
-    //     top.U.MD.D.I.openApplication('studentStudy')
 
-    //   } else {
 
-    //     top.U.MD.D.I.openApplication('study')
 
-    //   }
 
-    // } else {
 
-    //   top.U.MD.D.I.openApplication(type)
 
-    // }
 
-    window.open('https://cloud.cocorobo.cn//#/' + type)
 
-  }else{
 
-    window.open("https://knowledge.cocorobo.cn/zh-CN/story-telling/643a21ae-d2ef-11ef-9d05-12e77c4cb76b")
 
-  }
 
+  window.open(type, '_blank')
 
 }
 
-const courseDown = e => {
 
-  dialogVisible.value = true
 
-  e.stopPropagation();
 
+
 
+const openCocoFlow = () => {
 
+  top.U.MD.D.I.openApplication('appStore')
 
 }
 
 </script>
 
 <style lang="scss" scoped>
 
+.more {
 
+  padding: 5px 8px;
 
+  position: absolute;
 
+  background-color: #E7E7E7;
 
+  top: -40px;
 
+  right: 8px;
 
+  border-radius: 8px;
 
+  font-size: 12px;
 
+  color: #000000B8;
 
+  cursor: pointer;
 
+  z-index: 10;
 
+}
 
+
 
 .el-row {
 
   margin-bottom: 20px;
 
 
@@ -101,14 +96,15 @@ const courseDown = e => {
 
       min-height: 36px;
 
       background: #fff;
 
       border-radius: 10px;
 
-      text-decoration: none;
 
-      display: block;
 
       position: relative;
 
       padding: 16px;
 
-
 
+      display: flex;
 
+      align-items: center;
 
 
       img {
 
         width: 56px;
 
+        height: fit-content;
 
+        margin-right: 5px;
 
       }
 
 
       .course_down {
 
@@ -126,23 +122,35 @@ const courseDown = e => {
 
       }
 
 
       div {
 
-        position: absolute;
 
-        left: 80px;
 
-        top: 16px;
 
+        // position: absolute;
 
+        // left: 80px;
 
+        // top: 16px;
 
+        width: calc(100% - 56px);
 
         cursor: pointer;
 
 
 
-        span {
 
+        .title {
 
+          display: -webkit-box;
 
+          -webkit-line-clamp: 1;
 
+          width: 100%;
 
           color: rgba(0, 0, 0, 0.9);
 
           font-size: 14px;
 
           margin-bottom: 10px;
 
           font-weight: 400;
 
+          text-overflow: ellipsis;
 
+          overflow: hidden;
 
+          word-break: break-all;
 
         }
 
 
         p {
 
           color: rgba(0, 0, 0, 0.4);
 
           font-size: 12px;
 
           padding-right: 20px;
 
+          overflow: hidden;
 
+          text-overflow: ellipsis;
 
+          -webkit-line-clamp: 2;
 
+          display: -webkit-box;
 
+          -webkit-box-orient: vertical;
 
         }
 
       }
 
     }

+ 67 - 40
src/components/main/resource.vue
View File 

@@ -2,49 +2,48 @@
 
   <h2 class="contentTitle">资源中心</h2>
 
   <el-row :gutter="20">
 
     <el-col :span="6">
 
-      <div class="grid-content">
 
-        <router-link to="/iframe/资源中心/情绪识别">
 
+      <router-link to="/iframe/资源中心/情绪识别">
 
+        <div class="grid-content">
 
           <img :src="emotionImg" alt="">
 
           <div>
 
-            <span>情绪识别</span>
 
-            <p>以人脸面部检测为基础，对面部情绪进行识别与分类。</p>
 
+            <p class="title">情绪识别</p>
 
+            <p title="以人脸面部检测为基础，对面部情绪进行识别与分类。">以人脸面部检测为基础，对面部情绪进行识别与分类。</p>
 
           </div>
 
-        </router-link>
 
-
 
-      </div>
 
+        </div>
 
+      </router-link>
 
     </el-col>
 
     <el-col :span="6">
 
-      <div class="grid-content">
 
-        <router-link to="/iframe/资源中心/物体识别">
 
+      <router-link to="/iframe/资源中心/物体识别">
 
+        <div class="grid-content">
 
           <img :src="objectImg" alt="">
 
           <div>
 
-            <span>物体识别</span>
 
-            <p>以预置物体识别模型为基础，实现图片或视频中的物体识别。</p>
 
+            <p class="title">物体识别</p>
 
+            <p title="以预置物体识别模型为基础，实现图片或视频中的物体识别。">以预置物体识别模型为基础，实现图片或视频中的物体识别。</p>
 
           </div>
 
-        </router-link>
 
-      </div>
 
+        </div>
 
+      </router-link>
 
     </el-col>
 
     <el-col :span="6">
 
-      <div class="grid-content">
 
-        <router-link to="/iframe/资源中心/语音识别">
 
+      <router-link to="/iframe/资源中心/语音识别">
 
+        <div class="grid-content">
 
           <img :src="speechImg" alt="">
 
           <div>
 
-            <span>语音识别</span>
 
-            <p>实现普通话、英语、粤语三种录制语言的自动语音识别。</p>
 
+            <p class="title">语音识别</p>
 
+            <p title="实现普通话、英语、粤语三种录制语言的自动语音识别。">实现普通话、英语、粤语三种录制语言的自动语音识别。</p>
 
           </div>
 
-        </router-link>
 
-      </div>
 
+        </div>
 
+      </router-link>
 
     </el-col>
 
     <el-col :span="6">
 
-      <div class="grid-content">
 
-        <a href="//aihub.cocorobo.cn/" target="_blank">
 
+      <a href="//aihub.cocorobo.cn/" target="_blank">
 
+        <div class="grid-content">
 
           <img :src="aihub" alt="">
 
           <div>
 
-            <span>AI原理体验</span>
 
-            <p>提供原理、视觉、语音、文本、艺术多个领域的AI创新体验。</p>
 
+            <p class="title">AI原理体验</p>
 
+            <p title="提供原理、视觉、语音、文本、艺术多个领域的AI创新体验.">提供原理、视觉、语音、文本、艺术多个领域的AI创新体验。</p>
 
           </div>
 
-        </a>
 
-      </div>
 
+        </div>
 
+      </a>
 
     </el-col>
 
   </el-row>
 
 </template>
 
@@ -62,42 +61,70 @@ import aihub from '@/assets/img/aihub.png'
 
   .el-col {
 
     border-radius: 4px;
 
 
-    .grid-content {
 
-      border-radius: 4px;
 
-      min-height: 36px;
 
-      background: #fff;
 
-      border-radius: 10px;
 
-
 
-      a {
 
-        text-decoration: none;
 
-        display: block;
 
+    a {
 
+      text-decoration: none;
 
+      .grid-content {
 
+        border-radius: 4px;
 
+        min-height: 36px;
 
+        background: #fff;
 
+        border-radius: 10px;
 
         position: relative;
 
         padding: 16px;
 
+        display: flex;
 
+        align-items: center;
 
 
         img {
 
           width: 56px;
 
+          height: fit-content;
 
+          margin-right: 5px;
 
         }
 
 
-        div {
 
+        .course_down {
 
+          // display: inline-block;
 
+          padding: 5px 8px;
 
           position: absolute;
 
-          left: 80px;
 
-          top: 16px;
 
+          background-color: #efefef;
 
+          top: 5px;
 
+          right: 8px;
 
+          border-radius: 5px;
 
+          font-size: 12px;
 
+          color: #555;
 
+          cursor: pointer;
 
+          z-index: 10;
 
+        }
 
 
-          span {
 
+        div {
 
+          // position: absolute;
 
+          // left: 80px;
 
+          // top: 16px;
 
+          width: calc(100% - 56px);
 
+          cursor: pointer;
 
+
 
+
 
+          .title {
 
+            display: -webkit-box;
 
+            -webkit-line-clamp: 1;
 
+            width: 100%;
 
             color: rgba(0, 0, 0, 0.9);
 
             font-size: 14px;
 
             margin-bottom: 10px;
 
             font-weight: 400;
 
+            text-overflow: ellipsis;
 
+            overflow: hidden;
 
+            word-break: break-all;
 
           }
 
 
           p {
 
             color: rgba(0, 0, 0, 0.4);
 
             font-size: 12px;
 
             padding-right: 20px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            -webkit-line-clamp: 2;
 
+            display: -webkit-box;
 
+            -webkit-box-orient: vertical;
 
           }
 
         }
 
-
 
-
 
       }
 
     }
 
   }

+ 1 - 1
src/views/iframeRoute.vue
View File 

@@ -64,7 +64,7 @@ onMounted(()=>{
 
 .el-page-header {
 
     padding: 20px 10%;
 
     background: #F0F2F5;
 
-    min-height: calc(100% - 60px);
 
+    min-height: calc(100vh - 60px);
 
 
     .el-page-header__header {
 
         display: none;

+ 140 - 12
src/views/main.vue
View File 

@@ -1,19 +1,56 @@
 
 <template>
 
   <div style="height:100%">
 
     <Header></Header>
 
-    <div class="main">
 
-      <!-- <BannerVue></BannerVue> -->
 
-      <CourseSelect></CourseSelect>
 
-      <resource></resource>
 
-      <Practice></Practice>
 
-      <other v-if="isupdateCourse"></other>
 
-      <Edu v-if="isLogin"></Edu>
 
-      <Feedback></Feedback>
 
+    <div class="container">
 
+      <div class="container-left">
 
+        <div :class="activeIndex == 0 ? 'container-left-top active' : 'container-left-top'" @click="activeIndex = 0">
 
+          <img class="icon-img" :src="activeIndex == 0 ? img1 : img11" alt="教学中心" />教学中心
 
+        </div>
 
+        <div class="container-left-top">
 
+          <span>
 
+            <img class="icon-img" :src="img2" alt="AI 应用" />AI 应用
 
+            <transition name="fade">
 
+              <img v-if="dialogVisible" class="up" :src="img3" alt="up" @click="dialogVisible = fa" />
 
+              <img v-else class="up" :src="down" alt="down" @click="dialogVisible = true" />
 
+            </transition>
 
+          </span>
 
+        </div>
 
+        <transition name="fade">
 
+          <div v-if="dialogVisible">
 
+            <div :class="activeIndex == 1 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(1)">
 
+              应用中心
 
+            </div>
 
+            <!-- <div :class="activeIndex == 2 ? 'container-left-top active' : 'container-left-top'" @click="activeIndex = 2">
 
+            创建应用
 
+          </div> -->
 
+            <div :class="activeIndex == 3 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(3)">
 
+              AI
 
+              应用精选</div>
 
+          </div>
 
+        </transition>
 
+      </div>
 
+      <div class="main" v-if="activeIndex == 0">
 
+        <!-- <BannerVue></BannerVue> -->
 
+        <CourseSelect></CourseSelect>
 
+        <resource></resource>
 
+        <Practice></Practice>
 
+        <!-- <other v-if="!isupdateCourse"></other> -->
 
+        <Edu v-if="isLogin"></Edu>
 
+        <Feedback></Feedback>
 
+      </div>
 
+      <div class="iframe" v-else-if="activeIndex == 3" v-loading="loading">
 
+        <iframe ref="iframeRef" src="https://beta.app.cocorobo.cn/#/appSelection" frameborder="0"></iframe>
 
+      </div>
 
     </div>
 
   </div>
 
 </template>
 
 <script setup>
 
 import { ref, watchEffect } from 'vue';
 
+import img1 from '@/assets/icon/1.png'
 
+import img11 from '@/assets/icon/1-1.png'
 
+import img2 from '@/assets/icon/2.png'
 
+import img3 from '@/assets/icon/up.png'
 
+import down from '@/assets/icon/down.png'
 
 import BannerVue from '@/components/main/banner.vue'
 
 import CourseSelect from '@/components/main/courseSelect.vue'
 
 import resource from '@/components/main/resource.vue';
 
@@ -22,12 +59,16 @@ import other from '@/components/main/other.vue';
 
 import Edu from '@/components/main/edu.vue';
 
 import Feedback from '@/components/main/feedback.vue';
 
 import Header from './header.vue'
 
-import { userCurrentRole,userInfoStore } from '../stores/counter'
 
+import { userCurrentRole, userInfoStore } from '../stores/counter'
 
 
 const user = userInfoStore()
 
 const CurrentRole = userCurrentRole()
 
 const isupdateCourse = ref(false)
 
 const isLogin = ref(false)
 
+const activeIndex = ref(0)
 
+const dialogVisible = ref(true)
 
+const iframeRef = ref(null)
 
+const loading = ref(false)
 
 
 watchEffect(() => {
 
   // console.log('111111111111',CurrentRole, user.user)
 
@@ -38,11 +79,98 @@ watchEffect(() => {
 
     }
 
   }
 
 })
 
+
 
+const clickSwitch = (index) => {
 
+  activeIndex.value = index
 
+  if (index == 1) {
 
+    top.U.MD.D.I.openApplication('appStore')
 
+  } else if (index == 3) {
 
+    loading.value = true
 
+    setTimeout(() => {
 
+      iframeRef.value.onload = () => {
 
+        loading.value = false
 
+        console.log('iframe loaded')
 
+      }
 
+    }, 10)
 
+  }
 
+}
 
 </script>
 
 <style lang="scss" scoped>
 
-.main {
 
+.container {
 
+  display: flex;
 
+  overflow: hidden;
 
+  align-items: center;
 
+
 
+  .container-left {
 
+    height: calc(100vh - 60px);
 
+    width: 200px;
 
+    background: #fff;
 
+    overflow: hidden;
 
+    margin-top: 15px;
 
+
 
+    .container-left-top {
 
+      margin: 0 10px 0 10px;
 
+      font-size: 14px;
 
+      color: #111;
 
+      font-weight: 500;
 
+      padding: 10px 0 10px 40px;
 
+      position: relative;
 
+      cursor: pointer;
 
+
 
+      .icon-img {
 
+        position: absolute;
 
+        top: 10px;
 
+        left: 15px;
 
+      }
 
+
 
+      .up {
 
+        position: absolute;
 
+        top: 15px;
 
+        left: 110px;
 
+      }
 
+
 
+      div {
 
+        background-color: #fff;
 
+        padding: 5px 0;
 
+        color: #00000099;
 
+      }
 
+
 
+    }
 
+  }
 
+
 
+  .main {
 
+    background: #F0F2F5;
 
+    padding: 20px 10%;
 
+    width: calc(100% - 200px);
 
+    height: calc(100vh - 60px);
 
+    overflow: auto;
 
+  }
 
+
 
+  .iframe {
 
+    width: calc(100% - 150px);
 
+    height: calc(100vh - 60px);
 
+
 
+    iframe {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+  }
 
+}
 
+
 
+.active {
 
   background: #F0F2F5;
 
-  padding: 20px 10%;
 
-  min-height: calc(100% - 60px);
 
+  color: #0061FF !important;
 
+  border-radius: 5px;
 
+}
 
+
 
+/* 渐入渐出动画 */
 
+.fade-enter-active,
 
+.fade-leave-active {
 
+  transition: opacity 0.5s;
 
+}
 
+
 
+.fade-enter-from,
 
+.fade-leave-to {
 
+  opacity: 0;
 
 }
 
 </style>

Some files were not shown because too many files changed in this diff