dt_support.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <view class="showBottom" v-if="copyInfo.wx_copyright_status==1">
  3. <view class="logoBox" v-if="copyInfo.is_show_icon">
  4. <image :class="['logo',imgSizeClass]" v-if="copyInfo.icon_url" :src="copyInfo.icon_url" mode="aspectFit"
  5. @load="logoLoad"></image>
  6. </view>
  7. <text>{{copyInfo.copyright_description}}</text>
  8. </view>
  9. <view class="showBottom" v-else-if="!copyInfo.wx_copyright_status">
  10. <view class="logoBox">
  11. <image class="logo" src="https://szsq.nxzhsq.cn/community/miniofile/image/pectFill"></image>
  12. </view>
  13. <text>{{ msg }}</text>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. props: {
  19. msg: {
  20. type: String,
  21. default: "君实科技提供技术支持"
  22. },
  23. copyInfo: {
  24. type: Object,
  25. default: null
  26. }
  27. },
  28. data() {
  29. return {
  30. imgSizeClass: ""
  31. }
  32. },
  33. methods: {
  34. logoLoad(e) {
  35. let width = e.detail.width;
  36. let height = e.detail.height;
  37. if (width > height && width - height > 30) {
  38. this.imgSizeClass = "widthLogo";
  39. } else {
  40. this.imgSizeClass = "";
  41. }
  42. }
  43. }
  44. };
  45. </script>
  46. <style lang="scss" scoped>
  47. .showBottom {
  48. font-size: 20 rpx;
  49. color: #b5b5b5;
  50. display: flex;
  51. align-items: center;
  52. justify-content: center;
  53. flex-direction: row;
  54. .logoBox {
  55. display: flex;
  56. align-items: center;
  57. margin-right: 10 rpx;
  58. .logo {
  59. width: 30 rpx;
  60. height: 30 rpx;
  61. }
  62. .widthLogo {
  63. width: 80 rpx;
  64. height: 30 rpx;
  65. }
  66. }
  67. text {
  68. font-size: 25 rpx;
  69. }
  70. }
  71. </style>