|
|
@@ -1,92 +1,77 @@
|
|
|
<template>
|
|
|
- <view class="my-resources" :class="{ 'dark-mode': isDarkTheme }">
|
|
|
+ <view class="my-resources">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<view class="header">
|
|
|
<text class="header-title">我的资源</text>
|
|
|
<view class="header-right">
|
|
|
<text class="dropdown-arrow">▼</text>
|
|
|
- <text class="dropdown-icon">▼</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 搜索栏 -->
|
|
|
<view class="search-bar">
|
|
|
<view class="search-input-wrapper">
|
|
|
- <text class="search-icon">🔍</text>
|
|
|
- <input type="text" class="search-input" placeholder="请输入人搜索关键词" v-model="searchKeyword" @input="handleSearch" />
|
|
|
+ <view class="search-icon-small"></view>
|
|
|
+ <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="handleViewUserDetail(item)">
|
|
|
- <!-- 优质资源标签 -->
|
|
|
- <view class="quality-tag" v-if="item.isQuality">
|
|
|
- <text class="quality-star">★</text>
|
|
|
- <text class="quality-text">优质资源</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 头部：头像 + 名字/性别 + 审核状态 -->
|
|
|
+ <view class="resource-item" v-for="(item, index) in resources" :key="index">
|
|
|
+ <!-- 右上角选中图标 -->
|
|
|
+ <view class="select-icon">✓-</view>
|
|
|
+
|
|
|
<view class="resource-header">
|
|
|
- <image
|
|
|
- v-if="item.avatar"
|
|
|
- :src="item.avatar"
|
|
|
- mode="aspectFill"
|
|
|
+ <image
|
|
|
+ :src="item.avatar"
|
|
|
+ mode="aspectFill"
|
|
|
class="resource-avatar"
|
|
|
@error="handleImageError(index)"
|
|
|
@load="handleImageLoad(index)"
|
|
|
:lazy-load="true"
|
|
|
></image>
|
|
|
- <view v-else class="resource-avatar-placeholder"></view>
|
|
|
-
|
|
|
- <view class="resource-info">
|
|
|
- <view class="name-gender-row">
|
|
|
+ <view class="resource-basic-info">
|
|
|
+ <view class="name-gender">
|
|
|
<text class="resource-name">{{ item.name }}</text>
|
|
|
<text class="resource-gender">{{ item.gender }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="status-tag-wrapper">
|
|
|
<text class="status-tag" :class="{ 'approved': item.status === '已审核', 'pending': item.status === '待审核' }">{{ item.status }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 右侧点赞/加号 -->
|
|
|
- <view class="right-action" v-if="item.isPlus">
|
|
|
- <text class="heart-icon">💗</text>
|
|
|
+ <view class="resource-details">
|
|
|
+ <view class="labels">
|
|
|
+ <text class="label" v-for="(label, idx) in item.labels" :key="idx">{{ label }}</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- 标签 -->
|
|
|
- <view class="labels-section">
|
|
|
- <text class="label" v-for="(label, idx) in item.labels" :key="idx">{{ label }}</text>
|
|
|
- </view>
|
|
|
+ <view class="requirement-box">
|
|
|
+ <text class="requirement-label">择偶要求:</text>
|
|
|
+ <text class="requirement-content">{{ item.requirement }}</text>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 择偶要求 -->
|
|
|
- <view class="requirement-box">
|
|
|
- <text class="requirement-label">择偶要求:</text>
|
|
|
- <text class="requirement-content">{{ item.requirement }}</text>
|
|
|
- </view>
|
|
|
+ <view class="contact-box">
|
|
|
+ <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="contact-box">
|
|
|
- <text class="contact-label">联系方式:</text>
|
|
|
- <text class="contact-number">{{ item.contact }}</text>
|
|
|
- <text class="copy-btn" @click.stop="handleCopy(item.contact)">复制</text>
|
|
|
+ <view class="action-buttons">
|
|
|
+ <view class="delete-btn" @click.stop="handleDelete(item.id)">删除</view>
|
|
|
+ <view class="match-btn" @click.stop="handleMatch(item.id)">精准匹配</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 底部按钮 -->
|
|
|
- <view class="action-buttons">
|
|
|
- <view class="delete-btn" @click.stop="handleDelete(item.id)">删除</view>
|
|
|
- <view class="match-btn" @click.stop="handleMatch(item.id)">精准匹配</view>
|
|
|
+ <!-- 优质资源标签 -->
|
|
|
+ <view class="quality-tag" v-if="item.isQuality">
|
|
|
+ <text class="quality-star">★</text>
|
|
|
+ <text class="quality-text">优质资源</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>
|
|
|
@@ -94,26 +79,26 @@
|
|
|
|
|
|
<!-- 底部导航 -->
|
|
|
<view class="tabbar">
|
|
|
- <view class="tabbar-item home" @click="navigateToWorkbench">
|
|
|
- <view class="tabbar-icon"></view>
|
|
|
+ <view class="tabbar-item" @click="navigateToWorkbench">
|
|
|
+ <view class="tabbar-icon home"></view>
|
|
|
<text class="tabbar-text">工作台</text>
|
|
|
</view>
|
|
|
- <view class="tabbar-item resources active" @click="navigateToMyResources">
|
|
|
- <view class="tabbar-icon"></view>
|
|
|
+ <view class="tabbar-item active" @click="navigateToMyResources">
|
|
|
+ <view class="tabbar-icon resources"></view>
|
|
|
<text class="tabbar-text">我的资源</text>
|
|
|
</view>
|
|
|
- <view class="tabbar-item trophy" @click="navigateToRanking">
|
|
|
- <view class="tabbar-icon"></view>
|
|
|
+ <view class="tabbar-item" @click="navigateToRanking">
|
|
|
+ <view class="tabbar-icon trophy"></view>
|
|
|
<text class="tabbar-text">排行榜</text>
|
|
|
</view>
|
|
|
- <view class="tabbar-item message" @click="navigateToMessage">
|
|
|
- <view class="tabbar-icon">
|
|
|
- <view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
|
|
|
+ <view class="tabbar-item" @click="navigateToMessage">
|
|
|
+ <view class="tabbar-icon message">
|
|
|
+ <view class="badge">3</view>
|
|
|
</view>
|
|
|
<text class="tabbar-text">消息</text>
|
|
|
</view>
|
|
|
- <view class="tabbar-item mine" @click="navigateToMine">
|
|
|
- <view class="tabbar-icon"></view>
|
|
|
+ <view class="tabbar-item" @click="navigateToMine">
|
|
|
+ <view class="tabbar-icon mine"></view>
|
|
|
<text class="tabbar-text">我的</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -121,22 +106,20 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import api from '@/utils/api.js'
|
|
|
-
|
|
|
+ import api from '@/utils/api.js'
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
searchKeyword: '',
|
|
|
- unreadCount: 3,
|
|
|
- isDarkTheme: false,
|
|
|
resources: [
|
|
|
{
|
|
|
id: 1,
|
|
|
- avatar: '',
|
|
|
+ avatar: 'https://example.com/avatar1.jpg',
|
|
|
name: '小高',
|
|
|
gender: '男',
|
|
|
status: '已审核',
|
|
|
- isPlus: false,
|
|
|
+ isPlus: true,
|
|
|
labels: ['气质男', '小清新'],
|
|
|
requirement: '165+ 本科',
|
|
|
contact: '123****8912',
|
|
|
@@ -144,7 +127,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
- avatar: '',
|
|
|
+ avatar: 'https://example.com/avatar2.jpg',
|
|
|
name: '小美',
|
|
|
gender: '女',
|
|
|
status: '已审核',
|
|
|
@@ -156,7 +139,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
- avatar: '',
|
|
|
+ avatar: 'https://example.com/avatar3.jpg',
|
|
|
name: '阿强',
|
|
|
gender: '男',
|
|
|
status: '待审核',
|
|
|
@@ -169,12 +152,6 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
- onShow() {
|
|
|
- const stored = uni.getStorageSync('matchmakerDarkMode')
|
|
|
- if (stored === true || stored === false) {
|
|
|
- this.isDarkTheme = stored
|
|
|
- }
|
|
|
- },
|
|
|
onLoad() {
|
|
|
// 加载我的资源数据
|
|
|
this.loadMyResources()
|
|
|
@@ -187,7 +164,7 @@ export default {
|
|
|
const userInfo = uni.getStorageSync('userInfo') || {}
|
|
|
const userId = uni.getStorageSync('userId')
|
|
|
const currentUserId = userInfo.userId || userId || null
|
|
|
-
|
|
|
+
|
|
|
if (!currentUserId) {
|
|
|
console.error('无法获取当前登录用户ID')
|
|
|
uni.showToast({
|
|
|
@@ -196,28 +173,28 @@ export default {
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 调用后端接口，传递当前用户ID作为matchmakerId
|
|
|
- const baseUrl = process.env.NODE_ENV === 'development'
|
|
|
+ const baseUrl = process.env.NODE_ENV === 'development'
|
|
|
? 'http://localhost:8083/api' // 开发环境 - 通过网关
|
|
|
: 'https://your-domain.com/api' // 生产环境
|
|
|
-
|
|
|
+
|
|
|
// 构建查询参数
|
|
|
let url = `${baseUrl}/my-resource/list?currentUserId=${currentUserId}&pageNum=1&pageSize=100`
|
|
|
if (this.searchKeyword && this.searchKeyword.trim()) {
|
|
|
url += `&keyword=${encodeURIComponent(this.searchKeyword.trim())}`
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
const [error, res] = await uni.request({
|
|
|
url: url,
|
|
|
method: 'GET'
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
if (error) {
|
|
|
console.error('加载资源数据失败:', error)
|
|
|
return
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (res.statusCode === 200 && res.data && res.data.code === 200) {
|
|
|
// 处理返回的数据
|
|
|
const pageData = res.data.data
|
|
|
@@ -241,7 +218,7 @@ export default {
|
|
|
if (item.house === 1) {
|
|
|
requirement += ' 有房'
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 处理标签（可以根据实际需求扩展）
|
|
|
const labels = []
|
|
|
if (item.constellation) {
|
|
|
@@ -250,11 +227,11 @@ export default {
|
|
|
if (item.occupation) {
|
|
|
labels.push(item.occupation)
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 处理头像URL：确保使用完整的URL
|
|
|
// 尝试多种可能的字段名
|
|
|
let avatarUrl = item.avatarUrl || item.avatar_url || item.avatar || ''
|
|
|
-
|
|
|
+
|
|
|
console.log('=== 头像URL处理 ===')
|
|
|
console.log('资源ID:', item.resourceId, '姓名:', item.name)
|
|
|
console.log('原始数据字段:', {
|
|
|
@@ -264,7 +241,7 @@ export default {
|
|
|
'item完整对象': item
|
|
|
})
|
|
|
console.log('提取的avatarUrl值:', avatarUrl, '类型:', typeof avatarUrl, '是否为空:', !avatarUrl)
|
|
|
-
|
|
|
+
|
|
|
// 如果头像URL为空或null，设置为空字符串（让CSS背景图显示）
|
|
|
if (!avatarUrl || avatarUrl.trim() === '' || avatarUrl === 'null' || avatarUrl === null || avatarUrl === undefined) {
|
|
|
avatarUrl = '' // 设置为空，让CSS默认背景显示
|
|
|
@@ -272,27 +249,27 @@ export default {
|
|
|
} else {
|
|
|
// 确保URL是完整的（如果已经是完整URL则直接使用）
|
|
|
avatarUrl = avatarUrl.trim()
|
|
|
-
|
|
|
+
|
|
|
// 如果URL不是以http开头，可能需要拼接基础URL（根据实际情况调整）
|
|
|
if (!avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
|
|
|
console.warn('⚠️ 头像URL不是完整URL，可能需要拼接:', avatarUrl)
|
|
|
// 如果是相对路径，可以尝试拼接MinIO基础URL
|
|
|
// avatarUrl = 'http://115.190.125.125:9000/' + avatarUrl
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 确保MinIO URL可以正常访问（可能需要处理跨域）
|
|
|
// 如果MinIO配置了公共访问，直接使用URL即可
|
|
|
console.log('✅ 使用用户头像URL:', avatarUrl)
|
|
|
-
|
|
|
+
|
|
|
// 验证URL格式
|
|
|
if (avatarUrl.includes('115.190.125.125:9000')) {
|
|
|
console.log('✅ 检测到MinIO URL，URL格式:', avatarUrl)
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
console.log('最终设置的avatarUrl:', avatarUrl)
|
|
|
console.log('=== 头像URL处理结束 ===')
|
|
|
-
|
|
|
+
|
|
|
return {
|
|
|
id: item.resourceId,
|
|
|
avatar: avatarUrl, // 使用处理后的头像URL
|
|
|
@@ -306,7 +283,7 @@ export default {
|
|
|
isQuality: false
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
console.log('处理后的资源列表:', this.resources)
|
|
|
}
|
|
|
}
|
|
|
@@ -314,170 +291,157 @@ export default {
|
|
|
console.error('加载资源数据失败:', e)
|
|
|
}
|
|
|
},
|
|
|
- // 搜索
|
|
|
- async handleSearch() {
|
|
|
- // 重新加载资源数据，包含搜索关键词
|
|
|
- await this.loadMyResources()
|
|
|
- },
|
|
|
- // 复制联系方式
|
|
|
- handleCopy(contact) {
|
|
|
- uni.setClipboardData({
|
|
|
- data: contact.replace(/\*+/g, ''),
|
|
|
- success: () => {
|
|
|
- uni.showToast({
|
|
|
- title: '复制成功',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 删除资源
|
|
|
- handleDelete(id) {
|
|
|
- uni.showModal({
|
|
|
- title: '删除确认',
|
|
|
- content: '确定要删除该资源吗？',
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- // 实现删除功能
|
|
|
- console.log('删除资源:', id)
|
|
|
+ // 搜索
|
|
|
+ async handleSearch() {
|
|
|
+ // 重新加载资源数据，包含搜索关键词
|
|
|
+ await this.loadMyResources()
|
|
|
+ },
|
|
|
+ // 复制联系方式
|
|
|
+ handleCopy(contact) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: contact.replace(/\*+/g, ''),
|
|
|
+ success: () => {
|
|
|
uni.showToast({
|
|
|
- title: '删除成功',
|
|
|
+ title: '复制成功',
|
|
|
icon: 'success'
|
|
|
})
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 精准匹配
|
|
|
- handleMatch(id) {
|
|
|
- // 实现精准匹配功能
|
|
|
- console.log('精准匹配:', id)
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/matchmaker-workbench/precise-match?id=${id}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 添加资源
|
|
|
- handleAdd() {
|
|
|
- // 跳转到信息录入页面
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/matchmaker-workbench/resource-input',
|
|
|
- success: () => {
|
|
|
- console.log('跳转到信息录入页面成功')
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.error('跳转失败:', err)
|
|
|
- uni.showToast({
|
|
|
- title: '页面跳转失败',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 导航到工作台
|
|
|
- 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'
|
|
|
- })
|
|
|
- },
|
|
|
- // 导航到优质资源
|
|
|
- navigateToQualityResources() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/matchmaker-workbench/quality-resources'
|
|
|
- })
|
|
|
- },
|
|
|
- // 查看用户详情
|
|
|
- handleViewUserDetail(item) {
|
|
|
- // 跳转到客户详情页面，传递用户ID
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/matchmaker-workbench/client-detail?id=${item.id}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 图片加载错误处理
|
|
|
- handleImageError(index) {
|
|
|
- try {
|
|
|
- const resource = this.resources && this.resources[index]
|
|
|
- if (!resource) {
|
|
|
- console.warn('图片加载失败：资源不存在，index:', index)
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- const originalUrl = resource.avatar
|
|
|
- console.error('❌ 图片加载失败:', {
|
|
|
- index: index,
|
|
|
- resourceName: resource.name,
|
|
|
- resourceId: resource.id,
|
|
|
- originalAvatarUrl: originalUrl,
|
|
|
- 'URL类型': typeof originalUrl,
|
|
|
- 'URL长度': originalUrl ? originalUrl.length : 0,
|
|
|
- '是否包含placeholder': originalUrl && originalUrl.includes('placeholder'),
|
|
|
- '完整resource对象': resource
|
|
|
})
|
|
|
-
|
|
|
- // 如果图片加载失败，且不是已经设置的默认占位图，则设置为空（显示CSS背景）
|
|
|
- // 避免重复设置导致循环
|
|
|
- if (originalUrl &&
|
|
|
- originalUrl.trim() !== '' &&
|
|
|
- !originalUrl.includes('placeholder') &&
|
|
|
- !originalUrl.includes('default') &&
|
|
|
- !originalUrl.includes('via.placeholder')) {
|
|
|
- // 设置为空字符串，让CSS默认背景显示
|
|
|
- console.log('图片加载失败，将URL设置为空，显示CSS默认背景')
|
|
|
- this.$set(this.resources[index], 'avatar', '')
|
|
|
- } else {
|
|
|
- console.log('图片加载失败，但URL已经是占位图或空，无需处理')
|
|
|
- console.log('当前URL:', originalUrl)
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- console.error('处理图片错误时发生异常:', e)
|
|
|
- }
|
|
|
- },
|
|
|
- // 图片加载成功处理
|
|
|
- handleImageLoad(index) {
|
|
|
- try {
|
|
|
- if (this.resources && this.resources[index]) {
|
|
|
- console.log('图片加载成功:', {
|
|
|
+ },
|
|
|
+ // 删除资源
|
|
|
+ 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() {
|
|
|
+ // 跳转到信息录入页面
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/matchmaker-workbench/resource-input',
|
|
|
+ success: () => {
|
|
|
+ console.log('跳转到信息录入页面成功')
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('跳转失败:', err)
|
|
|
+ uni.showToast({
|
|
|
+ title: '页面跳转失败',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 导航到工作台
|
|
|
+ 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'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 图片加载错误处理
|
|
|
+ handleImageError(index) {
|
|
|
+ try {
|
|
|
+ const resource = this.resources && this.resources[index]
|
|
|
+ if (!resource) {
|
|
|
+ console.warn('图片加载失败：资源不存在，index:', index)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const originalUrl = resource.avatar
|
|
|
+ console.error('❌ 图片加载失败:', {
|
|
|
index: index,
|
|
|
- resource: this.resources[index]?.name,
|
|
|
- avatarUrl: this.resources[index]?.avatar
|
|
|
+ resourceName: resource.name,
|
|
|
+ resourceId: resource.id,
|
|
|
+ originalAvatarUrl: originalUrl,
|
|
|
+ 'URL类型': typeof originalUrl,
|
|
|
+ 'URL长度': originalUrl ? originalUrl.length : 0,
|
|
|
+ '是否包含placeholder': originalUrl && originalUrl.includes('placeholder'),
|
|
|
+ '完整resource对象': resource
|
|
|
})
|
|
|
+
|
|
|
+ // 如果图片加载失败，且不是已经设置的默认占位图，则设置为空（显示CSS背景）
|
|
|
+ // 避免重复设置导致循环
|
|
|
+ if (originalUrl &&
|
|
|
+ originalUrl.trim() !== '' &&
|
|
|
+ !originalUrl.includes('placeholder') &&
|
|
|
+ !originalUrl.includes('default') &&
|
|
|
+ !originalUrl.includes('via.placeholder')) {
|
|
|
+ // 设置为空字符串，让CSS默认背景显示
|
|
|
+ console.log('图片加载失败，将URL设置为空，显示CSS默认背景')
|
|
|
+ this.$set(this.resources[index], 'avatar', '')
|
|
|
+ } else {
|
|
|
+ console.log('图片加载失败，但URL已经是占位图或空，无需处理')
|
|
|
+ console.log('当前URL:', originalUrl)
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('处理图片错误时发生异常:', e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 图片加载成功处理
|
|
|
+ handleImageLoad(index) {
|
|
|
+ try {
|
|
|
+ if (this.resources && this.resources[index]) {
|
|
|
+ console.log('图片加载成功:', {
|
|
|
+ index: index,
|
|
|
+ resource: this.resources[index]?.name,
|
|
|
+ avatarUrl: this.resources[index]?.avatar
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('处理图片加载成功时发生异常:', e)
|
|
|
}
|
|
|
- } catch (e) {
|
|
|
- console.error('处理图片加载成功时发生异常:', e)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.my-resources {
|
|
|
- min-height: 100vh;
|
|
|
- background: #FFF9F9;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
.my-resources {
|
|
|
min-height: 100vh;
|
|
|
background: #F5F5F5;
|
|
|
@@ -485,14 +449,6 @@ export default {
|
|
|
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 {
|
|
|
display: flex;
|
|
|
@@ -508,11 +464,6 @@ export default {
|
|
|
font-weight: bold;
|
|
|
color: #9C27B0;
|
|
|
}
|
|
|
- .header-title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #9C27B0;
|
|
|
- }
|
|
|
|
|
|
.header-right {
|
|
|
.dropdown-arrow {
|
|
|
@@ -522,589 +473,392 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .header-right {
|
|
|
- .dropdown-icon {
|
|
|
+
|
|
|
+ /* 搜索栏 */
|
|
|
+ .search-bar {
|
|
|
+ padding: 20rpx;
|
|
|
+ background: #F5F5F5;
|
|
|
+
|
|
|
+ .search-input-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ padding: 12rpx 20rpx;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 20rpx 140rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 资源列表 */
|
|
|
+ .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);
|
|
|
+
|
|
|
+ /* 右上角选中图标 */
|
|
|
+ .select-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: #FF4444;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
font-size: 24rpx;
|
|
|
- color: #9C27B0;
|
|
|
+ font-weight: bold;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .resource-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding-right: 50rpx;
|
|
|
+
|
|
|
+ .resource-avatar {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23CCCCCC"><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>');
|
|
|
+ background-size: 60% 60%;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .resource-basic-info {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+
|
|
|
+ .name-gender {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+
|
|
|
+ .resource-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .resource-gender {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-tag-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .status-tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ &.approved {
|
|
|
+ background: #E3F2FD;
|
|
|
+ color: #2196F3;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.pending {
|
|
|
+ background: #FFF3E0;
|
|
|
+ color: #FF9800;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .resource-details {
|
|
|
+ .labels {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10rpx;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 6rpx 14rpx;
|
|
|
+ background: #F3E5F5;
|
|
|
+ color: #9C27B0;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-box {
|
|
|
+ background: #F3E5F5;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 16rpx 20rpx;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .requirement-label {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #7B1FA2;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-content {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #7B1FA2;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-box {
|
|
|
+ background: #F3E5F5;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 16rpx 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .contact-label {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #7B1FA2;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contact-number {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #7B1FA2;
|
|
|
+ font-weight: 500;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .copy-btn {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #9C27B0;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15rpx;
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 14rpx 0;
|
|
|
+ background: #FFEBEE;
|
|
|
+ color: #E91E63;
|
|
|
+ border-radius: 25rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .match-btn {
|
|
|
+ flex: 1.5;
|
|
|
+ padding: 14rpx 0;
|
|
|
+ background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 25rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 优质资源标签 */
|
|
|
+ .quality-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 80rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4rpx;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(156, 39, 176, 0.3);
|
|
|
+ z-index: 5;
|
|
|
+
|
|
|
+ .quality-star {
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quality-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
- /* 搜索栏 */
|
|
|
- .search-bar {
|
|
|
- padding: 20rpx;
|
|
|
- background: #F5F5F5;
|
|
|
- /* 搜索栏 */
|
|
|
- .search-bar {
|
|
|
- padding: 15rpx 20rpx;
|
|
|
- background: #FFF9F9;
|
|
|
-
|
|
|
- .search-input-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 30rpx;
|
|
|
- padding: 12rpx 20rpx;
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
|
|
-
|
|
|
- .search-input-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 25rpx;
|
|
|
- padding: 12rpx 20rpx;
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
-
|
|
|
- .search-icon {
|
|
|
- font-size: 28rpx;
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .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; /* 略小 */
|
|
|
- }
|
|
|
-
|
|
|
- .btn-text {
|
|
|
- font-size: 24rpx; /* 略小 */
|
|
|
- font-weight: bold;
|
|
|
- color: #FF9800;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 资源卡片 */
|
|
|
- .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);
|
|
|
-
|
|
|
- /* 右上角选中图标 */
|
|
|
- .select-icon {
|
|
|
- position: absolute;
|
|
|
- top: 20rpx;
|
|
|
- right: 20rpx;
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: #FF4444;
|
|
|
- color: #FFFFFF;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: bold;
|
|
|
- z-index: 10;
|
|
|
- }
|
|
|
-
|
|
|
- .resource-header {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- padding-right: 50rpx;
|
|
|
- /* 优质资源标签 */
|
|
|
- .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-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-avatar-placeholder {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 50%;
|
|
|
- flex-shrink: 0;
|
|
|
- background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
|
|
|
- }
|
|
|
-
|
|
|
- .resource-avatar {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- flex-shrink: 0;
|
|
|
- background-color: #F5F5F5;
|
|
|
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23CCCCCC"><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>');
|
|
|
- background-size: 60% 60%;
|
|
|
- background-position: center;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
-
|
|
|
- .resource-info {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .resource-basic-info {
|
|
|
- flex: 1;
|
|
|
- min-width: 0;
|
|
|
-
|
|
|
- .name-gender {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10rpx;
|
|
|
- margin-bottom: 12rpx;
|
|
|
-
|
|
|
- .name-gender-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10rpx;
|
|
|
-
|
|
|
- .resource-name {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .resource-name {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .resource-gender {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .status-tag {
|
|
|
- display: inline-block;
|
|
|
- padding: 4rpx 12rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- .status-tag-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .status-tag {
|
|
|
- display: inline-block;
|
|
|
- padding: 4rpx 12rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 500;
|
|
|
-
|
|
|
- &.approved {
|
|
|
- background: #E8F5E8;
|
|
|
- color: #4CAF50;
|
|
|
- }
|
|
|
-
|
|
|
- &.approved {
|
|
|
- background: #E3F2FD;
|
|
|
- color: #2196F3;
|
|
|
- }
|
|
|
-
|
|
|
- &.pending {
|
|
|
- background: #FFF3E0;
|
|
|
- color: #FF9800;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-action {
|
|
|
- .heart-icon {
|
|
|
- font-size: 28rpx;
|
|
|
-
|
|
|
- &.pending {
|
|
|
- background: #FFF3E0;
|
|
|
- color: #FF9800;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 标签 */
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 择偶要求 */
|
|
|
- .requirement-section {
|
|
|
- margin-bottom: 12rpx;
|
|
|
-
|
|
|
- .requirement-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .label {
|
|
|
- display: inline-block;
|
|
|
- padding: 6rpx 14rpx;
|
|
|
- background: #F3E5F5;
|
|
|
- color: #9C27B0;
|
|
|
- border-radius: 15rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .requirement-box {
|
|
|
- background: #F3E5F5;
|
|
|
- border-radius: 12rpx;
|
|
|
- padding: 16rpx 20rpx;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .requirement-label {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #7B1FA2;
|
|
|
- font-weight: 500;
|
|
|
- margin-right: 10rpx;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .requirement-content {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #7B1FA2;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 联系方式 */
|
|
|
- .contact-section {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- gap: 8rpx;
|
|
|
-
|
|
|
- .contact-box {
|
|
|
- background: #F3E5F5;
|
|
|
- border-radius: 12rpx;
|
|
|
- padding: 16rpx 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .contact-label {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .contact-label {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #7B1FA2;
|
|
|
- font-weight: 500;
|
|
|
- margin-right: 10rpx;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .contact-number {
|
|
|
- flex: 1;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #9C27B0;
|
|
|
- }
|
|
|
-
|
|
|
- .contact-number {
|
|
|
- flex: 1;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #7B1FA2;
|
|
|
- font-weight: 500;
|
|
|
- min-width: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .copy-btn {
|
|
|
- font-size: 22rpx;
|
|
|
- color: #9C27B0;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .copy-btn {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #9C27B0;
|
|
|
- font-weight: 600;
|
|
|
- margin-left: 15rpx;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .action-buttons {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- gap: 15rpx;
|
|
|
- /* 底部按钮 */
|
|
|
- .action-buttons {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 12rpx;
|
|
|
-
|
|
|
- .delete-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 14rpx 0;
|
|
|
- background: #FFEBEE;
|
|
|
- color: #E91E63;
|
|
|
- border-radius: 25rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .delete-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- background: #FFEBEE;
|
|
|
- color: #E91E63;
|
|
|
- border-radius: 20rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .match-btn {
|
|
|
- flex: 1.5;
|
|
|
- padding: 14rpx 0;
|
|
|
- background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
- color: #FFFFFF;
|
|
|
- border-radius: 25rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- /* 优质资源标签 */
|
|
|
- .quality-tag {
|
|
|
- position: absolute;
|
|
|
- top: 80rpx;
|
|
|
- right: 20rpx;
|
|
|
- background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: bold;
|
|
|
- padding: 8rpx 16rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4rpx;
|
|
|
- box-shadow: 0 2rpx 8rpx rgba(156, 39, 176, 0.3);
|
|
|
- z-index: 5;
|
|
|
-
|
|
|
- .quality-star {
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .quality-text {
|
|
|
- font-size: 22rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 添加按钮 */
|
|
|
- .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: 100rpx;
|
|
|
- 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: 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,<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>');
|
|
|
- }
|
|
|
-
|
|
|
- &.home.active .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<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>');
|
|
|
- }
|
|
|
-
|
|
|
- &.resources .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><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>');
|
|
|
- }
|
|
|
-
|
|
|
- &.resources.active .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<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>');
|
|
|
- }
|
|
|
-
|
|
|
- &.trophy .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
|
|
|
- }
|
|
|
-
|
|
|
- &.trophy.active .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>');
|
|
|
- }
|
|
|
-
|
|
|
- &.message .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<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>');
|
|
|
- }
|
|
|
-
|
|
|
- &.message.active .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<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>');
|
|
|
- }
|
|
|
-
|
|
|
- &.mine .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<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>');
|
|
|
- }
|
|
|
-
|
|
|
- &.mine.active .tabbar-icon {
|
|
|
- background-image: url('data:image/svg+xml,<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>');
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ /* 添加按钮 */
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .add-button-icon {
|
|
|
+ font-size: 60rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部导航 */
|
|
|
+ .tabbar {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 100rpx;
|
|
|
+ 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: 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>');
|
|
|
+ }
|
|
|
+
|
|
|
+ &.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>');
|
|
|
+ }
|
|
|
+
|
|
|
+ &.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>');
|
|
|
+ }
|
|
|
+
|
|
|
+ &.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>');
|
|
|
+ }
|
|
|
+
|
|
|
+ &.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>');
|
|
|
+ }
|
|
|
+
|
|
|
+ &.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>');
|
|
|
+ }
|
|
|
+
|
|
|
+ &.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>');
|
|
|
+ }
|
|
|
+
|
|
|
+ &.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>');
|
|
|
+ }
|
|
|
+
|
|
|
+ &.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>');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
