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

feat：新增下载页面

Browse Source
This commit is contained in:
songwc
2022-10-26 09:31:49 +08:00
parent 0963a90fd5
commit fe5af5200d
2 changed files with 257 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/leveladd/zip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

261
src/components/drawers/DownLoad.vue
View File

@@ -15,7 +15,120 @@
@click="closeDrawer"
/>
</div>
<div class="main"></div>
<div class="main">
<div class="tab1">
<div class="nameinp">
<div class="namee">作业名称：</div>
<a-input
v-model:value="name"
style="width: 408px; height: 40px; border-radius: 8px"
placeholder="请输入作业名称"
/>
</div>
<div class="btns">
<div class="btn1">
<div class="img1">
<img src="../../assets/images/courseManage/search0.png" />
</div>
<div class="wz">搜索</div>
</div>
<div class="btn2">
<div class="img2">
<img src="../../assets/images/courseManage/reset1.png" />
</div>
<div class="wz">重置</div>
</div>
</div>
</div>
<!-- 文件容器 -->
<div class="zipcontainer">
<!-- 单个文件 -->
<div class="item">
<div class="itemup">
<div class="lefttop"></div>
<div class="cent">
<div class="zip"></div>
<div class="ziprit">
<div class="textop">作业名称</div>
<div class="texdown">
<div class="timemanag" style="margin-top: 12px">
2022-08-08 10:30:30 管理员
</div>
<div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
</div>
</div>
</div>
</div>
<div class="itemdown">
<div class="download">下载</div>
<div class="outime">(5天后失效)</div>
</div>
</div>
<div class="item">
<div class="itemup">
<div class="lefttop"></div>
<div class="cent">
<div class="zip"></div>
<div class="ziprit">
<div class="textop">作业名称</div>
<div class="texdown">
<div class="timemanag" style="margin-top: 12px">
2022-08-08 10:30:30 管理员
</div>
<div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
</div>
</div>
</div>
</div>
<div class="itemdown">
<div class="download">下载</div>
<div class="outime">(5天后失效)</div>
</div>
</div>
<div class="item">
<div class="itemup">
<div class="lefttop"></div>
<div class="cent">
<div class="zip"></div>
<div class="ziprit">
<div class="textop">作业名称</div>
<div class="texdown">
<div class="timemanag" style="margin-top: 12px">
2022-08-08 10:30:30 管理员
</div>
<div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
</div>
</div>
</div>
</div>
<div class="itemdown">
<div class="download">下载</div>
<div class="outime">(5天后失效)</div>
</div>
</div>
<div class="item">
<div class="itemup">
<div class="lefttop"></div>
<div class="cent">
<div class="zip"></div>
<div class="ziprit">
<div class="textop">作业名称</div>
<div class="texdown">
<div class="timemanag" style="margin-top: 12px">
2022-08-08 10:30:30 管理员
</div>
<div class="timemanag">来源：管理者进阶-腾飞班Z1</div>
</div>
</div>
</div>
</div>
<div class="itemdown">
<div class="download">下载</div>
<div class="outime">(5天后失效)</div>
</div>
</div>
</div>
</div>
</div>
</a-drawer>
</template>
@@ -33,7 +146,9 @@ export default {
setup(props, ctx) {
console.log("props", props.downloadVisible);
const state = reactive({});
const state = reactive({
name: "",
});
const closeDrawer = () => {
ctx.emit("update:downloadVisible", false);
@@ -56,15 +171,153 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
// margin-left: 24px;
}
}
.contentMain {
.main {
overflow-y: auto;
padding-right: 10px;
.tab1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-top: 10px;
.t1 {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.nameinp {
display: flex;
align-items: center;
margin-top: 10px;
margin-right: 10px;
.namee {
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
}
}
.btns {
display: flex;
margin-top: 10px;
.btn1 {
width: 100px;
height: 40px;
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
background: #409eff;
border-radius: 8px;
border: 1px solid #409eff;
cursor: pointer;
.wz {
margin-left: 10px;
}
}
.btn2 {
width: 100px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #409eff;
font-size: 14px;
background: #ffffff;
border-radius: 8px;
cursor: pointer;
border: 1px solid #409eff;
.wz {
margin-left: 10px;
}
}
}
}
.zipcontainer {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
.item {
margin-right: 50px;
margin-bottom: 50px;
.itemup {
width: 412px;
height: 160px;
background: #ffffff;
border-radius: 2px 2px 0px 0px;
border: 1px solid #409eff;
position: relative;
.lefttop {
width: 8px;
height: 21px;
background: #4ea6ff;
border-radius: 0px 4px 4px 0px;
top: 18px;
position: absolute;
}
.cent {
display: flex;
margin-top: 40px;
margin-left: 40px;
.zip {
width: 62px;
height: 72px;
background-image: url(../../assets/images/leveladd/zip.png);
background-size: 100%;
}
.ziprit {
margin-left: 20px;
margin-top: -5px;
.textop {
font-size: 18px;
font-weight: 600;
color: #409eff;
}
.texdown {
.timemanag {
font-size: 14px;
font-weight: 400;
color: #878b92;
}
}
}
}
}
.itemdown {
width: 412px;
height: 48px;
background: linear-gradient(180deg, #ddeaff 0%, #f0f8fe 100%);
border-radius: 0px 0px 2px 2px;
border: 1px solid #409eff;
border-top: 0;
display: flex;
justify-content: center;
align-items: center;
.download {
font-size: 18px;
font-weight: 600;
color: #409eff;
cursor: pointer;
}
.outime {
font-size: 16px;
font-weight: 400;
color: #878b92;
margin-left: 10px;
}
}
}
}
}
}
}