yizhizan-h5/pages/msg/regular.vue

<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-left" @click="goBack">
				<u-icon name="close" color="rgba(56, 58, 63, 1)" size="32"></u-icon>
			</view>
			<view class="nav-center">
				<text class="nav-title">常用语</text>
			</view>
			<view class="nav-right"></view>
		</view>
		
		<!-- 常用语列表 -->
		<view class="content-area">
			<view class="phrase-item">
				<view class="phrase-content">
					<text class="phrase-text">我可以去贵公司面试吗?</text>
				</view>
				<view class="phrase-action">
					<text class="action-text">编辑</text>
					<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
				</view>
			</view>
			
			<view class="phrase-item">
				<view class="phrase-content">
					<text class="phrase-text">对不起,我觉得该职位不适合我,祝您朝日找到满意的工作人选</text>
				</view>
				<view class="phrase-action">
					<text class="action-text">编辑</text>
					<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
				</view>
			</view>
			
			<view class="phrase-item">
				<view class="phrase-content">
					<text class="phrase-text">刚刚看了您发布的这个职位,我特别喜欢,可否聊聊呢?</text>
				</view>
				<view class="phrase-action">
					<text class="action-text">编辑</text>
					<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 底部添加按钮 -->
		<view class="bottom-button">
			<u-button class="add-button" :custom-style="customStyle" :hair-line="false" @click="addPhrase">
				添加常用语
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					background: 'linear-gradient(90deg, rgba(13, 39, 247, 1) 0%, rgba(19, 193, 234, 1) 100%)',
					border: 0,
					color: '#FFFFFF',
					height: '98rpx',
					borderRadius: '130rpx'
				}
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			// 添加常用语
			addPhrase() {
				console.log('添加常用语');
				// 跳转到添加页面，设置标题为"新建常用语"
				uni.navigateTo({
					url: '/pages/msg/add?type=0&type1=0&title=新建常用语'
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 80rpx;
	}

	.page-container {
		min-height: 100vh;
		padding-bottom: 120rpx; /* 为底部按钮留出空间 */
	}

	// 顶部导航栏样式
	.nav-header {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		background: #FFFFFF;
	}

	.nav-left {
		width: 60rpx;
		display: flex;
		justify-content: flex-start;
	}

	.nav-center {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.nav-title {
		color: rgba(51, 51, 51, 1);
		font-family: DM Sans;
		font-size: 18px;
		font-weight: 700;
		line-height: 26px;
		letter-spacing: 0%;
		text-align: center;
	}

	.nav-right {
		width: 60rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	// 内容区域
	.content-area {
		padding: 20rpx;
	}

	// 常用语项样式
	.phrase-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(253, 253, 253, 1);
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		border: 0.5px solid rgba(227, 231, 236, 1);
	}

	.phrase-content {
		flex: 1;
		margin-right: 20rpx;

		.phrase-text {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 14px;
			font-weight: 400;
			line-height: 13px;
			letter-spacing: 0%;
			text-align: left;
		}
	}


	.phrase-action {
		display: flex;
		align-items: center;
	}

	.action-text {
		color: rgba(153, 153, 153, 1);
		font-family: DM Sans;
		font-size: 14px;
		font-weight: 400;
		line-height: 13px;
		letter-spacing: 0%;
		text-align: left;
		margin-right: 10rpx;
	}

	// 底部按钮
	.bottom-button {
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;
		right: 40rpx;

		.add-button {
			width: 100%;
		}
	}
</style>