dykj-outsource-12123/pages/index/components/businessCenter.vue

<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/6/1.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;
        position: relative;
      }
      .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>