<template>
	<view class="bg-gray h-full">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
		  <block slot="backText"></block>
		  <block slot="content">线路规划</block>
		</cu-custom>
		
		<view class="padding">
		  <view class="cu-bar padding-tb-sm padding-bottom-sm padding-left-lg flex flex-direction align-between  round-small margin-bottom-sm position-re  bg-white">
		      <view class=" flex margin-bottom-sm">
				  <view class="dot-orange">
					  <text>始</text>
				  </view>
				  <view class="padding-top-sm padding-left-lg">
					  <taogewan-combox-remote  style="width:100%;" ref='inputs1' :placeholder="origin.name ? origin.name : '请输入起点'" :candidates="origin.tips" @input="orignInput" @select="orignSelect" @clear="clear(1)" />
				  </view>
			  </view>
		      <view class=" flex">
				  <view class="dot-red">
				  	 <text>终</text>
				  </view>
				  <view  class="padding-top-sm  padding-left-lg">
					   <taogewan-combox-remote style="width: 100%;" ref='inputs2' :placeholder="destination.name ? destination.name : '请输入终点'" :candidates="destination.tips" @input="destinationInput" @select="destinationSelect" @clear="clear(2)"  />
				  </view>
			  </view>
			  <!-- <view class="position-ab img_icons" @tap='changeInputs'>
				  <image src="../../static/img/zh_icon.png" style="width:56rpx;height:56rpx;" mode=""></image>
			  </view> -->
		  </view>
			<button class=" cu-btn margin-bottom-sm block bg-main-oil lg" @tap="gotoRoutePlain()">开始规划路线</button>
			<!-- 顶部tab -->
			<view class="ju-container bg-white  round-small padding-bottom-lg margin-top-sm bg-container" >
				<!-- <view class="text-center m-auto line-5 text-black text-bold">附近的油站</view> -->
				<div style="margin-bottom: 9px;">
					<scroll-view scroll-x class="my-bg nav">
									<view class="flex bg-white text-center m-auto line-5 text-black text-bold">
										<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
											v-for="(item,index) in tabList" :key="index" @tap="tabSelect(index)" :data-id="index">
												<view class="text-center m-auto line-5 text-black text-bold padding-top-xs">{{item.title}}</view>
										</view>
									</view>
					</scroll-view>
				</div>
				<!-- 显示附件油站 -->
				<view v-if="TabCur == 0">
					<view class="flex w-full margin-left-xs lines"  v-for="(item,index) in nearSite" :key="index"  style="margin-bottom: 14px;">
							<view class="margin-left-sm margin-right-sm " @tap="gotoNearSite(item)">
								<image style="width: 70rpx;height: 70rpx;" :src="item.iconPath" mode=""></image>
							</view>
							<view  style="flex: 1;" class="flex flex-direction " @tap="gotoNearSite(item)">
								<text style="font-size: 28rpx;" class="siteName text-black padding-bottom-xs">{{item.siteName}}</text>
								<text  style="font-size: 25rpx;" class="font-sm address">{{item.address}}</text>
							</view>
							<view class="margin-top-sm margin-right-lg text-red-deep juli" @tap="gotoSite(item)">
								<text class='cuIcon-location'></text>
								<text >{{item.distance}}KM</text>
							</view>
					</view>
				</view>
					<!-- 收藏处 -->
					<view v-if="TabCur == 1">
						<view v-for="(item,index) in collectionList" :key="index" class="collection-item solid-bottom  flex margin-right-lg">
							<uniIcons type="star-filled" size="18" color="#FF8800" @tap="gotoStarNaviate(index)" />
							<view class="overflow-line flex align-center text-df margin-left-sm" style="flex: 1" @tap='gotoCollectionMap(item)'>
								{{item.origin.name}} >
								{{item.destination.name}}
							</view>
						</view>
					</view>
					<!-- 历史记录处 -->
					<view v-if="TabCur == 2">
						<view v-for="(item,index) in historyList" :key="index" class="collection-item  solid-bottom  flex margin-right-lg">
							<view @tap="addCollection(index)">
								<uniIcons type="star" size="18" :color="isLight(index) ? '#FF8800':''" />
							</view>
							<view class="overflow-line flex align-center text-df margin-left-sm" style="flex: 1" @tap="gotoNaviate(item)">
								{{item.origin.name}} > {{item.destination.name}}
							</view>
							<view @tap="gotoTrash(index)">
								<uniIcons type="trash" size="16" />
							</view>
						</view>
					</view>
				</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import amapFile from '../../../utils/amap-wx.130.js'
	import taogewanComboxRemote from '@/components/taogewan-combox-remote/taogewan-combox-remote.vue'
	import oilSiteApi from '@/api/oil-site.js'
	import uniIcons from '../../../components/uni-icons/uni-icons'
	export default {
		components: {
		        taogewanComboxRemote,
				uniIcons
		    },
		data() {
			return {
				locationList: [],
				nearSite: [],
				origin: { //起点
					longitude: '',
					latitude: '',
					tips: [],
					address: '',
					name:''
				},
				destination: { //终点
					longitude: '',
					latitude: '',
					tips: [],
					address: ''
				},
				scrollLeft: 0,
				lightStar: [],
				TabCur: 0,
				myAmapFun: '',
				collectionList: [],
				isNotFirst: false,
				historyList: [],
				historys :[],
				tabList: [{
						title: '附近的油站'
					}, {
						title: '收藏'
					}, {
						title: '搜索记录'
				}],
			}
		},
		computed: {
		},
		onShow() {
			// this.clear(1)
			// this.clear(2)
			// let tempOrigin = uni.getStorageSync("origins")
			// let tempDestination = uni.getStorageSync("destination")
			// if(tempOrigin){
			// 	this.origin = tempDestination
			// }
			// if(tempDestination){
			// 	this.destination = tempDestination
			// }
		},
		onLoad() {
			this.myAmapFun = new amapFile.AMapWX({key: '88f3d3a38da95c4dea388978a76d0b81'});
			//console.log(this.myAmapFun)
			var that = this;
			this.collectionList = uni.getStorageSync("collectionList");
			//console.log(this.collectionList)
			if(this.collectionList == null ){
				this.collectionList = []
			}
			this.myAmapFun.getRegeo({
				 success: function(data){
						//console.log('map返回的data',data)
				        //成功回调
						that.origin.address = data[0].name
						that.origin.longitude = data[0].longitude
						that.origin.latitude = data[0].latitude 
						let data1 ={
							currentPage: 1,
							pageSize: 10,
							params: {
								longitude :that.origin.longitude,
								latitude :that.origin.latitude
							} 
						}
						oilSiteApi.findKASiteInfoByPage(data1).then(res => {
							//console.log(res)
							if (res.code == 20000) { 
								that.nearSite = res.data.list
								let userLocation = uni.getStorageSync('userLocation')
								let list = userLocation.split(','), 
									longitude = list[0],
									latitude = list[1]
								//console.log('这里是进入map',that.nearSite)
								that.nearSite = that.nearSite.map(item=>{
										let iconPath;
										if(item.siteChannel == "XOIL"){
												iconPath ='../../static/img/XOIL.png';
										}else if(item.siteChannel == "WJY"){
												iconPath ='../../static/img/WJY.png';
										}else if(item.siteChannel == "LV"){
												iconPath ='../../static/img/LV.png';
										}else if(item.siteChannel == "TY"){
												iconPath ='../../static/img/TY.png';
										}else if(item.siteChannel == "YDJY"){
												iconPath ='../../static/img/YDJY.png';
										}else{
												iconPath ='../../static/img/XOIL.png';
										}
										item.distance = item.juli/1000
										item.iconPath = iconPath;
										return item;
							})
						}
						// oilSiteApi.getByNearPoints(that.origin.longitude,that.origin.latitude).then(res=>{
						// 		//console.log('that.nearSite++++',res)
						// 		that.nearSite = res.data
						// 		let userLocation = uni.getStorageSync('userLocation')
						// 		let list = userLocation.split(','), 
						// 			longitude = list[0],
						// 			latitude = list[1]
						// 		//console.log('这里是进入map',that.nearSite)
						// 		that.nearSite = that.nearSite.map(item=>{
						// 				let iconPath;
						// 				if(item.siteChannel == "XOIL"){
						// 						iconPath ='../../static/img/XOIL.png';
						// 				}else if(item.siteChannel == "WJY"){
						// 						iconPath ='../../static/img/WJY.png';
						// 				}else if(item.siteChannel == "LV"){
						// 						iconPath ='../../static/img/LV.png';
						// 				}else if(item.siteChannel == "TY"){
						// 						iconPath ='../../static/img/TY.png';
						// 				}else if(item.siteChannel == "YDJY"){
						// 						iconPath ='../../static/img/YDJY.png';
						// 				}else{
						// 						iconPath ='../../static/img/XOIL.png';
						// 				}
						// 				item.distance = that.distanceCheck(longitude,latitude,item.longitude,item.latitude) 
						// 				item.iconPath = iconPath;
						// 				return item;
						// })
						})
				},
				  fail: function(info){
					//失败回调
					//console.log(info)
				  }
			})
		},
		methods: { 
			gotoSite(item){
				//console.log(item)
				uni.openLocation({
				           latitude: item.latitude,
				           longitude: item.longitude,
				           success: function () {
				               //console.log('success');
				           }
				});
			},
			//计算坐标点与当前位置的距离
			distanceCheck(la1, lo1, la2, lo2) {  
				var La1 = la1 * Math.PI / 180.0;  
				var La2 = la2 * Math.PI / 180.0;  
				var La3 = La1 - La2;  
				var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;  
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) +  Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));  
				s = s * 6378.137;//地球半径  
				s = Math.round(s * 10000) / 10000/1000;  
				s=s.toFixed(2)
				  //console.log("计算结果",s,'KM');   
				return s 
			},
			changeInputs(){
				//console.log()
			},
			// 点击收藏前往收藏路径轨迹
			gotoCollectionMap(item){
				// //console.log('点击收藏前往路径',item)
				this.origin = item.origin
				this.destination = item.destination
				this.histGoto()
			},
			histGoto(){
				let key = '88f3d3a38da95c4dea388978a76d0b81' 
				if(!this.origin.name){
					uni.showToast({
						title:'请选择起点',
						icon:'none'
					})
					return
				}
				if(!this.destination.name){
					uni.showToast({
						title:'请选择终点',
						icon:'none'
					})
					return
				} 
					// uni.setStorageSync("origins",this.origin)
					// uni.setStorageSync("destination",this.destination)
					let originTem = JSON.stringify(this.origin)
					let destinationTem = JSON.stringify(this.destination)
					delete originTem.tips
					delete destinationTem.tips 
					// originTem=''
					// destinationTem=''
					uni.removeStorage({
						key:'searchInfo',
						success() {
						//console.log('删除成功')
						}
					})
					uni.removeStorage({
						key:'ishighSpeedMark',
						success() {
						//console.log('删除成功')
						}
					})
					uni.navigateTo({
						url:`/BagStation/pages/routePlainMap/routePlainMap?origin=${originTem}&destination=${destinationTem}`
					}) 
					this.$refs.inputs1.clearSelector()
					this.$refs.inputs2.clearSelector()
					this.clear(1)
					this.clear(2)
					this.historyList = []
					this.historyList =  uni.getStorageSync("historyList")
					this.collectionList = uni.getStorageSync("collectionList");
			},
			gotoNearSite(item){
				//console.log(item) 
				let itemS = JSON.stringify(item)
				//console.log(itemS)
				if (uni.getStorageSync('user')) {
					uni.navigateTo({
						url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}&&type=map`,
						fail: (err) => {
							// //console.log(err)
						},
						success: () => {
							// //console.log('err')
						}
					})
				} else {
					uni.showModal({
						title:'请您登录',
						content:"登录清正源油加油才可以加油 |˛˙꒳​˙)♡",
						confirmText:'去登陆',
						success: (res) => {
							if(res.confirm){ 
								uni.reLaunch({
									url:'../../../BagAuth/pages/login/login?loginType=true'
								})
							}
						}
					})
				}
			},
			isLight(index){
				return this.lightStar.filter(item=>item == index) != null
			},
			// 历史记录 点击前往历史记录路径规划
			gotoNaviate(item){
				//console.log(item)
				this.origin = item.origin
				this.destination = item.destination
				this.histGoto()
				// setTimeout(()=>{
				// 	let record = this.historyList[index];
				// 	this.origin = record.origin
				// 	this.destination = record.destination
				// 	//console.log(record)
				// },250)
			},
			//取消收藏
			gotoStarNaviate(index){
				this.collectionList.splice(index,1)
				uni.setStorageSync("collectionList",this.collectionList)
				uni.showToast({
				    title: '取消收藏',
				    duration: 1000,
					icon:'none'
				});
				// setTimeout(()=>{
				// 	let record = this.collectionList[index];
				// 	//console.log('这里是收藏处列表',record)
				// 	this.origin = record.origin
				// 	this.destination = record.destination
				// },250)
			},
			// 删除当前历史记录
			gotoTrash(index){
				this.historyList.splice(index,1)
				//console.log(this.historyList)
				uni.setStorageSync("historyList",this.historyList)
				uni.showToast({
				    title: '删除成功',
				    duration: 1000,
					icon:'none'
				});
			},
			addCollection(index){
				this.collectionList = uni.getStorageSync("collectionList");
				//console.log(this.collectionList)
				if(this.collectionList == null || this.collectionList == '' ){
					this.collectionList = []
				}
				// //console.log(this.collectionList)
				// //console.log('这类似点击收藏',this.collectionList)
				// //console.log('这里是历史记录点击收藏处',this.historyList[index].destination.name,this.historyList[index].origin.name)
				let historyList = this.historyList[index]
				for(let i=0;i<this.collectionList.length;i++){
					if(historyList.destination.name == this.collectionList[i].destination.name && historyList.origin.name == this.collectionList[i].origin.name ){
					  //console.log('这里是打印收藏Listmap', this.collectionList[i])
					  uni.showToast({
					  	title:'已收藏',
						icon:'none'
					  })
					  return false
					} 
				}
				// this.collectionList.map((item)=>{
				// 	if(historyList.destination.name == item.destination.name && historyList.origin.name == item.origin.name  ){
				// 	  //console.log('这里是打印收藏Listmap', item)
				// 	  uni.showToast({
				// 	  	title:'已收藏',
				// 		icon:'none'
				// 	  })
				// 	} 
				// 	return false
				// })
				this.collectionList.push(this.historyList[index])
				//console.log( '这里是map循环外的',this.historyList[index])
				uni.setStorageSync("collectionList",this.collectionList)
				uni.showToast({
					title: '收藏成功',
					duration: 1000,
					icon:'none'
				});
				this.lightStar.push(index);
			},
			// 起点根据起点input值 回显list
			orignInput(val){ 
				//console.log(val)
				let _that = this
				this.myAmapFun.getInputtips({
				      keywords: val,
				      location: '',
				      success: (data) => { 
						  //console.log('检索data',data)
				        if(data && data.tips){ //
							let itmeList = []
							data.tips.forEach((item)=>{
								if(item.location.length !=0 ){ 
									if(item.address.length ==0){
										let obj = {
											'key':item.district,
											'value':item.name,
											'location': item.location,
											'detail': item.district + " "+item.address
										}
											itmeList.push(obj) 
									}else{
										let obj = {
											'key':item.address,
											'value':item.name,
											'location': item.location,
											'detail': item.district + " "+item.address
										}
											itmeList.push(obj) 
									}
									
								
								}
								
							})
							
							_that.origin.tips  = itmeList
							//console.log('这里是回显内',_that.origin)
				        } 
				}})
				//console.log('这里是回显处',_that.origin)
			},
			// 结束点根据结束点input值 回显list
			destinationInput(val){ 
				this.myAmapFun.getInputtips({
				      keywords: val,
				      location: '',
				      success: (data) => { 
				        if(data && data.tips){
							let itemList = []
							data.tips.forEach((item)=>{
								if(item.location.length !=0){
									let obj ={
										'key':item.address,
										'value':item.name,
										'location': item.location,
										'detail': item.district + " "+item.address
									}
									itemList.push(obj)
								}
							}) 
							this.destination.tips  = itemList 
				        }
				}})
			},
			orignSelect(val){
				//console.log('这里是开始点击选中的val',val)
				this.origin.address = val
					if(this.destination.address){
						let result = this.origin.tips.filter(item=>item.key == val)
						let result2 = this.destination.tips.filter(item=>item.key == this.destination.address)
						//console.log('这里是result处',result[0].value)
						//console.log('这里是result处this.origin',this.origin)
						this.origin.name = result[0].value
						let record = {
							origin: this.origin,
							destination: this.destination
						}
						//console.log('这里是开始地址', result)
						if(result[0]&&result[0].location) {
							this.origin.longitude = result[0].location.split(",")[0]
							this.origin.latitude = result[0].location.split(",")[1]
							//console.log('这里是开始的地址longitude',this.origin.longitude)
							//console.log('这里是开始的地址latitude',this.origin.latitude)
						}else{
							uni.showToast({
								title:"提示请输入具体地址",
								icon:'none'
							})
							return
						}
						this.historys=record
						// this.historyList =  uni.getStorageSync("historyList")
						// if(this.historyList == null || this.historyList == ''){
						// 	this.historyList = []
						// }
						// this.historyList.push(record)
						// uni.setStorageSync("historyList",this.historyList)
						//console.log('这里是historyList',this.historyList)
					}
			},
			destinationSelect(val){	
				//console.log('这里是',val)
				this.destination.address = val
				//console.log(this.destination )
				//console.log('this.destination结束点回显处 ',this.destination )
				if(this.origin.address){
					//console.log('这里是进入address')
					let tempOriginAddress=null;
					let result = null;
					// if(!this.isNotFirst){
						//console.log('this.isNotFirst 为flase')
						this.isNotFirst = true;
						tempOriginAddress = this.origin.address   
						//console.log("监控1")
						//console.log(tempOriginAddress)
					// }else{
					// 	//console.log('这里是结束result处',result)
					// 	//console.log('这里是结束result处this.origin',this.origin)
					// 	//console.log('这里是结束地址', result)
					// 	if(result[0]&&result[0].location) {
					// 		// this.origin.longitude = result[0].location.split(",")[0]
					// 		// this.origin.latitude = result[0].location.split(",")[1]
					// 		result = this.origin.tips.filter(item=>item.key == this.origin.address)
					// 		tempOriginAddress = result[0].value
					// 		this.origin.longitude = result[0].location.split(",")[0]
					// 		this.origin.latitude = result[0].location.split(",")[1]
					// 		//console.log('这里是结束地址longitude',this.origin.longitude)
					// 		//console.log('这里是结束地址latitude',this.origin.latitude)
					// 		//console.log("监控2")
					// 		//console.log(result)
					// 	}else{
					// 		uni.showToast({
					// 			title:"提示请输入具体地址",
					// 			icon:'none'
					// 		})
					// 		return
					// 	}
					// }
					let result2 = this.destination.tips.filter(item=>item.key == val)
					if(result2[0] != null){
						this.destination.longitude = result2[0].location.split(",")[0]
						this.destination.latitude = result2[0].location.split(",")[1]
						this.destination.name = result2[0].value
					}
						if(tempOriginAddress == null){
							//console.log('+++++',result)
							this.origin.name = result[0].value
						}else{
						/* 第一次走这里 */
							let rrr =  this.origin.tips.filter(item=>item.key == tempOriginAddress)
							//console.log("走这里")
							if(rrr && rrr[0]){
								//console.log('这里是rrr',rrr)
								this.origin.name=rrr[0].value
								this.origin.longitude = rrr[0].location.split(",")[0]
								this.origin.latitude =  rrr[0].location.split(",")[1]
								//console.log(this.origin)
								//console.log(rrr)
							}
						}
						let record = {
							origin: this.origin,
							destination: this.destination
						}
						//console.log('++++++record',record)
						this.historys=record
						//console.log(this.historys)
						// this.historyList =  uni.getStorageSync("historyList")
						if(this.historyList == null || this.historyList == ''){
							this.historyList = []
						}
						// this.historyList.push(record)
						// uni.setStorageSync("historyList",this.historyList)
				}
			},
			gotoRoutePlain(){
				//console.log('+++----++++****++++',destinationTem)
				// 获取起点  终点定位
				let key = '88f3d3a38da95c4dea388978a76d0b81'
				//console.log('这里起点',this.origin.name,typeof(this.origin.name))
				//console.log('这里是终点',this.destination.name,typeof(this.destination.name)) 
				if(!this.origin.name){
					uni.showToast({
						title:'请选择起点',
						icon:'none'
					})
					this.$refs.inputs1.clearSelector()
					this.clear(1)
					return
				}
				if(!this.destination.name){
					uni.showToast({
						title:'请选择终点',
						icon:'none'
					})
					this.$refs.inputs2.clearSelector()
						this.clear(2)
					return
				} 
				uni.removeStorage({
					key:'searchInfo',
					success() {
					//console.log('删除成功')
					}
				})
				uni.removeStorage({
					key:'ishighSpeedMark',
					success() {
					//console.log('删除成功')
					}
				})
					this.historyList = uni.getStorageSync('historyList')
					let record = {
						origin: this.historys.origin,
						destination: this.historys.destination
					}
					if(this.historyList == null || this.historyList == ''){
						this.historyList = []
					}
					this.historyList.push(record)
					uni.setStorageSync("historyList",this.historyList)
					// uni.setStorageSync("origins",this.origin)
					// uni.setStorageSync("destination",this.destination)
					let originTem = JSON.stringify(this.origin)
					let destinationTem = JSON.stringify(this.destination)
					delete originTem.tips
					delete destinationTem.tips 
					uni.navigateTo({
						url:`/BagStation/pages/routePlainMap/routePlainMap?origin=${originTem}&destination=${destinationTem}`
					}) 
					// originTem=''
					// destinationTem=''
					this.$refs.inputs1.clearSelector()
					this.$refs.inputs2.clearSelector()
					this.clear(1)
					this.clear(2)
					this.historyList = []
					this.historyList =  uni.getStorageSync("historyList")
					this.collectionList = uni.getStorageSync("collectionList");
					//console.log('跳转后---',)
				},
				tabSelect(index) {
							this.TabCur = index
							this.historyList =  uni.getStorageSync("historyList")
			   },
			   clear(index){ 
				   if(index == 1){ 
						this.origin.name=''
						this.origin.tips = []
						this.origin.latitude = ''
						this.origin.longitude = ''
						this.origin.address = ''
						this.collectionList = []
						this.historyList = []
						this.historyList =  uni.getStorageSync("historyList")
						this.collectionList = uni.getStorageSync("collectionList");  
				   }else{ 
					   this.destination.name=''  
					   this.destination.tips = []
					   this.destination.latitude = ''
					   this.destination.longitude = ''
					   this.destination.address = ''
						this.collectionList = []
					   	this.historyList = []
						this.historyList =  uni.getStorageSync("historyList")
						this.collectionList = uni.getStorageSync("collectionList");
					   
				   }
			   }
		}
	}
</script>

<style >
.h-full{
	height: 100%;
}

.round-small{
	border-radius: 8rpx;
}

.dot-orange{
	width: 65rpx;
	height: 65rpx;
	background-color: #FF8800;
	color: white;
	border-radius: 50%;
	text-align: center;
	line-height: 1.9;
	font-size: 35rpx;
}

.dot-red{
	width: 65rpx;
	height: 65rpx;
	background-color: #FF4D4D;
	color: white;
	border-radius: 50%;
	text-align: center;
	line-height: 1.9;
	font-size: 35rpx;
}

.align-between{
	align-items: flex-start;
}
.uni-combox{
	width: 139%!important;
}

.m-auto{
	margin: auto;
}
.w-full{

}

.line-5{
	line-height: 2.7;
	margin-bottom: 9rpx;
}

.font-sm{
	font-size: 20rpx;
	color: #666666;
	font-weight: 370;
}

.text-red-deep{
	color: #FE0505;
}

.address{
	width: 50vw;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}

.siteName{
	width: 50vw;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}

.juli-container{
	position: relative;
}

.juli{
	position: absolute;
	right: 15px;
}

.text-orange,
.line-orange,
.lines-orange {
	color: #f37b1d;
}

.cur {
	background-color: white;
}


.collection-item{
	padding: 12rpx 7rpx;
	margin-left: 12px;
	line-height: 2;
}

.overflow-line{
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}

.bg-container{
	height: 73vh;
	background-color: white;
	/* overflow: scroll; */
}

.lines{
	 padding-bottom: 5px;
	border-bottom: 1px solid #EEEEEE; 
	
}
.img_icons{
	right: 4%;
	bottom: 30%;
}
</style>
