You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
3.1 KiB
151 lines
3.1 KiB
<template>
|
|
<view class="my-page">
|
|
<!-- 登录区域 -->
|
|
<view class="login-section" @click="loginRegister">
|
|
<view class="avatar">
|
|
<text class="avatar-icon">😊</text>
|
|
</view>
|
|
<view class="login-text">
|
|
<text class="login-title">点击登录/注册</text>
|
|
<text class="login-subtitle">登录查看更多消息</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能区域 -->
|
|
<view class="features-section">
|
|
<view class="feature-item" @click="myComments">
|
|
<view class="feature-icon">
|
|
<text class="icon-content">📝</text>
|
|
</view>
|
|
<text class="feature-name">我的评价</text>
|
|
</view>
|
|
|
|
<view class="feature-item" @click="myFavorites">
|
|
<view class="feature-icon">
|
|
<text class="icon-content">❤️</text>
|
|
</view>
|
|
<text class="feature-name">收藏岗位</text>
|
|
</view>
|
|
|
|
<view class="feature-item" @click="contactService">
|
|
<view class="feature-icon">
|
|
<text class="icon-content">📞</text>
|
|
</view>
|
|
<text class="feature-name">咨询客服</text>
|
|
</view>
|
|
</view>123
|
|
{{loginRes}}
|
|
<!-- 底部占位，避免内容被底部导航栏遮挡 -->
|
|
<view class="bottom-space"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useUserStore } from '../../stores/user.js';
|
|
const userStore = useUserStore();
|
|
const loginRes = computed(() => userStore.loginRes);
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.my-page {
|
|
background-color: #fff;
|
|
min-height: 100vh;
|
|
padding-top: 12px; // 增加顶部内边距，避免内容紧贴导航栏
|
|
|
|
// 登录区域
|
|
.login-section {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
tap-highlight-color: transparent;
|
|
|
|
.avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
background-color: #e6f7ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 16px;
|
|
|
|
.avatar-icon {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
.login-text {
|
|
.login-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.login-subtitle {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 功能区域
|
|
.features-section {
|
|
background-color: #fff;
|
|
padding: 16px 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.feature-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px;
|
|
tap-highlight-color: transparent;
|
|
|
|
.feature-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 12px;
|
|
background-color: #f0f9ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 8px;
|
|
|
|
.icon-content {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.feature-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
// 为不同的功能图标设置不同的背景色
|
|
&:nth-child(1) .feature-icon {
|
|
background-color: #e6f7ff;
|
|
}
|
|
|
|
&:nth-child(2) .feature-icon {
|
|
background-color: #fff1f0;
|
|
}
|
|
|
|
&:nth-child(3) .feature-icon {
|
|
background-color: #f0f9ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 底部占位，避免内容被底部导航栏遮挡
|
|
.bottom-space {
|
|
height: 60px;
|
|
}
|
|
}
|
|
</style>
|
|
|