JP-ChargeTeam51/pages/index/index.vue

<<<<<<< HEAD
<template>
	<view>

		<!-- 头部图片 -->
		<view class="banner">
			<img src="/static/img/banner1.jpg" alt="">
		</view>


		<!-- 选项列表 -->
		<view class="option-list">

			<view class="list-item">
				<view class="icon iconfont" style="background-color:#59d96e;">
                 &#xe61a;
				</view>
				<view class="text">
					扫码充电
				</view>

			</view>
			<view class="list-item">
				<view class="icon iconfont" style="background-color:#4BD2C0;">
                            &#xe629;
				</view>
				<view class="text">
					快速充值
				</view>

			</view>
			<view class="list-item">
				<view class="icon iconfont" style="background-color: #6FA5FF;">
                          &#xe625;
				</view>
				<view class="text">
					充电记录
				</view>

			</view>
			<view class="list-item">
				<view class="icon iconfont" style="background-color: #9D9FFF;">
                     &#xe622;
				</view>
				<view class="text">
					附近站点
				</view>

			</view>

		</view>

		<!-- 站点 -->
	   <!-- <view class="station">
	     <view class="img-box" >
	     	<img src="/static/img/Frame 198 (1).png" alt="">
	     </view>
		<view class="text"> -->
			   	<!-- 站点头部 -->
	   	<!-- <view class="station-title">
	   		<text class="title-left">快充</text>
	   		<text class="title-right">荆沙大道救助站充电站</text>
	   	</view> -->
	   	<!-- 价格 -->
	   <!-- 	<view class="station-price">
	   		<view class="price-left">1.25</view>
	   		<view class="price-right">
	   			起 元/度
	   		</view>
	   	</view> -->
	   	<!-- park -->
	   	<!-- <view class="park">
	   		<text class="park-p">p</text>
	   		<text class="park-text">2小时免费停车</text>
	   	</view>
	   	<view class="count">
	   		<view class="count-left">空闲10/总数10</view>
	   		<view class="count-right"><text class="iconfont">&#xe615;</text>10公里</view>
	   	</view>
		</view>
	   </view> -->
	   <!-- 定位 -->
	<view class="location-box">
		<view class="location">
				   <view class="location-text">
				   	 <view class="text-1">
				   	 	定位中...
				   	 </view>
					 <view class="text-2">
					 	授权定位后可查询附近充电站
					 </view>
					 <view class="text-3">
					 	重新定位
					 </view>
				   </view>
			    <view class="img-box" >
		  	<img src="/static/img/暂无网络信号-缺省页 1.png"">
		  </view>
		</view>
		
	</view>
		<!-- 充值活动 -->
		<view class="top-up">
			<view class="top-up-title"><text class="line"></text>充值活动</view>
			<view class="img-box">
				<view class="img-1">
					<img src="/static/img/瓷片区1.png" alt="">
					<view class="img-text">
						充100送20
						<view class="img-text2">即充即赠 立享优惠</view>
					</view>
				</view>
				<view class="img-1">
					<img src="/static/img/瓷片区2.png" alt="">
					<view class="img-text" style="color: #FF7C00;">
						邀请有礼
						<view class="img-text2 color">最高可得500元</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 新闻 -->
		<view class="news-title">
			<view class="news-title-left">
				<view class="line" style="margin-top:4px;"></view>新闻公告
			</view>

			<view class="more">更多<view class="more-icon iconfont"> &#xe600;</view>
			</view>
			

		</view>
		<view class="news">

			<view class="news-content">
				<view class="content-text">
					日印计划联手开发低成本充电桩 推动新兴市场电动车发展
					<view class="news-time">05-01 09:00</view>
				</view>
				<view class="content-img">
					<img src="/static/img/11091323191.jpg" alt="">
				</view>
			</view>
			<view class="news-content">
				<view class="content-text">
					我国新能源汽车市场腾飞在即，充换电何时能够不再“拖后腿”？
					<view class="news-time">05-01 09:00</view>
				</view>
				<view class="content-img">
					<img src="/static/img/103613441.jpg" alt="">
				</view>
			</view>

			<view class="news-content">
				<view class="content-text">
					新疆建成首个充电桩实验室
					<view class="news-time">05-01 09:00</view>
				</view>
				<view class="content-img">
					<img src="/static/img/180023631.jpg" alt="">
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bot">
				<view class="bot-line"></view>
				<view class="bot-text">已经到底了</view>
				<view class="bot-line"></view>
			</view>
		</view>
		<!-- 导航栏 -->
		<view class="navigation">
		<!-- 	<view class="nav-items">
				<view class="nav-icon iconfont ">
	                         &#xe610;
				</view>
				<view class="nav-text">主页</view>
			</view>
			<view class="nav-items">
				<view class="nav-icon iconfont">&#xe622;</view>
				<view class="nav-text">找桩</view>
			</view>
			<view class="nav-items">
				<view class="nav-icon iconfont">&#xe627;</view>
				<view class="nav-text">我的</view>
			</view> -->
			<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabbarList:[{
					iconPath: "home-3-line" ,
					selectedIconPath: "home-3-fill",
					text:'主页 ',
					count: 0,
					isDot: true,
					customIcon: true,
					},
					{
					iconPath: "road-map-line",
					selectedIconPath:"road-map-fill" ,
					text: '找桩',
					midButton: true,
					customIcon: true,
					},
					{iconPath: "user-5-line",
					selectedIconPath: "user-5-fill",
					text: '我的' ,
					count: 0,
					isDot: false,
					customIcon: true,
						
					}],
					current: 0
			}
		}
	}

