1013 lines
21 KiB
Vue
1013 lines
21 KiB
Vue
<!-- 道路救援 首页-->
|
||
<template>
|
||
<view class="content">
|
||
<view class="dil">
|
||
<!-- 顶部 -->
|
||
<view class="top-two">
|
||
<view class="top-left">
|
||
<view class="left1">
|
||
<text>当前时间</text>
|
||
</view>
|
||
<view class="left2">
|
||
<text>{{currentTime || ''}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef APP-PLUS || H5 -->
|
||
<view class="top-right">
|
||
<view class="">
|
||
<uni-icons type="location-filled" color="#4282D8" size="16"></uni-icons>
|
||
</view>
|
||
<view class="">{{positionInfo}}</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
</view>
|
||
<!-- 四个选项 -->
|
||
<!-- #ifdef APP-PLUS || H5 -->
|
||
<view class="four-box">
|
||
<view class="boxf" @click="goToOrder(2)">
|
||
<view class="zi1">待支付</view>
|
||
<view class="zi2">{{dzfNum}}</view>
|
||
</view>
|
||
<view class="boxf1" @click="goToOrder(3)">
|
||
<view class="zi1">待取车</view>
|
||
<view class="zi2">{{dqcNum }}</view>
|
||
</view>
|
||
<view class="boxf2" @click="goToOrder(1)">
|
||
<view class="zi1">救援中</view>
|
||
<view class="zi2">{{jyzNum}}</view>
|
||
</view>
|
||
<view class="boxf3" @click="goToOrder(5)">
|
||
<view class="zi1">已完成</view>
|
||
<view class="zi2">{{ywcNum }}</view>
|
||
</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">
|
||
<view class="xz-box" id="y1" @click="getsxwhat(1)">
|
||
<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>
|
||
</view>
|
||
<!-- <view class="xz-box" v-if="role[0] == 'jjdd' " id="y5" @click="getsx(5)">
|
||
<view class="box-wenzi">扣车</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- 标签切换 -->
|
||
|
||
|
||
<view class="box-tap">
|
||
<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>
|
||
<view class="zi3" style="margin-right: 20px;" v-if="one == false" @click="getone()">救援中</view>
|
||
|
||
<!-- <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> -->
|
||
</view>
|
||
<view class="tap-right" @click="gohistory()">
|
||
<view class="zi3">
|
||
历史订单
|
||
</view>
|
||
<view class="">
|
||
<uni-icons color: #666666; type="right" size="18"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tap-box">
|
||
<view class="ques" v-if="orderList.length== 0 ">
|
||
<image src="../../static/quesheng.png" mode=""></image>
|
||
</view>
|
||
<view class="boxt" v-for="(item,index) in orderList" :key="index">
|
||
<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>
|
||
<!-- v-if="role[0] == 'ddzx'" -->
|
||
|
||
<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>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 一键救援 -->
|
||
|
||
<view style="width: 100%; height: 80px; "></view>
|
||
<!-- dibu -->
|
||
</view>
|
||
<u-modal :show="showDelete" :title="title" :showCancelButton="true" @confirm="confirm"
|
||
@cancel="cancel"></u-modal>
|
||
<u-picker :show="show" :columns="columns" @confirm="confirms" @cancel="cancels" keyName="realName"></u-picker>
|
||
<u-popup :show="showp" @close="close" @open="open" mode="center" :round="10">
|
||
<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'
|
||
const keepAlivePlugin = uni.requireNativePlugin('Ba-KeepAlive')
|
||
const jyJPush = uni.requireNativePlugin('JY-JPush');
|
||
// import { getWeather } from'../../utils/Weather'
|
||
export default {
|
||
data() {
|
||
return {
|
||
msgSocket: this.$msgSocket,
|
||
showp: false,
|
||
title: '是否确认删除',
|
||
content: '是否确认删除',
|
||
show: false,
|
||
id: '',
|
||
did: '',
|
||
dqcNum: 0,
|
||
dzfNum: 0,
|
||
jyzNum: 0,
|
||
ywcNum: 0,
|
||
role: [],
|
||
currentTime: '',
|
||
cityName: '济南',
|
||
positionInfo: '泸州',
|
||
msg: '1',
|
||
total: 0,
|
||
pageNum: 1, //第几页
|
||
pageSize: 10, //一页多少张
|
||
totalPages: 0, //总数
|
||
orderList: [],
|
||
sjlist: [],
|
||
showDelete: false,
|
||
arrbox: [
|
||
// {text:'待支付',id:1},
|
||
// {text:'待评价',id:2},
|
||
],
|
||
keepLive: {
|
||
channelId: 'Ba-KeepAlive',
|
||
channelName: "Ba-KeepAlive",
|
||
title: "蓝安救援正在运行",
|
||
content: "蓝安救援正在运行",
|
||
dataResult: "",
|
||
type: undefined
|
||
},
|
||
columns: [],
|
||
one: true,
|
||
warnList: []
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.role = uni.getStorageSync('role')
|
||
this.$startMsgSocket(uni.getStorageSync('userId'))
|
||
this.register()
|
||
this.jyPushStart()
|
||
},
|
||
onShow() {
|
||
this.timeWeekFormat()
|
||
this.getWarnList()
|
||
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,
|
||
},
|
||
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()
|
||
|
||
})
|
||
}
|
||
},
|
||
isRunning() { //是否正在运行
|
||
keepAlive.isRunning((res) => {
|
||
console.log('保活服务验证', res);
|
||
|
||
});
|
||
},
|
||
restart() { //重启
|
||
keepAlive.restart((res) => {
|
||
console.log('重启保活服务', res);
|
||
|
||
})
|
||
},
|
||
register() { //注册
|
||
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);
|
||
});
|
||
},
|
||
getWarnList() {
|
||
this.warnList = []
|
||
request({
|
||
url: "/system/rescueCar/warnList",
|
||
method: 'get',
|
||
}).then(res => {
|
||
this.warnList = res.data
|
||
if (this.warnList.length > 0) {
|
||
this.showp = true
|
||
}
|
||
})
|
||
},
|
||
deleteId(id) {
|
||
this.showDelete = true
|
||
this.did = id
|
||
return
|
||
|
||
|
||
},
|
||
confirm() {
|
||
|
||
|
||
|
||
request({
|
||
url: "/app/rescueInfo/delRescueInfo?id=" + this.did,
|
||
method: 'post',
|
||
|
||
}).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: "删除成功"
|
||
})
|
||
this.pageNum = 1
|
||
this.orderList = []
|
||
this.getlist()
|
||
}
|
||
})
|
||
this.showDelete = false
|
||
},
|
||
cancel() {
|
||
console.log("取消");
|
||
this.showDelete = false
|
||
},
|
||
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
|
||
})
|
||
},
|
||
getsjlist() {
|
||
this.columns = []
|
||
// 获取司机信息
|
||
request({
|
||
url: '/app/rescueInfo/driverInMap?searchValue=',
|
||
method: 'get',
|
||
}).then((res) => {
|
||
this.columns.push(res.data)
|
||
})
|
||
},
|
||
getzhipai(id) {
|
||
this.getsjlist()
|
||
this.id = id
|
||
this.show = true
|
||
},
|
||
confirms(e) {
|
||
console.log(e);
|
||
let data = {
|
||
rescueId: this.id,
|
||
driverId: e.value[0].id
|
||
}
|
||
request({
|
||
url: '/system/rescueInfo/designateDriver',
|
||
method: 'post',
|
||
params: data
|
||
}).then((res) => {
|
||
console.log('确认司机', res);
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '指派成功'
|
||
})
|
||
this.orderList = []
|
||
this.getlist()
|
||
}
|
||
})
|
||
this.show = false
|
||
},
|
||
cancels() {
|
||
this.show = false
|
||
},
|
||
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);
|
||
background-color: #F6F6F6;
|
||
|
||
}
|
||
|
||
.dil {
|
||
background-color: #F6F6F6;
|
||
box-sizing: border-box;
|
||
padding: 45px 12px;
|
||
}
|
||
|
||
.top-two {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.top-left {
|
||
width: 180px;
|
||
height: 26px;
|
||
box-sizing: border-box;
|
||
border-radius: 50px;
|
||
background-color: #D1EDFF;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.left1 {
|
||
width: 50%;
|
||
background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
|
||
font-size: 13px;
|
||
color: white;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.left2 {
|
||
width: 50%;
|
||
background: #D1EDFF;
|
||
font-size: 13px;
|
||
color: #207EFE;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.top-right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #4282D8;
|
||
}
|
||
|
||
.four-box {
|
||
margin-top: 15px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
|
||
}
|
||
|
||
.ques {
|
||
width: 80%;
|
||
margin: 10px auto;
|
||
|
||
image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.boxf {
|
||
margin-top: 6px;
|
||
height: 84px;
|
||
width: 49%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
background-image: url('../../static/dzf.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.boxf1 {
|
||
margin-top: 6px;
|
||
height: 84px;
|
||
width: 49%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
background-image: url('../../static/dpq.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.boxf2 {
|
||
margin-top: 6px;
|
||
height: 84px;
|
||
width: 49%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
background-image: url('../../static/zxz.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.boxf3 {
|
||
margin-top: 6px;
|
||
height: 84px;
|
||
width: 49%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
background-image: url('../../static/yyd.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.zi1 {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.zi2 {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.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 {
|
||
margin-top: 24px;
|
||
background-color: #F6F6F6;
|
||
}
|
||
|
||
.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;
|
||
background: #F3BA60;
|
||
color: #542F0E;
|
||
margin-top: 22px;
|
||
}
|
||
|
||
.y-left {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10px;
|
||
background: #FFE3AC;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
|
||
}
|
||
|
||
#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> |