diff --git a/src/assets/images/leveladd/zip.png b/src/assets/images/leveladd/zip.png new file mode 100644 index 00000000..891acca1 Binary files /dev/null and b/src/assets/images/leveladd/zip.png differ diff --git a/src/components/drawers/DownLoad.vue b/src/components/drawers/DownLoad.vue index 96ad521b..2c8a40a2 100644 --- a/src/components/drawers/DownLoad.vue +++ b/src/components/drawers/DownLoad.vue @@ -15,7 +15,120 @@ @click="closeDrawer" /> -
+
+
+
+
作业名称：
+ +
+
+
+
+ +
+
搜索
+
+
+
+ +
+
重置
+
+
+
+ +
+ +
+
+
+
+
+
+
作业名称
+
+
+ 2022-08-08 10:30:30 管理员 +
+
来源：管理者进阶-腾飞班Z1
+
+
+
+
+
+
下载
+
(5天后失效)
+
+
+
+
+
+
+
+
+
作业名称
+
+
+ 2022-08-08 10:30:30 管理员 +
+
来源：管理者进阶-腾飞班Z1
+
+
+
+
+
+
下载
+
(5天后失效)
+
+
+
+
+
+
+
+
+
作业名称
+
+
+ 2022-08-08 10:30:30 管理员 +
+
来源：管理者进阶-腾飞班Z1
+
+
+
+
+
+
下载
+
(5天后失效)
+
+
+
+
+
+
+
+
+
作业名称
+
+
+ 2022-08-08 10:30:30 管理员 +
+
来源：管理者进阶-腾飞班Z1
+
+
+
+
+
+
下载
+
(5天后失效)
+
+
+
+
@@ -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; + } + } + } + } } } }