lanan-repair-app/pages-home/home/home.vue
2024-11-13 17:47:41 +08:00

1134 lines
30 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<!--<VNavigationBar style="position: relative;z-index: 99;" leftTitle="true" backgroundColor="rgba(0,0,0,0)" title-color="#fff" title=" "></VNavigationBar>-->
<view class="bodyTopBg"></view>
<view class="body">
<view class="userInfoBox" >
<image @click="showUserDetail" style="width: 104rpx;height: 104rpx;border-radius: 50%;" v-if="''==userInfo.avatar || null == userInfo.avatar" :src="defaultAvatar" mode="scaleToFill" @error="avatarErr"></image>
<image @click="showUserDetail" style="width: 104rpx;height: 104rpx;border-radius: 50%;" v-else :src="imgUrlPrex+userInfo.avatar" mode="scaleToFill" @error="avatarErr"></image>
<view class="userInfo" @click="showUserDetail">
<text class="userName">{{ userInfo.nickname }}</text>
<text class="userType">{{ userInfo.roleNames }}</text>
<text class="userType" v-if="ifLeader">班组长</text>
</view>
<view class="msg-box" @click="gotoMsg">
<image mode="aspectFita" src="@/pages-home/static/msg.png" style="width: 48rpx;height: 48rpx"></image>
<view class="msg-num" v-if="noReadNum>0">{{noReadNum}}</view>
</view>
<image @click="showUserDetail" style="width: 48rpx;height: 48rpx" src="/static/icons/more.png" mode="aspectFita"></image>
</view>
<!-- 服务顾问才能开单-->
<view class="body-top-grid" v-if="userInfo.roleCodes.includes('service_advisor')">
<view v-for="(item, index) in menuList" :key="index" class="body-top-item" @click="gotoPage(item)">
<view>
<view class="title">{{ item.title }}</view>
<view class="desc">{{ item.desc }}</view>
<image class="btn" mode="aspectFit" src="@/static/icons/homeMenuIcon/menuBtn.png"></image>
</view>
<image :src="item.icon" class="icon" mode="aspectFit"></image>
</view>
</view>
<!-- 维修工角色-->
<view class="body-card" v-if="userInfo.roleCodes.includes('repair_staff')">
<view class="title">审批单处理<text class="formValue" @click="workerTodo">全部</text><u-icon color="#999" name="arrow-right" size="12"></u-icon></view>
<view class="title-box">
<view class="title-box-item">
<view class="titleDesc">已提交</view>
<view class="titleNumber">{{ workerNumObj.submitNum }}</view>
<image class="titleImg" src="@/pages-home/static/up.png" ></image>
</view>
<view class="title-box-item">
<view class="titleDesc">未通过</view>
<view class="titleNumber">{{ workerNumObj.noAllowNum }}</view>
<image class="titleImg" src="@/pages-home/static/no.png" ></image>
</view>
<!-- <view class="title-box-item">-->
<!-- <view class="titleDesc">已通过</view>-->
<!-- <view class="titleNumber">{{ workerNumObj.allowNum }}</view>-->
<!-- <image class="titleImg" src="@/pages-home/static/alow.png" ></image>-->
<!-- </view>-->
<view class="title-box-item">
<view class="titleDesc">待确认领料</view>
<view class="titleNumber">{{ workerNumObj.waitingReceiveNum }}</view>
<image class="titleImg" src="@/pages-home/static/waitingReceiveNum.png" ></image>
</view>
<view class="title-box-item">
<view class="titleDesc">待确认退料</view>
<view class="titleNumber">{{ workerNumObj.waitingBackNum }}</view>
<image class="titleImg" src="@/pages-home/static/waitingBackNum.png" ></image>
</view>
</view>
</view>
<!-- 通知公告 -->
<view class="notice-dom" v-if="noticeNum>0" @click="gotoNotice">
<view class="notice-box">
<image class="left-img" src="@/pages-home/static/notice.png" ></image>
<view class="center-text">你有{{noticeNum}}条来自平台的通知公告</view>
<u-icon style="width: 20rpx" color="#999" name="arrow-right" size="12"></u-icon>
</view>
</view>
<!-- 服务顾问角色 -->
<view class="orderCount" v-if="userInfo.roleCodes.includes('service_advisor')" @click="serviceWork">
<view class="orderCountItem">
<text class="label">待审批配件申请单</text>
<text class="value">{{serviceNum}}</text>
</view>
</view>
<!-- TODO 总检角色 -->
<view class="orderCount" v-if="userInfo.roleCodes.includes('general_inspection') || userInfo.roleCodes.includes('weixiu')">
<view class="orderCountItem">
<text class="label">维修中</text>
<text class="value">{{ bossNum.workingNum }}</text>
</view>
<view class="line"></view>
<view class="orderCountItem">
<text class="label">已完成</text>
<text class="value">{{ bossNum.doneNum }}</text>
</view>
</view>
<view class="todoListBox">
<view class="title">
待办工单
<text class="titleDesc">当前共
<text class="titleCount">{{total}}</text>
项工单需要处理
</text>
</view>
<view class="todoList">
<scroll-view scroll-y="true" style="height: 100%" class="itemContent" @scrolltolower="onReachBottomCus"
refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
<order-card v-for="(item, index) in orderList" :key="index" :order="item" @childEvent="onRefresherrefresh" @doVoid="doVoidReq" @getOrder="openFile" @startWork="startWork" @addProj="addProj"></order-card>
<view style="text-align: center" v-if="orderList.length==0">
<image class="" src="@/static/images/nothing.png" ></image>
</view>
</scroll-view>
</view>
</view>
</view>
<project-picker ref="proj" @confirm="projConfirm"></project-picker>
<tabBarVue msg="1" ref="tarBar" @socketSuccess="socketSuccess"></tabBarVue>
<!-- 提示窗示例 -->
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog type="success" cancelText="线下告知" confirmText="去签字" title="系统提示" content="客户是否在场进行签字确认?" @confirm="dialogConfirm"
@close="dialogClose"></uni-popup-dialog>
</uni-popup>
<!-- 提示窗示例 -->
<uni-popup ref="addProjDialog" type="dialog">
<uni-popup-dialog type="success" cancelText="修改已有项目" confirmText="新增项目" title="系统提示" content="是否需要新增项目?" @confirm="addProjDialogConfirm"
@close="cancelDialogClose"></uni-popup-dialog>
</uni-popup>
<!-- 输入框示例 -->
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="input" title="线下告知" value=""
placeholder="请填入告知方式!" @confirm="dialogInputConfirm"></uni-popup-dialog>
</uni-popup>
<!-- 作废modal框-->
<view >
<u-modal showCancelButton @cancel="doVoidCancel" @confirm = "doVoidConfirm" :show="show" :title="title">
<input type="text" v-model="voidData.remark" placeholder="请输入作废原因" >
</u-modal>
</view>
<!-- 普通弹窗---拍照上传 -->
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content">
<view class="dl-avatar-box">
<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile" limit="9" title="请上传诊断维修单和车辆维修前照片"></uni-file-picker>
</view>
<button type="primary" @click="receiveOrder">保存</button>
</view>
</uni-popup>
</view>
</template>
<script>
import tabBarVue from '@/components/tabBar/tabBar.vue'
import VNavigationBar from '@/components/VNavigationBar.vue'
import OrderCard from "@/components/orderCard.vue";
import ProjectPicker from "@/components/projectPicker.vue";
import request from '@/utils/request';
import {formatTimestamp,getOrderStatusText,builderOrder,saveTicketsRecords} from "@/utils/utils";
import config from "@/config";
import upload from "@/utils/upload";
import {
getToken,
getUserInfo,
getStrData,
getTenantId,
setJSONData,
getJSONData
} from '@/utils/auth'
export default {
components: {
OrderCard,
tabBarVue,
ProjectPicker,
VNavigationBar
},
data() {
return {
//上传的图片数组
fileList: [],
sizeType:['compressed'],
show:false,
title:'作废',
voidData:{},
takeOrderId:'',
imgUrlPrex:config.baseImageUrl,
userInfo: {
avatar: undefined,
nickname: ''
},
menuList: [
{
title: '新建工单',
desc: '直接添加客户订单',
icon: require('@/static/icons/homeMenuIcon/menu1.png'),
path: '/pages-order/addOrder/addOrder'
},
{
title: '预约开单',
desc: '查询预约记录',
icon: require('@/static/icons/homeMenuIcon/menu1.png'),
path: '/pages-order/appointOrder/appointOrder'
}
],
bannerIndex: 0,
shopList: [],
bannerList: [],
richTextHtml: null,
pageNo: 1,
pageSize: 10,
total: 0,
//下来刷新状态
isTriggered:true,
orderList: [
],
//维修工处理配件申请单数量
workerNumObj:{
submitNum:0,
allowNum:0,
noAllowNum:0,
waitingReceiveNum:0,
waitingBackNum:0,
},
//服务顾问待处理数量
serviceNum:0,
//总检查看维修中、已完成的工单数量
bossNum:{
workingNum:0,
doneNum:0
},
defaultAvatar: require('@/static/icons/avatar.png'),
//未读消息数量
noReadNum:0,
//通知公告数量
noticeNum:0,
//选中的维修单id
ticketId: null,
//新加的维修项目
selectedProj: [],
//告知客户的内容
tellCusText:"",
ifLeader:false,
}
},
onLoad(){
if(!getToken()){
uni.reLaunch({
url: '/pages/login/login'
})
}else{
if(!this.$msgSocket){
this.$startMsgSocket(getTenantId(),getStrData("userId"))
}
}
},
onShow() {
if(!getToken()){
uni.reLaunch({
url: '/pages/login/login'
})
}else{
//直接取缓存中的用户信息
this.userInfo = getUserInfo()
this.ifLeader = getStrData('ifLeader')
this.getNoReadNum()
this.getNoticeList()
this.onRefresherrefresh()
if(this.userInfo.roleCodes.includes('repair_staff')){
//维修工
this.getWorkerTodo()
}else if(this.userInfo.roleCodes.includes('service_advisor')){
//服务顾问
this.getServiceTodo()
}else if(this.userInfo.roleCodes.includes('weixiu') ||this.userInfo.roleCodes.includes('general_inspection')){
//总检或管理员
this.getBossTodo()
}
}
},
methods: {
/**
* 作废
*/
doVoidReq(row){
this.show = true
this.voidData = {
id : row.id,
remark : '',
ticketsStatus : '03'
}
},
/**
* 作废请求后台方法
*/
doVoidConfirm(){
request({
url: '/admin-api/repair/tickets/void',
method: 'POST',
data:this.voidData
}).then((res) => {
if (res.code == 200){
uni.showToast({
title: "操作成功",
icon: "success",
})
}
this.doVoidCancel()
this.onRefresherrefresh()
})
},
doVoidCancel(){
this.show = false
},
/**
* 接单上传附件
*/
openFile(id){
this.takeOrderId = id
this.$refs.popup.open("bottom")
},
/**
* 接单
*/
receiveOrder(){
let fileStr = this.fileList.map(item=>item.url.replace(config.baseImageUrl,"")).join(",")
request({
url: '/admin-api/repair/tickets/take',
method: 'get',
params:{
id:this.takeOrderId,
image:fileStr
}
}).then((res) => {
console.log(res)
this.$refs.popup.close()
if (res.code == 200) {
uni.showToast({
icon: 'none',
title: '接单成功,请尽快处理!'
})
this.onRefresherrefresh()
}else{
uni.showToast({
icon: 'none',
title: res.message
})
}
})
},
afterRead(file) {
for (let i = 0; i < file.tempFilePaths.length; i++) {
upload({
url:'/admin-api/infra/file/upload',
filePath: file.tempFilePaths[i]
}).then((res)=>{
this.fileList.push({
url: config.baseImageUrl+res.data
})
console.log(this.fileList)
})
}
},
deleteFile(file, index) {
this.fileList.splice(index, 1);
},
/**
* 保存当前项目
*/
dialogInputConfirm(val) {
// 关闭窗口后,恢复默认内容
this.$refs.inputDialog.close()
const newData = {itemList:getJSONData("newProject"),remark:val}
request({
url: '/admin-api/repair/titem/addNewProj',
method: 'post',
data:newData
}).then((res) => {
if (res.code == 200) {
uni.showToast({
title: '添加维修项目成功!',
icon: 'success'
})
uni.navigateTo({
url: `/pages-order/orderDetail/orderDetail?id=${res.data}&isDetail=0`
});
}else{
uni.showToast({
title: '操作失败,请联系管理员',
icon: 'none'
})
}
})
},
/**
* 去签字
*/
dialogConfirm() {
uni.navigateTo({
url: '/pages-home/service/sign-agin'
})
},
/**
* 客户不在场,手动输入
*/
dialogClose() {
this.$refs.inputDialog.open()
},
/**
* 卡片的 修改项目 按钮点击
*/
addProj(order){
this.ticketId = order.id
this.$refs.addProjDialog.open()
},
/**
* 新增项目
*/
addProjDialogConfirm(){
this.$refs.proj.open()
},
/**
* 修改已有项目
*/
cancelDialogClose(){
this.$refs.addProjDialog.close()
uni.navigateTo({
url: `/pages-order/orderDetail/orderDetail?id=${this.ticketId}&isDetail=0`
});
},
/**
* 添加项目回调
*/
projConfirm(proj) {
this.selectedProj = proj
if(this.selectedProj.length>0){
setJSONData("newProject",this.formatItem(this.selectedProj))
this.$refs.alertDialog.open()
}
console.log(this.selectedProj,"selectedProj")
console.log(this.ticketId,"this.ticketId")
},
// 子表信息预处理
formatItem(list) {
if (!(list && list.length > 0)) {
return []
}
return list.map(item => {
const temp = {
...item,
ticketId:this.ticketId,
itemName: item.name,
itemCount: 1,
itemUnit: item.unit,
itemPrice: item.price,
itemDiscount:1,
itemMoney: item.price,
itemTypeId: item.type,
remark: item.remark,
itemType: "01",
itemStatus:"01",
projectId: item.id,
id: null
}
return temp;
})
},
socketSuccess(){
this.getNoReadNum()
this.onRefresherrefresh()
console.log('通知并刷新成功')
},
gotoMsg(){
//去消息中心
uni.navigateTo({
url: '/pages-home/msg/message'
})
},
/**
* 上滑加载数据
*/
onReachBottomCus() {
//判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕
if (this.pageNo * this.pageSize >= this.total) {
uni.$u.toast('没有更多数据了')
return
}
//页码+1,调用获取数据的方法获取第二页数据
this.pageNo++
//此处调用自己获取数据列表的方法
this.getOrderList()
},
/**
* 下拉刷新数据
*/
onRefresherrefresh(){
this.isTriggered = true
this.pageNo = 1
this.total = 0
this.orderList = []
this.getOrderList()
},
/**
* 开始施工
*/
startWork(id){
let paramsObj = {ticketId:id}
//先查当前用户在本工单下有几个维修项目
request({
url: '/admin-api/repair/titem/listProject',
method: 'get',
params:paramsObj
}).then((res) => {
console.log(res)
if (res.code == 200 && res.data.length>0) {
if(res.data.length==1){
//只有1个直接开始施工
this.startWorkRequest(id,"02",res.data[0].id,"02","kssg","开始施工")
}else{
uni.showActionSheet({
itemList: res.data.map(m => m.itemName),
success: ({
tapIndex
}) => {
this.startWorkRequest(id,"02",res.data[tapIndex].id,"02","kssg","开始施工")
}
})
}
}else{
uni.showToast({
title: '操作失败,请联系管理员',
icon: 'none'
})
}
})
},
/**
* 开始施工请求后台
*/
async startWorkRequest(id,ticketsWorkStatus,itemId,itemStatus,recordType,remark){
try {
const result = await saveTicketsRecords(id,ticketsWorkStatus,itemId,itemStatus,recordType,remark,null);
console.error("result",result);
this.onRefresherrefresh()
} catch (error) {
console.error(error);
}
},
/**
* 维修工的角度查提交的配件申请单 待处理数量
*/
getWorkerTodo(){
request({
url: '/admin-api/repair/tw/getWorkerTodo',
method: 'get',
}).then((res) => {
console.log(res)
if (res.code == 200) {
this.workerNumObj = res.data
}
})
},
/**
* 从总检的角度差维修中、已完成的工单数量
*/
getBossTodo(){
request({
url: '/admin-api/repair/tickets/getBossNum',
method: 'get',
}).then((res) => {
console.log(res)
if (res.code == 200) {
this.bossNum = res.data
}
})
},
/**
* 服务顾问的角度查待处理的配件申请单数量
*/
getServiceTodo(){
let params = {
pageNo:this.pageNo,
pageSize:this.pageSize,
type:"01",
status:"01"
}
request({
url: '/admin-api/repair/tw/page',
method: 'get',
params:params
}).then((res) => {
console.log(res)
if (res.code == 200) {
this.serviceNum = res.data.total
}
})
},
/**
* 查本人待处理工单
*/
getOrderList(){
let paramsObj = {pageNo: this.pageNo, pageSize: this.pageSize, isFinish: "0"}
request({
url: '/admin-api/repair/tickets/pageType',
method: 'get',
params:paramsObj
}).then((res) => {
console.log(res)
if (res.code == 200) {
let thisPageRecords = []
if(res.data && res.data.hasOwnProperty("records")){
for (let i = 0; i < res.data.records.length; i++) {
let order = res.data.records[i]
let viewOrder = builderOrder(order)
if(order.booking){
viewOrder['appointDate'] = formatTimestamp(order.createTime)
}
let projectList = []
if(order.itemList){
for (let j = 0; j < order.itemList.length; j++) {
let itemObj = order.itemList[j]
if("01"==itemObj.itemType){
projectList.push({
id:itemObj.id,
name:itemObj.itemName
})
}
}
}
viewOrder['projectList'] = projectList
thisPageRecords.push(viewOrder)
}
}
//判断 如果获取的数据的页码不是第一页,就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
if (this.pageNo != 1) {
this.orderList = this.orderList.concat(thisPageRecords)
} else {
this.orderList = thisPageRecords
}
//将获取的总条数赋值
this.total = res.data.total
this.isTriggered = false
}
})
},
gotoPage(menu) {
uni.navigateTo({
url: menu.path
})
},
avatarErr(err) {
console.log('err', err)
this.userInfo.avatar = this.defaultAvatar
},
showUserDetail() {
uni.navigateTo({
url: '/pages/my/myInfo'
})
},
workerTodo() {
uni.navigateTo({
url: '/pages-repair/applyList/applyList'
})
},
/**
* 服务顾问待办
*/
serviceWork(){
uni.navigateTo({
url: '/pages-home/service/applyList'
})
},
/**
* 获取未读消息数量
* @returns {Promise<void>}
*/
async getNoReadNum(){
await request({
url: "/admin-api/system/notify-message/get-unread-count",
method: "GET"
}).then((res) => {
if(res.code==200){
this.noReadNum = res.data>99?99:res.data
}
})
},
/**
* 跳转通知公告列表页
*/
gotoNotice(){
uni.navigateTo({
url: '/pages-home/notice/notice'
})
},
/**
* 查通知公告--查数量
*/
async getNoticeList(){
const res = await request({
url: "/admin-api/base/notice/page",
method: "get",
params: {
pageNo:1,
pageSize:1,
type:1,
parentServer: "weixiu",
server: "app"
},
tenantIdFlag:false
})
if(res.code==200){
this.noticeNum = res.data.total
}
},
}
}
</script>
<style lang="less" scoped>
* {
box-sizing: border-box;
}
.popup-content {
@include flex;
align-items: center;
justify-content: center;
padding: 30rpx;
height: auto;
background-color: #fff;
}
.container {
height: 100%;
//background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
display: flex;
flex-direction: column;
position: relative;
padding-top: 60rpx;
background-color: #F3F5F7;
.bodyTopBg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500rpx;
background-image: url("@/static/bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.body {
position: relative;
z-index: 10;
flex: 1;
height: 0;
overflow: auto;
padding-bottom: 30rpx;
}
.userInfoBox {
margin: 0 32rpx 40rpx;
display: flex;
column-gap: 20rpx;
align-items: center;
.userInfo {
flex: 1;
width: 0;
.userName {
font-weight: bold;
font-size: 36rpx;
color: #333333;
display: block;
margin-bottom: 16rpx;
}
.userType {
font-size: 24rpx;
color: #0174F6;
display: inline-block;
border-radius: 24rpx 24rpx 24rpx 24rpx;
border: 1rpx solid #0174F6;
padding: 8rpx 16rpx;
}
}
.msg-box{
position: relative;
margin-right: 40rpx;
.msg-num{
position: absolute;
right: -15rpx;
color: white;
background: #d74a43;
width: 35rpx;
height: 35rpx;
line-height: 35rpx;
text-align: center;
font-weight: 800;
font-size: 11px;
border-radius: 50%;
top: -15rpx;
}
}
}
.body-top-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30rpx;
margin: 0 32rpx 40rpx;
.body-top-item {
position: relative;
display: flex;
align-items: center;
padding: 30rpx 0 30rpx 20rpx;
background: linear-gradient(360deg, #FFFFFF 0%, #D7EAFF 100%);
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(202, 223, 247, 1)) 2 2;
& > view:first-child {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
row-gap: 30rpx;
}
.title {
font-weight: bold;
font-size: 32rpx;
color: #113A68;
}
.desc {
font-weight: 500;
font-size: 24rpx;
color: #858BA0;
}
.btn {
width: 40rpx;
height: 30rpx;
}
.icon {
width: 136rpx;
height: 136rpx;
}
}
}
.body-card {
border-radius: 6px 6px 6px 6px;
margin: 18px;
padding: 15px;
background: #FFFFFF;
.title {
margin-bottom: 30rpx;
font-weight: bold;
font-size: 32rpx;
color: #113A68;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 20rpx;
}
.formValue {
flex: 1;
width: 0;
text-align: right;
font-weight: 500;
font-size: 13px;
color: #858BA0;
}
.title-box{
display: flex;
justify-content: space-around;
.title-box-item{
width: 33%;
text-align: center;
.titleDesc {
font-weight: 500;
font-size: 24rpx;
color: #858BA0;
}
.titleNumber{
font-weight: 500;
font-size: 40rpx;
color: #333333;
margin: 4px;
}
.titleImg{
width: 48rpx;
height: 48rpx;
}
}
}
}
.notice-dom {
margin: 40rpx 32rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 20rpx;
display: flex;
align-items: center;
.notice-box{
display: flex;
width: 100%;
.left-img{
width: 48rpx;
height: 48rpx;
}
.center-text{
width: calc(100% - 70rpx);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding:0 20rpx;
}
}
}
.orderCount {
margin: 40rpx 32rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
padding: 40rpx;
display: flex;
align-items: center;
.orderCountItem {
flex: 1;
width: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
.label {
color: #858BA0;
}
.value {
font-weight: bold;
font-size: 40rpx;
color: #333333;
}
}
.line {
height: 84rpx;
width: 1rpx;
background-color: #DDDDDD;
}
}
.todoListBox {
margin: 40rpx 32rpx;
height: calc(100vh - 500rpx);
.title {
margin-bottom: 30rpx;
font-weight: bold;
font-size: 32rpx;
color: #113A68;
.titleDesc {
margin-left: 20rpx;
font-weight: 500;
font-size: 24rpx;
color: #858BA0;
}
.titleCount {
color: #0174F6;
}
}
.todoList {
display: flex;
flex-direction: column;
row-gap: 20rpx;
height: 98%;
}
}
.body-top-banner {
text-align: center;
}
.banner {
margin: 24rpx 0 0;
width: 686rpx;
height: 100%;
border-radius: 12rpx 12rpx 12rpx 12rpx;
background-color: #0174F6;
}
.menus {
margin: 30rpx auto 0;
box-sizing: border-box;
width: 686rpx;
padding: 40rpx 38rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 22rpx;
font-size: 24rpx;
.menu-icon {
width: 48rpx;
height: 48rpx;
}
}
.info {
width: 686rpx;
margin: 38rpx auto 0;
display: flex;
align-items: center;
column-gap: 20rpx;
.info-icon {
width: 80rpx;
height: 80rpx;
}
.infoList {
flex: 1;
width: 0;
.infoItem {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 10rpx;
}
.infoIndex {
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #333;
}
.infoText {
flex: 1;
width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24rpx;
}
}
.more-icon {
width: 24rpx;
height: 24rpx;
}
}
.repairShop {
width: 686rpx;
margin: 38rpx auto 0;
.title {
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.shopList {
.shopItem {
padding: 30rpx 0;
border-bottom: 1rpx solid #DDDDDD;
display: flex;
align-items: center;
column-gap: 20rpx;
}
.shopImg {
width: 160rpx;
height: 100rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
background-color: #999;
}
.shopInfo {
flex: 1;
width: 0;
}
.shopTitle {
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-bottom: 20rpx;
}
.shopDetail {
display: flex;
align-items: center;
font-size: 24rpx;
color: #666666;
column-gap: 10rpx;
}
.shopAddress {
flex: 1;
width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line {
width: 2rpx;
height: 24rpx;
background-color: #858BA0;
}
.shopDistance {
flex-shrink: 0;
}
}
}
}
</style>