goods-action-button.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <view class="goods-action-button" :class="'button-'+type" @click="btn">
  3. {{text}}
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. type: {
  10. type: String,
  11. default: ""
  12. },
  13. text: {
  14. type: String,
  15. default: "按钮"
  16. }
  17. },
  18. methods: {
  19. btn(){
  20. this.$emit("click");
  21. }
  22. }
  23. }
  24. </script>
  25. <style lang="scss" scoped>
  26. .goods-action-button{
  27. position: relative;
  28. display: inline-block;
  29. box-sizing: border-box;
  30. margin: 0;
  31. padding: 0;
  32. text-align: center;
  33. cursor: pointer;
  34. transition: opacity .2s;
  35. -webkit-appearance: none;
  36. -webkit-box-flex: 1;
  37. -webkit-flex: 1;
  38. flex: 1;
  39. height: 100rpx;
  40. line-height: 100rpx;
  41. font-weight: 500;
  42. font-size: 28rpx;
  43. border: none;
  44. color: #fff;
  45. }
  46. .button-cart {
  47. background-color: #ffc03a;
  48. }
  49. .button-buy {
  50. background-color: #b91922;
  51. }
  52. </style>