refactor:refactor style

src/assets/download.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645842424351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2080" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M341.333333 640a42.666667 42.666667 0 0 1-42.666666 42.666667H256a170.666667 170.666667 0 0 1-40.277333-336.554667 298.709333 298.709333 0 0 1 570.154666-81.408A213.333333 213.333333 0 0 1 725.333333 682.666667a42.666667 42.666667 0 0 1 0.042667-85.333334 128 128 0 0 0 36.394667-250.794666l-38.144-11.264-15.914667-36.437334a213.376 213.376 0 0 0-407.296 58.026667l-7.381333 58.368-57.173334 13.824A85.418667 85.418667 0 0 0 256 597.333333h42.666667a42.666667 42.666667 0 0 1 42.666666 42.666667z m321.706667 87.338667a42.666667 42.666667 0 0 1 0 60.330666l-120.917333 120.832c-16.682667 16.64-43.690667 16.64-60.373334 0l-120.917333-120.832a42.666667 42.666667 0 0 1 60.330667-60.330666L469.333333 775.509333V426.666667a42.666667 42.666667 0 0 1 85.333334 0v348.714666l48.042666-48.042666a42.666667 42.666667 0 0 1 60.330667 0z" fill="#8a8a8a" p-id="2081"></path></svg>

src/views/CoursePage/CourseDetail.vue

@@ -32,7 +32,7 @@
           <el-radio-button label="courseware">课件列表</el-radio-button>
         </el-radio-group>
         <!--        <el-button v-teacher-permission="{role:'teacher'}" plain type="warning">添加发布</el-button>-->
-        <el-popover v-model:visible="showPopover" :width="160" placement="bottom">
+        <el-popover v-if="tabName==='notice'" v-model:visible="showPopover" :width="160" placement="bottom">
           <div class="sel-notice-type">
             <div :style="{color:themeColor.orange}" class="notice-type-icon">
               公告
@@ -62,6 +62,8 @@
             </el-button>
           </template>
         </el-popover>
+        <el-button v-if="tabName==='courseware'" v-teacher-permission="{role:'teacher'}" plain type="primary">上传课件
+        </el-button>
       </div>
       <div class="course-tab-content">
         <div v-if="tabName==='notice'" class="tab-notice">
@@ -70,6 +72,12 @@
         <div v-else-if="tabName==='tasks'" class="tab-tasks">
         </div>
         <div v-else-if="tabName==='courseware'" class="tab-courseware">
+          <FileEntry v-for="(entry,index) in fileEntryList"
+                     :key="index"
+                     :file-entry-info="entry"
+                     @downloadFileIconClick="handleDownloadFileIconClick"
+          ></FileEntry>
+
         </div>
       </div>
     </div>
@@ -111,10 +119,6 @@
               <el-radio v-model="newNoticeInfo.priority" border label="2" size="large">一般</el-radio>
             </div>
           </div>
-          <div class="new-notice-item">
-            <span>附件:&emsp;&emsp;</span>
-            <div></div>
-          </div>
         </div>
         <div class="new-notice-btn">
           <el-button style="margin-right: 32px" type="primary">确认</el-button>
@@ -132,6 +136,7 @@
 <script setup>
 import GlobalHeader from "../../../src/components/GlobalHeader";
 import NoticeItem from "./components/NoticeItem";
+import FileEntry from "./components/FileEntry";
 import {reactive, ref} from "vue";
 
 const newNoticeType = reactive({type: "", title: "", color: ""});
@@ -202,6 +207,35 @@ const courseInfo = {
   moocLink: "https://www.icourse163.org/"
 };
 
+
+//处理上传的文件相关
+const fileEntryList = reactive([
+  {
+    id: 1,
+    name: "课程作业",
+    size: "12.6MB",
+    uploadTime: "2021-12-12 08:22:23",
+    url: ""
+  },
+  {
+    id: 2,
+    name: "测试",
+    size: "6KB",
+    uploadTime: "2021-12-12 08:22:23",
+    url: ""
+  },
+  {
+    id: 3,
+    name: "小练习",
+    size: "45KB",
+    uploadTime: "2021-12-12 08:22:23",
+    url: ""
+  }
+]);
+
+const handleDownloadFileIconClick = function (url) {
+  window.open(url);
+};
 </script>
 
 <style scoped>

