loumengning
/
shop
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
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.
143 Commits
3 Branches
51 MiB
 
 
 
 
 
 
Tree: b7e5acb962
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'b7e5acb962'
${ noResults }
shop/addons/unishop/uniapp/uni-shop/pages/index/index.vue

888 lines
21 KiB
Raw Blame History 

  1. <template>

  2. 	<view class="container">

  3. 		<!-- 小程序头部兼容 -->

  4. 		<!-- #ifdef MP -->

  5. 		<!-- <view class="mp-search-box"><input class="ser-input" type="text" value="输入关键字搜索" disabled /></view> -->

  6. 		<!-- #endif -->

  7. 

  8. 		<!-- 头部轮播 -->

  9. 		<view class="carousel-section">

  10. 			<!-- 标题栏和状态栏占位符 -->

  11. 			<view class="titleNview-placing"></view>

  12. 			<!-- 背景色区域 -->

  13. 			<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>

  14. 			<swiper class="carousel" circular @change="swiperChange">

  15. 				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({ product_id: item.product_id })">

  16. 					<image mode="aspectFill" :src="item.image" />

  17. 				</swiper-item>

  18. 			</swiper>

  19. 			<!-- 自定义swiper指示器 -->

  20. 			<view class="swiper-dots">

  21. 				<text class="num">{{ swiperCurrent + 1 }}</text>

  22. 				<text class="sign">/</text>

  23. 				<text class="num">{{ swiperLength }}</text>

  24. 			</view>

  25. 		</view>

  26. 		<!-- 分类 -->

  27. 		<view class="cate-section">

  28. 			<view class="cate-item" v-for="(item, index) in menu" :key="index" @click="navToList(item.id)">

  29. 				<image :src="item.image"></image>

  30. 				<text>{{item.name}}</text>

  31. 			</view>

  32. 		</view>

  33. 		<!-- 秒杀楼层 -->

  34. 		<view class="seckill-section m-t" v-if="flashSale && flashSale.product.length > 0">

  35. 			<view class="s-header" @click="navTo('/pages/flash/list')">

  36. 				<text class="miaosha">Promotion</text>

  37. 				<!-- <text class="tip">{{(new Date(flashSale.starttime*1000)).getHours()}}点场</text> -->

  38. 				<text class="tip" v-if="flashSale.countdown">下一场倒计时</text>

  39. 				<text class="tip" v-else>{{flashSale.title}}</text>

  40. 				<uni-countdown ref="countd" v-if="flashSale.countdown" @timeup="timeup" :show-day="flashSale.countdown.day ? true : false"

  41. 				 :day="day" :hour="hour" :minute="minute" :second="second" color="#FFFFFF" background-color="#00B26A" border-color="#00B26A"></uni-countdown>

  42. 				<text class="yticon icon-you"></text>

  43. 			</view>

  44. 			<view class="floor-list-whitelist">

  45. 				<view v-for="(item, index) in flashSale.product" :key="index" class="floor-item" @click="navToDetailPage({ product_id: item.flash_product_id }, flashSale.flash_id)">

  46. 					<view style="width:100%;text-align: center;">

  47. 						<image :src="item.image" mode="aspectFill"></image>

  48. 					</view>

  49. 					<text class="title clamp">{{item.title }}</text>

  50. 					<text class="price">￥{{item.sales_price }}</text>

  51. 				</view>

  52. 			</view>

  53. 			<!-- <scroll-view class="floor-list" scroll-x>

  54. 				<view class="scoll-wrapper">

  55. 					<view v-for="(item, index) in flashSale.product" :key="index" class="floor-item" @click="navToDetailPage({ product_id: item.flash_product_id }, flashSale.flash_id)">

  56. 						<image :src="item.image" mode="aspectFill"></image>

  57. 						<text class="title clamp">{{item.title }}</text>

  58. 						<text class="price">￥{{item.sales_price }}</text>

  59. 					</view>

  60. 				</view>

  61. 			</scroll-view> -->

  62. 		</view>

  63. 

  64. 		<!-- 团购楼层 -->

  65. 		<!-- <view class="f-header m-t">

  66. 			<image src="/static/temp/h1.png"></image>

  67. 			<view class="tit-box">

  68. 				<text class="tit">精品团购</text>

  69. 				<text class="tit2">Boutique Group Buying</text>

  70. 			</view>

  71. 			<text class="yticon icon-you"></text>

  72. 		</view> -->

  73. 		<!-- <view class="group-section">

  74. 			<swiper class="g-swiper" :duration="500">

  75. 				<swiper-item class="g-swiper-item" v-for="(item, index) in goodsList" :key="index" v-if="index % 2 === 0" @click="navToDetailPage(item)">

  76. 					<view class="g-item left">

  77. 						<image :src="item.image" mode="aspectFill"></image>

  78. 						<view class="t-box">

  79. 							<text class="title clamp">{{ item.title }}</text>

  80. 							<view class="price-box">

  81. 								<text class="price">￥{{ item.price }}</text>

  82. 								<text class="m-price">￥188</text>

  83. 							</view>

  84. 

  85. 							<view class="pro-box">

  86. 								<view class="progress-box"><progress percent="72" activeColor="#fa436a" active stroke-width="6" /></view>

  87. 								<text>6人成团</text>

  88. 							</view>

  89. 						</view>

  90. 					</view>

  91. 					<view class="g-item right">

  92. 						<image :src="goodsList[index + 1].image" mode="aspectFill"></image>

  93. 						<view class="t-box">

  94. 							<text class="title clamp">{{ goodsList[index + 1].title }}</text>

  95. 							<view class="price-box">

  96. 								<text class="price">￥{{ goodsList[index + 1].price }}</text>

  97. 								<text class="m-price">￥188</text>

  98. 							</view>

  99. 							<view class="pro-box">

  100. 								<view class="progress-box"><progress percent="72" activeColor="#fa436a" active stroke-width="6" /></view>

  101. 								<text>10人成团</text>

  102. 							</view>

  103. 						</view>

  104. 					</view>

  105. 				</swiper-item>

  106. 			</swiper>

  107. 		</view> -->

  108. 

  109. 		<!-- 分类推荐楼层 -->

  110. 		<!-- <view class="f-header m-t">

  111. 			<image src="/static/temp/h1.png"></image>

  112. 			<view class="tit-box">

  113. 				<text class="tit">分类精选</text>

  114. 				<text class="tit2">Competitive Products For You</text>

  115. 			</view>

  116. 			<text class="yticon icon-you"></text>

  117. 		</view> -->

  118. 		<!-- <view class="hot-floor">

  119. 			<view class="floor-img-box">

  120. 				<image

  121. 					class="floor-img"

  122. 					src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409398864&di=4a12763adccf229133fb85193b7cc08f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201703%2F19%2F20170319150032_MNwmn.jpeg"

  123. 					mode="scaleToFill"

  124. 				></image>

  125. 			</view>

  126. 			<scroll-view class="floor-list" scroll-x>

  127. 				<view class="scoll-wrapper">

  128. 					<view v-for="(item, index) in goodsList" :key="index" class="floor-item" @click="navToDetailPage(item)">

  129. 						<image :src="item.image" mode="aspectFill"></image>

  130. 						<text class="title clamp">{{ item.title }}</text>

  131. 						<text class="price">￥{{ item.price }}</text>

  132. 					</view>

  133. 					<view class="more">

  134. 						<text>查看全部</text>

  135. 						<text>More+</text>

  136. 					</view>

  137. 				</view>

  138. 			</scroll-view>

  139. 		</view> -->

  140. 		<!-- <view class="hot-floor">

  141. 			<view class="floor-img-box">

  142. 				<image

  143. 					class="floor-img"

  144. 					src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409984228&di=dee176242038c2d545b7690b303d65ea&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5ef4da9f17faaf4612f0d5046f4161e556e9bbcfdb5b-rHjf00_fw658"

  145. 					mode="scaleToFill"

  146. 				></image>

  147. 			</view>

  148. 			<scroll-view class="floor-list" scroll-x>

  149. 				<view class="scoll-wrapper">

  150. 					<view v-for="(item, index) in goodsList" :key="index" class="floor-item" @click="navToDetailPage(item)">

  151. 						<image :src="item.image3" mode="aspectFill"></image>

  152. 						<text class="title clamp">{{ item.title }}</text>

  153. 						<text class="price">￥{{ item.price }}</text>

  154. 					</view>

  155. 					<view class="more">

  156. 						<text>查看全部</text>

  157. 						<text>More+</text>

  158. 					</view>

  159. 				</view>

  160. 			</scroll-view>

  161. 		</view> -->

  162. 		<!-- <view class="hot-floor">

  163. 			<view class="floor-img-box">

  164. 				<image

  165. 					class="floor-img"

  166. 					src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409794730&di=12b840ec4f5748ef06880b85ff63e34e&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dc03589ed568a8012060c82ac03c.jpg%40900w_1l_2o_100sh.jpg"

  167. 					mode="scaleToFill"

  168. 				></image>

  169. 			</view>

  170. 			<scroll-view class="floor-list" scroll-x>

  171. 				<view class="scoll-wrapper">

  172. 					<view v-for="(item, index) in goodsList" :key="index" class="floor-item" @click="navToDetailPage(item)">

  173. 						<image :src="item.image2" mode="aspectFill"></image>

  174. 						<text class="title clamp">{{ item.title }}</text>

  175. 						<text class="price">￥{{ item.price }}</text>

  176. 					</view>

  177. 					<view class="more">

  178. 						<text>查看全部</text>

  179. 						<text>More+</text>

  180. 					</view>

  181. 				</view>

  182. 			</scroll-view>

  183. 		</view> -->

  184. 

  185. 		<!-- 猜你喜欢 -->

  186. 		<!-- 		<view class="f-header m-t">

  187. 			<image src="/static/temp/h1.png"></image>

  188. 			<view class="tit-box">

  189. 				<text class="tit">猜你喜欢</text>

  190. 				<text class="tit2">Guess You Like It</text>

  191. 			</view>

  192. 			<text class="yticon icon-you"></text>

  193. 		</view>

  194. 

  195. 		<view class="guess-section">

  196. 			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">

  197. 				<view class="image-wrapper"><image :src="item.image" mode="aspectFill"></image></view>

  198. 				<text class="title clamp">{{ item.title }}</text>

  199. 				<text class="price"><text class="symbol">￥</text> {{ item.sales_price }} <text class="sales"> {{' '+item.sales}}人付款</text></text>

  200. 			</view>

  201. 		</view> -->

  202. 	</view>

  203. </template>

  204. 

  205. <script>

  206. 	var _self = this;

  207. 	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';

  208. 	export default {

  209. 		components: {

  210. 			uniCountdown

  211. 		},

  212. 		data() {

  213. 			return {

  214. 				titleNViewBackground: '',

  215. 				swiperCurrent: 0,

  216. 				swiperLength: 0,

  217. 				carouselList: [],

  218. 				goodsList: [],

  219. 				menu: [],

  220. 				flashSale: '',

  221. 				page: 1,

  222. 				pageSize: 16,

  223. 				day: 0,

  224. 				hour: 0,

  225. 				minute: 0,

  226. 				second: 0

  227. 			};

  228. 		},

  229. 		computed: {

  230. 

  231. 		},

  232. 		onLoad() {

  233. 			this.loadData();

  234. 		},

  235. 		onShow() {

  236. 			// this.loadData();

  237. 		},

  238. 		onReachBottom() {

  239. 			this.getProduct();

  240. 		},

  241. 		onPullDownRefresh() {

  242. 			if (this.$refs && this.$refs.countd) {

  243. 				this.$refs.countd.syncFlag = false;

  244. 			}

  245. 			this.goodsList = [];

  246. 			this.page = 1;

  247. 			this.loadData();

  248. 		},

  249. 		onShareAppMessage(e) {

  250. 

  251. 		},

  252. 		methods: {

  253. 			/**

  254. 			 * 请求静态数据只是为了代码不那么乱

  255. 			 * 分次请求未作整合

  256. 			 */

  257. 			async loadData() {

  258. 				let that = this;

  259. 				let login = await this.$api.checkLogin();

  260. 				if (login) {

  261. 					//获取广告图

  262. 					that.$api.request('/ads/index', 'GET').then((res) => {

  263. 						console.log(res)

  264. 						let carouselList = res;

  265. 						that.titleNViewBackground = carouselList[0].background;

  266. 						that.swiperLength = carouselList.length;

  267. 						that.carouselList = carouselList;

  268. 					});

  269. 

  270. 					//获取菜单栏

  271. 					// uni.request({

  272. 					// 	url: that.$unishow + '/category/menu',

  273. 					// 	success(res) {

  274. 					// 		that.menu = res.data.data;

  275. 					// 	}

  276. 					// });

  277. 

  278. 					uni.stopPullDownRefresh();

  279. 

  280. 					this.getFlash();

  281. 

  282. 					this.getProduct();

  283. 				}

  284. 

  285. 			},

  286. 			// 获取产品列表

  287. 			async getProduct() {

  288. 				let login = await this.$api.checkLogin();

  289. 				if (login) {

  290. 					let goodsList = await this.$api.request('/product/lists', 'GET', {

  291. 						page: this.page,

  292. 						pagesize: this.pageSize

  293. 					});

  294. 					if (goodsList) {

  295. 						if (goodsList.length > 0) {

  296. 							goodsList.forEach(item => {

  297. 								this.goodsList.push(item);

  298. 							});

  299. 							this.page++;

  300. 						} else {

  301. 							// this.$api.msg('没有更多数据');

  302. 						}

  303. 					}

  304. 				}

  305. 			},

  306. 			// 获取限时秒杀数据

  307. 			async getFlash() {

  308. 				let data = await this.$api.request('/flash/index');

  309. 				if (data) {

  310. 					this.flashSale = data;

  311. 					this.day = data.countdown.day;

  312. 					this.hour = data.countdown.hour;

  313. 					this.minute = data.countdown.minute;

  314. 					this.second = data.countdown.second;

  315. 					//this.$refs.countd.update();

  316. 				}

  317. 				//console.log(this.$refs)

  318. 			},

  319. 			//轮播图切换修改背景色

  320. 			swiperChange(e) {

  321. 				const index = e.detail.current;

  322. 				this.swiperCurrent = index;

  323. 				this.titleNViewBackground = this.carouselList[index].background;

  324. 			},

  325. 			// 商品详情页

  326. 			navToDetailPage(item, flash_id = 0) {

  327. 				let id = item.product_id;

  328. 				uni.navigateTo({

  329. 					url: `/pages/product/product?id=${id}&flash=${flash_id}`

  330. 				});

  331. 			},

  332. 			/**

  333. 			 * 秒杀倒计时为0时再请求一次接口

  334. 			 */

  335. 			timeup() {

  336. 				this.getFlash();

  337. 			},

  338. 			// 跳转页面

  339. 			navTo(url) {

  340. 				uni.navigateTo({

  341. 					url

  342. 				})

  343. 			},

  344. 			// 跳转到商品列表

  345. 			navToList(fid) {

  346. 				uni.navigateTo({

  347. 					url: `/pages/product/list?fid=${fid}&sid=0`

  348. 				});

  349. 			}

  350. 		},

  351. 		// #ifndef MP

  352. 		// 标题栏input搜索框点击

  353. 		onNavigationBarSearchInputClicked: async function(e) {

  354. 			this.$api.msg('点击了搜索框');

  355. 		},

  356. 		//点击导航栏 buttons 时触发

  357. 		onNavigationBarButtonTap(e) {

  358. 			const index = e.index;

  359. 			if (index === 0) {

  360. 				this.$api.msg('点击了扫描');

  361. 			} else if (index === 1) {

  362. 				// #ifdef APP-PLUS

  363. 				const pages = getCurrentPages();

  364. 				const page = pages[pages.length - 1];

  365. 				const currentWebview = page.$getAppWebview();

  366. 				currentWebview.hideTitleNViewButtonRedDot({

  367. 					index

  368. 				});

  369. 				// #endif

  370. 				uni.navigateTo({

  371. 					url: '/pages/notice/notice'

  372. 				});

  373. 			}

  374. 		}

  375. 		// #endif

  376. 	};

  377. </script>

  378. 

  379. <style lang="scss">

  380. 	/* #ifdef MP */

  381. 	.mp-search-box {

  382. 		position: absolute;

  383. 		left: 0;

  384. 		top: 30upx;

  385. 		z-index: 9999;

  386. 		width: 100%;

  387. 		padding: 0 80upx;

  388. 

  389. 		.ser-input {

  390. 			flex: 1;

  391. 			height: 56upx;

  392. 			line-height: 56upx;

  393. 			text-align: center;

  394. 			font-size: 28upx;

  395. 			color: $font-color-base;

  396. 			border-radius: 20px;

  397. 			background: rgba(255, 255, 255, 0.6);

  398. 		}

  399. 	}

  400. 

  401. 	/* #endif */

  402. 	page {

  403. 		.cate-section {

  404. 			position: relative;

  405. 			z-index: 5;

  406. 			border-radius: 16upx 16upx 0 0;

  407. 			margin-top: 20upx;

  408. 		}

  409. 

  410. 		.carousel-section {

  411. 			padding: 0;

  412. 

  413. 			.titleNview-placing {

  414. 				padding-top: 0;

  415. 				height: 0;

  416. 			}

  417. 

  418. 			.carousel {

  419. 				.carousel-item {

  420. 					padding: 0;

  421. 				}

  422. 			}

  423. 

  424. 			.swiper-dots {

  425. 				left: 45upx;

  426. 				bottom: 40upx;

  427. 			}

  428. 		}

  429. 	}

  430. 

  431. 

  432. 	page {

  433. 		background: #f5f5f5;

  434. 	}

  435. 

  436. 	.m-t {

  437. 		margin-top: 16upx;

  438. 	}

  439. 

  440. 	/* 头部 轮播图 */

  441. 	.carousel-section {

  442. 		position: relative;

  443. 		padding-top: 10px;

  444. 

  445. 		.titleNview-placing {

  446. 			height: var(--status-bar-height);

  447. 			padding-top: 44px;

  448. 			box-sizing: content-box;

  449. 		}

  450. 

  451. 		.titleNview-background {

  452. 			position: absolute;

  453. 			top: 0;

  454. 			left: 0;

  455. 			width: 100%;

  456. 			height: 426upx;

  457. 			transition: 0.4s;

  458. 		}

  459. 	}

  460. 

  461. 	.carousel {

  462. 		width: 100%;

  463. 		height: 350upx;

  464. 

  465. 		.carousel-item {

  466. 			width: 100%;

  467. 			height: 100%;

  468. 			padding: 0 28upx;

  469. 			overflow: hidden;

  470. 		}

  471. 

  472. 		image {

  473. 			width: 100%;

  474. 			height: 100%;

  475. 			border-radius: 10upx;

  476. 			padding: 20rpx;

  477. 		}

  478. 	}

  479. 

  480. 	.swiper-dots {

  481. 		display: flex;

  482. 		position: absolute;

  483. 		left: 60upx;

  484. 		bottom: 15upx;

  485. 		width: 72upx;

  486. 		height: 36upx;

  487. 		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);

  488. 		background-size: 100% 100%;

  489. 

  490. 		.num {

  491. 			width: 36upx;

  492. 			height: 36upx;

  493. 			border-radius: 50px;

  494. 			font-size: 24upx;

  495. 			color: #fff;

  496. 			text-align: center;

  497. 			line-height: 36upx;

  498. 		}

  499. 

  500. 		.sign {

  501. 			position: absolute;

  502. 			top: 0;

  503. 			left: 50%;

  504. 			line-height: 36upx;

  505. 			font-size: 12upx;

  506. 			color: #fff;

  507. 			transform: translateX(-50%);

  508. 		}

  509. 	}

  510. 

  511. 	/* 分类 */

  512. 	.cate-section {

  513. 		display: flex;

  514. 		justify-content: space-around;

  515. 		align-items: center;

  516. 		flex-wrap: wrap;

  517. 		padding: 30upx 22upx;

  518. 		background: #fff;

  519. 

  520. 		.cate-item {

  521. 			display: flex;

  522. 			flex-direction: column;

  523. 			align-items: center;

  524. 			font-size: $font-sm + 2upx;

  525. 			color: $font-color-dark;

  526. 		}

  527. 

  528. 		/* 原图标颜色太深,不想改图了,所以加了透明度 */

  529. 		image {

  530. 			width: 88upx;

  531. 			height: 88upx;

  532. 			margin-bottom: 14upx;

  533. 			border-radius: 50%;

  534. 			opacity: 0.7;

  535. 			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);

  536. 		}

  537. 	}

  538. 

  539. 	.ad-1 {

  540. 		width: 100%;

  541. 		height: 210upx;

  542. 		padding: 10upx 0;

  543. 		background: #fff;

  544. 

  545. 		image {

  546. 			width: 100%;

  547. 			height: 100%;

  548. 		}

  549. 	}

  550. 

  551. 	/* 秒杀专区 */

  552. 	.seckill-section {

  553. 		padding: 4upx 30upx 24upx;

  554. 		background: #fff;

  555. 

  556. 		.miaosha {

  557. 			font-size: 35rpx;

  558. 			font-weight: 1000;

  559. 			color: $uni-color-primary;

  560. 			;

  561. 		}

  562. 

  563. 		.s-header {

  564. 			display: flex;

  565. 			align-items: center;

  566. 			height: 92upx;

  567. 			line-height: 1;

  568. 

  569. 			.s-img {

  570. 				width: 140upx;

  571. 				height: 30upx;

  572. 			}

  573. 

  574. 			.tip {

  575. 				font-size: $font-base;

  576. 				color: $font-color-light;

  577. 				margin: 0 20upx 0 40upx;

  578. 			}

  579. 

  580. 			.timer {

  581. 				display: inline-block;

  582. 				width: 40upx;

  583. 				height: 36upx;

  584. 				text-align: center;

  585. 				line-height: 36upx;

  586. 				margin-right: 14upx;

  587. 				font-size: $font-sm + 2upx;

  588. 				color: #fff;

  589. 				border-radius: 2px;

  590. 				background: rgba(0, 0, 0, 0.8);

  591. 			}

  592. 

  593. 			.icon-you {

  594. 				font-size: $font-lg;

  595. 				color: $font-color-light;

  596. 				flex: 1;

  597. 				text-align: right;

  598. 			}

  599. 		}

  600. 

  601. 		.floor-list-whitelist {

  602. 			display: flex;

  603. 			// justify-content: space-between;

  604. 			flex-direction: row;

  605. 			flex-wrap: wrap;

  606. 		}

  607. 

  608. 		.floor-list {

  609. 			white-space: nowrap;

  610. 		}

  611. 

  612. 		.scoll-wrapper {

  613. 			display: flex;

  614. 			align-items: flex-start;

  615. 		}

  616. 

  617. 		.floor-item {

  618. 			width: calc(100%/3);

  619. 			padding-right: 20upx;

  620. 			margin-top: 20upx;

  621. 			font-size: $font-sm + 2upx;

  622. 			color: $font-color-dark;

  623. 			line-height: 1.8;

  624. 

  625. 			image {

  626. 				width: 150upx;

  627. 				height: 150upx;

  628. 				border-radius: 6upx;

  629. 			}

  630. 

  631. 			.price {

  632. 				color: $uni-color-primary;

  633. 			}

  634. 		}

  635. 	}

  636. 

  637. 	.f-header {

  638. 		display: flex;

  639. 		align-items: center;

  640. 		height: 140upx;

  641. 		padding: 6upx 30upx 8upx;

  642. 		background: #fff;

  643. 

  644. 		image {

  645. 			flex-shrink: 0;

  646. 			width: 80upx;

  647. 			height: 80upx;

  648. 			margin-right: 20upx;

  649. 		}

  650. 

  651. 		.tit-box {

  652. 			flex: 1;

  653. 			display: flex;

  654. 			flex-direction: column;

  655. 		}

  656. 

  657. 		.tit {

  658. 			font-size: $font-lg + 2upx;

  659. 			color: #font-color-dark;

  660. 			line-height: 1.3;

  661. 		}

  662. 

  663. 		.tit2 {

  664. 			font-size: $font-sm;

  665. 			color: $font-color-light;

  666. 		}

  667. 

  668. 		.icon-you {

  669. 			font-size: $font-lg + 2upx;

  670. 			color: $font-color-light;

  671. 		}

  672. 	}

  673. 

  674. 	/* 团购楼层 */

  675. 	.group-section {

  676. 		background: #fff;

  677. 

  678. 		.g-swiper {

  679. 			height: 650upx;

  680. 			padding-bottom: 30upx;

  681. 		}

  682. 

  683. 		.g-swiper-item {

  684. 			width: 100%;

  685. 			padding: 0 30upx;

  686. 			display: flex;

  687. 		}

  688. 

  689. 		image {

  690. 			width: 100%;

  691. 			height: 460upx;

  692. 			border-radius: 4px;

  693. 		}

  694. 

  695. 		.g-item {

  696. 			display: flex;

  697. 			flex-direction: column;

  698. 			overflow: hidden;

  699. 		}

  700. 

  701. 		.left {

  702. 			flex: 1.2;

  703. 			margin-right: 24upx;

  704. 

  705. 			.t-box {

  706. 				padding-top: 20upx;

  707. 			}

  708. 		}

  709. 

  710. 		.right {

  711. 			flex: 0.8;

  712. 			flex-direction: column-reverse;

  713. 

  714. 			.t-box {

  715. 				padding-bottom: 20upx;

  716. 			}

  717. 		}

  718. 

  719. 		.t-box {

  720. 			height: 160upx;

  721. 			font-size: $font-base + 2upx;

  722. 			color: $font-color-dark;

  723. 			line-height: 1.6;

  724. 		}

  725. 

  726. 		.price {

  727. 			color: $uni-color-primary;

  728. 		}

  729. 

  730. 		.m-price {

  731. 			font-size: $font-sm + 2upx;

  732. 			text-decoration: line-through;

  733. 			color: $font-color-light;

  734. 			margin-left: 8upx;

  735. 		}

  736. 

  737. 		.pro-box {

  738. 			display: flex;

  739. 			align-items: center;

  740. 			margin-top: 10upx;

  741. 			font-size: $font-sm;

  742. 			color: $font-base;

  743. 			padding-right: 10upx;

  744. 		}

  745. 

  746. 		.progress-box {

  747. 			flex: 1;

  748. 			border-radius: 10px;

  749. 			overflow: hidden;

  750. 			margin-right: 8upx;

  751. 		}

  752. 	}

  753. 

  754. 	/* 分类推荐楼层 */

  755. 	.hot-floor {

  756. 		width: 100%;

  757. 		overflow: hidden;

  758. 		margin-bottom: 20upx;

  759. 

  760. 		.floor-img-box {

  761. 			width: 100%;

  762. 			height: 320upx;

  763. 			position: relative;

  764. 

  765. 			&:after {

  766. 				content: '';

  767. 				position: absolute;

  768. 				left: 0;

  769. 				top: 0;

  770. 				width: 100%;

  771. 				height: 100%;

  772. 				background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);

  773. 			}

  774. 		}

  775. 

  776. 		.floor-img {

  777. 			width: 100%;

  778. 			height: 100%;

  779. 		}

  780. 

  781. 		.floor-list {

  782. 			white-space: nowrap;

  783. 			padding: 20upx;

  784. 			padding-right: 50upx;

  785. 			border-radius: 6upx;

  786. 			margin-top: -140upx;

  787. 			margin-left: 30upx;

  788. 			background: #fff;

  789. 			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);

  790. 			position: relative;

  791. 			z-index: 1;

  792. 		}

  793. 

  794. 		.scoll-wrapper {

  795. 			display: flex;

  796. 			align-items: flex-start;

  797. 		}

  798. 

  799. 		.floor-item {

  800. 			margin-right: 20upx;

  801. 			font-size: $font-sm + 2upx;

  802. 			color: $font-color-dark;

  803. 			line-height: 1.8;

  804. 

  805. 			image {

  806. 				width: 180upx;

  807. 				height: 180upx;

  808. 				border-radius: 6upx;

  809. 			}

  810. 

  811. 			.price {

  812. 				color: $uni-color-primary;

  813. 			}

  814. 		}

  815. 

  816. 		.more {

  817. 			display: flex;

  818. 			align-items: center;

  819. 			justify-content: center;

  820. 			flex-direction: column;

  821. 			flex-shrink: 0;

  822. 			width: 180upx;

  823. 			height: 180upx;

  824. 			border-radius: 6upx;

  825. 			background: #f3f3f3;

  826. 			font-size: $font-base;

  827. 			color: $font-color-light;

  828. 

  829. 			text:first-child {

  830. 				margin-bottom: 4upx;

  831. 			}

  832. 		}

  833. 	}

  834. 

  835. 	/* 猜你喜欢 */

  836. 	.guess-section {

  837. 		display: flex;

  838. 		flex-wrap: wrap;

  839. 		padding: 0 30upx;

  840. 		background: #fff;

  841. 

  842. 		.guess-item {

  843. 			display: flex;

  844. 			flex-direction: column;

  845. 			width: 48%;

  846. 			padding-bottom: 40upx;

  847. 

  848. 			&:nth-child(2n + 1) {

  849. 				margin-right: 4%;

  850. 			}

  851. 		}

  852. 

  853. 		.image-wrapper {

  854. 			width: 100%;

  855. 			height: 330upx;

  856. 			border-radius: 3px;

  857. 			overflow: hidden;

  858. 

  859. 			image {

  860. 				width: 100%;

  861. 				height: 100%;

  862. 				opacity: 1;

  863. 			}

  864. 		}

  865. 

  866. 		.title {

  867. 			font-size: 12px;

  868. 			color: $font-color-dark;

  869. 			line-height: 80upx;

  870. 		}

  871. 

  872. 		.price {

  873. 			font-size: $font-lg;

  874. 			color: $uni-color-primary;

  875. 			line-height: 1;

  876. 

  877. 			.sales {

  878. 				color: #999999;

  879. 				font-size: 24upx;

  880. 			}

  881. 

  882. 			.symbol {

  883. 				font-size: 24upx;

  884. 			}

  885. 		}

  886. 	}

  887. </style>