hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-11 11:56:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

style:下载中心样式和数据接入函数增加

Browse Source
This commit is contained in:
wyx
2023-01-06 16:55:14 +08:00
parent 2339f73dd7
commit 0c1b04b98d
1 changed files with 79 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/views/DownLoad.vue
View File

@@ -55,32 +55,37 @@
<div>当前容量:</div> <div>当前容量:</div>
<div>55.01MB / 2GB</div> <div>55.01MB / 2GB</div>
</div> </div>
<a-progress :percent="40" :width="200" :show-info="false" /> <a-progress :percent="40" :width="200" :show-info="false" :stroke-color="{
'0%': '#45B058',
'100%': '#45B058',
}" />
</div> </div>
</div> </div>
<!-- 文件容器 --> <!-- 文件容器 -->
<div class="zipcontainer"> <div style="display:flex;flex-wrap:wrap;">
<!-- 单个文件 --> <div v-for="(values, index) in homeWorkList" class="zipcontainer" :key="index">
<div class="item"> <!-- 单个文件 -->
<div class="itemup"> <div v-if="values" class="item">
<div class="lefttop"></div> <div class="itemup">
<div class="cent"> <div class="lefttop"></div>
<div class="zip"></div> <div class="cent">
<div class="ziprit"> <div class="zip"></div>
<div class="textop">作业名称</div> <div class="ziprit">
<div class="texdown"> <div class="textop">作业名称</div>
<div class="timemanag" style="margin-top: 12px"> <div class="texdown">
2022-08-08 10:30:30 管理员 <div class="timemanag" style="margin-top: 12px">
2022-08-08 10:30:30 管理员
</div>
<div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
</div> </div>
<div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
</div> </div>
</div> </div>
</div>
<div class="itemdown">
<div class="download" @click="downLoadFile">下载</div>
<div class="delete" @click="removeFile">删除</div>
</div> </div>
</div> </div>
<div class="itemdown">
<div class="download">下载</div>
<div class="delete">删除</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -93,10 +98,29 @@ export default {
setup() { setup() {
const state = reactive({ const state = reactive({
name: "", name: "",
homeWorkList: []
}); });
function getData() {
state.homeWorkList = [1,2,3,4,5,6]
}
// 获取可下载数据
getData()
// 下载文件
function downLoadFile() {
}
// 删除文件
function removeFile() {
}
return { return {
...toRefs(state), ...toRefs(state),
downLoadFile,
removeFile
}; };
}, },
}; };
@@ -147,6 +171,27 @@ export default {
margin-left: 10px; margin-left: 10px;
} }
} }
.btn1:hover {
background: rgba(64, 158, 255, 0.76);
.search {
background-image: url("../assets/images/courseManage/search0.png");
}
.btnText {
color: #ffffff;
}
}
.btn1:active {
background: #0982ff;
}
.btn2:hover {
background: rgba(64, 158, 255, 0.1);
}
.btn2:active {
background: rgba(64, 158, 255, 0.2);
}
.btn2 { .btn2 {
width: 100px; width: 100px;
height: 40px; height: 40px;
@@ -167,8 +212,11 @@ export default {
} }
.zipcontainer { .zipcontainer {
display: flex; display: flex;
width: 352px;
height: 160px;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 30px; margin-right: 56px;
margin-top: 90px;
.item { .item {
margin-right: 50px; margin-right: 50px;
margin-bottom: 50px; margin-bottom: 50px;
@@ -235,6 +283,12 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.download:hover {
background-color: rgba(64, 158, 255, 0.76);
}
.download:active {
background-color: #0982FF;
}
.delete { .delete {
width: 176px; width: 176px;
height: 48px; height: 48px;
@@ -244,6 +298,12 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.delete:hover{
background-color: rgba(64, 158, 255, 0.10);
}
.delete:active{
background-color: rgba(64, 158, 255, 0.20);
}
.outime { .outime {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;