149 lines
2.8 KiB
Vue
149 lines
2.8 KiB
Vue
<!--
|
|
filename: CompanyInfo.vue
|
|
author: liubin
|
|
date: 2024-04-08 15:27:04
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="company-info" @click="handleChangeRoute()" :style="styles">
|
|
<div class="corner bl"></div>
|
|
<div class="corner br"></div>
|
|
<h2>{{ info.companyName }}</h2>
|
|
<ul>
|
|
<li v-for="item in info.items" :key="item.label">
|
|
{{ item.label }} {{ item.value | numberFilter }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "CompanyInfo",
|
|
components: {},
|
|
props: {
|
|
info: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({}),
|
|
},
|
|
position: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({ tx: 0, ty: 0 }),
|
|
},
|
|
},
|
|
filters: {
|
|
numberFilter(value) {
|
|
if (value != null && !isNaN(parseInt(value))) {
|
|
return parseInt(value).toLocaleString();
|
|
} else {
|
|
return '-';
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
styles() {
|
|
return {
|
|
left: `${this.position.tx}%`,
|
|
top: `${this.position.ty}%`,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
handleChangeRoute() {
|
|
this.$router.push({
|
|
path: this.position.path
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@font-face {
|
|
font-family: 优设标题黑;
|
|
src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
|
|
}
|
|
|
|
.company-info {
|
|
color: #fff;
|
|
background: #4443;
|
|
position: absolute;
|
|
z-index: 9999;
|
|
// padding: 14px;
|
|
padding: 0.745vw;
|
|
// padding: 0 vw;
|
|
cursor: pointer;
|
|
// backdrop-filter: blur(2px);
|
|
// border-radius: 4px;
|
|
transform: translate(-50%, -100%);
|
|
// box-shadow: inset 0 0 12px 2px #fff3;
|
|
background: url(../../../assets/images/homeindex/info.png) no-repeat 0 0 / 100% 100%;
|
|
// background: radial-gradient(circle farthest-corner at bottom center,rgba(255,239,162,.7) 10%, #021842 30%);
|
|
// 在这里设置一个总的字体大小 不失为一个好的选择
|
|
font-size: 1vw;
|
|
// filter: blur(13);
|
|
}
|
|
|
|
h2 {
|
|
// padding: 0 1vw;
|
|
margin: 6px 0;
|
|
font-family: 优设标题黑;
|
|
color: #fff;
|
|
letter-spacing:4px;
|
|
text-align: left;
|
|
// font-size: 24px;
|
|
font-size: 1.276em;
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
li {
|
|
font-size: 0.77em;
|
|
}
|
|
|
|
.corner {
|
|
position: absolute;
|
|
bottom: 0;
|
|
// width: 12px;
|
|
// height: 12px;
|
|
width: 0.639vw;
|
|
height: 0.639vw;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.bl {
|
|
left: 0;
|
|
border-left: 0.1596vw solid #ffa600;
|
|
border-bottom: 0.1596vw solid #ffa600;
|
|
// border-left: 3px solid #ffa600;
|
|
// border-bottom: 3px solid #ffa600;
|
|
}
|
|
|
|
.br {
|
|
right: 0;
|
|
// border-right: 3px solid #ffa600;
|
|
// border-bottom: 3px solid #ffa600;
|
|
border-right: 0.1596vw solid #ffa600;
|
|
border-bottom: 0.1596vw solid #ffa600;
|
|
}
|
|
</style>
|