src/views/CoursePage/components/FileEntry.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="file-entry">
+    <span class="name">
+      {{ fileEntryInfo.name }}
+    </span>
+    <span class="size">{{ fileEntryInfo.size }}</span>
+    <span class="upload-time">{{ fileEntryInfo.uploadTime }}</span>
+    <span class="operation">
+      <img alt="download" src="../../../assets/download.svg" @click="downloadIconClick">
+    </span>
+  </div>
+</template>
+
+<script setup>
+// eslint-disable-next-line no-unused-vars
+import {defineEmits, defineProps} from "vue";
+
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
+  fileEntryInfo: {
+    type: Object,
+    default: function () {
+      return {
+        id: 0,
+        name: "",
+        size: "",
+        uploadTime: "",//TODO 可能要改字段名
+        url: ""
+      };
+    }
+  }
+});
+
+//响应open和download点击按钮相关
+const emit = defineEmits(["downloadFileIconClick"]);
+//向父组件传当前被点击的url
+const downloadIconClick = function () {
+  emit("downloadFileIconClick", props.fileEntryInfo.url);
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+
+
+.file-entry {
+  height: 50px;
+  transition: all 0.2s ease-in-out;
+  font-size: 12px;
+  box-sizing: border-box;
+  padding: 0 16px;
+  color: #5F6368;
+  display: flex;
+  align-items: center;
+  border: none;
+  border-bottom: 1px solid #F0F0F0;
+}
+
+.file-entry:hover {
+  background-color: #FDF6EC;
+}
+
+.name {
+  width: 278px;
+  text-align: left;
+  overflow: hidden;
+  /*文本不会换行*/
+  white-space: nowrap;
+  /*当文本溢出包含元素时，以省略号表示超出的文本*/
+  text-overflow: ellipsis;
+}
+
+.upload-time {
+  width: 230px;
+  text-align: left;
+}
+
+.size {
+  width: 232px;
+  text-align: left;
+}
+
+.operation {
+  width: fit-content;
+  text-align: right;
+}
+
+.operation img {
+  height: 18px;
+  width: 18px;
+  cursor: pointer;
+}
+
+</style>

src/views/CoursePage/components/NoticeItem.vue

@@ -53,38 +53,47 @@ const color = computed(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 50px;
+  height: 45px;
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.notice-item:hover {
+  background-color: #F0F0F0;
 }
 
 .mode-text, .time-avatar {
   display: flex;
   align-items: center;
   color: #666666;
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .mode {
-  border-radius: 24px;
-  border: v-bind(color) 3px solid;
+  border-radius: 18px;
+  border: v-bind(color) 2px solid;
   box-sizing: border-box;
-  padding: 4px 12px;
+  padding: 2px 4px;
   color: v-bind(color);
   margin-right: 16px;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 
 .avatar {
   border-radius: 50%;
   background-color: v-bind(color);
-  height: 32px;
-  width: 32px;
-  line-height: 32px;
+  height: 28px;
+  width: 28px;
+  line-height: 28px;
   text-align: center;
   color: #FFFFFF;
   margin-left: 16px;
 }
 
 
+.text, .time {
+  font-size: 14px;
+}
+
 </style>

src/views/CoursePage/style/CourseDetail.css

@@ -7,8 +7,8 @@
 
 .course-detail-container {
     box-sizing: border-box;
-    width: 1200px;
-    min-width: 1200px;
+    width: 1000px;
+    min-width: 1000px;
     margin-top: 32px;
 }
 
@@ -48,7 +48,7 @@
 }
 
 .course-info {
-    font-size: 22px;
+    font-size: 18px;
     color: #333333;
     margin-left: 32px;
 }
@@ -70,7 +70,6 @@
 .course-info .mooc-link > a {
     color: #409eff;
     text-decoration: none;
-    font-weight: 500;
     font-style: italic;
 }
 
@@ -81,8 +80,8 @@
 }
 
 .introduce-content {
-    margin-top: 24px;
-    font-size: 18px;
+    margin-top: 16px;
+    font-size: 14px;
     line-height: 26px;
     color: #333333;
 }
@@ -90,7 +89,7 @@
 .title {
     color: #333333;
     font-weight: 500;
-    font-size: 24px;
+    font-size: 20px;
 }
 
 
@@ -117,17 +116,17 @@
     border: 2px solid;
     box-sizing: border-box;
     padding: 4px 12px;
-    font-size: 16px;
+    font-size: 14px;
 }
 
 
 .notice-type-txt {
-    font-size: 16px;
+    font-size: 14px;
     cursor: pointer;
 }
 
 .el-dialog__title {
-    font-size: 24px;
+    font-size: 22px;
 }
 
 .new-notice-content {
@@ -143,7 +142,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    font-size: 18px;
+    font-size: 16px;
 }
 
 .content-description-area {
@@ -153,7 +152,7 @@
     margin-bottom: 16px;
     display: flex;
     justify-content: flex-start;
-    font-size: 18px;
+    font-size: 16px;
 
 }