devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

省钱兄校园跑腿源码（公众号+APP+小程序+Android+IOS）校园跑腿社区跑腿同城跑腿任务兼职小程序uniapp前端模版_校园跑腿平台源码

作者：知新_RL | 2024-06-18 03:42:38

赞

踩

校园跑腿平台源码

开源代码是用户端uniapp部分源码，使用hbuilder导入即可运行

只提供参考学习使用！已经获得软著！不可商业使用！感谢支持

h5体验地址

h5：https://paotui.xianmxkj.com

APP下载链接：

https://paotui.xianmxkj.com/paotui.apk

小程序体验 微信搜索：省钱兄科技

二、技术栈

后台服务 springboot+mybatisplus+mysql

用户端 uniapp（vue语法）

管理后台 vue+elementUi

源码下载地址：

​​​​​​​省钱兄跑腿源码（公众号+APP+小程序+Android+IOS）校园跑腿小程序社区跑腿uniapp前端模版_校园跑腿小程序-小程序文档类资源-CSDN下载

免费uniapp视频学习资料

关注我的技术公众号【码兄】回复【uniapp】获取 

免费提供学习视频

VUE、小程序、公众号、Android、JAVA、C、C++、Python等各类语言学习视频
 

  1. <template>
  2. 	<view class="container">
  3. 		<view class="header">
  4. 			<view class="nav">
  5. 				<view class="navLeft" @tap="goSelectCity">
  6. 					<image src="../../static/img/home/1.png"></image>
  7. 					<view class="localName">{{ localCampus }}</view>
  8. 					<text class="cuIcon-right"></text>
  9. 				</view>
  10. 				<view class="navRight" @tap="goMessage">
  11. 					<image src="../../static/img/home/info.png"></image>
  12. 				</view>
  13. 			</view>
  14. 			<view class="search-box">
  15. 				<view class="search-wrap" @tap="goSearch">
  16. 					<image class="search-icon" src="../../static/img/home/search.png"></image>
  17. 					<input class="search-input" type="text" value="输入关键字搜索任务" disabled />
  18. 				</view>
  19. 			</view>
  20. 		</view>
  21. 		<view class="main">
  22. 			<view class="home-bgi">
  23. 				<swiper class="swiper" autoplay="1500" :indicator-dots="true" :circular='true'
  24. 					indicator-active-color="#ffffff" indicator-color="#cccccc">
  25. 					<swiper-item class="swiper-wrap" v-for="(item,index) in banners" :key='index'>
  26. 						<image :src="item.imageUrl"></image>
  27. 					</swiper-item>
  28. 				</swiper>
  29. 			</view>
  30. 			<view class="menu-box">
  31. 				<view class="category">
  32. 					<swiper class="swiper" duration="300" :style="{ height: categoryHeight }">
  33. 						<swiper-item v-for="(nav, index) in navlist" :key="index">
  34. 							<view class="category-list">
  35. 								<view class="icon-box" v-for="(item,ind) in nav" :key="ind" @tap="toNavList(item, ind)">
  36. 									<image class="icon" :src="item.classifyIcon" style="height: 100rpx;width: 100rpx">
  37. 									</image>
  38. 									<view class="text">{{ item.classifyName }}</view>
  39. 								</view>
  40. 							</view>
  41. 						</swiper-item>
  42. 					</swiper>
  43. 					<view class="dots">
  44. 						<view v-for="(page, pageindex) in navlist" :key="pageindex"
  45. 							:class="{ active: pageindex == currentPageindex }"></view>
  46. 					</view>
  47. 				</view>
  48. 			</view>
  49. 			<view class="demand-release">
  50. 				<view class="title">发布需求</view>
  51. 				<view class="search-wrap">
  52. 					<text>我需要</text>
  53. 					<input class="search-input" type="text" v-model="content" placeholder="请填写需求"
  54. 						placeholder-class="placeholder-search-input" />
  55. 				</view>
  56. 				<view class="search-wrap">
  57. 					<text>手机号</text>
  58. 					<input class="search-input" type="text" v-model="phone" placeholder="请填写手机号" :disabled="!isDisable"
  59. 						maxlength="11" placeholder-class="placeholder-search-input" />
  60. 					<view class="edit" @tap='edit()'>修改</view>
  61. 				</view>
  62. 				<view class="btn" @tap='sendDemand()'>马上发布需求</view>
  63. 			</view>
  64. 			<view class="card-box">
  65. 				<view class="title" v-if="goodsHomeList.length > 0">最新任务</view>
  66. 				<task-home-list splitLine @click="clickItem" :list="goodsHomeList"></task-home-list>
  67. 				<!-- 暂无数据展示 -->
  68. 				<!-- <empty v-if="goodsHomeList.length === 0" des="暂无最新订单" show="false"></empty> -->
  69. 			</view>
  70. 			<!-- 加载更多提示 -->
  71. 			<view v-if="goodsHomeList.length > 0">
  72. 				<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
  73. 			</view>
  74. 		</view>
  75. 	</view>
  76. </template>
  77.  
  78. <script>
  79. 	import taskHomeList from "@/components/mask/task-home-list.vue"
  80. 	export default {
  81. 		components: {
  82. 			taskHomeList
  83. 		},
  84. 		data() {
  85. 			return {
  86. 				localCampus: '陕西师范大学',
  87. 				banners: [],
  88. 				categoryHeight: '320rpx', //菜单默认高度
  89. 				currentPageindex: 0, //菜单滚动小点
  90. 				navlist: [{
  91. 						url: '../../static/img/home/2.png',
  92. 						title: '找人代买'
  93. 					},
  94. 					{
  95. 						url: '../../static/img/home/3.png',
  96. 						title: '外卖代拿'
  97. 					},
  98. 					{
  99. 						url: '../../static/img/home/4.png',
  100. 						title: '找人陪跑'
  101. 					},
  102. 					{
  103. 						url: '../../static/img/home/5.png',
  104. 						title: '找人代办'
  105. 					},
  106. 					{
  107. 						url: '../../static/img/home/6.png',
  108. 						title: '快递代拿'
  109. 					}
  110. 				],
  111. 				content: "",
  112. 				phone: "",
  113. 				isDisable: false,
  114. 				goodsHomeList: [],
  115. 				page: 1,
  116. 				limit: 10,
  117. 				loadingType: 0,
  118. 				contentText: {
  119. 					contentdown: '上拉显示更多',
  120. 					contentrefresh: '正在加载...',
  121. 					contentnomore: '没有更多数据了'
  122. 				},
  123. 				arr: [],
  124. 				showModal: true
  125. 			}
  126. 		},
  127. 		onLoad() {
  128. 			let isLogin = this.yu.isLogin();
  129. 			let userId = this.yu.getCache('userId');
  130. 			if (isLogin) {
  131. 				this.getUserInfo(userId);
  132. 			} else {
  133. 				this.initCampusList();
  134. 			}
  135. 			this.localCampus = this.yu.getCache('campusName') ? this.yu.getCache('campusName') : this.localCampus;
  136. 			// console.log('this.localCampus',this.localCampus)
  137. 			
  138. 			this.$Request.getT('/common/type/121').then(res => { //报名成功通知
  139. 				if (res.code == 0) {
  140. 					if (res.data && res.data.value) {
  141. 						// that.orderStart = res.data;
  142. 						this.arr.push(res.data.value)
  143. 					}
  144. 				}
  145. 			})
  146. 			this.$Request.getT('/common/type/122').then(res => { //活动即将开始提醒
  147. 				if (res.code == 0) {
  148. 					if (res.data && res.data.value) {
  149. 						// that.orderStart = res.data;
  150. 						this.arr.push(res.data.value)
  151. 					}
  152. 				}
  153. 			})
  154. 		},
  155. 		onShow() {
  156. 			let isLogin = this.yu.isLogin();
  157. 			let phone = this.yu.getCache('mobile');
  158. 			let userId = this.yu.getCache('userId');
  159. 			this.getSelectBanner(1);
  160. 			this.getMenuList();
  161. 			this.localCampus = this.yu.getCache('campusName') ? this.yu.getCache('campusName') : this.localCampus;
  162. 		
  163. 			if (!isLogin) {
  164. 				setTimeout(() => {
  165. 					this.page = 1;
  166. 					this.goodsHomeList = [];
  167. 					if (this.yu.getCache('campus')) {
  168. 						this.campusId = this.yu.getCache('campus');
  169. 					}
  170. 					this.getNewHelpOrderList();
  171. 				}, 10)
  172. 			} else {
  173. 				this.page = 1;
  174. 				this.goodsHomeList = [];
  175. 				if (this.yu.getCache('campus')) {
  176. 					this.campusId = this.yu.getCache('campus');
  177. 				}
  178. 				this.getNewHelpOrderList();
  179. 				//订阅
  180. 				if(this.showModal) {
  181. 					this.openMsg()
  182. 				}
  183. 			}
  184. 			if (phone && phone !== 'undefined') {
  185. 				this.phone = phone;
  186. 			} else {
  187. 				this.phone = '';
  188. 			}
  189. 		},
  190. 		onHide() {
  191. 			this.content = ""
  192. 		},
  193. 		methods: {
  194. 			// 开启订阅消息
  195. 			openMsg() {
  196. 				console.log('订阅消息')
  197. 				var that = this
  198. 				wx.getSetting({
  199. 					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
  200. 					success(ret) {
  201. 						console.log(ret,'------------------')
  202. 						// console.log(ret.subscriptionsSetting.itemSettings)
  203. 						// console.log(Object.keys(ret.subscriptionsSetting.itemSettings).length)
  204. 						// if (JSON.stringify(ret.subscriptionsSetting.itemSettings).indexOf('accept')!=-1) {
  205. 						if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
  206. 							uni.setStorageSync('sendMsg', true)
  207. 							// wx.requestSubscribeMessage({
  208. 							// 	tmplIds: that.arr,
  209. 							// 	success(re) {
  210. 							// 		console.log(JSON.stringify(re), 111111111111)
  211. 							// 		var datas = JSON.stringify(re);
  212. 							// 		if (datas.indexOf("accept") != -1) {
  213. 							// 			console.log(re)
  214. 							// 		}
  215. 							// 	},
  216. 							// 	fail: (res) => {
  217. 							// 		console.log(res)
  218. 							// 	}
  219. 							// })
  220. 						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
  221. 							uni.setStorageSync('sendMsg', false)
  222. 							uni.showModal({
  223. 								title: '提示',
  224. 								content: '为了更好的体验,请绑定消息推送',
  225. 								confirmText: '确定',
  226. 								cancelText: '取消',
  227. 								success: function(res) {
  228. 									if (res.confirm) {
  229. 										console.log(res,'--------------------')
  230. 										wx.requestSubscribeMessage({
  231. 											tmplIds: that.arr,
  232. 											success(re) {
  233. 												console.log(JSON.stringify(re), 111111111111)
  234. 												var datas = JSON.stringify(re);
  235. 												if (datas.indexOf("accept") != -1) {
  236. 													console.log(re)
  237. 												}
  238. 											},
  239. 											fail: (res) => {
  240. 												console.log(res)
  241. 											}
  242. 										})
  243. 										that.showModal = false
  244. 									} else if (res.cancel) {
  245. 										console.log('取消')
  246. 										that.showModal = true
  247. 									}
  248. 								}
  249. 							})
  250. 						}
  251. 					}
  252. 				})
  253. 			},
  254. 			goSearch() {
  255. 				if (uni.getStorageSync('sendMsg')) {
  256. 					wx.requestSubscribeMessage({
  257. 						tmplIds: this.arr,
  258. 						success(re) {
  259. 							var datas = JSON.stringify(re);
  260. 							if (datas.indexOf("accept") != -1) {
  261. 								console.log(re)
  262. 							}
  263. 						},
  264. 						fail: (res) => {
  265. 							console.log(res)
  266. 						}
  267. 					})
  268. 				}
  269. 				uni.navigateTo({
  270. 					url: '/pages/task/search'
  271. 				});
  272. 			},
  273. 			goSelectCity() {
  274. 				if (uni.getStorageSync('sendMsg')) {
  275. 					wx.requestSubscribeMessage({
  276. 						tmplIds: this.arr,
  277. 						success(re) {
  278. 							console.log(JSON.stringify(re), 111111111111)
  279. 							var datas = JSON.stringify(re);
  280. 							if (datas.indexOf("accept") != -1) {
  281. 								console.log(re)
  282. 							}
  283. 						},
  284. 						fail: (res) => {
  285. 							console.log(res)
  286. 						}
  287. 					})
  288. 				}
  289. 				uni.navigateTo({
  290. 					url: '/pages/index/selectCampus?localCampus=' + this.localCampus
  291. 				});
  292. 			},
  293. 			initCampusList() {
  294. 				let that = this;
  295. 				that.yu.request('/helpCampus/selectCampusList', 'GET').then(res => {
  296. 					if (res.code === 0) {
  297. 						if (res.data.length !== 0) {
  298. 							this.campusId = res.data[0].campusId;
  299. 							this.localCampus = res.data[0].campusName;
  300. 							this.yu.setCache("campus", res.data[0].campusId);
  301. 							this.yu.setCache("campusName", res.data[0].campusName);
  302. 							// this.getNewHelpOrderList();
  303. 						}
  304. 					}
  305. 				});
  306. 			},
  307. 			goMessage: function() {
  308. 				if (uni.getStorageSync('sendMsg')) {
  309. 					wx.requestSubscribeMessage({
  310. 						tmplIds: this.arr,
  311. 						success(re) {
  312. 							console.log(JSON.stringify(re), 111111111111)
  313. 							var datas = JSON.stringify(re);
  314. 							if (datas.indexOf("accept") != -1) {
  315. 								console.log(re)
  316. 							}
  317. 						},
  318. 						fail: (res) => {
  319. 							console.log(res)
  320. 						}
  321. 					})
  322. 				}
  323. 				let token = this.yu.getCache('token');
  324. 				if (token) {
  325. 					uni.navigateTo({
  326. 						url: '/pages/task/renwu'
  327. 					});
  328. 				} else {
  329. 					this.goLogin();
  330. 				}
  331. 			},
  332. 			getSelectBanner(index) {
  333. 				this.yu.request('/banner/selectBannerList?classify=' + index + '&state=1', 'GET').then(res => {
  334. 					if (res.code === 0) {
  335. 						this.banners = res.data;
  336. 						uni.stopPullDownRefresh();
  337. 					}
  338. 				});
  339. 			},
  340. 			getMenuList() {
  341. 				this.yu.request('/helpClassify/selectClassifyList', 'GET').then(res => {
  342. 					if (res.code === 0) {
  343. 						if (res.data.length > 0) {
  344. 							var dataNew = this.chunk(res.data, 10)
  345. 							this.navlist = dataNew;
  346. 							if (res.data.length > 5) {
  347. 								this.categoryHeight = "320rpx"
  348. 							} else {
  349. 								this.categoryHeight = "160rpx"
  350. 							}
  351. 						}
  352. 						uni.stopPullDownRefresh();
  353. 					}
  354. 				});
  355. 			},
  356. 			goLogin() {
  357. 				this.yu.setCache('href', '/pages/index/index');
  358. 				uni.navigateTo({
  359. 					url: '/pages/public/login'
  360. 				});
  361. 			},
  362. 			getNewHelpOrderList(type) {
  363. 				let postData = {
  364. 					page: this.page,
  365. 					limit: this.limit,
  366. 					campus: this.campusId
  367. 				}
  368. 				this.loadingType = 1;
  369. 				this.yu.request('/help/selectNewHelpOrderList', 'GET', postData).then(res => {
  370. 					if (res.code === 0) {
  371. 						if (this.page === 1) {
  372. 							this.goodsHomeList = [];
  373. 						}
  374. 						uni.hideLoading();
  375. 						if (res.data.list) {
  376. 							res.data.list.forEach(dd => {
  377. 								this.yu.request('/helpClassify/selectClassifyList', 'GET').then(ress => {
  378. 									if (ress.code === 0) {
  379. 										ress.data.forEach(ddd => {
  380. 											if (dd.classifyId == ddd.id) {
  381. 												dd.classifyName = ddd.classifyName
  382. 											}
  383. 										});
  384. 										dd.imageUrl = dd.imageUrl != null ? dd.imageUrl :
  385. 											'/static/img/logo.png'
  386. 										this.goodsHomeList.push(dd);
  387. 									}
  388. 								});
  389. 							});
  390. 							console.log('goodsList', this.goodsHomeList)
  391. 						}
  392. 						if (res.data.list.length === this.limit) {
  393. 							this.loadingType = 0;
  394. 						} else {
  395. 							this.loadingType = 3;
  396. 						}
  397. 					} else {
  398. 						this.loadingType = 2;
  399. 					}
  400. 					if (type === "refresh") {
  401. 						uni.stopPullDownRefresh();
  402. 					}
  403. 				})
  404. 			},
  405. 			clickItem: function(options) {
  406. 				if (uni.getStorageSync('sendMsg')) {
  407. 					wx.requestSubscribeMessage({
  408. 						tmplIds: this.arr,
  409. 						success(re) {
  410. 							console.log(JSON.stringify(re), 111111111111)
  411. 							var datas = JSON.stringify(re);
  412. 							if (datas.indexOf("accept") != -1) {
  413. 								console.log(re)
  414. 							}
  415. 						},
  416. 						fail: (res) => {
  417. 							console.log(res)
  418. 						}
  419. 					})
  420. 				}
  421. 				// console.log('点击',options)
  422. 				uni.navigateTo({
  423. 					url: '/pages/index/taskDetail?helpOrderId=' + options.item.id
  424. 				})
  425. 			},
  426. 			toNavList: function(item, ind) {
  427. 				if (uni.getStorageSync('sendMsg')) {
  428. 					wx.requestSubscribeMessage({
  429. 						tmplIds: this.arr,
  430. 						success(re) {
  431. 							console.log(JSON.stringify(re), 111111111111)
  432. 							var datas = JSON.stringify(re);
  433. 							if (datas.indexOf("accept") != -1) {
  434. 								console.log(re)
  435. 							}
  436. 						},
  437. 						fail: (res) => {
  438. 							console.log(res)
  439. 						}
  440. 					})
  441. 				}
  442. 				uni.navigateTo({
  443. 					url: '/pages/task/tasklist?searchValue=' + item.classifyName + '&classifyId=' + item.id +
  444. 						'&type=directSearch'
  445. 				});
  446. 			},
  447. 			// 传进数组和指定个数，进行拆分
  448. 			chunk: function(array, size) {
  449. 				const length = array.length
  450. 				if (!length || !size || size < 1) {
  451. 					return []
  452. 				}
  453. 				let index = 0
  454. 				let resIndex = 0
  455. 				let result = new Array(Math.ceil(length / size))
  456. 				while (index < length) {
  457. 					result[resIndex++] = array.slice(index, (index += size))
  458. 				}
  459. 				return result
  460. 			},
  461. 			edit() {
  462. 				this.phone = '';
  463. 				let isLogin = this.yu.isLogin();
  464. 				if (isLogin) {
  465. 					this.isDisable = true;
  466. 				} else {
  467. 					this.isDisable = false;
  468. 				}
  469. 			},
  470. 			sendDemand() {
  471. 				if (uni.getStorageSync('sendMsg')) {
  472. 					wx.requestSubscribeMessage({
  473. 						tmplIds: this.arr,
  474. 						success(re) {
  475. 							console.log(JSON.stringify(re), 111111111111)
  476. 							var datas = JSON.stringify(re);
  477. 							if (datas.indexOf("accept") != -1) {
  478. 								console.log(re)
  479. 							}
  480. 						},
  481. 						fail: (res) => {
  482. 							console.log(res)
  483. 						}
  484. 					})
  485. 				}
  486. 				let token = this.yu.getCache('token');
  487. 				if (token) {
  488. 					uni.navigateTo({
  489. 						url: '/pages/order/release?type=hasPhoneAndContent&content=' + this.content + '&phone=' +
  490. 							this.phone
  491. 					});
  492. 				} else {
  493. 					this.goLogin();
  494. 				}
  495. 			},
  496. 			getUserInfo(userId) {
  497. 				// 更新登录信息
  498. 				this.yu.request("/app/selectUserById?userId=" + userId, 'POST').then(res => {
  499. 					if (res.code === 0) {
  500. 						this.yu.setCache("avatar", res.data.imageUrl ? res.data.imageUrl : '/static/img/logo.png');
  501. 						this.yu.setCache("nickName", res.data.nickName ? res.data.nickName : res.data.phone);
  502. 						this.yu.setCache("mobile", res.data.phone);
  503. 						this.yu.setCache("invitationCode", res.data.invitationCode);
  504. 						this.yu.setCache("relation_id", res.data.relationId);
  505. 						this.yu.setCache("relation", res.data.invitationCode);
  506. 						this.yu.setCache("grade", res.data.grade);
  507. 						this.yu.setCache("isInvitation", res.data.isInvitation);
  508. 						this.yu.setCache("gender", parseInt(res.data.gender));
  509. 						this.yu.setCache("campus", res.data.campus);
  510. 						this.yu.setCache("campusName", res.data.campusName);
  511. 						uni.stopPullDownRefresh();
  512. 					}
  513. 				});
  514. 			},
  515. 		},
  516. 		onReachBottom: function() {
  517. 			this.page = this.page + 1;
  518. 			this.getNewHelpOrderList();
  519. 		},
  520. 		onPullDownRefresh: function() {
  521. 			this.getSelectBanner(1);
  522. 			this.getMenuList();
  523. 			let userId = this.yu.getCache('userId');
  524. 			this.getUserInfo(userId);
  525. 			this.page = 1;
  526. 			this.getNewHelpOrderList('refresh');
  527. 		}
  528. 	}
  529. </script>
  530.  
  531. <style lang="scss">
  532. 	page {
  533. 		width: 100%;
  534. 		background: #F7F7F7;
  535. 	}
  536.  
  537. 	.container {
  538. 		width: 100%;
  539.  
  540. 		.header {
  541. 			width: 100%;
  542. 			background: #FFFFFF;
  543.  
  544. 			.nav {
  545. 				height: 88upx;
  546. 				padding: 0 30upx;
  547. 				display: flex;
  548. 				justify-content: space-between;
  549. 				align-items: center;
  550.  
  551. 				.navLeft {
  552. 					display: flex;
  553. 					justify-content: space-around;
  554. 					align-items: center;
  555.  
  556. 					image {
  557. 						width: 34upx;
  558. 						height: 48upx;
  559. 					}
  560.  
  561. 					.localName {
  562. 						font-size: 28upx;
  563. 						font-weight: bold;
  564. 						color: #333333;
  565. 						margin-left: 20upx;
  566. 					}
  567.  
  568. 					text {
  569. 						font-size: 22upx;
  570. 						color: #333333;
  571. 						margin-left: 12upx;
  572. 					}
  573. 				}
  574.  
  575. 				.navRight {
  576. 					width: 44upx;
  577. 					height: 39upx;
  578.  
  579. 					image {
  580. 						width: 100%;
  581. 						height: 100%;
  582. 					}
  583.  
  584. 				}
  585. 			}
  586.  
  587. 			.search-box {
  588. 				width: 100%;
  589. 				height: 78upx;
  590. 				padding: 0 30upx;
  591. 				display: flex;
  592. 				align-items: center;
  593.  
  594. 				.search-wrap {
  595. 					width: 100%;
  596. 					height: 60upx;
  597. 					background: #F2F2F2;
  598. 					border-radius: 8upx;
  599. 					display: flex;
  600. 					align-items: center;
  601. 					padding: 0 20upx;
  602.  
  603. 					.search-icon {
  604. 						width: 35upx;
  605. 						height: 34upx;
  606. 					}
  607.  
  608. 					.search-input {
  609. 						flex: 1;
  610. 						font-size: 24upx;
  611. 						font-weight: 500;
  612. 						color: #858585;
  613. 						margin-left: 10upx;
  614. 					}
  615. 				}
  616. 			}
  617. 		}
  618.  
  619. 		.main {
  620. 			width: 100%;
  621. 			padding: 20upx 20upx 20upx;
  622.  
  623. 			.home-bgi {
  624. 				width: 100%;
  625. 				height: 240upx;
  626. 				background: #FFF;
  627.  
  628. 				.swiper {
  629. 					width: 100%;
  630. 					height: 100%;
  631.  
  632. 					.swiper-wrap {
  633. 						width: 100%;
  634. 						height: 100%;
  635.  
  636. 						image {
  637. 							width: 100%;
  638. 							height: 100%;
  639. 							display: block;
  640. 						}
  641. 					}
  642.  
  643. 				}
  644. 			}
  645.  
  646. 			.menu-box {
  647. 				width: 100%;
  648. 				padding: 20upx 0 20upx;
  649. 				display: flex;
  650.  
  651. 				.category {
  652. 					width: 100%;
  653. 					border-radius: 20upx;
  654.  
  655. 					.swiper {
  656. 						width: 100%;
  657.  
  658. 						.uni-swiper-dot {
  659. 							width: 20upx;
  660. 						}
  661.  
  662. 						.category-list {
  663. 							width: 100%;
  664. 							height: auto;
  665. 							display: flex;
  666. 							justify-content: flex-start;
  667. 							flex-flow: wrap;
  668.  
  669. 							.icon-box {
  670. 								width: 20%;
  671. 								display: flex;
  672. 								flex-flow: wrap;
  673. 								justify-content: center;
  674. 								font-size: 22upx;
  675. 								color: #666;
  676.  
  677. 								.icon {
  678. 									width: 100upx;
  679. 									height: 100upx;
  680. 								}
  681.  
  682. 								.text {
  683. 									width: 100%;
  684. 									display: flex;
  685. 									justify-content: center;
  686. 									padding-bottom: 18upx;
  687. 									padding-top: 18upx;
  688. 								}
  689. 							}
  690. 						}
  691. 					}
  692.  
  693. 					.dots {
  694. 						display: flex;
  695. 						align-items: center;
  696. 						justify-content: center;
  697. 						height: 15upx;
  698. 						width: 100%;
  699.  
  700. 						view {
  701. 							width: 30upx;
  702. 							height: 5upx;
  703. 							background-color: rgba(0, 0, 0, 0.2);
  704.  
  705. 							&.active {
  706. 								background-color: #ff570a;
  707. 							}
  708. 						}
  709. 					}
  710. 				}
  711.  
  712. 				.menu-item {
  713. 					width: 20%;
  714. 					display: flex;
  715. 					flex-direction: column;
  716. 					align-items: center;
  717. 					justify-content: center;
  718.  
  719. 					.iconImg {
  720. 						width: 100upx;
  721. 						height: 100upx;
  722. 					}
  723.  
  724. 					text {
  725. 						margin-top: 17upx;
  726. 						font-size: 24upx;
  727. 						font-weight: bold;
  728. 						color: #333333;
  729. 					}
  730. 				}
  731. 			}
  732.  
  733. 			.demand-release {
  734. 				background-color: #FFF;
  735. 				padding: 32upx 20upx 30upx;
  736.  
  737. 				.title {
  738. 					font-size: 34upx;
  739. 					font-weight: 800;
  740. 					color: #333333;
  741. 					line-height: 34upx;
  742. 					margin-bottom: 26upx;
  743. 				}
  744.  
  745. 				.search-wrap {
  746. 					height: 88upx;
  747. 					padding: 0 20upx;
  748. 					background: #F5F5F5;
  749. 					border-radius: 5upx;
  750. 					display: flex;
  751. 					justify-content: space-between;
  752. 					margin-bottom: 10upx;
  753.  
  754. 					text {
  755. 						margin-right: 40upx;
  756. 						line-height: 88upx;
  757. 						font-size: 28upx;
  758. 					}
  759.  
  760. 					.search-input {
  761. 						flex: 1;
  762. 						height: 100%;
  763. 						font-size: 28upx;
  764. 					}
  765.  
  766. 					.placeholder-search-input {
  767. 						font-size: 28upx;
  768. 					}
  769.  
  770. 					.edit {
  771. 						height: 88upx;
  772. 						line-height: 88upx;
  773. 						font-size: 24upx;
  774. 						font-weight: 500;
  775. 						color: #FF3530;
  776. 					}
  777. 				}
  778.  
  779. 				.btn {
  780. 					width: 100%;
  781. 					height: 88upx;
  782. 					text-align: center;
  783. 					line-height: 88upx;
  784. 					background: #FF3530;
  785. 					border-radius: 5upx;
  786. 					font-size: 28upx;
  787. 					font-weight: bold;
  788. 					color: #FFFFFF;
  789. 					margin-top: 20upx;
  790. 				}
  791. 			}
  792.  
  793. 			.card-box {
  794. 				// padding: 0 30upx;
  795. 				background-color: #FFF;
  796. 				margin-top: 20upx;
  797.  
  798. 				.title {
  799. 					height: 86upx;
  800. 					font-size: 34upx;
  801. 					font-weight: 800;
  802. 					color: #333333;
  803. 					line-height: 86upx;
  804. 					padding: 0 30upx;
  805. 				}
  806. 			}
  807. 		}
  808.  
  809. 	}
  810. </style>

以上项目仅供学习使用、不可商用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/733497
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号