Compare commits

...

3 Commits

  1. 7390
      pnpm-lock.yaml
  2. 9
      src/api/user/resource.js
  3. BIN
      src/assets/icons/pdf (1).png
  4. BIN
      src/assets/icons/ppt (1).png
  5. BIN
      src/assets/icons/ppt (2).png
  6. BIN
      src/assets/icons/图片 (2).png
  7. BIN
      src/assets/icons/文件.png
  8. BIN
      src/assets/icons/视频 .png
  9. BIN
      src/assets/icons/音频1.png
  10. 10
      src/config/index.js
  11. 23
      src/utils/oss.js
  12. 20
      src/views/MyCourseStudy/learningProcess.vue
  13. 5
      src/views/courseResources/componse/resourceAdd.vue
  14. 133
      src/views/courseResources/courseInfo.vue
  15. 827
      src/views/courseResources/index.vue

File diff suppressed because it is too large Load Diff

@ -0,0 +1,9 @@
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}`,
)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

@ -0,0 +1,10 @@
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
})

@ -0,0 +1,23 @@
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

@ -1,10 +1,11 @@
<script setup> <script setup>
// import router from '@/router' // import router from '@/router'
import { ref } from 'vue' import { ref } from 'vue'
import { getRecordListService, DelRecordService } from '@/api/user/record.js' //getRecordListService,
import { DelRecordService } from '@/api/user/record.js'
import { ElMessageBox, ElMessage } from 'element-plus' import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { LearningRecordsControllerService } from '../../../generated/services/LearningRecordsControllerService'
const total = ref(0) const total = ref(0)
const recordList = ref([]) const recordList = ref([])
const selectedIds = ref([]) const selectedIds = ref([])
@ -18,8 +19,13 @@ const params = ref({
// //
const getrecordList = async () => { const getrecordList = async () => {
console.log(1111111)
loading.value = true loading.value = true
const res = await getRecordListService(params.value)
// const res = await getRecordListService(params.value)
const res = await LearningRecordsControllerService.getAllUsingGet3(
params.value,
)
recordList.value = res.data.records recordList.value = res.data.records
console.log(res) console.log(res)
// //
@ -54,6 +60,13 @@ const onDeleteRecord = async (ids) => {
ElMessage({ type: 'success', message: '删除成功' }) ElMessage({ type: 'success', message: '删除成功' })
getrecordList() getrecordList()
} }
//
const toggleCheckbox = () => {
showCheckbox.value = !showCheckbox.value
if (showCheckbox.value) {
showCheckbox.value = []
}
}
// //
// change toggleSelection // change toggleSelection
// id selectedIds // id selectedIds
@ -103,6 +116,7 @@ const goToAnotherPage = (address) => {
//console.log(address) //console.log(address)
router.push(address) router.push(address)
} }
//
</script> </script>
<template> <template>

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

@ -1,133 +0,0 @@
<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>

@ -1,569 +1,328 @@
<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> <template>
<div> <div>
<div class="top"> <div class="top">
<div class="loop active-nav" @click="click($event, 2)"> <el-button @click="visibleDramwer = true">添加资源</el-button>
<img <el-drawer v-model="visibleDramwer">
src="../../assets/icons/课程简介.svg" <!-- 添加资源表单 -->
alt="" <el-form>
width="50px" <el-form-item label="资源名称">
height="50px" <el-input placeholder="请输入资源名称"></el-input>
/> </el-form-item>
<p>简介</p> <el-form-item label="资源类型">
</div> <el-select v-model="selectedOption" placeholder="资源类型">
<div class="loop" @click="click($event, 1)"> <el-option
<img class="vertical-option"
src="../../assets/icons/ppt.svg" label="选项1"
alt="" value="1"
width="50px" ></el-option>
height="50px" <el-option
/> class="vertical-option"
<p>ppt</p> label="选项2"
</div> value="2"
<div class="loop" @click="click($event, 0)"> ></el-option>
<img <el-option
src="../../assets/icons/视频.svg" class="vertical-option"
alt="" label="选项3"
width="50px" value="3"
height="50px" ></el-option>
/> </el-select>
<p>视频</p> </el-form-item>
</div> <el-form-item label="资源简介">
<div class="loop" @click="click($event, 3)"> <el-input placeholder="请输入资源简介"></el-input>
<img </el-form-item>
src="../../assets/icons/文本.svg" <el-form-item label="上传资源">
alt="" <el-upload
width="50px" v-model:file-list="FileList"
height="50px" :http-request="upload"
/> class="upload-demo"
<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 multiple
@change="uploadChange"
style="cursor: pointer"
/>
<br />
<button
type="submit"
@click="submitUploadFile"
style="cursor: pointer"
> >
上传 <el-button type="primary">点击上传</el-button>
</button> <template #tip>
<button> <div class="el-upload__tip">
<a 只能上传jpg/png文件,且不超过500kb
href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D" </div>
download="" </template>
> </el-upload>
下载 </el-form-item>
</a>
</button>
<button type="reset" style="cursor: pointer">重选</button>
</form>
</li>
</ul>
</div>
<div class="body" v-if="activeIndex == 1"> <el-form-item class="bottom-box">
<ul> <el-button type="info" @click="onRemoval">取消</el-button>
<li v-for="(item, index) in pptList" :key="index"> <el-button type="primary">确定</el-button>
<img :src="item.url" title="ppt" height="200px" width="390px" /> </el-form-item>
<div class="text1"> </el-form>
软件工程的奥秘 </el-drawer>
<br />
构建无暇的应用程序关键技巧
</div>
<form action="">
<input type="file" multiple @change="uploadChange" />
<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 == 2">
<ul>
<li>
<img
src="../../assets/images/软件1.png"
title="软件工程的奥秘"
width="390px"
height="200px"
/>
<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>
<div class="body" v-if="activeIndex == 3"> <div class="body">
<ul> <div class="nav">
<li v-for="(item, index) in textList" :key="index"> <el-row>
<img <el-col :span="4" @click="changeType('1')">
src="../../assets/icons/文本1.png" <div class="nav-info">
title="软件工程的奥秘" <div class="nav-info-pic">
width="390px" <img :src="ppt" style="height: 50px" />
height="200px" </div>
/> <div class="nav-info-name">ppt</div>
<textarea name="" id="">点击输入文本内容:</textarea> </div>
<form action=""> </el-col>
<input <el-col :span="4" @click="changeType('2')">
type="file" <div class="nav-info">
multiple <div class="nav-info-pic">
@change="uploadChange" <img :src="image" style="height: 50px" />
style="cursor: pointer" </div>
/> <div class="nav-info-name">图片</div>
<br /> </div>
<button </el-col>
type="submit"
@click="submitUploadFile" <el-col :span="4" @click="showComponent('3')">
style="cursor: pointer" <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>
</button> <div class="icon">
<button> <el-icon @click="onDeleteResource(ids)">
<a <Delete />
href="http://ceshi132132.oss-cn-wuhan-lr.aliyuncs.com/img/1c52b390170a4734aba783a5473e891b.jpg?Expires=1717731833&OSSAccessKeyId=LTAI5tFkdu3y5WddxbjgaG2F&Signature=KtuZCTVO7cbwZAdD7ytpphkYhLw%3D" </el-icon>
download="" <el-icon>
> <Edit />
下载 </el-icon>
</a> </div>
</button> <div class="vedio">
<button type="reset" style="cursor: pointer">重选</button> <img style="height: 200px" :src="resource.img" />
</form> </div>
</li> <div class="resource-info">
</ul> <div class="zy-name">{{ resource.name }}</div>
</div> <div class="zy-info">{{ resource.description }}</div>
<div class="body" v-if="activeIndex == 4"> </div>
<ul> </div>
<li v-for="(item, index) in audioList" :key="index"> </li>
<img </ul>
src="../../assets/icons/音乐.png" </div>
title="软件工程的奥秘" <!-- 分页 -->
width="390px" <div class="pagination">
height="180px" <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"
/> />
<div class="text1">点击播放软件工程的奥秘</div> </div>
<video </div>
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>
</div> </div>
</template> </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
}
//====================
const page = ref(1) <style lang="scss" scoped>
const total = ref(50) .el-row {
const pageSize = ref(8) margin-bottom: 20px;
const videoList = ref([ background-color: #fff;
{ url: '1' }, height: 70px;
{ 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
// })
} }
function currentChange(number) { .el-col {
console.log(number, 'num') border-radius: 4px;
page.value = number
changePage()
} }
const file = ref(null) .nav-info {
const uploadChange = (e) => { display: flex;
console.log(e.target.files[0]) text-align: center;
file.value = e.target.files[0] flex-direction: column;
} }
const uploadFileEvent = () => {} .body {
const submitUploadFile = async () => { background-color: #fff;
const formData = new FormData() height: 100%;
formData.append('courseId', 1)
formData.append('file', file.value)
await uploadFile(formData)
} }
//============
</script>
<style lang="scss">
.top { .top {
width: 1620px; margin-bottom: 20px;
height: 100px;
display: flex;
justify-content: space-around;
border: 1px solid rgb(187, 181, 181);
background-color: rgb(255, 255, 255);
li {
height: 99px !important;
border-bottom: 1px solid;
}
& > * {
transition: 0.1s;
cursor: pointer;
}
.active-nav {
border-bottom: 5px solid blue !important;
}
} }
.body { .nav-info-pic .img {
width: 1620px; height: 50px;
height: 680px; width: 50px;
display: flex;
background-color: rgb(237, 237, 238);
} }
.bottom-box {
li { //display: flex
list-style-type: none; float: right;
} }
ul {
.body ul { list-style-type: none;
width: 100%; padding: 10;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-evenly; /* justify-content: space-evenly; */
justify-content: space-between; justify-content: start;
} }
li {
transition: filter 0.3s; /* 添加过渡动画 */
flex: 0 0 20%;
.body li { margin-bottom: 10px;
height: 320px; padding: 10px;
width: 390px; box-sizing: border-box;
background-color: rgb(237, 237, 238);
}
.loop { transition: box-shadow 0.3s;
width: 100px; cursor: pointer;
height: 99px;
text-align: center;
padding: 20px;
border-bottom: 1px solid rgb(187, 181, 181);
background-color: rgb(253, 252, 252);
} }
li:hover {
.body .text1 { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
font-size: 25px;
line-height: 30px;
} }
.body {
.body .text2 { display: flex;
font-size: 18px; flex-direction: column;
line-height: 20px; min-height: 100vh;
color: rgb(186, 43, 11);
} }
.body a { .courseResourcesList {
all: initial; flex: 1;
cursor: pointer; }
.pagination {
position: sticky;
bottom: 0;
margin: 0 auto;
}
.icon {
display: flex;
justify-content: space-between;
} }
.buttom { .resource-info {
width: 100%;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; justify-content: space-between;
// .pagination{ }
// width: ; .zy-name:hover {
// $height:150px; color: rgb(138, 201, 243); /* 鼠标经过时将字体颜色设置为蓝色 */
// height: $height; }
// button,li{ .zy-name {
// height: $height !important; margin-top: 10px;
// } font-size: 20px;
}
.zy-info {
margin-top: 20px;
} }
</style> </style>
<!-- 上传git
git add .
git commit -m '介绍'
git pull
git push
-->

Loading…
Cancel
Save