fix: 完成我的模块UI
This commit is contained in:
魏少阳
parent
fa98742c39
commit
adc087ebfe
@ -50,6 +50,14 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"pages": [
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "pages/mine/mine",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "首页"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/home/home",
|
"path": "pages/home/home",
|
||||||
"type": "home",
|
"type": "home",
|
||||||
@ -163,7 +171,19 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/info-publish/basic-info",
|
"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",
|
"path": "pages/info-publish/info-publish",
|
||||||
@ -194,10 +214,6 @@
|
|||||||
},
|
},
|
||||||
"needLogin": false
|
"needLogin": false
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/mine/mine",
|
|
||||||
"type": "page"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/notification/notification",
|
"path": "pages/notification/notification",
|
||||||
"type": "page"
|
"type": "page"
|
||||||
@ -223,6 +239,14 @@
|
|||||||
"navigationStyle": "custom"
|
"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",
|
"path": "pages/attendance/attendance-add-group/attendance-staff",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
|
|||||||
@ -1,7 +1,314 @@
|
|||||||
|
<route lang="json5" type="home">
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom',
|
||||||
|
navigationBarTitleText: '首页'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
<template>
|
<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>
|
</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
|
// Generated by vite-plugin-uni-pages
|
||||||
|
|
||||||
interface NavigateToOptions {
|
interface NavigateToOptions {
|
||||||
url: "/pages/home/home" |
|
url: "/pages/mine/mine" |
|
||||||
|
"/pages/home/home" |
|
||||||
"/pages/application-list/application-list" |
|
"/pages/application-list/application-list" |
|
||||||
"/pages/approval/approval" |
|
"/pages/approval/approval" |
|
||||||
"/pages/attendance/allowed-time" |
|
"/pages/attendance/allowed-time" |
|
||||||
@ -17,15 +18,18 @@ interface NavigateToOptions {
|
|||||||
"/pages/attendance/issue-record" |
|
"/pages/attendance/issue-record" |
|
||||||
"/pages/code/code" |
|
"/pages/code/code" |
|
||||||
"/pages/get-code/get-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/info-publish" |
|
||||||
"/pages/info-publish/notice-details" |
|
"/pages/info-publish/notice-details" |
|
||||||
"/pages/info-publish/notice" |
|
"/pages/info-publish/notice-manage" |
|
||||||
"/pages/login/login" |
|
"/pages/login/login" |
|
||||||
"/pages/mine/mine" |
|
|
||||||
"/pages/notification/notification" |
|
"/pages/notification/notification" |
|
||||||
"/pages/reset-password/reset-password" |
|
"/pages/reset-password/reset-password" |
|
||||||
"/pages/workbench/workbench" |
|
"/pages/workbench/workbench" |
|
||||||
"/pages/attendance/attendance-add-group/attendance-add-group" |
|
"/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-staff" |
|
||||||
"/pages/attendance/attendance-add-group/attendance-time" |
|
"/pages/attendance/attendance-add-group/attendance-time" |
|
||||||
"/pages/attendance/attendance-add-group/outside-rules" |
|
"/pages/attendance/attendance-add-group/outside-rules" |
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user