党建引领中心样式

init
zhusiyu 3 years ago
parent b872f6dc59
commit 0772b0e188

@ -4,7 +4,7 @@
:visible="show_modal" :dialogClass="(className!==''?className:'')+ ' dialog-style'" :maskClosable="false" :visible="show_modal" :dialogClass="(className!==''?className:'')+ ' dialog-style'" :maskClosable="false"
:width="width !== ''?width:'30%'" @cancel.stop="optionClick($event,'cancel')" :zIndex="modalZIndex" :width="width !== ''?width:'30%'" @cancel.stop="optionClick($event,'cancel')" :zIndex="modalZIndex"
:bodyStyle="{maxHeight:'calc(95vh - 33px)',overflow:'auto'}" :bodyStyle="{maxHeight:'calc(95vh - 33px)',overflow:'auto'}"
:class="{'party-dialog-style':isPartyCenter}"
> >
<a-icon slot="closeIcon" type="close-circle" style="color: #999999;font-size: 1rem" title="关闭"/> <a-icon slot="closeIcon" type="close-circle" style="color: #999999;font-size: 1rem" title="关闭"/>
<a-icon v-if="showOK" type="check-circle" class="ok-style" title="确定" @click.stop="optionClick($event,'ok')"/> <a-icon v-if="showOK" type="check-circle" class="ok-style" title="确定" @click.stop="optionClick($event,'ok')"/>
@ -79,20 +79,32 @@
callback: null, callback: null,
width: this.modalWidth, width: this.modalWidth,
className: this.modalClassName, className: this.modalClassName,
modalZIndex: this.zIndex modalZIndex: this.zIndex,
isPartyCenter: false,
}
},
watch: {
$route: {
handler(val, oldval){
if (val.path === '/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
} }
}, },
},
},
computed: { computed: {
childDom: function () { childDom: function () {
return this.dom_url === "" ? null : () => import(`@/${this.dom_url}`); return this.dom_url === "" ? null : () => import(`@/${this.dom_url}`);
} }
}, },
mounted() { mounted() {
this.getHref()
if (this.addChildType === 'event') { if (this.addChildType === 'event') {
this.$bus.on(EventConfig.MODAL_SHOW, this.showModal); this.$bus.on(EventConfig.MODAL_SHOW, this.showModal);
this.$bus.on(EventConfig.MODAL_CLOSE, this.closeModal); this.$bus.on(EventConfig.MODAL_CLOSE, this.closeModal);
} }
}, },
beforeDestroy(){ beforeDestroy(){
if (this.addChildType === 'event') { if (this.addChildType === 'event') {
@ -101,6 +113,14 @@
} }
}, },
methods: { methods: {
getHref(){
this.href = window.location.hash
if (this.href === '#/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
showModal: function (arys) { showModal: function (arys) {
this.title = arys[0].title; this.title = arys[0].title;
this.dom_url = arys[0].dom_url; this.dom_url = arys[0].dom_url;
@ -145,6 +165,11 @@
}, },
modalClassName: function (newData) { modalClassName: function (newData) {
this.className = newData; this.className = newData;
},
$route(val, oldval){
if (val.path === '/partyCenter/party') {
}
} }
} }
} }
@ -160,6 +185,7 @@
border: 1px solid #31a8fa; border: 1px solid #31a8fa;
box-shadow: 0 4px 12px rgba(49, 168, 250, 0.5); box-shadow: 0 4px 12px rgba(49, 168, 250, 0.5);
background: #01123E; background: #01123E;
}
.ant-modal-header { .ant-modal-header {
padding: 36px 24px !important; padding: 36px 24px !important;
background: #01123E; background: #01123E;
@ -192,5 +218,21 @@
cursor: pointer; cursor: pointer;
} }
} }
.party-dialog-style {
/deep/ .dialog-style {
.ant-modal-content {
border: 1px solid #FFFE00 !important;
box-shadow: 0 4px 12px rgba(178, 34, 34, 0.5) !important;
background: #961E03 !important;
.ant-modal-header {
background: #961E03 !important;
border-bottom: 1px solid #FFFE00 !important;
}
.info-content-style {
background: none !important;
}
}
}
} }
</style> </style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

