sunqiang/lanan-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
bfd4661135
lanan-app/pages/rescue/rescue.vue

1183 lines
26 KiB
Vue
Raw Normal View History

1
2024-08-20 20:02:05 +08:00
<!-- 道路救援 首页-->
<template>
<view class="content">
页面开发
2024-08-22 19:34:47 +08:00
<!-- 顶部 -->
样式调整
2024-08-23 18:41:57 +08:00
<view class="content-top" :style="{ paddingTop: homeHeaderPaddingTop + 'px' }">
1
2024-08-20 20:02:05 +08:00
<view class="top-two">
<view class="top-left">
<view class="left1">
样式调整
2024-08-23 18:41:57 +08:00
<text>日期</text>
1
2024-08-20 20:02:05 +08:00
</view>
<view class="left2">
<text>{{currentTime || ''}}</text>
</view>
</view>
<!-- #ifdef APP-PLUS || H5 -->
<view class="top-right">
<view class="">{{positionInfo}}</view>
样式调整
2024-08-23 18:41:57 +08:00
<!-- <view class=""> -->
<image class="top-right-icon" src="@/static/icons/bottom.png" mode="aspectFit"></image>
<!-- <uni-icons type="location-filled" color="#fff" size="16"></uni-icons> -->
<!-- </view> -->
1
2024-08-20 20:02:05 +08:00
</view>
<!-- #endif -->
页面开发
2024-08-22 19:34:47 +08:00
</view>
<view class="top-menu">
<view class="top-menu-item" :key="index" v-for="(item, index) in topMenuList" @click="goToMenuPage(item)">
<image class="top-menu-item-icon" :src="item.icon" mode="aspectFit"></image>
<text>{{ item.title }}</text>
</view>
1
2024-08-20 20:02:05 +08:00
</view>
页面开发
2024-08-22 19:34:47 +08:00
</view>
<view class="dil">
1
2024-08-20 20:02:05 +08:00
<!-- 四个选项 -->
<!-- #ifdef APP-PLUS || H5 -->
页面开发
2024-08-22 19:34:47 +08:00
<view class="four-box-header">
<text class="four-box-header-title">我的订单</text>
<view class="four-box-header-extra">
<text style="color: #929292;">待评价</text>
<uni-icons type="right" color="#929292"></uni-icons>
</view>
</view>
1
2024-08-20 20:02:05 +08:00
<view class="four-box">
<view class="boxf" @click="goToOrder(2)">
<view class="zi2">{{dzfNum}}</view>
页面开发
2024-08-22 19:34:47 +08:00
<view class="zi1">
<image class="zi1-icon" src="@/static/icons/homeOrderCard/dzf.png" mode="aspectFit"></image>
<text>待支付</text>
</view>
1
2024-08-20 20:02:05 +08:00
</view>
<view class="boxf1" @click="goToOrder(3)">
<view class="zi2">{{dqcNum }}</view>
页面开发
2024-08-22 19:34:47 +08:00
<view class="zi1">
<image class="zi1-icon" src="@/static/icons/homeOrderCard/dqc.png" mode="aspectFit"></image>
<text>待取车</text>
</view>
1
2024-08-20 20:02:05 +08:00
</view>
<view class="boxf2" @click="goToOrder(1)">
<view class="zi2">{{jyzNum}}</view>
页面开发
2024-08-22 19:34:47 +08:00
<view class="zi1">
<image class="zi1-icon" src="@/static/icons/homeOrderCard/jyz.png" mode="aspectFit"></image>
<text>救援中</text>
</view>
1
2024-08-20 20:02:05 +08:00
</view>
<view class="boxf3" @click="goToOrder(5)">
<view class="zi2">{{ywcNum }}</view>
页面开发
2024-08-22 19:34:47 +08:00
<view class="zi1">
<image class="zi1-icon" src="@/static/icons/homeOrderCard/ywc.png" mode="aspectFit"></image>
<text>已完成</text>
</view>
1
2024-08-20 20:02:05 +08:00
</view>
</view>
<view class="yijian">
<view class="y-left" @click="getyi()">
<view class="">立即救援</view>
</view>
<!-- <view class="y-right" @click="goisAppointment()">
<view class="">预约</view>
</view> -->
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="box">
页面开发
2024-08-22 20:13:57 +08:00
<!-- <view class="xz-box" id="y1" @click="getsxwhat(1)">
1
2024-08-20 20:02:05 +08:00
<view class="box-wenzi">拖车</view>
</view>
<view class="xz-box" id="y2" @click="getsxwhat(2)">
<view class="box-wenzi">送油</view>
</view>
<view class="xz-box" id="y3" @click="getsxwhat(3)">
<view class="box-wenzi">搭电</view>
</view>
<view class="xz-box" id="y4" @click="getsxwhat(4)">
<view class="box-wenzi">换胎</view>
页面开发
2024-08-22 20:13:57 +08:00
</view> -->
<template v-for="(item, index) in busiTypeList">
<view :key="index" class="xz-box" :class="{ checked: busiType === index + 1 }" @click="getsxwhat(index + 1)">
<image class="xz-box-icon" :src="item.icon" mode="aspectFit"></image>
<view class="box-wenzi">{{item.label}}</view>
<view class="checkedFlag">
</view>
<!-- <uni-icons type="plus"></uni-icons> -->
<uni-icons class="checkedFlagIcon" type="checkmarkempty" size="22" color="#fff"></uni-icons>
</view>
</template>
1
2024-08-20 20:02:05 +08:00
<!-- <view class="xz-box" v-if="role[0] == 'jjdd' " id="y5" @click="getsx(5)">
<view class="box-wenzi">扣车</view>
</view> -->
</view>
<!-- #endif -->
<!-- 标签切换 -->
页面开发
2024-08-22 19:34:47 +08:00
<!-- <view class="box-tap">
1
2024-08-20 20:02:05 +08:00
<view class="tap-left">
<view class="left-img1" @click="getone()" v-if="one == true">
<image src="../../static/jyz.png" mode=""></image>
<view class="gang"></view>
</view>
页面开发
2024-08-22 19:34:47 +08:00
<view class="zi3" style="margin-right: 20px;" v-if="one == false" @click="getone()">救援中</view> -->
1
2024-08-20 20:02:05 +08:00
<!-- <view class="left-img1" v-if="one == false" @click="getone()">
<image src="../../static/jyls.png" mode=""></image>
<view class="gang"></view>
</view> -->
<!-- <view class="zi3" @click="getone()" v-if="one == true">救援历史</view> -->
页面开发
2024-08-22 19:34:47 +08:00
<!-- </view>
1
2024-08-20 20:02:05 +08:00
<view class="tap-right" @click="gohistory()">
<view class="zi3">
历史订单
</view>
<view class="">
<uni-icons color: #666666; type="right" size="18"></uni-icons>
</view>
</view>
页面开发
2024-08-22 19:34:47 +08:00
</view> -->
<view class="four-box-header">
<text class="four-box-header-title">救援推荐</text>
<view class="four-box-header-extra" @click="gohistory()">
<text style="color: #929292;">历史订单</text>
<uni-icons type="right" color="#929292"></uni-icons>
</view>
1
2024-08-20 20:02:05 +08:00
</view>
<view class="tap-box">
<view class="ques" v-if="orderList.length== 0 ">
页面开发
2024-08-22 20:13:57 +08:00
<image src="../../static/quesheng.png" mode="aspectFit"></image>
1
2024-08-20 20:02:05 +08:00
</view>
页面开发
2024-08-22 19:34:47 +08:00
<view style="display: flex;flex-direction: column;row-gap: 10px;" v-else>
调整样式
2024-08-24 12:03:33 +08:00
<order-card :status="1" @deleteOk="deleteOrderHandle" @refresh="getlist" v-for="(item, index) in orderList" :key="index" :orderData="item"></order-card>
页面开发
2024-08-22 19:34:47 +08:00
</view>
<!-- <view class="boxt" v-for="(item,index) in orderList" :key="index">
1
2024-08-20 20:02:05 +08:00
<view class="boxt-left" @click="godetail(item.id)">
<view class="left-lan">
<view class="">{{item.rescueTypeStr}}</view>
</view>
<view class="text1">{{item.rescuePosition}}</view>
<view class="" v-if="item.rescueStatus == 1">
<view class="lanzi" style="margin-left: 25px; margin-top: 10px;">预约单</view>
<view class="text2">{{item.rescueTime || ''}}</view>
</view>
<view class="" v-if="item.rescueStatus == 2">
<view class="lanzi" style="margin-left: 25px; margin-top: 10px;">系统正在派单中...</view>
<view class="text2">{{item.rescueTime || ''}}</view>
</view>
<view class="" v-if="item.rescueStatus > 2">
<view class="text2"><text class="lanzi">
{{item.driverName || ''}}</text> <text style="margin-left: 2px;margin-right: 2px;">
驾驶 </text><text class="lanzi">{{item.driverCarNum||""}}</text></view>
<view class="text2">救援车辆距 <text class="lanzi"> {{item.distance / 1000 || 0}}KM</text>
</view>
<view class="text2">预计 <text class="lanzi">{{item.needTime || 0}}分钟</text> 到达</view>
<view class="text2">{{item.rescueTime || ''}}</view>
</view>
</view>
<view class="boxt-right">
<view class="zhtai">
<view class="">{{item.rescueStatusStr}}</view>
</view>
<view class="dianhua" v-if="role == 'ddzx' && item.rescueStatus <= 2 ">
<view>
<view @click="getzhipai(item.id)" style="margin-bottom: 20px;" class="">指派司机</view>
<view class="dianhuad" @click="deleteId(item.id)" v-if="item.rescueStatusStr == '待救援' ">
<text>删除</text>
</view>
</view>
</view>
<view class="dianhua" v-if="item.rescueStatus > 2" @click="gettel(item.driverPhoneNum)">
<view class="ticon">
<image src="../../static/dh.png" mode=""></image>
</view>
<view class="">联系司机</view>
</view>
</view>
页面开发
2024-08-22 19:34:47 +08:00
</view> -->
1
2024-08-20 20:02:05 +08:00
</view>
<!-- 一键救援 -->
<view style="width: 100%; height: 80px; "></view>
<!-- dibu -->
</view>
<u-modal :show="showDelete" :title="title" :showCancelButton="true" @confirm="confirm"
@cancel="cancel"></u-modal>
页面开发
2024-08-22 20:13:57 +08:00
<u-popup :show="showp" @close="close" mode="center" :round="10">
1
2024-08-20 20:02:05 +08:00
<scroll-view scroll-y style="height: 200px;">
<view class="box_">
<view class="title_">车辆提醒</view>
<view class="size_" v-for="(item,index) in warnList" :key="index">{{item}}</view>
</view>
</scroll-view>
<view class="annaiu" @click="showp=false">
<view class="">确定</view>
</view>
</u-popup>
<tabBar :msg="msg"></tabBar>
</view>
</template>
<script>
import request from '../../utils/request';
import tabBar from '../../components/tabBar/tabBar.vue'
import {
getToken
} from '@/utils/auth'
页面开发
2024-08-22 19:34:47 +08:00
// #ifdef APP
1
2024-08-20 20:02:05 +08:00
const keepAlivePlugin = uni.requireNativePlugin('Ba-KeepAlive')
const jyJPush = uni.requireNativePlugin('JY-JPush');
页面开发
2024-08-22 19:34:47 +08:00
// #endif
import OrderCard from '@/components/orderCard/OrderCard.vue'
调整样式
2024-08-23 23:17:22 +08:00
import {getWXStatusHeight} from '@/utils/utils.js'
1
2024-08-20 20:02:05 +08:00
// import { getWeather } from'../../utils/Weather'
export default {
data() {
return {
样式调整
2024-08-23 18:41:57 +08:00
// #ifdef MP
homeHeaderPaddingTop: 0,
homeHeaderMenuHeight: 0,
homeHeaderMenuLeft: 0,
// #endif
// #ifdef APP || H5
homeHeaderPaddingTop: uni.upx2px(90),
homeHeaderMenuHeight: 50,
homeHeaderMenuLeft: 0,
// #endif
页面开发
2024-08-22 20:13:57 +08:00
busiTypeList: [{
label: '拖车',
icon: require('@/static/icons/order/tuoche.png')
},
{
label: '送油',
icon: require('@/static/icons/order/songyou.png')
},
{
label: '搭电',
icon: require('@/static/icons/order/dadian.png')
},
{
label: '换胎',
icon: require('@/static/icons/order/huantai.png')
},
// {
// label: '扣车',
// icon: require('@/static/icons/order/tuoche.png')
// },
],
页面开发
2024-08-22 19:34:47 +08:00
topMenuList: [
{
title: '我的订单',
path: '/pages/rescue/historylist?id=1',
icon: require('@/static/icons/homeTopMenu/icon_tenement.png')
},
{
title: '车辆管理',
path: '/pages/my/carManage',
icon: require('@/static/icons/homeTopMenu/icon_clean.png')
},
{
title: '数据统计',
path: '/pages/my/StatisticsInfo',
icon: require('@/static/icons/homeTopMenu/icon_maintain.png')
},
{
title: '消息通知',
path: '/pages/message/message',
icon: require('@/static/icons/homeTopMenu/icon_fitment.png')
}
],
1
2024-08-20 20:02:05 +08:00
msgSocket: this.$msgSocket,
showp: false,
title: '是否确认删除',
content: '是否确认删除',
dqcNum: 0,
dzfNum: 0,
jyzNum: 0,
ywcNum: 0,
role: [],
currentTime: '',
cityName: '济南',
positionInfo: '泸州',
msg: '1',
total: 0,
pageNum: 1, //第几页
pageSize: 10, //一页多少张
totalPages: 0, //总数
页面开发
2024-08-22 19:34:47 +08:00
orderList: [
// {
// rescueTypeStr: '扣车',
// rescuePosition: '四川省泸州市江阳区酒谷大道四段18号泸州',
// rescueStatus: 2,
// rescueStatusStr: '待救援',
// driverName: '先伟',
// driverCarNum: '川E69752',
// distance: 12800,
// needTime: 26,
// rescueTime: '2024-08-12 08:42'
// }
],
1
2024-08-20 20:02:05 +08:00
sjlist: [],
showDelete: false,
arrbox: [
// {text:'待支付',id:1},
// {text:'待评价',id:2},
],
keepLive: {
channelId: 'Ba-KeepAlive',
channelName: "Ba-KeepAlive",
title: "蓝安救援正在运行",
content: "蓝安救援正在运行",
dataResult: "",
type: undefined
},
one: true,
warnList: []
}
},
onLoad() {
this.role = uni.getStorageSync('role')
this.$startMsgSocket(uni.getStorageSync('userId'))
this.register()
this.jyPushStart()
页面开发
2024-08-22 19:34:47 +08:00
console.log(require('@/static/icons/homeTopMenu/icon_tenement.png'), "require");
样式调整
2024-08-23 18:41:57 +08:00
// #ifdef MP
const {barHeight, barTop, menuButtonLeft} = getWXStatusHeight()
console.log('barHeight, barTop, menuButtonLeft: ',barHeight, barTop, menuButtonLeft);
this.homeHeaderPaddingTop = barTop || 0
this.homeHeaderMenuHeight = barHeight
this.homeHeaderMenuLeft = menuButtonLeft - 6
// #endif
1
2024-08-20 20:02:05 +08:00
},
onShow() {
this.timeWeekFormat()
1
2024-08-24 11:00:51 +08:00
//this.getWarnList()
1
2024-08-20 20:02:05 +08:00
if (getToken()) {
this.Fourhammers()
this.getlist()
} else {
return
}
},
onReachBottom() {
if (this.pageNum >= this.totalPages) {
uni.showToast({
title: '没有下一页数据',
icon: 'none'
})
} else {
this.pageNum++
this.getlist()
}
},
components: {
tabBar,
页面开发
2024-08-22 19:34:47 +08:00
OrderCard
1
2024-08-20 20:02:05 +08:00
},
methods: {
jyPushStart() {
console.log("jyPushStart", jyJPush);
// 暂时只有安卓支持
jyJPush.registerSDKCallBack(sdkCallBack => {
// 这里会返回regid，
console.log("sdk Callback 结果 " + JSON.stringify(sdkCallBack));
})
// 此处只是演示 授权，实际应该弹出自己的隐私授权页面，或者用uniapp提供的隐私协议
setTimeout(function() {
jyJPush.setAuth({
auth: "1"
}, res => {
console.log("auth 结果 " + JSON.stringify(res));
if (res.errorCode == 0) {
// 安卓需要单独调用
if (uni.getSystemInfoSync().platform == 'android') {
jyJPush.android_init(initRes => {
console.log("init 结果 " + JSON.stringify(initRes));
jyJPush.deleteJYJPushAlias({
// 可以不用传值进去，但是需要配置这项数据
}, result => {
jyJPush.setJYJPushAlias({
userAlias: uni.getStorageSync('userId')
}, result => {
// 设置成功或者失败，都会通过这个result回调返回数据；数据格式保持极光返回的安卓/iOS数据一致
// 注：若没有返回任何数据，考虑是否初始化完成
console.log('setJYJPushAlias', result);
jyJPush.getJYJPushAlias({
// 可以不用传值进去，但是需要配置这项数据
}, result => {
console.log(
'getJYJPushAlias',
result);
});
});
});
})
}
}
})
}, 5000);
},
msgInfo() {
if (this.msgSocket) {
this.msgSocket.onMessage(res => {
console.log('触发首页的消息回调');
this.singleList = []
this.getthreelist()
this.driverRescuePage()
})
}
},
页面开发
2024-08-22 19:34:47 +08:00
/**
* 导航菜单跳转
*/
goToMenuPage(item) {
uni.navigateTo({
url: item.path
})
},
1
2024-08-20 20:02:05 +08:00
isRunning() { //是否正在运行
keepAlive.isRunning((res) => {
console.log('保活服务验证', res);
});
},
restart() { //重启
keepAlive.restart((res) => {
console.log('重启保活服务', res);
})
},
register() { //注册
页面开发
2024-08-22 20:13:57 +08:00
// #ifdef APP
1
2024-08-20 20:02:05 +08:00
console.log('keepAlive', keepAlivePlugin);
keepAlivePlugin.register({
channelId: this.keepLive.channelId,
channelName: this.keepLive.channelName,
title: this.keepLive.title,
content: this.keepLive.content,
},
(res) => {
console.log('保活注册', res);
});
页面开发
2024-08-22 20:13:57 +08:00
// #endif
1
2024-08-20 20:02:05 +08:00
},
页面开发
2024-08-22 19:34:47 +08:00
deleteOrderHandle() {
this.pageNum = 1
this.orderList = []
this.getlist()
},
1
2024-08-20 20:02:05 +08:00
getWarnList() {
this.warnList = []
request({
url: "/system/rescueCar/warnList",
method: 'get',
}).then(res => {
this.warnList = res.data
if (this.warnList.length > 0) {
this.showp = true
}
})
},
goToOrder(type) {
uni.navigateTo({
url: '/pages/rescue/historylist?id=' + type
})
},
gettel(num) {
uni.makePhoneCall({
phoneNumber: num //仅为示例
});
},
getsxwhat(id) {
uni.navigateTo({
url: '/pages/rescue/initiate?id=' + id + '&isAppointment=' + this.isAppointment
})
},
Fourhammers() {
request({
url: '/app/rescueInfo/getRescueStatistics',
method: 'get',
}).then((res) => {
console.log('四个', res);
this.dqcNum = res.data.dqcNum
this.dzfNum = res.data.dzfNum
this.jyzNum = res.data.jyzNum
this.ywcNum = res.data.ywcNum
})
},
timeWeekFormat() {
//定义一个日期对象;
var dateTime = new Date();
//获得系统年份;
var year = dateTime.getFullYear();
//获得系统月份;
var month = dateTime.getMonth() + 1;
//获得系统当月分天数;
var day = dateTime.getDate();
//获得系统小时;
var hours = dateTime.getHours();
//获得系统分钟;
var minutes = dateTime.getMinutes();
//获得系统秒数;
var second = dateTime.getSeconds();
//获得系统星期几;
var dayCycle = dateTime.getDay();
//使用数组更改日期样式;
var dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
for (var i = 0; i < 7; i++) {
if (dayCycle == i) {
//将dayCycleArray的数赋值到系统星期几里面中去;
dayCycle = dayCycleArray[i];
}
}
month < 10 ? month = '0' + month : month;
day < 10 ? day = '0' + day : day;
hours < 10 ? hours = '0' + hours : hours;
minutes < 10 ? minutes = '0' + minutes : minutes;
second < 10 ? second = '0' + second : second;
//打印完整的系统日期;
// this.dateStr = year + '-' + month + '-' + day + ' ';
this.currentTime = '星期' + dayCycle
// this.time = hours + ':' + minutes + ':' + second
},
getlist() {
let data = {
rescueStatus: 1,
pageSize: this.pageSize,
pageNum: this.pageNum,
}
request({
url: '/app/rescueInfo/getRescueList',
method: 'get',
params: data
}).then((res) => {
console.log('首页', res);
if (res.code == 200) {
if (this.pageNum != 1) {
this.orderList = this.orderList.concat(res.rows)
} else {
this.orderList = res.rows
}
let total = res.total
this.totalPages = Math.ceil(total / this.pageSize);
}
})
},
getone() {
this.one = !this.one
},
//一键救援
getyi() {
uni.navigateTo({
url: '/pages/rescue/order'
})
},
goisAppointment() {
uni.navigateTo({
url: '/pages/rescue/order?isAppointment=1'
})
},
getsx() {
uni.navigateTo({
url: '/pages/Detain/Detain'
})
},
//预约
getyue() {
uni.navigateTo({
url: '/pages/rescue/order'
})
},
godetail(id) {
uni.navigateTo({
url: '/pages/details/details?id=' + id
})
},
gohistory() {
uni.navigateTo({
url: '/pages/rescue/historylist?id=1'
})
}
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: calc(100vh);
页面开发
2024-08-22 19:34:47 +08:00
background-color: #F7F8FC;
1
2024-08-20 20:02:05 +08:00
}
.dil {
页面开发
2024-08-22 19:34:47 +08:00
background-color: #F7F8FC;
1
2024-08-20 20:02:05 +08:00
box-sizing: border-box;
页面开发
2024-08-22 19:34:47 +08:00
padding: 0 40rpx;
}
.content-top {
padding: 90rpx 40rpx 0;
background-color: #327DFB;
1
2024-08-20 20:02:05 +08:00
}
.top-two {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.top-left {
样式调整
2024-08-23 18:41:57 +08:00
height: 58rpx;
1
2024-08-20 20:02:05 +08:00
box-sizing: border-box;
样式调整
2024-08-23 18:41:57 +08:00
// border-radius: 50px;
// background-color: #D1EDFF;
1
2024-08-20 20:02:05 +08:00
display: flex;
justify-content: space-between;
overflow: hidden;
}
.left1 {
样式调整
2024-08-23 18:41:57 +08:00
width: 112rpx;
height: 58rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 200rpx 0rpx 0rpx 200rpx;
font-size: 26rpx;
1
2024-08-20 20:02:05 +08:00
color: white;
font-weight: 400;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.left2 {
样式调整
2024-08-23 18:41:57 +08:00
width: 146rpx;
height: 58rpx;
background: #FFFFFF;
border-radius: 0rpx 29rpx 29rpx 0rpx;
font-size: 26rpx;
1
2024-08-20 20:02:05 +08:00
color: #207EFE;
font-weight: 400;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.top-right {
display: flex;
align-items: center;
样式调整
2024-08-23 18:41:57 +08:00
font-size: 34rpx;
1
2024-08-20 20:02:05 +08:00
font-weight: 400;
页面开发
2024-08-22 19:34:47 +08:00
color: #fff;
样式调整
2024-08-23 18:41:57 +08:00
line-height: 1;
.top-right-icon {
width: 44rpx;
height: 44rpx;
}
1
2024-08-20 20:02:05 +08:00
}
页面开发
2024-08-22 19:34:47 +08:00
.top-menu {
1
2024-08-20 20:02:05 +08:00
display: flex;
justify-content: space-between;
样式调整
2024-08-23 18:41:57 +08:00
padding: 50rpx 0 36rpx;
页面开发
2024-08-22 19:34:47 +08:00
}
.top-menu-item {
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 12rpx;
样式调整
2024-08-23 18:41:57 +08:00
font-size: 28rpx;
页面开发
2024-08-22 19:34:47 +08:00
}
.top-menu-item-icon {
width: 60rpx;
height: 60rpx;
}
1
2024-08-20 20:02:05 +08:00
页面开发
2024-08-22 19:34:47 +08:00
.four-box-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 34rpx 0;
}
.four-box-header-title {
font-weight: bold;
}
.four-box-header-extra {
font-size: 24rpx;
}
.four-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24rpx;
// margin-top: 15px;
width: 100%;
1
2024-08-20 20:02:05 +08:00
}
.ques {
width: 80%;
页面开发
2024-08-22 19:34:47 +08:00
margin: 0 auto;
1
2024-08-20 20:02:05 +08:00
image {
width: 100%;
}
}
.boxf {
页面开发
2024-08-22 19:34:47 +08:00
height: 140rpx;
1
2024-08-20 20:02:05 +08:00
overflow: hidden;
box-sizing: border-box;
border-radius: 6px;
padding: 12px;
页面开发
2024-08-22 19:34:47 +08:00
background-image: url('~@/static/images/homeOrderCard/dzf.png');
1
2024-08-20 20:02:05 +08:00
background-size: cover;
background-position: center;
页面开发
2024-08-22 20:13:57 +08:00
display: flex;
flex-direction: column;
justify-content: center;
1
2024-08-20 20:02:05 +08:00
}
.boxf1 {
height: 84px;
overflow: hidden;
box-sizing: border-box;
border-radius: 6px;
padding: 12px;
页面开发
2024-08-22 19:34:47 +08:00
background-image: url('~@/static/images/homeOrderCard/dqc.png');
1
2024-08-20 20:02:05 +08:00
background-size: cover;
background-position: center;
页面开发
2024-08-22 20:13:57 +08:00
display: flex;
flex-direction: column;
justify-content: center;
1
2024-08-20 20:02:05 +08:00
}
.boxf2 {
height: 84px;
overflow: hidden;
box-sizing: border-box;
border-radius: 6px;
padding: 12px;
页面开发
2024-08-22 19:34:47 +08:00
background-image: url('~@/static/images/homeOrderCard/jyz.png');
1
2024-08-20 20:02:05 +08:00
background-size: cover;
background-position: center;
页面开发
2024-08-22 20:13:57 +08:00
display: flex;
flex-direction: column;
justify-content: center;
1
2024-08-20 20:02:05 +08:00
}
.boxf3 {
height: 84px;
overflow: hidden;
box-sizing: border-box;
border-radius: 6px;
padding: 12px;
页面开发
2024-08-22 19:34:47 +08:00
background-image: url('~@/static/images/homeOrderCard/ywc.png');
1
2024-08-20 20:02:05 +08:00
background-size: cover;
background-position: center;
页面开发
2024-08-22 20:13:57 +08:00
display: flex;
flex-direction: column;
justify-content: center;
1
2024-08-20 20:02:05 +08:00
}
.zi1 {
页面开发
2024-08-22 19:34:47 +08:00
font-size: 24rpx;
color: #333;
display: flex;
align-items: center;
column-gap: 10rpx;
.zi1-icon {
width: 38rpx;
height: 38rpx;
}
1
2024-08-20 20:02:05 +08:00
}
.zi2 {
width: 100%;
页面开发
2024-08-22 19:34:47 +08:00
font-size: 40rpx;
1
2024-08-20 20:02:05 +08:00
font-weight: bold;
页面开发
2024-08-22 19:34:47 +08:00
color: #000;
1
2024-08-20 20:02:05 +08:00
}
.box-tap {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 25px;
}
.tap-left {
display: flex;
}
.tap-right {
display: flex;
align-items: center;
}
.zi3 {
font-size: 14px;
font-weight: 400;
color: #666666;
}
.left-img1 {
width: 65px;
height: 15px;
margin-right: 20px;
// smargin-bottom: 10px;
image {
width: 100%;
height: 100%;
}
}
.gang {
width: 60px;
height: 5px;
border-radius: 50px;
margin-top: 6px;
background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
}
.tap-box {
}
.boxt {
// height: 110px;
width: 100%;
background-color: white;
border-radius: 6px;
margin-top: 14px;
overflow: hidden;
display: flex;
box-sizing: border-box;
padding-bottom: 15px;
}
.boxt-left {
width: 100%;
height: 100%;
}
.left-lan {
width: 50px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
background-color: #207EFE;
font-size: 14px;
color: white;
border-radius: 0px 0px 6px 0px;
}
.text1 {
margin-left: 24px;
margin-top: 5px;
color: #333333;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.lanzi {
font-weight: bold;
color: #4C98FF;
}
.text2 {
margin-left: 24px;
margin-top: 5px;
color: #333333;
font-size: 16px;
font-weight: 400;
color: #333333;
}
.boxt-right {
width: 50%;
height: 100%;
position: relative;
}
.zhtai {
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 25px;
box-sizing: border-box;
background: #FFD7D7;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
color: #FF4C4C;
font-size: 14px;
}
.zhtait {
position: absolute;
top: 50px;
right: 10px;
width: 60px;
height: 25px;
box-sizing: border-box;
background: #d5e8ff;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
color: #53b5ff;
font-size: 14px;
}
.dianhua {
position: absolute;
bottom: -120px;
right: 10px;
display: flex;
font-size: 14px;
font-weight: 400;
color: #3289FF;
}
.dianhuad {
display: flex;
font-size: 14px;
font-weight: 400;
color: #ff1d3b;
}
.ticon {
width: 12px;
height: 13px;
margin-right: 5px;
image {
width: 100%;
height: 100%;
}
}
.yijian {
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 10px;
height: 40px;
font-size: 16px;
页面开发
2024-08-22 19:34:47 +08:00
background: #327DFB;
color: #fff;
margin-top: 30rpx;
1
2024-08-20 20:02:05 +08:00
}
.y-left {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 10px;
页面开发
2024-08-22 19:34:47 +08:00
background: #327DFB;
1
2024-08-20 20:02:05 +08:00
}
.y-right {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.kou {
position: fixed;
right: 5px;
bottom: 80px;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
z-index: 99;
image {
width: 100%;
height: 100%;
}
}
.box {
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
页面开发
2024-08-22 20:13:57 +08:00
// .xz-box {
// height: 80px;
// width: 48%;
// display: flex;
// justify-content: center;
// align-items: center;
// font-size: 16px;
// font-weight: 400;
// color: #FFFFFF;
// background-size: cover;
// background-position: center;
// margin-top: 20px;
// }
1
2024-08-20 20:02:05 +08:00
.xz-box {
页面开发
2024-08-22 20:13:57 +08:00
width: 330rpx;
height: 396rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
border-radius: 16rpx;
1
2024-08-20 20:02:05 +08:00
display: flex;
页面开发
2024-08-22 20:13:57 +08:00
flex-direction: column;
1
2024-08-20 20:02:05 +08:00
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 400;
color: #FFFFFF;
页面开发
2024-08-22 20:13:57 +08:00
margin-top: 36rpx;
transition: all ease 400ms;
overflow: hidden;
.checkedFlagIcon {
display: none;
}
&.checked {
box-sizing: border-box;
position: relative;
border: 2rpx solid #478AFA;
.checkedFlag {
background-color: #478AFA;
width: 120rpx;
height: 120rpx;
position: absolute;
right: -60rpx;
bottom: -60rpx;
transform: rotate(45deg);
z-index: 1;
}
.checkedFlagIcon {
display: inline-block;
position: absolute;
z-index: 2;
bottom: 0;
right: 0;
}
}
.xz-box-icon {
width: 130rpx;
height: 130rpx;
margin-bottom: 26rpx;
}
.box-wenzi {
font-size: 28rpx;
color: #000000;
}
1
2024-08-20 20:02:05 +08:00
}
#y1 {
background-image: url('../../static/tc.png');
}
#y2 {
background-image: url('../../static/sy.png');
}
#y3 {
background-image: url('../../static/dd.png');
}
#y4 {
background-image: url('../../static/ht.png');
}
#y5 {
background-image: url('../../static/kc.png');
}
.box_ {
width: 320px;
border-radius: 8px;
box-sizing: border-box;
padding: 15px;
background: white;
}
.title_ {
width: 100%;
text-align: center;
margin-bottom: 10px;
font-size: 17px;
font-weight: bold;
}
.size_ {
font-size: 16px;
color: #666;
margin: 5px 0px;
text-align: center;
}
.annaiu {
width: 100%;
height: 60px;
border-top: 1px solid #f3f3f3;
box-sizing: border-box;
padding-top: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #244ec6;
}
</style>
Reference in New Issue Copy Permalink