graceFixedMsg.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <view class="grace-fixed-msg" :style="{width:width+'rpx', bottom:bottom+'rpx'}" v-if="show" @tap.stop="tapme">
  3. <text class="grace-fixed-msg-icon grace-icons msg-icon" :style="{color:color}"></text>
  4. <text class="grace-fixed-msg-text" :style="{color:color}">{{msg}}</text>
  5. <text class="grace-fixed-msg-icon grace-icons icon-arrow-right" :style="{color:color}"></text>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. props:{
  11. msg : {
  12. type : String,
  13. default : ""
  14. },
  15. color : {
  16. type : String,
  17. default : "#008CFF"
  18. },
  19. width : {
  20. type : Number,
  21. default : 300
  22. },
  23. bottom : {
  24. type : Number,
  25. default : 80
  26. },
  27. show : {
  28. type : Boolean,
  29. default : true
  30. }
  31. },
  32. methods:{
  33. tapme:function(){
  34. this.$emit('tapme');
  35. }
  36. }
  37. }
  38. </script>
  39. <style scoped>
  40. .grace-fixed-msg{width:300rpx; display:flex; flex-direction:row; flex-wrap:nowrap; padding:18rpx 20rpx; border-radius:50rpx; background:#FFFFFF; box-shadow:0px 0px 16rpx #D5D6D8; position:fixed; bottom:60rpx; left: 50%; transform: translateX(-50%); z-index:9999;}
  41. .grace-fixed-msg-icon{width:36rpx; height:36rpx; line-height:36rpx; font-size:30rpx; color:#3688FF; flex-shrink:0; opacity:0.6; text-align:center;}
  42. .msg-icon:before{content: "\e666";}
  43. .grace-fixed-msg-text{width:500rpx; line-height:36rpx; font-size:28rpx; color:#008CFF; height:36rpx; text-align:center; overflow:hidden;}
  44. </style>