首页+我的+tabbar页面样式调整

components/tabbar/tabbar.vue

@@ -13,11 +13,12 @@
 				</view>
 			</view>
 		</view>
-
 	</view>
 </template>
 
 <script>
+	import urlConfig from '@/utils/config.js'
+	
 	export default {
 		props: {
 			page: {
@@ -61,8 +62,8 @@
 							if (res.data[i].hide == 1) {
 								this.tabBarList.push({
 									"tabbarName": res.data[i].title,
-									"iconPath": res.data[i].selectedIconPath,
-									"selectIconPath": res.data[i].selectedIconPath,
+									"iconPath": urlConfig+res.data[i].iconPath,
+									"selectIconPath": urlConfig+res.data[i].selectedIconPath,
 									"pageIndex": res.data[i].pagePath,
 									"type": res.data[i].type
 								});
@@ -83,11 +84,11 @@
 <style lang="scss">
 	.tab_bar {
 		width: 100vw;
-		height: 120rpx;
+		height: 90rpx;
 		position: fixed;
 		bottom: 30rpx;
 		/* 模糊大小就是靠的blur这个函数中的数值大小 */
-		backdrop-filter: blur(10px);
+		// backdrop-filter: blur(10px);
 		border-radius: 60rpx;
 
 		.tabbarBox {

pages/index/index.vue

@@ -1,9 +1,32 @@
 <template>
-	<view>
-		<view class="index-background">
+	<view class="wrap">
+		<view class="stabar"></view>
+		<view class="mainwrap">
+		    <view class="topcont">
+				<img :src="topImg"></img>
+			</view>
+		    <view class="banbox">
+				<swiper style="height: 450px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
+					<swiper-item v-for="(item, i) in swiperList" :key="i">
+						<navigator class="swiper-item">
+							<img :src="item"></img>
+						</navigator>
+					</swiper-item>
+				</swiper>
+			</view>
+		    <view class="itembox">
+				<span v-for="(item,i) in sceneList" :key="i"  @click="navClickHandler(item)"><img :src="item" class="scene-img"></image></span>
+		    </view>
+		    
+		  </view>
+		<view class="footbox">
+			<tabbar :page="page"></tabbar>
+		</view>
+		
+		
+		<!-- <view class="index-background">
 			<image :src="topImg"></image>
 		</view>
-		<!-- 轮播图 -->
 		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
 			<swiper-item v-for="(item, i) in swiperList" :key="i">
 				<navigator class="swiper-item">
@@ -17,7 +40,7 @@
 			</view>
 		</view>
 		
-		<tabbar :page="page"></tabbar>
+		<tabbar :page="page"></tabbar> -->
 	</view>
 </template>
 
@@ -90,34 +113,35 @@
 </script>
 
 <style lang="scss">
-	.index-background {
-		image {
-			height: 270rpx;
-			width: 100%;
-		}
-	}
+	@import url("@/static/base_css.css");
+	// .index-background {
+	// 	image {
+	// 		height: 270rpx;
+	// 		width: 100%;
+	// 	}
+	// }
 
-	swiper {
-		height: 630rpx;
+	// swiper {
+	// 	height: 630rpx;
 
-		.swiper-item,
-		image {
-			width: 100%;
-			height: 100%;
-			border-radius: 4px;
-		}
-	}
+	// 	.swiper-item,
+	// 	image {
+	// 		width: 100%;
+	// 		height: 100%;
+	// 		border-radius: 4px;
+	// 	}
+	// }
 
 
-	.scene-list {
-		display: flex;
-		justify-content: space-around;
-		margin: 5px 0;
-	}
+	// .scene-list {
+	// 	display: flex;
+	// 	justify-content: space-around;
+	// 	margin: 5px 0;
+	// }
 
-	.scene-img {
-		width: 358rpx;
-		height: 290rpx;
-		border-radius: 8px;
-	}
+	// .scene-img {
+	// 	width: 358rpx;
+	// 	height: 290rpx;
+	// 	border-radius: 8px;
+	// }
 </style>

pages/my/my.vue

@@ -1,14 +1,41 @@
 <template>
-	<view class="my-userinfo-container">
-		<!-- 头像和昵称区域 -->
+	<view class="wrap">
+	  <view class="stabar"></view>
+	  <view class="mainwrap2">
+	    <view class="perinfo"> <span class="type-name"><img :src="avatarUrl"></img></span>
+	      <view class="dycd"> <span class="myname">{{name}}</span>
+	        <view class="myitem"> <span>勋章：2<i></i></span> <span>挑战历史：3</span> </view>
+	      </view>
+	    </view>
+	    <view class="banbox_sec perinfo">
+			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
+				<swiper-item v-for="(item, i) in swiperList" :key="i">
+					<navigator class="swiper-item">
+						<img :src="item"></img>
+					</navigator>
+				</swiper-item>
+			</swiper>
+		</view>
+	    <view class="mset">
+	      <ul>
+			  <li v-for="(item,i) in functionList" :key="i">
+				  <span @click="navClickHandler(item)" :style="'background-image:url('+item.uploadPath+');'">{{item.name}}</span>
+			  </li>
+	      </ul>
+	    </view>
+	  </view>
+	  <view class="footbox"> 
+		<tabbar :page="page"></tabbar>
+	  </view>
+	</view>
+	
+	<!-- <view class="my-userinfo-container">
 		<view class="top-box">
 			<image :src="avatarUrl" class="avatar"></image>
 			<view class="nickname">{{name}}</view>
 		</view>
 
-		<!-- 面板区域 -->
 		<view class="panel-list">
-			<!-- 第1个面板 -->
 			<view class="panel">
 				<view class="panel-body">
 					<view class="panel-item" @click="showMedal()">
@@ -22,9 +49,7 @@
 				</view>
 			</view>
 
-			<!-- 第2个面板 -->
 			<view class="panel">
-				<!-- 轮播图 -->
 				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
 					<swiper-item v-for="(item, i) in swiperList" :key="i">
 						<navigator class="swiper-item">
@@ -34,7 +59,6 @@
 				</swiper>
 			</view>
 
-			<!-- 第3个面板 -->
 			<view class="panel">
 				<view class="function-list">
 					<view class="panel-list-item" v-for="(item,i) in functionList" :key="i" @click="navClickHandler(item)">
@@ -47,7 +71,7 @@
 		</view>
 
 		<tabbar :page="page"></tabbar>
-	</view>
+	</view> -->
 </template>
 
 <script>
@@ -67,6 +91,7 @@
 			};
 		},
 		onLoad() {
+			console.log(this.userinfo)
 			this.name = this.userinfo.nickName;
 			this.avatarUrl = this.userinfo.avatarUrl;
 			this.getSwiperList()
@@ -151,95 +176,97 @@
 </script>
 
 <style lang="scss">
-	.my-userinfo-container {
-		height: 100%;
-		background-color: #F4F4F4;
-
-		.top-box {
-			height: 400rpx;
-			background-color: #aba9d0;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			flex-direction: column;
-
-			.avatar {
-				width: 90px;
-				height: 90px;
-				border-radius: 45px;
-				border: 2px solid #FFF;
-				box-shadow: 0 1px 5px black;
-			}
+	@import url("@/static/base_css.css");
+	
+	// .my-userinfo-container {
+	// 	height: 100%;
+	// 	background-color: #F4F4F4;
 
-			.nickname {
-				font-size: 16px;
-				color: black;
-				font-family: Georgia, 'Times New Roman', Times, serif;
-				margin-top: 10px;
-			}
-		}
-	}
+	// 	.top-box {
+	// 		height: 400rpx;
+	// 		background-color: #aba9d0;
+	// 		display: flex;
+	// 		justify-content: center;
+	// 		align-items: center;
+	// 		flex-direction: column;
 
-	.panel-list {
-		padding: 0 10px;
-		position: relative;
-		top: -10px;
-
-		.panel {
-			background-color: white;
-			border-radius: 3px;
-			margin-bottom: 8px;
-
-			.panel-title {
-				line-height: 45px;
-				padding-left: 10px;
-				font-size: 15px;
-				border-bottom: 1px solid #F4F4F4;
-			}
+	// 		.avatar {
+	// 			width: 90px;
+	// 			height: 90px;
+	// 			border-radius: 45px;
+	// 			border: 2px solid #FFF;
+	// 			box-shadow: 0 1px 5px black;
+	// 		}
 
-			.panel-body {
-				display: flex;
-				justify-content: space-around;
-
-				.panel-item {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: space-around;
-					padding: 10px 0;
-					font-size: 13px;
-
-					.icon {
-						width: 35px;
-						height: 35px;
-					}
-				}
-			}
-		}
-	}
+	// 		.nickname {
+	// 			font-size: 16px;
+	// 			color: black;
+	// 			font-family: Georgia, 'Times New Roman', Times, serif;
+	// 			margin-top: 10px;
+	// 		}
+	// 	}
+	// }
 
-	.function-img {
-		width: 30px;
-		height: 30px;
-	}
+	// .panel-list {
+	// 	padding: 0 10px;
+	// 	position: relative;
+	// 	top: -10px;
 
-	.panel-list-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		font-size: 15px;
-		padding: 0 10px;
-		line-height: 45px;
-	}
+	// 	.panel {
+	// 		background-color: white;
+	// 		border-radius: 3px;
+	// 		margin-bottom: 8px;
 
-	swiper {
-		height: 230rpx;
+	// 		.panel-title {
+	// 			line-height: 45px;
+	// 			padding-left: 10px;
+	// 			font-size: 15px;
+	// 			border-bottom: 1px solid #F4F4F4;
+	// 		}
 
-		.swiper-item,
-		image {
-			width: 100%;
-			height: 100%;
-			border-radius: 4px;
-		}
-	}
+	// 		.panel-body {
+	// 			display: flex;
+	// 			justify-content: space-around;
+
+	// 			.panel-item {
+	// 				display: flex;
+	// 				flex-direction: column;
+	// 				align-items: center;
+	// 				justify-content: space-around;
+	// 				padding: 10px 0;
+	// 				font-size: 13px;
+
+	// 				.icon {
+	// 					width: 35px;
+	// 					height: 35px;
+	// 				}
+	// 			}
+	// 		}
+	// 	}
+	// }
+
+	// .function-img {
+	// 	width: 30px;
+	// 	height: 30px;
+	// }
+
+	// .panel-list-item {
+	// 	display: flex;
+	// 	justify-content: space-between;
+	// 	align-items: center;
+	// 	font-size: 15px;
+	// 	padding: 0 10px;
+	// 	line-height: 45px;
+	// }
+
+	// swiper {
+	// 	height: 230rpx;
+
+	// 	.swiper-item,
+	// 	image {
+	// 		width: 100%;
+	// 		height: 100%;
+	// 		border-radius: 4px;
+	// 	}
+	// }
 </style>

pages/scan/scan.vue

@@ -1,6 +1,8 @@
 <template>
 	<view>
+	  <view class="footbox">
 		<tabbar :page="page"></tabbar>
+	  </view>
 	</view>
 </template>
 

static/base_css.css

@@ -0,0 +1,673 @@
+html, body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	min-height: 100%;
+	font-size: 0.9rem;
+}
+
+html {
+	overflow-y: scroll;
+}
+
+ul, ol, li {
+	margin: 0;
+	padding: 0;
+	list-style: outside none none;
+}
+
+a {
+	text-decoration: none;
+	outline: none;
+}
+
+a:focus, input:focus, textarea:focus {
+	border: none;
+	outline: medium;
+	box-shadow: none;
+}
+
+img {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	border-radius: 10px;
+}
+
+.wrap {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.stabar {
+	position: fixed;
+	top: 0;
+	z-index: 9999;
+	padding: 0 5%;
+	width: 100%;
+	height: 45px;
+	color: #fff;
+	line-height: 30px;
+	background-color: #bac6fc;
+}
+
+/*************** 首页　************************/
+
+
+
+.mainwrap {
+	margin-top: 0px;
+	padding-bottom: 5%;
+	height: calc(100% - 100px);
+	width: 100%;
+	background-image: linear-gradient(to bottom, #bac6fc, transparent 50%);
+	box-sizing: content-box;
+	overflow: hidden;
+	overflow-y: auto;
+}
+
+.topcont {
+	position: relative;
+	top: 4%;
+	width: 100%;
+	height: 10.5%;
+	text-align: center;
+}
+
+.topcont img {
+	width: 80%;
+	height: auto;
+}
+
+.banbox {
+	position: relative;
+	top: 4%;
+	z-index: 1;
+	margin: 0 auto;
+	height: 60%;
+	width: 94%;
+	box-sizing: content-box;
+	border-radius: 10px;
+}
+
+.itembox {
+	display: flex;
+	position: relative;
+	top: 4%;
+	margin: 3.5% auto 0;
+	width: 94%;
+	height: 21%;
+}
+
+.itembox span {
+	display: block;
+	margin-right: 5%;
+	width: 50%;
+}
+
+.itembox span:last-child {
+	margin-right: 0;
+}
+
+.subtop, .sectop {
+	position: fixed;
+	top: 35px;
+	z-index: 1000;
+	width: 100%;
+	height: 50px;
+}
+
+.subtop {
+	height: 110px;
+	background: #fff none;
+}
+
+.pagetit {
+	text-align: center;
+	font-size: 1.25rem;
+}
+
+.subtop .pagetit, .sectop .pagetit {
+	margin-top: -20px;
+}
+
+h3.contit {
+	margin: 1% 0 2% 4%;
+	width: 96%;
+	height: 2rem;
+	line-height: 2;
+}
+
+h3.contit span {
+	display: inline-block;
+	float: left;
+	font-size: 1.15rem;
+	font-weight: 600;
+	color: #666;
+}
+
+.footbox {
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	height: 64px;
+	background-image: linear-gradient(to top, rgba(220,234,253,1), rgba(255,255,255,1));
+	border-top: 1px solid #eee;
+	box-shadow: 0 0 10px #eee;
+	text-align: center;
+}
+
+.footbox a {
+	position: relative;
+	display: inline-block;
+	margin: 10px 0;
+	padding-top: 28px;
+	width: 23%;
+	text-align: center;
+	background-size: 20%;
+	font-size: 1.0rem;
+	color: #999;
+	cursor: pointer;
+	background-size: 25%;
+}
+
+.footbox a:hover, .footbox a.curaf {
+	background-size: 25%;
+	color: #0b68f7;
+}
+
+.ahome {
+	background: url(/static/images/icon_home_2.png) no-repeat center top;
+}
+
+.ahome:hover, .ahome.curaf {
+	background: url(/static/images/icon_home.png) no-repeat center top;
+}
+
+.scannav {
+	background: url(/static/images/icon_scan_2.png) no-repeat center top;
+}
+
+.scannav:hover, .scannav.curaf {
+	background: url(/static/images/icon_scan.png) no-repeat center top;
+}
+
+.infonav {
+	background: url(/static/images/icon_info_2.png) no-repeat center top;
+}
+
+.infonav:hover, .infonav.curaf {
+	background: url(/static/images/icon_info.png) no-repeat center top;
+}
+
+.amine {
+	background: url(/static/images/icon_mine_2.png) no-repeat center top;
+}
+
+.amine:hover, .amine.curaf {
+	background: url(/static/images/icon_mine.png) no-repeat center top;
+}
+
+/*************** 场景　************************/
+
+
+
+.secbar {
+	position: relative;
+	top: 35px;
+	height: 60px;
+	width: 100%;
+	background-color: #bac6fc;
+}
+
+.secbar span {
+	position: relative;
+	top: 10px;
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	line-height: 20em;
+	white-space: nowrap;
+	overflow: hidden;
+	opacity: 0.9;
+}
+
+.secbar .pagetit {
+	margin-top: -18px;
+}
+
+.secbar span.back {
+	padding-left: 1.25rem;
+	left: 4%;
+	width: auto;
+	font-size: 1.15rem;
+	line-height: 30px;
+	background: url(/static/images/icon_arb.png) no-repeat left center;
+	background-size: auto 60%;
+}
+
+.banbox_sec {
+	position: relative;
+	top: -10px;
+	z-index: 1;
+	margin: 0 auto;
+	height: 20%;
+	width: 94%;
+	box-sizing: content-box;
+	border-radius: 10px;
+}
+
+.subwrap {
+	position: relative;
+	top: -5%;
+	overflow: hidden;
+	overflow-y: auto;
+	padding: 1% 3%;
+	width: 94%;
+	height: 70%;
+}
+
+.mainwrap2, .mainwrap3, .tabwrap {
+	position: relative;
+	top: 35px;
+	padding: 10px 0;
+	width: 100%;
+	height: calc(100% - 100px);
+	background-image: linear-gradient(to bottom, #bac6fc, transparent 40%);
+	box-sizing: content-box;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.mainwrap2 {
+	overflow-y: hidden;
+}
+
+.tabwrap {
+	position: fixed;
+	top: 110px;
+	height: calc(100% - 140px);
+}
+
+.subsearch {
+	position: relative;
+	top: -2%;
+	width: 100%;
+	height: 5.0rem;
+}
+
+.subtop .subsearch {
+	top: 60px;
+}
+
+.msearchbox {
+	position: relative;
+	margin: 10px 3%;
+	padding: 3px 45px 3px 15px;
+	width: 70%;
+	height: 36px;
+	line-height: 34px;
+	background-color: transparent;
+	background: #f6f7fe url(/static/images/icon_sou.png) no-repeat right 16px center;
+	background-size: auto 50%;
+	box-sizing: border-box;
+	border: 1px solid rgba(0,0,0,.05);
+	border-radius: 16px;
+	color: #999999;
+	outline: none;
+}
+
+.subsearch .msearchbox {
+	left: 2%;
+	padding: 3px 15px 3px 12%;
+	width: 90%;
+	background-position: left 16px center;
+}
+
+.msearchbtn {
+	position: absolute;
+	top: 24%;
+	right: 28%;
+	height: 28px;
+	width: 36px;
+	background: transparent;
+	color: transparent;
+	border: 0 none;
+}
+
+.scitem {
+	position: relative;
+	margin: 3% 0;
+	width: 100%;
+	height: 25%;
+	background: #000;
+	border-radius: 10px;
+}
+
+.scitem img {
+	opacity: .7;
+}
+
+.scdec {
+	position: absolute;
+	z-index: 1;
+	top: 15%;
+	left: 5%;
+	color: #fff;
+}
+
+.scdec h4 {
+	margin: 15% 0;
+	font-size: 1.5rem;
+	font-weight: 500;
+}
+
+.scdec span {
+	display: block;
+	margin: 5% 0;
+	font-size: 0.8rem;
+}
+
+/*************** 我的　************************/
+
+
+
+
+.mitop {
+	margin-top: 0;
+	height: 40vw;
+}
+
+.topban h1 {
+	width: 100%;
+	color: #fff;
+	font-size: 1.2rem;
+	margin: 0 auto;
+	padding: 0;
+	text-align: center;
+	line-height: 8rem;
+}
+
+.perinfo {
+	position: relative;
+	margin: 3%;
+	height: 8.5rem;
+	width: 94%;
+}
+
+.perinfo .type-name {
+	float: left;
+	margin: 3% 3%;
+	display: inline-block;
+	width: 5rem;
+	height: 5rem;
+	overflow: hidden;
+	background: url(/static/images/hpic.jpg) no-repeat;
+	background-size: cover;
+	background-position: center top;
+	border: 1px solid #fff;
+	border-radius: 50%;
+}
+
+.perinfo .dycd {
+	float: left;
+	display: inline-block;
+	margin: 3.5% 5%;
+	width: calc(80% - 5rem);
+	color: #333;
+	font-size: 1.0rem;
+	line-height: 1.5;
+	text-align: left;
+}
+
+.myname {
+	display: block;
+	margin: 0 0 5%;
+	font-size: 1rem;
+}
+
+.myitem span {
+	position: relative;
+	margin: 1% 5% 0 0;
+	padding-right: 0.6rem;
+	font-size: 0.8rem;
+	color: #666;
+}
+
+.myitem span b {
+	color: #333;
+	font-size: 0.7rem;
+}
+
+.myitem span i {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 8px;
+	height: 8px;
+	border-radius: 100%;
+	background-color: #fb3737;
+}
+
+.mset {
+	position: relative;
+	width: 94%;
+	min-height: 30%;
+	height: calc(90% - 17rem);
+	margin: 0 3%;
+	overflow: auto;
+}
+
+.mset ul {
+	width: 96%;
+	height: 96%;
+	margin: 2%;
+}
+
+.mset li {
+	width: 100%;
+	/*height: 20%;*/
+	background: url(/static/images/arrow-r.png) no-repeat right 2% center;
+	background-size: auto 30%;
+	display: table;
+}
+
+.version-number {
+	padding: 5% 2% !important;
+}
+
+.mset li span {
+	background-position: left 1% center;
+	background-repeat: no-repeat;
+	background-size: 6% auto;
+	padding: 3.5% 10%;
+	display: table-cell;
+	width: 30%;
+	height: 90%;
+	font-size: 1.15rem;
+}
+
+/***********************/
+
+
+
+.maintab {
+	position: relative;
+	top: 25px;
+	margin: 0;
+	align-items: center;
+	background: #fff;
+	border-bottom: 0.5rem solid #f3f4f5;
+}
+
+.titbox {
+	position: relative;
+	display: flex;
+	margin: 0 auto;
+	white-space: nowrap;
+}
+
+.titbox>span {
+	flex: 1;
+	margin: 0 3%;
+	width: auto;
+	text-align: center;
+	color: #999;
+	line-height: 2;
+}
+
+.titbox>span.actit {
+	color: #09F;
+}
+
+.titbox>span.actit:after {
+	display: block;
+	margin: -3px auto 0;
+	content: "";
+	width: 3rem;
+	height: 3px;
+	background-color: #09F;
+}
+
+.tab_item {
+	display: none;
+	position: relative;
+	height: 100%;
+	clear: both;
+}
+
+.list_tit {
+	margin: 0;
+	padding-left: 3%;
+	background: #f3f4f5;
+	height: 3rem;
+	line-height: 3.5;
+	color: #999;
+	font-weight: normal;
+	font-size: 0.9rem;
+}
+
+.listbox li {
+	position: relative;
+	display: flex;
+	padding: 2% 0;
+	width: 100%;
+	border-bottom: 1px solid #f5f5f5;
+	font-size: 1rem;
+}
+
+.listbox li:last-child {
+	border-bottom: 0;
+	margin-bottom: 3%;
+}
+
+.listbox li>span {
+	display: inline-flex;
+	margin: auto 2%;
+	padding-left: 7px;
+	color: #999;
+}
+
+.listbox input, .listbox select, .listbox textarea {
+	margin: 0;
+	height: 2.4rem;
+	color: #666;
+	border: 0 none;
+	font-size: 1rem;
+	font-family: Arial, Helvetica, sans-serif;
+	text-align: right;
+}
+
+.listbox li>div {
+	flex: 1;
+	margin: 0 1rem;
+	text-align: right;
+	color: #000;
+}
+
+.listbox li>div>input {
+	width: 100%;
+	padding: 0;
+}
+
+.listbox li span>b {
+	margin: 1% 2px 0 -7px;
+	color: #f00;
+}
+
+.listbox textarea, .textabox {
+	margin: -0.5rem 0 0 0;
+	padding: 0.5rem;
+	width: 96%;
+	min-height: 4.5rem;
+	background: #f5f5f5;
+	text-align: left;
+	line-height: 1.5;
+}
+
+.picbox>span {
+	display: inline-block;
+	margin: 0 0 2% 3%;
+	width: 20%;
+	height: 3rem;
+	overflow: hidden;
+}
+
+.picbox>span>img {
+	width: 100%;
+	height: auto;
+}
+
+span.rigadd {
+	float: right;
+	width: 1.25rem;
+	height: 1.25rem;
+	line-height: 20rem;
+	overflow: hidden;
+	background: url(/static/images/icon_60add.png) no-repeat top 28.5% center;
+	background-size: auto 75%;
+	border: 1px solid #ddd;
+	border-radius: 50%;
+}
+
+.footbtn_2 {
+	display: flex;
+	margin: 3% 0;
+	width: 100%;
+}
+
+.footbtn_2 a {
+	display: inline-block;
+	flex: 1;
+	margin: 3%;
+	width: 40%;
+	height: 3rem;
+	line-height: 3;
+	background: #199ffe;
+	border: 1px solid #199ffe;
+	border-radius: 30px;
+	color: #fff;
+	font-size: 1rem;
+	text-align: center;
+}
+
+.footbtn_2 a:last-child {
+	background: #fff;
+	border: 1px solid #b1b1b1;
+	color: #797979;
+}
+
+.onebtn {
+	position: relative;
+	top: 30vw;
+	background: #3a02a5;
+	width: 96%;
+	border-radius: 10px;
+	color: #fff;
+	text-align: center;
+	margin: 3% 2%;
+	line-height: 3.0;
+	letter-spacing: 2px;
+}