CommunityApp/pagesM/comps/dt_support.vue

<template>
  <view class="showBottom" v-if="copyInfo.wx_copyright_status==1">
    <view class="logoBox" v-if="copyInfo.is_show_icon">
      <image :class="['logo',imgSizeClass]" v-if="copyInfo.icon_url" :src="copyInfo.icon_url" mode="aspectFit" @load="logoLoad"></image>
    </view>
    <text>{{copyInfo.copyright_description}}</text>
  </view>
  <view class="showBottom" v-else-if="!copyInfo.wx_copyright_status">
    <view class="logoBox">
      <image class="logo" src="http://139.9.103.171:1888/img/image/pectFill"></image>
    </view>
    <text>{{ msg }}</text>
  </view>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: "君实科技提供技术支持"
    },
    copyInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      imgSizeClass:""
    }
  },
  methods:{
    logoLoad(e){
      let width=e.detail.width;
      let height=e.detail.height;
      if(width>height && width-height>30){
        this.imgSizeClass="widthLogo";
      }else{
        this.imgSizeClass="";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.showBottom {
  font-size: 20rpx;
  color: #b5b5b5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  .logoBox {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    .logo {
      width:30rpx;
      height:30rpx;
    }
    .widthLogo{
      width:80rpx;
      height:30rpx;
    }
  }
  text {
    font-size: 25rpx;
  }
}
</style>