index.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <image class="image" :src="oneUrl" mode=""></image>
  6. </view>
  7. <view class="two">
  8. <scroll-view scroll-y="true" class="scroll-view">
  9. <view class="list-scroll-view">
  10. <view class="list" v-for="(item,index) in list" :key="index" :style="{background:item.bgColor}">
  11. <view class="name">
  12. <text>{{item.name}}</text>
  13. </view>
  14. <image class="image" :src="item.url" mode=""></image>
  15. <view class="no_use" v-if="item.is_use==false">
  16. &nbsp;
  17. </view>
  18. </view>
  19. </view>
  20. </scroll-view>
  21. </view>
  22. </view>
  23. </mobile-frame>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. oneUrl: require('@/static/test.png'),
  30. list: [ //
  31. {
  32. name: '北京特产',
  33. url: require('@/static/test.png'),
  34. bgColor: '#FF6573',
  35. is_use: true
  36. },
  37. {
  38. name: '河北特产',
  39. url: require('@/static/test.png'),
  40. bgColor: '#448E51',
  41. is_use: false
  42. },
  43. {
  44. name: '天津特产',
  45. url: require('@/static/test.png'),
  46. bgColor: '#8A59B4',
  47. is_use: false
  48. },
  49. {
  50. name: '辽宁特产',
  51. url: require('@/static/test.png'),
  52. bgColor: '#2A669A',
  53. is_use: false
  54. },
  55. {
  56. name: '山西特产',
  57. url: require('@/static/test.png'),
  58. bgColor: '#794537',
  59. is_use: false
  60. },
  61. {
  62. name: '内蒙特产',
  63. url: require('@/static/test.png'),
  64. bgColor: '#397126',
  65. is_use: false
  66. },
  67. {
  68. name: '吉林特产',
  69. url: require('@/static/test.png'),
  70. bgColor: '#965400',
  71. is_use: false
  72. },
  73. {
  74. name: '黑龙江特产',
  75. url: require('@/static/test.png'),
  76. bgColor: '#005854',
  77. is_use: false
  78. },
  79. {
  80. name: '湖北特产',
  81. url: require('@/static/test.png'),
  82. bgColor: '#55C5C5',
  83. is_use: false
  84. },
  85. {
  86. name: '湖南特产',
  87. url: require('@/static/test.png'),
  88. bgColor: '#659100',
  89. is_use: false
  90. },
  91. {
  92. name: '江西特产',
  93. url: require('@/static/test.png'),
  94. bgColor: '#CF4779',
  95. is_use: false
  96. },
  97. {
  98. name: '河南特产',
  99. url: require('@/static/test.png'),
  100. bgColor: '#1F83B7',
  101. is_use: false
  102. },
  103. {
  104. name: '安徽特产',
  105. url: require('@/static/test.png'),
  106. bgColor: '#302760',
  107. is_use: false
  108. },
  109. {
  110. name: '上海特产',
  111. url: require('@/static/test.png'),
  112. bgColor: '#8E8A64',
  113. is_use: false
  114. },
  115. {
  116. name: '江苏特产',
  117. url: require('@/static/test.png'),
  118. bgColor: '#CF6B54',
  119. is_use: false
  120. },
  121. {
  122. name: '浙江特产',
  123. url: require('@/static/test.png'),
  124. bgColor: '#0B4864',
  125. is_use: false
  126. },
  127. {
  128. name: '山东特产',
  129. url: require('@/static/test.png'),
  130. bgColor: '#892557',
  131. is_use: false
  132. },
  133. {
  134. name: '福建特产',
  135. url: require('@/static/test.png'),
  136. bgColor: '#13607A',
  137. is_use: false
  138. },
  139. {
  140. name: '广东特产',
  141. url: require('@/static/test.png'),
  142. bgColor: '#FF6A52',
  143. is_use: false
  144. },
  145. {
  146. name: '海南特产',
  147. url: require('@/static/test.png'),
  148. bgColor: '#1D2F79',
  149. is_use: false
  150. },
  151. {
  152. name: '广西特产',
  153. url: require('@/static/test.png'),
  154. bgColor: '#DD863F',
  155. is_use: false
  156. },
  157. {
  158. name: '甘肃特产',
  159. url: require('@/static/test.png'),
  160. bgColor: '#118582',
  161. is_use: false
  162. },
  163. {
  164. name: '青海特产',
  165. url: require('@/static/test.png'),
  166. bgColor: '#9744B6',
  167. is_use: false
  168. },
  169. {
  170. name: '宁夏特产',
  171. url: require('@/static/test.png'),
  172. bgColor: '#048B50',
  173. is_use: false
  174. },
  175. {
  176. name: '新疆特产',
  177. url: require('@/static/test.png'),
  178. bgColor: '#5D832C',
  179. is_use: false
  180. },
  181. {
  182. name: '重庆特产',
  183. url: require('@/static/test.png'),
  184. bgColor: '#32A6BF',
  185. is_use: false
  186. },
  187. {
  188. name: '陕西特产',
  189. url: require('@/static/test.png'),
  190. bgColor: '#145342',
  191. is_use: false
  192. },
  193. {
  194. name: '四川特产',
  195. url: require('@/static/test.png'),
  196. bgColor: '#9C3140',
  197. is_use: false
  198. },
  199. {
  200. name: '贵州特产',
  201. url: require('@/static/test.png'),
  202. bgColor: '#7F8D02',
  203. is_use: false
  204. },
  205. {
  206. name: '云南特产',
  207. url: require('@/static/test.png'),
  208. bgColor: '#019585',
  209. is_use: false
  210. },
  211. {
  212. name: '西藏特产',
  213. url: require('@/static/test.png'),
  214. bgColor: '#B4A52E',
  215. is_use: false
  216. }
  217. ]
  218. };
  219. },
  220. onShow: function() {},
  221. methods: {
  222. }
  223. }
  224. </script>
  225. <style lang="scss">
  226. .main {
  227. display: flex;
  228. flex-direction: column;
  229. width: 96vw;
  230. height: 97vh;
  231. padding: 2vw;
  232. .one {
  233. margin: 0 0 2vw 0;
  234. .image {
  235. width: 100%;
  236. height: 50vw;
  237. }
  238. }
  239. .two {
  240. position: relative;
  241. flex-grow: 1;
  242. .list {
  243. position: relative;
  244. width: 27vw;
  245. margin: 0 0 2vw 0;
  246. border: 1px solid var(--f1Color);
  247. text-align: center;
  248. padding: 2vw;
  249. .name {
  250. text {
  251. font-size: var(--font16Size);
  252. border: 2px solid var(--f1Color);
  253. display: inline-block;
  254. color: var(--fffColor);
  255. padding: 1vw 2vw;
  256. margin: 0 0 2vw;
  257. border-radius: 5px;
  258. }
  259. }
  260. .image {
  261. width: 90%;
  262. height: 22vw;
  263. border-radius: 90px;
  264. }
  265. .no_use {
  266. position: absolute;
  267. top: 0;
  268. z-index: 999;
  269. width: 100%;
  270. height: 100%;
  271. left: 0;
  272. background-color: #f1f1f19f;
  273. }
  274. }
  275. }
  276. }
  277. .scroll-view {
  278. position: absolute;
  279. top: 0;
  280. left: 0;
  281. right: 0;
  282. bottom: 0;
  283. .list-scroll-view {
  284. display: flex;
  285. flex-direction: row;
  286. flex-wrap: wrap;
  287. }
  288. }
  289. </style>