|
|
|
@ -27,9 +27,15 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="Page-1"> |
|
|
|
|
<el-pagination v-model:current-page="params.current" v-model:page-size="params.pageSize" |
|
|
|
|
:page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="total" |
|
|
|
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
|
|
|
|
<el-pagination |
|
|
|
|
v-model:current-page="params.current" |
|
|
|
|
v-model:page-size="params.pageSize" |
|
|
|
|
:page-sizes="[6, 8, 12, 15]" |
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
|
|
:total="total" |
|
|
|
|
@size-change="handleSizeChange" |
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
</template> |
|
|
|
@ -42,21 +48,22 @@ const container = ref() |
|
|
|
|
function handleResize() { |
|
|
|
|
const style = getComputedStyle(container.value) |
|
|
|
|
const width = Number(style.width.slice(0, -2)) |
|
|
|
|
if (width >= 350 * 4.5) container.value.style.gridTemplateColumns = "repeat(4, 350px)" |
|
|
|
|
else container.value.style.gridTemplateColumns = "repeat(auto-fill, 350px)" |
|
|
|
|
if (width >= 350 * 4.5) |
|
|
|
|
container.value.style.gridTemplateColumns = 'repeat(4, 350px)' |
|
|
|
|
else container.value.style.gridTemplateColumns = 'repeat(auto-fill, 350px)' |
|
|
|
|
} |
|
|
|
|
function debounce(func: any, delay: any) { |
|
|
|
|
let timer: any |
|
|
|
|
return function () { |
|
|
|
|
clearTimeout(timer); |
|
|
|
|
clearTimeout(timer) |
|
|
|
|
timer = setTimeout(() => { |
|
|
|
|
// @ts-ignore |
|
|
|
|
func.apply(this, arguments); |
|
|
|
|
}, delay); |
|
|
|
|
}; |
|
|
|
|
func.apply(this, arguments) |
|
|
|
|
}, delay) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const deHR = debounce(handleResize, 500) |
|
|
|
|
const myObserver = new ResizeObserver((deHR)) |
|
|
|
|
const myObserver = new ResizeObserver(deHR) |
|
|
|
|
onMounted(() => myObserver.observe(container.value)) |
|
|
|
|
// =============================== |
|
|
|
|
const total = ref(0) |
|
|
|
@ -92,7 +99,7 @@ let params = ref<CourseFavourQueryRequest>({ |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const getDatalist = async () => { |
|
|
|
|
const res = await SeCourseFavourControllerService.listPostByPageUsingPost( |
|
|
|
|
const res = await SeCourseFavourControllerService.listPostByPageUsingPost1( |
|
|
|
|
params.value, |
|
|
|
|
) |
|
|
|
|
datalist.value = res.data.records |
|
|
|
@ -121,7 +128,7 @@ const handleCurrentChange = (page: any) => { |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.example-pagination-block+.example-pagination-block { |
|
|
|
|
.example-pagination-block + .example-pagination-block { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -180,7 +187,7 @@ const handleCurrentChange = (page: any) => { |
|
|
|
|
border-bottom: 1px solid rgb(217, 217, 217); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ClassImg>img { |
|
|
|
|
.ClassImg > img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 180px; |
|
|
|
|
} |
|
|
|
@ -214,14 +221,14 @@ const handleCurrentChange = (page: any) => { |
|
|
|
|
justify-content: space-around; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Con>h3 { |
|
|
|
|
.Con > h3 { |
|
|
|
|
margin-left: 15px; |
|
|
|
|
font-size: 25px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Con>p { |
|
|
|
|
.Con > p { |
|
|
|
|
margin-left: 15px; |
|
|
|
|
margin-top: 5px; |
|
|
|
|
font-size: 13px; |
|
|
|
@ -229,14 +236,14 @@ const handleCurrentChange = (page: any) => { |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Con>p>span { |
|
|
|
|
.Con > p > span { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
margin-right: 5px; |
|
|
|
|
color: rgb(94, 188, 231); |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Con>button { |
|
|
|
|
.Con > button { |
|
|
|
|
width: 45px; |
|
|
|
|
height: 20px; |
|
|
|
|
font-size: 9px; |
|
|
|
|