<template>
<div class="info-wrapper">
<div class="info text-center d-flex">
<img v-if="businessInfo.logo" :src="businessInfo.logo" class="avatar" />
<div class="name" :style="{color:fontColor}">{{businessInfo.company}}</div>
</div>
<div class="info d-flex justify-space-between">
<div
class="d-flex address"
@click="$router.push(`/map/${businessInfo.longitude}/${businessInfo.latitude}`)"
>
<i class="iconfont iconditu-dibiao" :style="{color:buttonColor}"></i>
<span class="line-clamp-1 address-text" :style="{color:fontColor}">{{businessInfo.address}}</span>
</div>
<div class="border-left info-item tel" @click="makePhoneCall">
<i class="iconfont iconweb-icon- phone" :style="{color:buttonColor}"></i>
<span class="tel-text" :style="{color:fontColor}">电话</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { mapGetters } from 'vuex';
import getHomeLayoutConfig, { getFollowList } from '@/API/home';
export default Vue.extend({
data() {
return {
fontColor: '#000',
buttonColor: '#ff6a01',
};
},
methods: {
makePhoneCall() {
window.location.href = `tel:${this.businessInfo.compTel}`;
},
},
computed: {
...mapGetters('business', {
businessInfo: 'info',
}),
},
created() {
getHomeLayoutConfig().then(({ data: layoutItems }) => {
const list = layoutItems.pack;
list.forEach((item: { fontColor: any }, index: any) => {
if (item.fontColor) {
this.fontColor = item.fontColor;
}
});
list.forEach((item: { buttonColor: any }, index: any) => {
if (item.buttonColor) {
this.buttonColor = item.buttonColor;
}
});
});
},
});
</script>
<style lang="scss" scoped>
.info-wrapper {
position: relative;
// background: red;
padding: 30px 40px ;
// margin-top: 1.4rem;
.name {
color: #323232;
font-weight: 700;
}
}
.avatar {
width: 120px;
height: 120px;
border-radius: 4px;
margin-right: 20px;
}
.info {
font-size: 14px;
}
.address-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 6rem;
display: inline-block;
font-size: 12px;
line-height: 40px;
}
.address {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.tel {
margin-top: 20px;
padding-left: 60px;
border-left: 1px solid #efefef;
flex-shrink: 0;
.tel-text {
margin-left: 10px;
}
}
</style>
动态获取后台自定义颜色赋值给前端
最新推荐文章于 2024-04-29 16:59:20 发布