<template>
	<view style="background-color: #fff;">
		<view class="goods-bar" :class="color ? 'goods-box' : ''" :style="{'height': customVal.height + 'px;padding:' + customVal.top + 'px 15px ' + (customVal.top - statusBarHeight) + 'px;'}">
			<view class="icon flex" v-if="pagesLength === 1" @click="toPage()">
				<up-icon name="home" size="18" color="#333" />
			</view>
			<view class="icon flex" v-if="pagesLength > 1" @click="toBackPage()">
				<up-icon name="arrow-left" size="18" color="#333" />
			</view>

			<view class="inputBox" :class="color ? 'input1' : ''">
				<view :style="{backgroundImage: 'url(' + sp2 + ')'}" class="search"></view>
				<input class="input" type="text" v-model="title" placeholder="搜索商品" @confirm="searchShopGoods" />
			</view>
		</view>

		<view class="oneBox" :style="{'background': 'url(' + confidence.background_image + ')' + ' no-repeat;background-size: cover;background-position: center;'}">
			<div class="cont">
				<div class="logoBox flex1">
					<div class="avatar"><img :src="confidence.logo" />{{confidence.name}}</div>
					<button class="share flex" open-type="share">
						<up-icon name="share" size="18" color="#fff" />&nbsp;分享
					</button>
				</div>
				<div class="introBox flex1" @click="showIntro = true">
					<text>{{ confidence.describe}}</text>
					<up-icon name="arrow-right" />
				</div>
			</div>
		</view>
		
		<view class="pageBox" :class="confidence.actives && confidence.actives.length > 0 ? '' : 'marTop'">
			<!-- 会场状态 0未开始销售 1销售中 2销售结束 -->
			<up-sticky :offset-top="barHeight" v-if="confidence.actives && confidence.actives.length > 0">
				<div class="move_tabs">
					<scroll-view class="scroll_move" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view v-for="(item, index) in activeList" :key="item.id" :class="activeIndex === index ? 'tabs tabs-active' : 'tabs'"
								@click="onTabAction(item, index)">
							<view class="content_name">{{item.special_name}}</view>
							<view class="content_text">{{item.name}}</view>
						</view>
					</scroll-view>
				</div>
			</up-sticky>

			<div style="padding: 0 20rpx;box-sizing: border-box;">
				<div class="endtime">
					<div class="row"><view v-html="getTimeIng(confidence.sold_start_time, confidence.sold_off_time)"></view></div>
					<div class="row" v-if="confidence.actives && confidence.actives.length > 0">
						<text class="text_color">优惠</text>
						<text :style="{color: Color}">{{ confidence.actives[activeIndex].name }}</text>
					</div>
					<div class="row"><text class="text_color">服务</text>假一赔十·七天无理由</div>
					<div class="row">
						<text class="text_color">发货</text>
						<template v-if="confidence.ship_time_type && confidence.ship_time_type != 0">最晚于{{shipType[confidence.ship_time_type]}}发货，
						</template>停发地区发货时效不确定<template v-if="confidence.ship_address">，{{confidence.ship_address}}发货</template>
					</div>
				</div>
			</div>
			
			<div style="padding: 0 20rpx;box-sizing: border-box;">
				<div :class="role === 1 ? 'botBlock' : ''">
					<up-sticky :offset-top="list.length > 1 ? barHeight : barHeight + 10">
						<div v-if="list.length > 1" style="background-color: #fff;">
							<up-tabs
								:current="active"
								keyName="name"
								:list="list"
								:lineColor="Color"
								:activeStyle="{ color: Color }"
								@click="scorllBottom">
							</up-tabs>
						</div>
						<view class="sortBox">
							<view class="item flex" v-for="(item, index) in sortList" :key="index" @click="chooseSort(index)">
								<text :class="sortIndex === index ? 'choose' : ''">{{item}}</text>
								<view class="icon" v-if="index === 2">
									<up-icon name="arrow-up" size="10" :color="priceType && sortIndex === 2 ? Color : ''" />
									<up-icon name="arrow-down" size="10" :color="!priceType && sortIndex === 2 ? Color : ''" />
								</view>
							</view>
						</view>
					</up-sticky>
					<div class="list_box">
						<div v-for="(item, index) in storelist" :key="index" class="neirong" @click="hanleJump1(item.id)">
							<image :src="item.face_img + '?x-oss-process=image/resize,m_fill,w_400,h_400'" mode="aspectFill"></image>
							<div class="text">{{item.title}}</div>
							<div class='move_img' v-if='item.active && item.active.name && item.active.type !== 1'>
								{{item.active.name}}
							</div>
							<div class="pricebox">
								<view class="price">
									<text class="icon">￥</text>
									<block v-if="item.price > 0"><text>{{item.price}}</text></block>
									<block v-else>
										<text v-if="item.max_price == item.min_price">{{item.min_price}}</text>
										<text v-else>{{item.min_price * 1}}~{{item.max_price}}</text>
									</block>
								</view>
								<view v-if="(item.price > 0 && item.market_price > 0) || (item.market_price > 0 && item.max_price == item.min_price && item.min_price > 0)" class="market_price"><text class="icon">￥</text>{{item.market_price}}</view>
							</div>
						</div>
					</div>

					<view class="bottom" v-if="page >= lastPage">— 没有更多了 —</view>
				</div>
			</div>
		</view>

		<view class="goods-sale flex" v-if="role == 1" @click="showShare = true">
			<text class="iconfont icon-share"></text>
			<text>&nbsp;分享帮卖</text>
		</view>
		
		<view class="topBox" v-if="showSlider">
			<view @click="toHomePage" class="home">
				<up-icon name="bookmark" color="#000" size="24" />
				<view>首页</view>
			</view>
			<view @click="scrollToTop" class="top flex">
				<up-icon name="arrow-upward" color="#000" size="20" />
			</view>
		</view>
		
		<van-share :show-share="showShare" @creatShare="creatShare" @getLink="getLink" @close="showShare = false" />
		
		<creat-poster v-if="showImg" :posterImg="posterImg" @closeShow="showImg = false" />
		
		<up-popup :show="showIntro" :round="10" mode="bottom" @close="showIntro = false">
			<view class="popup">
				<view class="tit">品牌故事</view>
				<view class="text">{{confidence.describe}}</view>
				<view class="cancel" @click="showIntro = false">好的</view>
			</view>
		</up-popup>
		
		<!-- 隐私协议弹窗 -->
		<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
		
	</view>