</script>

<style lang="scss" scoped>


	// 头部图片
	img {
		width: 100%;
		height: 100%;
	}
	.banner {
		width: 100%;
		height: 300px;

		
	}


	// 选项列表
	.option-list {
		padding-top: 18px;
		width: 343px;
		height: 100px;
		line-height: 20px;
		border-radius: 8px;
		text-align: center;
		background-color: #fff;
		position: absolute;
		top: 260px;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: space-around;

		.list-item {

			// 图标
			.icon {
				width: 40px;
				height: 40px;
				border-radius: 99px;
				line-height: 40px;
				font-size: 24px;
				text-align: center;
				margin: auto;
				color: #ffffff;
			}

		}

	}

	// 站点
	.station {
		// width: 343px;
		height: 120px;
		margin-top: 70px;
		
	
		padding-top: 20px;
		padding: 0 12px;
		 position: relative;
		 .img-box{
			 width: 100%;
			 height: 100%;
			 border-radius: 8px;
			 overflow: hidden;
		 }
       img{
		   width: 100%;
		   height: 100%;
		  
	   }
	   .text{
		   position: absolute;
		   top: 0;left: 20px;
		   // 头部
		   .station-title {
		   	display: flex;
			margin-top: 12px;
		   
		   	.title-left {
		   		display: inline-block;
		   		height: 20px;
		   		width: 44px;
		   		// margin-left: 12px;
		   		line-height: 20px;
		   		border-radius: 50px;
		   		background-color: rgba(133, 140, 255, 100);
		   		color: rgba(255, 255, 255, 100);
		   		font-size: 12px;
		   		text-align: center;
		   		font-family: Arial;
		   	}
		   
		   	.title-right {
		   		display: inline-block;
		   		margin-left: 4px;
		   		margin-top: 2px;
		   		width: 271px;
		   		height: 16px;
		   		line-height: 16px;
		   		color: rgba(16, 16, 16, 100);
		   		font-size: 16px;
		   		text-align: left;
		   		font-family: AlibabaPuHui-regular;
		   	}
		   }
		   
		   // 价格
		   .station-price {
		   	margin-top: 4px;
		   	display: flex;
		   
		   	.price-left {
		   		width: 40px;
		   		height: 20px;
		   		color: rgba(255, 98, 0, 100);
		   		font-size: 20px;
		   		text-align: left;
		   		font-family: Roboto-medium;
		   	}
		   
		   	.price-right {
		   		height: 20px;
		   		line-height: 20px;
		   		margin-left: 2px;
		   		margin-top: 3px;
		   		color: rgba(102, 102, 102, 100);
		   		font-size: 14px;
		   		text-align: left;
		   		font-family: AlibabaPuHui-regular;
		   	}
		   
		   }
		   
		   // park
		   .park {
		   	margin-top: 4px;
		       display: flex;
		   	.park-p {
		   		display: inline-block;
		   		width: 20px;
		   		height: 18px;
		   		line-height: 12px;
		   		text-align: center;
		   		background-color: rgba(125, 177, 255, 100);
		   		color: #fff;
		   	}
		   
		   	.park-text {
		   		display: inline-block;
		   		width: 300px;
		   		height: 17px;
		   		color: rgba(102, 102, 102, 100);
		   		font-size: 12px;
		   		text-align: left;
		   		margin-left: 2px;
		   		margin-top: 2px;
		   	}
		   }
		   
		   // 数量
		   .count {
		   	margin-top: 8px;
		   	width: 96%;
		   	display: flex;
		   	justify-content: space-between;
		   }
	   }
		
	}
    //定位

   .location{
	   width: 343px;
	   background-color: #ffffff;
	   height: 120px;
	   display: flex;
	   margin: 70px auto 0;
	   border-radius: 8px;
	   border:#F2F4F4 1px ;
	   .location-text{
		   padding: 24px 28px;
		   .text-1{
			   height: 16px;
			   line-height: 16px;
			   color: rgba(16, 16, 16, 100);
			   font-size: 16px;
			   text-align: left;
		   }
		   .text-2{
			   height: 17px;
			   line-height: 17px;
			   color: rgba(102, 102, 102, 100);
			   font-size: 12px;
			   text-align: left;
			   margin-top: 4px;
		   }
		   .text-3{
			   width: 80px;
			   height: 24px;
			   border-radius: 50px;
			   color: rgba(0, 185, 98, 100);
			   font-size: 12px;
			   text-align: center;
			   font-family: Microsoft Yahei;
			   border: 1px solid rgba(0, 185, 98, 100);
			   margin-top: 11px;
		   }
	   }
    .img-box{
		width: 120px;
		height: 120px;
		float: right;
	}
   }
	//充值
	.top-up {
		margin-left: 16px;
		margin-top: 17px;

		.top-up-title {
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
		}

		.img-box {
			margin-top: 12px;
			width: 345px;
			height: 146px;
			display: flex;
			justify-content: space-between;

			.img-1 {
				width: 166px;
				height: 146px;
				position: relative;

				.img-text {
					position: absolute;
					top: 12px;
					left: 12px;
					height: 33px;
					color: #ff4444;
					font-size: 24px;
					text-align: left;
					margin-left: 12px;

					.img-text2 {
						font-size: 14px
					}

				}
			}

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 小竖线
	.line {
		display: inline-block;
		width: 3px;
		height: 12px;
		margin-right: 7px;
		background-color: rgba(0, 145, 67, 100);
	}

	// 新闻公告
	.news-title {
		padding: 0 16px;
		margin-top: 12px;
		color: rgba(16, 16, 16, 100);
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		background-color: #F2F4F4;
		
		.news-title-left {
			display: flex;
		}

		.more {
			font-size: 14px;
			color: #777777;
			display: flex;
			line-height:20px;
			.more-icon{
				font-size: 24px
			}
		}
	}

	.news {
		background-color: #fff;
		margin: 12px 16px 20px;
        border-radius: 8px;
		.news-content {
			display: flex;
			justify-content: space-between;
			padding: 12px;

			.content-text {
				width: 211px;
				height: 42px;
				line-height: 21px;
				color: #101010;
				text-align: left;
				font-size: 14px
			}

			;

			.content-img {
				width: 100px;
				height: 80px;
                background-color: #777777;
				border-radius: 4px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.news-time {
				margin-top: 12px;
				color: #999999;
				width: 80px;
				height: 20px;
				font-size: 14px;
			}
		}
	}

	.bottom {
		width: 100%;
		height: 150px;
            
		.bot {
			width: 100%;
			padding-left: 66px;
			display: flex;

			.bot-line {
				margin-top: 20px;
				width: 80px;
				height: 0px;
				border: 1px solid rgba(207, 210, 213, 100);
			}

			.bot-text {
				width: 60px;
				height: 17px;
				margin-top: 13px;
				margin-left: 12px;
				margin-right: 12px;
				font-size: 12px;
				text-align: center;
               color:rgba(182, 189, 195, 100);
			}
		}
	}

	// 导航栏
	.navigation {
		width: 100%;
		// height: 40px;
		padding: 10px 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		text-align: center;
	    color: #999999;
		.nav-icon{
			width: 54px;
			font-size: 24px
		}
		.nav-text{
			font-size: 14px;
		}
	}
=======
<template>
	<view>

		<!-- 头部图片 -->
		<view class="banner">
			<img src="/static/img/banner1.jpg" alt="">
		</view>


		<!-- 选项列表 -->
		<view class="option-list">

			<view class="list-item">
				<view class="icon iconfont" style="background-color:#59d96e;">
					&#xe61a;
				</view>
				<view class="text">
					扫码充电
				</view>

			</view>
			<view class="list-item">
				<view class="icon iconfont" style="background-color:#4BD2C0;">
					&#xe629;
				</view>
				<view class="text">
					快速充值
				</view>

			</view>
			<view class="list-item">
				<view class="icon iconfont" style="background-color: #6FA5FF;">
					&#xe625;
				</view>
				<view class="text">
					充电记录
				</view>

			</view>
			<view class="list-item">
				<view class="icon iconfont" style="background-color: #9D9FFF;">
					&#xe622;
				</view>
				<view class="text">
					附近站点
				</view>

			</view>

		</view>

		<!-- 站点 -->
		<!-- <view class="station">
	     <view class="img-box" >
	     	<img src="/static/img/Frame 198 (1).png" alt="">
	     </view>
		<view class="text"> -->
		<!-- 站点头部 -->
		<!-- <view class="station-title">
	   		<text class="title-left">快充</text>
	   		<text class="title-right">荆沙大道救助站充电站</text>
	   	</view> -->
		<!-- 价格 -->
		<!-- 	<view class="station-price">
	   		<view class="price-left">1.25</view>
	   		<view class="price-right">
	   			起 元/度
	   		</view>
	   	</view> -->
		<!-- park -->
		<!-- <view class="park">
	   		<text class="park-p">p</text>
	   		<text class="park-text">2小时免费停车</text>
	   	</view>
	   	<view class="count">
	   		<view class="count-left">空闲10/总数10</view>
	   		<view class="count-right"><text class="iconfont">&#xe615;</text>10公里</view>
	   	</view>
		</view>
	   </view> -->
		<!-- 定位 -->
		<view class="location-box">
			<view class="location">
				<view class="location-text">
					<view class="text-1">
						定位中...
					</view>
					<view class="text-2">
						授权定位后可查询附近充电站
					</view>
					<view class="text-3">
						重新定位
					</view>
				</view>
				<view class="img-box">
		 		<img src="/static/img/暂无网络信号-缺省页 1.png">
		  </view>
		</view>
		
	</view>
		<!-- 充值活动 -->
		<view class=" top-up">
			<view class="top-up-title"><text class="line"></text>充值活动</view>
			<view class="img-box">
				<view class="img-1">
					<img src="/static/img/瓷片区1.png" alt="">
					<view class="img-text">
						充100送20
						<view class="img-text2">即充即赠 立享优惠</view>
					</view>
				</view>
				<view class="img-1">
					<img src="/static/img/瓷片区2.png" alt="">
					<view class="img-text" style="color: #FF7C00;">
						邀请有礼
						<view class="img-text2 color">最高可得500元</view>
					</view>
				</view>
			</view>
		</view>
				<!-- 新闻 -->
				<view class="news-title">
					<view class="news-title-left">
						<view class="line" style="margin-top:4px;"></view>新闻公告
					</view>

					<view class="more">更多<view class="more-icon iconfont"> &#xe600;</view>
					</view>


				</view>
				<view class="news">

					<view class="news-content">
						<view class="content-text">
							日印计划联手开发低成本充电桩 推动新兴市场电动车发展
							<view class="news-time">05-01 09:00</view>
						</view>
						<view class="content-img">
							<img src="/static/img/11091323191.jpg" alt="">
						</view>
					</view>
					<view class="news-content">
						<view class="content-text">
							我国新能源汽车市场腾飞在即，充换电何时能够不再“拖后腿”？
							<view class="news-time">05-01 09:00</view>
						</view>
						<view class="content-img">
							<img src="/static/img/103613441.jpg" alt="">
						</view>
					</view>

					<view class="news-content">
						<view class="content-text">
							新疆建成首个充电桩实验室
							<view class="news-time">05-01 09:00</view>
						</view>
						<view class="content-img">
							<img src="/static/img/180023631.jpg" alt="">
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="bot">
						<view class="bot-line"></view>
						<view class="bot-text">已经到底了</view>
						<view class="bot-line"></view>
					</view>
				</view>
				<!-- 导航栏 -->
				<view class="navigation">
					<!-- 	<view class="nav-items">
				<view class="nav-icon iconfont ">
	                         &#xe610;
				</view>
				<view class="nav-text">主页</view>
			</view>
			<view class="nav-items">
				<view class="nav-icon iconfont">&#xe622;</view>
				<view class="nav-text">找桩</view>
			</view>
			<view class="nav-items">
				<view class="nav-icon iconfont">&#xe627;</view>
				<view class="nav-text">我的</view>
			</view> -->
					<u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
				</view>
			</view>
</template>

<script>
	export default {
		data() {
			return {
				tabbarList: [{
						iconPath: "home-3-line",
						selectedIconPath: "home-3-fill",
						text: '主页 ',
						count: 0,
						isDot: true,
						customIcon: true,
					},
					{
						iconPath: "roadmap-line",
						selectedIconPath: " road map-fill",
						text: ' 找桩',
						midButton: true,
						customIcon: true,

					},
					{
						iconPath: "user- 5- line",
						selectedIconPath: "user-5- fill",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: true,

					}
				],
				current: 0
			}
		}
	}
</script>

<style lang="scss">
	// 头部图片
	img {
		width: 100%;
		height: 100%;
	}

	.banner {
		width: 100%;
		height: 300px;


	}


	// 选项列表
	.option-list {
		padding-top: 18px;
		width: 343px;
		height: 100px;
		line-height: 20px;
		border-radius: 8px;
		text-align: center;
		background-color: #fff;
		position: absolute;
		top: 260px;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: space-around;

		.list-item {

			// 图标
			.icon {
				width: 40px;
				height: 40px;
				border-radius: 99px;
				line-height: 40px;
				font-size: 24px;
				text-align: center;
				margin: auto;
				color: #ffffff;
			}

		}

	}

	// 站点
	.station {
		// width: 343px;
		height: 120px;
		margin-top: 70px;


		padding-top: 20px;
		padding: 0 12px;
		position: relative;

		.img-box {
			width: 100%;
			height: 100%;
			border-radius: 8px;
			overflow: hidden;
		}

		img {
			width: 100%;
			height: 100%;

		}

		.text {
			position: absolute;
			top: 0;
			left: 20px;

			// 头部
			.station-title {
				display: flex;
				margin-top: 12px;

				.title-left {
					display: inline-block;
					height: 20px;
					width: 44px;
					// margin-left: 12px;
					line-height: 20px;
					border-radius: 50px;
					background-color: rgba(133, 140, 255, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 12px;
		 		text-align: center;
					font-family: Arial;
				}

				.title-right {
					display: inline-block;
					margin-left: 4px;
					margin-top: 2px;
					width: 271px;
					height: 16px;
					line-height: 16px;
					color: rgba(16, 16, 16, 100);
					font-size: 16px;
					text-align: left;
					font-family: AlibabaPuHui-regular;
				}
			}

			// 价格
			.station-price {
				margin-top: 4px;
				display: flex;

				.price-left {
		 		width: 40px;
					height: 20px;
					color: rgba(255, 98, 0, 100);
					font-size: 20px;
					text-align: left;
					font-family: Roboto-medium;
				}

				.price-right {
					height: 20px;
					line-height: 20px;
					margin-left: 2px;
					margin-top: 3px;
					color: rgba(102, 102, 102, 100);
					font-size: 14px;
					text-align: left;
					font-family: AlibabaPuHui-regular;
				}

			}

			// park
			.park {
				margin-top: 4px;
				display: flex;

				.park-p {
					display: inline-block;
					width: 20px;
					height: 18px;
					line-height: 12px;
					text-align: center;
					background-color: rgba(125, 177, 255, 100);
					color: #fff;
				}

				.park-text {
					display: inline-block;
					width: 300px;
					height: 17px;
					color: rgba(102, 102, 102, 100);
					font-size: 12px;
					text-align: left;
					margin-left: 2px;
					margin-top: 2px;
				}
			}

			// 数量
			.count {
				margin-top: 8px;
				width: 96%;
				display: flex;
				justify-content: space-between;
			}
		}

	}

	//定位

	.location {
		width: 343px;
		background-color: #ffffff;
		height: 120px;
		display: flex;
		margin: 70px auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.location-text {
			padding: 24px 28px;

			.text-1 {
				height: 16px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: left;
			}

			.text-2 {
				height: 17px;
				color: rgba(102, 102, 102, 100);
				font-size: 12px;
				text-align: left;
				margin-top: 4px;
			}

			.text-3 {
				width: 80px;
				height: 24px;
				border-radius: 50px;
				color: rgba(0, 185, 98, 100);
				font-size: 12px;
				text-align: center;
				font-family: Microsoft Yahei;
				border: 1px solid rgba(0, 185, 98, 100);
				margin-top: 11px;
			}
		}

		.img-box {
			width: 120px;
			height: 120px;
			float: right;
		}
	}

	//充值
	.top-up {
		margin-left: 16px;
		margin-top: 17px;

		.top-up-title {
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
		}

		.img-box {
			margin-top: 12px;
			width: 345px;
			height: 146px;
			display: flex;
			justify-content: space-between;

			.img-1 {
				width: 166px;
				height: 146px;
				position: relative;

				.img-text {
					position: absolute;
					top: 0;
					left: 0;
					height: 33px;
					color: #ff4444;
					font-size: 24px;
					text-align: left;
					margin-left: 12px;

					.img-text2 {
						font-size: 12px
					}

				}
			}

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 小竖线
	.line {
		display: inline-block;
		width: 3px;
		height: 12px;
		margin-right: 7px;
		background-color: rgba(0, 145, 67, 100);
	}

	// 新闻公告
	.news-title {
		padding: 0 16px;
		margin-top: 12px;
		color: rgba(16, 16, 16, 100);
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		background-color: #F2F4F4;

		.news-title-left {
			display: flex;
		}

		.more {
			font-size: 14px;
			color: #777777;
			display: flex;
			line-height: 20px;

			.more-icon {
				font-size: 24px
			}
		}
	}

	.news {
		background-color: #fff;
		margin: 17px 16px 0;

		.news-content {
			display: flex;
			justify-content: space-between;
			padding: 12px;

			.content-text {
				width: 211px;
				height: 42px;
				line-height: 21px;
				color: #101010;
				text-align: left;
				font-size: 14px
			}

			;

			.content-img {
				width: 100px;
				height: 80px;

				border-radius: 4px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.news-time {
				margin-top: 12px;
				color: #999999;
				width: 80px;
				height: 20px;
				font-size: 14px;
			}
		}
	}

	.bottom {
		width: 100%;
		height: 150px;

		.bot {
			width: 100%;
			padding-left: 66px;
			display: flex;

			.bot-line {
				margin-top: 20px;
				width: 80px;
				height: 0px;
				border: 1px solid rgba(207, 210, 213, 100);
			}

			.bot-text {
				width: 60px;
				height: 17px;
				margin-top: 13px;
				margin-left: 12px;
				margin-right: 12px;
				font-size: 12px;
				text-align: center;

			}
		}
	}

	// 导航栏
	.navigation {
		width: 100%;
		// height: 40px;
		padding: 10px 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		text-align: center;
		color: #999999;

		.nav-icon {
			width: 54px;
			font-size: 24px
		}

		.nav-text {
			font-size: 14px;
		}
	}
>>>>>>> 3c3be89c85e2a9d6c41986681d59c23622bf81e5
</style>