11
This commit is contained in:
clay
86
src/views/content/components/details.vue
Normal file
86
src/views/content/components/details.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="details">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<div class="context">
|
||||
<div class="title">{{ value.title }}</div>
|
||||
<div class="details_title">测试</div>
|
||||
|
||||
<div class="text" v-html="value.content"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Introduction",
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: {
|
||||
title: "12",
|
||||
content: "12"
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details_title{
|
||||
font-size: 1.2rem;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #B4B4B4;
|
||||
line-height: 1.7rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tab {
|
||||
margin-left: 1.9rem;
|
||||
margin-top: 1.5rem;
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem !important;
|
||||
}
|
||||
|
||||
.context {
|
||||
margin: 3rem 4rem;
|
||||
|
||||
.title {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 500;
|
||||
color: #1956BC;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: #3C3C3C;
|
||||
word-break: break-word; /* 文本行的任意字内断开 */
|
||||
word-wrap: break-word; /* IE */
|
||||
white-space: -moz-pre-wrap; /* Mozilla */
|
||||
white-space: -hp-pre-wrap; /* HP printers */
|
||||
white-space: -o-pre-wrap; /* Opera 7 */
|
||||
white-space: -pre-wrap; /* Opera 4-6 */
|
||||
white-space: pre; /* CSS2 */
|
||||
white-space: pre-wrap; /* CSS 2.1 */
|
||||
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
|
||||
pre {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +1,68 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<!--{{value}}-->
|
||||
<el-row>
|
||||
<!--正文内容-->
|
||||
<el-col class="context">
|
||||
<div v-for="(item,index) in value.data" class="tw">
|
||||
<el-row>
|
||||
<el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
|
||||
<div class="tw_time">
|
||||
<div class="tw_top">
|
||||
{{getDay(item.publishTime)}}
|
||||
<!--{{value}}-->
|
||||
<div>
|
||||
<el-row>
|
||||
<!--正文内容-->
|
||||
<el-col class="context">
|
||||
<div v-for="(item,index) in value.data" class="tw">
|
||||
<el-row>
|
||||
<el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
|
||||
<div class="tw_time">
|
||||
<div class="tw_top">
|
||||
{{ getDay(item.publishTime) }}
|
||||
</div>
|
||||
<div class="tw_bottoms">
|
||||
{{ getTime(item.publishTime) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw_bottoms">
|
||||
{{getTime(item.publishTime)}}
|
||||
</el-col>
|
||||
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
|
||||
<div class="tw_context">
|
||||
<div class="tw_context_title" @click="getContext(item)">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="tw_context_text" v-html="item.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
|
||||
<div class="tw_context">
|
||||
<div class="tw_context_title">
|
||||
{{item.title}}
|
||||
</el-col>
|
||||
<el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
|
||||
<div class="tw_img">
|
||||
<img :src="item.imgurl" alt="">
|
||||
</div>
|
||||
<div class="tw_context_text" v-html="item.content"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
|
||||
<div class="tw_img">
|
||||
<img :src="item.imgurl" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<hr v-if="index != value.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<hr v-if="index != value.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
<el-col class="pagination_p">
|
||||
<el-pagination class="pagination"
|
||||
:small="small"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="value.pageNum"
|
||||
:page-size="value.data.length"
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="value.total">
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getNode} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "list",
|
||||
props:{
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
type: Object,
|
||||
default: {
|
||||
data:[{
|
||||
data: [{
|
||||
content: "",
|
||||
title: "",
|
||||
publishTime: "2022-01-15 17:02:13",
|
||||
@@ -55,17 +73,40 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: document.documentElement.clientWidth
|
||||
width: document.documentElement.clientWidth,
|
||||
small:document.documentElement.clientWidth<=992
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getDay(time){
|
||||
methods: {
|
||||
getContext(context){
|
||||
if (this.width <=992){
|
||||
this.$router.push("/mobile/" + this.value.secondId +"/" +this.value.navId+"?id="+context.id);
|
||||
}else {
|
||||
this.$router.push("/pc/" + this.value.secondId +"/" +this.value.navId+"?id="+context.id);
|
||||
}
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.value.pageNum = val
|
||||
let data = {
|
||||
id: this.value.navId,
|
||||
pageNum: val,
|
||||
pageSize: 4
|
||||
}
|
||||
getNode(data).then(res => {
|
||||
this.value.data = res.rows
|
||||
this.value.total = res.total
|
||||
})
|
||||
},
|
||||
getDay(time) {
|
||||
let day = new Date(time).getDate();
|
||||
return day
|
||||
},
|
||||
getTime(time){
|
||||
getTime(time) {
|
||||
let date = new Date(time);
|
||||
return date.getFullYear() +"-" + date.getMonth()+1
|
||||
return date.getFullYear() + "-" + date.getMonth() + 1
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -83,13 +124,15 @@ export default {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.tw_img{
|
||||
.tw_img {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.tw_time {
|
||||
border-right: .1rem solid #D5D5D5;
|
||||
height: 10rem;
|
||||
@@ -112,15 +155,15 @@ export default {
|
||||
}
|
||||
|
||||
.tw_context {
|
||||
|
||||
cursor: pointer;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
color: #161616;
|
||||
|
||||
|
||||
.tw_context_title {
|
||||
overflow:hidden; //超出的文本隐藏
|
||||
text-overflow:ellipsis; //溢出用省略号显示
|
||||
white-space:nowrap; //溢出不换行
|
||||
overflow: hidden; //超出的文本隐藏
|
||||
text-overflow: ellipsis; //溢出用省略号显示
|
||||
white-space: nowrap; //溢出不换行
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
padding-right: 2rem;
|
||||
@@ -133,9 +176,9 @@ export default {
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display:-webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp:3; //显示的行
|
||||
display: -webkit-box; //作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: 3; //显示的行
|
||||
}
|
||||
}
|
||||
|
||||
@@ -153,4 +196,13 @@ export default {
|
||||
color: #3C3C3C;
|
||||
}
|
||||
}
|
||||
.pagination_p{
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.pagination{
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "new_list"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -4,10 +4,10 @@
|
||||
<el-col :span="24">
|
||||
<!--首页图片-->
|
||||
<div class="top">
|
||||
<span v-if="bgImage != ''">
|
||||
<span v-if="bgImage != null">
|
||||
<img :src="bgImage" alt="">
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-if="bgImage == null">
|
||||
<img src="@/assets/school_profile/bj123.png" alt="">
|
||||
</span>
|
||||
</div>
|
||||
@@ -18,7 +18,7 @@
|
||||
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
<el-col v-show="width>=992" :md="6" :lg="6" :xl="4">
|
||||
<el-col v-show="width" :md="6" :lg="6" :xl="4">
|
||||
<div class="left_lab" ref="lab">
|
||||
<div class="lab">
|
||||
<div v-for="(nav,index) in navList" class="lab_div">
|
||||
@@ -59,23 +59,25 @@
|
||||
<Introduction :value="contextData" v-if="type == 1"/>
|
||||
<List :value="contextData" v-if="type == 2"/>
|
||||
<DireData :value="contextData" v-if="type == 3"/>
|
||||
<Details :value="detailsData" v-if="type == null"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</el-col>
|
||||
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
|
||||
<div class="grid-content"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getNode,crumbs} from "@/api";
|
||||
import {getNode, crumbs, article} from "@/api";
|
||||
import Introduction from './components/Introduction.vue'
|
||||
import List from './components/list.vue'
|
||||
import DireData from './components/dire_data.vue'
|
||||
import Details from './components/details.vue'
|
||||
import {handleTree} from "@/utils/ebts";
|
||||
|
||||
export default {
|
||||
@@ -84,73 +86,150 @@ export default {
|
||||
Introduction,
|
||||
List,
|
||||
DireData,
|
||||
Details
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: document.documentElement.clientWidth,
|
||||
width: document.documentElement.clientWidth > 992,
|
||||
secondId: null,
|
||||
navId: null,
|
||||
navList: [],
|
||||
showIndex: 0,
|
||||
contextData: {},
|
||||
type: 2,
|
||||
bgImage:"",
|
||||
crumbs:{},
|
||||
bgImage: null, crumbs: {
|
||||
"two": {
|
||||
"title": "学院领导",
|
||||
},
|
||||
"one": {
|
||||
"title": "学院概况",
|
||||
}
|
||||
},
|
||||
detailsData: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
this.getNav()
|
||||
console.log("触发了 $route")
|
||||
let arcId = this.$route.params && this.$route.query.id
|
||||
console.log(arcId)
|
||||
if (arcId != undefined) {
|
||||
this.getContext(arcId)
|
||||
}
|
||||
let id = this.$route.params && this.$route.params.secondId
|
||||
this.navId = this.$route.params && this.$route.params.navId;
|
||||
try {
|
||||
this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
|
||||
} catch (e) {
|
||||
}
|
||||
if (this.secondId == id) {
|
||||
for (let i = 0; i < this.navList.length; i++) {
|
||||
if (this.navId == this.navList[i].encodeId) {
|
||||
this.showIndex = i
|
||||
this.getContent(this.navList[i])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.getNav()
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getNav()
|
||||
crumbs(this.navId).then(res=>{
|
||||
crumbs(this.secondId).then(res => {
|
||||
this.crumbs = res.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getContext(arcId) {
|
||||
article(arcId).then(res => {
|
||||
console.log(res);
|
||||
this.detailsData = res.data.data
|
||||
this.type = null
|
||||
})
|
||||
},
|
||||
getNav() {
|
||||
console.log("触发了 getNav")
|
||||
this.secondId = this.$route.params && this.$route.params.secondId;
|
||||
this.navId = this.$route.params && this.$route.params.navId;
|
||||
this.navList = []
|
||||
getNode({id: this.navId}).then(res => {
|
||||
getNode({id: this.secondId}).then(res => {
|
||||
this.navList = res.data
|
||||
try {
|
||||
this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
|
||||
}catch (e) {
|
||||
setTimeout(() => {
|
||||
this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
|
||||
}, 100);
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
this.getContent(this.navList[0])
|
||||
for (let i = 0; i < this.navList.length; i++) {
|
||||
if (this.navId == this.navList[i].encodeId) {
|
||||
this.showIndex = i
|
||||
}
|
||||
}
|
||||
let arcId = this.$route.params && this.$route.query.id
|
||||
if (arcId != undefined) {
|
||||
this.getContext(arcId)
|
||||
} else {
|
||||
if (this.navId == undefined) {
|
||||
this.getContent(this.navList[0])
|
||||
} else {
|
||||
this.getContent(this.navList[this.showIndex])
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
getContent(menu) {
|
||||
this.type = menu.type
|
||||
this.contextData = null
|
||||
this.bgImage = menu.link
|
||||
|
||||
getNode({id: menu.encodeId}).then(res => {
|
||||
if (this.type == 2){
|
||||
let data = null
|
||||
if (this.type == 2) {
|
||||
data = {
|
||||
id: menu.encodeId,
|
||||
pageNum: 1,
|
||||
pageSize: 4
|
||||
}
|
||||
} else {
|
||||
data = {
|
||||
id: menu.encodeId,
|
||||
}
|
||||
}
|
||||
getNode(data).then(res => {
|
||||
if (this.type == 2) {
|
||||
this.contextData = {
|
||||
data:res.rows,
|
||||
total:res.total
|
||||
data: res.rows,
|
||||
total: res.total,
|
||||
pageNum: data.pageNum,
|
||||
navId: this.navId,
|
||||
secondId: this.secondId,
|
||||
}
|
||||
}else if (this.type == 1){
|
||||
} else if (this.type == 1) {
|
||||
this.contextData = res.data
|
||||
}else if (this.type == 3){
|
||||
this.contextData = handleTree(res.data, "id", "pid",null,null)
|
||||
} else if (this.type == 3) {
|
||||
this.contextData = handleTree(res.data, "id", "pid", null, null)
|
||||
}
|
||||
})
|
||||
},
|
||||
navClick(nav, index) {
|
||||
if (index != this.showIndex) {
|
||||
this.showIndex = index
|
||||
this.type = nav.type
|
||||
this.getContent(nav)
|
||||
}
|
||||
//if (index != this.showIndex) {
|
||||
this.showIndex = index
|
||||
this.type = nav.type
|
||||
this.$router.push("/pc/" + this.secondId + "/" + nav.encodeId);
|
||||
//this.getContent(nav)
|
||||
//}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.left_lab {
|
||||
margin-left: 4rem;
|
||||
|
||||
Reference in New Issue
Block a user