intellioa
/
super-fusion-platform
mirror of http://10.10.14.221/feiliming/oa-project-vue.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity

党建引领中心静态页面（无轮播图）

Browse Source
init
zhusiyu 3 years ago
parent e54a8b1175
commit fa433eb612
4 changed files with 435 additions and 18 deletions
Show Stats Download Patch File Download Diff File

168
src/views/screenAdaptation/pages/partyCenter/brandCreation.vue
Unescape View File

@ -1,23 +1,181 @@
<template> <template>
<CommonBox title="品牌创建" class="party-center-brand-creation-style"></CommonBox> <CommonBox title="品牌创建" class="party-center-brand-creation-style">
<div class="brandCreat">
<a-row type="flex" justify="space-between" style="margin-bottom: 13px;">
<a-col style="width: 48.8%;">
<img src="./images/topBigPic1.png" class="rowImg">
</a-col>
<a-col style="width: 48.8%;">
<img src="./images/topBigPic2.png" class="rowImg">
</a-col>
</a-row>
<a-row type="flex" justify="space-between" style="margin-bottom: 30px;">
<a-col style="width: 23.1%">
<img src="./images/topSmallPic1.png" class="rowImg">
</a-col>
<a-col style="width: 23.1%">
<img src="./images/topSmallPic2.png" class="rowImg">
</a-col>
<a-col style="width: 23.1%">
<img src="./images/topSmallPic3.png" class="rowImg">
</a-col>
<a-col style="width: 23.1%">
<img src="./images/topSmallPic4.png" class="rowImg">
</a-col>
</a-row>
<div class="brandList">
<vue-scroll :ops="listScroll" :style="showPage?'height:35rem':'height:35rem'" class="score-list-div">
<a-list item-layout="horizontal" :data-source="brandList">
<a-list-item slot="renderItem" slot-scope="item" class="listItem">
<a-avatar :src="item.avatar"/>
<p class="p1">
<span style="width: 7px;height: 7px;border-radius: 50%;background: #fff;margin-left: -5px;display: inline-block;"></span>
{{item.title}}</p>
<br>
<p class="p2">{{item.time}}</p>
</a-list-item>
</a-list>
</vue-scroll>
</div>
</div>
</CommonBox>
</template> </template>
<script> <script>
/* /*
* 品牌创建 * 品牌创建
* */ * */
import {List, Icon, Avatar, Row, Col} from 'ant-design-vue';
import CommonBox from '../secondPages/commonBox.vue'; import CommonBox from '../secondPages/commonBox.vue';
export default{ export default{
data(){ data(){
return {} return {
listScroll: this.StaticParams.scrollOption,
showPage: true,
brandList: [
{
avatar: require("./images/listPic1.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic2.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic3.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic4.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic5.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic6.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic6.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic6.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic6.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic6.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic6.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
}, {
avatar: require("./images/listPic6.png"),
title: '【红心向党·凝聚动力】洋浦学校党支部深入学习“十严禁”换届纪律会议',
time: '2021-09-17 14:41'
},
]
}
}, },
components: { components: {
CommonBox, CommonBox,
ARow: Row,
ACol: Col,
AList: List,
AListItem: List.Item,
AAvatar: Avatar,
AIcon: Icon,
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss" type="text/scss">
.party-center-brand-creation-style { .party-center-brand-creation-style {
width: 100%; width: 100%;
height: 880px !important; height: 880px !important;
.brandCreat {
width: 100%;
height: 100%;
img {
cursor: pointer;
}
.rowImg {
width: 100%;
}
.brandList {
width: 100%;
height: 600px;
.score-list-div {
width: 100%;
height: 23rem;
display: flex;
flex-direction: column;
margin-top: 15px;
overflow: hidden;
}
.ant-list-items {
cursor: pointer;
}
.listItem {
width: 100%;
height: 80px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.5);
margin-bottom: 15px;
position: relative;
cursor: pointer;
.ant-avatar {
border-radius: 0 !important;
height: 80px;
width: 21%;
position: absolute;
top: 0;
left: 0;
}
.p1 {
position: absolute;
top: 10px;
left: 25%;
color: #fff;
font-size: 14px;
}
.p2 {
position: absolute;
right: 10px;
bottom: -8px;
color: #FFFF80;
}
}
}
}
} }
</style> </style>

86
src/views/screenAdaptation/pages/partyCenter/studyPower.vue
Unescape View File

@ -1,23 +1,99 @@
<template> <template>
<CommonBox title="学习强国" class="party-center-study-power-style"></CommonBox> <CommonBox title="学习强国" class="party-center-study-power-style">
<div class="studyStrong">
<a-row type="flex" justify="space-between" class="row" wrap>
<a-col class="aCol" v-for="(item,i) in colList" :key="i">
<img :src="item.src" alt="">
<span class="colSpan"></span>
<p>{{item.title}}</p>
</a-col>
</a-row>
</div>
</CommonBox>
</template> </template>
<script> <script>
/* /*
* 品牌创建 * 品牌创建
* */ * */
import CommonBox from '../secondPages/commonBox.vue'; import CommonBox from '../secondPages/commonBox.vue';
import {Row, Col} from 'ant-design-vue';
export default{ export default{
data(){ data(){
return {} return {
colList: [
{title: '学习新思想', src: './images/icon1.png'},
{title: '十九大时间', src: './images/icon2.png'},
{title: '学习理论', src: './images/icon3.png'},
{title: '红色中国', src: './images/icon4.png'},
{title: '学习科学', src: './images/icon5.png'},
{title: '环球视野', src: './images/icon6.png'},
{title: '习近平交汇', src: './images/icon7.png'},
{title: '学习电视台', src: './images/icon8.png'},
{title: '学习电台', src: './images/icon9.png'},
{title: '学习慕课', src: './images/icon10.png'},
{title: '学习文化', src: './images/icon11.png'},
{title: '强军兴军', src: './images/icon12.png'},
]
}
}, },
components: { components: {
CommonBox, CommonBox,
ARow: Row,
ACol: Col,
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss" type="text/scss">
.party-center-study-power-style { .party-center-study-power-style {
width: 100%; width: 100%;
height: 440px !important; height: 440px !important;
.studyStrong {
width: 94%;
height: 100%;
margin: 0 auto;
.row {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.aCol {
display: inline-block;
background: rgba(255, 255, 255, .5);
width: 14%;
position: relative;
border-radius: 8px;
color: #fff;
font-size: 18px;
height: 170px;
text-align: center !important;
margin: 25px 8px 1px 8px;
cursor: pointer;
img{
position: absolute;
width: 46px;
height: 46px;
left: 50%;
top: 40px;
margin-left: -23px;
z-index: 5;
}
.colSpan {
display: inline-block;
position: absolute;
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 10px 8px 10px rgba(0, 0, 0, 0.7);
top: 15px;
left: 50%;
margin-left: -48px;
background-color: #9B0D02;
}
p {
position: absolute;
bottom: -4px !important;
}
}
}
} }
</style> </style>

79
src/views/screenAdaptation/pages/partyCenter/teamBuildingStyle.vue
Unescape View File

@ -1,23 +1,96 @@
<template> <template>
<CommonBox title="队建风采" class="party-center-team-building-style"></CommonBox> <CommonBox title="队建风采" class="party-center-team-building-style">
<div class="teamBuild">
<div class="topPic"></div>
<div class="botText">
<vue-scroll :ops="listScroll" :style="showPage?'height:14rem':'height:14rem'"
class="score-list-div">
<a-list item-layout="horizontal" :data-source="teamBuildList">
<a-list-item slot="renderItem" slot-scope="item" class="teamListLi">
<p class="contentText">
<span style="width: 7px;height: 7px;margin-right:5px;border-radius: 50%;background: #fff;margin-left: -5px;display: inline-block;"></span>
{{item.content}}</p>
</a-list-item>
</a-list>
</vue-scroll>
</div>
</div>
</CommonBox>
</template> </template>
<script> <script>
/* /*
* 品牌创建 * 品牌创建
* */ * */
import CommonBox from '../secondPages/commonBox.vue'; import CommonBox from '../secondPages/commonBox.vue';
import {List, Icon, Avatar, Row, Col} from 'ant-design-vue';
export default{ export default{
data(){ data(){
return {} return {
//滚动条
showPage: true,
listScroll: this.StaticParams.scrollOption,
teamBuildList: [
{
content: '【红心向党·凝聚动力】“青春向党·奋斗强国” ——洋浦学校2021（下）入团仪式暨“青年之家”揭牌仪式纪实'
}, {
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
}, {
content: '【和谐经开·智慧洋浦】 “童年再见·青春你好” ——洋浦学校团委、少工委庆祝建党百年系列活动（五）暨2019级离队仪式'
}, {
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
}, {
content: '【红心向党·凝聚动力】“青春向党·奋斗强国” ——洋浦学校2021（下）入团仪式暨“青年之家”揭牌仪式纪实'
}, {
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
},
]
}
}, },
components: { components: {
CommonBox, CommonBox,
ARow: Row,
ACol: Col,
AList: List,
AListItem: List.Item,
AAvatar: Avatar,
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss" type="text/scss">
.party-center-team-building-style { .party-center-team-building-style {
width: 605px !important; width: 605px !important;
height: 400px !important; height: 400px !important;
.teamBuild{
width: 100%;
height: 100%;
/*图片*/
.topPic{
height: 30%;
border: 3px solid #e9f2fd;
}
/*文字*/
.botText{
height:60%;
.ant-list-split .ant-list-item {
border-bottom: none;
padding: 0;
margin-left: 5px !important;
color: #fff;
cursor: pointer;
>>>p {
font-size: 16px;
margin-bottom: 18px !important;
}
}
.score-list-div {
width: 100%;
height: 23rem;
display: flex;
flex-direction: column;
margin-top: 15px;
overflow: hidden;
}
}
}
} }
</style> </style>

120
src/views/screenAdaptation/pages/partyCenter/teamHelp.vue
Unescape View File

@ -1,23 +1,133 @@
<template> <template>
<CommonBox title="团队推助" class="party-center-team-help-style"></CommonBox> <CommonBox title="团队推助" class="party-center-team-help-style">
<div class="teamBoost">
<div class="leftList">
<vue-scroll :ops="listScroll" :style="showPage?'height:21rem':'height:22rem'"
class="score-list-div">
<a-list item-layout="horizontal" :data-source="teamList">
<a-list-item slot="renderItem" slot-scope="item" class="teamListLi">
<p class="contentText">
<span style="width: 7px;height: 7px;margin-right:5px;border-radius: 50%;background: #fff;margin-left: -5px;display: inline-block;"></span>
{{item.content}}</p>
</a-list-item>
</a-list>
</vue-scroll>
</div>
<div class="rightAnimate">
<div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,i) in banner" :key="i">
<img :src="item.src" alt="">
</div>
</div>
</div>
</div>
</div>
</CommonBox>
</template> </template>
<script> <script>
/* /*
* 品牌创建 * 品牌创建
* */ * */
import {List, Icon, Avatar, Row, Col} from 'ant-design-vue';
import CommonBox from '../secondPages/commonBox.vue'; import CommonBox from '../secondPages/commonBox.vue';
export default{ export default{
data(){ data(){
return {} return {
//轮播图配置项
swiperOption: {
//autoplay: true,
speed: 300,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true
}
},
//轮播图图片
banner: [
{src: './images/listPic1.png'},
{src: './images/listPic2.png'},
{src: './images/listPic3.png'},
],
showPage: true,
listScroll: this.StaticParams.scrollOption,
teamList: [
{
content: '【红心向党·凝聚动力】“青春向党·奋斗强国” ——洋浦学校2021（下）入团仪式暨“青年之家”揭牌仪式纪实'
}, {
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
}, {
content: '【和谐经开·智慧洋浦】 “童年再见·青春你好” ——洋浦学校团委、少工委庆祝建党百年系列活动（五）暨2019级离队仪式'
}, {
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
}, {
content: '【红心向党·凝聚动力】“青春向党·奋斗强国” ——洋浦学校2021（下）入团仪式暨“青年之家”揭牌仪式纪实'
}, {
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
},
]
}
},
watch: {
banner(xin, old){
this.$nextTick(() => {
let mySwiper = new Swiper('.swiper-container', {
loop: true,
})
})
immediate:true
}
}, },
components: { components: {
CommonBox, CommonBox,
ARow: Row,
ACol: Col,
AList: List,
AListItem: List.Item,
AAvatar: Avatar,
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss" type="text/scss">
.party-center-team-help-style { .party-center-team-help-style {
width: 605px !important; width: 605px !important;
height: 400px !important; height: 400px !important;
.teamBoost {
width: 100%;
height: 100%;
.leftList {
width: 66%;
.ant-list-split .ant-list-item {
border-bottom: none;
padding: 0;
margin-left: 5px !important;
margin-bottom: 5px;
color: #fff;
cursor: pointer;
p {
font-size: 16px;
}
}
.score-list-div {
width: 100%;
height: 23rem;
display: flex;
flex-direction: column;
margin-top: 15px;
overflow: hidden;
}
}
.rightAnimate {
width: 30%;
margin: 0 auto;
border: 1px solid darkmagenta;
.banner {
width: 100%;
}
}
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save