odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

00

Browse Source
This commit is contained in:
clay
2022-01-15 20:55:38 +08:00
parent 5356c8b948
commit 8e9cf7b833
15 changed files with 782 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/content/components/Introduction.vue
View File

@@ -2,18 +2,10 @@
<div class="Introduction">
<el-row>
<el-col>
<div class="tab">
<router-link to="/">首页</router-link>
<span> > </span>
<router-link to="">学院概况</router-link>
<span> > </span>
<span style="color: #1956BC;font-size: 1.4rem">学院简介</span>
</div>
<div class="context">
<div class="title">{{value.title}}</div>
<div class="text" v-html="value.content"></div>
</div>
<!-- {{value}}-->
</el-col>
</el-row>
</div>
@@ -24,9 +16,15 @@ export default {
name: "Introduction",
props: {
value: {
type: String,
default: "",
type: Object,
default: {
title:"12",
content:"12"
},
},
},
data(){
return{}
}
}
</script>

109
src/views/content/components/dire_data.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<div class="dire_data">
<el-row v-for="(dire,index) in value" :key="index">
<!--正文内容-->
<el-col class="context">
<el-row class="context_el-row">
<el-col :span="2" :offset="1">
<img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
</el-col>
<el-col :span="3" class="context_name">{{ dire.name }}</el-col>
<el-col :span="16">
<hr class="context_hr">
</el-col>
<el-row v-for="(chile,index) in dire.children" :key="index">
<el-col class="name" :offset="1" :span="23">
{{ chile.name }}<span v-if="chile.children.length>1">({{chile.children.length}}人)</span>
</el-col>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div v-for="(item,index) in chile.children" :key="index">{{ item.name }}</div>
</el-col>
</el-row>
</el-row>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "dire_data",
data() {
return {
width: document.documentElement.clientWidth
}
},
props:{
value: {
type: Array,
default: [{
name: "学院",
children: [
{
name: "办公室",
children: [
{
children: [],
name: "人员1"
},
],
}
],
}],
},
},
}
</script>
<style scoped lang="scss">
.context {
margin: 3rem 2rem;
padding-bottom: 3rem;
//width: 84.3rem;
background: #FFFFFF;
.context_el-row {
margin-top: 2rem;
.context_img {
width: 2.2rem;
}
.context_name {
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1956BC;
line-height: 2.2rem;
}
.context_hr {
line-height: 2.2rem;
margin-top: 1.1rem;
border: #1956BC solid 0.1rem;
}
}
.name {
margin-top: 2rem;
font-size: 1.4rem;
font-weight: 600;
color: #1956BC;
}
.text {
font-size: 1.2rem;
color: #3C3C3C;
clear: left;
div {
float: left;
margin-top: .4rem;
width: 7.4%;
}
}
}
</style>

156
src/views/content/components/list.vue Normal file
View File

@@ -0,0 +1,156 @@
<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)}}
</div>
<div class="tw_bottoms">
{{getTime(item.publishTime)}}
</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}}
</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>
</div>
</template>
<script>
export default {
name: "list",
props:{
value: {
type: Array,
default: {
data:[{
content: "",
title: "",
publishTime: "2022-01-15 17:02:13",
imgurl: "http://sistfile.hchyun.cn/2022/01/15/b0904e59-25d4-433e-bd0f-e23940d6267d.png",
}]
},
},
},
data() {
return {
width: document.documentElement.clientWidth
}
},
methods:{
getDay(time){
let day = new Date(time).getDate();
return day
},
getTime(time){
let date = new Date(time);
return date.getFullYear() +"-" + date.getMonth()+1
}
}
}
</script>
<style scoped lang="scss">
.context {
margin: 3rem 2rem;
padding-bottom: 3rem;
//width: 84.3rem;
background: #FFFFFF;
.tw {
margin-top: 4rem;
}
.tw_img{
width: 100%;
text-align: left;
img{
width: 90%;
}
}
.tw_time {
border-right: .1rem solid #D5D5D5;
height: 10rem;
width: 10rem;
color: #1956BC;
text-align: center;
.tw_top {
height: 8rem;
width: 100%;
line-height: 8rem;
font-size: 5.2rem;
}
.tw_bottoms {
height: 2rem;
width: 100%;
font-size: 1.4rem;
}
}
.tw_context {
font-family: PingFangSC-Medium, PingFang SC;
color: #161616;
.tw_context_title {
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
font-size: 2rem;
font-weight: 600;
padding-right: 2rem;
}
.tw_context_text {
margin-top: .8rem;
font-size: 1.6rem;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:3; //显示的行
}
}
.title {
font-size: 2.4rem;
font-weight: 500;
color: #1956BC;
text-align: center;
}
.text {
margin-top: 2rem;
font-size: 1.2rem;
font-weight: 400;
color: #3C3C3C;
}
}
</style>