头部背景图片,点击头像功能

init
zhusiyu 3 years ago
parent 1c3ae1bc49
commit 14e13fa7b4

@ -1,10 +1,10 @@
<template> <template>
<a-modal :centered="true" :footer="null" :mask="mask" :title="title" :destroyOnClose="destroyOnClose" <a-modal :centered="true" :footer="null" :mask="mask" :title="title" :destroyOnClose="destroyOnClose"
:closable="showCancel" :closable="showCancel"
: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,32 +79,20 @@
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') {
@ -113,14 +101,6 @@
} }
}, },
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;
@ -184,13 +164,18 @@
.ant-modal-content { .ant-modal-content {
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;*/
}
.party-ant-modal-content {
border: 1px solid #FBED05;
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;*/
color: #fff; color: #fff;
border-bottom: 1px solid #1067B0; /*border-bottom: 1px solid #1067B0;*/
.ant-modal-title { .ant-modal-title {
line-height: 2rem !important; line-height: 2rem !important;
font-size: 1.6rem !important; font-size: 1.6rem !important;
@ -202,11 +187,11 @@
width: 2rem !important; width: 2rem !important;
line-height: 2rem !important; line-height: 2rem !important;
.anticon { .anticon {
color: #fff !important; /*color: #fff !important;*/
font-size: 2.5rem !important; /*font-size: 2.5rem !important;*/
position: absolute !important; /*position: absolute !important;*/
top: 13px !important; /*top: 13px !important;*/
right: 20px !important; /*right: 20px !important;*/
} }
} }
.ok-style { .ok-style {
@ -218,21 +203,4 @@
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>

@ -23,8 +23,7 @@
<div v-html="contentHtml"></div> <div v-html="contentHtml"></div>
</vue-scroll> </vue-scroll>
</div> </div>
<img v-if="!isPartyCenter" src="../assets/images/modalLogo.png" alt="" class="title-logo-png"> <img src="../assets/images/modalLogo.png" alt="">
<img v-if="isPartyCenter" src="../assets/images/partyModalLogo.png" alt="" class="title-logo-png">
</div> </div>
</modal-panel> </modal-panel>
</template> </template>
@ -78,7 +77,6 @@
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: {
@ -97,32 +95,14 @@
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 === "") {
@ -182,7 +162,6 @@
height: 50px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 100px;
} }
.ant-modal-body { .ant-modal-body {
.common-info-style { .common-info-style {
@ -193,7 +172,7 @@
flex-direction: column; flex-direction: column;
.title-content-style { .title-content-style {
width: 100%; width: 100%;
min-height: 90px; min-height: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -202,44 +181,23 @@
} }
} }
.info-content-style { .info-content-style {
width: 87%; width: 100%;
height: 30px; height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-end;
background: #525E7B;
padding: 25px 0;
margin: 0 auto;
font-size: 18px;
} }
.content-info-style { .content-info-style {
width: 100%; width: 100%;
height: 350px; height: 400px;
font-size: 18px;
line-height: 10px;
margin-top: 20px;
overflow: hidden;
.content-scroll-style { .content-scroll-style {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 100% !important;
p {
line-height: 30px !important;
}
span {
line-height: 30px !important;
}
} }
} }
.title-logo-png { /*.content-info-style > div > div {*/
vertical-align: middle; /*overflow: hidden !important;*/
border-style: none; /*}*/
width: 240px;
height: 150px;
position: absolute;
top: -10px;
left: -10px;
}
} }
} }
} }

@ -1,9 +1,9 @@
<template> <template>
<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 :class="{'spanColor':isPartyCenter}">{{personName}}</span> <span :class="{'spanColor':isPartyCenter}">{{personName}}</span>
<div v-if="operateType === 1" class=back-style title="退出" <div v-if="operateType === 1" class=back-style title="退出"
@click="signOut"> @click="signOut">
<a-icon type="rollback"/> <a-icon type="rollback"/>
</div> </div>

@ -106,9 +106,6 @@
if (val.path === '/partyCenter/party') { if (val.path === '/partyCenter/party') {
this.topImgUrl = topImgPartyBuild this.topImgUrl = topImgPartyBuild
this.isPartyCenter = true this.isPartyCenter = true
} else {
this.topImgUrl = topImg01
this.isPartyCenter = false
} }
}, },
// //
@ -196,26 +193,29 @@
} }
}, },
changeBackImg: function (path) { changeBackImg: function (path) {
if (path.indexOf("workBench") > 0) { if (this.href === '#/partyCenter/party') {
// this.topImgUrl = topImgPartyBuild
if (path === "/workBench/application") { this.isPartyCenter = true
// } else {
if (path.indexOf("workBench") > 0) {
//
if (path === "/workBench/application") {
//
this.rightWidth = 30;
this.topImgUrl = topImg01;
this.showWorkBenchButton = false;
} else {
this.rightWidth = 40;
this.topImgUrl = topImg02;
this.showWorkBenchButton = true;
}
} else {
this.rightWidth = 30; this.rightWidth = 30;
this.topImgUrl = topImg01; this.topImgUrl = topImg01;
this.showWorkBenchButton = false; this.showWorkBenchButton = false;
} else {
this.rightWidth = 40;
this.topImgUrl = topImg02;
this.showWorkBenchButton = true;
} }
} else if (this.href === '#/partyCenter/party') {
this.topImgUrl = topImgPartyBuild
this.isPartyCenter = true
} else {
this.rightWidth = 30;
this.topImgUrl = topImg01;
this.showWorkBenchButton = false;
} }
}, },
toMainPage: function () { toMainPage: function () {
this.$router.replace({path: '/dynamic'}); this.$router.replace({path: '/dynamic'});

Loading…
Cancel
Save