动态获取后台自定义颜色赋值给前端

最新推荐文章于 2024-04-29 16:59:20 发布

天宇流沙

最新推荐文章于 2024-04-29 16:59:20 发布

阅读量627

点赞数

本文链接：https://blog.csdn.net/qq_41792374/article/details/108751064

版权

在这里插入图片描述

<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>