<template>
	<view>
		<!-- 状态栏 -->
		<nv :config="nvConfig" @nvTabTap="onNvTab" @nvBtnTap="onRightBtn" />
		<block v-if="tabIndex === 1">
			<!-- 推荐商家 -->
			<view class="block-title">
				<view class="title">
					推荐商家
				</view>
			</view>
			<scroll-view scroll-x class="recommended">
				<block v-for="(item, index) in recommendBus" :key="index">
					<view class="item-box">
						<image class="item-cover" :src="item.cover" mode="aspectFill" />
						<view class="item-vip">
							<view class="item-vip-text">{{item.level.name}}</view>
							<view class="item-vip-tips">企业</view>
						</view>
						<view class="item-title nowrap">{{item.name || '-'}}</view>
						<view class="item-trade nowrap">行业：{{item.industry.title}}</view>
						<view class="item-bar">
							<view class="item-bar-color">
								<view class="item-bar-strip" :style="{width: item.process + '%'}">
									<text class="item-bar-per">{{item.process}}%</text>
								</view>
							</view>
							<image class="item-bar-strip-img" src="../../static/icons/equity_arrow_up.png"
								mode="aspectFill"></image>
						</view>
						<view class="item-url">
							<view class="item-credit">
								<image class="item-credit-img" src="../../static/icons/equity_arrow_icon.png"
									mode="aspectFill"></image>信用值 {{item.integrity}}
							</view>
							<view class="item-btn" @click="onOpenWechat(item)">进店<image
									src="../../static/icons/equity_arrow_right.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<!-- 热易商家 -->
			<view class="block-title">
				<view class="title">
					热易商家
				</view>
			</view>
			<swiper class="hot-swiper">
				<swiper-item v-for="(item, index) in hotBus" :key="index">
					<view class="hot-box" @click="onOpenWechat(item)">
						<image class="cover" :src="item.cover" mode="aspectFill" />
						<view class="hot-vip">{{item.level.name}}</view>
						<view class="hot-content">
							<view class="hot-title nowrap">{{item.name || '-'}}</view>
							<view class="hot-credit">信誉值 {{item.integrity}}</view>
							<view class="hot-trade nowrap">所属行业：{{item.industry.title}}</view>
							<view class="hot-warrant">
								<view class="hot-warrant-text nowrap">
									权证数量：{{item.goodsCount}}
								</view>
								<view class="hot-bar">
									<view class="hot-bar-color">
										<view class="hot-bar-strip" :style="{width: item.process + '%'}"></view>
									</view>
									<view class="hot-bar-per">{{item.process}}</view>
								</view>
							</view>
							<!-- <view class="credibility">
								<uni-rate
									:readonly="true"
									color="#ddd"
									active-color="#e93340"
									:value="item.star"
									:size="14"
								/>
							</view>
							<view class="trading nowrap">累计交易次</view> -->
						</view>
						<view class="hot-tool">
							<view class="hot-deal">
								交易量<text class="hot-deal-number">{{item.saleCount || 0}}次</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<v-tabs v-model="industryIndex" :tabs="industryBus" color="#555555" activeColor="#e93340" fontSize="30rpx"
				height="80rpx" lineHeight="6rpx" lineColor="#e93340" bgColor="#f5f5f5" @change="onBusIndustry"></v-tabs>
			<!-- 商家 -->
			<industry-list :list="busList" @on-industry="onOpenWechat" />
			<!-- 分页 -->
			<uni-load-more v-if="busList.length > 0" :status="pageStatus" :iconSize="16"></uni-load-more>
		</block>
		<!-- 易货商城 -->
		<block v-if="tabIndex === 0">
			<view class="header-back">
				<!-- 轮播图 -->
				<view class="banner">
					<swiper class="banner-swiper" indicator-color="#e93340" indicator-active-color="#f8f8f8"
						indicator-dots autoplay>
						<swiper-item v-for="(item, index) in banners" :key="index">
							<image class="cover" :src="item.cover" mode="aspectFill" @click="swiperClick(item.url)" />
						</swiper-item>
					</swiper>
				</view>
				<!-- 分类 -->
				<view class="classify">
					<view class="classify-item" v-for="(item, index) in classify" :key="index"
						@click="onClassify(item.category_id)">
						<image class="cover" :src="item.cover" mode="aspectFill"></image>
						<view class="title">{{item.name}}</view>
					</view>
					<view class="classify-item" @click="onClassify('')">
						<image class="cover" src="../../static/icons/equity_nav.png" mode="aspectFill"></image>
						<view class="title">查看全部</view>
					</view>
				</view>
			</view>
			<!-- 每日推荐 -->
			<view class="block-title">
				<view class="title">
					每日推荐<text>链商精选 推荐好物</text>
				</view>
			</view>
			<view class="goods-push" v-if="JSON.stringify(position) != '{}'">
				<view class="itme item-mian" @click="onGoods(position.one)">
					<image class="cover" :src="position.one.cover" mode="aspectFill"></image>
					<view class="title">	
						<span class='is_allow_values' v-if='position.one.specal_tags.is_allow_values'>{{position.one.specal_tags.is_allow_values}}</span>
						{{position.one.name}}
					</view>
					<view class="price"><text>¥</text>{{position.one.original_price}}
					<span style='font-size: 26rpx;color: #555;font-weight: normal;padding-left: 10rpx;' v-if='position.one.price.pv>0'>
						贡献值:<span>{{position.one.price.pv}}</span><image style="width: 20rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" /> 
					</span>
					</view>
					<span class='is_self' v-if='position.one.specal_tags.is_self'>{{position.one.specal_tags.is_self}}</span>
				</view>
				<view class="itme">
					<view class="itme-list" v-for="(item, index) in position.two" :key="index" @click="onGoods(item)">
						<image class="cover" :src="item.cover" mode="aspectFill"></image>
						<view class="title">{{item.name}}</view>
						<view style='font-size: 26rpx;color: #999;font-weight: normal;' v-if='item.price.pv>0'>
							贡献值:<span>{{item.price.pv}}</span><image style="width: 20rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" /> 
						</view>
						<view class="price"><text>¥</text>{{item.original_price}}</view>
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<!-- 		<view class="block-title">
				<view class="title">
					限时抢购<text>海量商家优惠券</text>
				</view>
				<view class="more" @click="onCoupons('more')">查看更多</view>
			</view> -->
			<view class="coupons" v-if="coupons.length < 0">
				<view class="coupons-item" v-for="(item, index) in coupons" :key="index">
					<view class="content">
						<view class="coupons-title">
							<view class="coupons-title-tips" v-if="item.type">
								<!-- value == 1服务券    value == 2代金券   value == 3提货券 -->
								<image v-if="item.type.value == '1'" class="coupons-title-icon"
									src="../../static/icons/equity_coupons_01.png" mode="aspectFill"></image>
								<image v-else-if="item.type.value == '2'" class="coupons-title-icon"
									src="../../static/icons/equity_coupons_02.png" mode="aspectFill"></image>
								<image v-else-if="item.type.value == '3'" class="coupons-title-icon"
									src="../../static/icons/equity_coupons_03.png" mode="aspectFill"></image>
							</view>
							<view class="coupons-title-name">
								{{item.title}}
							</view>
						</view>
						<view class="sun-text">{{item.title}}</view>
					</view>
					<view class="logo">
						<image class="logo-img" :src="item.cover" mode="aspectFill"></image>
					</view>
					<button class="btn" :disabled="!item.can.get"
						@click="onCoupons('get', item.coupon_id, index)">{{item.can.get ? '立即领取' : '已领取'}}</button>
				</view>
			</view>
			<view class="block-title">
				<view class="title">
					优选商品<text>海量商家商品优选</text>
				</view>
			</view>
			<!-- 优选商品 -->
			<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
			<!-- 分页 -->
			<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
		</block>
	</view>
