You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
305 lines
8.4 KiB
305 lines
8.4 KiB
<template>
|
|
<div style="width: 100%;height: 100%;background-color: #00173a">
|
|
<headInfo></headInfo>
|
|
<!-- 这是内容界面 -->
|
|
<div class="content">
|
|
<div class="leftContent">
|
|
<div class="leftBox1">
|
|
<div style="width: 50%;margin: 0 auto;">
|
|
<p style="font-size: 1vw;">Hi,{{ userName }}~</p>
|
|
<p style="font-size: 0.7vw;">欢迎使用课程辅助系统</p>
|
|
</div>
|
|
</div>
|
|
<div class="leftBox2">
|
|
<div class="muluBox">
|
|
<img src="../assets/img/leftBox.png" style="width: 100%;object-fit: contain;z-index: 1;position: absolute;">
|
|
<div class="muluList">
|
|
<div v-for="item in mulu" :key="item" >
|
|
<div class="oneMulu" v-if="page!=item" @click="goInfo(item.info)">
|
|
<div style="width: 80%;text-align: center;">{{ item.name }}</div>
|
|
<img src="../assets/img/jiantou.png"
|
|
style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 13%;">
|
|
</div>
|
|
<div class="oneMuluXuan" v-else >
|
|
<div style="width: 72%;text-align: center;" >{{ item.name }}</div>
|
|
<img src="../assets/img/jiantou.png"
|
|
style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 8%;" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightContent">
|
|
<img src="../assets/img/rightBox.png"
|
|
style="height: 98%;width: 100%;margin-top: 1%;position: absolute;z-index: 1;">
|
|
<div class="rigthHeadInfo" style="position: relative;">
|
|
<div
|
|
style="display: flex;flex-direction: row;position: absolute;z-index: 1;margin-top: 2.9vw;margin-left: 3%;">
|
|
<div v-for="item in typeList" :key="item" style="position: relative;margin-right: 1vw;"
|
|
@click="changeType(item)">
|
|
<img src="../assets/img/typeHead.png" style="width: 7vw;object-fit: contain;">
|
|
<div style="position: absolute;z-index: 12121;color: #ffffff;top: 0.3vw;left: 1.8vw;">{{ item }}</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="width: 94%;height:3vw;position: absolute;z-index: 1;top: 4.9vw;left: 3%;background-color: #0c3068;box-shadow: 0px -9px 10px 0px rgb(75,230,255);"></div>
|
|
<!-- <img src="../assets/img/rightHead.png"-->
|
|
<!-- style="width: 96%;height:5vw;position: absolute;z-index: 1;top: 3.1vw;left: 2%;">-->
|
|
<div style="width: 94.4%;height: 2.9vw;position: absolute;z-index: 2;margin-left: 2.6%;top: 5vw;">
|
|
<div
|
|
style="width: 100%;height: 100%;display: flex;flex-direction: row;line-height: 2.9vw;text-align: center;color: #ffffff;">
|
|
<div style="width: 10%;">序号</div>
|
|
<div style="width: 20%;">标题</div>
|
|
<div style="width: 60%;">图片</div>
|
|
<div style="width: 10%;">详情</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rightList">
|
|
<img src="../assets/img/rightList.png" style="width: 100%;height: 95%;position: absolute;z-index: 1;"/>
|
|
<div class="rightListContent">
|
|
<div class="oneRight" v-for="item in contentList" :key="item">
|
|
<div style="width: 8%;">{{ item.id }}</div>
|
|
<div style="width: 22%;">{{ item.name }}</div>
|
|
<div style="width: 60%;">图片</div>
|
|
<div style="width: 10%;text-decoration: underline;font-style: italic;">点击查看详情</div>
|
|
</div>
|
|
</div>
|
|
<div class="pageList">
|
|
<div style="float: left;margin-right: 0.1vw;" @click="choosePage(onePagesList[0]-1)">...</div>
|
|
<div v-for="item in onePagesList" :key="item" @click="choosePage(item)">
|
|
<div style="width: 1.4vw;height: 1.4vw;border-radius: 50%;background-color: #082e56;margin-top: 0.25vw;font-size: 0.5vw;
|
|
text-align: center;line-height: 1.6vw;margin-left: 1vw;margin-right: 1vw; box-shadow: inset 0 0 14px 1px rgb(75,230,255);">
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div style="float: left;margin-left: 0.1vw;">...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 3%;position: fixed;bottom: 0px;">
|
|
<foot></foot>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import headInfo from '@/components/Head.vue';
|
|
import Foot from "@/components/Foot.vue";
|
|
import {getDocList} from "@/api/kcInfo";
|
|
|
|
export default {
|
|
// eslint-disable-next-line vue/multi-word-component-names
|
|
name: 'TWInfo',
|
|
components: {Foot, headInfo},
|
|
data() {
|
|
return {
|
|
userName: "",
|
|
userType:0,
|
|
mulu: [
|
|
{id: 0, name: "图文资源", info: "TwInfo"},
|
|
{id: 1, name: "视频资源", info: "SpInfo"},
|
|
{id: 2, name: "动画显示", info: "DhInfo"},
|
|
{id: 3, name: "计算模块", info: "JsInfo"},
|
|
{id: 4, name: "知识图谱", info: "Graph"},
|
|
{id: 4, name: "帮助文档", info: "Help"}
|
|
],
|
|
page: "图文认知",
|
|
typeList: ["海洋大气", "海洋文学", "海洋地理", "复杂水声", "复杂电磁"],
|
|
contentList: [],
|
|
selectName: "",
|
|
twType: "",
|
|
pageSize: 6,
|
|
pageNum: 1,
|
|
total: 0,
|
|
totalPage: 0,
|
|
pagesList: [],
|
|
onePagesList: [],
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
goInfo(info){
|
|
console.log(info)
|
|
this.$router.push('/'+info)
|
|
},
|
|
changeType(item) {
|
|
this.twType = item;
|
|
this.getContentList();
|
|
},
|
|
choosePage(item) {
|
|
console.log(item);
|
|
this.pageNum = item;
|
|
this.getContentList();
|
|
},
|
|
getContentList() {
|
|
var data = {
|
|
name: this.selectName,
|
|
twType: this.twType,
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize
|
|
}
|
|
getDocList(data).then((res) => {
|
|
console.log(res);
|
|
this.contentList = res.data.list;
|
|
this.total = res.data.total;
|
|
this.totalPage = res.data.totalPages;
|
|
|
|
var aaa = 0;
|
|
this.onePagesList = [];
|
|
this.pagesList = [];
|
|
if (this.pageNum < this.totalPage - 3) {
|
|
|
|
for (let i = this.pageNum; i <= this.totalPage; i++) {
|
|
|
|
this.pagesList.push(i);
|
|
this.onePagesList.push(i);
|
|
aaa = aaa + 1;
|
|
console.log(aaa);
|
|
if (aaa == 4) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
console.log(this.onePagesList)
|
|
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.userType = localStorage.getItem("type");
|
|
this.userName = localStorage.getItem("name");
|
|
this.getContentList();
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 86%;
|
|
}
|
|
|
|
.leftContent {
|
|
width: 14%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
.leftBox1 {
|
|
width: 100%;
|
|
height: 10%;
|
|
margin-top: 12%;
|
|
color: #7cdeff;
|
|
}
|
|
|
|
.leftBox2 {
|
|
width: 100%;
|
|
height: 90%;
|
|
|
|
}
|
|
|
|
.muluBox {
|
|
margin: 3% 14%;
|
|
height: 92%;
|
|
width: 72%;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.muluList {
|
|
width: 100%;
|
|
height: 90%;
|
|
//background-color: #7cdeff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
z-index: 2;
|
|
margin-top: 20%;
|
|
|
|
}
|
|
|
|
.oneMulu {
|
|
width: 80%;
|
|
height: 2.5vw;
|
|
line-height: 2.5vw;
|
|
font-size: 0.9vw;
|
|
|
|
border-bottom: 1px solid #0d3455;
|
|
margin-left: 10%;
|
|
color: #d1d3d7;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.oneMuluXuan {
|
|
background-image: url("../assets/img/xuan.png");
|
|
width: 90%;
|
|
height: 2.5vw;
|
|
line-height: 2.5vw;
|
|
font-size: 0.9vw;
|
|
color: #d1d3d7;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-left: 10%;
|
|
}
|
|
|
|
|
|
.rightContent {
|
|
width: 84%;
|
|
height: 100%;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
.rigthHeadInfo {
|
|
width: 100%;
|
|
}
|
|
|
|
.rightList {
|
|
width: 94.6%;
|
|
height: 76%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
//background-color: #42b983;
|
|
margin-top: 11%;
|
|
margin-left: 2.6%;
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
.rightListContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 1%;
|
|
|
|
}
|
|
|
|
.oneRight {
|
|
width: 98%;
|
|
height: 5vw;
|
|
line-height: 5vw;
|
|
//background-color: #42b983;
|
|
margin: 0 1%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.pageList {
|
|
height: 1.5vw;
|
|
width: 20%;
|
|
//background-color: pink;
|
|
margin: 0 40%;
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: -0.5%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
|