首页卡片开发

packageA/pages/addWorkExperience/addWorkExperience.vue

@@ -1,16 +1,5 @@
 <template>
-	<AppLayout
-	    title="添加工作经历"
-	    border
-	    back-gorund-color="#ffffff"
-	    :show-bg-image="false"
-	>
-	    <template #headerleft>
-	        <view class="btn mar_le20 button-click" @click="navBack">取消</view>
-	    </template>
-	    <template #headerright>
-	        <view class="btn mar_ri20 button-click" @click="handleConfirm">确认</view>
-	    </template>
+	<view class="page-container">
 		<view class="content">
 			<view class="content-input">
 			    <view class="input-titile">公司名称</view>
@@ -44,8 +33,12 @@
 				<textarea class="textarea-con" v-model="formData.description" placeholder-style="font-size: 16px" maxlength="500" placeholder="请输入工作描述"/>
 			</view>
 		</view>
-	</AppLayout>
-	
+		
+		<!-- 底部确认按钮 -->
+		<view class="bottom-confirm-btn">
+			<view class="confirm-btn" @click="handleConfirm">确认</view>
+		</view>
+	</view>
 </template>
 
 <script setup>
@@ -206,7 +199,6 @@
 			console.log('页面类型:', pageType.value);
 			
 			let resData;
-			alert(editData.value.id)
 			// 根据页面类型调用不同的接口
 			if (pageType.value === 'edit' && editData.value?.id) {
 				// 编辑模式：调用更新接口
@@ -234,12 +226,18 @@
 </script>
 
 <style lang="stylus" scoped>
+.page-container {
+    min-height: 100vh;
+    background-color: #ffffff;
+    position: relative;
+}
+
 .content{
     padding: 28rpx;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start
-    height: calc(100% - 120rpx)
+    justify-content: flex-start;
+    padding-bottom: 120rpx;
 }
 .content-input
     margin-bottom: 52rpx
@@ -328,6 +326,30 @@
 			line-height: 20rpx
 			display: flex
 			align-items: center
+
+// 底部确认按钮样式
+.bottom-confirm-btn
+	position: fixed
+	bottom: 0
+	left: 0
+	right: 0
+	background-color: #ffffff
+	padding: 20rpx 28rpx
+	border-top: 2rpx solid #EBEBEB
+	z-index: 999
+	
+	.confirm-btn
+		width: 100%
+		height: 90rpx
+		background: #256BFA
+		border-radius: 12rpx
+		font-weight: 500
+		font-size: 32rpx
+		color: #FFFFFF
+		text-align: center
+		line-height: 90rpx
+		button-click: true
+
 // .content-sex
 //     height: 110rpx;
 //     display: flex