index.vue 3.9 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. <!-- <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()">
  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. gengmore(){
  65. },
  66. zidingyi(){
  67. uni.navigateTo({
  68. url: "/pages/zidingyi/index?type=2",
  69. })
  70. }
  71. },
  72. }
  73. </script>
  74. <style lang="scss">
  75. /deep/ .tm-menubars .body{
  76. background-color: #1b1b1b !important;
  77. }
  78. /deep/ .qiehuan1 .text-primary{color: white !important;}
  79. .chuanda{width: 100%;height: 144px;}
  80. .taiyang{width: 25px;}
  81. .bianji{border: 1px solid #303440;width: 80px;height: 30px;background: #303440;font-size: 15px;
  82. text-align: center;line-height: 30px;border-radius: 5px;margin: 0 auto;margin-top: 10px;border:1px solid white;}
  83. .scroll-view_H {
  84. white-space: nowrap;
  85. width: 100%;
  86. background: #1B1B1B;
  87. padding-bottom: 15px;
  88. }
  89. .scroll-view-item {
  90. height: 300rpx;
  91. text-align: center;
  92. font-size: 36rpx;
  93. }
  94. .scroll-view-item_H {
  95. display: inline-block;
  96. width: 150px;
  97. text-align: center;
  98. font-size: 36rpx;
  99. margin-left: 10px;
  100. background: #0D0D0D;
  101. padding: 6px;
  102. border-radius: 10px;
  103. }
  104. .yichu{margin:0 !important;padding: 4px !important;margin-top: 10px !important;}
  105. /deep/ .qiehuan .text-white{
  106. font-size: 14px;
  107. background: #303440;
  108. height: 28px;
  109. vertical-align: middle;
  110. line-height: 28px;
  111. border-radius: 20px;
  112. padding-left: 14px;
  113. padding-right: 14px;
  114. margin-top: 17%;
  115. }
  116. /deep/ .qiehuan .tm-tabs-con-item-border{display: none;}
  117. .yiguicla image{width: 95%;display: block;margin: 0 auto;margin-top: 5px;}
  118. .yiguicla{width: 47%;border-radius: 10px;}
  119. .more{text-align: center;}
  120. .more image{margin-right: 10px;vertical-align: middle;width: 30px;}
  121. .fudong{position:fixed;right:10px;bottom:150px;background: #303030;width: 130px;height: 60px;
  122. border-radius: 30px 0px 0px 30px;font-size: 14px;text-align: center;}
  123. .sao{width: 60%;display: block;margin: 0 auto;margin-bottom: 60px;}
  124. .biaoti view{width:5px;height:19px;background: #0178FD;float: left;border-radius: 10px;}
  125. </style>