index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <view :style="{ minHeight: sys.windowHeight + 'px' }"
  3. :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
  4. <tm-menubars title="添加穿搭" :shadow="0" :showback="true"></tm-menubars>
  5. <div class="zhuti">
  6. <!-- 衣橱 -->
  7. <tm-sheet class="yichu" style="margin-bottom: 40px !important;">
  8. <tm-tabs class="C1b1b1b qiehuan" color="white" align="left" v-model="activeIndex1" :list="list1" range-key="title"></tm-tabs>
  9. <view class="yiguicla black pa-6 ma-4 fl" v-for="(item,index) in quanbuList" @click="zidingyi(1)">
  10. <image :src="item.src" mode="widthFix"></image>
  11. <view class="text-size-m mt-20 mb-20 ml-10">{{item.text}}</view>
  12. </view>
  13. <view style="clear: both;" class="more ma-30 pt-40" @click="gengmore()">
  14. <image src="/static/img/30.png" mode="widthFix"></image>
  15. <text class="text-size-s">下拉加载更多~</text>
  16. </view>
  17. </tm-sheet>
  18. </div>
  19. <!-- 弹出层消息 -->
  20. <tm-message ref="toast"></tm-message>
  21. </view>
  22. </template>
  23. <script>
  24. import{myRequest} from '@/api/request.js'
  25. export default {
  26. data() {
  27. return {
  28. list:[ '预约穿搭'],
  29. list1:['时尚','商务'],
  30. activeIndex:0,
  31. activeIndex1:0,
  32. quanbuList:[{
  33. src:'/static/img/44.png',
  34. text:'日常穿搭',
  35. },{
  36. src:'/static/img/44.png',
  37. text:'日常穿搭',
  38. },{
  39. src:'/static/img/44.png',
  40. text:'日常穿搭',
  41. },{
  42. src:'/static/img/44.png',
  43. text:'日常穿搭',
  44. },{
  45. src:'/static/img/44.png',
  46. text:'日常穿搭',
  47. },{
  48. src:'/static/img/44.png',
  49. text:'日常穿搭',
  50. }],
  51. chooseindex:-1
  52. };
  53. },
  54. onLoad() {
  55. },
  56. created() {
  57. this.sys = uni.getSystemInfoSync();
  58. },
  59. methods: {
  60. dapei(){
  61. uni.navigateTo({
  62. url: "/pages/dapeizidingyi/index?off=1",
  63. })
  64. },
  65. gengmore(){
  66. },
  67. zidingyi(off){
  68. uni.navigateTo({
  69. url: "/pages/zidingyi/index?off="+off,
  70. })
  71. }
  72. },
  73. }
  74. </script>
  75. <style lang="scss">
  76. /deep/ .tm-menubars .body{
  77. background-color: #1b1b1b !important;
  78. }
  79. /deep/ .qiehuan1 .text-primary{color: white !important;}
  80. .chuanda{width: 100%;height: 144px;}
  81. .taiyang{width: 25px;}
  82. .bianji{border: 1px solid #303440;width: 80px;height: 30px;background: #303440;font-size: 15px;
  83. text-align: center;line-height: 30px;border-radius: 5px;margin: 0 auto;margin-top: 10px;border:1px solid white;}
  84. .scroll-view_H {
  85. white-space: nowrap;
  86. width: 100%;
  87. background: #1B1B1B;
  88. padding-bottom: 15px;
  89. }
  90. .scroll-view-item {
  91. height: 300rpx;
  92. text-align: center;
  93. font-size: 36rpx;
  94. }
  95. .scroll-view-item_H {
  96. display: inline-block;
  97. width: 150px;
  98. text-align: center;
  99. font-size: 36rpx;
  100. margin-left: 10px;
  101. background: #0D0D0D;
  102. padding: 6px;
  103. border-radius: 10px;
  104. }
  105. .yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;}
  106. /deep/ .qiehuan .text-white{
  107. font-size: 14px;
  108. background: #303440;
  109. height: 28px;
  110. vertical-align: middle;
  111. line-height: 28px;
  112. border-radius: 20px;
  113. padding-left: 14px;
  114. padding-right: 14px;
  115. margin-top: 17%;
  116. }
  117. /deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
  118. .yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
  119. .yiguicla{width: 47%;border-radius: 10px;}
  120. .more{text-align: center;}
  121. .more image{margin-right: 10px;vertical-align: middle;width: 30px;}
  122. .fudong{position:fixed;right:10px;bottom:150px;background: #303030;width: 130px;height: 60px;
  123. border-radius: 30px 0px 0px 30px;font-size: 14px;text-align: center;}
  124. .sao{width: 60%;display: block;margin: 0 auto;margin-bottom: 60px;}
  125. </style>