333 lines
7.4 KiB
Vue
333 lines
7.4 KiB
Vue
<route lang="json5">
|
|
{
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
navigationBarTitleText: '首页'
|
|
}
|
|
}
|
|
</route>
|
|
<template>
|
|
<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="https://file.hikmall.com/prod/image/4dbe971d6fac465cb4fed956defd678c.png"
|
|
/>
|
|
<text>我的订单</text>
|
|
</view>
|
|
<view class="action-item">
|
|
<image
|
|
class="action-icon"
|
|
src="https://file.hikmall.com/prod/image/116e1ea563474601ac075ac5bb312963.png"
|
|
/>
|
|
<text>发票管理</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<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'
|
|
}
|
|
]
|
|
|
|
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(4, 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.service-grid {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 8px;
|
|
overflow-x: auto; // 允许左右滑动
|
|
|
|
.service-item,
|
|
.tool-item {
|
|
width: 16vw; // 单个item的宽度是屏幕宽度的四分之一
|
|
}
|
|
}
|
|
|
|
.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: row;
|
|
gap: 4px;
|
|
align-items: center;
|
|
//background-color: red;
|
|
|
|
.action-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
text {
|
|
font-size: 12px;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
</style>
|