职业等级浮层样式开发

common/styles/global/components.scss

@@ -309,7 +309,7 @@ margin-right: 18rpx;display: inline-block;vertical-align: middle;}
 	.phone-radio-item{
 		width: 29%;height:60rpx;line-height:60rpx;border-radius: 6rpx;box-sizing: border-box;
 		background-color:#f5f5f5;text-align: center;margin:10rpx 2%;@include single-line-ellipsis();
-		box-sizing: border-box;padding: 0 6rpx;font-size: 26rpx;border:1rpx solid #f5f5f5;
+		padding: 0 6rpx;font-size: 26rpx;border:1rpx solid #f5f5f5;
 	}
 	.radioActive{background-color:#e5f8f4;border:1rpx solid #6bccb0;color:#6bccb0;}
 }

common/styles/global/pages.scss

@@ -1173,3 +1173,30 @@
 		}
 	}
 }
+
+/* 职业等级选择页 */
+.phone-zydj-popup{
+	display: flex;flex-direction: column;
+	/*  #ifdef  H5  */
+	height: calc(100vh - 80rpx);
+	/*  #endif  */
+	/*  #ifdef  APP-PLUS  */
+	height: 100vh;
+	/*  #endif  */
+	.phone-select-group{
+		display: flex;flex-wrap: wrap;align-content: flex-start;flex: 1;
+		overflow: auto;box-sizing: border-box;padding:16rpx;}
+	.phone-select-item{width: 31.7%;height:60rpx;line-height:60rpx;margin:10rpx 0.8%;padding: 0 6rpx;font-size: 24rpx;border-radius: 6rpx;
+	box-sizing: border-box;background-color:#f5f5f5;text-align: center;@include single-line-ellipsis();
+	border:1rpx solid #f5f5f5;}
+	.selectActive{position: relative;padding-right: 24rpx;background-color:#e5f8f4;border:1rpx solid #6bccb0;color:#6bccb0;}
+	.selectActive::before{content: '';position: absolute;top: 0;right: 0;
+	border-top: 44rpx solid  #fbb420;border-bottom: 30rpx solid transparent;border-left: 56rpx solid transparent;}
+	.select-item-tag{position: absolute;font-size: 22rpx;top: 2rpx;right: 3rpx;line-height: 1;color: #333;}
+	.zydj-popup-btn-box{
+		margin: 20rpx 8rpx 0;display: flex;justify-content: center;padding: 32rpx 0;background-color: #fff;
+		.phone-green-btn{width: 36%;font-size: 28rpx;margin: 0 16rpx;}
+	}
+} 
+// 等级选择弹窗
+.dj-select-item{border:1rpx solid #c5c5c5;text-align: center;margin:0 5% 30rpx;padding: 16rpx 0;font-size: 26rpx;border-radius: 8rpx;}

components/dialog/contentDialog.vue

@@ -1,16 +1,6 @@
 <template>
 	<uni-popup ref="commonPopup" :type="type" :animation="false" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.4)" background-color="#fff">
-		<view class="phone-common-dialog1">
-			<view class="common-body-box">
-				<view class="common-title">{{title}}</view>
-				<view class="common-content" :class="dialogContentClass">
-					<slot></slot>
-				</view>
-				<view class="common-btn-box" v-if="showBtn">
-					<view @click="confirmBtn">{{okBtn}}</view>
-				</view>
-			</view>
-		</view>
+		<slot></slot>
 	</uni-popup>
 </template>
 

components/selectZyLevel/index.vue

@@ -1,19 +1,35 @@
 <template>
 	<contentDialogVue ref="commonPopup" @confirm-btn="confirmBtn" title="选择职业">
-		<view   style="height: 100vh">
+		<view class="phone-zydj-popup">
+			<view class="icon-title-navBar-box">
+				<view class="nav-bar-icon"></view>
+				<text class="nav-bar-title">职业等级</text>
+			</view>
 			<!-- 技能块展示 -->
-			<view v-for="item in data.list" :key="item.id" class="phone-radio-item"
-				:class="{ radioActive: !!item.zyLevelName }" @click="toggleSelect(item)">
-				{{ item.name }}
-				<view class="radio-item-tag" v-if="!!item.zyLevelName">{{item.zyLevelName[0]}}</view>
+			<view class="phone-select-group">
+				<view v-for="item in data.list" :key="item.id" class="phone-select-item"
+					:class="{ selectActive: !!item.zyLevelName }" @click="toggleSelect(item)">
+					{{ item.name }}
+					<view class="select-item-tag" v-if="!!item.zyLevelName">{{item.zyLevelName[0]}}</view>
+				</view>
+			</view>
+			<view class="zydj-popup-btn-box">
+				<button type="default"  class="phone-green-btn">保存</button>
 			</view>
 		</view>
 	</contentDialogVue>
 	<!-- 弹窗 -->
 	<contentDialogVue ref="commonPopup2" type="center" :showBtn="false" title="请选择职业等级">
-		<!-- 等级选择 -->
-		<view v-for="item in data.zyLevelList" :key="item.id" @click="handleSelectLevelId(item)">
-			{{item.name}}
+		<view class="phone-common-dialog">
+			<view class="common-body-box">
+				<view class="common-title">选择等级</view>
+				<!-- 等级选择 -->
+				<view class="common-content">
+					<view class="dj-select-item" v-for="item in data.zyLevelList" :key="item.id" @click="handleSelectLevelId(item)">
+						{{item.name}}
+					</view>
+				</view>
+			</view>
 		</view>
 	</contentDialogVue>
 </template>

pages.json

@@ -269,9 +269,9 @@
 		},
 		{
 			"path" : "pages/demo/demo2",
-			"style" : 
+			"style" :
 			{
-				"navigationBarTitleText" : ""
+				"navigationStyle": "custom"
 			}
 		}
 	],