@ -23,7 +23,8 @@
<div v-html="contentHtml"></div> <div v-html="contentHtml"></div>
</vue-scroll> </vue-scroll>
</div> </div>
<img src="../assets/images/modalLogo.png" alt="" class="title-logo-png"> <img v-if="!isPartyCenter" src="../assets/images/modalLogo.png" alt="" class="title-logo-png">
<img v-if="isPartyCenter" src="../assets/images/partyModalLogo.png" alt="" class="title-logo-png">
</div> </div>
</modal-panel> </modal-panel>
</template> </template>
@ -77,6 +78,7 @@
contentHtml: this.$props.infoObj && this.$props.infoObj.content ? this.$props.infoObj.content : "", contentHtml: this.$props.infoObj && this.$props.infoObj.content ? this.$props.infoObj.content : "",
// uploadPerson:"", // uploadPerson:"",
// contentHtml:"", // contentHtml:"",
isPartyCenter: false,
} }
}, },
watch: { watch: {
@ -95,14 +97,32 @@
this.infoTitle = newData.title; this.infoTitle = newData.title;
this.infoArr = newData.infoArr; this.infoArr = newData.infoArr;
this.contentHtml = newData.content; this.contentHtml = newData.content;
},
$route: {
handler(val, oldval){
if (val.path === '/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
} }
}, },
},
},
mounted(){ mounted(){
this.getHref()
// if (this.infoId && this.infoId !== "") { // if (this.infoId && this.infoId !== "") {
// this.getDataInfo(); // this.getDataInfo();
// } // }
}, },
methods: { methods: {
getHref(){
this.href = window.location.hash
if (this.href === '#/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
// //
getDataInfo: function () { getDataInfo: function () {
if (!this.infoId || this.infoId === "") { if (!this.infoId || this.infoId === "") {

@ -2,11 +2,12 @@
<div class="login-perosn-info-style"> <div class="login-perosn-info-style">
<!-- <Portrait :personId="personId"/>--> <!-- <Portrait :personId="personId"/>-->
<Portrait :personId="personId" @showMessage="showMessage"/> <Portrait :personId="personId" @showMessage="showMessage"/>
<span>{{personName}}</span> <span :class="{'spanColor':isPartyCenter}">{{personName}}</span>
<div v-if="operateType === 1" class="back-style" title="退出" @click="signOut"> <div v-if="operateType === 1" class=back-style title="退出"
@click="signOut">
<a-icon type="rollback"/> <a-icon type="rollback"/>
</div> </div>
<div v-else class="back-style" title="回到首页" @click="toMainPage"> <div v-else :class="{'back-style':true,'party-back-style':isPartyCenter}" title="回到首页" @click="toMainPage">
<a-icon type="home" theme="filled"/> <a-icon type="home" theme="filled"/>
</div> </div>
<PersonMsgModal :visible="visible" @cancelModal="cancelModal" :full_name="full_name" :user_name="user_name" <PersonMsgModal :visible="visible" @cancelModal="cancelModal" :full_name="full_name" :user_name="user_name"
@ -34,14 +35,36 @@
phone_number: '', phone_number: '',
// TEL // TEL
// identity_num // identity_num
isPartyCenter: false,
} }
}, },
props: ['operateType'],//1 退 2 props: ['operateType'],//1 退 2
watch: {
$route(val, oldval){
if (val.path === '/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
},
created() { created() {
this.getHref()
this.getData() this.getData()
}, },
mounted(){
// this.getHref()
},
methods: { methods: {
getHref(){
this.href = window.location.hash
if (this.href === '#/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
getData() { getData() {
this.user_name = this.$store.state.userStore.user.personName this.user_name = this.$store.state.userStore.user.personName
console.log('个人信息', this.$store.state.userStore) console.log('个人信息', this.$store.state.userStore)
@ -89,7 +112,9 @@
color: $color-default-bright; color: $color-default-bright;
font-size: 20px; font-size: 20px;
} }
.spanColor {
color: #fff !important;
}
.back-style { .back-style {
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -102,6 +127,10 @@
color: #0a1f3f; color: #0a1f3f;
cursor: pointer; cursor: pointer;
} }
.party-back-style {
background-color: #FFAE00 !important;
color: #991403 !important;
}
} }
</style> </style>

@ -1,7 +1,11 @@
<template> <template>
<div class="time-box-style"> <div class="time-box-style">
<a-icon type="calendar" class="light-color-style"/> <a-icon type="calendar" :class="{'party-light-color-style':isPartyCenter,'light-color-style':!isPartyCenter}"/>
<span class="light-color-style time-text-style" style="margin-left: 0.5rem">{{ dateYear }} {{ dateDay }}</span> <span
:class="{'party-time-text-style':isPartyCenter,'time-text-style':!isPartyCenter}"
style="margin-left: 0.5rem">
{{ dateYear }} {{ dateDay }}
</span>
<!--<span class="light-color-style" style="padding-left: 10px;"> {{ dateWeek }}</span>--> <!--<span class="light-color-style" style="padding-left: 10px;"> {{ dateWeek }}</span>-->
</div> </div>
</template> </template>
@ -16,10 +20,27 @@
dateYear: null, dateYear: null,
// dateWeek: null, // dateWeek: null,
weekday: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], weekday: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
isPartyCenter: false,
href: '',
} }
}, },
watch: {
$route: {
handler(val, oldval){
if (val.path === '/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
},
},
created(){
this.getHref()
},
mounted(){ mounted(){
this.timeFn(); this.timeFn();
// this.getHref();
}, },
methods: { methods: {
timeFn() { timeFn() {
@ -29,6 +50,14 @@
// this.dateWeek = this.weekday[new Date().getDay()] // this.dateWeek = this.weekday[new Date().getDay()]
}, 100) }, 100)
}, },
getHref(){
this.href = window.location.hash
if (this.href === '#/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
}, },
beforeDestroy () { beforeDestroy () {
clearInterval(this.timing) clearInterval(this.timing)
@ -42,13 +71,21 @@
.time-box-style { .time-box-style {
min-width: 200px; min-width: 200px;
font-size: 20px; font-size: 20px;
.light-color-style {
color: #00fcff !important;
}
.party-light-color-style {
color: #fff !important;
}
.time-text-style { .time-text-style {
/*font-family: 'lightFont';*/ /*font-family: 'lightFont';*/
font-size: 20px; font-size: 20px;
color: #00fcff !important; color: #00fcff !important;
} }
.light-color-style{ .party-time-text-style {
color: #00fcff !important; font-size: 20px;
color: #fff !important;
} }
} }
</style> </style>

@ -29,6 +29,46 @@
getImgSrc: function () { getImgSrc: function () {
let path = this.menu.path; let path = this.menu.path;
let imgSrc = ""; let imgSrc = "";
if (window.location.hash === '#/partyCenter/party') {
switch (path) {
case '/partyCenter':
//
imgSrc = require('../../../assets/images/menu/party_party.png');
break;
case '/adminCenter':
//
imgSrc = require('../../../assets/images/menu/party_administration.png');
break;
case '/safeCenter':
//
imgSrc = require('../../../assets/images/menu/party_safe.png');
break;
case '/teachingCenter':
//
imgSrc = require('../../../assets/images/menu/party_teachManege.png');
break;
case '/resourcesCenter':
//
imgSrc = require('../../../assets/images/menu/resources.png');
break;
case '/studentAdminCenter':
//
imgSrc = require('../../../assets/images/menu/party_moral.png');
break;
case '/teacherAdminCenter':
//
imgSrc = require('../../../assets/images/menu/party_teacher.png');
break;
case '/monitorCenter':
//
imgSrc = require('../../../assets/images/menu/party_function.png');
break;
case '/serviceCenter':
//
imgSrc = require('../../../assets/images/menu/party_moral.png');
break;
}
} else {
switch (path) { switch (path) {
case '/partyCenter': case '/partyCenter':
// //
@ -67,6 +107,8 @@
imgSrc = require('../../../assets/images/menu/service.png'); imgSrc = require('../../../assets/images/menu/service.png');
break; break;
} }
}
return imgSrc; return imgSrc;
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 3.2 MiB

@ -1,16 +1,17 @@
<template> <template>
<div class="common-box-style"> <div :class="{'common-box-style':true,'common-box-party-style':isPartyCenter}">
<div class="common-box-title-style"> <div class="common-box-title-style">
<!--<img :src="require('../../assets/images/boxTitle.png')" style="width:100%;height: 100%"/>--> <!--<img :src="require('../../assets/images/boxTitle.png')" style="width:100%;height: 100%"/>-->
<div class="title-box-line left-line-style"></div> <div :class="{'title-box-line':true,'left-line-style':isPartyCenter}"></div>
<div class="title-box-style"> <div class="title-box-style" :class="{'party-title-box-style':isPartyCenter}">
<div class="angle-border left-top-border"></div> <div class="angle-border left-top-border" :class="{'party-left-top-border':isPartyCenter}"></div>
<div class="angle-border right-top-border"></div> <div class="angle-border right-top-border" :class="{'party-right-top-border':isPartyCenter}"></div>
<div class="angle-border left-bottom-border"></div> <div class="angle-border left-bottom-border" :class="{'party-left-bottom-border':isPartyCenter}"></div>
<div class="angle-border right-bottom-border"></div> <div class="angle-border right-bottom-border"
:class="{'party-right-bottom-border':isPartyCenter}"></div>
<span class="common-box-title">{{title}}</span> <span class="common-box-title">{{title}}</span>
</div> </div>
<div class="title-box-line right-line-style"></div> <div :class="{'title-box-line':true,'right-line-style':isPartyCenter}"></div>
</div> </div>
<!--<dv-border-box-12>{{title}}</dv-border-box-12>--> <!--<dv-border-box-12>{{title}}</dv-border-box-12>-->
<slot></slot> <slot></slot>
@ -22,13 +23,35 @@
* */ * */
export default{ export default{
data(){ data(){
return {} return {
href: '',
isPartyCenter: false,
}
},
props: ['title'],
created(){
this.getHref()
}, },
props:['title'] mounted(){
},
methods: {
getHref(){
let href = window.location.hash
if (href === '#/partyCenter/party') {
this.isPartyCenter = true
}
},
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../assets/scss/style"; @import "../../assets/scss/style";
.common-box-party-style {
border: 1px solid #FFFF00 !important;
}
.common-box-style { .common-box-style {
width: 100%; width: 100%;
height: auto; height: auto;
@ -55,6 +78,17 @@
border-bottom: 3px solid $color-default-bright; border-bottom: 3px solid $color-default-bright;
margin-top: 3px; margin-top: 3px;
} }
.left-line-style {
border-bottom: 3px solid #FFAE00 !important;
}
.right-line-style {
border-bottom: 3px solid #FFAE00 !important;
}
.party-title-box-style {
background: linear-gradient(to top, #D01004, #F19049) !important;
background: -moz-linear-gradient(to top, #D01004, #F19049) !important;
background: -webkit-linear-gradient(top, #D01004, #F19049) !important;
}
.title-box-style { .title-box-style {
width: 180px; width: 180px;
height: 100%; height: 100%;
@ -82,6 +116,10 @@
border-top: 1px solid $color-default-bright; border-top: 1px solid $color-default-bright;
border-top-left-radius: 5px; border-top-left-radius: 5px;
} }
.party-left-top-border {
border-left: 1px solid #FFFF00 !important;
border-top: 1px solid #FFFF00 !important;
}
.right-top-border { .right-top-border {
top: 0; top: 0;
right: -1px; right: -1px;
@ -89,6 +127,10 @@
border-top: 1px solid $color-default-bright; border-top: 1px solid $color-default-bright;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.party-right-top-border {
border-right: 1px solid #FFFF00 !important;
border-top: 1px solid #FFFF00 !important;
}
.left-bottom-border { .left-bottom-border {
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -96,6 +138,10 @@
border-left: 1px solid $color-default-bright; border-left: 1px solid $color-default-bright;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
} }
.party-left-bottom-border {
border-bottom: 1px solid #FFFF00 !important;
border-left: 1px solid #FFFF00 !important;
}
.right-bottom-border { .right-bottom-border {
bottom: 0; bottom: 0;
right: -1px; right: -1px;
@ -103,6 +149,10 @@
border-bottom: 1px solid $color-default-bright; border-bottom: 1px solid $color-default-bright;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.party-right-bottom-border {
border-right: 1px solid #FFFF00 !important;
border-bottom: 1px solid #FFFF00 !important;
}
} }
} }
} }

@ -3,7 +3,7 @@
<img :src="topImgUrl"/> <img :src="topImgUrl"/>
<div class="page-left-style" :style="{width:leftWidth + '%'}"> <div class="page-left-style" :style="{width:leftWidth + '%'}">
<!--<div class="page-left-style">--> <!--<div class="page-left-style">-->
<div class="page-title-style"> <div class="page-title-style" :class="{'party-page-title-style':isPartyCenter}">
<span class="text">{{title}}</span> <span class="text">{{title}}</span>
</div> </div>
<div class="page-menu-style"> <div class="page-menu-style">
@ -86,6 +86,7 @@
systemData: [], systemData: [],
layoutData: {}, layoutData: {},
showWorkBenchButton: true,// showWorkBenchButton: true,//
isPartyCenter: false,
} }
}, },
computed: { computed: {
@ -103,6 +104,9 @@
this.emitRouteChange(val.path); this.emitRouteChange(val.path);
if (val.path === '/partyCenter/party') { if (val.path === '/partyCenter/party') {
this.topImgUrl = topImgPartyBuild this.topImgUrl = topImgPartyBuild
this.isPartyCenter = true
} else {
this.isPartyCenter = false
} }
}, },
// //
@ -119,13 +123,13 @@
} }
}, },
mounted(){ mounted(){
this.getHref()
this.emitRouteChange(this.$route.path); this.emitRouteChange(this.$route.path);
this.$bus.on("topCountChange", this.changeCount); this.$bus.on("topCountChange", this.changeCount);
this.$bus.on("totalCountChange", this.changeTotalCount); this.$bus.on("totalCountChange", this.changeTotalCount);
this.$bus.on("systemDataChange", this.changeSystemData); this.$bus.on("systemDataChange", this.changeSystemData);
this.$bus.on("layOutSettingChange", this.changeLayOutSetting); this.$bus.on("layOutSettingChange", this.changeLayOutSetting);
this.$bus.on("toDoBtnClick", this.toDoBtnClick); this.$bus.on("toDoBtnClick", this.toDoBtnClick);
this.getHref()
}, },
methods: { methods: {
getHref(){ getHref(){
@ -133,6 +137,9 @@
href = window.location.href.slice(window.location.href.indexOf('#') + 1) href = window.location.href.slice(window.location.href.indexOf('#') + 1)
if (href === '/partyCenter/party') { if (href === '/partyCenter/party') {
this.topImgUrl = topImgPartyBuild this.topImgUrl = topImgPartyBuild
this.isPartyCenter = true
} else {
this.isPartyCenter = false
} }
}, },
filterMenuAry: function (path) { filterMenuAry: function (path) {
@ -332,6 +339,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
.page-title-style { .page-title-style {
font-size: 18px; font-size: 18px;
width: 450px; width: 450px;
@ -345,6 +353,10 @@
font-size: 32px; font-size: 32px;
} }
} }
.party-page-title-style {
font-weight: 550;
color: #FFF799 !important;
}
.page-menu-style { .page-menu-style {
font-size: 18px; font-size: 18px;
width: calc(100% - 450px); width: calc(100% - 450px);

Loading…
Cancel
Save