home

common/style/layout.css

@@ -86,17 +86,19 @@ uni-button:after {
 	line-height: 48rpx;
 }
 .cancel_icon::before {
-	content: "\e6dc";
+	content: "\e6db";
 }
 .cancel_icon {
 	display: block;
-	width: 100rpx;
-	height: 100rpx;
-	font-size: 50rpx;
-	color: #fff;
-	line-height: 100rpx;
+	width: 60rpx;
+	height: 60rpx;
+	font-size: 40rpx;
+	color: #000;
+	line-height: 60rpx;
 	text-align: center;
-	background-color: #E9B451;
+	border: 1px solid #999;
+	border-radius: 50%;
+	transform: rotate(-90deg);
 }
 
 /** 内容 */
@@ -107,7 +109,7 @@ uni-button:after {
 .zd_content {
 	width: 100%;
 	height: auto;
-	padding: 92rpx 15rpx 82rpx 14rpx;
+	padding: 92rpx 14rpx 82rpx 14rpx;
 }
 .zd_wrapper {
 	width: 100%;

pages/home/home.vue

@@ -11,7 +11,7 @@
 				<view class="exit-text">{{$t('home.exit')}}</view>
 			</view>
 		</view>
-		<view class="zd_wrapper">
+		<view class="zd_wrapper zd_home_wrapper">
 			<view class="menu-wrap">
 				<view class="menu-item" v-for="(e, i) in menuList" :key="i" @tap="toPage1(e)">
 					<image class="menu-img" :src="require('../../static/image/menu/' + e.path + '.png')" alt="">
@@ -19,18 +19,17 @@
 				</view>
 			</view>
 		</view>
-		<view v-if="show === true" class="sec_menu_wraper">
-			<view class="sec_menu_w">
-				<view class="menu-item" v-for="(e, i) in secM" :key="i" @click="toPage2(e)">
-					<view class="sec_menu-col_inner">
-						<view class="menu-name menu-name_inner">{{e.name}}</view>
-					</view>
-				</view>
-			</view>
+		<view class="sec_menu_wraper" :class="show ? 'show' : 'hidden'">
 			<view class="cancel">
 				<view class="iconfont cancel_icon" @tap="show = false"></view>
 			</view>
+			<view class="sec_menu_w">
+				<view class="sec_menu-item" v-for="(e, i) in secM" :key="i" @click="toPage2(e)">
+					<view class="menu-name_inner">{{e.name}}</view>
+				</view>
+			</view>
 		</view>
+		<view v-if="show" class="modal" @click.stop="show = false"></view>
 	</view>
 </template>
 
@@ -79,6 +78,8 @@
 @import '../../common/style/mixin.styl';
 .zd_content
 	padding-top 0
+	padding-bottom 0
+	height 100%
 .header
 	height 86rpx
 	_font(36rpx,86rpx,#333,,center)
@@ -109,7 +110,12 @@
 .exit-text
 	_font(24rpx,47rpx,#fff,,right)
 	padding-left 10rpx
+.zd_home_wrapper
+	height calc(100% - 286rpx)
+	overflow hidden
+	overflow-y auto
 .menu-wrap
+	_wh(100%, auto)
 	_fj(flex-start,flex-start,,wrap)
 	align-content: flex-start
 .menu-item
@@ -132,39 +138,51 @@
 	_font(28rpx, 38rpx, #444,,center)
 .sec_menu_wraper
 	position fixed
-	top 0
+	bottom 0
+	left 0
+	width 100%
+	height 70%
+	background-color #f4f5f5
+	box-shadow 0 -8px 16px 0 rgba(28,31,33,.1)
+	border-top-left-radius 20rpx
+	border-top-right-radius 20rpx
+	z-index 2017
+	transition all .3s
+.modal
+	position fixed
+	bottom 0
 	left 0
 	_wh(100%, 100%)
-	background-color rgba(0, 0, 0, .9)
-	z-index 2017
-	flex-direction column
+	background-color rgba(0,0,0,0.8)
+	z-index 2010
 .sec_menu_w
-	_fj()
-	_wh(100%, calc(100% - 100rpx))
-	padding 0 24rpx
+	width calc(100% - 76rpx)
+	margin 30rpx auto 0 auto
+	_fj(flex-start)
 	flex-wrap wrap
-	align-content center
-	&::after
-		content ''
-		display block
-		_wh(30%,0)
-.sec_menu-col
-	background-color transparent
-	border none
-	height auto
-.sec_menu-col_inner
-	_fj(center)
-	_wh(160rpx, 160rpx)
-	border-radius 50%
-	background-color $yellow
-	margin 0 auto
+.sec_menu-item
+	_wh(32%, 150rpx)
+	margin-bottom 20rpx
+	background-color #fff
+	border 2px solid #dfe2e6
+	border-radius 20rpx
+	&:nth-child(3n+2)
+		margin-left 2%
+		margin-right 2%
 .menu-name_inner
-	color #fff
-	padding 0 20rpx
+	_wh(100%, 100%)
+	_fj(center)
+	_font(28rpx, 34rpx, #444,,center)
+	padding 10rpx
+	overflow hidden
 .cancel
-	_wh(100%, 100rpx)
-	  padding 0 24rpx
-	  overflow hidden
-	  background-color rgba(255, 255, 255, .3)
-	  box-shadow 0 1rpx 4rpx 0 rgba(160,160,160,0.9)
+	_wh(calc(100% - 76rpx), 100rpx)
+	margin 0 auto
+	padding 20rpx 0
+	overflow hidden
+	border-bottom 1px solid #c5c6c7
+.show
+	transform: translateY(0)
+.hidden
+	transform: translateY(100%)
 </style>