my-stock.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <view >
  3. <!-- 我的库存 -->
  4. <view class="content-top">
  5. <u-navbar :background="background" back-icon-color="#ffffff" is-fixed>
  6. <u-search placeholder="请输入轮胎规格" :show-action="false" v-model="keyword" style="margin-right: 26rpx;" @change="handleSearch"></u-search>
  7. </u-navbar>
  8. <u-tabs ref="tabs" :list="list" bg-color="#0094FE" active-color="#ffffff" inactive-color="#ffffff" font-size="30" :current="current" @change="handleFilterBrand"></u-tabs>
  9. </view>
  10. <view class="content-center">
  11. <view class="list-row u-flex list-title">
  12. <view class="list-left">轮胎规格</view>
  13. <view class="list-right">库存</view>
  14. </view>
  15. <view class="list-row u-flex">
  16. <view class="list-left">赛轮 12R22.5 152/149K 18PR S838</view>
  17. <view class="list-right">160</view>
  18. </view>
  19. <view class="list-row u-flex">
  20. <view class="list-left">赛轮 12R22.5 152/149K 18PR S838</view>
  21. <view class="list-right">160</view>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. export default {
  28. data() {
  29. return {
  30. background: {
  31. backgroundColor: "#0291FD",
  32. },
  33. keyword: "",
  34. current: 0,
  35. list: [{
  36. name: "全部"
  37. },{
  38. name: "黑骑士"
  39. },{
  40. name: "路极"
  41. },{
  42. name: "黑盾"
  43. },{
  44. name: "赛轮"
  45. }]
  46. }
  47. },
  48. methods: {
  49. handleSearch: function(v){
  50. console.log(v)
  51. },
  52. handleFilterBrand: function(v2){
  53. this.current = v2
  54. console.log(arguments);
  55. console.log(v2)
  56. }
  57. }
  58. }
  59. </script>
  60. <style lang="scss" scoped>
  61. .content-top{
  62. background-color: #0094FE;
  63. padding-bottom: 119rpx;
  64. }
  65. .content-center{
  66. width: 712rpx;
  67. margin: -106rpx auto 0 auto;
  68. border-radius: 20rpx;
  69. background-color: #FFFFFF;
  70. height: 335rpx;
  71. padding: 26rpx;
  72. .list-row{
  73. justify-content: space-between;
  74. border-bottom: 1px solid #E8E8E8;
  75. padding: 32rpx 0;
  76. .list-right{
  77. color: #149EE2;
  78. text-decoration: underline;
  79. }
  80. }
  81. .list-row.list-title{
  82. padding-top: 0;
  83. font-weight: 600;
  84. .list-right{
  85. color: #4D4D4D;
  86. font-weight: 400;
  87. text-decoration: none;
  88. }
  89. }
  90. }
  91. </style>