|
|
@@ -1,625 +1,615 @@
|
|
|
<template>
|
|
|
- <view class="my-resources">
|
|
|
+ <view class="my-resources" :class="{ 'dark-mode': isDarkTheme }">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<view class="header">
|
|
|
<text class="header-title">我的资源</text>
|
|
|
<view class="header-right">
|
|
|
- <view class="filter-icon" @click="handleFilter"></view>
|
|
|
+ <text class="dropdown-icon">▼</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 搜索栏 -->
|
|
|
<view class="search-bar">
|
|
|
<view class="search-input-wrapper">
|
|
|
- <view class="search-icon-small"></view>
|
|
|
- <input type="text" class="search-input" placeholder="请输入搜索关键词" v-model="searchKeyword" @input="handleSearch" />
|
|
|
+ <text class="search-icon">🔍</text>
|
|
|
+ <input type="text" class="search-input" placeholder="请输入人搜索关键词" v-model="searchKeyword" @input="handleSearch" />
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<scroll-view scroll-y class="content">
|
|
|
<!-- 资源列表 -->
|
|
|
- <view class="resource-item" v-for="(item, index) in resources" :key="index" @click="handleClientClick(item.id)">
|
|
|
+ <view class="resource-item" v-for="(item, index) in resources" :key="index" @click="handleViewUserDetail(item)">
|
|
|
+ <!-- 优质资源标签 -->
|
|
|
+ <view class="quality-tag" v-if="item.isQuality">优质资源</view>
|
|
|
+
|
|
|
+ <!-- 头部:头像 + 名字/性别 + 审核状态 -->
|
|
|
<view class="resource-header">
|
|
|
- <image :src="item.avatar" mode="aspectFill" class="resource-avatar"></image>
|
|
|
- <view class="resource-basic-info">
|
|
|
- <view class="name-gender">
|
|
|
+ <image v-if="item.avatar" :src="item.avatar" mode="aspectFill" class="resource-avatar"></image>
|
|
|
+ <view v-else class="resource-avatar-placeholder"></view>
|
|
|
+
|
|
|
+ <view class="resource-info">
|
|
|
+ <view class="name-gender-row">
|
|
|
<text class="resource-name">{{ item.name }}</text>
|
|
|
<text class="resource-gender">{{ item.gender }}</text>
|
|
|
- </view>
|
|
|
- <view class="tags">
|
|
|
- <text class="tag" :class="{ 'approved': item.status === '已审核', 'pending': item.status === '待审核' }">{{ item.status }}</text>
|
|
|
- <text class="tag plus" v-if="item.isPlus">+5</text>
|
|
|
+ <text class="status-tag" :class="{ 'approved': item.status === '已审核', 'pending': item.status === '待审核' }">{{ item.status }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- <view class="resource-details">
|
|
|
- <view class="labels">
|
|
|
- <text class="label" v-for="(label, idx) in item.labels" :key="idx">{{ label }}</text>
|
|
|
+ <!-- 右侧点赞/加号 -->
|
|
|
+ <view class="right-action" v-if="item.isPlus">
|
|
|
+ <text class="heart-icon">💗</text>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="requirement">
|
|
|
- <text class="requirement-label">择偶要求:</text>
|
|
|
- <text class="requirement-content">{{ item.requirement }}</text>
|
|
|
- </view>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <view class="labels-section">
|
|
|
+ <text class="label" v-for="(label, idx) in item.labels" :key="idx">{{ label }}</text>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="contact-info">
|
|
|
- <text class="contact-label">联系方式:</text>
|
|
|
- <text class="contact-number">{{ item.contact }}</text>
|
|
|
- <text class="copy-btn" @click="handleCopy(item.contact)">复制</text>
|
|
|
- </view>
|
|
|
+ <!-- 择偶要求 -->
|
|
|
+ <view class="requirement-section">
|
|
|
+ <text class="requirement-text">择偶要求: {{ item.requirement }}</text>
|
|
|
+ </view>
|
|
|
|
|
|
- <view class="action-buttons">
|
|
|
- <text class="delete-btn" @click="handleDelete(item.id)">删除</text>
|
|
|
- <text class="match-btn" @click="handleMatch(item.id)">精准匹配</text>
|
|
|
- </view>
|
|
|
+ <!-- 联系方式 -->
|
|
|
+ <view class="contact-section">
|
|
|
+ <text class="contact-label">联系方式:</text>
|
|
|
+ <text class="contact-number">{{ item.contact }}</text>
|
|
|
+ <text class="copy-btn" @click.stop="handleCopy(item.contact)">复制</text>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 优质资源标签 -->
|
|
|
- <view class="quality-tag" v-if="item.isQuality">优质资源</view>
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view class="action-buttons">
|
|
|
+ <text class="delete-btn" @click.stop="handleDelete(item.id)">删除</text>
|
|
|
+ <text class="match-btn" @click.stop="handleMatch(item.id)">精准匹配</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
-
|
|
|
+
|
|
|
+ <!-- 底部优质资源按钮 -->
|
|
|
+ <view class="quality-resources-section fixed-bottom">
|
|
|
+ <view class="quality-resources-btn" @click="navigateToQualityResources">
|
|
|
+ <text class="btn-icon">⭐</text>
|
|
|
+ <text class="btn-text">优质资源</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 底部添加按钮 -->
|
|
|
<view class="add-button" @click="handleAdd">
|
|
|
<text class="add-button-icon">+</text>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<!-- 底部导航 -->
|
|
|
<view class="tabbar">
|
|
|
<view class="tabbar-item" @click="navigateToWorkbench">
|
|
|
- <view class="tabbar-icon home"></view>
|
|
|
- <text class="tabbar-text">工作台</text>
|
|
|
+ <text class="tab-icon">🏠</text>
|
|
|
+ <text class="tab-text">工作台</text>
|
|
|
</view>
|
|
|
<view class="tabbar-item active" @click="navigateToMyResources">
|
|
|
- <view class="tabbar-icon resources"></view>
|
|
|
- <text class="tabbar-text">我的资源</text>
|
|
|
+ <text class="tab-icon">📋</text>
|
|
|
+ <text class="tab-text">我的资源</text>
|
|
|
</view>
|
|
|
<view class="tabbar-item" @click="navigateToRanking">
|
|
|
- <view class="tabbar-icon trophy"></view>
|
|
|
- <text class="tabbar-text">排行榜</text>
|
|
|
+ <text class="tab-icon">🏆</text>
|
|
|
+ <text class="tab-text">排行榜</text>
|
|
|
</view>
|
|
|
<view class="tabbar-item" @click="navigateToMessage">
|
|
|
- <view class="tabbar-icon message">
|
|
|
- <view class="badge">3</view>
|
|
|
+ <view class="tab-icon-wrapper">
|
|
|
+ <text class="tab-icon">💬</text>
|
|
|
+ <view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
|
|
|
</view>
|
|
|
- <text class="tabbar-text">消息</text>
|
|
|
+ <text class="tab-text">消息</text>
|
|
|
</view>
|
|
|
<view class="tabbar-item" @click="navigateToMine">
|
|
|
- <view class="tabbar-icon mine"></view>
|
|
|
- <text class="tabbar-text">我的</text>
|
|
|
+ <text class="tab-icon">👤</text>
|
|
|
+ <text class="tab-text">我的</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import api from '@/utils/api.js'
|
|
|
-
|
|
|
+import api from '@/utils/api.js'
|
|
|
+
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- searchKeyword: '',
|
|
|
- resources: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- avatar: 'https://example.com/avatar1.jpg',
|
|
|
- name: '小高',
|
|
|
- gender: '男',
|
|
|
- status: '已审核',
|
|
|
- isPlus: true,
|
|
|
- labels: ['气质男', '小清新'],
|
|
|
- requirement: '165+ 本科',
|
|
|
- contact: '123****8912',
|
|
|
- isQuality: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- avatar: 'https://example.com/avatar2.jpg',
|
|
|
- name: '小美',
|
|
|
- gender: '女',
|
|
|
- status: '已审核',
|
|
|
- isPlus: true,
|
|
|
- labels: ['温柔', '知性', '爱读书'],
|
|
|
- requirement: '175+ 硕士 有房',
|
|
|
- contact: '138****6543',
|
|
|
- isQuality: false
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- avatar: 'https://example.com/avatar3.jpg',
|
|
|
- name: '阿强',
|
|
|
- gender: '男',
|
|
|
- status: '待审核',
|
|
|
- isPlus: false,
|
|
|
- labels: ['阳光', '运动型'],
|
|
|
- requirement: '160+ 大专以上',
|
|
|
- contact: '159****2234',
|
|
|
- isQuality: true
|
|
|
- }
|
|
|
- ]
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchKeyword: '',
|
|
|
+ unreadCount: 3,
|
|
|
+ resources: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ avatar: '',
|
|
|
+ name: '小高',
|
|
|
+ gender: '男',
|
|
|
+ status: '已审核',
|
|
|
+ isPlus: false,
|
|
|
+ labels: ['气质男', '小清新'],
|
|
|
+ requirement: '165+ 本科',
|
|
|
+ contact: '123****8912',
|
|
|
+ isQuality: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ avatar: '',
|
|
|
+ name: '小美',
|
|
|
+ gender: '女',
|
|
|
+ status: '已审核',
|
|
|
+ isPlus: true,
|
|
|
+ labels: ['温柔', '知性', '爱读书'],
|
|
|
+ requirement: '175+ 硕士 有房',
|
|
|
+ contact: '138****6543',
|
|
|
+ isQuality: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ avatar: '',
|
|
|
+ name: '阿强',
|
|
|
+ gender: '男',
|
|
|
+ status: '待审核',
|
|
|
+ isPlus: false,
|
|
|
+ labels: ['阳光', '运动型'],
|
|
|
+ requirement: '160+ 大专以上',
|
|
|
+ contact: '159****2234',
|
|
|
+ isQuality: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ isDarkTheme: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ const stored = uni.getStorageSync('matchmakerDarkMode')
|
|
|
+ if (stored === true || stored === false) {
|
|
|
+ this.isDarkTheme = stored
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 加载我的资源数据
|
|
|
+ this.loadMyResources()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async loadMyResources() {
|
|
|
+ try {
|
|
|
+ const res = await api.matchmaker.getMyResources()
|
|
|
+ if (res && res.data && res.data.length > 0) {
|
|
|
+ this.resources = res.data
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('加载资源数据失败:', e)
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
- // 加载我的资源数据
|
|
|
- this.loadMyResources()
|
|
|
+ handleSearch() {
|
|
|
+ console.log('搜索关键词:', this.searchKeyword)
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 加载我的资源数据
|
|
|
- async loadMyResources() {
|
|
|
- try {
|
|
|
- const res = await api.matchmaker.getMyResources()
|
|
|
- if (res.data) {
|
|
|
- this.resources = res.data
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.error('加载资源数据失败:', e)
|
|
|
+ handleCopy(contact) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: contact.replace(/\*+/g, ''),
|
|
|
+ success: () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '复制成功',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
}
|
|
|
- },
|
|
|
- // 搜索
|
|
|
- handleSearch() {
|
|
|
- // 实现搜索功能
|
|
|
- console.log('搜索关键词:', this.searchKeyword)
|
|
|
- },
|
|
|
- // 筛选
|
|
|
- handleFilter() {
|
|
|
- // 实现筛选功能
|
|
|
- console.log('打开筛选')
|
|
|
- },
|
|
|
- // 复制联系方式
|
|
|
- handleCopy(contact) {
|
|
|
- uni.setClipboardData({
|
|
|
- data: contact.replace(/\*+/g, ''),
|
|
|
- success: () => {
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(id) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '删除确认',
|
|
|
+ content: '确定要删除该资源吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ console.log('删除资源:', id)
|
|
|
uni.showToast({
|
|
|
- title: '复制成功',
|
|
|
+ title: '删除成功',
|
|
|
icon: 'success'
|
|
|
})
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- // 删除资源
|
|
|
- handleDelete(id) {
|
|
|
- uni.showModal({
|
|
|
- title: '删除确认',
|
|
|
- content: '确定要删除该资源吗?',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- // 实现删除功能
|
|
|
- console.log('删除资源:', id)
|
|
|
- uni.showToast({
|
|
|
- title: '删除成功',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 精准匹配
|
|
|
- handleMatch(id) {
|
|
|
- // 实现精准匹配功能
|
|
|
- console.log('精准匹配:', id)
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/matchmaker-workbench/precise-match?id=${id}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 客户点击事件,跳转到客户详情页面
|
|
|
- handleClientClick(id) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/matchmaker-workbench/client-detail?id=${id}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 添加资源
|
|
|
- handleAdd() {
|
|
|
- // 实现添加资源功能
|
|
|
- console.log('添加资源')
|
|
|
- },
|
|
|
- // 导航到工作台
|
|
|
- navigateToWorkbench() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/matchmaker-workbench/index'
|
|
|
- })
|
|
|
- },
|
|
|
- // 导航到我的资源
|
|
|
- navigateToMyResources() {
|
|
|
- // 已在我的资源页面,无需跳转
|
|
|
- },
|
|
|
- // 导航到排行榜
|
|
|
- navigateToRanking() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/matchmaker-workbench/ranking'
|
|
|
- })
|
|
|
- },
|
|
|
- // 导航到消息
|
|
|
- navigateToMessage() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/matchmaker-workbench/message'
|
|
|
- })
|
|
|
- },
|
|
|
- // 导航到我的
|
|
|
- navigateToMine() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/matchmaker-workbench/mine'
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleMatch(id) {
|
|
|
+ console.log('精准匹配:', id)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/matchmaker-workbench/precise-match?id=${id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/matchmaker-workbench/add-resource'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navigateToWorkbench() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/matchmaker-workbench/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navigateToMyResources() {
|
|
|
+ // 已在我的资源页面,无需跳转
|
|
|
+ },
|
|
|
+ navigateToRanking() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/matchmaker-workbench/ranking'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navigateToMessage() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/matchmaker-workbench/message'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navigateToMine() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/matchmaker-workbench/mine'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ navigateToQualityResources() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/matchmaker-workbench/quality-resources'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleViewUserDetail(item) {
|
|
|
+ // 跳转到客户详情页面,传递用户ID
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/matchmaker-workbench/client-detail?id=${item.id}`
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .my-resources {
|
|
|
- min-height: 100vh;
|
|
|
- background: #FFF9F9;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+.my-resources {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #FFF9F9;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+/* 顶部导航栏 */
|
|
|
+.header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ padding-top: calc(20rpx + env(safe-area-inset-top));
|
|
|
+ background: #FFF9F9;
|
|
|
+
|
|
|
+ .header-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #9C27B0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-right {
|
|
|
+ .dropdown-icon {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #9C27B0;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- /* 顶部导航栏 */
|
|
|
- .header {
|
|
|
+/* 搜索栏 */
|
|
|
+.search-bar {
|
|
|
+ padding: 15rpx 20rpx;
|
|
|
+ background: #FFF9F9;
|
|
|
+
|
|
|
+ .search-input-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 25rpx 30rpx;
|
|
|
- padding-top: calc(25rpx + env(safe-area-inset-top));
|
|
|
- background: #FFF9F9;
|
|
|
- border-bottom: 1rpx solid #F0F0F0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 25rpx;
|
|
|
+ padding: 12rpx 20rpx;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
- .header-title {
|
|
|
- font-size: 38rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #9C27B0;
|
|
|
+ .search-icon {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
}
|
|
|
|
|
|
- .header-right {
|
|
|
- .filter-icon {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M3 4h18v2H3V4zm0 3h18v2H3V7zm0 3h18v2H3v-2zm15 3h3v2h-3v-2zm0 3h3v2h-3v-2z"/></svg>');
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
+ .search-input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: transparent;
|
|
|
+
|
|
|
+ &::placeholder {
|
|
|
+ color: #999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 15rpx 20rpx 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 优质资源按钮(紧贴加号按钮上方,稍微缩小) */
|
|
|
+.quality-resources-section {
|
|
|
+ position: fixed;
|
|
|
+ right: 30rpx; /* 与加号按钮右边对齐 */
|
|
|
+ bottom: 240rpx; /* 在加号按钮正上方留一点间距 */
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ .quality-resources-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ padding: 14rpx 22rpx; /* 比之前的 20rpx 略小 */
|
|
|
+ background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
|
|
|
+ border-radius: 18rpx;
|
|
|
+ border: 2rpx solid #FFB74D;
|
|
|
+
|
|
|
+ .btn-icon {
|
|
|
+ font-size: 28rpx; /* 略小 */
|
|
|
+ }
|
|
|
|
|
|
- /* 搜索栏 */
|
|
|
- .search-bar {
|
|
|
- padding: 20rpx;
|
|
|
- background: #FFF9F9;
|
|
|
-
|
|
|
- .search-input-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 30rpx;
|
|
|
- padding: 15rpx 25rpx;
|
|
|
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- .search-icon-small {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- margin-right: 15rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .search-input {
|
|
|
- flex: 1;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- background: transparent;
|
|
|
-
|
|
|
- &::placeholder {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
+ .btn-text {
|
|
|
+ font-size: 24rpx; /* 略小 */
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF9800;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .content {
|
|
|
- flex: 1;
|
|
|
- padding: 0 20rpx 140rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 资源卡片 */
|
|
|
+.resource-item {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ /* 优质资源标签 */
|
|
|
+ .quality-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 15rpx;
|
|
|
+ right: 15rpx;
|
|
|
+ background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 6rpx 14rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
}
|
|
|
|
|
|
- /* 资源列表 */
|
|
|
- .resource-item {
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- padding: 25rpx;
|
|
|
- position: relative;
|
|
|
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- .resource-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .resource-avatar {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .resource-basic-info {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .name-gender {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-
|
|
|
- .resource-name {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .resource-gender {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tags {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10rpx;
|
|
|
-
|
|
|
- .tag {
|
|
|
- display: inline-block;
|
|
|
- padding: 6rpx 16rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- &.approved {
|
|
|
- background: #E8F5E8;
|
|
|
- color: #4CAF50;
|
|
|
- }
|
|
|
-
|
|
|
- &.pending {
|
|
|
- background: #FFF3E0;
|
|
|
- color: #FF9800;
|
|
|
- }
|
|
|
-
|
|
|
- &.plus {
|
|
|
- background: #F8BBD0;
|
|
|
- color: #E91E63;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ /* 头部:头像 + 名字/性别 + 审核状态 */
|
|
|
+ .resource-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ gap: 15rpx;
|
|
|
+
|
|
|
+ .resource-avatar {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: #E8E8E8;
|
|
|
}
|
|
|
|
|
|
- .resource-details {
|
|
|
- .labels {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 10rpx;
|
|
|
- margin-bottom: 15rpx;
|
|
|
+ .resource-avatar-placeholder {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
|
|
|
+ }
|
|
|
|
|
|
- .label {
|
|
|
- display: inline-block;
|
|
|
- padding: 6rpx 16rpx;
|
|
|
- background: #F5F5F5;
|
|
|
- color: #666;
|
|
|
- border-radius: 15rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .resource-info {
|
|
|
+ flex: 1;
|
|
|
|
|
|
- .requirement {
|
|
|
+ .name-gender-row {
|
|
|
display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 15rpx;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10rpx;
|
|
|
|
|
|
- .requirement-label {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
+ .resource-name {
|
|
|
+ font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
- margin-right: 10rpx;
|
|
|
- margin-top: 2rpx;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
|
|
|
- .requirement-content {
|
|
|
- flex: 1;
|
|
|
- font-size: 26rpx;
|
|
|
+ .resource-gender {
|
|
|
+ font-size: 24rpx;
|
|
|
color: #666;
|
|
|
- line-height: 1.4;
|
|
|
- background: #F8F8F8;
|
|
|
- padding: 15rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .contact-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 25rpx;
|
|
|
|
|
|
- .contact-label {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
+ .status-tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
font-weight: bold;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
|
|
|
- .contact-number {
|
|
|
- flex: 1;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+ &.approved {
|
|
|
+ background: #E8F5E8;
|
|
|
+ color: #4CAF50;
|
|
|
+ }
|
|
|
|
|
|
- .copy-btn {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #9C27B0;
|
|
|
- font-weight: bold;
|
|
|
+ &.pending {
|
|
|
+ background: #FFF3E0;
|
|
|
+ color: #FF9800;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .action-buttons {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .delete-btn {
|
|
|
- padding: 12rpx 30rpx;
|
|
|
- background: #FFEBEE;
|
|
|
- color: #E91E63;
|
|
|
- border-radius: 25rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .match-btn {
|
|
|
- padding: 12rpx 45rpx;
|
|
|
- background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
- color: #FFFFFF;
|
|
|
- border-radius: 25rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .right-action {
|
|
|
+ .heart-icon {
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- /* 优质资源标签 */
|
|
|
- .quality-tag {
|
|
|
- position: absolute;
|
|
|
- top: 25rpx;
|
|
|
- right: 25rpx;
|
|
|
- background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
|
|
|
- color: #FFFFFF;
|
|
|
+ /* 标签 */
|
|
|
+ .labels-section {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5rpx 14rpx;
|
|
|
+ background: #F5F5F5;
|
|
|
+ color: #666;
|
|
|
+ border-radius: 12rpx;
|
|
|
font-size: 22rpx;
|
|
|
- font-weight: bold;
|
|
|
- padding: 8rpx 16rpx;
|
|
|
- border-radius: 15rpx;
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.3);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- /* 添加按钮 */
|
|
|
- .add-button {
|
|
|
- position: fixed;
|
|
|
- bottom: 130rpx;
|
|
|
- right: 40rpx;
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-shadow: 0 4rpx 20rpx rgba(156, 39, 176, 0.4);
|
|
|
- z-index: 999;
|
|
|
+ /* 择偶要求 */
|
|
|
+ .requirement-section {
|
|
|
+ margin-bottom: 12rpx;
|
|
|
|
|
|
- .add-button-icon {
|
|
|
- font-size: 60rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 1;
|
|
|
- font-weight: bold;
|
|
|
+ .requirement-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.4;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- /* 底部导航 */
|
|
|
- .tabbar {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 100rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-top: 1rpx solid #F0F0F0;
|
|
|
+ /* 联系方式 */
|
|
|
+ .contact-section {
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
-
|
|
|
- .tabbar-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- gap: 8rpx;
|
|
|
- padding: 10rpx 0;
|
|
|
-
|
|
|
- .tabbar-icon {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .badge {
|
|
|
- position: absolute;
|
|
|
- top: -8rpx;
|
|
|
- right: -8rpx;
|
|
|
- background: #FF4444;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: bold;
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tabbar-text {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- .tabbar-text {
|
|
|
- color: #9C27B0;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.home .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
|
|
|
- }
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ gap: 8rpx;
|
|
|
|
|
|
- &.active.home .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>');
|
|
|
- }
|
|
|
+ .contact-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- &.resources .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
|
|
|
- }
|
|
|
+ .contact-number {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #9C27B0;
|
|
|
+ }
|
|
|
|
|
|
- &.trophy .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M18 6l-1.42 1.42-1.59-1.59L13 8.17l-1.42-1.42L9 8.17l-1.59-1.59L6 6l3 3V18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2V9l3-3zm-4 12H8v-7.5l4-4 4 4V18z"/></svg>');
|
|
|
- }
|
|
|
+ .copy-btn {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #9C27B0;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &.active.trophy .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M18 6l-1.42 1.42-1.59-1.59L13 8.17l-1.42-1.42L9 8.17l-1.59-1.59L6 6l3 3V18c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2V9l3-3zm-4 12H8v-7.5l4-4 4 4V18z"/></svg>');
|
|
|
- }
|
|
|
+ /* 底部按钮 */
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 12rpx;
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ background: #FFEBEE;
|
|
|
+ color: #E91E63;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- &.message .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
|
|
|
+ .match-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 添加按钮 */
|
|
|
+.add-button {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 130rpx;
|
|
|
+ right: 30rpx;
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(156, 39, 176, 0.3);
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ .add-button-icon {
|
|
|
+ font-size: 50rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 底部导航 */
|
|
|
+.tabbar {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 110rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-top: 1rpx solid #F0F0F0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+
|
|
|
+ .tabbar-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+
|
|
|
+ .tab-icon-wrapper {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .badge {
|
|
|
+ position: absolute;
|
|
|
+ top: -8rpx;
|
|
|
+ right: -12rpx;
|
|
|
+ background: #FF4444;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 18rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ min-width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ padding: 0 6rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &.active.message .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>');
|
|
|
- }
|
|
|
+ .tab-icon {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
|
|
|
- &.mine .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
|
|
|
- }
|
|
|
+ .tab-text {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
|
|
|
- &.active.mine .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
|
|
|
+ &.active {
|
|
|
+ .tab-text {
|
|
|
+ color: #9C27B0;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|