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

clay commit : 首页重做准备

Browse Source
This commit is contained in:
clay
2022-10-03 16:24:48 +08:00
parent ae08b72bc2
commit d059bf187a
7 changed files with 1059 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@@ -3,8 +3,8 @@ ENV = 'development'
# EBTS/开发环境
#VUE_APP_BASE_API = '/dev-api'
#VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
VUE_APP_BASE_API = 'http://sist.swjtu.edu.cn/dev-api'
VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
#VUE_APP_BASE_API = 'http://sist.swjtu.edu.cn/dev-api'
SITE_TYPE = 'NEd5n92EMIpyyBslaNqsRgE'
#VUE_APP_BASE_API = 'http://sistapi.hchyun.cn/dev-api'

13
src/views/content/components/organization.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "organization"
}
</script>
<style scoped>
</style>

13
src/views/content/index.vue
View File

@@ -103,7 +103,8 @@
<Introduction :value="contextData" v-if="type === 1"/>
<List :value="contextData" v-if="type === 2"/>
<FileList :value="contextData" v-if="type === 4"/>
<DireData :value="contextData" v-if="type === 3"/>
<DireData :value="contextData" v-if="type === 3 && organizationType == '1'"/>
<Organization :value="contextData" v-if="type === 3 && organizationType == '2'"/>
<Details :value="detailsData" v-if="type == null"/>
</el-col>
</el-row>
@@ -138,7 +139,8 @@
<Introduction :value="contextData" v-if="type === 1"/>
<List :value="contextData" v-if="type === 2"/>
<FileList :value="contextData" v-if="type === 4"/>
<DireData :value="contextData" v-if="type === 3"/>
<DireData :value="contextData" v-if="type === 3 && organizationType == '1'"/>
<Organization :value="contextData" v-if="type === 3 && organizationType == '2'"/>
<Details :value="detailsData" v-if="type == null"/>
</el-col>
</el-row>
@@ -157,6 +159,7 @@ 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 Organization from './components/organization.vue'
import Details from './components/details.vue'
import FileList from './components/file_list.vue'
import {handleTree} from "@/utils/ebts";
@@ -176,6 +179,7 @@ export default {
width: document.documentElement.clientWidth > 992,
secondId: null,
navId: null,
organizationType:"",
navList: [],
showIndex: 0,
showSecond: true,
@@ -364,6 +368,11 @@ export default {
} else if (this.type == 1) {
this.contextData = res.data
} else if (this.type == 3) {
if (res.additional == ""){
this.organizationType = "1"
}else {
this.organizationType = res.additional
}
this.contextData = handleTree(res.data, "id", "pid", null, null)
console.log(this.contextData,"this.contextData")
}

235
src/views/index/components/news_center_back.vue Normal file
View File

@@ -0,0 +1,235 @@
<script src="../../../utils/sist.js"></script>
<template>
<div class="news_center">
<div class="headline">
<div class="hr_div">
<div class="hr_line_left">
</div>
<div class="hr_dot_left">
</div>
</div>
<div class="title">
{{ $t('message.news_ceter') }}
</div>
<div class="hr_div">
<div class="hr_line_right">
</div>
<div class="hr_dot_right">
</div>
</div>
</div>
<!--录播图-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<div class="slideshow">
<el-carousel trigger="click" height="23.3vw">
<el-carousel-item v-for="(item,index) in bannerDate" :key="index">
<div v-show="$i18n.locale === 'cn'" @click="clickTo(item.link)">
<img :src="item.imgurl" alt="">
<div class="bottom_title">
<el-row>
<el-col :offset="2" :span="18">
{{ item.title }}
</el-col>
</el-row>
</div>
</div>
<div v-show="$i18n.locale === 'en'" @click="clickTo(item.enLink)">
<img :src="item.imgurl" alt="">
<div class="bottom_title">
<el-row>
<el-col :offset="2" :span="18">
{{ item.enTitle }}
</el-col>
</el-row>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
</el-row>
<!--轮播图下的新闻-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<el-row class="news">
<el-col v-for="(news,index) in newsDate" :key="index" :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
<div class="news_context" @click="getArticle(news)">
<div class="news_context_img">
<img :src="news.imgurl" alt="">
</div>
<div class="news_context_text">
{{ news.title }}
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<!--更多-->
<el-row>
<el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
<div class="grid-content"></div>
</el-col>
<el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
<div class="more" @click="lookMore(newsDate[0])">
{{ $t('message.more') }}
</div>
<!-- <div class="more_img">-->
<!-- <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
<!-- </div>-->
</el-col>
</el-row>
</div>
</template>
<script>
import {banner, getArticleList} from "@/api";
import {toArticle,lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";
export default {
name: "news_center",
data() {
return {
newsDate: [],
bannerDate: [],
width: document.documentElement.clientWidth > 992,
}
},
created() {
this.getList()
this.getBanner()
},
methods: {
clickTo(link) {
//console.log(link)
window.location.href = link;//当前标签页
},
getArticle(news){
toArticle(news,this.width)
},
lookMore(news) {
lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w",this.width)
},
getList() {
getArticleList({
type: "NEd5n92EMIpyyBslaNqsRgE",
pageNum: 1,
pageSize: 4
}).then(res => {
this.newsDate = res.rows
})
},
getBanner() {
banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
this.bannerDate = res.data
})
}
},
}
</script>
<style>
.el-carousel__indicators {
display: none;
}
</style>
<style scoped lang="scss">
@import '../css/comment.css';
.news_center {
padding-bottom: 2rem;
}
.slideshow {
width: 100%;
.el-carousel__arrow {
top: 93%;
display: block;
}
.bottom_title {
z-index: 99;
width: 100%;
height: 3.6vw;
background: #1956BC;
opacity: 0.89;
position: absolute;
bottom: 0;
line-height: 3.6vw;
font-size: 2rem;
font-family: "微软雅黑";
font-weight: 400;
color: #FFFFFF;
}
img {
width: 100%;
}
}
.news {
.news_context:hover {
box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
}
.news_context {
cursor: pointer;
width: 23rem;
height: 23rem;
margin: 3rem auto;
border-radius: 1.4rem;
border: 0.1rem solid #CAD9F3;
.news_context_img {
height: 62%;
width: 100%;
img {
width: 100%;
}
}
.news_context_text {
height: 24%;
width: 80%;
font-size: 1.6rem;
font-weight: 400;
text-align: center;
color: #262626;
margin: 0 auto;
padding: 1rem 0;
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:3; //显示的行
}
}
}
@media screen and (min-width: 1100px) and (max-width: 1400px) {
.news_context {
width: 20rem !important;
height: 20rem !important;
.news_context_img {
height: 12.5rem !important;
}
}
}
</style>

