<template> <view style="background-color: #2c66a9; width: 100%; height: 5vh" :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }"> <!-- 自定义导航栏 --> <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar"> <view class="van-nav-bar__content"> <view class="page-icon" @click="gotoBack"> <uni-icons color="#fff" type="back" size="26"></uni-icons> <view>返回</view> </view> <view class="page-navbar">业务中心</view> </view> </view> <!-- 搜索 --> <view class="search"> <uni-icons type="search" color="#959595" size="20" style="transform: translateY(0.05rem)"></uni-icons> <view>搜索</view> </view> <!-- 搜索标签 --> <view class="tag"> <view v-for="(item, index) in tags" class="tag-box" :key="index">{{ item.text }}</view> </view> <!-- 留灰 --> <view style="height: 0.5rem; width: 100%; background-color: #f5f4f9; margin-top: 0.4rem"></view> <!-- 标题 --> <view class="headline" v-for="(item, index) in functionList" :key="index"> <uni-section class="mb-10" titleColor="red" :title="item.texe" type="line"></uni-section> <view class="headline-box"> <view class="card" v-for="(item, index) in item.content" style="width: 4rem"> <view class="icon"> <!-- <uni-icons type="image-filled" size="30" color="#3c9bff"></uni-icons> --> <image :src="item.icon" style="width: 2.5rem; height: 2.5rem"></image> </view> <view class="text" :style="{ width: item.txt.length == 8 || item.txt.length == 7 || item.txt.length == 6 ? '3.6rem' : '', transform: item.txt.length == 8 || item.txt.length == 7 || item.txt.length == 6 ? 'translateX(4.5px)' : '' }" > {{ item.txt }} </view> </view> </view> </view> </view> </template> <script setup> import { ref } from 'vue'; const { safeAreaInsets } = uni.getSystemInfoSync(); const tags = ref([ { text: '违法', id: 0 }, { text: '驾考', id: 1 }, { text: '年检', id: 2 }, { text: '事故', id: 3 }, { text: '挪车', id: 4 }, { text: '选号牌', id: 5 }, { text: '二手车', id: 6 }, { text: '补换牌', id: 7 }, { text: '补换证', id: 8 }, { text: '租赁', id: 9 } ]); const functionList = ref([ { texe: '机动车业务', uid: 0, content: [ { txt: '新车注册登记', icon: '../../../static/yewuzhongxin/1/1.png', id: 0 }, { txt: '新车选号', icon: '../../../static/yewuzhongxin/1/2.png', id: 1 }, { txt: '在用车选号', icon: '../../../static/yewuzhongxin/1/3.png', id: 2 }, { txt: '号牌号段公布', icon: '../../../static/yewuzhongxin/1/4.png', id: 3 }, { txt: '备案非本人机动车', icon: '../../../static/yewuzhongxin/1/5.png', id: 4 }, { txt: '机动车转籍申请', icon: '../../../static/yewuzhongxin/1/5.png', id: 5 }, { txt: '异常选号资料修改', icon: '../../../static/yewuzhongxin/1/7.png', id: 6 }, { txt: '申请新车临时号牌', icon: '../../../static/yewuzhongxin/1/8.png', id: 7 }, { txt: '城市货车通行码申领', icon: '../../../static/yewuzhongxin/1/9.png', id: 8 } ] }, { texe: '驾驶证业务', uid: 1, content: [ { txt: '考试预约', icon: '../../../static/yewuzhongxin/2/1.png', id: 0 }, { txt: '取消考试预约', icon: '../../../static/yewuzhongxin/2/2.png', id: 1 }, { txt: '考试信息公布', icon: '../../../static/yewuzhongxin/2/3.png', id: 2 }, { txt: '考试费缴纳', icon: '../../../static/yewuzhongxin/2/4.png', id: 3 }, { txt: '初学增驾工考试费缴纳', icon: '../../../static/yewuzhongxin/2/5.png', id: 4 }, { txt: '电子学习驾驶证明', icon: '../../../static/yewuzhongxin/2/6.png', id: 5 } ] }, { texe: '违法处理业务', uid: 2, content: [ { txt: '违法处理', icon: '../../../static/yewuzhongxin/3/1.png', id: 0 }, { txt: '罚款缴纳', icon: '../../../static/yewuzhongxin/3/2.png', id: 1 } ] }, { texe: '事故处理业务', uid: 3, content: [ { txt: '事故快处', icon: '../../../static/yewuzhongxin/4/1.png', id: 0 }, { txt: '事故处理进度和结果', icon: '../../../static/yewuzhongxin/4/2.png', id: 1 }, { txt: '事故证据材料查询', icon: '../../../static/yewuzhongxin/4/3.png', id: 2 }, { txt: '事故快处模拟', icon: '../../../static/yewuzhongxin/4/4.png', id: 3 }, { txt: '事故视频快处', icon: '../../../static/yewuzhongxin/4/5.png', id: 4 } ] }, { texe: '学习教育业务', uid: 4, content: [ { txt: '满分学习考试', icon: '../../../static/yewuzhongxin/5/4.png', id: 0 } ] }, { texe: '便民服务', uid: 5, content: [ { txt: '一键挪车', icon: '../../../static/yewuzhongxin/6/1.png', id: 0 }, { txt: '业务委托申请', icon: '../../../static/yewuzhongxin/6/2.png', id: 1 }, { txt: '老年人业务代办', icon: '../../../static/yewuzhongxin/6/3.png', id: 2 }, { txt: '电子文书', icon: '../../../static/yewuzhongxin/6/4.png', id: 3 } ] } ]); // 返回上一级 const gotoBack = () => { uni.navigateBack({ delta: 1 }); }; </script> <style lang="scss" scoped> .van-nav-bar__content { display: flex; align-items: center; justify-content: center; height: 4rem; background-color: #2c66a9; color: #fff; letter-spacing: 1.5px; position: relative; .page-icon { display: flex; align-items: center; position: absolute; left: 0; } .page-navbar { font-size: 1.1rem; } } .search { display: flex; align-items: center; justify-content: center; width: 94%; margin: 0.5rem auto; padding: 0.3rem 0rem; border-radius: 0.2rem; background-color: #f3f3f3; color: #959595; } .tag { display: flex; flex-wrap: wrap; .tag-box { display: inline; width: 3.2rem; border: 1rpx solid #6095d0; border-radius: 0.2rem; padding: 0.2rem 0rem; text-align: center; margin: 0.5rem 0rem 0.4rem 1.2rem; color: #2461a5; font-size: 0.9rem; font-weight: 600; } } .headline { .mb-10 { background-color: #fff; } .headline-box { display: flex; flex-wrap: wrap; margin-left: 1rem; .card { margin-top: 0.8rem; margin: 0.7rem 0.2rem 0rem 0.2rem; .icon { text-align: center; } .text { text-align: center; font-size: 0.5rem; } } } :deep(.line[data-v-482a4163]) { background-color: #1c5aa1; width: 4px; height: 1.1rem; } :deep(.uni-section__content-title[data-v-482a4163]) { font-size: 1rem; font-weight: 700; } } </style>