白点高度、课程列表

src/Layout/tabbar/index.vue

@@ -106,7 +106,7 @@ onMounted(() => {
       display: flex;
       align-items: center;
       li {
-        padding: 20px;
+        padding: 12px 20px;
         color: #ffffff;
         font-size: 14px;
         cursor: pointer;

src/router/module/constRouter/index.ts

@@ -42,6 +42,16 @@ export const constRouter: any = [
           hidden: false,
         },
       },
+      {
+        path: '/professionalListProfile', // 课程
+        component: () => import('@/views/professionalListProfile/index.vue'),
+        name: 'professionalListProfile',
+        meta: {
+          icon: '',
+          title: '课程列表',
+          hidden: false,
+        },
+      },
       {
         path: '/pedagogicalReform', // 教学改革
         component: () => import('@/views/pedagogicalReform/index.vue'),

src/views/professionalListProfile/index.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+// import {} from 'vue';
+
+// const params = ref({
+//   pageNo: 1,
+//   pageSize: 7,
+//   // username: 'qiuqiu',
+//   userId: userStore.data.id,
+//   assessmenttype: '',
+//   category: '',
+//   nature: '',
+//   teacher: '',
+// })
+</script>
+
+<template>
+    <div class="view-container">
+        <div class="banner"></div>
+        <div class="container">
+
+            <div class="main-content" v-loading="0">
+                <div class="header">
+                    <div class="btn">
+                        <div class="course">
+                            <ul class="course_list">
+                                <li v-if="1" @click="" class="add_course">
+                                    <div class="plus">
+                                        <el-icon class="avatar-uploader-icon">
+                                            <Plus />
+                                        </el-icon>
+                                    </div>
+                                    <h2 class="course_name">course_name</h2>
+                                </li>
+                                <li v-for="item in 7" :key="item">
+                                    <img title="点击查看课程详情" :src="''" alt="" @click="" />
+                                    <h2 title="点击查看课程基本信息" class="course_name" @click="">
+                                        item.name
+                                    </h2>
+                                    <p class="teacher_name">讲师：item.teacher</p>
+                                    <p class="credit">
+                                        <span>item.classhours</span>
+                                        学时 |
+                                        <span>item.credit</span>
+                                        学分
+                                    </p>
+                                    <el-icon class="del" @click="">
+                                        <Delete />
+                                    </el-icon>
+                                    <el-button class="object" round plain @click="">
+                                        查看课程详情
+                                    </el-button>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
+                :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
+                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                style="margin-top: 10px; justify-content: center" /> -->
+
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.main-content {
+    width: 1440px;
+    margin: 0 auto;
+}
+
+.header {
+    width: 100%;
+    // height: 100px;
+    display: flex;
+    flex-direction: row;
+}
+
+// .btn {
+//   // display: flex;
+//   width: 50%;
+//   height: 100%;
+//   padding: 10px 0;
+//   // display: inline;
+//   // height: 40px;
+//   // margin: 20px;
+//   // padding-left: 50px;
+// }
+.search {
+    width: 50%;
+    display: flex;
+    height: 100%;
+    justify-content: flex-end;
+
+    // flex-direction: row-reverse;
+    // padding: 0 40px 0;
+    input {
+        width: 240px;
+        height: 40px;
+        border: 1px solid #dcdcdc;
+        border-radius: 60px;
+        font-size: 14px;
+    }
+}
+
+.course {
+
+    // display: flex;
+    // flex: 0 0 25%;
+    // justify-content: space-between;
+    // flex-wrap: wrap;
+    .course_list {
+        display: flex;
+        // flex: 0 0 25%;
+        // justify-content: space-between;
+        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        column-gap: 50px;
+    }
+
+    li {
+        margin: 40px 0;
+        width: 349px;
+        width: 100%;
+        height: 297px;
+        background: rgb(255, 255, 255);
+        transition: all 0.5s;
+        border-radius: 6px;
+        position: relative;
+
+        // flex: 1; /* 子元素按比例伸缩 */
+        &:hover {
+            transform: translate3d(0, -3px, 0);
+            box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
+        }
+
+        .course_name {
+            font-family: Inter-Bold;
+            color: #333;
+            font-size: 24px;
+            margin-left: 30px;
+            margin-top: 10px;
+            font-weight: bold;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        img {
+            background-color: #cccccc;
+            width: 100%;
+            height: 178px;
+            cursor: pointer;
+        }
+
+        p {
+            margin-left: 30px;
+            margin-top: 5px;
+            color: #555555;
+            font-size: 14px;
+            padding-top: 10px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+
+            span {
+                color: #0052ff;
+            }
+        }
+    }
+
+    .del {
+        position: absolute;
+        margin-left: 280px;
+        margin-top: -80px;
+        color: #0052ff;
+        cursor: pointer;
+    }
+
+    .object {
+        position: absolute;
+        margin-left: 180px;
+        margin-top: -29px;
+    }
+}
+
+.plus {
+    width: 100%;
+    height: 178px;
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    // background-position: center center;
+    .el-icon.avatar-uploader-icon {
+        font-size: 50px;
+        color: #8c939d;
+        width: 100%;
+        height: 178px;
+        margin-top: 20px;
+        text-align: center;
+    }
+}
+
+.add_course {
+    border: 2px dashed rgb(143, 139, 139);
+
+    h2 {
+        font-size: 40px;
+        text-align: center;
+        font-family: Inter-Bold;
+        color: #535050;
+        font-weight: bold;
+        margin-top: 20px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+.short-form-item {
+    width: 300px;
+    margin-right: 100px;
+}
+</style>

src/vite-env-override.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import { DefineComponent } from "vue"
+    const component: ReturnType<typeof DefineComponent>
+    export default component
+  }