src/api/user/resource.js

@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-//获取ppt资源列表
-export const getpptResourceListService = (params) =>
-  request.get('http://localhost:8080/courses/getall', { params })
-export function DelpptResourceListService(ids) {
-  return request.delete(
-    `http://localhost:8080/learningrecords/delete?ids=${ids}`,
-  )
-}

src/config/index.js

@@ -1,10 +0,0 @@
-import OSS from 'ali-oss'
-
-export const client = new OSS({
-  bucket: 'wenyu132', //bucket名称
-  region: 'oss-cn-beijing', //区域
-  endpoint: 'oss-cn-beijing.aliyuncs.com', //地域节点==>外网访问
-  accessKeyId: 'LTAI5tPe9x46aWZt8FScytst', //访问键id
-  accessKeySecret: '0mfxSLzmRgtHMXpD5pCBTl9RfwbmDG', //访问密钥
-  secure: true, //http就是false,https就是true
-})

src/utils/oss.js

@@ -1,23 +0,0 @@
-import { client } from '@/config/index.js'
-import { nanoid } from 'nanoid' //随机函数
-const tool = {
-  oss: {
-    async upload(file) {
-      // 文件名
-      const uuid = nanoid()
-      // 文件后缀名
-      const index = file.name.lastIndexOf('.')
-      const suffix = file.name.substring(index + 1)
-      //完整路径
-      let fileName = 'wenyu/' + uuid + '.' + suffix
-
-      return await client.multipartUpload(fileName, file, {
-        progress: function (p) {
-          console.log('进度', p)
-        },
-      })
-    },
-  },
-}
-
-export default tool

src/views/MyCourseStudy/learningProcess.vue

@@ -1,11 +1,10 @@
 <script setup>
 // import router from '@/router'
 import { ref } from 'vue'
-//getRecordListService,
-import { DelRecordService } from '@/api/user/record.js'
+import { getRecordListService, DelRecordService } from '@/api/user/record.js'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
-import { LearningRecordsControllerService } from '../../../generated/services/LearningRecordsControllerService'
+
 const total = ref(0)
 const recordList = ref([])
 const selectedIds = ref([])