</template>

<script>
	import {
		companies,
		companiesList
	} from '@/apis/interfaces/company'
	import {
		mall,
		list,
		managesCoupons
	} from '@/apis/interfaces/goods'
	import goodsList from '@/components/goods-list/goods-list'
	import industryList from '@/components/industry-list/industry-list'
	import userAuth from '@/public/userAuth'
	import {
		config
	} from '@/apis/index.js'
	export default {
		comments: {
			goodsList,
			industryList
		},
		data() {
			return {
				tabIndex: 0,
				nvConfig: {
					tabArr: [{
							title: '通证商城 - 买你想买',
							active: true
						},
						// {
						// 	title: '企业广场'
						// }
					],
					color: '#FFF',
					hideback: true,
					bgColor: 'rgb(151, 109, 255)',
					btn: [{
						icon: '/static/icons/search-icon.png',
						style: 'paddingRight: 20rpx;'
					}]
				},
				// 易货部分
				banners: [],
				classify: [],
				coupons: [],
				position: {},
				goods: [],
				goodsPage: 1,
				// 广场部分
				industryIndex: 0,
				recommendBus: [],
				hotBus: [],
				industryBus: [],
				busList: [],
				busPage: 1,
				// 分页
				pageStatus: '',
				imgUrl: config.apiUrls
			};
		},
		created() {
			this.getMall()
		},
		methods: {
			// tab
			onNvTab(e) {
				let tabIndex = e.index
				for (let i in this.nvConfig.tabArr) {
					if (i == tabIndex) this.nvConfig.tabArr[i].active = true
					else this.nvConfig.tabArr[i].active = false
				}
				this.tabIndex = tabIndex
				if (tabIndex == 1 && this.recommendBus.length <= 0) this.getCompanies()
			},
			// 搜索
			onRightBtn(e) {
				switch (e.index) {
					case 0:
						// this.$Router.push({
						// 	name: 'Search',
						// 	query: {
						// 		type: this.tabIndex
						// 	}
						// })
						uni.navigateTo({
							url: '/pages/equity/search?type=' + this.tabIndex + ''
						})
						break
				}
			},
			// 点击轮播图
			swiperClick(url) {
				if (url === 'goBaoDanList') {
					uni.navigateTo({
						url: 'pages/goods/lists?type=baodan'
					})
				}
			},
			// 领取，更多优惠券
			onCoupons(type, id, index) {
				let token = this.$store.getters.getToken
				if (token == '') {
					let userLogin = new userAuth()
					userLogin.Login()
					return
				}
				if (type === 'more') {
					this.$Router.push({
						name: 'CouponsList'
					})
					return
				}
				if (type === 'get') {
					managesCoupons(id).then(res => {
						this.$set(this.coupons, index, res)
						uni.showToast({
							title: '领取成功',
							type: 'primary',
							duration: 3000
						})
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: err.message
						})
					})
				}
			},
			// 企业广场
			getCompanies() {
				companies().then(res => {
					this.recommendBus = res.positions
					this.hotBus = res.hot
					this.industryBus = [{
						title: '全部',
						industry_id: ''
					}, ...res.industries]
					this.getCompaniesList()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 企业广场行业
			onBusIndustry(index) {
				this.industryIndex = index
				this.busPage = 1
				this.getCompaniesList()
			},
			// 企业列表
			getCompaniesList() {
				companiesList({
					industry_id: this.industryBus[this.industryIndex].industry_id,
					page: this.busPage
				}).then(res => {
					if (res.page.current === 1) {
						this.busList = []
					}
					this.busList = this.busList.concat(res.data)
					this.busPage = res.page.current
					this.pageStatus = res.page.has_more ? 'more' : 'noMore'
				})
			},
			// 易货首页
			getMall() {
				mall().then(res => {
					this.classify = res.categories.slice(0, 9)
					this.banners = res.banners
					this.banners = [...this.banners, {
						cover: config.apiUrls + 'images/baodan-banner.png',
						url: 'goBaoDanList'
					}]
					this.coupons = res.coupons
					this.position = res.positions
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
				this.getGoods()
			},
			// 商品列表
			getGoods() {
				list({
					page: this.goodsPage
				}).then(res => {
					if (res.page.current === 1) {
						this.goods = []
					}
					this.goods = this.goods.concat(res.data)
					this.goodsPage = res.page.current
					this.pageStatus = res.page.has_more ? 'more' : 'noMore'
				})
			},
			// 商品详情
			onGoods(e) {
				this.$Router.push({
					name: 'goodsDetails',
					params: {
						id: e.goods_id
					}
				})
			},
			// 易货分类
			onClassify(id) {
				// this.$Router.push({
				// 	name: 'goodsList'
				// })
				uni.navigateTo({
					url: `/pages/goods/lists?type=id&id=${id}`
				})
			},
			// 打开微信小程序
			onOpenWechat(e) {
				plus.share.getServices(res => {
					let sweixin = null;
					for (let val of res) {
						if (val.id === 'weixin') {
							sweixin = val
						}
					}
					/**  以此为例子 显示跳转引导页
					 *    'index_4'
					 *     index   跳小程序企业首页
					 *     4       企业id
					 **/
					if (sweixin != null) {
						sweixin.launchMiniProgram({
							id: e.original_id,
							path: 'pages/login/guide?scene=index_' + e.company_id,
						})
					} else {
						uni.showToast({
							title: '当前环境不支持打开微信小程序',
							icon: 'none'
						})
					}
				})
			}
		},
		// 下拉加载
		onReachBottom() {
			if (this.pageStatus == 'more') {
				this.pageStatus = 'loading'
				switch (this.tabIndex) {
					case 0:
						this.goodsPage += 1
						this.getGoods()
						break;
					case 1:
						this.busPage += 1
						this.getCompaniesList()
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 易货
	.header-back {
		background-image: linear-gradient(to bottom, white, #f8f8f8);
		padding-top: $padding;

		// 易货轮播
		.banner {
			position: relative;
			background: white;
			margin: 0 $margin;
			border-radius: $radius/2;
			padding-top: calc(50% - #{$margin * 2});
			overflow: hidden;

			.banner-swiper {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				.cover {
					width: 100%;
					height: 100%;
					border-radius: $radius/2;
				}
			}
		}

		// 分类
		.classify {
			display: flex;
			margin: $margin/2;
			flex-wrap: wrap;

			.classify-item {
				margin: $margin/2;
				width: calc(20% - #{$margin});
				text-align: center;
				position: relative;


				.cover {
					width: 98rpx;
					height: 98rpx;
					vertical-align: top;
					margin-bottom: $margin/2;
				}

				.title {
					line-height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
					.is_allow_values {
						color: #fff;
						background-image: linear-gradient(to left,$main-color,$mian-color-light);
						padding: 2rpx 14rpx;
						font-size: 20rpx;
						text-align: center;
						border-radius: 30rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	// 每日推荐
	.goods-push {
		margin: 0 $margin;
		background: white;
		border-radius: $radius/2;
		display: flex;

		.itme {
			width: 50%;
		}

		.item-mian {
			width: 50%;
			padding: $padding/2;
			height: 450rpx;
			box-sizing: border-box;
			text-align: center;
			border-right: solid 1rpx $border-color;
			@extend .vertical;
			position: relative;
			
			.is_self {
				position: absolute;
				top: 14rpx;
				right: 20rpx;
				background-image: linear-gradient(to bottom, #ee4c47, #9e312f);
				// background-color: #ee4c47;
				box-shadow: 0 4rpx 10rpx 2rpx rgba($color: #000, $alpha: .3);
				color: #fff;
				font-size: 26;
				padding: 2rpx 20rpx 10rpx 20rpx;
				border-radius: 0 0 50rpx 50rpx;
			}
			.title {
				font-weight: bold;
				font-size: $title-size;
				@extend .nowrap;
				line-height: 50rpx;
				.is_allow_values {
					color: #fff;
					background-image: linear-gradient(to left,$main-color,$mian-color-light);
					padding: 2rpx 14rpx;
					font-size: 20rpx;
					text-align: center;
					border-radius: 30rpx;
					margin-right: 20rpx;
				}
			}

			.price {
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
				line-height: 50rpx;

				text {
					font-size: 80%;
					margin-right: 10rpx;
				}
			}

			.cover {
				margin-bottom: 20rpx;
				width: 320rpx;
				height: 300rpx;
				vertical-align: top;
			}
		}

		.itme-list {
			position: relative;
			padding: 25rpx $padding/2;
			padding-left: 150rpx;
			height: 150rpx;
			box-sizing: border-box;

			.title {
				font-size: $title-size-lg;
				@extend .nowrap;
				line-height: 50rpx;
			}

			.price {
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
				line-height: 40rpx;

				text {
					font-size: 80%;
					margin-right: 10rpx;
				}
			}

			.cover {
				position: absolute;
				left: $padding/2;
				top: $padding/2;
				width: calc(150rpx - #{$padding});
				height: calc(150rpx - #{$padding});
			}
		}
	}

	// 优惠券
	.coupons {
		display: flex;
		flex-wrap: wrap;
		margin: -10rpx ($margin - 10rpx);

		.coupons-item {
			background: white;
			width: calc(50% - 20rpx);
			margin: 10rpx;
			border-radius: $radius/2;
			padding: $padding - 10;
			box-sizing: border-box;
			// display: flex;
			align-items: center;
			justify-content: space-between;

			.content {
				width: 100%;

				.coupons-title {
					font-size: $title-size-lg;
					font-weight: 600;
					margin-bottom: 10rpx;
					line-height: 54rpx;
					display: flex;
					@extend .nowrap;

					.coupons-title-tips {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
						background-color: #f5f5f5;
						text-align: center;
						margin-right: 10rpx;

						.coupons-title-icon {
							width: 28rpx;
							height: 28rpx;
							margin: 11rpx;
						}
					}
				}

				.sun-text {
					font-size: $title-size-sm;
					color: $text-gray;
					line-height: 54rpx;
					@extend .nowrap;
				}

				.btn {
					color: $text-price;
					border: solid 1rpx $text-price;
					display: inline-block;
					font-size: $title-size-sm;
					padding: 0 ($padding/2);
					height: 45rpx;
					line-height: 45rpx;
					border-radius: 22rpx;
				}
			}

			.logo {
				width: 100%;
				padding-top: 70%;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;

				.logo-img {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}

			.btn {
				background-color: #faf2dd;
				border-radius: 8rpx;
				margin-top: 20rpx;
				color: #fd5f3c;
				text-align: center;
				line-height: 64rpx;
				font-size: 28rpx;
				font-weight: 600;

				&[disabled] {
					background: rgba($color: #faf2dd, $alpha: .8);
					color: rgba($color: #fd5f3c, $alpha: .5);
				}

				&::after {
					border: none;
				}
			}
		}
	}

	// 热易商家
	.hot-swiper {
		margin: 0 $margin $margin $margin;
		height: 240rpx;

		.hot-box {
			position: absolute;
			height: 100%;
			width: 100%;
			border-radius: ($radius/2);
			background: white;
			padding: $padding;
			box-sizing: border-box;

			.hot-vip {
				position: absolute;
				top: $padding;
				left: $padding;
				background-color: #191919;
				color: #f3c8a8;
				font-size: 24rpx;
				line-height: 32rpx;
				padding: 0 8rpx;
				border-radius: 6rpx 6rpx 6rpx 0;
				text-transform: uppercase;
			}

			.hot-tool {
				position: absolute;
				top: 30rpx;
				right: $padding;
				;

				.hot-deal {
					width: 120rpx;
					height: 120rpx;
					text-align: center;
					box-shadow: 0 0 14rpx rgba(260, 60, 80, .9);
					background: linear-gradient(to bottom, #e1293f, #f85d31);
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 50%;
					padding-top: 25rpx;
					box-sizing: border-box;
					font-size: 24rpx;

					.hot-deal-number {
						font-size: 28rpx;
						font-weight: 600;
						display: block;
					}
				}
			}

			.cover {
				position: absolute;
				left: $padding;
				top: $padding;
				width: calc(198rpx - #{$padding * 2});
				height: calc(198rpx - #{$padding * 2});
			}

			.hot-content {
				padding-left: calc(198rpx - #{$padding});

				.hot-title {
					font-weight: bold;
					font-size: $title-size-lg;
					line-height: 40rpx;
					height: 40rpx;
					width: 60%;
				}

				.hot-credit {
					font-size: 24rpx;
					display: inline-block;
					font-weight: normal;
					color: #ec652f;
					border: 2rpx solid #ec652f;
					line-height: 36rpx;
					border-radius: 6rpx;
					padding: 0 6rpx;
					margin-top: 10rpx;
				}

				.hot-trade,
				.hot-warrant {
					font-size: 24rpx;
					color: #999;
					padding-top: 10rpx;
				}

				.hot-trade {
					width: 60%;
				}

				.hot-warrant {
					display: flex;

					.hot-warrant-text {
						width: 50%;
					}

					.hot-bar {
						display: flex;
						width: 50%;
						margin-top: 4rpx;

						.hot-bar-color {
							background: #ebebeb;
							border-left: 2rpx solid transparent;
							border-right: 2rpx solid transparent;
							width: calc(100% - 50rpx);
							border-radius: 60rpx;
							margin: 6rpx 10rpx 0 0;
							height: 18rpx;

							.hot-bar-strip {
								background-color: #ff8562;
								border: 1px solid #ff8562;
								border-radius: 10px;
								box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
								background-size: 3em 3em;
								background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ec3950 0.9em, #ec3950 2.1em, transparent 2.1em, transparent 2.9em, #ec3950 3.1em);
								height: 14rpx;
								border-radius: 60rpx;
								position: relative;

								&::after {
									content: '';
									position: absolute;
									top: 0;
									bottom: 0;
									left: 0;
									right: 0;
									z-index: 1;
									height: 100%;
									background-image: linear-gradient(to bottom, #db152e, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #db152e);
									border-radius: 20rpx;
								}
							}
						}

						.hot-bar-per {
							font-size: 20rpx;
							color: rgba(0, 0, 0, 0.8);
							transform: scale(.8);
						}
					}
				}

				.credibility {
					height: calc(108rpx - #{$padding * 2});
					font-size: $title-size-m;
					color: $text-gray;
				}

				.trading {
					line-height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
				}
			}

			.btn {
				position: absolute;
				top: 50%;
				right: $padding;
				font-size: $title-size-m;
				background-color: $text-price;
				color: white;
				line-height: 50rpx;
				width: 100rpx;
				text-align: center;
				margin-top: -25rpx;
			}
		}
	}

	// 推荐商家
	.recommended {
		white-space: nowrap;

		.item-box {
			position: relative;
			display: inline-block;
			background: white;
			width: 370rpx;
			margin-left: $margin;
			border-radius: ($radius/2);
			padding: ($padding + $padding/2) $padding - 10;
			box-sizing: border-box;
			text-align: center;

			&:last-child {
				margin-right: $margin;
			}

			.item-cover {
				background: #eee;
				width: 120rpx;
				height: 120rpx;
				vertical-align: top;
				border-radius: $radius / 2;
			}

			.item-vip {
				position: absolute;
				left: 0;
				;
				top: 20rpx;
				background-color: #f3ceb3;
				font-size: 24rpx;
				line-height: 38rpx;
				border-radius: 0 6rpx 6rpx 0;
				display: flex;

				.item-vip-text {
					background-color: #191919;
					color: #f3c8a8;
					padding: 0 6rpx;
					text-transform: uppercase;
				}

				.item-vip-tips {
					padding: 0 6rpx;
				}
			}

			.item-title {
				margin: 20rpx 0 10rpx;
			}

			.item-trade {
				font-size: 28rpx;
				color: #999999;
			}

			.item-bar {
				display: flex;
				margin: 10rpx 0 20rpx;

				.item-bar-color {
					background: #ebebeb;
					border-left: 2rpx solid transparent;
					border-right: 2rpx solid transparent;
					width: calc(100% - 50rpx);
					border-radius: 60rpx;
					margin: 4rpx 10rpx 0 0;

					.item-bar-strip {
						background-color: #f3c8a8;
						border: 2rpx solid #f3c8a8;
						border-radius: 20rpx;
						box-shadow: 1vw 3vh 10vh rgba(168, 7, 7, 0.8);
						background-size: 3em 3em;
						background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #ee883d 0.9em, #ee883d 2.1em, transparent 2.1em, transparent 2.9em, #ee883d 3.1em);
						animation: warning-animation 1.4s infinite linear;
						height: 14rpx;
						border-radius: 60rpx;
						position: relative;

						.item-bar-per {
							position: absolute;
							right: 0;
							top: -6rpx;
							height: 100%;
							font-size: 20rpx;
							color: rgba(0, 0, 0, 0.8);
							text-shadow: 0 1px rgba(255, 255, 255, 0.4);
							transform: scale(.8);
						}

						&::after {
							content: '';
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							z-index: 1;
							height: 100%;
							background-image: linear-gradient(to bottom, #ee883d, rgba(168, 7, 7, 0.6) 15%, transparent 60%, #ee883d);
							border-radius: 10px;
						}

						@keyframes warning-animation {
							0% {
								background-position: 0 0;
							}

							100% {
								background-position: 3em 0;
							}
						}
					}
				}

				.item-bar-strip-img {
					width: 24rpx;
					height: 24rpx;
					animation: bounce-up 1.5s linear infinite;
				}

				@keyframes bounce-up {
					25% {
						transform: translateY(2rpx);
					}

					50%,
					100% {
						transform: translateY(0);
					}

					75% {
						transform: translateY(-2rpx);
					}
				}
			}

			.item-url {
				background: linear-gradient(to right, #e1293f, #f85d31);
				color: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				line-height: 52rpx;
				padding: 10rpx;
				box-sizing: border-box;
				font-size: 28rpx;

				.item-credit {
					font-size: 24rpx;
					border-radius: 6rpx;
					background-color: #FFFFFF;
					color: #e1293f;
					flex: 1;
					display: flex;
					text-align: left;
					padding: 0 10rpx;
					box-sizing: border-box;

					.item-credit-img {
						width: 28rpx;
						height: 28rpx;
						margin: 12rpx 8rpx 0 0;
					}
				}

				.item-btn {
					padding-left: 20rpx;
					box-sizing: border-box;
					display: flex;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-top: 12rpx;
					}
				}
			}
		}
	}

	// 模块标题
	.block-title {
		padding: $padding;
		display: flex;
		justify-content: space-between;

		.title {
			font-weight: bold;

			text {
				padding-left: $padding/2;
				font-weight: normal;
				font-size: $title-size-m;
				color: $text-gray;
			}
		}

		.more {
			font-size: $title-size-m;
			font-weight: normal;
			color: $text-gray;
		}
	}
</style>
