- ![]()
-
+
+
+
+
+
+ ![项目封面]()
+
-
-
-
-
- {{ project.category }}
-
{{ project.title }}
-
- {{ tag }}
+
-
+
+
+ {{ project.category }}
+
+
+
+ {{ project.title }}
+ +
+
+ {{ tag }}
+
+
-
+
+
+ 作者：{{ project.author }}
-{{ project.price }}
+
+
+
-
-
-
\ No newline at end of file
+
+:deep(.swiper-button-next:hover),
+:deep(.swiper-button-prev:hover) {
+ background-color: white;
+ color: #f43f5e;
+ transform: scale(1.05);
+}
+
+:deep(.swiper-button-next::after),
+:deep(.swiper-button-prev::after) {
+ font-size: 1.25rem;
+ font-weight: bold;
+}
+
+:deep(.swiper-pagination-bullet) {
+ width: 10px;
+ height: 10px;
+ background-color: rgba(255, 255, 255, 0.5);
+ transition: all 0.3s ease;
+}
+
+:deep(.swiper-pagination-bullet-active) {
+ background-color: #f43f5e;
+ width: 24px;
+ border-radius: 5px;
+}
+
+/* 添加轻奢风格的渐变背景和阴影效果 */
+.bg-gradient-luxury {
+ background: linear-gradient(135deg, #f6f8fb 0%, #f0f4f8 100%);
+}
+
+/* 暗色模式下的轻奢风格 */
+@media (prefers-color-scheme: dark) {
+ .bg-gradient-luxury {
+ background: linear-gradient(135deg, #1a1d23 0%, #111827 100%);
+ }
+}
+
diff --git a/src/views/frontend/Personal.vue b/src/views/frontend/Personal.vue
index 6994220..af26590 100644
--- a/src/views/frontend/Personal.vue
+++ b/src/views/frontend/Personal.vue
@@ -7,6 +7,19 @@ import 'aos/dist/aos.css'
// Initialize userStore outside of userData to avoid conditional hook call
const userStore = useUserStore()
+// Initialize userData with default values
+const userData = ref({
+ username: '张三',
+ avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
+ createdAt: '2023-01-15',
+ lastLogin: '2023-06-20',
+ email: 'user@example.com',
+ phone: '138****1234',
+ role: '企业客户',
+ projects: 5,
+ favorites: 12
+})
+
onMounted(() => {
AOS.init({
duration: 1200,
@@ -14,19 +27,14 @@ onMounted(() => {
easing: 'ease-out-cubic',
once: false
})
-})
-// 模拟用户数据
-const userData = ref({
- username: userStore.user?.username || '张三',
- avatar: userStore.user?.avatar || 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
- createdAt: userStore.user?.createdAt || '2023-01-15',
- lastLogin: userStore.user?.lastLogin || '2023-06-20',
- email: 'user@example.com',
- phone: '138****1234',
- role: '企业客户',
- projects: 5,
- favorites: 12
+ // Update userData from userStore after component is mounted
+ if (userStore.user) {
+ userData.value.username = userStore.user.username || '张三'
+ userData.value.avatar = userStore.user.avatar || 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
+ userData.value.createdAt = userStore.user.createdAt || '2023-01-15'
+ userData.value.lastLogin = userStore.user.lastLogin || '2023-06-20'
+ }
})
const userStats = [
diff --git a/src/views/frontend/Projects.vue b/src/views/frontend/Projects.vue
index 270f747..b4cde84 100644
--- a/src/views/frontend/Projects.vue
+++ b/src/views/frontend/Projects.vue
@@ -1,98 +1,256 @@
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + 项目描述 +
+{{ project.description }}
+
+
+
+ + + + + 核心功能 +
+-
+
-
+ + ++ {{ feature }} +
+
+
+ + + + + 技术栈 +
+-
+
-
+ + ++ {{ tech }} +
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
- 立即咨询
+
+
+
-
-
-
+
+
+
+
+ 价格
+{{ project.price }}
+
+
+
+ 开发团队
+{{ project.author }}
+
+
+
+
+
+
+
+
+ 扫码添加客服
+
+ ![微信二维码]()
+
+
-
+
-
-
- ![]()
-
-
-
-
-
-
-
-
-
-
+
+
项目描述
-{{ project.description }}
- -技术栈
--
-
- {{ tech }} -
+ + 相关项目 + + +
+ +
+
-
-
-
+
+ ![]()
+
+
+
+
+
+ + {{ related.title }} +
+ +
+
+ {{ tag }}
+
+
+
+
+
+ {{ related.price }}
+ +
-
-
-
- ![]()
-
- 扫描二维码添加微信咨询
-
-
-
-
-
-
+
+
+
+
+
-
- + + 项目展示 + + +
++ 探索我们的精选项目，从Web应用到移动端解决方案，满足您的各种数字化需求 +
+
-
-
- ![项目封面]()
-
-
-
-
-
\ No newline at end of file
+
+
+
{{ project.title }}
-
-
- {{ tag }}
-
-
-
-
- {{ project.category }}
- ¥{{ project.price }}
-
-
-
- {{ project.author }}
- {{ new Date(project.createdAt).toLocaleDateString() }}
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ {{ project.category }}
+
+
+
+
+
+
+ {{ tag }}
+
+
+
+ + {{ project.title }} +
+ ++ {{ project.description }} +
+ +
+
+
+
+
+
+ {{ formatPrice(project.price) }}
+{{ formatDate(project.createdAt) }}
+
+
+