mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-10 11:26:45 +08:00
feat：新增下载页面
This commit is contained in:
songwc
BIN
src/assets/images/leveladd/zip.png
Normal file
BIN
src/assets/images/leveladd/zip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -15,7 +15,120 @@
|
|||||||
@click="closeDrawer"
|
@click="closeDrawer"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
</template>
|
</template>
|
||||||
@@ -33,7 +146,9 @@ export default {
|
|||||||
|
|
||||||
setup(props, ctx) {
|
setup(props, ctx) {
|
||||||
console.log("props", props.downloadVisible);
|
console.log("props", props.downloadVisible);
|
||||||
const state = reactive({});
|
const state = reactive({
|
||||||
|
name: "",
|
||||||
|
});
|
||||||
|
|
||||||
const closeDrawer = () => {
|
const closeDrawer = () => {
|
||||||
ctx.emit("update:downloadVisible", false);
|
ctx.emit("update:downloadVisible", false);
|
||||||
@@ -56,15 +171,153 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
.headerTitle {
|
.headerTitle {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: 25px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user