index.vue 4.0 KB

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