choice.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <view class="content">
  3. <view class="zhidingyiBox">
  4. <view class="zhidingyi">
  5. <view class="zdyLeft">
  6. <view class="zdyTitle">自定义图片</view>
  7. <view class="zdyms">建议尺寸:宽度750*390px</view>
  8. <view class="zdyms" style="padding-top: 24rpx;">请先上传自定义活动图片 后编辑活动内容</view>
  9. </view>
  10. <view class="zdyRight">
  11. <image src="../../static/img/bg_sucai@2x.png" mode="" class="zdyRightImg"></image>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="listBox">
  16. <view class="listLine" v-for="(item,i) in list">
  17. <view class="listTitle">{{item.Name}}</view>
  18. <view class="listSm">{{item.collectingComment}}</view>
  19. <scroll-view scroll-x="true" class="scroll-X" >
  20. <view class="listLineImgBox" >
  21. <view class="" v-for="(img,index) in item.imgList" @click="goAdd(img)">
  22. <image class="listLineImg" :src="img.Img" mode=""></image>
  23. </view>
  24. </view>
  25. </scroll-view>
  26. </view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. list:'',
  35. }
  36. },
  37. onLoad() {
  38. this.getSetTheGuestList();
  39. //?token=1BAD122A96BA41E49200322381DC5D34&uid=DC0B84EA-A67B-4A4B-8EAE-F55A13CF8217
  40. },
  41. methods: {
  42. goAdd(item){
  43. uni.navigateTo({
  44. url:'addActivity?img='+item.Img
  45. })
  46. },
  47. getSetTheGuestList(){
  48. uni.showLoading({
  49. title: '加载中'
  50. })
  51. this.$http('openH5SetTheGuest/getSetTheGuestList', {
  52. },'GET').then(res => {
  53. uni.hideLoading();
  54. this.list=res.data
  55. })
  56. }
  57. }
  58. }
  59. </script>
  60. <style scoped>
  61. .content{
  62. min-height: 100vh;
  63. background:#F4F5F7 ;
  64. }
  65. .zhidingyiBox{
  66. padding: 20rpx 24rpx;
  67. }
  68. .zhidingyi{
  69. background: #ffffff;
  70. border-radius: 10rpx;
  71. display: flex;
  72. justify-content: space-between;
  73. }
  74. .zdyRightImg{
  75. width: 217rpx;
  76. height: 210rpx;
  77. }
  78. .zdyLeft{
  79. padding-top: 50rpx;
  80. padding-left: 20rpx;
  81. width: 300rpx;
  82. } .zdyTitle{
  83. color: #333333;
  84. line-height: 42rpx;
  85. font-size: 30rpx;
  86. font-weight: 500;
  87. padding-bottom: 16rpx;
  88. }
  89. .zdyms{
  90. font-weight: 400;
  91. color: #999999;
  92. line-height: 33rpx;
  93. font-size: 24rpx;
  94. }
  95. .zdyRight{
  96. padding: 35rpx 30rpx;
  97. }
  98. .listBox{
  99. background: #ffffff;
  100. }
  101. .listLine{
  102. padding-left: 24rpx;
  103. padding-top: 30rpx;
  104. }
  105. .listLineImg{
  106. width: 630rpx;
  107. height: 252rpx;
  108. margin-right: 30rpx;
  109. border-radius: 10rpx;
  110. }
  111. .listLineImgBox{
  112. display: flex;
  113. }
  114. .listTitle{
  115. font-weight: 500;
  116. color: #333333;
  117. font-size: 30rpx;
  118. }
  119. .listSm{
  120. font-weight: 400;
  121. color: #999999;
  122. line-height: 33px;
  123. font-size: 24rpx;
  124. width: 702rpx;
  125. height: 33rpx;
  126. }
  127. </style>