@@ -19,13 +18,8 @@ const params = ref({
 
 //获取浏览记录列表
 const getrecordList = async () => {
-  console.log(1111111)
   loading.value = true
-
-  // const res = await getRecordListService(params.value)
-  const res = await LearningRecordsControllerService.getAllUsingGet3(
-    params.value,
-  )
+  const res = await getRecordListService(params.value)
   recordList.value = res.data.records
   console.log(res)
   //获取总的浏览记录
@@ -60,13 +54,6 @@ const onDeleteRecord = async (ids) => {
   ElMessage({ type: 'success', message: '删除成功' })
   getrecordList()
 }
-//多选框的显示隐藏
-const toggleCheckbox = () => {
-  showCheckbox.value = !showCheckbox.value
-  if (showCheckbox.value) {
-    showCheckbox.value = []
-  }
-}
 //批量删除
 //点击复选框时的 change 事件来调用 toggleSelection 方法，
 //以切换复选框的选中状态，并将对应的 id 添加到 selectedIds 数组中或从中移除。
@@ -116,7 +103,6 @@ const goToAnotherPage = (address) => {
   //console.log(address)
   router.push(address)
 }
-//
 </script>
 
 <template>

src/views/courseResources/componse/resourceAdd.vue

@@ -1,5 +0,0 @@
-<script setup></script>
-<template>
-  <div></div>
-</template>
-<style scoped></style>

src/views/courseResources/courseInfo.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="ch">
+    <video
+      src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4"
+      width="240px"
+      controls
+    >
+      法学
+    </video>
+    <div class="ch1">
+      <p>开课时间：2018年11月14日~2023年11月14日</p>
+      <p>课程类型：公共开放课程</p>
+      <p>学习人数：120人</p>
+    </div>
+  </div>
+  <div class="ma"></div>
+  <div class="en"></div>
+  <div class="ph"></div>
+  <div class="or"></div>
+  <div class="warpper"></div>
+  <div class="vo">
+    请选择院系专业:
+    <button>
+      <select>
+        <option>国际教育学院</option>
+        <option>能源工程学院</option>
+        <option>体育学院</option>
+        <option>马克思主义学院</option>
+        <option>智能制造学院</option>
+        <option>商务英语学院</option>
+      </select>
+    </button>
+    <button>
+      <select>
+        <option>01班</option>
+        <option>02班</option>
+        <option>03班</option>
+        <option>04班</option>
+        <option>05班</option>
+      </select>
+    </button>
+    <br />
+    请选择年级:
+    <button>
+      <select>
+        <option>大一</option>
+        <option>大二</option>
+        <option>大三</option>
+        <option>大四</option>
+      </select>
+    </button>
+    <br />
+    上传学科文件：
+    <input type="file" />
+    <form>
+      <button type="submit">提交</button>
+      <button type="reset">重置</button>
+      <br />
+      <div style="width: 100%; display: flex; justify-content: space-between">
+        <button>上一页</button>
+        <button>下一页</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {} from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.ch {
+  height: 300px;
+  width: 240px;
+  float: left;
+  line-height: 1.5;
+  margin-right: 5px;
+  background-color: rgba(183, 126, 164, 0.17);
+  box-sizing: border-box;
+}
+.ma {
+  height: 300px;
+  width: 240px;
+  float: left;
+  line-height: 1.5;
+  margin-right: 5px;
+  background-color: rgba(183, 126, 164, 0.17);
+  box-sizing: border-box;
+}
+.en {
+  height: 300px;
+  width: 240px;
+  float: left;
+  line-height: 1.5;
+  margin-right: 5px;
+  background-color: rgba(183, 126, 164, 0.17);
+  box-sizing: border-box;
+}
+.ph {
+  height: 300px;
+  width: 240px;
+  float: left;
+  line-height: 1.5;
+  margin-right: 5px;
+  background-color: rgba(183, 126, 164, 0.17);
+  box-sizing: border-box;
+}
+.warpper {
+  width: 1222px;
+  height: 300px;
+  float: left;
+  background-color: rgb(202, 194, 236);
+  box-sizing: border-box;
+}
+.or {
+  height: 300px;
+  width: 240px;
+  float: left;
+  line-height: 1.5;
+  margin-right: 5px;
+  background-color: rgba(183, 126, 164, 0.17);
+  box-sizing: border-box;
+}
+.vo {
+  width: 1222px;
+  height: 130px;
+  background-color: rgb(250, 225, 243);
+  border: solid 1px rgb(220, 214, 214);
+  float: left;
+}
+.ch.ch1 {
+}
+</style>

src/views/courseResources/index.vue

@@ -1,328 +1,569 @@
-<script setup>
-//导入图片
-import ppt from '@/assets/icons/ppt (1).png'
-import image from '@/assets/icons/图片 (2).png'
-import video from '@/assets/icons/视频 .png'
-import pdf from '@/assets/icons/pdf (1).png'
-import test from '@/assets/icons/文件.png'
-import audio from '@/assets/icons/音频1.png'
-
-import { ref } from 'vue'
-//默认抽屉隐藏
-const visibleDramwer = ref(false)
-//定义一个selectedOption属性，用于存储当前选中的值
-const selectedOption = ref('')
-
-import { getpptResourceListService } from '@/api/user/resource.js'
-import { DelpptResourceListService } from '@/api/user/resource.js'
-const total = ref(0)
-const pptresourceList = ref([])
-const loading = ref(false)
-const params = ref({
-  pagesize: '15',
-  pagenum: '1',
-  type: '1', //设置默认显示ppt类型
-})
-
-//获取资源列表
-const getpptresourceList = async () => {
-  loading.value = true
-  const res = await getpptResourceListService(params.value)
-  pptresourceList.value = res.data.records
-  console.log(res)
-  //获取资源列表
-  total.value = res.data.total
-  loading.value = false
-}
-getpptresourceList()
-//点击切换type的值渲染不同类型的资源
-const changeType = (newtype) => {
-  params.value.type = newtype
-  //console.log(params.value.type)
-  getpptresourceList()
-}
-
-//分页逻辑
-const onSizeChange = (size) => {
-  console.log('当前每页条数', size)
-  //只要是每页条数变化了，那么原来正在访问的当前页面就没有意义了，数据已经不在原来的页面
-  //重新从第一页渲染
-  params.value.pagenum = 1
-  params.value.pagesize = size
-  //基于最新的当前页和每页条数渲染数据
-  getpptresourceList()
-}
-const onCurrentChange = (page) => {
-  pptresourceList.value.pagenum = page
-  getpptresourceList()
-}
-
-//删除资源 -通过ID进行删除
-const onDeleteResource = async (ids) => {
-  await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', {
-    type: 'warning',
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
-  })
-  await DelpptResourceListService(ids)
-  // console.log(ids)
-  ElMessage({ type: 'success', message: '删除成功' })
-  getpptresourceList()
-}
-//上传文件
-import tool from '@/utils/oss.js'
-const FileList = ref([])
-const upload = async (option) => {
-  const res = await tool.oss.upload(option.file)
-  console.log(22, res)
-  console.log(res.name)
-  const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name
-  console.log(url)
-}
-</script>
 <template>
   <div>
     <div class="top">
-      <el-button @click="visibleDramwer = true">添加资源</el-button>
-      <el-drawer v-model="visibleDramwer">
-        <!-- 添加资源表单 -->
-        <el-form>
-          <el-form-item label="资源名称">
-            <el-input placeholder="请输入资源名称"></el-input>
-          </el-form-item>
-          <el-form-item label="资源类型">
-            <el-select v-model="selectedOption" placeholder="资源类型">
-              <el-option
-                class="vertical-option"
-                label="选项1"
-                value="1"
-              ></el-option>
-              <el-option
-                class="vertical-option"
-                label="选项2"
-                value="2"
-              ></el-option>
-              <el-option
-                class="vertical-option"
-                label="选项3"
-                value="3"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="资源简介">
-            <el-input placeholder="请输入资源简介"></el-input>
-          </el-form-item>
-          <el-form-item label="上传资源">
-            <el-upload
-              v-model:file-list="FileList"
-              :http-request="upload"
-              class="upload-demo"
+      <div class="loop active-nav" @click="click($event, 2)">
+        <img
+          src="../../assets/icons/课程简介.svg"
+          alt=""
+          width="50px"
+          height="50px"
+        />
+        <p>简介</p>
+      </div>
+      <div class="loop" @click="click($event, 1)">
+        <img
+          src="../../assets/icons/ppt.svg"
+          alt=""
+          width="50px"
+          height="50px"
+        />
+        <p>ppt</p>
+      </div>
+      <div class="loop" @click="click($event, 0)">
+        <img
+          src="../../assets/icons/视频.svg"
+          alt=""
+          width="50px"
+          height="50px"
+        />
+        <p>视频</p>
+      </div>
+      <div class="loop" @click="click($event, 3)">
+        <img
+          src="../../assets/icons/文本.svg"
+          alt=""
+          width="50px"
+          height="50px"
+        />
+        <p>文本</p>
+      </div>
+      <div class="loop" @click="click($event, 4)">
+        <img
+          src="../../assets/icons/音频.svg"
+          alt=""
+          width="50px"
+          height="50px"
+        />
+        <p>音频</p>
+      </div>
+    </div>
+    <div class="body" v-if="activeIndex == 0">
+      <ul>
+        <li v-for="(item, index) in videoList" :key="index">
+          <video :src="item.url" controls width="390px"></video>
+          <div class="text1">
+            软件工程的奥秘
+            <br />
+            构建无暇的应用程序关键技巧
+          </div>
+          <form action="">
+            <input
+              type="file"
               multiple
+              @change="uploadChange"
+              style="cursor: pointer"
+            />
+            <br />
+            <button
+              type="submit"
+              @click="submitUploadFile"
+              style="cursor: pointer"
             >
-              <el-button type="primary">点击上传</el-button>
-              <template #tip>
-                <div class="el-upload__tip">
-                  只能上传jpg/png文件,且不超过500kb
-                </div>
-              </template>
-            </el-upload>
-          </el-form-item>
-
-          <el-form-item class="bottom-box">
-            <el-button type="info" @click="onRemoval">取消</el-button>
-            <el-button type="primary">确定</el-button>
-          </el-form-item>
-        </el-form>
-      </el-drawer>
+              上传
+            </button>
+            <button>
+              <a
+                href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D"
+                download=""
+              >
+                下载
+              </a>
+            </button>
+            <button type="reset" style="cursor: pointer">重选</button>
+          </form>
+        </li>
+      </ul>
     </div>
-    <div class="body">
-      <div class="nav">
-        <el-row>
-          <el-col :span="4" @click="changeType('1')">
-            <div class="nav-info">
-              <div class="nav-info-pic">
-                <img :src="ppt" style="height: 50px" />
-              </div>
-              <div class="nav-info-name">ppt</div>
-            </div>
-          </el-col>
-          <el-col :span="4" @click="changeType('2')">
-            <div class="nav-info">
-              <div class="nav-info-pic">
-                <img :src="image" style="height: 50px" />
-              </div>
-              <div class="nav-info-name">图片</div>
-            </div>
-          </el-col>
-
-          <el-col :span="4" @click="showComponent('3')">
-            <div class="nav-info">
-              <div class="nav-info-pic">
-                <img style="height: 50px" :src="video" />
-              </div>
-              <div class="nav-info-name">视频</div>
-            </div>
-          </el-col>
-          <el-col :span="4">
-            <div class="nav-info">
-              <div class="nav-info-pic" @click="showComponent('4')">
-                <img style="height: 50px" :src="pdf" />
-              </div>
-              <div class="nav-info-name">PDF</div>
-            </div>
-          </el-col>
-          <el-col :span="4" @click="showComponent('5')">
-            <div class="nav-info">
-              <div class="nav-info-pic">
-                <img style="height: 50px" :src="test" />
-              </div>
-              <div class="nav-info-name">文件</div>
-            </div>
-          </el-col>
-          <el-col :span="4" @click="showComponent('6')">
-            <div class="nav-info">
-              <div class="nav-info-pic">
-                <img style="height: 50px" :src="audio" />
-              </div>
-              <div class="nav-info-name">音频</div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
 
-      <div class="body">
-        <!-- ppt资源列表 -->
-        <div class="courseResourcesList">
-          <ul v-if="pptresourceList.length > 0">
-            <li
-              v-for="resource in pptresourceList"
-              :key="resource.id"
-              v-loading="loading"
+    <div class="body" v-if="activeIndex == 1">
+      <ul>
+        <li v-for="(item, index) in pptList" :key="index">
+          <img :src="item.url" title="ppt" height="200px" width="390px" />
+          <div class="text1">
+            软件工程的奥秘
+            <br />
+            构建无暇的应用程序关键技巧
+          </div>
+          <form action="">
+            <input type="file" multiple @change="uploadChange" />
+            <br />
+            <button
+              type="submit"
+              @click="submitUploadFile"
+              style="cursor: pointer"
             >
-              <div>
-                <div class="icon">
-                  <el-icon @click="onDeleteResource(ids)">
-                    <Delete />
-                  </el-icon>
-                  <el-icon>
-                    <Edit />
-                  </el-icon>
-                </div>
-                <div class="vedio">
-                  <img style="height: 200px" :src="resource.img" />
-                </div>
-                <div class="resource-info">
-                  <div class="zy-name">{{ resource.name }}</div>
-                  <div class="zy-info">{{ resource.description }}</div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination
-            v-model:current-page="currentPage4"
-            v-model:page-size="pageSize4"
-            :page-sizes="[1, 2, 3, 4]"
-            :small="small"
-            :disabled="disabled"
-            :background="background"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @current-change="onCurrentChange"
-            @size-change="onSizeChange"
-            style="margin-top: 20px; justify-content: flex-end"
+              上传
+            </button>
+            <button>
+              <a
+                href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D"
+                download=""
+              >
+                下载
+              </a>
+            </button>
+            <button type="reset" style="cursor: pointer">重选</button>
+          </form>
+        </li>
+      </ul>
+    </div>
+    <div class="body" v-if="activeIndex == 2">
+      <ul>
+        <li>
+          <img
+            src="../../assets/images/软件1.png"
+            title="软件工程的奥秘"
+            width="390px"
+            height="200px"
           />
-        </div>
-      </div>
+          <div class="text1">
+            软件工程的奥秘
+            <br />
+            构建无暇的应用程序关键技巧
+          </div>
+          <div class="text2">
+            课程类型:公共任选课
+            <br />
+            授课老师:王易系
+            <br />
+            报名人数:130人
+          </div>
+        </li>
+        <li>
+          <img
+            src="../../assets/images/软件2.png"
+            title="顶级工程师"
+            width="390px"
+            height="200px"
+          />
+          <div class="text1">
+            如何成为顶级工程师
+            <br />
+            成功之路解析
+          </div>
+          <div class="text2">
+            课程类型:公共任选课
+            <br />
+            授课老师:刘苏杭
+            <br />
+            报名人数:126人
+          </div>
+        </li>
+        <li>
+          <img
+            src="../../assets/images/软件3.png"
+            title="软件黑科技"
+            width="390px"
+            height="200px"
+          />
+          <div class="text1">
+            软件工程的黑科技
+            <br />
+            提高开发效率的秘密技巧大揭秘
+          </div>
+          <div class="text2">
+            课程类型:公共任选课
+            <br />
+            授课老师:安书名
+            <br />
+            报名人数:117人
+          </div>
+        </li>
+        <li>
+          <img
+            src="../../assets/images/软件4.png"
+            title="未来趋势"
+            width="390px"
+            height="200px"
+          />
+          <div class="text1">
+            软件工程界的未来趋势
+            <br />
+            AI、大数据和区块的巨大影响
+          </div>
+          <div class="text2">
+            课程类型:公共任选课
+            <br />
+            授课老师:萨基姆
+            <br />
+            报名人数:140人
+          </div>
+        </li>
+        <li>
+          <img
+            src="../../assets/images/软件5.png"
+            title="避免陷阱"
+            width="390px"
+            height="200px"
+          />
+          <div class="text1">
+            软件工程中常见的陷阱级如何避免
+            <br />
+            优化你的开发过程
+          </div>
+          <div class="text2">
+            课程类型:公共任选课
+            <br />
+            授课老师:何舒心
+            <br />
+            报名人数:125人
+          </div>
+        </li>
+        <li>
+          <img
+            src="../../assets/images/软件6.png"
+            title="必备工具"
+            width="390px"
+            height="200px"
+          />
+          <div class="text1">
+            精通软件工程的必备工具
+            <br />
+            代码管理、测试和持续集成
+          </div>
+          <div class="text2">
+            课程类型:公共任选课
+            <br />
+            授课老师:朱佳娜
+            <br />
+            报名人数:121人
+          </div>
+        </li>
+        <li>
+          <img
+            src="../../assets/images/软件7.png"
+            title="面试攻略"
+            width="390px"
+            height="200px"
+          />
+          <div class="text1">
+            软件工程师面试攻略
+            <br />
+            如何在技术中脱颖而出
+          </div>
+          <div class="text2">
+            课程类型:公共任选课
+            <br />
+            授课老师:胡树立
+            <br />
+            报名人数:117人
+          </div>
+        </li>
+        <li>
+          <img
+            src="../../assets/images/软件8.png"
+            alt="实战经验"
+            width="390px"
+            height="200px"
+          />
+          <div class="text1">
+            软件工程实战经验分析
+            <br />
+            高效团队合作的秘密武器
+          </div>
+          <div class="text2">
+            课程类型:公共任选课
+            <br />
+            授课老师:张海山
+            <br />
+            报名人数:125人
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="body" v-if="activeIndex == 3">
+      <ul>
+        <li v-for="(item, index) in textList" :key="index">
+          <img
+            src="../../assets/icons/文本1.png"
+            title="软件工程的奥秘"
+            width="390px"
+            height="200px"
+          />
+          <textarea name="" id="">点击输入文本内容:</textarea>
+          <form action="">
+            <input
+              type="file"
+              multiple
+              @change="uploadChange"
+              style="cursor: pointer"
+            />
+            <br />
+            <button
+              type="submit"
+              @click="submitUploadFile"
+              style="cursor: pointer"
+            >
+              上传
+            </button>
+            <button>
+              <a
+                href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D"
+                download=""
+              >
+                下载
+              </a>
+            </button>
+            <button type="reset" style="cursor: pointer">重选</button>
+          </form>
+        </li>
+      </ul>
+    </div>
+    <div class="body" v-if="activeIndex == 4">
+      <ul>
+        <li v-for="(item, index) in audioList" :key="index">
+          <img
+            src="../../assets/icons/音乐.png"
+            title="软件工程的奥秘"
+            width="390px"
+            height="180px"
+          />
+          <div class="text1">点击播放软件工程的奥秘</div>
+          <video
+            src="../../assets/images/1.mp3"
+            controls
+            height="50px"
+            width="300px"
+          ></video>
+          <!-- <audio src="../../assets/images/1.mp3" controls></audio> -->
+          <form action="">
+            <input
+              type="file"
+              multiple
+              @change="uploadChange"
+              style="cursor: pointer"
+            />
+            <br />
+            <button
+              type="submit"
+              @click="submitUploadFile"
+              style="cursor: pointer"
+            >
+              上传
+            </button>
+            <button>
+              <a
+                href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D"
+                download=""
+              >
+                下载
+              </a>
+            </button>
+            <button type="reset" style="cursor: pointer">重选</button>
+          </form>
+        </li>
+      </ul>
+    </div>
+    <div class="" @click="gotoinfo"></div>
+    <div class="buttom">
+      <el-pagination
+        background
+        layout="prev, pager, next,total"
+        :page-size="pageSize"
+        :total="total"
+        class="pagination"
+        :pager-count="11"
+        @current-change="currentChange"
+      />
     </div>
   </div>
 </template>
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { aaaApi } from '../../api/courseChaptersApi'
+// import {getVideoUrlApi} from 'src/api/assats'
+import { uploadFile } from '../../api/courseChaptersApi'
+const activeIndex = ref(0)
+const router = useRouter()
+const gotoinfo = () => {
+  console.log(router)
+  router.push('/courseResourcesManagement/courseInfo')
+}
+function click(e, index) {
+  document
+    .querySelectorAll('.loop')
+    .forEach((item) => item.classList.remove('active-nav'))
+  e.currentTarget.classList.add('active-nav')
+  activeIndex.value = index
+}
+//====================获取视频资源
 
-<style lang="scss" scoped>
-.el-row {
-  margin-bottom: 20px;
-  background-color: #fff;
-  height: 70px;
+const page = ref(1)
+const total = ref(50)
+const pageSize = ref(8)
+const videoList = ref([
+  { url: '1' },
+  { url: '2' },
+  { url: '3' },
+  { url: '4' },
+  { url: '5' },
+  { url: '6' },
+  { url: '7' },
+  { url: '8' },
+])
+const pptList = ref([
+  { url: '/src/assets/images/0.jpg' },
+  {
+    url: 'http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D',
+  },
+  { url: '3' },
+  { url: '4' },
+  { url: '5' },
+  { url: '6' },
+  { url: '7' },
+  { url: '8' },
+])
+const textList = ref([
+  { url: '1' },
+  { url: '2' },
+  { url: '3' },
+  { url: '4' },
+  { url: '5' },
+  { url: '6' },
+  { url: '7' },
+  { url: '8' },
+])
+const audioList = ref([
+  { url: '1' },
+  { url: '2' },
+  { url: '3' },
+  { url: '4' },
+  { url: '5' },
+  { url: '6' },
+  { url: '7' },
+  { url: '8' },
+])
+
+function changePage() {
+  //   aaaApi(`?page=${page.value}&pageSize=${pageSize.value}`).then(res=>{
+  //     // @ts-ignore
+  //     videoList.vlue =res.list
+  //   // @ts-ignore
+  //   total.value = res.total
+  // })
 }
 
-.el-col {
-  border-radius: 4px;
+function currentChange(number) {
+  console.log(number, 'num')
+  page.value = number
+  changePage()
 }
-.nav-info {
-  display: flex;
-  text-align: center;
-  flex-direction: column;
+const file = ref(null)
+const uploadChange = (e) => {
+  console.log(e.target.files[0])
+  file.value = e.target.files[0]
 }
-.body {
-  background-color: #fff;
-  height: 100%;
+const uploadFileEvent = () => {}
+const submitUploadFile = async () => {
+  const formData = new FormData()
+  formData.append('courseId', 1)
+  formData.append('file', file.value)
+  await uploadFile(formData)
 }
+//============
+</script>
+<style lang="scss">
 .top {
-  margin-bottom: 20px;
-}
-
-.nav-info-pic .img {
-  height: 50px;
-  width: 50px;
-}
-.bottom-box {
-  //display: flex
-  float: right;
-}
-ul {
-  list-style-type: none;
-  padding: 10;
+  width: 1620px;
+  height: 100px;
   display: flex;
-  flex-wrap: wrap;
-  /* justify-content: space-evenly; */
-  justify-content: start;
-}
-li {
-  transition: filter 0.3s; /* 添加过渡动画 */
-  flex: 0 0 20%;
+  justify-content: space-around;
+  border: 1px solid rgb(187, 181, 181);
+  background-color: rgb(255, 255, 255);
 
-  margin-bottom: 10px;
-  padding: 10px;
-  box-sizing: border-box;
+  li {
+    height: 99px !important;
+    border-bottom: 1px solid;
+  }
 
-  transition: box-shadow 0.3s;
-  cursor: pointer;
-}
-li:hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  & > * {
+    transition: 0.1s;
+    cursor: pointer;
+  }
+
+  .active-nav {
+    border-bottom: 5px solid blue !important;
+  }
 }
+
 .body {
+  width: 1620px;
+  height: 680px;
   display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-.courseResourcesList {
-  flex: 1;
+  background-color: rgb(237, 237, 238);
 }
-.pagination {
-  position: sticky;
-  bottom: 0;
-  margin: 0 auto;
+
+li {
+  list-style-type: none;
 }
-.icon {
+
+.body ul {
+  width: 100%;
   display: flex;
+  flex-wrap: wrap;
+  align-content: space-evenly;
   justify-content: space-between;
 }
-.resource-info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+
+.body li {
+  height: 320px;
+  width: 390px;
+  background-color: rgb(237, 237, 238);
+}
+
+.loop {
+  width: 100px;
+  height: 99px;
+  text-align: center;
+  padding: 20px;
+  border-bottom: 1px solid rgb(187, 181, 181);
+  background-color: rgb(253, 252, 252);
+}
+
+.body .text1 {
+  font-size: 25px;
+  line-height: 30px;
 }
-.zy-name:hover {
-  color: rgb(138, 201, 243); /* 鼠标经过时将字体颜色设置为蓝色 */
+
+.body .text2 {
+  font-size: 18px;
+  line-height: 20px;
+  color: rgb(186, 43, 11);
 }
-.zy-name {
-  margin-top: 10px;
-  font-size: 20px;
+.body a {
+  all: initial;
+  cursor: pointer;
 }
-.zy-info {
-  margin-top: 20px;
+.buttom {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // .pagination{
+  // width: ;
+  // $height:150px;
+  // height:  $height;
+  // button,li{
+  //   height:  $height !important;
+  // }
 }
 </style>
+
+<!-- 上传git
+  git add .
+  git commit -m '介绍'
+  git pull
+  git push
+  
+   -->