</template>

<script>
	import { get, post } from '@/Api/request.js'
	import { ref, reactive, toRefs } from 'vue'
	import { DownTime, UpTime, userBind, judgePrivacy } from '@/components/common.js'
	import { sp2 } from '@/components/img.js'
	import vanShare from '@/components/share/vanShare.vue'
	import creatPoster from '@/components/share/creatPoster.vue'
	import { Style } from '@/utils/list.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	
	export default {
		components: {
			vanShare,
			creatPoster,
			privacyPopup
		},
		setup() {
			const state = reactive({
				activeList: [],
				active_id: '',
				activeIndex: 0,
				sp2: sp2,
				shipType: {
					'1': '48小时内',
					'2': '72小时内',
					'3': '7天内'
				}
			})
			const data = reactive({
				showSlider: false,
				showImgActive: false,
				sortIndex: 0,
				priceType: false,
				sortList: ['综合', '销量', '价格', '上新'],
				showIntro: false,
				id: '',
				confidence: {
					background_image: ''
				},
				storelist: [],
				list: [],
				pagesLength: 0,
				active: 0,
				lastPage: 0,
				color: false,
				sale_id: '',
				s: '',
				u: '',
				company_id: '',
				shareUrl: '',
				sold_status: '',
				role: 0,
				showShare: false,
				showImg: false,
				posterImg: '',
				customVal: uni.getMenuButtonBoundingClientRect(),
				Color: '',
				Theme: '',
				priceColor: '',
				barHeight: 60,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				showPrivacy: false
			})

			const search2 = reactive({
				sales: '',
				price: '',
				score: 2,
				new: ''
			})
			
			const search1 = reactive({
				title: '', // 店铺名称
				merchant_type: '', // 店铺类型
				page: 1
			})
			
			let pages = getCurrentPages()
			data.pagesLength = pages.length
			const scorllBottom = (e) => {
				data.active = e.index
				search1.merchant_type = e.detail.name
				search1.title = ''
				data.storelist = []
				search1.page = 1
				getBoxlist()
			}
			
			const hanleJump1 = (id) => {
				uni.navigateTo({
					url: '/pages/productDetails/index?id=' + id
				})
			}
			
			// 小店信息
			async function getBoxtitle() {
				let res = await get(`/api/v1/merchant/${data.id}`)
				data.confidence = res.data
				data.sold_status = res.data.sold_status
				state.activeList = res.data.actives ? res.data.actives : []
				if(!state.active_id) {
					state.active_id = res.data.actives && res.data.actives.length > 0 ? res.data.actives[0].id : '' //有活动默认传第一个id
				}
				if(uni.getEnterOptionsSync().query && uni.getEnterOptionsSync().query.actionIndex) {
					state.activeIndex = parseInt(uni.getEnterOptionsSync().query.actionIndex)
					state.active_id = res.data.actives[state.activeIndex].id
				} else if(state.active_id && res.data.actives.length != 0) {
					res.data.actives.forEach((it, i) => {
						if(it.id == state.active_id) {
							state.activeIndex = i
						}
					})
				}
			}

			const toHomePage = () => {
				uni.reLaunch({
					url: '/pages/index/index?number=1'
				})
			}
			
			// 小店团购
			async function getBoxlist() {
				uni.showLoading({
					title: '加载中...'
				})
				let parmas = {}
				if (data.confidence.actives) {
					parmas = {
						...search1,
						...search2,
						active_id: state.active_id //活动id
					}
				} else {
					parmas = {
						...search1,
						...search2,
						active_id: '' //活动id
					}
				}

				await get(`/api/v1/merchant/goods/${data.id}`, parmas).then(res => {
					data.storelist = data.storelist.concat(res.data)
					data.lastPage = res.meta.last_page
					uni.hideLoading()
				})
			}
			
			// 小店分类
			async function getBoxlist1() {
				let res = await get(`/api/v1/merchant/type/${data.id}`)
				data.list = res.data
				data.list.unshift({
					id: ' ',
					name: '全部'
				})
			}
			
			// 回退上一级
			const toBackPage = () => {
				uni.navigateBack({
					delta: 1
				})
			}

			const searchShopGoods = () => {
				data.storelist = []
				search1.merchant_type = ''
				search1.page = 1
				getBoxlist()
			}

			function toPage() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			
			const getShareUrl = () => {
				post('/api/v1/user/share', {
					page: 'pages/smallshop/index',
					query: `id=${data.id}`
				}).then((res) => {
					data.shareUrl = res.data.path
				})
			}
			
			// 排序
			function chooseSort(index) {
				data.sortIndex = index
				if (index === 2) {
					data.priceType = !data.priceType
					search2.price = data.priceType ? 1 : 2
					search2.new = ''
				} else {
					search2.price = ''
				}
				search2.sales = index === 1 ? 2 : ''
				search2.score = index === 0 ? 2 : ''
				search2.new = index === 3 ? 2 : ''
				updateList()
			}
			const scrollToTop = () => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}

			function updateList() {
				data.storelist = []
				search1.page = 1
				getBoxlist()
			}
			
			// 活动切换事件
			const handle_move = () => {
				data.storelist = []
				search1.page = 1
				getBoxlist()

			}
			
			// 分享海报
			const handleImgActive = () => {
				data.showImgActive = true
			}
			
			// 分享链接
			const getLink = async () => {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				post('/api/v1/user/link/short', {
					page: 'pages/smallshop/index',
					shop_goods_id: data.id
				}).then((res) => {
					data.link = res.data.link
					uni.setClipboardData({
						data: data.link
					})
				})
			}
			
			// 生成海报
			const creatShare = () => {
				uni.showLoading({
					title: '海报生成中...'
				})
				get(`/api/v1/merchant/share/${data.confidence.id}`, {active_id: state.active_id}).then((res) => {
					data.posterImg = res.data[0].image
					uni.hideLoading()
					data.showImg = true
				})
			}
			
			function getTimeIng(startTime, endTime) {
				// 如果开始时间存在，结束时间不存在，判断活动是否开始
				if(startTime && !endTime){
					return UpTime(startTime, 2)
				}
				// 如果开始时间不存在，结束时间存在，判断活动是否结束
				if(!startTime && endTime) {
					return DownTime(endTime, 2)
				}
				// 如果开始时间、结束时间存在
				if(startTime && endTime) {
					let nt = new Date().getTime()
					let st = new Date(startTime.replace(/-/g, "/"))
					let et = new Date(endTime.replace(/-/g, "/"))
					if(nt <= st || st < nt < et) {
						return UpTime(startTime, 2)
					}
					if(nt >= et) {
						return DownTime(startTime, 2)
					}
				}
				return ''
			}
			
			const onTabAction = (item, index) => {
				state.active_id = item.id
				state.activeIndex = index
				handle_move()
			}
			
			return {
				...toRefs(data),
				getBoxtitle,
				getBoxlist,
				getBoxlist1,
				toBackPage,
				toPage,
				scorllBottom,
				...toRefs(search1),
				searchShopGoods,
				userBind,
				getShareUrl,
				hanleJump1,
				chooseSort,
				...toRefs(search2),
				updateList,
				toHomePage,
				scrollToTop,
				handle_move,
				DownTime,
				UpTime,
				handleImgActive,
				...toRefs(state),
				getLink,
				creatShare,
				getTimeIng,
				onTabAction
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			const _this = this
			let scenne = uni.getEnterOptionsSync().scene
			if (options) {
				Object.keys(options).map((key) => {
					if (key == 'id') {
						_this.id = options[key] || 0
					} else if (key == 'from') {
						_this.sale_id = options[key] || 0
					} else if (key == 's') {
						_this.s = options[key] || 0
					} else if (key == 'u') {
						_this.u = options[key] || 0
					} else if (key == 'company_id') {
						_this.company_id = options[key] || ''
					}
				})
			} else {
				_this.id = options.id
				_this.sale_id = options.from || 0
				_this.s = options.s || 0
				_this.u = options.u || 0
			}
			if (options.scene) {
				const scene = decodeURIComponent(options.scene)
				_this.id = scene.split(',')[0] || 0
				_this.sale_id = scene.split(',')[1] || 0
				_this.s = scene.split(',')[2] || 0
				_this.u = scene.split(',')[3] || 0
				_this.active_id = scene.split(',')[4] || ''
			}
			await _this.getBoxtitle()
			await _this.getBoxlist()
			await _this.getBoxlist1()
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			this.Theme = uni.getStorageSync('theme_index') * 1
			let parmas = {
				from: _this.sale_id,
				s: _this.s,
				u: _this.u,
				group_id: _this.id,
				scene: scenne,
				company_id: _this.company_id
			}
			this.userBind(parmas)
			this.getShareUrl()
			this.role = uni.getStorageSync('role')
			this.barHeight = this.customVal.top + this.customVal.height
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.color = true
				this.showSlider = true
			} else {
				this.color = false
				this.showSlider = false
			}
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page++
				this.getBoxlist()
			}
		},
		onShareAppMessage() {
			let share_tit = this.confidence.share_title
			let share_img = this.confidence.share_image
			let share_url = this.shareUrl
			if(this.confidence.actives && this.confidence.actives[this.activeIndex]) {
				share_tit += '【全场' + this.confidence.actives[this.activeIndex].name + '】'
				share_img = this.storelist[0] ? this.storelist[0].face_img : share_img
				share_url += '&actionIndex=' + this.activeIndex
			}
			return {
				title: share_tit,
				imageUrl: share_img,
				path: share_url
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.topBox{
		position: fixed;
		bottom: 15%;
		right: 4%;
		text-align: center;
		z-index: 90;
		.home{
			background: #fff;
			font-size: 28rpx;
			border-radius: 8rpx;
			padding: 10rpx;
			box-sizing: border-box;
			opacity: 0.9;
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
		}
		.top{
			margin-top: 20rpx;
			background: #fff;
			width: 80rpx;
			height: 80rpx;
			line-height: 107rpx;
			border-radius: 50%;
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
		}
	}

	.sortBox{
		background-color: #fff;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.item{
			flex: 1;
			color: #666;
			font-size: 28rpx;
			.icon {
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				.iconfont{
					font-size: 24rpx;
					line-height: 16rpx;
				}
			}
		}
		.choose {
			color: v-bind('Color');
			font-weight: bold;
		}
	}

	.popup{
		padding: 30rpx;
		.tit{
			font-size: 34rpx;
			font-weight: 800;
		}
		.text{
			margin:20rpx 0;
			font-size: 30rpx;
			line-height: 56rpx;
			max-height: 60vh;
			overflow-y: auto;
		}
		.cancel{
			width: 690rpx;
			height: 86rpx;
			line-height: 86rpx;
			background: v-bind('Color');
			border-radius: 49rpx;
			text-align: center;
			color: #fff;
			margin-top: 50rpx;
		}
	}

	.bottom{
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		margin: auto;
		line-height: 80rpx;
	}

	.list_box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.neirong {
			width: 48%;
			margin-bottom: 30rpx;
			image {
				width: 330rpx;
				height: 330rpx;
				border-radius: 10rpx;
			}
		}

		.text {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			height: 40px;
			color: #2c2c2c;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin: 10rpx 0;
		}

		.move_img {
			display: inline-block;
			font-size: 24rpx;
			color: #fff;
			margin: 3px 0px;
			background-image: url('@/static/image/move_img.png');
			background-repeat: no-repeat;
			padding: 0px 3px 0px 12px;
			height: 40rpx;
			background-size: 100% 100%;
			line-height: 40rpx;
		}
		.pricebox{
			display: flex;
			align-items: flex-end;
			.price {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: v-bind('priceColor');
				.icon {
					font-size: 25rpx;
				}
			}
			.market_price {
				margin-left: 20rpx;
				font-size: 26rpx;
				color: #676767;
				text-decoration: line-through;
			}
		}
		
	}

	.goods-box {
		background-color: #fff !important;
	}

	.goods-bar {
		position: fixed;
		top: 0;
		width: 100%;
		padding: 80rpx 15rpx 0;
		background-color: rgba(255, 255, 255, 0);
		z-index: 99;
		height: 90rpx;
		align-items: center;
		display: flex;
		.icon{
			width: 60rpx;
			height: 60rpx;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 50%;
			margin-right: 30rpx;
		}
	}

	.oneBox{
		height: 430rpx;
		width: 100%;
		background-size: 100%;
		position: relative;
		z-index: 98;
		.cont{
			position: absolute;
			bottom: -58rpx;
			left: 0;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			.logoBox{
				.avatar{
					display: flex;
					align-items: center;
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					color: #fff;
					image{
						width: 90rpx;
						height: 90rpx;
						border-radius: 15rpx;
						margin-right: 20rpx;
					}
				}
				.share{
					width: 147rpx;
					height: 61rpx;
					line-height: 61rpx;
					background: v-bind('Color');
					opacity: 1;
					border-radius: 31rpx;
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
	}

	.inputBox{
		display: flex;
		align-items: center;
		height: 100%;
		border-radius: 33rpx;
		background-color: rgba(255, 255, 255, 0.6);
		padding: 0 24rpx;
		width: 300rpx;
		&.input1{
			background-color: #f1f1f1;
		}
		.search{
			background-repeat: no-repeat;
			background-size: 452px 408px;
			height: 17px;
			width: 17px;
			background-position: -123px -136px;
			transform: scale(0.85);
			margin-right: 10rpx;
		}
		.input {
			font-size: 28rpx;
			width: calc(100% - 20px);
		}
	}

	.introBox{
		padding: 0 25rpx;
		margin-top: 20rpx;
		background: #fff;
		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
		opacity: 1;
		border-radius: 20rpx;
		height: 116rpx;
		box-sizing: border-box;
		text{
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			padding-right: 20rpx;
			color: #2c2c2c;
			font-size: 26rpx;
			line-height: 40rpx;
		}
	}

	.advertise {
		height: 226rpx;
		background: rgba(222, 222, 222, 0.39);
		opacity: 1;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.theme-list {
		margin-top: 12px;
	}

	.fixed-nav {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.fixed-nav-content {
		display: flex;
	}

	.tab-title {
		padding: 0 13px;
		margin-right: 12px;
		color: #141414;
		border-radius: 13px;
		font-size: 12px;
		flex-shrink: 0;
		height: 0.52rem;
		line-height: 0.52rem;
	}
</style>

<style lang='scss' scoped>
	.endtime{
		width: 100%;
		border-radius: 10px;
		padding: 20rpx 30rpx;
		color: #666;
		background-color: #f5f5f5;
		box-sizing: border-box;
		.row{
			font-size: 24rpx;
			margin-bottom: 10rpx;
			color: #939393;
			.text_color {
				font-size: 26rpx;
				color: #2A2A2A;
			}
			text {
				margin-right: 20rpx;
			}
		}
	}

	.goods-sale {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #ccc;
		height: 110rpx;
		z-index: 100;
		font-size: 30rpx;
		line-height: 1;
		.iconfont{
			font-size: 20px;
			color: v-bind('Color');
		}
	}

	.botBlock {
		padding-bottom: 100rpx;
	}
	.pageBox{
		margin-top: 58rpx;
		position: relative;
		z-index: 90;
		&.marTop{
			margin-top: 78rpx;
		}
	}
	.move_tabs{
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #ffff;
		padding: 0 20rpx;
		box-sizing: border-box;
		.scroll_move{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			white-space: nowrap;
			width: 100%;
			padding: 10px 0;
			.tabs{
				display: inline-flex;
				margin-right: 20rpx;
				background-color: #f5f5f5;
				border-radius: 8rpx;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				padding: 0 10px;
				height: 45px;
				box-sizing: border-box;
				.content_name{
					font-size:  30rpx;
					font-weight: 700;
				}
				.content_text{
					margin-top: 5px;
					font-size:  24rpx;
					color: #66667f;
				}
			}
			.tabs-active{
				background-color: v-bind('Color');
				color: #fff;
				.content_text{
					color: #fff;
				}
			}
		}
	}
	
</style>
