99 lines
2.0 KiB
Vue
99 lines
2.0 KiB
Vue
<template>
|
||
<OutMask :bg="bg">
|
||
<div class="contact" :class="bg ? 'mobile' : ''">
|
||
<div class="contactTxt color">商务合作：business@star-linear.com</div>
|
||
<div class="contactTxt color">
|
||
咨询邮箱：dl.cs@star-linear.com
|
||
</div>
|
||
<div
|
||
:class="bg ? 'm_close_btn' : 'close_btn'"
|
||
@click="closeContact()"
|
||
></div>
|
||
</div>
|
||
</OutMask>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
components: {
|
||
OutMask: () => import("./outMask.vue"),
|
||
},
|
||
props: {
|
||
bg: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
methods: {
|
||
closeContact() {
|
||
this.$emit("closeContact");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.contact {
|
||
width: 1021px;
|
||
height: 419px;
|
||
// background-size: cover;
|
||
background: url("@/assets/mask/success_bg.png");
|
||
background-position: center;
|
||
background-size: contain;
|
||
z-index: 2;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
font-size: 28px;
|
||
&.mobile {
|
||
height: 600px;
|
||
padding: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
margin-top: 0px;
|
||
background: none;
|
||
&::before {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
content: "";
|
||
background: url("@/assets/mobile/mask_top.png") center no-repeat;
|
||
background-size: contain;
|
||
width: 745px;
|
||
height: 46px;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
&::after {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
content: "";
|
||
background: url("@/assets/mobile/mask_bottom.png") center no-repeat;
|
||
background-size: contain;
|
||
width: 745px;
|
||
height: 67px;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
.m_close_btn {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translate(-50%, 100%);
|
||
}
|
||
}
|
||
|
||
.close_btn {
|
||
top: 57px;
|
||
right: 27px;
|
||
}
|
||
}
|
||
</style>
|