loumengning
/
shop
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
97 提交
3 分支
51 MiB
 
 
 
 
 
 
目录树: f39b4d4c5d
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'f39b4d4c5d'
${ noResults }
shop/addons/unishop/uniapp/uni-shop/pages/index/index.vue

800 行
20 KiB
原始文件 Blame 文件历史 

  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. 				<image class="s-img" src="/static/temp/secskill-img.jpg" mode="widthFix"></image>

  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" :day="day" :hour="hour" :minute="minute" :second="second" color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" ></uni-countdown>

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

  42. 			</view>

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

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

  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. 						<image :src="item.image" mode="aspectFill"></image>

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

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

  49. 					</view>

  50. 				</view>

  51. 			</scroll-view>

  52. 		</view>

  53. 

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

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

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

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

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

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

  60. 			</view>

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

  62. 		</view> -->

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

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

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

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

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

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

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

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

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

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

  73. 							</view>

  74. 

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

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

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

  78. 							</view>

  79. 						</view>

  80. 					</view>

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

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

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

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

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

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

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

  88. 							</view>

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

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

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

  92. 							</view>

  93. 						</view>

  94. 					</view>

  95. 				</swiper-item>

  96. 			</swiper>

  97. 		</view> -->

  98. 

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

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

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

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

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

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

  105. 			</view>

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

  107. 		</view> -->

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

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

  110. 				<image

  111. 					class="floor-img"

  112. 					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"

  113. 					mode="scaleToFill"

  114. 				></image>

  115. 			</view>

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

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

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

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

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

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

  122. 					</view>

  123. 					<view class="more"> 

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

  125. 						<text>More+</text>

  126. 					</view>

  127. 				</view>

  128. 			</scroll-view>

  129. 		</view> -->

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

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

  132. 				<image

  133. 					class="floor-img"

  134. 					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"

  135. 					mode="scaleToFill"

  136. 				></image>

  137. 			</view>

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

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

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

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

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

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

  144. 					</view>

  145. 					<view class="more">

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

  147. 						<text>More+</text>

  148. 					</view>

  149. 				</view>

  150. 			</scroll-view>

  151. 		</view> -->

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

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

  154. 				<image

  155. 					class="floor-img"

  156. 					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"

  157. 					mode="scaleToFill"

  158. 				></image>

  159. 			</view>

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

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

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

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

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

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

  166. 					</view>

  167. 					<view class="more">

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

  169. 						<text>More+</text>

  170. 					</view>

  171. 				</view>

  172. 			</scroll-view>

  173. 		</view> -->

  174. 

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

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

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

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

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

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

  181. 			</view>

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

  183. 		</view>

  184. 

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

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

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

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

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

  190. 			</view>

  191. 		</view>

  192. 		<view style="text-align: center;margin: 20px 0">

  193. 			<text style="" @click="showPolicy">Privacy Policy</text>

  194. 		</view>

  195. 	</view>

  196. </template>

  197. 

  198. <script>

  199. var _self = this;

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

  201. export default {

  202. 	components: {uniCountdown},

  203. 	data() {

  204. 		return {

  205. 			titleNViewBackground: '',

  206. 			swiperCurrent: 0,

  207. 			swiperLength: 0,

  208. 			carouselList: [],

  209. 			goodsList: [],

  210. 			menu:[],

  211. 			flashSale: '',

  212. 			page:1,

  213. 			pageSize: 16,

  214. 			day:0,

  215. 			hour:0,

  216. 			minute:0,

  217. 			second:0

  218. 		};

  219. 	},

  220. 	computed:{

  221. 		

  222. 	},

  223. 	onLoad() {

  224. 		this.loadData();

  225. 	},

  226. 	onReachBottom() {

  227. 		this.getProduct();

  228. 	},

  229. 	onPullDownRefresh() {

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

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

  232. 		}

  233. 		this.goodsList = [];

  234. 		this.page = 1;

  235. 		this.loadData();

  236. 	},

  237. 	onShareAppMessage(e) {

  238. 		return {

  239. 			title: "MSVENI SHOP",

  240. 		};

  241. 	},

  242. 	methods: {

  243. 		/**

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

  245. 		 * 分次请求未作整合

  246. 		 */

  247. 		loadData() {

  248. 			let that = this;

  249. 			

  250. 			//获取广告图

  251. 			uni.request({

  252. 				url: that.$unishow + '/ads/index',

  253. 				success(res) {

  254. 					let carouselList = res.data.data;

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

  256. 					that.swiperLength = carouselList.length;

  257. 					that.carouselList = carouselList;

  258. 				}

  259. 			});

  260. 			

  261. 			//获取菜单栏

  262. 			uni.request({

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

  264. 				success(res) {

  265. 					that.menu = res.data.data;

  266. 				}

  267. 			});

  268. 			

  269. 			uni.stopPullDownRefresh();

  270. 			

  271. 			this.getFlash();

  272. 				

  273. 			this.getProduct();

  274. 		},

  275. 		// 获取产品列表

  276. 		async getProduct() {

  277. 			let goodsList = await this.$api.request('/product/lists', 'GET', {page:this.page, pagesize:this.pageSize});

  278. 			if (goodsList) {

  279. 				if (goodsList.length > 0) {

  280. 					goodsList.forEach(item=>{

  281. 						this.goodsList.push(item);

  282. 					});

  283. 					this.page++;

  284. 				} else {

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

  286. 				}

  287. 			}

  288. 		},

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

  290. 		async getFlash() {

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

  292. 			if (data) {

  293. 				this.flashSale = data;

  294. 				this.day = data.countdown.day;

  295. 				this.hour = data.countdown.hour;

  296. 				this.minute = data.countdown.minute;

  297. 				this.second = data.countdown.second;

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

  299. 			}

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

  301. 		},

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

  303. 		swiperChange(e) {

  304. 			const index = e.detail.current;

  305. 			this.swiperCurrent = index;

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

  307. 		},

  308. 		// 商品详情页

  309. 		navToDetailPage(item, flash_id = 0) {

  310. 			let id = item.product_id;

  311. 			uni.navigateTo({

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

  313. 			});

  314. 		},

  315. 		/**

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

  317. 		 */

  318. 		timeup() {

  319. 			this.getFlash();

  320. 		},

  321. 		// 跳转页面

  322. 		navTo(url){

  323. 			uni.navigateTo({  

  324. 				url

  325. 			})  

  326. 		}, 

  327. 		// 跳转到商品列表

  328. 		navToList(fid) {

  329. 			uni.navigateTo({

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

  331. 			});

  332. 		},

  333. 		showPolicy(){

  334. 			uni.showModal({

  335. 				showCancel: false,

  336. 				title: 'Privacy Policy',

  337. 				content: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',

  338. 				confirmText: 'OK'

  339. 			})

  340. 		}

  341. 	},

  342. 	// #ifndef MP

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

  344. 	onNavigationBarSearchInputClicked: async function(e) {

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

  346. 	},

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

  348. 	onNavigationBarButtonTap(e) {

  349. 		const index = e.index;

  350. 		if (index === 0) {

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

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

  353. 			// #ifdef APP-PLUS

  354. 			const pages = getCurrentPages();

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

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

  357. 			currentWebview.hideTitleNViewButtonRedDot({

  358. 				index

  359. 			});

  360. 			// #endif

  361. 			uni.navigateTo({

  362. 				url: '/pages/notice/notice'

  363. 			});

  364. 		}

  365. 	}

  366. 	// #endif

  367. };

  368. </script>

  369. 

  370. <style lang="scss">

  371. /* #ifdef MP */

  372. .mp-search-box {

  373. 	position: absolute;

  374. 	left: 0;

  375. 	top: 30upx;

  376. 	z-index: 9999;

  377. 	width: 100%;

  378. 	padding: 0 80upx;

  379. 	.ser-input {

  380. 		flex: 1;

  381. 		height: 56upx;

  382. 		line-height: 56upx;

  383. 		text-align: center;

  384. 		font-size: 28upx;

  385. 		color: $font-color-base;

  386. 		border-radius: 20px;

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

  388. 	}

  389. }

  390. /* #endif */

  391. page {

  392. 	.cate-section {

  393. 		position: relative;

  394. 		z-index: 5;

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

  396. 		margin-top: -20upx;

  397. 	}

  398. 	.carousel-section {

  399. 		padding: 0;

  400. 		.titleNview-placing {

  401. 			padding-top: 0;

  402. 			height: 0;

  403. 		}

  404. 		.carousel {

  405. 			.carousel-item {

  406. 				padding: 0;

  407. 			}

  408. 		}

  409. 		.swiper-dots {

  410. 			left: 45upx;

  411. 			bottom: 40upx;

  412. 		}

  413. 	}

  414. }

  415. 

  416. 

  417. page {

  418. 	background: #f5f5f5;

  419. }

  420. .m-t {

  421. 	margin-top: 16upx;

  422. }

  423. /* 头部 轮播图 */

  424. .carousel-section {

  425. 	position: relative;

  426. 	padding-top: 10px;

  427. 

  428. 	.titleNview-placing {

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

  430. 		padding-top: 44px;

  431. 		box-sizing: content-box;

  432. 	}

  433. 

  434. 	.titleNview-background {

  435. 		position: absolute;

  436. 		top: 0;

  437. 		left: 0;

  438. 		width: 100%;

  439. 		height: 426upx;

  440. 		transition: 0.4s;

  441. 	}

  442. }

  443. .carousel {

  444. 	width: 100%;

  445. 	height: 350upx;

  446. 

  447. 	.carousel-item {

  448. 		width: 100%;

  449. 		height: 100%;

  450. 		padding: 0 28upx;

  451. 		overflow: hidden;

  452. 	}

  453. 

  454. 	image {

  455. 		width: 100%;

  456. 		height: 100%;

  457. 		border-radius: 10upx;

  458. 		padding: 20rpx;

  459. 	}

  460. }

  461. .swiper-dots {

  462. 	display: flex;

  463. 	position: absolute;

  464. 	left: 60upx;

  465. 	bottom: 15upx;

  466. 	width: 72upx;

  467. 	height: 36upx;

  468. 	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==);

  469. 	background-size: 100% 100%;

  470. 

  471. 	.num {

  472. 		width: 36upx;

  473. 		height: 36upx;

  474. 		border-radius: 50px;

  475. 		font-size: 24upx;

  476. 		color: #fff;

  477. 		text-align: center;

  478. 		line-height: 36upx;

  479. 	}

  480. 

  481. 	.sign {

  482. 		position: absolute;

  483. 		top: 0;

  484. 		left: 50%;

  485. 		line-height: 36upx;

  486. 		font-size: 12upx;

  487. 		color: #fff;

  488. 		transform: translateX(-50%);

  489. 	}

  490. }

  491. /* 分类 */

  492. .cate-section {

  493. 	display: flex;

  494. 	justify-content: space-around;

  495. 	align-items: center;

  496. 	flex-wrap: wrap;

  497. 	padding: 30upx 22upx;

  498. 	background: #fff;

  499. 	.cate-item {

  500. 		display: flex;

  501. 		flex-direction: column;

  502. 		align-items: center;

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

  504. 		color: $font-color-dark;

  505. 	}

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

  507. 	image {

  508. 		width: 88upx;

  509. 		height: 88upx;

  510. 		margin-bottom: 14upx;

  511. 		border-radius: 50%;

  512. 		opacity: 0.7;

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

  514. 	}

  515. }

  516. .ad-1 {

  517. 	width: 100%;

  518. 	height: 210upx;

  519. 	padding: 10upx 0;

  520. 	background: #fff;

  521. 	image {

  522. 		width: 100%;

  523. 		height: 100%;

  524. 	}

  525. }

  526. /* 秒杀专区 */

  527. .seckill-section {

  528. 	padding: 4upx 30upx 24upx;

  529. 	background: #fff;

  530. 	.s-header {

  531. 		display: flex;

  532. 		align-items: center;

  533. 		height: 92upx;

  534. 		line-height: 1;

  535. 		.s-img {

  536. 			width: 140upx;

  537. 			height: 30upx;

  538. 		}

  539. 		.tip {

  540. 			font-size: $font-base;

  541. 			color: $font-color-light;

  542. 			margin: 0 20upx 0 40upx;

  543. 		}

  544. 		.timer {

  545. 			display: inline-block;

  546. 			width: 40upx;

  547. 			height: 36upx;

  548. 			text-align: center;

  549. 			line-height: 36upx;

  550. 			margin-right: 14upx;

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

  552. 			color: #fff;

  553. 			border-radius: 2px;

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

  555. 		}

  556. 		.icon-you {

  557. 			font-size: $font-lg;

  558. 			color: $font-color-light;

  559. 			flex: 1;

  560. 			text-align: right;

  561. 		}

  562. 	}

  563. 	.floor-list {

  564. 		white-space: nowrap;

  565. 	}

  566. 	.scoll-wrapper {

  567. 		display: flex;

  568. 		align-items: flex-start;

  569. 	}

  570. 	.floor-item {

  571. 		width: 150upx;

  572. 		margin-right: 20upx;

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

  574. 		color: $font-color-dark;

  575. 		line-height: 1.8;

  576. 		image {

  577. 			width: 150upx;

  578. 			height: 150upx;

  579. 			border-radius: 6upx;

  580. 		}

  581. 		.price {

  582. 			color: $uni-color-primary;

  583. 		}

  584. 	}

  585. }

  586. 

  587. .f-header {

  588. 	display: flex;

  589. 	align-items: center;

  590. 	height: 140upx;

  591. 	padding: 6upx 30upx 8upx;

  592. 	background: #fff;

  593. 	image {

  594. 		flex-shrink: 0;

  595. 		width: 80upx;

  596. 		height: 80upx;

  597. 		margin-right: 20upx;

  598. 	}

  599. 	.tit-box {

  600. 		flex: 1;

  601. 		display: flex;

  602. 		flex-direction: column;

  603. 	}

  604. 	.tit {

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

  606. 		color: #font-color-dark;

  607. 		line-height: 1.3;

  608. 	}

  609. 	.tit2 {

  610. 		font-size: $font-sm;

  611. 		color: $font-color-light;

  612. 	}

  613. 	.icon-you {

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

  615. 		color: $font-color-light;

  616. 	}

  617. }

  618. /* 团购楼层 */

  619. .group-section {

  620. 	background: #fff;

  621. 	.g-swiper {

  622. 		height: 650upx;

  623. 		padding-bottom: 30upx;

  624. 	}

  625. 	.g-swiper-item {

  626. 		width: 100%;

  627. 		padding: 0 30upx;

  628. 		display: flex;

  629. 	}

  630. 	image {

  631. 		width: 100%;

  632. 		height: 460upx;

  633. 		border-radius: 4px;

  634. 	}

  635. 	.g-item {

  636. 		display: flex;

  637. 		flex-direction: column;

  638. 		overflow: hidden;

  639. 	}

  640. 	.left {

  641. 		flex: 1.2;

  642. 		margin-right: 24upx;

  643. 		.t-box {

  644. 			padding-top: 20upx;

  645. 		}

  646. 	}

  647. 	.right {

  648. 		flex: 0.8;

  649. 		flex-direction: column-reverse;

  650. 		.t-box {

  651. 			padding-bottom: 20upx;

  652. 		}

  653. 	}

  654. 	.t-box {

  655. 		height: 160upx;

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

  657. 		color: $font-color-dark;

  658. 		line-height: 1.6;

  659. 	}

  660. 	.price {

  661. 		color: $uni-color-primary;

  662. 	}

  663. 	.m-price {

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

  665. 		text-decoration: line-through;

  666. 		color: $font-color-light;

  667. 		margin-left: 8upx;

  668. 	}

  669. 	.pro-box {

  670. 		display: flex;

  671. 		align-items: center;

  672. 		margin-top: 10upx;

  673. 		font-size: $font-sm;

  674. 		color: $font-base;

  675. 		padding-right: 10upx;

  676. 	}

  677. 	.progress-box {

  678. 		flex: 1;

  679. 		border-radius: 10px;

  680. 		overflow: hidden;

  681. 		margin-right: 8upx;

  682. 	}

  683. }

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

  685. .hot-floor {

  686. 	width: 100%;

  687. 	overflow: hidden;

  688. 	margin-bottom: 20upx;

  689. 	.floor-img-box {

  690. 		width: 100%;

  691. 		height: 320upx;

  692. 		position: relative;

  693. 		&:after {

  694. 			content: '';

  695. 			position: absolute;

  696. 			left: 0;

  697. 			top: 0;

  698. 			width: 100%;

  699. 			height: 100%;

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

  701. 		}

  702. 	}

  703. 	.floor-img {

  704. 		width: 100%;

  705. 		height: 100%;

  706. 	}

  707. 	.floor-list {

  708. 		white-space: nowrap;

  709. 		padding: 20upx;

  710. 		padding-right: 50upx;

  711. 		border-radius: 6upx;

  712. 		margin-top: -140upx;

  713. 		margin-left: 30upx;

  714. 		background: #fff;

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

  716. 		position: relative;

  717. 		z-index: 1;

  718. 	}

  719. 	.scoll-wrapper {

  720. 		display: flex;

  721. 		align-items: flex-start;

  722. 	}

  723. 	.floor-item {

  724. 		width: 180upx;

  725. 		margin-right: 20upx;

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

  727. 		color: $font-color-dark;

  728. 		line-height: 1.8;

  729. 		image {

  730. 			width: 180upx;

  731. 			height: 180upx;

  732. 			border-radius: 6upx;

  733. 		}

  734. 		.price {

  735. 			color: $uni-color-primary;

  736. 		}

  737. 	}

  738. 	.more {

  739. 		display: flex;

  740. 		align-items: center;

  741. 		justify-content: center;

  742. 		flex-direction: column;

  743. 		flex-shrink: 0;

  744. 		width: 180upx;

  745. 		height: 180upx;

  746. 		border-radius: 6upx;

  747. 		background: #f3f3f3;

  748. 		font-size: $font-base;

  749. 		color: $font-color-light;

  750. 		text:first-child {

  751. 			margin-bottom: 4upx;

  752. 		}

  753. 	}

  754. }

  755. /* 猜你喜欢 */

  756. .guess-section {

  757. 	display: flex;

  758. 	flex-wrap: wrap;

  759. 	padding: 0 30upx;

  760. 	background: #fff;

  761. 	.guess-item {

  762. 		display: flex;

  763. 		flex-direction: column;

  764. 		width: 48%;

  765. 		padding-bottom: 40upx;

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

  767. 			margin-right: 4%;

  768. 		}

  769. 	}

  770. 	.image-wrapper {

  771. 		width: 100%;

  772. 		height: 330upx;

  773. 		border-radius: 3px;

  774. 		overflow: hidden;

  775. 		image {

  776. 			width: 100%;

  777. 			height: 100%;

  778. 			opacity: 1;

  779. 		}

  780. 	}

  781. 	.title {

  782. 		font-size: $font-lg;

  783. 		color: $font-color-dark;

  784. 		line-height: 80upx;

  785. 	}

  786. 	.price {

  787. 		font-size: $font-lg;

  788. 		color: $uni-color-primary;

  789. 		line-height: 1;

  790. 		.sales{

  791. 			color: #999999;

  792. 			font-size: 24upx;

  793. 		}

  794. 		.symbol{

  795. 			font-size: 24upx;

  796. 		}

  797. 	}

  798. }

  799. </style>