青蛙卖大米小程序2024-11-24
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

448 lines
8.4 KiB

6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
  1. <template>
  2. <view class="page">
  3. <navbar bgColor="#88D259" />
  4. <view class="bg-color"></view>
  5. <view class="page-title">
  6. 三只青蛙
  7. </view>
  8. <view class="search">
  9. <uv-search placeholder="搜你喜欢的产品" bgColor="#fff" v-model="keyword"></uv-search>
  10. </view>
  11. <view class="swipe">
  12. <uv-swiper :list="bannerList" indicator height="320rpx" keyName="url"></uv-swiper>
  13. </view>
  14. <view class="notice">
  15. <uv-notice-bar fontSize="32rpx" :text="notice"></uv-notice-bar>
  16. </view>
  17. <view class="menu">
  18. <uv-grid :border="false" :col="4">
  19. <uv-grid-item v-for="(item,index) in baseList" :key="index">
  20. <image :src="item.image" mode=""></image>
  21. <text class="menu-text">{{item.title}}</text>
  22. </uv-grid-item>
  23. </uv-grid>
  24. </view>
  25. <view class="map">
  26. <image src="../../static/image/home/8.png" mode="aspectFill" />
  27. </view>
  28. <view class="commodity">
  29. <view class="box">
  30. <view class="top">
  31. <view class="top-text">
  32. <view>Experience the product</view>
  33. <view>体验产品 ___ _</view>
  34. </view>
  35. </view>
  36. <view class="centre">
  37. <view class="boxs">
  38. <view class="box-text">
  39. <view>三只青蛙低GI大米</view>
  40. <view>5斤每盒*3</view>
  41. <text class="text1">225</text>
  42. <text class="text2">原价375</text>
  43. </view>
  44. <view class="box-img">
  45. <image src="../../static/logo.png" mode="aspectFill"></image>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. <view class="commodity">
  52. <view class="box">
  53. <view class="top">
  54. <view class="top-text">
  55. <view>Experience the product</view>
  56. <view>常规产品 ___ _</view>
  57. </view>
  58. </view>
  59. <view class="centre">
  60. <view class="boxs">
  61. <view class="box-text">
  62. <view>三只青蛙低GI大米</view>
  63. <view>5斤每盒*3</view>
  64. <text class="text1">225</text>
  65. <text class="text2">原价375</text>
  66. </view>
  67. <view class="box-img">
  68. <image src="../../static/logo.png" mode="aspectFill"></image>
  69. </view>
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. <view class="commodity">
  75. <view class="box">
  76. <view class="top">
  77. <view class="top-text">
  78. <view>Experience the product</view>
  79. <view>新闻动态 ___ _</view>
  80. </view>
  81. <view class="top1" @click="$utils.navigateTo('/pages_order/home/journalism')">
  82. 更多
  83. </view>
  84. </view>
  85. <view class="centre">
  86. <view class="boxs">
  87. <view class="images">
  88. <image src="../../static/image/home/9.png" mode="aspectFill"></image>
  89. </view>
  90. <view class="box-fone">
  91. <view>新闻标题</view>
  92. <view>说明文字说明文字说明文字说明文字说明文字</view>
  93. </view>
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. <view class="qr">
  99. <view class="scan">扫码关注公众号</view>
  100. <view class="qr-scan">
  101. <image src="../../static/image/home/10.png" mode="aspectFill"></image>
  102. </view>
  103. <view class="qr-bottom">
  104. <view>保存公众号二维码图片</view>
  105. <view>长按识别公众号</view>
  106. </view>
  107. </view>
  108. <PrivacyAgreementPoup />
  109. <tabber select="home" />
  110. </view>
  111. </template>
  112. <script>
  113. import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
  114. import Position from '@/utils/position.js'
  115. import tabber from '@/components/base/tabbar.vue'
  116. import {
  117. mapGetters
  118. } from 'vuex'
  119. export default {
  120. components: {
  121. tabber,
  122. PrivacyAgreementPoup,
  123. },
  124. data() {
  125. return {
  126. area: '长沙',
  127. notice: '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....',
  128. bannerList: [{
  129. url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  130. },
  131. {
  132. url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  133. },
  134. {
  135. url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  136. },
  137. ],
  138. baseList: [{
  139. image: '/static/image/home/0.png',
  140. title: '关于我们',
  141. },
  142. {
  143. image: '/static/image/home/1.png',
  144. title: '产品介绍',
  145. },
  146. {
  147. image: '/static/image/home/2.png',
  148. title: '促销活动',
  149. },
  150. {
  151. image: '/static/image/home/3.png',
  152. title: '商城',
  153. },
  154. {
  155. image: '/static/image/home/4.png',
  156. title: '邀请好友',
  157. },
  158. {
  159. image: '/static/image/home/5.png',
  160. title: '新闻中心',
  161. },
  162. {
  163. image: '/static/image/home/6.png',
  164. title: '校企合作',
  165. },
  166. {
  167. image: '/static/image/home/7.png',
  168. title: '联系我们',
  169. },
  170. ],
  171. productList: [],
  172. keyword: '',
  173. }
  174. },
  175. computed: {},
  176. methods: {}
  177. }
  178. </script>
  179. <style scoped lang="scss">
  180. .page {
  181. .bg-color {
  182. width: 100%;
  183. position: absolute;
  184. top: 0;
  185. left: 0;
  186. height: 550rpx;
  187. background: linear-gradient(to bottom, #88D259, #88D259, #fff);
  188. }
  189. .page-title {
  190. position: relative;
  191. margin-left: 30rpx;
  192. margin-bottom: 30rpx;
  193. }
  194. .search {
  195. position: relative;
  196. background: #FFFFFF;
  197. margin: 20rpx;
  198. border-radius: 41rpx;
  199. padding: 10rpx 20rpx;
  200. display: flex;
  201. align-items: center;
  202. /deep/ .uv-search__action {
  203. background-color: $uni-color;
  204. color: #FFFFFF;
  205. padding: 10rpx 20rpx;
  206. border-radius: 30rpx;
  207. }
  208. }
  209. .swipe {
  210. position: relative;
  211. overflow: hidden;
  212. border-radius: 20rpx;
  213. margin: 20rpx;
  214. }
  215. .menu {
  216. margin: 20rpx;
  217. border-radius: 20rpx;
  218. padding: 20rpx;
  219. background-color: #fff;
  220. box-shadow: 0 0 10rpx 10rpx #00000009;
  221. image {
  222. width: 80rpx;
  223. height: 80rpx;
  224. margin-top: 10rpx;
  225. }
  226. .menu-text {
  227. font-size: 28rpx;
  228. margin-bottom: 10rpx;
  229. margin-top: 10rpx;
  230. }
  231. }
  232. .notice {
  233. margin: 0 20rpx;
  234. /deep/ .uv-notice-bar {
  235. background: linear-gradient(to right, #f9edc9, #dfedd6);
  236. border-radius: 16rpx;
  237. }
  238. /deep/ .uv-notice {
  239. padding: 14rpx 0;
  240. }
  241. /deep/ .uv-icon__icon {
  242. font-size: 36rpx !important;
  243. color: #000 !important;
  244. }
  245. }
  246. .map {
  247. margin: 20rpx;
  248. height: 100rpx;
  249. border-radius: 16rpx;
  250. image {
  251. width: 100%;
  252. height: 100%;
  253. }
  254. }
  255. .commodity {
  256. display: flex;
  257. justify-content: center;
  258. align-items: center;
  259. margin: 20rpx;
  260. border-radius: 16rpx;
  261. background-color: #fff;
  262. .box {
  263. width: 100%;
  264. margin: 20rpx;
  265. .top {
  266. display: flex;
  267. border-left: 6rpx solid #A3D250;
  268. align-items: center;
  269. justify-content: space-between;
  270. .top-text {
  271. margin-left: 20rpx;
  272. view:nth-child(1) {
  273. font-size: 24rpx;
  274. color: #474747;
  275. }
  276. view:nth-child(2) {
  277. font-size: 32rpx;
  278. color: #A3D250;
  279. font-weight: 600;
  280. }
  281. }
  282. .top1 {
  283. font-size: 26rpx;
  284. color: #fff;
  285. padding: 10rpx 30rpx;
  286. background-color: #F6CD59;
  287. border-radius: 30rpx;
  288. }
  289. }
  290. }
  291. .centre {
  292. margin: 40rpx 20rpx;
  293. display: flex;
  294. align-items: center;
  295. justify-content: center;
  296. .boxs {
  297. display: flex;
  298. width: 100%;
  299. align-items: center;
  300. .images {
  301. width: 180rpx;
  302. height: 140rpx;
  303. flex-shrink: 0;
  304. border-radius: 8rpx;
  305. overflow: hidden;
  306. image {
  307. width: 100%;
  308. height: 100%;
  309. }
  310. }
  311. .box-fone {
  312. margin-left: 20rpx;
  313. view:nth-child(1) {
  314. font-size: 36rpx;
  315. color: #474747;
  316. }
  317. view:nth-child(2) {
  318. margin-top: 10rpx;
  319. font-size: 28rpx;
  320. color: #A2A2A2;
  321. }
  322. }
  323. .box-text,
  324. .box-img {
  325. flex: 1;
  326. }
  327. .box-text {
  328. view:nth-child(1) {
  329. font-size: 32rpx;
  330. font-weight: 500;
  331. margin-top: 30rpx;
  332. }
  333. view:nth-child(2) {
  334. font-size: 28rpx;
  335. color: #CCCCCC;
  336. margin-bottom: 30rpx;
  337. }
  338. .text1 {
  339. color: red;
  340. font-size: 68rpx;
  341. }
  342. .text2 {
  343. font-size: 28rpx;
  344. color: #CCCCCC;
  345. }
  346. }
  347. .box-img {
  348. image {
  349. height: 100%;
  350. width: 100%;
  351. }
  352. }
  353. }
  354. }
  355. }
  356. .qr {
  357. margin-top: 40rpx;
  358. .scan {
  359. text-align: center;
  360. font-size: 28rpx;
  361. color: #A2A2A2;
  362. }
  363. .qr-scan {
  364. margin: 20rpx auto;
  365. width: 400rpx;
  366. height: 400rpx;
  367. image {
  368. height: 100%;
  369. width: 100%;
  370. }
  371. }
  372. .qr-bottom {
  373. display: flex;
  374. font-size: 28rpx;
  375. color: #A2A2A2;
  376. justify-content: space-around;
  377. view {
  378. border: 2rpx solid #A2A2A2;
  379. padding: 20rpx;
  380. border-radius: 45rpx;
  381. }
  382. }
  383. }
  384. }
  385. </style>