1.0yangche/pages/packageOne/service/classify/shop_detail/shop_detail.vue

<template>
	<view class="wrap">
		<view class="header">
		    <swiper autoplay="true" class="swiper">
		      <swiper-item>
		        <view class="detail_banner"><image mode="widthFix" :src="url + allData.banner"/></view>
		        <view class="phone_num" @tap="toPhoto"><view class="iconfont photo_icon"></view> {{allData.photoNum}}张</view>
		      </swiper-item>
		    </swiper>
		</view>
		  <!-- 公司品牌 -->
		<view class="company">
		    <view class="company_top clear">
		        <view class="company_top_title">{{allData.name}}</view>
		        <view class="company_top_ren" v-if="allData.status == 1">
					<image src="https://wx.fujinyangche.com/nvrnetwork/images/vip.png"></image>
		        </view>
		        <view class="company_top_num">
					<view class="iconfont company_top_num_icon"></view>
					{{allData.pv}}
		        </view>
		      </view>
		      <view class="company_bottom">
		        <view class="company_bottom_wrap">
					<view class="company_bottom_item" v-for="item,index in allData.mainBusiness" :key="index">
						<view class="company_bottom_tit">{{item}}</view>
					</view>
		        </view>
		        <view class="class_more" @tap="toAllServe">查看明细 <text class="iconfont shuang_you"></text></view>
		    </view>
		</view>
		<!-- 公司地址 -->
		<view class="address1">
		    <view class="address_left clear" @tap="openLocat">
				<view class="address_tit">
					<view class="iconfont address_ditu"></view>
					{{allData.address}}
				</view>
		      <view class="address_che">{{allData.distance}}</view>
		    </view>
		    <view class="address_right" @tap="call"><view class="iconfont iphone"></view></view>
		</view>
		<!-- 空白 -->
		<view class="back"></view>
		<!-- 营业时间 -->
		<view class="time">
		    <view><view class="iconfont time_icon"></view>{{allData.businessTime}}</view>
		</view>
		<view class="back"></view>
		<!-- 业务介绍 -->
		<view class="yewu" style="overflow:hidden;">
		    <view>
				<view class="line"></view>
				<view class="yewu_tit">业务介绍</view>
		    </view>
		    <view :class="{jianjie:true,isShow:isLoad}">
				<text>{{allData.introduce}}</text>
		    </view>
		    <view class="isLoad" @tap="isShow">{{isLoad?'展开':'收起'}}<view class="iconfont header_bottom"></view></view>
		</view>
		<view class="back"></view>
		<!-- 服务项目 -->
		<view class="fuwu">
			<view class="clear">
			    <view style="float:left;">
					<view class="line"></view>
					<view class="yewu_tit">服务项目</view>
			    </view>
			</view>	
			<view class="nav_ul" style="position:relative;" v-if="allData.servieItemType !== null">
			    <scroll-view scroll-x="true" style="width: 100%; white-space: nowrap; display: flex;height:48rpx;overflow:hidden;">
			        <view v-for="item,index in allData.servieItemType"  :key="index" 
																		:class="['nav_nav', isIndex == item.pServiceName?'active':'']" 
																		:data-value="item.pServiceName" 
																		:data-storeid ="item.storeId" 
																		@tap="switchTab">{{item.pServiceName}}
						<view class="nav_line"></view>
			        </view>
			    </scroll-view>
			</view>
			<view class="fuwu_list clear">
			    <view v-for="item,index in allData.serviceItemDetail" :key="index" class="fuwu_list_item clear"@tap="toProjectDetail(item.id)">
					<view class="fuwu_list_item_img">
						<image :src="url + item.faceImg"></image>
					</view>
					<view class="fuwu_list_item_tit">
						<view class="fuwu_list_item_tit_zi">{{item.name}}</view>
						<view style="float: left;margin-top:24rpx;">
							<view class="price"><text style="font-size:36rpx;">¥</text>{{item.disPrice}}</view>
							<view class="price2">¥ {{item.price}}</view>
						</view>
						<view class="tag">{{item.serviceName}}</view>
					</view>
			    </view>
			</view>
		</view>
		<view class="back"></view>
		<!-- 品牌介绍 -->
		<view class="pinpai" v-if="allData.brand !== null">
		    <view>
				<view class="line"></view>
				<view class="yewu_tit">品牌介绍</view>
		    </view>
		    <navigator class="about clear" hover-class="none" :url="'../brand_detail/brand_detail?storeid='+ allData.storeId + '&brandid=' + allData.brand.id" >
				<view style="float:left;"><image :src="url + allData.brand.logo" class="com_logo"/></view>
				<view style="float:left;margin: 4rpx 0 0 20rpx">
					<view style="font-weight:bold;line-height:56rpx;">{{allData.brand.name}}</view>
					<view style="width:100%;overflow:hidden;">
						<view v-for="item,index in allData.brand.afford" :key="index" class="right_item"><view class="iconfont right"></view>{{item}}</view>
					</view>
				</view>	
		      <view class="iconfont more"></view>
		    </navigator>
		</view> 
		<view class="back"></view>
		<!-- 其他分店 -->
		<view class="other_shop">
		    <view class="clear">
				<view style="float:left;">
					<view class="line"></view>
					<view class="yewu_tit">其他分店 <text class="outher_num">({{allData.brandNum}})</text></view>
				</view>
				<navigator v-if="allData.brandNum != 0" class="fuwu_more" hover-class="none" :url="'../other_shop/other_shop?storeid=' + allData.storeId + '&brandid=' + allData.brand.id + '&status=0'">查看全部<view class="iconfont shuang_you"></view></navigator>
		    </view>
		    <view class="save">
				<image :src="url + allData.qrcode" class="erweima"></image>
				<view class="save_company">本店铺专属小程序码</view>
				<view class="save_btn" @tap="saveImg">保存</view>
		    </view>
		</view>
		<view class="back"></view>
		<!-- 报错和认领店铺 -->
		<view class="bug">
		    <navigator class="bug_tel" hover-class="none" :url="'/components/shop_error/shop_error?id=' + id"><view class="iconfont bug_tel_icon"></view>地址、电话等信息报错</navigator>
		    <navigator v-if="allData.isEnter == 0" hover-class="none" url="" class="bug_tel" style="margin:20rpx auto 42rpx;"><view class="iconfont bug_add_icon"></view>我要认领店铺</navigator>
		</view>
		<!-- 底部 -->
		<view class="footer">
		    <navigator open-type="reLaunch" hover-class="none" url="../../serviceView/serviceView" class="collect1">
		          <image src="https://wx.fujinyangche.com/nvrnetwork/images/index02.png"></image>
		    </navigator>
			<view class="collect1" @tap="coll">
				<view class="iconfont" :class="['iconfont',allData.isCollection == 1?'collectB':'collect',]"></view>
			</view>
			<button class="collect1" open-type="share"><image src="https://wx.fujinyangche.com/nvrnetwork/images/enjoy.png"></image></button>
			<navigator v-if="allData.isEnter == 0" url="../../car_user/enter_apply/index/index" class="enter" hover-class="none">免费入驻</navigator>
			<navigator v-if="allData.isEnter == 1 && allData.roleType == 1" url="" class="enter" hover-class="none">店铺管理</navigator>
			<navigator v-if="allData.isEnter == 1 && allData.roleType == 2" url="" class="enter" hover-class="none">店铺管理</navigator>
		</view>
	</view>
