mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-16 14:26:43 +08:00
对接接口
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<div class="xcontent2-main">
|
||||
<div class="navTop">
|
||||
<div>
|
||||
<router-link to="/">首页</router-link> >
|
||||
<router-link to="/grateful">首页</router-link> >
|
||||
<span style="cursor: pointer;">下载工具</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -20,21 +20,29 @@
|
||||
<div class="modules xcontent2">
|
||||
<div class="xcontent2-main">
|
||||
<div class="modules-list" style="margin-top: 0;">
|
||||
<div style="padding: 20px 70px;border-radius: 8px 8px 0 0;" class="bgc">
|
||||
<div v-if="toolList.total > toolList.pageSize" style="padding: 20px 70px;border-radius: 8px 8px 0 0;"
|
||||
class="bgc">
|
||||
<!--内容列表内容-->
|
||||
<div v-for="(course, ccidx) in 10" :key="'cc' + ccidx" class="toolEvery">
|
||||
<div v-for="(tool, index) in toolList.list" :key="'cc' + index" class="toolEvery">
|
||||
<div class="contnet">
|
||||
MNT销量突破促经营哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
|
||||
{{ tool.courseName }}
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button>立即下载</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination :size="courseList.pageSize" :total="courseList.count" :page="courseList.pageIndex"
|
||||
@change-size="changePageSize" @change-page="loadData">
|
||||
</pagination>
|
||||
<div v-if="toolList.total > toolList.pageSize">
|
||||
<pagination :size="toolList.pageSize" :total="toolList.total" :page="toolList.pageIndex"
|
||||
@change-size="changePageSize" @change-page="loadData">
|
||||
</pagination>
|
||||
</div>
|
||||
<div class="pagination-div">
|
||||
<span class="notcoures" v-if="toolList.list.length == 0">
|
||||
<img :src="`${webBaseUrl}/images/nocase.png`" alt="">
|
||||
<h5>暂无工具~</h5>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,23 +50,36 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { toolList } from '../../api/modules/grateful';
|
||||
export default {
|
||||
data: () => {
|
||||
return {
|
||||
courseList: {
|
||||
toolList: {
|
||||
list: [],
|
||||
count: 0,
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getToolList()
|
||||
},
|
||||
methods: {
|
||||
async getToolList() {
|
||||
const result = await toolList()
|
||||
if (result.code === 200) {
|
||||
|
||||
const { total, records } = result.data
|
||||
this.toolList.list = records
|
||||
this.toolList.total = total
|
||||
}
|
||||
},
|
||||
getPic(index) {
|
||||
return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
|
||||
},
|
||||
changePageSize(pageSize) {
|
||||
this.courseList.pageSize = pageSize;
|
||||
this.toolList.pageSize = pageSize;
|
||||
},
|
||||
loadData(pindex) {
|
||||
console.log(pindex);
|
||||
@@ -104,19 +125,26 @@ export default {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bgc {
|
||||
background: linear-gradient(180deg,
|
||||
rgba(56, 125, 247, 0.2) 0%,
|
||||
rgba(166, 168, 255, 0) 100%) no-repeat;
|
||||
background-size: 100% 166px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.modules-list {
|
||||
min-height: 555px;
|
||||
// min-height: 555px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
|
||||
.bgc {
|
||||
background: linear-gradient(180deg,
|
||||
rgba(56, 125, 247, 0.2) 0%,
|
||||
rgba(166, 168, 255, 0) 100%) no-repeat;
|
||||
background-size: 100% 166px;
|
||||
border-radius: 8px;
|
||||
.pagination-div {
|
||||
text-align: center;
|
||||
padding: 70px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.toolEvery {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
|
||||
Reference in New Issue
Block a user