fix: 完成我的模块UI
This commit is contained in:
魏少阳
parent
fa98742c39
commit
adc087ebfe
@ -50,6 +50,14 @@
|
||||
]
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/home/home",
|
||||
"type": "home",
|
||||
@ -163,7 +171,19 @@
|
||||
},
|
||||
{
|
||||
"path": "pages/info-publish/basic-info",
|
||||
"type": "page"
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/info-publish/drafts-list",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/info-publish/info-publish",
|
||||
@ -194,10 +214,6 @@
|
||||
},
|
||||
"needLogin": false
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"type": "page"
|
||||
},
|
||||
{
|
||||
"path": "pages/notification/notification",
|
||||
"type": "page"
|
||||
@ -223,6 +239,14 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/attendance/attendance-add-group/attendance-device",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/attendance/attendance-add-group/attendance-staff",
|
||||
"type": "page",
|
||||
@ -257,4 +281,4 @@
|
||||
}
|
||||
],
|
||||
"subPackages": []
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,314 @@
|
||||
<route lang="json5" type="home">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '首页'
|
||||
}
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view></view>
|
||||
<view class="mine-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="header">
|
||||
<text class="title">我的</text>
|
||||
<view class="header-right">
|
||||
<image class="icon" src="/static/images/icon_scan_code.png" mode="aspectFit" />
|
||||
<image class="icon" src="/static/images/icon_nav_more.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-info">
|
||||
<view class="avatar-section">
|
||||
<image class="avatar" src="/static/images/default-avatar.png" />
|
||||
<view class="user-detail">
|
||||
<text class="username">未登录</text>
|
||||
<text class="user-type">游客模式 ></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="team-entry">
|
||||
<image
|
||||
class="team-icon"
|
||||
src="https://file.hikmall.com/prod/image/3e56cfb5cfae4bd285d6f55e51e1ce23.png"
|
||||
/>
|
||||
<text>我的团队</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 推荐服务 -->
|
||||
<view class="section">
|
||||
<text class="section-title">推荐服务</text>
|
||||
<view class="service-grid">
|
||||
<view class="service-item" v-for="(item, index) in recommendServices" :key="index">
|
||||
<image class="service-icon" :src="item.icon" />
|
||||
<text class="service-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 常用工具 -->
|
||||
<view class="section">
|
||||
<text class="section-title">常用工具</text>
|
||||
<view class="tools-grid">
|
||||
<view class="tool-item" v-for="(item, index) in commonTools" :key="index">
|
||||
<image class="tool-icon" :src="item.icon" />
|
||||
<text class="tool-name">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 帮助中心和分享区域 -->
|
||||
<view class="list-section">
|
||||
<view class="list-item">
|
||||
<text>帮助中心</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<text>分享海康互联</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<view class="bottom-actions">
|
||||
<view class="action-item">
|
||||
<image class="action-icon" src="/static/icons/order.png" />
|
||||
<text>我的订单</text>
|
||||
</view>
|
||||
<view class="action-item">
|
||||
<image class="action-icon" src="/static/icons/invoice.png" />
|
||||
<text>发票管理</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
const recommendServices = [
|
||||
{
|
||||
name: '流量充值',
|
||||
icon: 'https://file.hikmall.com/prod/image/635392a7f5e04e75bb657b6cc6e2abc8.png'
|
||||
},
|
||||
{
|
||||
name: 'VIP服务',
|
||||
icon: 'https://file.hikmall.com/prod/image/d1d07b3125f841848c3c3eb94509b2ae.png'
|
||||
},
|
||||
{
|
||||
name: '电脑客户端',
|
||||
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png'
|
||||
},
|
||||
{
|
||||
name: '智能算法',
|
||||
icon: 'https://file.hikmall.com/prod/image/701d5a7031fa4b4290838c4562f99a0b.png'
|
||||
},
|
||||
{
|
||||
name: '电话',
|
||||
icon: 'https://file.hikmall.com/prod/image/771a717eb8d74f5bba71db68c9605a0f.png'
|
||||
}
|
||||
]
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
const commonTools = [
|
||||
{
|
||||
name: '分享管理',
|
||||
icon: 'https://file.hikmall.com/prod/image/9752516f054342d3ac310a0fdb32b654.png'
|
||||
},
|
||||
{
|
||||
name: '本地设备调试',
|
||||
icon: 'https://file.hikmall.com/prod/image/4dbe971d6fac465cb4fed956defd678c.png'
|
||||
},
|
||||
{
|
||||
name: '设备校时',
|
||||
icon: 'https://file.hikmall.com/prod/image/624a69276df1480088661e20cbc0e189.png'
|
||||
},
|
||||
{
|
||||
name: '密码恢复',
|
||||
icon: 'https://file.hikmall.com/prod/image/9e2b6e95c2904540a9a3dc675d25cc13.png'
|
||||
},
|
||||
{
|
||||
name: '局域网预览',
|
||||
icon: 'https://file.hikmall.com/prod/image/6cea7ba6b3b34464998bb501a609f3a9.png'
|
||||
},
|
||||
{
|
||||
name: 'IP扫描',
|
||||
icon: 'https://file.hikmall.com/prod/image/60c64c6c80a9429fa8d084506cd2f021.png'
|
||||
},
|
||||
{
|
||||
name: '我的相册',
|
||||
icon: 'https://file.hikmall.com/prod/image/116e1ea563474601ac075ac5bb312963.png'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mine-container {
|
||||
min-height: 100vh;
|
||||
padding: 0 16px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 44px 0 20px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: brightness(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
//background-color: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.user-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.username {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user-type {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-entry {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 2px 4px;
|
||||
font-size: 12px;
|
||||
color: #2b5cff;
|
||||
background-color: #ffffff; // 添加背景色
|
||||
border-radius: 5px;
|
||||
|
||||
.team-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.service-grid,
|
||||
.tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
.service-item,
|
||||
.tool-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.service-icon,
|
||||
.tool-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.service-name,
|
||||
.tool-name {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-section {
|
||||
margin-bottom: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: space-around;
|
||||
padding: 16px;
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
.action-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
10
src/types/uni-pages.d.ts
vendored
10
src/types/uni-pages.d.ts
vendored
@ -4,7 +4,8 @@
|
||||
// Generated by vite-plugin-uni-pages
|
||||
|
||||
interface NavigateToOptions {
|
||||
url: "/pages/home/home" |
|
||||
url: "/pages/mine/mine" |
|
||||
"/pages/home/home" |
|
||||
"/pages/application-list/application-list" |
|
||||
"/pages/approval/approval" |
|
||||
"/pages/attendance/allowed-time" |
|
||||
@ -17,15 +18,18 @@ interface NavigateToOptions {
|
||||
"/pages/attendance/issue-record" |
|
||||
"/pages/code/code" |
|
||||
"/pages/get-code/get-code" |
|
||||
"/pages/info-publish/announce-notice" |
|
||||
"/pages/info-publish/basic-info" |
|
||||
"/pages/info-publish/drafts-list" |
|
||||
"/pages/info-publish/info-publish" |
|
||||
"/pages/info-publish/notice-details" |
|
||||
"/pages/info-publish/notice" |
|
||||
"/pages/info-publish/notice-manage" |
|
||||
"/pages/login/login" |
|
||||
"/pages/mine/mine" |
|
||||
"/pages/notification/notification" |
|
||||
"/pages/reset-password/reset-password" |
|
||||
"/pages/workbench/workbench" |
|
||||
"/pages/attendance/attendance-add-group/attendance-add-group" |
|
||||
"/pages/attendance/attendance-add-group/attendance-device" |
|
||||
"/pages/attendance/attendance-add-group/attendance-staff" |
|
||||
"/pages/attendance/attendance-add-group/attendance-time" |
|
||||
"/pages/attendance/attendance-add-group/outside-rules" |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user