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

init
zhusiyu 3 years ago
parent 1c3ae1bc49
commit 14e13fa7b4

@ -1,10 +1,10 @@
<template>
<a-modal :centered="true" :footer="null" :mask="mask" :title="title" :destroyOnClose="destroyOnClose"
: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"
: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 v-if="showOK" type="check-circle" class="ok-style" title="确定" @click.stop="optionClick($event,'ok')"/>
@ -79,32 +79,20 @@
callback: null,
width: this.modalWidth,
className: this.modalClassName,
modalZIndex: this.zIndex,
isPartyCenter: false,
modalZIndex: this.zIndex
}
},
watch: {
$route: {
handler(val, oldval){
if (val.path === '/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
},
},
computed: {
childDom: function () {
return this.dom_url === "" ? null : () => import(`@/${this.dom_url}`);
}
},
mounted() {
this.getHref()
if (this.addChildType === 'event') {
this.$bus.on(EventConfig.MODAL_SHOW, this.showModal);
this.$bus.on(EventConfig.MODAL_CLOSE, this.closeModal);
}
},
beforeDestroy(){
if (this.addChildType === 'event') {
@ -113,14 +101,6 @@
}
},
methods: {
getHref(){
this.href = window.location.hash
if (this.href === '#/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
showModal: function (arys) {
this.title = arys[0].title;
this.dom_url = arys[0].dom_url;
@ -184,13 +164,18 @@
.ant-modal-content {
border: 1px solid #31a8fa;
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;
}
.ant-modal-header {
padding: 36px 24px !important;
background: #01123E;
/*background: #01123E;*/
color: #fff;
border-bottom: 1px solid #1067B0;
/*border-bottom: 1px solid #1067B0;*/
.ant-modal-title {
line-height: 2rem !important;
font-size: 1.6rem !important;
@ -202,11 +187,11 @@
width: 2rem !important;
line-height: 2rem !important;
.anticon {
color: #fff !important;
font-size: 2.5rem !important;
position: absolute !important;
top: 13px !important;
right: 20px !important;
/*color: #fff !important;*/
/*font-size: 2.5rem !important;*/
/*position: absolute !important;*/
/*top: 13px !important;*/
/*right: 20px !important;*/
}
}
.ok-style {
@ -218,21 +203,4 @@
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>

@ -23,8 +23,7 @@
<div v-html="contentHtml"></div>
</vue-scroll>
</div>
<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">
<img src="../assets/images/modalLogo.png" alt="">
</div>
</modal-panel>
</template>
@ -78,7 +77,6 @@
contentHtml: this.$props.infoObj && this.$props.infoObj.content ? this.$props.infoObj.content : "",
// uploadPerson:"",
// contentHtml:"",
isPartyCenter: false,
}
},
watch: {
@ -97,32 +95,14 @@
this.infoTitle = newData.title;
this.infoArr = newData.infoArr;
this.contentHtml = newData.content;
},
$route: {
handler(val, oldval){
if (val.path === '/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
},
}
},
mounted(){
this.getHref()
// if (this.infoId && this.infoId !== "") {
// this.getDataInfo();
// }
},
methods: {
getHref(){
this.href = window.location.hash
if (this.href === '#/partyCenter/party') {
this.isPartyCenter = true
} else {
this.isPartyCenter = false
}
},
//
getDataInfo: function () {
if (!this.infoId || this.infoId === "") {
@ -182,7 +162,6 @@
height: 50px;
display: flex;
align-items: center;
margin-left: 100px;
}
.ant-modal-body {
.common-info-style {
@ -193,7 +172,7 @@
flex-direction: column;
.title-content-style {
width: 100%;
min-height: 90px;
min-height: 30px;
display: flex;
justify-content: center;
align-items: center;
@ -202,44 +181,23 @@
}
}
.info-content-style {
width: 87%;
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: #525E7B;
padding: 25px 0;
margin: 0 auto;
font-size: 18px;
justify-content: flex-end;
}
.content-info-style {
width: 100%;
height: 350px;
font-size: 18px;
line-height: 10px;
margin-top: 20px;
overflow: hidden;
height: 400px;
.content-scroll-style {
display: flex;
flex-wrap: wrap;
height: 100% !important;
p {
line-height: 30px !important;
}
span {
line-height: 30px !important;
}
}
}
.title-logo-png {
vertical-align: middle;
border-style: none;
width: 240px;
height: 150px;
position: absolute;
top: -10px;
left: -10px;
}
/*.content-info-style > div > div {*/
/*overflow: hidden !important;*/
/*}*/
}
}
}

@ -1,9 +1,9 @@
<template>
<div class="login-perosn-info-style">
<!-- <Portrait :personId="personId"/>-->
<Portrait :personId="personId" @showMessage="showMessage"/>
<Portrait :personId="personId"/>
<!--<Portrait :personId="personId" @showMessage="showMessage"/>-->
<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">
<a-icon type="rollback"/>
</div>

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

Loading…
Cancel
Save