937 lines
19 KiB
Vue
937 lines
19 KiB
Vue
<!-- 道路救援 首页-->
|
|
<template>
|
|
<view class="content">
|
|
<view class="dil">
|
|
<!-- 顶部 -->
|
|
<view class="content-top" :style="{ paddingTop: homeHeaderPaddingTop + 'px' }">
|
|
<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 style="color: #fff;" class="">{{positionInfo}}</view>
|
|
<!-- <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> -->
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标签切换 -->
|
|
<!-- <view class="yijian">
|
|
<view class="y-left" @click="gosg()">
|
|
<view class="">救援</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="box">
|
|
<view class="xz-box" id="y3" @click="getsxs(6)">
|
|
<view class="box-wenzi">事故救援</view>
|
|
</view>
|
|
<view class="xz-box" id="y3" @click="getsxs(7)">
|
|
<view class="box-wenzi">秩序救援</view>
|
|
</view>
|
|
<view class="xz-box" id="y3" @click="getsxs(5)">
|
|
<view class="box-wenzi">扣车</view>
|
|
</view>
|
|
<view class="xz-box" id="y4" @click="getsx()">
|
|
<view class="box-wenzi">解扣</view>
|
|
</view>
|
|
|
|
</view>
|
|
<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="boxtList">
|
|
<view class="boxt" v-for="(item,index) in orderList" :key="index">
|
|
<view class="orderCardHeader">
|
|
<text class="orderCardType">{{item.rescueTypeStr}}</text> <text
|
|
class="orderCardTitle">{{ item.rescuePosition }}</text>
|
|
</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="orderCardStatus">
|
|
<view class="orderCardStatusData">
|
|
<view v-if="item.rescueStatus == 1" class="orderCardSendOrders">
|
|
预约单
|
|
</view>
|
|
<view v-if="item.rescueStatus == 2" class="orderCardSendOrders">
|
|
系统正在派单中...
|
|
</view>
|
|
<template v-if="item.rescueStatus == 3">
|
|
<image src="@/static/icons/homeOrderCard/dhjl.png" class="orderCardDistanceIcon" mode="aspectFit">
|
|
</image>
|
|
<text class="orderCardDistanceValue">{{item.distance / 1000 || 0}}KM</text>
|
|
|
|
<image src="@/static/icons/homeOrderCard/yjsj.png" class="orderCardPredictIcon"></image>
|
|
<text class="orderCardPredictDate">{{item.needTime || 0}}分钟</text>
|
|
到达
|
|
</template>
|
|
</view>
|
|
<text :class="{ toRescued: item.rescueStatus <= 2, inRescue: item.rescueStatus > 2 }"
|
|
class="orderCardFlag">
|
|
<template v-if="item.rescueStatus <= 2">{{item.rescueStatusStr}}</template>
|
|
<template v-if="item.rescueStatus > 2">{{item.rescueStatusStr}}</template>
|
|
</text>
|
|
</view>
|
|
<view class="orderCardProcess">
|
|
|
|
<view v-if="item.rescueStatus > 2">
|
|
<text class="orderCardDriver">{{ item.driverName || "" }}</text>
|
|
驾驶
|
|
<text class="orderCardCarNo">{{ item.driverCarNum || "" }}</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="" v-if="item.rescueStatus > 2">
|
|
<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> -->
|
|
<view class="orderCardFooter">
|
|
<text class="orderCardDateTime">{{ item.rescueTime || "" }}</text>
|
|
<view class="orderCardBtnGroup">
|
|
<view v-if="role[0] == 'ddzx' && item.rescueStatus <= 2 " @click="getzhipai(item.id)"
|
|
class="orderCardBtnGroupItem">指派司机</view>
|
|
<view v-if="item.rescueStatus > 2" @click="gettel(item.driverPhoneNum)" class="orderCardBtnGroupItem">
|
|
联系司机</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="boxt-right">
|
|
<view class="zhtai">
|
|
<view class="">{{item.rescueStatusStr}}</view>
|
|
</view>
|
|
|
|
<view class="dianhua" v-if="role[0] == 'ddzx' && item.rescueStatus <= 2 " @click="getzhipai(item.id)">
|
|
|
|
<view class="">指派司机</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>
|
|
<!-- 一键救援 -->
|
|
<!-- <view class="kou" v-if="role[0] == 'jjdd' " @click="getsx()">
|
|
<image src="../../static/kou.png" mode=""></image>
|
|
</view> -->
|
|
<view style="width: 100%; height: 80px; "></view>
|
|
<!-- dibu -->
|
|
</view>
|
|
<u-picker :show="show" :columns="columns" @confirm="confirms" @cancel="cancels" keyName="realName"></u-picker>
|
|
<tabBar :msg="msg"></tabBar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request';
|
|
import tabBar from '../../components/tabBar/tabBar.vue'
|
|
// import { getWeather } from'../../utils/Weather'
|
|
import {
|
|
getWXStatusHeight
|
|
} from '@/utils/utils.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// #ifdef MP
|
|
homeHeaderPaddingTop: 0,
|
|
homeHeaderMenuHeight: 0,
|
|
homeHeaderMenuLeft: 0,
|
|
// #endif
|
|
// #ifdef APP || H5
|
|
homeHeaderPaddingTop: uni.upx2px(90),
|
|
homeHeaderMenuHeight: 50,
|
|
homeHeaderMenuLeft: 0,
|
|
// #endif
|
|
show: false,
|
|
id: '',
|
|
dqcNum: 0,
|
|
dzfNum: 0,
|
|
jyzNum: 0,
|
|
ywcNum: 0,
|
|
role: [],
|
|
currentTime: '',
|
|
cityName: '济南',
|
|
positionInfo: '泸州',
|
|
msg: '8',
|
|
total: 0,
|
|
pageNum: 1, //第几页
|
|
pageSize: 10, //一页多少张
|
|
totalPages: 0, //总数
|
|
orderList: [],
|
|
sjlist: [],
|
|
arrbox: [
|
|
// {text:'待支付',id:1},
|
|
// {text:'待评价',id:2},
|
|
],
|
|
columns: [
|
|
|
|
],
|
|
one: true,
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.role = uni.getStorageSync('role')
|
|
// #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
|
|
},
|
|
onShow() {
|
|
this.Fourhammers()
|
|
this.timeWeekFormat()
|
|
this.getsjlist()
|
|
this.getlist()
|
|
},
|
|
onReachBottom() {
|
|
console.log('执行了');
|
|
if (this.pageNum >= this.totalPages) {
|
|
uni.showToast({
|
|
title: '没有下一页数据',
|
|
icon: 'none'
|
|
})
|
|
|
|
} else {
|
|
this.pageNum++
|
|
|
|
this.getlist()
|
|
}
|
|
},
|
|
components: {
|
|
tabBar,
|
|
},
|
|
methods: {
|
|
gosg() {
|
|
uni.navigateTo({
|
|
url: '/pages/rescue/PoliceOder'
|
|
})
|
|
},
|
|
gettel(num) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: num //仅为示例
|
|
});
|
|
},
|
|
getsjlist() {
|
|
request({
|
|
url: '/app/rescueInfo/driverInMap?searchValue=',
|
|
method: 'get',
|
|
}).then((res) => {
|
|
console.log('返回信息', res);
|
|
this.columns.push(res.data)
|
|
|
|
})
|
|
},
|
|
getzhipai(id) {
|
|
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.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
|
|
})
|
|
},
|
|
getsxs(id) {
|
|
if (id == 8) {
|
|
uni.navigateTo({
|
|
url: '/pages/Detain/Detain'
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/rescue/initiate?id=' + id + '&isAppointment=' + this.isAppointment
|
|
})
|
|
}
|
|
},
|
|
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
|
|
console.log(this.week);
|
|
// return dateStr;
|
|
},
|
|
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;
|
|
|
|
}
|
|
|
|
.content-top {
|
|
padding: 90rpx 40rpx 30rpx;
|
|
background-color: #327DFB;
|
|
}
|
|
|
|
.top-two {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-left {
|
|
height: 58rpx;
|
|
box-sizing: border-box;
|
|
// border-radius: 50px;
|
|
// background-color: #D1EDFF;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.left1 {
|
|
width: 112rpx;
|
|
height: 58rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 200rpx 0rpx 0rpx 200rpx;
|
|
font-size: 26rpx;
|
|
color: white;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.left2 {
|
|
width: 146rpx;
|
|
height: 58rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 0rpx 29rpx 29rpx 0rpx;
|
|
font-size: 26rpx;
|
|
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: 34rpx;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
line-height: 1;
|
|
|
|
.top-right-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.orderCardHeader {
|
|
line-height: 1.5;
|
|
|
|
.orderCardType {
|
|
background-color: #EAF1FE;
|
|
color: #317DFA;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 16rpx 0 16rpx 0;
|
|
font-size: 24rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.orderCardTitle {
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.orderCardStatus {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.orderCardStatusData {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 4rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.orderCardDistanceIcon,
|
|
.orderCardPredictIcon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
.orderCardDistanceValue {
|
|
color: #919191;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.orderCardFlag {
|
|
font-size: 24rpx;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 4rpx;
|
|
|
|
&.inRescue {
|
|
background-color: #ECF8EA;
|
|
color: #2FB821;
|
|
}
|
|
|
|
&.toRescued {
|
|
background-color: #FAE9E9;
|
|
color: #D42424;
|
|
}
|
|
}
|
|
|
|
.orderCardProcess {}
|
|
|
|
.orderCardSendOrders,
|
|
.orderCardDriver,
|
|
.orderCardCarNo {
|
|
color: #317DFA;
|
|
}
|
|
|
|
.orderCardFooter {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.orderCardDateTime {
|
|
color: #919191;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.orderCardBtnGroup {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 16rpx;
|
|
}
|
|
|
|
.orderCardBtnGroupItem {
|
|
background-color: #317DFA;
|
|
color: #fff;
|
|
border: 1px solid #317DFA;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 28rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.dil {
|
|
background-color: #F6F6F6;
|
|
box-sizing: border-box;
|
|
padding: 45px 12px;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.boxtList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
.boxt {
|
|
background-color: #fff;
|
|
padding: 24rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 22rpx;
|
|
box-shadow: 2rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.boxt-left {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.left-lan {
|
|
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: -110px;
|
|
right: 10px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #3289FF;
|
|
|
|
}
|
|
|
|
.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');
|
|
}
|
|
</style> |