270
src/views/index/components/party_building_activities_back.vue Normal file
View File

@@ -0,0 +1,270 @@
<template>
<div class="party_building_activities" v-bind:style="{backgroundImage:'url('+bgc+')'}">
<!--title-->
<div class="headline">
<div class="hr_div">
<div class="hr_line_left">
</div>
<div class="hr_dot_left">
</div>
</div>
<div class="title">
{{ $t('message.party') }}
<!--党群工作-->
</div>
<div class="hr_div">
<div class="hr_line_right">
</div>
<div class="hr_dot_right">
</div>
</div>
</div>
<!--<el-row>-->
<!-- <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
<!-- <div class="grid-content"></div>-->
<!-- </el-col>-->
<!-- -->
<!-- <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
<!-- <div class="title">-->
<!-- &lt;!&ndash; {{ $t('message.news_center') }}&ndash;&gt;-->
<!-- 党群工作-->
<!-- </div>-->
<!-- <el-row>-->
<!-- <el-col :span="8">-->
<!-- <hr class="hr">-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="divider_text">Party Building Activities</div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <hr class="hr">-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-col>-->
<!--</el-row>-->
<!--轮播图-->
<el-row>
<el-col :xs="1" :sm="1" hidden-md-only :lg="2" :xl="3">
<div class="grid-content"></div>
</el-col>
<el-col :xs="24" :sm="22" :md="24" :lg="20" :xl="18">
<SlideshowCard/>
</el-col>
</el-row>
<!--更多-->
<div class="headline">
<!-- <div style="background: #DA2D2D;color: #E6E6E6;" class="more">-->
<!-- {{ $t('message.more') }}-->
<!-- </div>-->
<!--<div class="more_img">-->
<!-- <img src="@/assets/index/party_building_activities/sy_icon_zhdh.png" alt="">-->
<!--</div>-->
<div class="hr_div">
<div class="hr_line_left">
</div>
<div class="hr_dot_left">
</div>
</div>
<div class="hr_text" style="color:#DA2D2D;">
{{ $t('message.party_education') }}
<!--党史教育-->
</div>
<div class="hr_div">
<div class="hr_line_right">
</div>
<div class="hr_dot_right">
</div>
</div>
</div>
<!--党史教育内容-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
<div class="phe_row" v-for="(item,index) in listData" :key="index">
<el-row>
<el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
<div class="phe_img">
<img :src="item.imgurl" alt="">
</div>
</el-col>
<el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
<div class="phe_context" @click="getArticle(item)">
<div class="phe_context_title">{{ item.title }}</div>
<div class="phe_context_text" v-html="item.content">
</div>
</div>
</el-col>
<el-col :xs="22" :sm="22" :md="22" :lg="3" :xl="3">
<div class="phe_time">{{ getTime(item.publishTime) }}</div>
</el-col>
</el-row>
<hr v-if="index != listData.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
</div>
</el-col>
</el-row> <!--更多-->
<el-row>
<el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
<div class="grid-content"></div>
</el-col>
<el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
<div style="background: #DA2D2D;color: #E6E6E6;" class="more" @click="lookMore(listData[0])">
{{ $t('message.more') }}
</div>
<!-- <div class="more_img">-->
<!-- <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
<!-- </div>-->
</el-col>
</el-row>
</div>
</template>
<script>
import SlideshowCard from './slideshow_card'
import {getArticleList} from "@/api";
import {toArticle, lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";
export default {
name: "party_building_activities",
components: {
SlideshowCard
},
data() {
return {
width: document.documentElement.clientWidth > 992,
listData: [],
bgc: require("../../../assets/index/party_building_activities/sy_bj3.png")
}
},
created() {
this.getListData()
},
methods: {
getArticle(item) {
toArticle(item, this.width)
},
lookMore(item) {
// lookMoreComment(item,this.width)
lookMoreFixedComment("N8YFxHPHwy6PyHt7J-gIDCU", this.width)
},
getListData() {
getArticleList({
type: "N6CfFGz2UWpQ9Uhk3uwiJAQ",
pageNum: 1,
pageSize: 6
}).then(res => {
this.listData = res.rows
})
},
getTime(date) {
let time = new Date(date);
let year = time.getFullYear();
let month = time.getMonth() + 1
let day = time.getDate();
return year + "-" + month + "-" + day;
}
}
}
</script>
<style scoped lang="scss">
.party_building_activities {
background-image: url("../../../assets/index/party_building_activities/sy_bj3.png");
padding-top: 4rem;
padding-bottom: 2rem;
}
.headline {
.hr_line_left, .hr_line_right {
border-color: #DA2D2D !important;
}
.hr_dot_left, .hr_dot_right {
background-color: #DA2D2D !important;
}
.title {
background: #DA2D2D;
}
.divider_text {
color: #DA2D2D;
}
}
.hr {
border: .1rem solid #D13C3C;
}
.phe_row {
margin: 4rem 0;
}
.phe {
font-family: PingFangSC-Medium, PingFang SC;
margin-top: 4rem;
margin-bottom: 4rem;
.phe_img {
img {
height: 10rem;
}
}
.phe_context {
.phe_context_title {
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
cursor: pointer;
font-size: 2rem;
font-weight: 600;
color: #161616;
letter-spacing: 2px;
}
.phe_context_title:hover {
color: #DA2D2D;
}
.phe_context_text {
margin-top: 0.8rem;
font-size: 1.6rem;
height: 6rem;
color: #565656;
letter-spacing: 1px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 3; //显示的行
span {
color: #565656 !important;
}
}
}
.phe_time {
text-align: right;
font-size: 2rem;
font-weight: 500;
color: #565656;
letter-spacing: 2px;
}
}
</style>

332
src/views/index/components/scientific_research_trends_back.vue Normal file
View File

@@ -0,0 +1,332 @@
<template>
<div class="scientific_research_trends">
<!--title-->
<div class="headline">
<div class="hr_div">
<div class="hr_line_left">
</div>
<div class="hr_dot_left">
</div>
</div>
<div class="title">
{{ $t('message.research') }}
<!--科学研究-->
</div>
<div class="hr_div">
<div class="hr_line_right">
</div>
<div class="hr_dot_right">
</div>
</div>
</div>
<!--<el-row>-->
<!-- <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
<!-- <div class="grid-content"></div>-->
<!-- </el-col>-->
<!-- <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
<!-- <div class="title">-->
<!-- &lt;!&ndash; {{ $t('message.news_center') }}&ndash;&gt;-->
<!-- 科学研究-->
<!-- </div>-->
<!-- <el-row>-->
<!-- <el-col :span="8">-->
<!-- <hr class="hr">-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="divider_text">Scientific research trends</div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <hr class="hr">-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-col>-->
<!--</el-row>-->
<!--科学研究新闻内容-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col class="scientific_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<el-row>
<el-col v-for="(item,index) in scientificData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<div @click="getArticle(item)">
<el-row class="scientific_context_text">
<el-col :span="2" class="img">
<img v-if="index == 0" src="@/assets/index/scientific_research_trends/sy_icon_bh1.png" alt="">
<img v-if="index == 1" src="@/assets/index/scientific_research_trends/sy_icon_bh2.png" alt="">
<img v-if="index == 2" src="@/assets/index/scientific_research_trends/sy_icon_bh3.png" alt="">
<img v-if="index == 3" src="@/assets/index/scientific_research_trends/sy_icon_bh4.png" alt="">
<img v-if="index == 4" src="@/assets/index/scientific_research_trends/sy_icon_bh5.png" alt="">
<img v-if="index == 5" src="@/assets/index/scientific_research_trends/sy_icon_bh6.png" alt="">
<img v-if="index == 6" src="@/assets/index/scientific_research_trends/sy_icon_bh7.png" alt="">
<img v-if="index == 7" src="@/assets/index/scientific_research_trends/sy_icon_bh8.png" alt="">
<img v-if="index == 8" src="@/assets/index/scientific_research_trends/sy_icon_bh9.png" alt="">
<img v-if="index == 9" src="@/assets/index/scientific_research_trends/sy_icon_bh10.png" alt="">
</el-col>
<el-col :span="16" class="text">{{ item.title }}</el-col>
<el-col :span="4">
<div class="time">{{ parseTime(item.publishTime) }}</div>
<!-- <div class="time">{{ item.publishTime }}</div>-->
</el-col>
</el-row>
<div class="scientific_context_divider">
<hr v-if="index < 8" style="border: 0.1rem solid #E6E6E6;">
<hr v-if="!width && index == 8" style="border: 0.1rem solid #E6E6E6;">
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<!--更多-->
<div class="headline">
<div style="background: #FFFFFF;color: #1956BC;" class="more" @click="lookMore('b4Lm82Ct_eaF2u5XDABv0TM')">
{{ $t('message.more') }}
</div>
<div class="hr_div">
<div class="hr_line_left">
</div>
<div class="hr_dot_left">
</div>
</div>
<div class="hr_text" style="color:#E6E6E6;">
{{ $t('message.academic') }}
<!--学术交流-->
</div>
<div class="hr_div">
<div class="hr_line_right">
</div>
<div class="hr_dot_right">
</div>
</div>
</div>
<!--学术交流-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col class="academia_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<el-row>
<el-col v-for="(item,index) in academiaData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<div @click="getArticle(item)">
<el-row class="academia_context_text">
<el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
</el-col>
<el-col :span="16" class="text">{{item.title}}</el-col>
<el-col :span="4">
<div class="time">{{ parseTime(item.publishTime) }}</div>
</el-col>
</el-row>
<div class="academia_context_divider">
<hr v-if="index < 4" style="border: 0.1rem solid #E6E6E6;">
<hr v-if="!width && index == 4" style="border: 0.1rem solid #E6E6E6;">
</div>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<!--更多-->
<el-row>
<el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
<div class="grid-content"></div>
</el-col>
<el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
<div style="background: #FFFFFF;color: #1956BC;" class="more" @click="lookMore('47sdOe8NQs0B4EHmM-wFWjQ')">
{{ $t('message.more') }}
</div>
<!-- <div class="more_img">-->
<!-- <img src="@/assets/index/scientific_research_trends/sy_icon_zhdb.png" alt="">-->
<!-- </div>-->
</el-col>
</el-row>
</div>
</template>
<script>
import {getArticleList, info} from "@/api";
import {parseTime} from '@/utils/ebts'
import {toArticle,lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";
export default {
name: "scientific_research_trends",
data() {
return {
width: document.documentElement.clientWidth > 992,
scientificData: [],
academiaData: [],
}
},
created() {
this.getScientificList()
this.getAcademiaList()
},
methods: {
getArticle(news){
toArticle(news,this.width)
},
lookMore(id) {
lookMoreFixedComment(id,this.width)
},
getScientificList() {
getArticleList({
type: "STCplDRCWAA3zcFE0EBTcQI",
pageNum: 1,
pageSize: 10
}).then(res => {
this.scientificData = res.rows
})
},
getAcademiaList() {
getArticleList({
type: "zpUhQJwnjHyJBqbvnWxcqwM",
pageNum: 1,
pageSize: 6
}).then(res => {
this.academiaData = res.rows
})
},
parseTime(time) {
return parseTime(time, '{y}-{m}-{d}')
}
}
}
</script>
<style scoped lang="scss">
@import '../css/comment.css';
.scientific_research_trends {
background-image: url("../../../assets/index/scientific_research_trends/sy_bj2.png");
padding-top: 4rem;
padding-bottom: 2rem;
}
.headline {
.title {
background: #FFFFFF;
color: #1956BC;
}
.divider_text {
font-size: 2rem;
font-weight: 500;
color: #FFFFFF;
}
}
.scientific_context {
background: rgba(255, 255, 255, 0.9);
border-radius: 2.4rem;
padding: 2rem 0;
.scientific_context_text {
margin-top: 2rem;
color: #1956BC;
padding-left: 4rem;
.img {
img {
width: 2.6rem;
}
}
.text {
cursor: pointer;
margin-left: 1rem;
font-size: 1.8rem;
font-weight: 500;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.time {
text-align: center;
font-size: 1.2rem;
font-family: "微软雅黑";
font-weight: 400;
padding: .2rem .5rem;
width: 7.2rem;
height: 2.2rem;
line-height: 2.2rem;
border-radius: 1.1rem;
border: 0.1rem solid #1956BC;
margin-left: 2rem;
}
}
.scientific_context_divider {
padding-left: 4rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
}
.academia_context {
background: rgba(255, 255, 255, 0.9);
padding: 2rem 0;
.academia_context_divider {
padding-left: 4rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
.academia_context_text {
margin-top: 2rem;
color: #1956BC;
padding-left: 4rem;
.img {
img {
width: 2.6rem;
}
}
.text {
cursor: pointer;
margin-left: 1rem;
font-size: 1.8rem;
font-weight: 500;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.time {
font-size: 1.2rem;
font-family: "微软雅黑";
font-weight: 400;
color: #1956BC;
line-height: 2.4rem;
}
}
}
@media screen and (min-width: 1100px) and (max-width: 1400px) {
.scientific_context_text {
padding-left: 2rem !important;
.time {
margin-left: 2rem !important;
}
}
.academia_context_text {
padding-left: 2rem !important;
.time {
margin-left: 2rem !important;
}
}
}
</style>

196
src/views/index/components/teaching_student_back.vue Normal file
View File

@@ -0,0 +1,196 @@
<template>
<div class="teaching_student">
<!--title-->
<div class="headline">
<div class="hr_div">
<div class="hr_line_left">
</div>
<div class="hr_dot_left">
</div>
</div>
<div class="title">
{{ $t('message.teaching_work') }}
<!--教学工作-->
</div>
<div class="hr_div">
<div class="hr_line_right">
</div>
<div class="hr_dot_right">
</div>
</div>
</div>
<!--教学工作内容-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
<div class="tw" v-for="(item,index) in listData" :key="index" @click="getArticle(item)">
<el-row>
<el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
<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="19" :sm="19" :md="15" :lg="18" :xl="18">
<div class="tw_context">
<div class="tw_context_title">
{{item.title}}
</div>
<div class="tw_context_text" style="color:#757575 !important;" v-html="item.content"></div>
</div>
</el-col>
<el-col v-show="width" :md="3" :lg="3" :xl="3">
<div class="tw_img">
<img :src="item.imgurl" alt="">
</div>
</el-col>
</el-row>
<hr v-if="index != listData.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
</div>
</el-col>
</el-row>
<!--更多-->
<el-row>
<el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
<div class="grid-content"></div>
</el-col>
<el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
<div class="more" @click="lookMore(listData[0])">
{{ $t('message.more') }}
</div>
<!-- <div class="more_img">-->
<!-- <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
<!-- </div>-->
</el-col>
</el-row>
</div>
</template>
<script>
import {getArticleList} from "@/api";
import {toArticle,lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";
export default {
name: "teaching_student",
data(){
return{
width:document.documentElement.clientWidth>992,
listData:[]
}
},
created() {
this.getListData()
},
methods:{
getArticle(news){
toArticle(news,this.width)
},
lookMore(news) {
// lookMoreComment(news,this.width)
lookMoreFixedComment("KW_T7dJ2lt5sC-RJZSnPtk0",this.width)
},
getListData(){
getArticleList({
type: "9GhKyWFMk4aHEZMNVFcB4QU",
pageNum: 1,
pageSize:5
}).then(res => {
this.listData = res.rows
})
},
getDay(time){
return new Date(time).getDate()
},
getTime(date){
let time = new Date(date);
let year = time.getFullYear();
let month = time.getMonth() + 1
let day = time.getDate();
return year + "-" + month + "-" + day;
}
}
}
</script>
<style scoped lang="scss">
@import '../css/comment.css';
.teaching_student{
margin-top: 4rem;
}
.tw {
margin-top: 4rem;
.tw_time {
border-right: .3rem 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 {
width: 95%;
font-family: PingFangSC-Medium, PingFang SC;
color: #161616;
.tw_context_title {
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
font-size: 2rem;
cursor:pointer;
font-weight: 600;
padding-right: 2rem;
}
.tw_context_text {
margin-top: .8rem;
font-size: 1.6rem;
height: 6.5rem;
font-weight: 400;
color: #757575 !important;
letter-spacing: 1px;
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:3; //显示的行
}
}
.tw_img {
width: 7vw;
img {
width: 100%;
}
}
}
</style>