imageconver.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view >
  3. <image class="imagesize" :src="defimagSrc=='/static/defimages/ddd.png'?defimagSrc:baseUrl+imagSrc" mode="scaleToFill" @error="imageError(imagSrc)"></image>
  4. <view v-if="isyouhui" class="manjianB">
  5. <text>{{youhuinote}}</text>
  6. <image style="width: 30rpx;height: 30rpx;top: 4rpx;" src="/static/images/huorer@3x.png" mode="scaleToFill"></image>
  7. </view>
  8. <view class="remenfile" :style="isyouhui?'margin-top: -190rpx;':'margin-top: -80rpx;'">
  9. <uni-icons v-if="isremen" custom-prefix="custom-icon" color="#E02F73" type="fire-filled" size="26" ></uni-icons>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props:{
  16. imagSrc:'',
  17. isremen:false,
  18. isyouhui:false,
  19. youhuinote:''
  20. },
  21. data() {
  22. return {
  23. baseUrl:this.$baseImagurl,
  24. defimagSrc:''
  25. }
  26. },
  27. methods: {
  28. imageError(index){
  29. this.defimagSrc = '/static/defimages/ddd.png';//默认图片
  30. },
  31. }
  32. }
  33. </script>
  34. <style>
  35. .imagesize{
  36. width: 100%;
  37. height: 100%;
  38. border-radius: 16rpx;
  39. }
  40. .manjianB{
  41. width: 200rpx;
  42. height: 40rpx;
  43. margin-left: 10rpx;
  44. background-color: #CE366F;
  45. line-height: 40rpx;
  46. font-size: 24rpx;
  47. color: white;
  48. padding-left: 8rpx;
  49. border-radius:0px 10px 10px 0px;
  50. margin-top: -80rpx;
  51. }
  52. .tuijianB{
  53. position: absolute;
  54. width: 120rpx;
  55. height: 40rpx;
  56. margin-left: 10rpx;
  57. background-color: #CE366F;
  58. line-height: 40rpx;
  59. font-size: 24rpx;
  60. color: white;
  61. padding-left: 8rpx;
  62. border-radius:0px 10px 10px 0px;
  63. }
  64. .textsty{
  65. font-size: 24rpx;
  66. color: white;
  67. padding-left: 8rpx;
  68. padding-right: 12rpx;
  69. background-color: aqua;
  70. }
  71. .remenfile{
  72. position: absolute;
  73. margin-left: 10rpx;
  74. z-index: 999;
  75. }
  76. </style>