123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <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>
|