</template>

<script>
	import api from "../../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				allData:null,
				url:app.globalData.url,
				id:'',//商家id
				isIndex:'全部',//服务项目导航栏默认选项
				isLoad:true,//业务内容是否展开
			}
		},
		onLoad(options) {
			//扫码进入页面
			const scene = decodeURIComponent(options.scene)
			if(scene !== undefined){
			    this.id = scene
			}
			this.id = options.id;
			this.getData();
		},
		mounted() {
			
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token,
					id:this.id
				}
				api.getShopDetail(data).then((res)=>{
					console.log(res);
					this.allData = res.data.data;
					let serviceItemDetail = this.allData.serviceItemDetail;
					if(serviceItemDetail !== null){
					    serviceItemDetail.map((item,index,serviceItemDetail)=>{
							if(serviceItemDetail[index].disPrice == null){
								serviceItemDetail[index].disPrice = serviceItemDetail[index].price
							}
					    })
					}
					//修改页面标题
					uni.setNavigationBarTitle({
					    title: this.allData.name,
					})
				})
			},
			//跳转图册
			toPhoto(){
				uni.navigateTo({
					url:'../photo/photo'
				})
			},
			//跳转主营信息明细
			toAllServe(){
				uni.navigateTo({
					url:'../all_serve/all_serve'
				})
			},
			//打开地图展示商家地理位置
			openLocat(){
				let latitude = this.allData.latitude;
				let longitude = this.allData.longitude;
				console.log(latitude,longitude)
				uni.openLocation({
					latitude:parseFloat(latitude),
					longitude:parseFloat(longitude),
					scale: 18,
					success : res => {
				
					},
				    fail: res => {
						console.log('失败')
				    },
				    complete : res => {
						console.log('完成')
				    }
				})
			},
			//拨打商家电话
			call(){
				uni.makePhoneCall({
					phoneNumber:this.allData.phone
				})
			},
			//业务介绍是否展开
			isShow(){
				if (this.isLoad){
					this.isLoad = false
				}else{
				    this.isLoad = true
				}
			},
			//服务项目导航栏点击切换查询
			switchTab(e){
				let value = e.currentTarget.dataset.value;
				let storeId = e.currentTarget.dataset.storeid;
				this.isIndex = value;
				let data = {
					storeId: storeId,
					pName:value
				}
				api.getShopProject(data).then((res)=>{
					console.log(res);
					this.allData.serviceItemDetail = res.data.data;
				})
			},
			//跳转服务项目详情
			toProjectDetail(id){
				uni.navigateTo({
					url:'../project_detail/project_detail?id=' + id
				})
			},
			//点击保存商家二维码
			saveImg() {
			    uni.downloadFile({
			      url:this.url + this.allData.qrcode,
			      success : res=>{
			        console.log(res.tempFilePath)
			        uni.saveImageToPhotosAlbum({
			          filePath: res.tempFilePath,
			          success:res=> {
			            wx.showToast({
			              title: '保存成功',
			              icon: 'success',
			              duration: 2000
			            })
			          }
			        })
			      }
			    })
			},
			//下方点击收藏商家
			coll(){
				let data = {
					token:app.globalData.token,
					id:this.id
				}
				api.collect(data).then((res)=>{
					console.log(res.data.is);
					if(res.data.is){
						//强制视图刷新
						this.$set(this.allData,"isCollection", 1);
					}else{
					    this.$set(this.allData,"isCollection", 0);
					}
				})
			}
		}
	}
