Compare commits
No commits in common. '2117f8fd275272266b12862456fec6c8720caeb1' and '855904b53d54d3a71f0a6101f1e496f55af030e3' have entirely different histories.
2117f8fd27
...
855904b53d
3 changed files with 3475 additions and 3268 deletions
File diff suppressed because it is too large
Load Diff
@ -1,132 +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,386 +1,9 @@ |
|||||||
<template> |
<template> |
||||||
<div class="top"> |
<div>课程资源</div> |
||||||
<div class="loop" @click="click(2)"> |
|
||||||
<img src="D:\前端\前端code\img\简介.svg" alt="" width="50px" height="50px"> |
|
||||||
<p>简介</p> |
|
||||||
</div> |
|
||||||
<div class="loop" @click="click(1)"> |
|
||||||
<img src="D:\前端\前端code\img\ppt.svg" alt="" width="50px" height="50px"> |
|
||||||
<p>ppt</p> |
|
||||||
</div> |
|
||||||
<div class="loop" @click="click(0)"> |
|
||||||
<img src="D:\前端\前端code\img\视频.svg" alt="" width="50px" height="50px"> |
|
||||||
<p>视频</p> |
|
||||||
</div> |
|
||||||
<div class="loop" @click="click(3)"> |
|
||||||
<img src="D:\前端\前端code\img\文本.svg" alt="" width="50px" height="50px"> |
|
||||||
<p>文本</p> |
|
||||||
</div> |
|
||||||
<div class="loop" @click="click(4)"> |
|
||||||
<img src="D:\前端\前端code\img\音频.svg" alt="" width="50px" height="50px"> |
|
||||||
<p>音频</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div class="body" v-if="activeIndex == 0" > |
|
||||||
<ul> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px" ></video> |
|
||||||
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
|
||||||
</li> |
|
||||||
|
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">如何成为顶级工程师<br>成功之路解析</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程中常见的陷阱级如何避免<br>优化你的开发过程</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">精通软件工程的必备工具<br>代码管理、测试和持续集成</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程师面试攻略<br>如何在技术中脱颖而出</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<video src="D:\前端\前端code\vedio\薛之谦 - 病态.mp4" controls width="390px"></video> |
|
||||||
<div class="text1">软件工程实战经验分析<br>高效团队合作的秘密武器</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="body" v-if="activeIndex==1"> |
|
||||||
<ul> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\ppt1.png" title="ppt" height="200px" width="390px"> |
|
||||||
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
|
||||||
<form action=""> |
|
||||||
<input type="file" multiple><br> |
|
||||||
<button type="submit">上传</button> |
|
||||||
<button type="reset">重选</button> |
|
||||||
</form> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\文本1.png" title="content" height="200px" width="390px"> |
|
||||||
<div class="text1">如何成为顶级工程师<br>成功之路解析</div> |
|
||||||
<form action=""> |
|
||||||
<input type="file" multiple><br> |
|
||||||
<button type="submit">上传</button> |
|
||||||
<button type="reset">重选</button> |
|
||||||
</form> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\音乐.png" title="music" height="200px" width="390px"> |
|
||||||
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
|
||||||
<form action=""> |
|
||||||
<input type="file" multiple><br> |
|
||||||
<button type="submit">上传</button> |
|
||||||
<button type="reset">重选</button> |
|
||||||
</form> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\PDF1.png" title="pdf" height="200px" width="390px"> |
|
||||||
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div> |
|
||||||
<form action=""> |
|
||||||
<input type="file" multiple><br> |
|
||||||
<button type="submit">上传</button> |
|
||||||
<button type="reset">重选</button> |
|
||||||
</form> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\ppt1.png" title="ppt" height="200px" width="390px"> |
|
||||||
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
|
||||||
<form action=""> |
|
||||||
<input type="file" multiple><br> |
|
||||||
<button type="submit">上传</button> |
|
||||||
<button type="reset">重选</button> |
|
||||||
</form> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\文本1.png" title="content" height="200px" width="390px"> |
|
||||||
<div class="text1">如何成为顶级工程师<br>成功之路解析</div> |
|
||||||
<form action=""> |
|
||||||
<input type="file" multiple><br> |
|
||||||
<button type="submit">上传</button> |
|
||||||
<button type="reset">重选</button> |
|
||||||
</form> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\音乐.png" title="music" height="200px" width="390px"> |
|
||||||
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
|
||||||
<form action=""> |
|
||||||
<input type="file" multiple><br> |
|
||||||
<button type="submit">上传</button> |
|
||||||
<button type="reset">重选</button> |
|
||||||
</form> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\PDF1.png" title="pdf" height="200px" width="390px"> |
|
||||||
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div> |
|
||||||
<form action=""> |
|
||||||
<input type="file" multiple><br> |
|
||||||
<button type="submit">上传</button> |
|
||||||
<button type="reset">重选</button> |
|
||||||
</form> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<div class="body" v-if="activeIndex==2"> |
|
||||||
<ul> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件1.jpg" title="软件工程的奥秘" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程的奥秘<br>构建无暇的应用程序关键技巧</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:王易系<br> |
|
||||||
报名人数:130人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件2.png" title="顶级工程师" width="390px" height="200px" > |
|
||||||
<div class="text1">如何成为顶级工程师<br>成功之路解析</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:刘苏杭<br> |
|
||||||
报名人数:126人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件3.jpg" title="软件黑科技" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程的黑科技<br>提高开发效率的秘密技巧大揭秘</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:安书名<br> |
|
||||||
报名人数:117人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件4.png" title="未来趋势" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程界的未来趋势<br>AI、大数据和区块的巨大影响</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:萨基姆<br> |
|
||||||
报名人数:140人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件5.jpg" title="避免陷阱" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程中常见的陷阱级如何避免<br>优化你的开发过程</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:何舒心<br> |
|
||||||
报名人数:125人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件6.jpg" title="必备工具" width="390px" height="200px" > |
|
||||||
<div class="text1">精通软件工程的必备工具<br>代码管理、测试和持续集成</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:朱佳娜<br> |
|
||||||
报名人数:121人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件7.png" title="面试攻略" width="390px" height="200px" > |
|
||||||
<div class="text1">软件工程师面试攻略<br>如何在技术中脱颖而出</div> |
|
||||||
<div class="text2">课程类型:公共任选课<br> |
|
||||||
授课老师:胡树立<br> |
|
||||||
报名人数:117人 |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件8.jpg" 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> |
|
||||||
<img src="D:\前端\前端code\img\软件1.jpg" title="软件工程的奥秘" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件2.png" title="顶级工程师" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件3.jpg" title="软件黑科技" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件4.png" title="未来趋势" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件5.jpg" title="避免陷阱" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件6.jpg" title="必备工具" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件7.png" title="面试攻略" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件8.jpg" alt="实战经验" width="390px" height="200px" > |
|
||||||
|
|
||||||
<textarea name="" id="">点击输入文本内容:</textarea> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<div class="body" v-if="activeIndex==4"> |
|
||||||
<ul> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件1.jpg" title="软件工程的奥秘" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程的奥秘</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件2.png" title="顶级工程师" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放顶级工程师</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件3.jpg" title="软件黑科技" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件黑科技</div> |
|
||||||
<audio src="http://192.168.192.1" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件4.png" title="未来趋势" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程为了趋势</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件5.jpg" title="避免陷阱" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程如何避免陷阱</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
|
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件6.jpg" title="必备工具" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程的必备工具</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件7.png" title="面试攻略" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程的面试攻略</div> |
|
||||||
<audio src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<img src="D:\前端\前端code\img\软件8.jpg" alt="实战经验" width="390px" height="200px" > |
|
||||||
<div class="text1">点击播放软件工程的实战经验</div> |
|
||||||
<!-- <audio src="../../../../前端code/vedio/tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls></audio> --> |
|
||||||
<audio controls> |
|
||||||
<source src="../../../../前端code/vedio/tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" type="audio/mpeg"> |
|
||||||
<source src="../../../../前端code/vedio/tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" type="audio/ogg"> |
|
||||||
您的浏览器不支持该音频格式。 |
|
||||||
</audio> |
|
||||||
<!-- <embed height="50" width="100" src="D:\前端\前端code\vedio\tsukuyumi - 徐小湛《高等数学》第17讲 函数的连续性.mp3" controls > --> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<div class="" @click="gotoinfo"> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
</template> |
</template> |
||||||
<script lang="ts" setup> |
|
||||||
import {ref} from 'vue' |
|
||||||
import { useRouter } from 'vue-router' |
|
||||||
// import {getVideoUrlApi} from 'src/api/assats' |
|
||||||
const activeIndex=ref(0) |
|
||||||
const router = useRouter() |
|
||||||
const gotoinfo = () => { |
|
||||||
console.log(router); |
|
||||||
router.push('/courseResourcesManagement/courseInfo') |
|
||||||
} |
|
||||||
function click(index:any){ |
|
||||||
console.log(index); |
|
||||||
activeIndex.value = index |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import {} from 'vue' |
||||||
</script> |
</script> |
||||||
<style lang="scss" scoped> |
|
||||||
.top{ |
|
||||||
width: 1620px; |
|
||||||
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: .1s; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
&>*:hover{ |
|
||||||
border-bottom: 5px solid blue !important; |
|
||||||
} |
|
||||||
} |
|
||||||
.body{ |
|
||||||
width: 1620px; |
|
||||||
height: 680px; |
|
||||||
display: flex; |
|
||||||
background-color: rgb(237, 237, 238); |
|
||||||
} |
|
||||||
li{ |
|
||||||
list-style-type: none; |
|
||||||
} |
|
||||||
.body ul{ |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
align-content: space-evenly; |
|
||||||
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; |
|
||||||
} |
|
||||||
.body .text2{ |
|
||||||
font-size: 18px; |
|
||||||
line-height: 20px; |
|
||||||
color: rgb(186, 43, 11); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
</style> |
<style lang="scss" scoped></style> |
||||||
|
|||||||
Loading…
Reference in new issue