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

dengjie commit : 部分修改样式

Browse Source
This commit is contained in:
clay
2022-10-04 23:03:23 +08:00
parent dd6798e8ce
commit a372dff77c
13 changed files with 209 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/index/components/announcements.vue
View File

@@ -201,7 +201,7 @@ export default {
display: flex;
justify-content: center;
height: 2.3rem;
margin-top: 3.1rem;
margin-top: 2.6rem;
.more_text {
font-size: 1.6rem;
font-weight: 500;

2
src/views/index/components/bottom.vue
View File

@@ -99,7 +99,7 @@ export default {
padding-bottom: 4rem;
.table {
margin: 4rem 0 0 0;
//margin: 4rem 0 0 0;
width: 100%;
tr {

189
src/views/index/components/news_center.vue
View File

@@ -37,14 +37,12 @@
<img src="../../../assets/index/news_center/t4.png" alt="">
</div>
<div class="news_context_text">
<div class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
<div class="news_context_text-title">信息引领，勇于拼领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div>
@@ -55,14 +53,12 @@
<img src="../../../assets/index/news_center/t4.png" alt="">
</div>
<div class="news_context_text">
<div class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div>
@@ -73,14 +69,12 @@
<img src="../../../assets/index/news_center/t4.png" alt="">
</div>
<div class="news_context_text">
<div class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
</div>
</div>
@@ -91,15 +85,14 @@
<img src="../../../assets/index/news_center/t4.png" alt="">
</div>
<div class="news_context_text">
<div class="vline">
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
<div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
<div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
</div>
<div class="news_context_time">
<div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
<span class="time">2022-10-2</span>
</div>
<div class="vline"></div>
</div>
</div>
</el-col>
@@ -165,6 +158,7 @@ export default {
.el-carousel__indicators {
display: none;
}
.grid-content {
height: 1px !important;
}
@@ -173,8 +167,8 @@ export default {
<style scoped lang="scss">
.news_center {
background-image: url("../../../assets/index/news_center/sy_bj3.png");
background-size : cover;
background-repeat:no-repeat;
background-size: cover;
background-repeat: no-repeat;
//width: 100%;
height: 61rem;
@@ -249,88 +243,99 @@ export default {
background-color: #fff;
margin-top: 4rem;
//.news_context:last-child {
// .news_context_text {
// .vline {
// //border-right: none;
// }
// }
//}
.news_context {
cursor: pointer;
//width: 28rem;
width: 100%;
height: 36.9rem;
&:hover {
box-shadow: 0 0 0.7rem 0 rgba(18, 69, 155, 0.59);
}
.news_context_img {
height: 42.8%;
width: 100%;
overflow: hidden;
img {
&:hover {
transform: scale(1.3);
}
width: 100%;
transition: all 1s;
}
}
.news_context_text:last-child {
border-right: none;
}
.news_context_text {
//padding: 4rem 2rem;
padding: 4rem 0 4rem 2rem;
margin: 4rem 0 4rem 2rem;
padding-right: 2rem;
border-right: 1px solid #CCCCCC;
.vline {
height: 14rem;
border-right: 1px solid #CCCCCC;
//padding-right: 1rem;
.news_context_text-title {
width: 23.8rem;
height: 2.1rem;
font-size: 1.5rem;
.news_context_text-title {
&:hover {
color: #0040A4;
}
width: 100%;
height: 2.1rem;
font-size: 1.5rem;
font-weight: 500;
color: #262626;
line-height: 2.1rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 1; //显示的行
}
.news_context_text-content {
width: 100%;
height: 5.3rem;
font-size: 1.3rem;
font-weight: 500;
color: #777777;
line-height: 1.8rem;
letter-spacing: .1rem;
margin-top: 1.6rem;
margin-bottom: 2.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 3; //显示的行
}
.news_context_time {
display: flex;
.icon {
margin-right: .4rem;
img {
width: 1.1rem;
height: 1.1rem;
}
}
.time {
width: 6rem;
height: 1.4rem;
font-size: 1rem;
font-weight: 500;
color: #0040A4;
line-height: 2.1rem;
}
.news_context_text-content {
width: 23.8rem;
height: 5.3rem;
font-size: 1.3rem;
font-weight: 500;
color: #777777;
line-height: 1.8rem;
letter-spacing: .1rem;
margin-top: 1.6rem;
margin-bottom: 2.5rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 3; //显示的行
}
.news_context_time {
display: flex;
.icon {
margin-right: .4rem;
img {
width: 1.1rem;
height: 1.1rem;
}
}
.time {
width: 6rem;
height: 1.4rem;
font-size: 1rem;
font-weight: 500;
color: #0040A4;
line-height: 1.4rem;
}
line-height: 1.4rem;
}
}
}
}
}

271
src/views/index/components/party_building_activities.vue
View File

@@ -1,50 +1,26 @@
<template>
<div class="party_building_activities" v-bind:style="{backgroundImage:'url('+bgc+')'}">
<!--title-->
<div class="party_building_activities">
<!-- 党群工作 -->
<el-row>
<el-col :span="5">
<div class="grid-content"></div>
</el-col>
<el-col :span="14">
<div class="headline">
<div class="line_left">
<img src="../../../assets/index/party_building_activities/gangh.png" alt="">
</div>
<div class="title">
党群工作
</div>
<div class="line_right">
<img src="../../../assets/index/party_building_activities/gangh3.png" alt="">
</div>
</div>
</el-col>
</el-row>
<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>
@@ -53,82 +29,23 @@
<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">
<el-col :span="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">
<el-col :span="14">
<div class="more">
<span class="more_text">更多</span>
<img src="../../../assets/index/party_building_activities/gangduohh.png" alt="">
</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 SlideshowCard from "./slideshow_card";
import {getArticleList} from "@/api";
import {toArticle, lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";
@@ -141,20 +58,19 @@ export default {
data() {
return {
width: document.documentElement.clientWidth > 992,
listData: [],
bgc: require("../../../assets/index/party_building_activities/sy_bj3.png")
}
listData: []
};
},
created() {
this.getListData()
this.getListData();
},
methods: {
getArticle(item) {
toArticle(item, this.width)
toArticle(item, this.width);
},
lookMore(item) {
// lookMoreComment(item,this.width)
lookMoreFixedComment("N8YFxHPHwy6PyHt7J-gIDCU", this.width)
lookMoreFixedComment("N8YFxHPHwy6PyHt7J-gIDCU", this.width);
},
getListData() {
@@ -163,108 +79,77 @@ export default {
pageNum: 1,
pageSize: 6
}).then(res => {
this.listData = res.rows
})
this.listData = res.rows;
});
},
getTime(date) {
let time = new Date(date);
let year = time.getFullYear();
let month = time.getMonth() + 1
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;
}
background-image: url("../../../assets/index/announcements/sy_bj3.png");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 55.6rem;
.headline {
.headline {
width: 100%;
display: flex;
justify-content: center;
padding-top: 6.3rem;
padding-bottom: 4.4rem;
.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;
.line_left {
line-height: 4.4rem;
}
.phe_context_title:hover {
.title {
width: 12.9rem;
height: 4.4rem;
font-size: 3.1rem;
font-weight: 500;
color: #DA2D2D;
line-height: 4.4rem;
letter-spacing: .1rem;
margin: 0 1.3rem;
}
.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;
}
.line_right {
line-height: 4.4rem;
}
}
.more {
width: 100%;
display: flex;
justify-content: center;
height: 2.3rem;
margin-top: 5.1rem;
.more_text {
font-size: 1.6rem;
font-weight: 500;
color: #DA2D2D;
line-height: 2.3rem;
letter-spacing: .2rem;
}
.phe_time {
text-align: right;
font-size: 2rem;
font-weight: 500;
color: #565656;
letter-spacing: 2px;
img {
width: 2.9rem;
height: 1.4rem;
margin-left: 0.8rem;
margin-top: .5rem;
}
}
}
</style>

40
src/views/index/components/slideshow_card.vue
View File

@@ -3,23 +3,23 @@
<ul class="ul">
<li v-for="(item,index) in bannerDate" :key="index">
<div v-if="$i18n.locale === 'cn'" @click="clickTo(item.link)">
<div class="card_img" >
<div class="card_img">
<img
:src="item.imgurl"
alt=""/>
</div>
<div class="card_title">
{{item.title}}
{{ item.title }}
</div>
</div>
<div v-if="$i18n.locale === 'en'" @click="clickTo(item.enLink)">
<div class="card_img" >
<div class="card_img">
<img
:src="item.imgurl"
alt=""/>
</div>
<div class="card_title">
{{item.enTitle}}
{{ item.enTitle }}
</div>
</div>
</li>
@@ -46,7 +46,7 @@ export default {
//默认值
classArray: ["one", "two", "three", "four", "five", "six"],
// classArray: ["one", "two", "three", "four", "five"],
leftSlider: true,
leftSlider: true
},
bannerWrap: null,
time: null,
@@ -54,20 +54,20 @@ export default {
classlist: null,
leftBtn: null,
rightBtn: null,
bannerDate:[]
bannerDate: []
};
},
beforeCreate() {
banner("STCplDRCWAA3zcFE0EBTcQI").then(res=>{
this.bannerDate = res.data
})
banner("STCplDRCWAA3zcFE0EBTcQI").then(res => {
this.bannerDate = res.data;
});
},
created() {
},
methods: {
clickTo(link){
clickTo(link) {
//console.log(link)
window.location.href=link;//当前标签页
window.location.href = link;//当前标签页
},
constructor() {
this.bannerWrap = document.getElementsByClassName("banner-card")[0];
@@ -127,13 +127,13 @@ export default {
this.rightBtn.addEventListener("click", () => {
this.rightMove();
});
},
}
},
mounted() {
setTimeout(() =>{
setTimeout(() => {
this.constructor();
},1000);
},
}, 1000);
}
};
</script>
@@ -141,7 +141,7 @@ export default {
.banner-card {
width: 100%;
height: 50rem;
height: 29.4rem;
//background: #f5f5f5;
position: relative;
@@ -156,8 +156,8 @@ export default {
li {
border-radius: 2rem;
width: 40rem;
height: 40rem;
width: 26.5rem;
height: 25.4rem;
position: absolute;
top: 2.5rem;
list-style-type: none;
@@ -187,8 +187,8 @@ export default {
text-align: left;
//width: 36rem;
margin: 2rem auto;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2; //显示的行

2
src/views/index/components/undergraduate_and_graduate.vue
View File

@@ -170,7 +170,7 @@ export default {
font-size: 1.3rem;
font-weight: 500;
color: #0D52B3;
line-height: 1.8rem;
line-height: 2.3rem;
margin-right: 1.5rem;
margin-left: 2.1rem;
}