课程列表

src/views/professionalListProfile/index.vue

@@ -3,21 +3,61 @@ import { ref } from 'vue';
 
 const paginationData = ref({
     pageNo: 1,
-    pageSize: 7,
-    total: 7
+    pageSize: 8,
+    total: 8
 })
 function paginationChange(currentPage: number, pageSize: number) {
 
 }
 
 // 临时的，有接口后使用接口数据
-const isPraise = ref(true)
-const isStar = ref(true)
-function handlePraise() {
-    isPraise.value = !isPraise.value
+const dataList = ref([
+    {
+        id: '1',
+        isPraise: false,
+        isStar: false
+    },
+    {
+        id: '2',
+        isPraise: false,
+        isStar: false
+    },
+    {
+        id: '3',
+        isPraise: false,
+        isStar: false
+    },
+    {
+        id: '4',
+        isPraise: false,
+        isStar: false
+    },
+    {
+        id: '5',
+        isPraise: false,
+        isStar: false
+    },
+    {
+        id: '6',
+        isPraise: false,
+        isStar: false
+    },
+    {
+        id: '7',
+        isPraise: false,
+        isStar: false
+    },
+    {
+        id: '8',
+        isPraise: false,
+        isStar: false
+    },
+])
+function handlePraise(item:any) {
+    item.isPraise = !item.isPraise
 }
-function handleStar() {
-    isStar.value = !isStar.value
+function handleStar(item:any) {
+    item.isStar = !item.isStar
 }
 </script>
 
@@ -30,15 +70,7 @@ function handleStar() {
                     <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">点击添加课程</h2>
-                                </li>
-                                <li v-for="item in 7" :key="item">
+                                <li v-for="item in dataList" :key="item.id">
                                     <img title="点击查看课程详情" :src="''" alt="" @click="" />
                                     <h2 title="点击查看课程基本信息" class="course_name" @click="">
                                         软件项目管理
@@ -52,21 +84,20 @@ function handleStar() {
                                     </p>
 
                                     <div class="parent">
-                                        <div class="div1" @click="handlePraise">
-                                            <SvgIcon v-if="isPraise" width="12px" height="12px" name="Praise"></SvgIcon>
+                                        <div class="div1" @click="handlePraise(item)">
+                                            <SvgIcon v-if="!item.isPraise" width="12px" height="12px" name="Praise">
+                                            </SvgIcon>
                                             <SvgIcon v-else width="12px" height="12px" name="PraiseFilled"
                                                 color="#f7ba2a"></SvgIcon>
                                         </div>
-                                        <div class="div2" @click="handleStar">
-                                            <SvgIcon v-if="isStar" width="12px" height="12px" name="Star"></SvgIcon>
+                                        <div class="div2" @click="handleStar(item)">
+                                            <SvgIcon v-if="!item.isStar" width="12px" height="12px" name="Star">
+                                            </SvgIcon>
                                             <SvgIcon v-else width="12px" height="12px" name="StarFilled"
                                                 color="#f7ba2a"></SvgIcon>
                                         </div>
 
                                     </div>
-                                    <el-icon class="del" @click="">
-                                        <Delete />
-                                    </el-icon>
                                     <el-button class="object" round plain @click="">
                                         查看课程详情
                                     </el-button>
@@ -77,7 +108,7 @@ function handleStar() {
                 </div>
             </div>
             <el-pagination v-model:current-page="paginationData.pageNo" v-model:page-size="paginationData.pageSize"
-                :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
+                :page-sizes="[2, 5, 8, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next "
                 :total="paginationData.total" @change="paginationChange"
                 style="margin-top: 10px; justify-content: center" />
 
@@ -93,7 +124,7 @@ function handleStar() {
     grid-column-gap: 5px;
     grid-row-gap: 0px;
     position: absolute;
-    margin-left: 245px;
+    margin-left: 280px;
     margin-top: -80px;
     color: #0052ff;
     cursor: pointer;