wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加移动端页面组件和图片资源

Browse Source
This commit is contained in:
wangqiao
2025-09-03 17:06:39 +08:00
parent 7f2edb91e4
commit b1d2378cec
37 changed files with 2426 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages/mobile/channel/index.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="page-channel">
<div class="text">交流频道</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({ layout: 'm' })
</script>
<style scoped>
.page-channel { padding: 16px; }
.text { font-size: 16px; }
</style>

14
pages/mobile/find/index.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="page-find">
<div class="text">发现</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({ layout: 'm' })
</script>
<style scoped>
.page-find { padding: 16px; }
.text { font-size: 16px; }
</style>

158
pages/mobile/gloabal-cad-drawings/index.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<div class="container">
<!-- 设计图列表 -->
<div class="design-list">
<div
class="design-item"
v-for="(item, index) in designList"
:key="index"
>
<div class="design-preview">
<img :src="item.image" alt="preview" />
</div>
<div class="design-info">
<div class="design-title">{{ item.title }}</div>
<div class="design-author">by:{{ item.author }}</div>
<div class="design-stats">
<div class="stat-item">
<span class="iconfont">👁</span>
<span>{{ item.views }}</span>
</div>
<div class="stat-item">
<span class="iconfont">👍</span>
<span>{{ item.likes }}</span>
</div>
<div class="stat-item">
<span class="iconfont">💬</span>
<span>{{ item.comments }}</span>
</div>
</div>
</div>
<div class="design-action">
<button class="view-btn" @click="viewDesign(index)">查看</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const designList = ref([
{ title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
{ title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
{ title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
{ title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
])
function viewDesign(index: number) {
router.push({ path: '/mobile/design-detail', query: { id: String(index) } })
}
onMounted(() => {
const titleFromQuery = (route.query.titleName as string) || '详情'
if (titleFromQuery) {
document.title = decodeURIComponent(titleFromQuery)
}
})
</script>
<style lang="scss">
// 变量定义
$primary-color: #007aff;
$text-color: #333;
$secondary-text: #666;
$light-text: #999;
$bg-color: #fff;
$white: #fff;
$border-color: #eee;
$border-radius: 10rpx;
$mask-bg: rgba(0, 0, 0, 0.5);
.container {
padding: 0;
background-color: $bg-color;
position: relative;
}
.design-list {
padding: 10rpx 20rpx;
.design-item {
display: flex;
margin-bottom: 20rpx;
background-color: $white;
border-radius: $border-radius;
border: 1px solid $border-color;
padding: 20rpx;
position: relative;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
.design-preview {
width: 220rpx;
height: 160rpx;
overflow: hidden;
border: 1px solid $border-color;
image {
width: 100%;
height: 100%;
}
}
.design-info {
flex: 1;
padding: 0 20rpx;
.design-title {
font-size: 27rpx;
margin-bottom: 10rpx;
}
.design-author {
font-size: 25rpx;
color: $light-text;
margin-bottom: 30rpx;
}
}
.design-stats {
display: flex;
.stat-item {
display: flex;
align-items: center;
margin-right: 20rpx;
font-size: 24rpx;
color: $light-text;
.iconfont {
margin-right: 5rpx;
}
}
}
.design-action {
position: absolute;
right: 20rpx;
bottom: 20rpx;
.view-btn {
background-color: $primary-color;
color: $white;
font-size: 26rpx;
padding: 0rpx 25rpx;
border-radius: 5rpx;
}
}
}
}
</style>

230
pages/mobile/index.vue
View File

@ -1,75 +1,197 @@
<template>
<div class="mobile-page">
<h1 class="page-title">移动端页面</h1>
<div class="test-content">
<p>这是一个测试页面，用于验证移动端样式重置是否生效。</p>
<div class="test-box">
<p>测试盒子 - 宽度应该适应屏幕</p>
</div>
<div class="button-group">
<button class="el-button el-button--primary">主要按钮</button>
<button class="el-button el-button--default">默认按钮</button>
<div class="contains content">
<!-- Search Bar -->
<SearchBar />
<!-- Banner Section -->
<div class="banner-section">
<div class="banner-swiper">
<div class="banner-content">
<img src="~/assets/images/banner.png" alt="banner" />
</div>
</div>
</div>
<!-- Category Grid -->
<div class="category-grid">
<!-- First Row -->
<div class="category-row">
<div class="category-item" @click="navigateTo('图纸')">
<div class="category-icon yellow">
<span class="icon">✍️</span>
</div>
<span class="category-text">图纸</span>
</div>
<div class="category-item" @click="navigateTo('文本')">
<div class="category-icon blue">
<span class="icon">📄</span>
</div>
<span class="category-text">文本</span>
</div>
<div class="category-item" @click="navigateTo('模型')">
<div class="category-icon orange">
<span class="icon">📦</span>
</div>
<span class="category-text">模型</span>
</div>
<div class="category-item" @click="navigateTo('community')">
<div class="category-icon green">
<span class="icon">💬</span>
</div>
<span class="category-text">牛人社区</span>
</div>
</div>
<!-- Second Row -->
<div class="category-row">
<div class="category-item" @click="navigateTo('international')">
<div class="category-icon purple">
<span class="icon">🌐</span>
</div>
<span class="category-text">国外专区</span>
</div>
<div class="category-item" @click="navigateTo('channel')">
<div class="category-icon cyan">
<span class="icon">💬</span>
</div>
<span class="category-text">交流频道</span>
</div>
<div class="category-item"></div>
<div class="category-item"></div>
</div>
</div>
</div>
<!-- -->
<div class="bg-white"></div>
<div class="contains content">
<!--最新活动 -->
<ActivityBanner />
</div>
<div class="bg-white"></div>
<div class="contains content">
<!-- 推荐功能 -->
<RecommendBanner />
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'm'
})
// Mobile specific logic can be added here
definePageMeta({ layout: 'm' })
import SearchBar from "~/components/m/home-components/SearchBar.vue";
import ActivityBanner from "~/components/m/home-components/ActivityBanner.vue";
import RecommendBanner from "~/components/m/home-components/RecommendBanner.vue";
import { useRouter } from 'vue-router'
const router = useRouter()
function navigateTo(category: string) {
router.push({ path: '/mobile/gloabal-cad-drawings', query: { titleName: encodeURIComponent(category) } })
}
</script>
<style lang="scss" scoped>
.mobile-page {
padding: 16px;
min-height: 100vh;
background: #f5f5f5;
box-sizing: border-box;
<style scoped lang="scss">
.content {
display: flex;
flex-direction: column;
background-color: #fff;
}
.page-title {
font-size: 20px;
color: #333;
margin-bottom: 20px;
text-align: center;
.banner-section {
margin-top: 20rpx;
border-radius: 20rpx;
overflow: hidden;
height: 300rpx;
}
.test-content {
background: #fff;
padding: 16px;
border-radius: 8px;
margin-bottom: 16px;
p {
margin-bottom: 12px;
line-height: 1.5;
}
}
.test-box {
.banner-swiper {
width: 100%;
height: 80px;
background: #e8f4fd;
border: 1px solid #b3d8ff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin: 16px 0;
p {
margin: 0;
color: #409eff;
font-weight: 500;
height: 100%;
}
.banner-content {
height: 100%;
img {
height: 100%;
}
}
.button-group {
.slogan-main {
font-size: 48rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.slogan-sub {
font-size: 38rpx;
font-weight: bold;
background-color: rgba(109, 200, 255, 0.8);
align-self: flex-start;
padding: 5rpx 20rpx;
border-radius: 5rpx;
}
.banner-graphics {
flex: 1;
position: relative;
}
.category-grid {
margin-top: 40rpx;
}
.category-row {
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
width: 22%;
}
.category-icon {
width: 100rpx;
height: 100rpx;
border-radius: 20rpx;
display: flex;
gap: 12px;
justify-content: center;
margin-top: 20px;
align-items: center;
margin-bottom: 10rpx;
}
.yellow {
background-color: #ffd770;
}
.blue {
background-color: #70a1ff;
}
.orange {
background-color: #ff9f43;
}
.green {
background-color: #7bed9f;
}
.purple {
background-color: #a3a1ff;
}
.cyan {
background-color: #55e6c1;
}
.category-text {
font-size: 24rpx;
color: #333;
}
</style>

245
pages/mobile/message_notice/index.vue Normal file
View File

@ -0,0 +1,245 @@
<template>
<div class="message-notice-container">
<div class="tab-navigation">
<div
v-for="(tab, index) in tabs"
:key="index"
:class="['tab-item', { active: activeTab === index }]"
@click="activeTab = index"
>
<span v-if="index === 0" class="iconfont icon-system"></span>
<span v-else-if="index === 1" class="iconfont icon-transaction"></span>
<span v-else class="iconfont icon-forum"></span>
{{ tab.name }}
</div>
</div>
<div class="message-content">
<template v-if="activeTab === 0">
<div
class="message-item"
v-for="(message, index) in systemMessages"
:key="index"
>
<div class="message-left">
<span class="iconfont icon-speaker"></span>
<span class="dot"></span>
</div>
<div class="message-body">
<div class="message-header">
<div class="message-title text-ellipsis">{{ message.title }}</div>
<div class="message-time">{{ message.time }}</div>
</div>
<div class="message-description">{{ message.content }}</div>
</div>
</div>
</template>
<template v-if="activeTab === 1">
<div class="empty-content">
<div class="notice-text">交易消息和论坛社区互动的图标统一下，样式一样</div>
</div>
</template>
<template v-if="activeTab === 2">
<div class="empty-content">
<div class="notice-text">交易消息和论坛社区互动的图标统一下，样式一样</div>
</div>
</template>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { ref } from 'vue'
const activeTab = ref(0)
const tabs = ref([
{ name: '系统消息', icon: 'icon-system' },
{ name: '交易消息', icon: 'icon-transaction' },
{ name: '论坛社区互动', icon: 'icon-forum' },
])
const systemMessages = ref([
{ title: '图夕夕金币充值有优惠!', content: '图夕夕限时优惠, 微信冲500送50金币, 充200送10金币', time: '2025-03-05 17:00:57' },
{ title: '图夕夕金币充值有优惠!', content: '图夕夕限时优惠, 微信冲500送50金币, 充200送10金币图夕夕限时优惠, 微信冲500送50金币, 充200送10金币', time: '2025-03-05 17:00:57' },
])
const transactionMessages = ref<any[]>([])
const forumMessages = ref<any[]>([])
</script>
<style>
page {
background-color: #f5f7fa;
height: 100%;
}
.message-notice-container {
display: flex;
flex-direction: column;
height: 100%;
}
.tab-navigation {
display: flex;
background-color: #fff;
border-bottom: 1px solid #eee;
}
.tab-item {
flex: 1;
padding: 30rpx 0;
text-align: center;
color: #666;
position: relative;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
}
.tab-item .iconfont {
font-size: 32rpx;
margin-right: 10rpx;
}
.tab-item.active {
color: #4082ff;
font-weight: 500;
}
.tab-item.active::after {
content: "";
position: absolute;
bottom: 0;
left: 25%;
width: 50%;
height: 6rpx;
background-color: #4082ff;
}
.icon-system:before {
content: "🔔";
}
.icon-transaction:before {
content: "💰";
}
.icon-forum:before {
content: "💬";
}
.icon-speaker:before {
content: "📢";
}
.message-content {
flex: 1;
padding: 20rpx;
background-color: #f5f7fa;
}
.message-item {
display: flex;
background-color: #fff;
padding: 30rpx;
margin-bottom: 16rpx;
border-radius: 8rpx;
align-items: flex-start;
border-left: 6rpx solid transparent;
position: relative;
}
.message-left {
position: relative;
margin-right: 20rpx;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.message-left .iconfont {
font-size: 40rpx;
color: #4082ff;
}
.dot {
position: absolute;
top: 0;
right: 0;
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #ff4d4f;
}
.message-body {
flex: 1;
overflow: hidden;
}
.message-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
}
.message-title {
font-weight: bold;
font-size: 28rpx;
color: #333;
flex: 1;
}
.message-time {
color: #999;
font-size: 24rpx;
text-align: right;
flex-shrink: 0;
margin-left: 20rpx;
}
.message-description {
color: #666;
font-size: 26rpx;
line-height: 1.5;
}
.empty-content {
height: 300rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #e6f0ff;
margin-top: 20rpx;
border-radius: 8rpx;
}
.notice-text {
color: #666;
font-size: 28rpx;
}
.page-title {
padding: 20rpx;
text-align: center;
font-size: 28rpx;
background-color: transparent;
color: #666;
border-top: 2rpx solid #eee;
}
.text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

309
pages/mobile/talent-detail/index.vue Normal file
View File

@ -0,0 +1,309 @@
<template>
<view class="talent-detail">
<!-- 个人信息卡片 -->
<view class="profile-card">
<view class="profile-header">
<view class="left-section">
<image
class="avatar"
:src="talentInfo.avatar"
mode="aspectFill"
></image>
<view class="basic-info">
<view class="name-row">
<text class="name">{{ talentInfo.name }}</text>
<view class="tags">
<view
class="tag"
v-for="(tag, index) in talentInfo.tags"
:key="index"
>{{ tag }}</view
>
</view>
</view>
<text class="education">毕业院校：{{ talentInfo.education }}</text>
</view>
</view>
<div class="follow-btn" @click="followTalent">
{{ isFollowed ? "已关注" : "+ 关注" }}
</div>
</view>
<!-- 数据统计 -->
<view class="stats">
<view class="stat-item works">
<text class="stat-number">{{ talentInfo.worksCount }}</text>
<text class="stat-label">作品量</text>
</view>
<!-- 加跟竖线 隔离下 -->
<view class="stat-item-line"></view>
<view class="stat-item fans">
<text class="stat-number">{{ talentInfo.fansCount }}</text>
<text class="stat-label">粉丝量</text>
</view>
</view>
<!-- 个人简介 -->
<view class="section-header">
<image class="crown-icon" src="/static/images/crown.png"></image>
<text class="section-title">个人简介</text>
</view>
<text class="intro-text">{{ talentInfo.introduction }}</text>
</view>
<!-- 选项卡导航 -->
<view class="tab-nav">
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: currentTab === index }"
@click="switchTab(index)"
>
<text>{{ tab }}</text>
</view>
</view>
<!-- 技术证书内容 -->
<view class="tab-content" v-if="currentTab === 0">
<!-- 技术证书列表 图片展示 -->
<TechnicalCertificates />
</view>
<!-- 个人履历内容 -->
<view class="tab-content" v-if="currentTab === 1">
<!-- 个人履历内容 -->
<Certificates :talentInfo="talentInfo" />
</view>
<!-- 作品展示内容 -->
<view class="tab-content" v-if="currentTab === 2">
<!-- 作品展示内容 -->
<Works :talentInfo="talentInfo" />
</view>
</view>
</template>
<script setup lang="ts">
definePageMeta({ layout: 'm' })
import TechnicalCertificates from "~/components/m/detail-components/technicalCertificates.vue";
import Certificates from "~/components/m/detail-components/certificates.vue";
import Works from "~/components/m/detail-components/Works.vue";
import { reactive, ref } from 'vue'
const isFollowed = ref(false)
const currentTab = ref(0)
const tabs = ['技术证书', '个人履历', '作品展示']
const talentInfo = reactive({
id: 1,
name: '王刚',
avatar: '/static/images/avater2.png',
tags: ['五金工具', '电子产品'],
education: '重庆工商大学',
worksCount: 876,
fansCount: 98,
introduction:
'你好！我是专注于工业设计和机械设计领域的专业设计师，擅长进行外观设计、结构设计、板金设计等各类工程设计工作。我拥有丰富的经验，能够为客户提供高质量的设计解决方案，包括PCB外壳设计、框架设计、运动仿真、逆向工程等。此外，我熟练使用Creo、CAD等设计软件，能够进行精准的3D建模、渲染、2D工程图绘制、CAD代画以及三维转二维等工作。',
certificates: [
{ year: '2020年', description: '韩国内基211学府设计的一款月度采样机' },
{ year: '2021年', description: '韩国内基211学府设计的一款月度采样机' },
{ year: '2022年', description: '韩国内基211学府设计的一款月度采样机' },
{ year: '2023年', description: '韩国内基211学府设计的一款月度采样机' },
{ year: '2024年', description: '韩国内基211学府设计的一款月度采样机' },
{ year: '2025年', description: '韩国内基211学府设计的一款月度采样机' },
],
})
function followTalent() {
isFollowed.value = !isFollowed.value
}
function switchTab(index: number) {
currentTab.value = index
}
</script>
<style lang="scss" scoped>
.talent-detail {
min-height: 100vh;
background-color: #fff;
padding: 30rpx 30rpx 0;
background-image: url("@/static/images/talent-detail-bg.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
// 个人信息卡片样式
.profile-card {
background-color: #fff;
border-radius: 12rpx;
padding: 30rpx;
margin-bottom: 20rpx;
border: 1px solid #eee;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
margin-top: 164rpx;
.profile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
.left-section {
display: flex;
align-items: flex-start;
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.basic-info {
display: flex;
flex-direction: column;
.name-row {
display: flex;
align-items: center;
margin-bottom: 10rpx;
.name {
font-size: 36rpx;
font-weight: bold;
margin-right: 20rpx;
}
.tags {
display: flex;
.tag {
font-size: 24rpx;
color: #1a65ff;
background-color: #e6f0ff;
padding: 4rpx 16rpx;
border-radius: 20rpx;
margin-right: 12rpx;
}
}
}
.education {
font-size: 28rpx;
color: #666;
}
}
}
.follow-btn {
width: 89rpx;
height: 44rpx;
border-radius: 7rpx;
border: 1px solid #d7d7d7;
text-align: center;
line-height: 44rpx;
font-size: 21rpx;
color: #0a6fff;
}
}
// 数据统计区域
.stats {
display: flex;
margin-top: 30rpx;
margin-left: 140rpx;
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
.stat-number {
font-size: 40rpx;
font-weight: bold;
color: #333;
line-height: 1.2;
}
.stat-label {
font-size: 28rpx;
color: #999;
margin-top: 4rpx;
}
}
.stat-item-line {
width: 1px;
height: 90rpx;
background-color: #eee;
margin: 0 50rpx;
}
}
.section-header {
display: flex;
align-items: center;
margin-top: 40rpx;
margin-bottom: 20rpx;
width: 100%;
justify-content: center;
height: 56rpx;
background: rgba(26, 101, 255, 0.1);
border-radius: 28rpx;
.crown-icon {
width: 40.97rpx;
height: 35.42rpx;
margin-right: 10rpx;
}
.section-title {
font-size: 29rpx;
font-weight: bold;
color: #333;
}
}
.intro-text {
font-size: 24rpx;
color: #666;
line-height: 1.6;
}
}
// 选项卡导航
.tab-nav {
display: flex;
background-color: #fff;
border-radius: 12rpx 12rpx 0 0;
.tab-item {
padding: 24rpx 0;
margin-right: 60rpx;
position: relative;
font-size: 25rpx;
color: #666;
transition: all 0.3s ease;
&.active {
color: #1a65ff;
&::after {
content: "";
position: absolute;
left: 0;
bottom: 14rpx;
width: 100%;
height: 4rpx;
background-color: #1a65ff;
}
}
}
}
// 选项卡内容
.tab-content {
background-color: #fff;
border-radius: 0 0 12rpx 12rpx;
padding: 20rpx 0rpx;
}
}
</style>

221
pages/mobile/transaction_record/index.vue Normal file
View File

@ -0,0 +1,221 @@
<template>
<div class="transaction-record">
<!-- Balance Card -->
<div class="balance-card">
<div class="balance-title">
<span>我的余额 (元)</span>
<span class="verify-text">🏅 资产保障中</span>
</div>
<div class="balance-amount">{{ balance.toFixed(2) }}</div>
<div class="action-buttons">
<div class="btn-recharge">充值</div>
<div class="btn-withdraw">提现</div>
</div>
</div>
<!-- Transaction Filter -->
<div class="transaction-filter">
<div class="filter-type">
<span>全部</span>
</div>
<div class="filter-date">
<label class="date-picker-trigger">
<span>当前时间: <span style="color:#4080ff">{{ currentMonth }}</span></span>
<input type="month" v-model="selectedMonth" @change="onMonthChange" />
</label>
</div>
</div>
<!-- Transaction List -->
<div class="transaction-list">
<div
v-for="(transaction, index) in transactions"
:key="index"
class="transaction-item"
>
<div class="transaction-info">
<span class="transaction-type">{{ transaction.type }}</span>
<span class="transaction-date">{{ transaction.date }}</span>
</div>
<div
class="transaction-amount"
:class="{ 'amount-positive': transaction.amount > 0 }"
>
<span>{{
transaction.amount > 0
? "+" + transaction.amount
: transaction.amount
}}</span>
<span class="transaction-reference">{{ transaction.reference }}</span>
</div>
</div>
</div>
<!-- Footer -->
<div class="transaction-footer">
<span>当前仅展示本月明细，切换查看更多</span>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { ref, onMounted } from 'vue'
const balance = ref(6357.0)
const selectedMonth = ref('')
const currentMonth = ref('')
const transactions = ref([
{ type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
{ type: '转出到银行卡', date: '2024-03-10 15:38', amount: 3578, reference: '56784' },
{ type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
{ type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
{ type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
{ type: '转出到银行卡', date: '2024-03-10 15:38', amount: -3578, reference: '56784' },
])
function onMonthChange(e: Event) {
const value = (e.target as HTMLInputElement).value // yyyy-mm
if (!value) return
const [y, m] = value.split('-')
currentMonth.value = `${y}.${m}`
}
onMounted(() => {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
currentMonth.value = `${year}.${month}`
selectedMonth.value = `${year}-${month}`
})
</script>
<style>
.transaction-record {
background-color: #f5f5f5;
padding-bottom: 20px;
height: 100%;
}
.balance-card {
background-color: white;
padding: 20px;
margin-bottom: 10px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.balance-title {
display: flex;
justify-content: flex-start;
align-items: center;
color: #666;
font-size: 14px;
margin-bottom: 10px;
}
.verify-text {
color: #4080ff;
font-size: 12px;
border: 1px solid #4080ff;
border-radius: 10px;
padding: 0 5px;
margin-left: 10px;
}
.balance-amount {
font-size: 32px;
font-weight: bold;
margin-bottom: 15px;
}
.action-buttons {
display: flex;
justify-content: flex-start;
}
.btn-recharge,
.btn-withdraw {
border: none;
padding: 8px 60rpx;
border-radius: 5px;
margin-right: 30rpx;
font-size: 28rpx;
}
.btn-recharge {
background-color: #4080ff;
color: white;
}
.btn-withdraw {
background-color: white;
border: 1px solid #ddd;
color: #333;
}
.transaction-filter {
display: flex;
justify-content: space-between;
padding: 15px;
font-size: 14px;
color: #666;
}
.transaction-list {
background-color: white;
}
.transaction-item {
display: flex;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #f0f0f0;
}
.transaction-type {
font-size: 14px;
color: #333;
margin-bottom: 5px;
display: block;
}
.transaction-date {
font-size: 12px;
color: #999;
display: block;
}
.transaction-amount {
font-size: 16px;
font-weight: bold;
color: #333;
text-align: right;
}
.amount-positive {
color: #4caf50;
}
.transaction-reference {
font-size: 12px;
color: #999;
font-weight: normal;
margin-top: 5px;
display: block;
}
.transaction-footer {
text-align: center;
color: #999;
font-size: 12px;
padding: 15px;
background-color: white;
border-top: 1px solid #f0f0f0;
}
.date-picker-trigger {
display: flex;
align-items: center;
}
</style>

345
pages/mobile/user/index.vue Normal file
View File

@ -0,0 +1,345 @@
<template>
<div class="user-container">
<!-- 顶部蓝色背景 -->
<div class="top-bg"></div>
<!-- 用户信息卡片 -->
<div class="user-card">
<!-- 用户信息 -->
<div class="user-info">
<img class="avatar" src="/static/images/avater2.png" />
<div class="login-info">
<div class="login-text">登录/注册</div>
<div class="login-desc">登录注册后享受更多精彩内容</div>
</div>
<!-- 设置图标 -->
<div class="setting-icon">⚙️</div>
</div>
<!-- 数据统计 -->
<div class="data-stats">
<div class="stat-item">
<div class="stat-num">200</div>
<div class="stat-text">金币余额（元）</div>
</div>
<div class="stat-item">
<div class="stat-num">135</div>
<div class="stat-text">今日浏览量</div>
</div>
<div class="stat-item">
<div class="stat-num">370</div>
<div class="stat-text">今日收益（元）</div>
</div>
</div>
</div>
<!-- 资源中心区域 -->
<div class="resource-section">
<div class="section-title">资源中心</div>
<div class="resource-grid">
<div class="resource-item">
<div class="resource-icon blue">
<img
src="@/static/images/my_release.png"
alt=""
srcset=""
class="w-77rpx h-71rpx"
/>
</div>
<span class="resource-text">我的发布</span>
</div>
<div class="resource-item">
<div class="resource-icon blue">
<img
src="@/static/images/my_download.png"
alt=""
srcset=""
class="w-98rpx h-68rpx"
/>
</div>
<span class="resource-text">我的下载</span>
</div>
<div class="resource-item">
<div class="resource-icon blue">
<img
src="@/static/images/my_attention.png"
alt=""
srcset=""
class="w-76rpx h-77rpx"
/>
</div>
<span class="resource-text">我的关注</span>
</div>
<div class="resource-item">
<div class="resource-icon blue">
<img
src="@/static/images/my_collect.png"
alt=""
srcset=""
class="w-64rpx h-73rpx"
/>
</div>
<span class="resource-text">我的收藏</span>
</div>
</div>
</div>
<!-- 功能列表 -->
<div class="function-list">
<!-- 安全中心 -->
<div class="function-item" @click="navigateTo('/mobile/safety')">
<div class="function-left">
<div class="function-icon orange">✅</div>
<span class="function-text">安全中心</span>
</div>
<span>›</span>
</div>
<!-- 消息中心 -->
<div class="function-item" @click="navigateTo('/mobile/message_notice')">
<div class="function-left">
<div class="function-icon blue">🔔</div>
<span class="function-text">消息中心</span>
</div>
<span>›</span>
</div>
<!-- 交易记录 -->
<div
class="function-item"
@click="navigateTo('/mobile/transaction_record')"
>
<div class="function-left">
<div class="function-icon green">🧾</div>
<span class="function-text">交易记录</span>
</div>
<span>›</span>
</div>
<!-- 关于我们 -->
<div class="function-item" @click="navigateTo('/mobile/about')">
<div class="function-left">
<div class="function-icon purple">ℹ️</div>
<span class="function-text">关于我们</span>
</div>
<span>›</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { useRouter } from 'vue-router'
const router = useRouter()
function navigateTo(url: string) {
router.push(url)
}
</script>
<style lang="scss" scoped>
// 颜色变量
$primary-color: #0080ff;
$orange-color: #ff9500;
$green-color: #34c759;
$purple-color: #af52de;
$text-primary: #333;
$text-secondary: #999;
$bg-color: #f7f7f7;
$card-bg: #ffffff;
$border-color: #f5f5f5;
.user-container {
min-height: 100vh;
background-color: $bg-color;
position: relative;
padding-top: 127rpx;
// 顶部蓝色背景
.top-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200rpx;
background-color: $primary-color;
z-index: 0;
}
// 用户信息卡片
.user-card {
position: relative;
margin: 0 20rpx;
padding: 30rpx;
background-color: $card-bg;
border-radius: 16rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
z-index: 1;
.user-info {
display: flex;
align-items: center;
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
margin-right: 20rpx;
background-color: #f0f0f0;
}
.login-info {
flex: 1;
.login-text {
font-size: 34rpx;
font-weight: 500;
color: $text-primary;
margin-bottom: 8rpx;
}
.login-desc {
font-size: 24rpx;
color: $text-secondary;
}
}
.setting-icon {
padding: 10rpx;
}
}
// 数据统计
.data-stats {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
.stat-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
.stat-num {
font-size: 36rpx;
font-weight: 500;
color: $text-primary;
margin-bottom: 10rpx;
}
.stat-text {
font-size: 24rpx;
color: $text-secondary;
}
}
}
}
// 资源中心
.resource-section {
margin: 20rpx;
padding: 30rpx;
background-color: $card-bg;
border-radius: 16rpx;
.section-title {
font-size: 30rpx;
font-weight: 500;
color: $text-primary;
margin-bottom: 30rpx;
}
.resource-grid {
display: flex;
justify-content: space-between;
.resource-item {
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
.resource-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 16rpx;
&.blue {
// background-color: $primary-color;
}
}
.resource-text {
font-size: 28rpx;
color: $text-primary;
}
}
}
}
// 功能列表
.function-list {
margin: 20rpx;
background-color: $card-bg;
border-radius: 16rpx;
overflow: hidden;
.function-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1px solid $border-color;
&:last-child {
border-bottom: none;
}
.function-left {
display: flex;
align-items: center;
.function-icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
&.orange {
background-color: $orange-color;
}
&.blue {
background-color: $primary-color;
}
&.green {
background-color: $green-color;
}
&.purple {
background-color: $purple-color;
}
}
.function-text {
font-size: 30rpx;
color: $text-primary;
}
}
}
}
}
</style>

152
pages/mobile/user_info/index.vue Normal file
View File

@ -0,0 +1,152 @@
<template>
<div class="user-info-container">
<div class="info-item">
<div class="label">头像</div>
<div class="value">
<img :src="userInfo.avatar" alt="User Avatar" class="avatar" />
</div>
</div>
<div class="info-item">
<div class="label">用户名</div>
<div class="value">{{ userInfo.username }}</div>
</div>
<div class="info-item">
<div class="label">真实姓名</div>
<div class="value">
{{ userInfo.realName }}
<span v-if="userInfo.verified" class="verified-badge">已认证</span>
</div>
</div>
<div class="info-item">
<div class="label">手机号</div>
<div class="value">{{ userInfo.phone }}</div>
</div>
<div class="info-item">
<div class="label">邮箱</div>
<div class="value">{{ userInfo.email }}</div>
</div>
<div class="info-item">
<div class="label">城市</div>
<div class="value">{{ userInfo.city }}</div>
</div>
<div class="info-item">
<div class="label">技能标签</div>
<div class="value">
<span v-for="(tag, index) in userInfo.tags" :key="index" class="tag">
#{{ tag }}
</span>
</div>
</div>
<div class="info-item">
<div class="label">技能证书</div>
<div class="value certificates">
<img
v-for="(cert, index) in userInfo.certificates"
:key="index"
:src="cert"
alt="Certificate"
class="certificate-image"
/>
</div>
</div>
<div class="info-item">
<div class="label">个人简介</div>
<div class="value bio">{{ userInfo.bio }}</div>
</div>
</div>
</template>
<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { reactive } from 'vue'
const userInfo = reactive({
avatar: "/static/images/avater2.png",
username: "王刚",
realName: "王刚",
verified: true,
phone: "138******96",
email: "651234754@qq.com",
city: "重庆",
tags: ["五金工具", "电子产品"],
certificates: [
"/static/images/cert1.jpg",
"/static/images/cert2.jpg",
"/static/images/cert3.jpg",
],
bio: "你好！我是专注于工业设计和机械设计领域...",
})
</script>
<style scoped>
.user-info-container {
padding: 20px;
background-color: #f9f9f9;
}
.info-item {
display: flex;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.label {
width: 80px;
color: #666;
font-size: 14px;
}
.value {
flex: 1;
text-align: right;
color: #333;
font-size: 14px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.verified-badge {
background-color: #4080ff;
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
margin-left: 10px;
}
.tag {
margin-left: 8px;
color: #4080ff;
}
.certificates {
display: flex;
justify-content: flex-end;
}
.certificate-image {
width: 60px;
height: 80px;
margin-left: 10px;
object-fit: cover;
}
.bio {
text-align: left;
line-height: 1.5;
}
</style>