feat: 添加移动端页面组件和图片资源
This commit is contained in:
wangqiao
BIN
assets/images/activity1.png
Normal file
BIN
assets/images/activity1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
assets/images/activity2.png
Normal file
BIN
assets/images/activity2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
assets/images/avater2 copy.png
Normal file
BIN
assets/images/avater2 copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
assets/images/banner copy.png
Normal file
BIN
assets/images/banner copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
BIN
assets/images/bg-yy.png
Normal file
BIN
assets/images/bg-yy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
assets/images/crown.png
Normal file
BIN
assets/images/crown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
assets/images/faxian.png
Normal file
BIN
assets/images/faxian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
assets/images/info copy.png
Normal file
BIN
assets/images/info copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
assets/images/info.png
Normal file
BIN
assets/images/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
assets/images/my_attention.png
Normal file
BIN
assets/images/my_attention.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
assets/images/my_collect.png
Normal file
BIN
assets/images/my_collect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
assets/images/my_download.png
Normal file
BIN
assets/images/my_download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
assets/images/my_release.png
Normal file
BIN
assets/images/my_release.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
assets/images/pingdao.png
Normal file
BIN
assets/images/pingdao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
assets/images/shouye.png
Normal file
BIN
assets/images/shouye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/talent-detail-bg.png
Normal file
BIN
assets/images/talent-detail-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
BIN
assets/images/technicalCertificates.png
Normal file
BIN
assets/images/technicalCertificates.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
assets/images/wode.png
Normal file
BIN
assets/images/wode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
181
components/m/RecommendItem/index.vue
Normal file
181
components/m/RecommendItem/index.vue
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<view class="design-list">
|
||||||
|
<view class="design-item" v-for="(item, index) in items" :key="index">
|
||||||
|
<view class="design-preview">
|
||||||
|
<image :src="item.image" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
<view class="design-info">
|
||||||
|
<view class="design-title">{{ item.title }}</view>
|
||||||
|
<view class="design-author">by:{{ item.author }}</view>
|
||||||
|
|
||||||
|
<view class="design-stats">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="iconfont">👁</text>
|
||||||
|
<text>{{ item.views }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="iconfont">👍</text>
|
||||||
|
<text>{{ item.likes }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="iconfont">💬</text>
|
||||||
|
<text>{{ item.comments }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="design-action">
|
||||||
|
<button class="view-btn">查看</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "RecommendItem",
|
||||||
|
props: {
|
||||||
|
currentTab: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "高压细水雾灭火推车描述",
|
||||||
|
author: "赵其",
|
||||||
|
image: "/static/images/activity1.png",
|
||||||
|
views: 128,
|
||||||
|
likes: 16,
|
||||||
|
comments: 35,
|
||||||
|
url: "/pages/drawings/detail?id=1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "高压细水雾灭火推车描述",
|
||||||
|
author: "赵其",
|
||||||
|
image: "/static/images/activity2.png",
|
||||||
|
views: 128,
|
||||||
|
likes: 16,
|
||||||
|
comments: 35,
|
||||||
|
url: "/pages/drawings/detail?id=2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "室内CAD模型设计室内CAD模型设计",
|
||||||
|
author: "张泽",
|
||||||
|
image: "/static/images/activity1.png",
|
||||||
|
views: 95,
|
||||||
|
likes: 12,
|
||||||
|
comments: 28,
|
||||||
|
url: "/pages/models/detail?id=1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "CAD设计规范文档",
|
||||||
|
author: "李华",
|
||||||
|
image: "/static/images/activity2.png",
|
||||||
|
views: 156,
|
||||||
|
likes: 23,
|
||||||
|
comments: 42,
|
||||||
|
url: "/pages/documents/detail?id=1",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
viewDetail(item) {
|
||||||
|
console.log("View detail for:", item.title);
|
||||||
|
uni.navigateTo({
|
||||||
|
url: item.url,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 变量定义
|
||||||
|
$primary-color: #007aff;
|
||||||
|
$text-color: #333;
|
||||||
|
$secondary-text: #666;
|
||||||
|
$light-text: #999;
|
||||||
|
$bg-color: #f0f4f9;
|
||||||
|
$white: #fff;
|
||||||
|
$border-color: #eee;
|
||||||
|
$border-radius: 15rpx;
|
||||||
|
.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: 17rpx 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.design-preview {
|
||||||
|
width: 220rpx;
|
||||||
|
height: 168rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
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: 25rpx;
|
||||||
|
padding: 0rpx 25rpx !important;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
components/m/detail-components/Works.vue
Normal file
16
components/m/detail-components/Works.vue
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div class="works">
|
||||||
|
<RecommendList />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineOptions({ name: 'Works' })
|
||||||
|
import RecommendList from "~/components/m/RecommendItem/index.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.works {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
73
components/m/detail-components/certificates.vue
Normal file
73
components/m/detail-components/certificates.vue
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="cert-item"
|
||||||
|
v-for="(cert, index) in talentInfo.certificates"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="index !== talentInfo.certificates.length - 1"
|
||||||
|
class="border-left"
|
||||||
|
></div>
|
||||||
|
<div class="cert-dot"></div>
|
||||||
|
<div class="cert-info">
|
||||||
|
<span class="cert-year">{{ cert.year }}</span>
|
||||||
|
<span class="cert-desc">{{ cert.description }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineOptions({ name: 'Certificates' })
|
||||||
|
interface Certificate { year: string; description: string }
|
||||||
|
interface TalentInfo { certificates: Certificate[] }
|
||||||
|
defineProps<{ talentInfo: TalentInfo }>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.border-left {
|
||||||
|
width: 1px;
|
||||||
|
height: calc(100%);
|
||||||
|
border-left: 2px dotted #e6f0ff;
|
||||||
|
position: absolute;
|
||||||
|
left: 7rpx;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
// 证书列表
|
||||||
|
.cert-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-dot {
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #1a65ff;
|
||||||
|
// margin-top: 12rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-info {
|
||||||
|
flex: 1;
|
||||||
|
margin-bottom: 11rpx;
|
||||||
|
margin-top: -10rpx;
|
||||||
|
padding-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-year {
|
||||||
|
font-size: 25rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-desc {
|
||||||
|
font-size: 21rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
35
components/m/detail-components/technicalCertificates.vue
Normal file
35
components/m/detail-components/technicalCertificates.vue
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex">
|
||||||
|
<div
|
||||||
|
class="cert-technicalCertificates"
|
||||||
|
v-for="(cert, index) in 10"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="cert-image"
|
||||||
|
:src="`https://picsum.photos/90/90?random=${index}`"
|
||||||
|
alt="certificate"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineOptions({ name: 'TechnicalCertificates' })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 50rpx;
|
||||||
|
}
|
||||||
|
.cert-technicalCertificates {
|
||||||
|
width: 135rpx;
|
||||||
|
height: 191rpx;
|
||||||
|
.cert-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
108
components/m/home-components/ActivityBanner.vue
Normal file
108
components/m/home-components/ActivityBanner.vue
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<div class="activity-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<span class="section-title">最新活动</span>
|
||||||
|
<a href="/mobile/activity/list" class="view-all">
|
||||||
|
<span>查看全部</span>
|
||||||
|
<span class="chevron">›</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="activity-scroll">
|
||||||
|
<div class="activity-container">
|
||||||
|
<div
|
||||||
|
class="activity-card"
|
||||||
|
v-for="(item, index) in activityList"
|
||||||
|
:key="index"
|
||||||
|
@click="goToActivity(item)"
|
||||||
|
:style="{ marginRight: index === activityList.length - 1 ? '40rpx' : '20rpx' }"
|
||||||
|
>
|
||||||
|
<img :src="item.image" class="activity-image" alt="activity" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import activity1 from '~/assets/images/activity1.png'
|
||||||
|
import activity2 from '~/assets/images/activity2.png'
|
||||||
|
import activity3 from '~/assets/images/activity2.png'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const activityList = ref([
|
||||||
|
{ id: 1, title: '积分兑换有好礼', image: activity1, url: '/mobile/activity/detail?id=1' },
|
||||||
|
{ id: 2, title: 'CAD高效学习', image: activity2, url: '/mobile/activity/detail?id=2' },
|
||||||
|
{ id: 3, title: '学习有奖', image: activity3, url: '/mobile/activity/detail?id=3' },
|
||||||
|
])
|
||||||
|
|
||||||
|
function goToActivity(item: { url: string }) {
|
||||||
|
router.push(item.url)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.activity-section {
|
||||||
|
margin: 21.53rpx 0;
|
||||||
|
// padding: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 31rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-all {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.view-all .chevron {
|
||||||
|
margin-left: 4rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-scroll {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding-left: 20rpx; // 左侧padding，与section对齐
|
||||||
|
margin-left: -20rpx; // 抵消父容器的padding
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-container {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 10rpx 0; // 留出阴影空间
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-card {
|
||||||
|
width: 330rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
98
components/m/home-components/RecommendBanner.vue
Normal file
98
components/m/home-components/RecommendBanner.vue
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<div class="recommend-section">
|
||||||
|
<div class="tab-navigation">
|
||||||
|
<div
|
||||||
|
v-for="(tab, index) in tabs"
|
||||||
|
:key="index"
|
||||||
|
class="tab-item"
|
||||||
|
:class="{ active: currentTab === index }"
|
||||||
|
@click="switchTab(index)"
|
||||||
|
>
|
||||||
|
<span>{{ tab.title }}</span>
|
||||||
|
</div>
|
||||||
|
<button class="view-all" @click="viewAll">
|
||||||
|
<span>查看全部</span>
|
||||||
|
<span class="icon-right">›</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 内容区域 -->
|
||||||
|
<recommend-list />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const currentTab = ref(0)
|
||||||
|
const tabs = ref([
|
||||||
|
{ title: '推荐图纸', type: 'drawings' },
|
||||||
|
{ title: '推荐模型', type: 'models' },
|
||||||
|
{ title: '推荐文本', type: 'documents' },
|
||||||
|
])
|
||||||
|
|
||||||
|
function switchTab(index: number) {
|
||||||
|
currentTab.value = index
|
||||||
|
}
|
||||||
|
|
||||||
|
function viewAll() {
|
||||||
|
const type = tabs.value[currentTab.value].type
|
||||||
|
router.push(`/mobile/${type}/list`)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.recommend-section {
|
||||||
|
// padding: 0 20rpx;
|
||||||
|
// margin: 30rpx 0 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-navigation {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
padding: 8rpx 0;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
font-size: 29rpx;
|
||||||
|
color: #333;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #2970ff;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
background-image: url("@/static/images/bg-yy.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0rpx;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-all {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.view-all .icon-right {
|
||||||
|
margin-left: 4rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
64
components/m/home-components/SearchBar.vue
Normal file
64
components/m/home-components/SearchBar.vue
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<div class="search-container">
|
||||||
|
<div class="search-input">
|
||||||
|
<span class="icon">🔍</span>
|
||||||
|
<input
|
||||||
|
v-model="searchValue"
|
||||||
|
type="text"
|
||||||
|
class="input"
|
||||||
|
placeholder="搜一搜"
|
||||||
|
@keyup.enter="onSearch"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button class="search-btn" @click="onSearch">
|
||||||
|
<img src="~/assets/images/info.png" alt="info" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const searchValue = ref('')
|
||||||
|
function onSearch() {
|
||||||
|
console.log('Search for:', searchValue.value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.search-container {
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.search-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #efeff1;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
padding: 0 22.11rpx;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.search-input .icon { margin-right: 8px; }
|
||||||
|
.search-input .input {
|
||||||
|
flex: 1;
|
||||||
|
height: 64rpx;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.search-btn {
|
||||||
|
margin-left: 19.44rpx;
|
||||||
|
width: 43.75rpx;
|
||||||
|
height: 43.75rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.search-btn img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
201
components/m/nav-bar/index.vue
Normal file
201
components/m/nav-bar/index.vue
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<view class="nav-bar">
|
||||||
|
<view class="nav-item active">全部</view>
|
||||||
|
<view class="nav-item">机械设备</view>
|
||||||
|
<view class="nav-item">零部件模型</view>
|
||||||
|
<view class="nav-item">交通运输</view>
|
||||||
|
<view class="nav-item">电子产品</view>
|
||||||
|
<view class="expand-btn" @tap="toggleCategoryMenu">
|
||||||
|
<text class="expand-icon">≡</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 全部分类浮窗 -->
|
||||||
|
<view
|
||||||
|
class="category-popup"
|
||||||
|
v-if="showCategoryMenu"
|
||||||
|
@tap.stop="closeCategoryMenu"
|
||||||
|
>
|
||||||
|
<view class="popup-content" @tap.stop>
|
||||||
|
<view class="category-list">
|
||||||
|
<view
|
||||||
|
:key="index"
|
||||||
|
v-for="(section, index) in categoryList"
|
||||||
|
class="category-item"
|
||||||
|
@tap="selectCategory(section)"
|
||||||
|
>
|
||||||
|
{{ section.name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 筛选选项 -->
|
||||||
|
<view class="filter-bar">
|
||||||
|
<view class="filter-item"> 软件分类 <text class="icon-down">∨</text> </view>
|
||||||
|
<view class="filter-item"> 图纸类型 <text class="icon-down">∨</text> </view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showCategoryMenu: false,
|
||||||
|
categoryList: [
|
||||||
|
{ name: "机械设备", active: false },
|
||||||
|
{ name: "零部件模型", active: false },
|
||||||
|
{ name: "交通运输", active: false },
|
||||||
|
{ name: "电子产品", active: false },
|
||||||
|
{ name: "机械设备", active: false },
|
||||||
|
{ name: "零部件模型", active: false },
|
||||||
|
{ name: "交通运输", active: false },
|
||||||
|
{ name: "电子产品", active: false },
|
||||||
|
{ name: "机械设备", active: false },
|
||||||
|
{ name: "零部件模型", active: false },
|
||||||
|
{ name: "交通运输", active: false },
|
||||||
|
{ name: "电子产品", active: false },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleCategoryMenu() {
|
||||||
|
this.showCategoryMenu = !this.showCategoryMenu;
|
||||||
|
},
|
||||||
|
closeCategoryMenu() {
|
||||||
|
this.showCategoryMenu = false;
|
||||||
|
},
|
||||||
|
selectCategory(section) {
|
||||||
|
// 演示用：显示toast提示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
console.log(options);
|
||||||
|
// 监听点击事件，点击页面空白处关闭菜单
|
||||||
|
uni.$on("page-click", () => {
|
||||||
|
if (this.showCategoryMenu) {
|
||||||
|
this.closeCategoryMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onUnload() {
|
||||||
|
// 移除事件监听
|
||||||
|
uni.$off("page-click");
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped 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);
|
||||||
|
.nav-bar {
|
||||||
|
display: flex;
|
||||||
|
background-color: $white;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
position: relative;
|
||||||
|
padding-right: 60rpx;
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 25rpx;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $primary-color;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.expand-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.expand-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分类浮窗样式
|
||||||
|
.category-popup {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: $mask-bg;
|
||||||
|
z-index: 999;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.popup-content {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 80vh;
|
||||||
|
background-color: $white;
|
||||||
|
animation: slideDown 0.3s ease;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.category-list {
|
||||||
|
padding: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.category-item {
|
||||||
|
padding: 8rpx 12.94rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-right: 3%;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 25rpx;
|
||||||
|
background-color: $bg-color;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 滑入动画
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
margin-right: 30rpx;
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: $secondary-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-down {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -11,7 +11,7 @@
|
|||||||
.m {
|
.m {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #f5f5f5;
|
background-color: #f8f8f8;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -23,6 +23,7 @@
|
|||||||
min-width: unset !important;
|
min-width: unset !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
|
background-color: #f8f8f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 重置 #__nuxt 容器的样式 */
|
/* 重置 #__nuxt 容器的样式 */
|
||||||
|
|||||||
@ -12,7 +12,7 @@ export default defineNuxtConfig({
|
|||||||
debug: process.env.NODE_ENV === 'development', // 开启详细调试日志
|
debug: process.env.NODE_ENV === 'development', // 开启详细调试日志
|
||||||
|
|
||||||
ssr: true,
|
ssr: true,
|
||||||
modules: ['@unocss/nuxt', '@pinia/nuxt', '@element-plus/nuxt', 'pinia-plugin-persistedstate/nuxt'],
|
modules: ['@unocss/nuxt', '@pinia/nuxt', '@element-plus/nuxt', 'pinia-plugin-persistedstate/nuxt','@vant/nuxt'],
|
||||||
unocss: {
|
unocss: {
|
||||||
nuxtLayers: true,
|
nuxtLayers: true,
|
||||||
},
|
},
|
||||||
@ -30,6 +30,19 @@ export default defineNuxtConfig({
|
|||||||
},
|
},
|
||||||
postcss: {
|
postcss: {
|
||||||
plugins: [
|
plugins: [
|
||||||
|
// 将 rpx 单位仅在移动端样式中转换为 px（在 px->vw 之前）
|
||||||
|
{
|
||||||
|
postcssPlugin: 'rpx-to-px-mobile-only',
|
||||||
|
Declaration(decl) {
|
||||||
|
const file = decl.source && decl.source.input && decl.source.input.file
|
||||||
|
if (!file) return
|
||||||
|
const normalized = file.replace(/\\/g, '/');
|
||||||
|
if (!/\/pages\/mobile\//.test(normalized)) return
|
||||||
|
if (typeof decl.value === 'string' && decl.value.includes('rpx')) {
|
||||||
|
decl.value = decl.value.replace(/(-?\d*\.?\d+)rpx/g, (_, n) => `${n}px`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
postcsspxtoviewport({
|
postcsspxtoviewport({
|
||||||
unitToConvert: 'px',
|
unitToConvert: 'px',
|
||||||
viewportWidth: 750,
|
viewportWidth: 750,
|
||||||
|
|||||||
14
pages/mobile/channel/index.vue
Normal file
14
pages/mobile/channel/index.vue
Normal 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
14
pages/mobile/find/index.vue
Normal 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
158
pages/mobile/gloabal-cad-drawings/index.vue
Normal 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>
|
||||||
@ -1,75 +1,197 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mobile-page">
|
<div class="contains content">
|
||||||
<h1 class="page-title">移动端页面</h1>
|
<!-- Search Bar -->
|
||||||
<div class="test-content">
|
<SearchBar />
|
||||||
<p>这是一个测试页面，用于验证移动端样式重置是否生效。</p>
|
|
||||||
<div class="test-box">
|
<!-- Banner Section -->
|
||||||
<p>测试盒子 - 宽度应该适应屏幕</p>
|
<div class="banner-section">
|
||||||
</div>
|
<div class="banner-swiper">
|
||||||
<div class="button-group">
|
<div class="banner-content">
|
||||||
<button class="el-button el-button--primary">主要按钮</button>
|
<img src="~/assets/images/banner.png" alt="banner" />
|
||||||
<button class="el-button el-button--default">默认按钮</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
definePageMeta({
|
definePageMeta({ layout: 'm' })
|
||||||
layout: 'm'
|
import SearchBar from "~/components/m/home-components/SearchBar.vue";
|
||||||
})
|
import ActivityBanner from "~/components/m/home-components/ActivityBanner.vue";
|
||||||
// Mobile specific logic can be added here
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style scoped lang="scss">
|
||||||
.mobile-page {
|
.content {
|
||||||
padding: 16px;
|
display: flex;
|
||||||
min-height: 100vh;
|
flex-direction: column;
|
||||||
background: #f5f5f5;
|
background-color: #fff;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.banner-section {
|
||||||
font-size: 20px;
|
margin-top: 20rpx;
|
||||||
color: #333;
|
border-radius: 20rpx;
|
||||||
margin-bottom: 20px;
|
overflow: hidden;
|
||||||
text-align: center;
|
height: 300rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test-content {
|
.banner-swiper {
|
||||||
background: #fff;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-box {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80px;
|
height: 100%;
|
||||||
background: #e8f4fd;
|
}
|
||||||
border: 1px solid #b3d8ff;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 16px 0;
|
|
||||||
|
|
||||||
p {
|
.banner-content {
|
||||||
margin: 0;
|
height: 100%;
|
||||||
color: #409eff;
|
img {
|
||||||
font-weight: 500;
|
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;
|
display: flex;
|
||||||
gap: 12px;
|
|
||||||
justify-content: center;
|
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>
|
</style>
|
||||||
|
|||||||
245
pages/mobile/message_notice/index.vue
Normal file
245
pages/mobile/message_notice/index.vue
Normal 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
309
pages/mobile/talent-detail/index.vue
Normal 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
221
pages/mobile/transaction_record/index.vue
Normal 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
345
pages/mobile/user/index.vue
Normal 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
152
pages/mobile/user_info/index.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user