From 0c1b04b98d96c88faa98a006c136ab17e34834ee Mon Sep 17 00:00:00 2001
From: wyx <you@example.com>
Date: Fri, 6 Jan 2023 16:55:14 +0800
Subject: [PATCH] =?UTF-8?q?style:=E4=B8=8B=E8=BD=BD=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/DownLoad.vue | 98 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 79 insertions(+), 19 deletions(-)

diff --git a/src/views/DownLoad.vue b/src/views/DownLoad.vue
index cae0286c..cca33d33 100644
--- a/src/views/DownLoad.vue
+++ b/src/views/DownLoad.vue
@@ -55,32 +55,37 @@
           <div>当前容量:</div>
           <div>55.01MB / 2GB</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 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 style="display:flex;flex-wrap:wrap;">
+      <div v-for="(values, index) in homeWorkList" class="zipcontainer" :key="index">
+        <!-- 单个文件 -->
+        <div v-if="values" 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 class="timemanag">来源：管理者进阶-腾飞班Z1</div>
               </div>
             </div>
+          </div> 
+          <div class="itemdown"> 
+            <div class="download" @click="downLoadFile">下载</div>
+            <div class="delete" @click="removeFile">删除</div>
           </div>
         </div>
-        <div class="itemdown">
-          <div class="download">下载</div>
-          <div class="delete">删除</div>
-        </div>
       </div>
     </div>
   </div>
@@ -93,10 +98,29 @@ export default {
   setup() {
     const state = reactive({
       name: "",
+      homeWorkList: []
     });
 
+    function getData() {
+      state.homeWorkList = [1,2,3,4,5,6]
+    }
+
+    // 获取可下载数据
+    getData()
+
+    // 下载文件
+    function downLoadFile() {
+
+    } 
+    // 删除文件
+    function removeFile() {
+
+    }
+
     return {
       ...toRefs(state),
+      downLoadFile,
+      removeFile
     };
   },
 };
@@ -147,6 +171,27 @@ export default {
           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 {
         width: 100px;
         height: 40px;
@@ -167,8 +212,11 @@ export default {
   }
   .zipcontainer {
     display: flex;
+    width: 352px;
+    height: 160px;
     flex-wrap: wrap;
-    margin-top: 30px;
+    margin-right: 56px;
+    margin-top: 90px;
     .item {
       margin-right: 50px;
       margin-bottom: 50px;
@@ -235,6 +283,12 @@ export default {
           justify-content: center;
           align-items: center;
         }
+        .download:hover {
+          background-color: rgba(64, 158, 255, 0.76);
+        }
+        .download:active {
+          background-color: #0982FF;
+        }
         .delete {
           width: 176px;
           height: 48px;
@@ -244,6 +298,12 @@ export default {
           justify-content: 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 {
           font-size: 16px;
           font-weight: 400;