</script>

<style>
	.clear:after{
		content: "";
		display: block;
		clear: both;
	}
	.wrap{
	  position: relative;
	}
	.detail_banner{
	  width:100%;
	  height: 100%;
	  position: relative;
	  overflow: hidden;
	}
	.header{
	  width:100%;
	  padding:0 30rpx;
	  box-sizing: border-box;
	}
	.swiper{
	  width:690rpx;
	  height:400rpx;
	  position:relative;
	}
	.detail_banner image{
	  width:100%;
	  height:100%;
	  position: absolute;
	  top:50%;
	  left:50%;
	  transform: translate(-50%,-50%);
	  display: block;
	}
	.phone_num{
	  width:124rpx;
	  height:40rpx;
	  background:rgba(255,255,255,0.2);
	  border-radius:24rpx;
	  border:1px solid rgba(255,255,255,0.2);
	  text-align: center;
	  line-height: 40rpx;
	  position: absolute;
	  bottom:24rpx;
	  right:24rpx;
	  font-size: 22rpx;
	  color:#ffffff;
	}
	.photo_icon{
	  display: inline-block;
	  color:#ffffff;
	  font-size: 26rpx;
	  margin-right: 10rpx;
	}
	.company{
	  width:100%;
	  box-sizing: border-box;
	  margin-top:40rpx;
	  padding:0 28rpx 40rpx 30rpx;
	  overflow: hidden;
	  border-bottom: 1px solid #f2f2f2;
	}
	.company_top_title{
	  font-size: 30rpx;
	  color:#2A2A2A;
	  font-weight: bold;
	  float:left;
	}
	.company_top_ren{
	  width:120rpx;
	  height:37rpx;
	  float:left;
	  margin:6rpx 0 0 14rpx;
	}
	.company_top_ren image{
	  display: block;
	  width: 100%;
	  height:100%;
	}
	.company_top_num_icon{
	  display: inline-block;
	  font-size: 24rpx;
	  color:#999999;
	  line-height: 40rpx;
	}
	.company_top_num{
	  font-size: 24rpx;
	  color:#999999;
	  float:right;
	  line-height: 34rpx;
	}
	.company_bottom{
	  margin-top:24rpx;
	  display: flex;
	  position: relative;
	}
	.company_bottom_wrap{
	  display: flex;
	}
	.company_icon0,.company_icon1,.company_icon2{
	  font-size: 20rpx;
	  margin-right: 6rpx;
	}
	.company_bottom_item{
	  width: 100rpx;
	  color:#E77817;
	  line-height: 34rpx;
	  text-align: center;
	  padding:0rpx 16rpx;
	  margin:0 20rpx 10rpx 0;
	  background:rgba(231,120,23,0.06);
	  border-radius:2px;
	}
	.company_bottom_tit{
	  font-size: 24rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	.address1{
	  width:100%;
	  overflow: hidden;
	  padding:30rpx 0 14rpx 32rpx;
	  box-sizing: border-box;
	}
	.address_ditu{
	  display: inline-block;
	  color: #888888;
	}
	.address_tit{
	  width: 600rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  font-size: 28rpx;
	  color:#222222;
	}
	.address_che{
	  font-size: 24rpx;
	  color:#888888;
	  float:left;
	  margin:10rpx 0 0 40rpx;
	}
	.address_left{
	  float:left;
	}
	.address_right{
	  width:94rpx;
	  height:32rpx;
	  float:right;
	  text-align: center;
	  margin:22rpx 2rpx 0 0;
	  border-left: 1px solid #F2F2F2;
	  color:#3A7AF1;
	}
	.iphone{
	  font-size: 34rpx;
	}
	.back{
	  width:100%;
	  height:20rpx;
	  background-color: rgba(249,249,249,1)
	}
	.time{
	  width:100%;
	  padding:30rpx 0 036rpx 30rpx;
	  font-size: 26rpx;
	  color:#222222;
	  line-height: 34rpx;
	  box-sizing: border-box;
	}
	.time_icon{
	  display: inline-block;
	  margin-right: 6rpx;
	  color: #888888;
	}
	.shop{
	  width:100%;
	}
	.shop view{
	  width:220rpx;
	  height:68rpx;
	  border-radius: 50rpx;
	  display: inline-block;
	  font-size: 28rpx;
	  color:#ffffff;
	  line-height: 68rpx;
	  text-align: center;
	  margin:60rpx 0 60rpx 0;
	}
	.tianmao{
	  background:linear-gradient(270deg,rgba(255,188,2,1) 0%,rgba(254,167,0,1) 100%);
	  margin-left: 98rpx !important;
	  margin-right: 114rpx !important;
	}
	.jingdong{
	  background:linear-gradient(270deg,rgba(254,75,25,1) 0%,rgba(236,40,3,1) 100%);
	}
	.line{
	  display:inline-block;
	  width:6rpx;
	  height:30rpx;
	  background:#E77817;
	  margin:50rpx 0 0 30rpx;
	}
	.yewu_tit{
	  font-size: 32rpx;
	  color:#222222;
	  line-height: 44rpx;
	  display: inline-block;
	  margin-left: 8rpx;
	  font-weight: bold;
	}
	.jianjie{
	  padding:20rpx 18rpx 0rpx 40rpx;
	  box-sizing: border-box;
	  /*关键属性（必须有的）  */
	  display: -webkit-box; 
	  /*规定子元素的排列方向 */
	  -webkit-box-orient: vertical; 
	   /*限制文本显示的行数  */
	  -webkit-line-clamp:4;
	  /*实现多余的文字隐藏并用省略号来代表被隐藏的文字  */
	  overflow: hidden;
	  text-overflow:ellipsis;
	}
	.jianjie text{
	  font-size: 28rpx;
	  color:#666666;
	  line-height: 44rpx;
	}
	.isLoad{
	  text-align: center;
	  font-size: 24rpx;
	  color:#E77817;
	  margin:30rpx 0 46rpx;
	}
	.isShow{
	  display: block;
	}
	.header_bottom{
	  display: inline-block;
	  font-size: 16rpx;
	}
	.fuwu{
	  width:100%;
	  overflow:hidden;
	}
	.fuwu_more{
	  font-size: 24rpx;
	  color:#999999;
	  float:right;
	  margin:48rpx 30rpx 0 0;
	}
	.shuang_you{
	  display: inline-block;
	  font-size: 24rpx;
	  color:#999999;
	}
	.nav_nav{
	  font-size: 28rpx;
	  color:#222222;
	  display: inline-block;
	  margin-right: 40rpx;
	  position: relative;
	}
	.nav_nav:first-child{
	  margin-left: 40rpx;
	}
	.nav_nav:last-child{
	  margin-right: 0;
	}
	.nav_line{
	  width:calc(100% - 32rpx);
	  height:4rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  position: absolute;
	  left:50%;
	  transform: translateX(-50%);
	  display: none;
	}

	.nav_ul{
	  margin-top:30rpx;
	}
	.fuwu_list{
	  padding-left: 30rpx;
	  box-sizing: border-box;
	}
	.fuwu_list_item{
	  width:100%;
	  padding-bottom:40rpx;
	  padding-top:38rpx;
	  border-bottom:1px solid #F2F2F2;
	}
	.fuwu_list_item_img{
	  width:160rpx;
	  height:160rpx;
	  float:left;
	}
	.fuwu_list_item_img image{
	  display: block;
	  width:100%;
	  height:100%;
	  border-radius: 6rpx;
	}
	.fuwu_list_item_tit{
	  float:left;
	  margin:12rpx 0 0 20rpx;
	}
	.fuwu_list_item_tit_zi{
	  width:500rpx;
	  font-size: 34rpx;
	  color:#2A2A2A;
	  font-weight: bold;
	}
	.price{
	  font-size: 36rpx;
	  color:#E11521;
	  font-weight: bold;
	  display: inline-block;
	}
	.price2{
	  font-size: 24rpx;
	  color:#999999;
	  text-decoration: line-through;
	  display: inline-block;
	  margin-left: 14rpx;
	}
	.tag{
	  padding:4rpx 20rpx;
	  text-align: center;
	  background-color: rgba(231,120,23,0.06);
	  border-radius:4rpx;
	  font-size: 22rpx;
	  color:#E77817;
	  margin:32rpx 0 0 30rpx;
	  float: left;
	}
	.pinpai{
	  width:100%;
	  overflow: hidden;
	}
	.about{
	  margin-top:32rpx;
	  padding-left: 30rpx;
	  padding-bottom: 42rpx;
	  box-sizing: border-box;
	  position: relative;
	}
	.com_logo{
	  display: block;
	  width:108rpx;
	  height:108rpx;
	}
	.right_item{
	  font-size: 22rpx;
	  color:#666666;
	  line-height: 30rpx;
	  display: inline-block;
	  margin-right: 58rpx;
	}
	.right_item:last-child{
	  margin-right: 0rpx;
	}
	.right{
	  font-size: 24rpx;
	  color:#E77817;
	  display: inline-block;
	  margin-right: 10rpx;
	}
	.more{
	  position: absolute;
	  right:30rpx;
	  color:#999999;
	  top:50%;
	  transform: translateY(-50%)
	}
	.other_shop{
	  width:100%;
	  overflow: hidden;
	}
	.save{
	  width:424rpx;
	  height:572rpx;
	  background:url('https://wx.fujinyangche.com/nvrnetwork/images/ma_back.jpg') no-repeat;
	  background-size: 100% 100%;
	  box-shadow:0px 2rpx 12rpx 0px rgba(231,125,32,0.37);
	  margin:60rpx auto 62rpx;
	  position: relative;
	}
	.erweima{
	  width:276rpx;
	  height:276rpx;
	  display: block;
	  position: absolute;
	  left:50%;
	  transform: translateX(-50%);
	  bottom:128rpx;
	}
	.outher_num{
	  font-size: 26rpx;
	  color:#E11521;
	}
	.save_company{
	  font-size: 20rpx;
	  color:#ffffff;
	  line-height: 28rpx;
	  text-align: center;
	  position: absolute;
	  bottom:86rpx;
	  left:50%;
	  transform: translateX(-50%);
	}
	.save_btn{
	  width:124rpx;
	  height:40rpx;
	  background:rgba(255,255,255,1);
	  border-radius:20rpx;
	  border:1px solid rgba(255,255,255,1);
	  text-align: center;
	  line-height: 40rpx;
	  color:#E77817;
	  font-size: 22rpx;
	  position: absolute;
	  bottom:30rpx;
	  left:50%;
	  transform: translateX(-50%);
	}
	.bug{
	  width:100%;
	  padding-bottom: 140rpx;
	  overflow: hidden;
	}
	.bug_tel_icon{
	  font-size: #3B7AF1;
	  display: inline-block;
	  margin-right: 6rpx;
	}
	.bug_tel{
	  width:690rpx;
	  height:76rpx;
	  background:rgba(249,249,249,1);
	  border-radius:6rpx;
	  border:1px solid rgba(232,232,232,1);
	  text-align: center;
	  line-height: 76rpx;
	  font-size: 28rpx;
	  color:#3B7AF1;
	  margin:60rpx auto 0;
	}
	.bug_add_icon{
	  display: inline-block;
	}
	.footer{
	  width: 100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  overflow: hidden;
	  padding:30rpx 0;
	  box-sizing: border-box;
	  position: fixed;
	  left:0;
	  bottom:0;
	}
	.footer_icon{
	  font-size: 40rpx;
	  color:#222222;
	  padding:0 54rpx;
	  display: inline-block;
	  text-align: center;
	  border-right: 1px solid #f2f2f2;
	}
	.footer_icon:last-child{
	  border-right: none;
	}
	.enter{
	  width:284rpx;
	  height:72rpx;
	  background:rgba(231,120,23,1);
	  border-radius:6rpx;
	  text-align: center;
	  line-height: 72rpx;
	  font-size: 30rpx;
	  color:#ffffff;
	  display: inline-block;
	  margin:auto 0;
	  position: absolute;
	  right:30rpx;
	  top:14rpx;
	}
	.collect1{
	  width:150rpx;
	  height:40rpx;
	  background-color: #ffffff;
	  padding: 0 54rpx;
	  box-sizing: border-box;
	  display: inline-block;
	  border:none !important;
	  border-right: 1px solid #f2f2f2;
	  position: relative;
	}
	.collect1::after{
	  border:none !important;
	}
	.collect1 image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.masking{
	  width:100%;
	  height:100%;
	  background:rgba(0,0,0,0.5);
	  position: absolute;
	  top:0;
	  left:0;
	  z-index:100;
	  display: none;
	}
	.showMask{
	  display: block;
	}
	.delete_wrap{
	  width:600rpx;
	  height:260rpx;
	  background:rgba(255,255,255,1);
	  border-radius:10rpx;
	  position: fixed;
	  top:50%;
	  left:50%;
	  transform: translate(-50%,-50%);
	}
	.wrap_top{
	  font-size: 32rpx;
	  color:#000000;
	  font-weight: bold;
	  text-align: center;
	  height:152rpx;
	  line-height: 152rpx;
	  border-bottom:1px solid #F2F2F2;
	  box-sizing: border-box;
	}
	.wrap_bom_lf{
	  width:50%;
	  border-right: 1px solid #f2f2f2;
	  box-sizing: border-box;
	  font-size: 32rpx;
	  color:#222222;
	  font-weight: bold;
	  text-align: center;
	  line-height: 106rpx;
	  display: inline-block;
	}
	.confirm{
	  width:50%;
	  display: inline-block;
	  text-align: center;
	  line-height: 106rpx;
	  font-size: 32rpx;
	  color:#E77817;
	  font-weight: bold;
	}
	.class_more{
	  position: absolute;
	  right:0;
	  font-size: 24rpx;
	  color: #999999;
	}
	.shuang_you{
	  display: inline-block;
	  font-size: 22rpx;
	  color: #999999;
	}
	.collect,.collectB{
	  display: inline-block;
	  font-size: 38rpx;
	  position: absolute;
	  top:-2rpx;
	  left:1;
	}
	.collectB{
	  color:#E77817;
	}
	.active{
	  font-size: 35rpx;
	  background:linear-gradient(270deg, rgba(254,107,21,1) 0%, rgba(254,163,48,1) 100%);
	  -webkit-background-clip:text;
	  -webkit-text-fill-color:transparent;
	  font-weight: 600;
	}
	.active .nav_line{
	  display: block;
	}
</style>