789 lines
23 KiB
Vue
789 lines
23 KiB
Vue
<template>
|
|
<!-- 顶部统计 -->
|
|
<div class="top-box" v-if="data">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<div class="grid-content ep-bg-purple">
|
|
<el-card style="max-width: 100%" shadow="never">
|
|
<el-row :gutter="5" v-if="data.taskStatusVO">
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 任务总数 </div>
|
|
<div class="top-item-num"> {{ data.taskStatusVO.tasksNumber || 0 }} </div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 执行中 </div>
|
|
<div class="top-item-num"> {{ data.taskStatusVO.underwayNum || 0 }} </div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 待执行 </div>
|
|
<div class="top-item-num"> {{ data.taskStatusVO.pendingExecutionNum || 0 }} </div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 已完成 </div>
|
|
<div class="top-item-num"> {{ data.taskStatusVO.completedNum || 0 }} </div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 已取消 </div>
|
|
<div class="top-item-num" style="color: #a6a6a6">
|
|
{{ data.cancelledNum || 0 }}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item" style="border: none; color: #c60606">
|
|
<div class="top-item-title"> 异常 </div>
|
|
<div class="top-item-num" style="color: #c60606">
|
|
{{ data.taskStatusVO.abnormalNum || 0 }}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="grid-content ep-bg-purple">
|
|
<el-card style="max-width: 100%" shadow="never">
|
|
<el-row :gutter="5" v-if="data.statistics">
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 车辆总数 </div>
|
|
<div class="top-item-num"> {{ data.statistics.total || 0 }} </div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 任务中 </div>
|
|
<div class="top-item-num"> {{ data.statistics.inTask || 0 }} </div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 锁定 </div>
|
|
<div class="top-item-num"> {{ data.statistics.doLock || 0 }} </div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 充电中 </div>
|
|
<div class="top-item-num"> {{ data.statistics.charge || 0 }} </div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item">
|
|
<div class="top-item-title"> 离线 </div>
|
|
<div class="top-item-num" style="color: #a6a6a6">
|
|
{{ data.statistics.offline || 0 }}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top-item" style="border: none; color: #c60606">
|
|
<div class="top-item-title"> 故障 </div>
|
|
<div class="top-item-num" style="color: #c60606">
|
|
{{ data.statistics.fault || 0 }}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- 下部分 -->
|
|
<div class="bottom-box">
|
|
<el-row :gutter="10">
|
|
<!-- 左边 -->
|
|
<el-col :span="6">
|
|
<div class="bottom-box-item" v-if="data">
|
|
<div class="bottom-box-item-table">
|
|
<div class="bottom-box-item-title">
|
|
<div class="bottom-box-item-title-left"> 执行中 </div>
|
|
<div class="bottom-box-item-title-right" @click="toManyTask('执行中')">
|
|
查看更多
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-table :data="data.underway" style="width: 100%">
|
|
<el-table-column prop="taskNo" label="任务编号" />
|
|
<el-table-column prop="skuNumber" label="车辆编号" />
|
|
<el-table-column prop="startTime" label="开始时间" :formatter="dateFormatter" />
|
|
<el-table-column prop="address" label="任务阶段" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-box-item" style="margin-top: 8px" v-if="data">
|
|
<div class="bottom-box-item-table">
|
|
<div class="bottom-box-item-title">
|
|
<div class="bottom-box-item-title-left"> 待执行 </div>
|
|
<div class="bottom-box-item-title-right" @click="toManyTask('未开始')">
|
|
查看更多
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-table :data="data.pendingExecution" style="width: 100%">
|
|
<el-table-column prop="taskNo" label="任务编号" />
|
|
<el-table-column prop="priorilty" label="优先级" />
|
|
<el-table-column prop="createTime" label="生成时间" :formatter="dateFormatter" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<!-- 实时地图 -->
|
|
<el-col :span="12">
|
|
<div style="margin-bottom: 10px">
|
|
<el-cascader
|
|
v-model="mapValue"
|
|
:options="list"
|
|
@change="handleChangeMap"
|
|
style="width: 160px"
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; padding-bottom: 120px" class="map-box-allBoard">
|
|
<indexPage ref="indexPageRef" :isAllBoard="true" :isFullScreen="true" />
|
|
</div>
|
|
<div
|
|
style="position: fixed; bottom: 20px"
|
|
:style="{ width: widthVal + 'px', left: leftVal + 'px' }"
|
|
v-if="data && data.deviceStatusInfoVOS"
|
|
>
|
|
<div
|
|
ref="scrollContainer"
|
|
class="scroll-container"
|
|
@mousedown="startDrag"
|
|
@mousemove="onDrag"
|
|
@mouseup="endDrag"
|
|
@mouseleave="endDrag"
|
|
>
|
|
<div class="content">
|
|
<div
|
|
v-for="(n, i) in data.deviceStatusInfoVOS"
|
|
:key="i"
|
|
class="item"
|
|
:class="{ noBoarder: i === data.deviceStatusInfoVOS.length - 1 }"
|
|
>
|
|
<div class="scroll-container-item-left">
|
|
<div class="scroll-container-item-left-title">{{
|
|
filterTypeFun(n.deviceType, typeList)
|
|
}}</div>
|
|
<div class="scroll-container-item-left-img">
|
|
<img
|
|
:src="n.defaultImage"
|
|
alt=""
|
|
object-fit="contain"
|
|
style="width: 100%; height: 100%"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-container-item-right">
|
|
<div class="scroll-container-item-right-item">
|
|
<div class="scroll-container-item-right-item-title"> 数量： </div>
|
|
<div class="scroll-container-item-right-item-num">
|
|
{{ n.totalNum || 0 }}
|
|
</div>
|
|
</div>
|
|
<div class="scroll-container-item-right-item" style="margin-top: 3px">
|
|
<div class="scroll-container-item-right-item-title"> 正常数量： </div>
|
|
<div class="scroll-container-item-right-item-num">
|
|
{{ n.normalNum || 0 }}
|
|
</div>
|
|
</div>
|
|
<div class="scroll-container-item-right-item" style="margin-top: 3px">
|
|
<div class="scroll-container-item-right-item-title"> 异常数量： </div>
|
|
<div class="scroll-container-item-right-item-num" style="color: #c60606">
|
|
{{ n.abnormalNum || 0 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<!-- 右边 -->
|
|
<el-col :span="6">
|
|
<div class="bottom-box-item" v-if="data">
|
|
<div class="bottom-box-item-table">
|
|
<div class="bottom-box-item-title">
|
|
<div class="bottom-box-item-title-left"> 异常信息 </div>
|
|
<div class="bottom-box-item-title-right" @click="toManyWarnMsg"> 查看更多 </div>
|
|
</div>
|
|
<div>
|
|
<el-table :data="data.robotWarnMsgDOS" style="width: 100%">
|
|
<el-table-column prop="robotNo" label="车辆编号" />
|
|
<el-table-column prop="warnMsg" label="异常信息">
|
|
<template #default="scope">
|
|
<div class="warn-msg">
|
|
<div
|
|
class="warn-msg-color"
|
|
:style="{ backgroundColor: computedBackgroundColor(scope.row.warnLevel) }"
|
|
>
|
|
</div>
|
|
<div class="warn-msg-text">
|
|
{{ scope.row.warnMsg || '' }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="发生时间" :formatter="dateFormatter" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-box-item" style="margin-top: 8px" v-if="data">
|
|
<div class="bottom-box-item-table">
|
|
<div class="bottom-box-item-title">
|
|
<div class="bottom-box-item-title-left"> 车辆信息 </div>
|
|
<div class="bottom-box-item-title-right" @click="goCarBord"> 查看更多 </div>
|
|
</div>
|
|
<div>
|
|
<el-table :data="data.robotElectricityLevelVOS" style="width: 100%">
|
|
<el-table-column prop="robotNo" label="车辆编号" />
|
|
<el-table-column prop="doLock" label="车辆状态">
|
|
<template #default="scope">
|
|
<span>{{ scope.row.doLock === 0 ? '正常' : '锁定' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="batSoc" label="电量百分比">
|
|
<template #default="scope">
|
|
<div v-if="scope.row.batSoc === null">—</div>
|
|
<div class="battery-box-all">
|
|
<div class="battery-box" v-if="scope.row.batSoc !== null">
|
|
<img
|
|
src="@/assets/imgs/allBoard/dianlianggreen.png"
|
|
alt=""
|
|
class="battery-box-img"
|
|
v-if="scope.row.batSoc >= 40"
|
|
/>
|
|
<img
|
|
src="@/assets/imgs/allBoard/dianliangyellow.png"
|
|
alt=""
|
|
class="battery-box-img"
|
|
v-if="scope.row.batSoc < 40 && scope.row.batSoc >= 20"
|
|
/>
|
|
<img
|
|
src="@/assets/imgs/allBoard/dianliangred.png"
|
|
alt=""
|
|
class="battery-box-img"
|
|
v-if="scope.row.batSoc < 20"
|
|
/>
|
|
<div class="battery-box-inner">
|
|
<div
|
|
class="battery-box-inner-inner"
|
|
:class="
|
|
scope.row.batSoc >= 40
|
|
? 'green-bg'
|
|
: scope.row.batSoc < 40 && scope.row.batSoc >= 20
|
|
? 'yellow-bg'
|
|
: 'red-bg'
|
|
"
|
|
:style="{ width: scope.row.batSoc + '%' }"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="battery-box-text" v-if="scope.row.batSoc !== null"
|
|
>{{ scope.row.batSoc || 0 }}%</span
|
|
>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
|
import { dateFormatter } from '@/utils/formatTime'
|
|
import * as ChartsApi from '@/api/boardCharts'
|
|
import { DICT_TYPE, getIntDictOptions, getDictOptions } from '@/utils/dict'
|
|
import indexPage from '../../mapPage/realTimeMap/components/indexPage.vue'
|
|
import * as MapApi from '@/api/map/map'
|
|
|
|
const router = useRouter() // 路由对象
|
|
const indexPageRef = ref(null)
|
|
const typeList = ref([])
|
|
defineOptions({ name: 'BoardAllBoard' })
|
|
const data = ref({
|
|
taskStatusVO: {
|
|
//顶部左边统计
|
|
pendingExecutionNum: 0,
|
|
underwayNum: 0,
|
|
completedNum: 0,
|
|
cancelledNum: 0,
|
|
abnormalNum: 0,
|
|
tasksNumber: 0
|
|
},
|
|
statistics: {
|
|
//顶部右边 统计
|
|
total: 0,
|
|
inTask: 0,
|
|
doLock: 0,
|
|
charge: 0,
|
|
offline: 0,
|
|
fault: 0
|
|
},
|
|
underway: [], //执行中
|
|
pendingExecution: [], //待执行
|
|
robotWarnMsgDOS: [], //异常信息
|
|
deviceStatusInfoVOS: [], //设备信息
|
|
robotElectricityLevelVOS: [] //车辆信息
|
|
})
|
|
//获取数据
|
|
const getAllData = async () => {
|
|
let datas = await ChartsApi.bulletinBoardGet()
|
|
console.log(datas)
|
|
data.value = datas
|
|
}
|
|
const widthVal = ref(0)
|
|
const leftVal = ref(0)
|
|
const getWidth = (val) => {
|
|
widthVal.value = val
|
|
console.log(widthVal.value)
|
|
}
|
|
const getLeftPx = (val) => {
|
|
leftVal.value = val
|
|
}
|
|
//返回异常颜色
|
|
const computedBackgroundColor = (warnLevel) => {
|
|
switch (warnLevel) {
|
|
case 1:
|
|
return '#1677FF'
|
|
case 2:
|
|
return '#F1CD0B'
|
|
case 3:
|
|
return '#E07300'
|
|
case 4:
|
|
return '#C60606'
|
|
default:
|
|
return ''
|
|
}
|
|
}
|
|
|
|
//前往更多任务
|
|
const toManyTask = (type) => {
|
|
// console.log(getIntDictOptions(DICT_TYPE.ROBOT_TASK_STATUS))
|
|
// return
|
|
router.push({
|
|
path: '/task-management/task-list',
|
|
query: {
|
|
type: type
|
|
}
|
|
})
|
|
}
|
|
|
|
//前往异常信息
|
|
const toManyWarnMsg = () => {
|
|
router.push({
|
|
path: '/carError'
|
|
})
|
|
}
|
|
// 前往车辆看板
|
|
const goCarBord = () => {
|
|
router.push({
|
|
path: '/board/carBoard'
|
|
})
|
|
}
|
|
const list = ref([]) // 地图区域列表
|
|
const mapValue = ref([]) //选中的区域绑定的数组值
|
|
const mapInfo = ref(null) //选中的区域
|
|
//获取地图区域
|
|
const getList = async () => {
|
|
let data = await MapApi.getPositionMapGetMap()
|
|
let mapList = []
|
|
for (let key in data) {
|
|
mapList.push({
|
|
floor: key,
|
|
label: key + '层',
|
|
value: key,
|
|
children: data[key]
|
|
})
|
|
}
|
|
if (mapList.length) {
|
|
mapList.forEach((item) => {
|
|
if (item.children.length) {
|
|
item.children.forEach((child) => {
|
|
child.label = child.area
|
|
child.value = child.id
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
list.value = mapList
|
|
console.log(list.value, data)
|
|
if (mapValue.value.length) {
|
|
handleChangeMap(mapValue.value)
|
|
} else {
|
|
mapValue.value = [list.value[0].value, list.value[0].children[0].value]
|
|
mapInfo.value = list.value[0].children[0]
|
|
? JSON.parse(JSON.stringify(list.value[0].children[0]))
|
|
: {
|
|
mapId: '',
|
|
floor: '',
|
|
area: ''
|
|
}
|
|
indexPageRef.value.getMapData(mapInfo.value)
|
|
}
|
|
}
|
|
//切换地图选择
|
|
const handleChangeMap = async (e) => {
|
|
mapInfo.value = findChildrenByValues(list.value, e)
|
|
? findChildrenByValues(list.value, e)
|
|
: {
|
|
mapId: '',
|
|
floor: '',
|
|
area: ''
|
|
}
|
|
console.log(mapInfo.value)
|
|
indexPageRef.value.getMapData(mapInfo.value)
|
|
}
|
|
// 筛选出对应的区域对象
|
|
const findChildrenByValues = (tree, values) => {
|
|
if (!tree || tree.length === 0) {
|
|
return null
|
|
}
|
|
function traverse(node) {
|
|
if (node.children) {
|
|
for (let child of node.children) {
|
|
if (values.includes(child.value)) {
|
|
return child
|
|
}
|
|
let result = traverse(child)
|
|
if (result) {
|
|
return result
|
|
}
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
for (let root of tree) {
|
|
if (values.includes(root.value)) {
|
|
if (root.children) {
|
|
for (let child of root.children) {
|
|
if (values.includes(child.value)) {
|
|
return child
|
|
}
|
|
let result = traverse(child)
|
|
if (result) {
|
|
return result
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let result = traverse(root)
|
|
if (result) {
|
|
return result
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
const scrollContainer = ref(null)
|
|
let isDragging = false
|
|
let startX = 0
|
|
let scrollLeft = 0
|
|
|
|
const startDrag = (e) => {
|
|
isDragging = true
|
|
const rect = scrollContainer.value.getBoundingClientRect()
|
|
startX = e.clientX - rect.left
|
|
scrollLeft = scrollContainer.value.scrollLeft
|
|
scrollContainer.value.style.cursor = 'grabbing'
|
|
}
|
|
|
|
const onDrag = (e) => {
|
|
if (!isDragging) return
|
|
const rect = scrollContainer.value.getBoundingClientRect()
|
|
const mouseX = e.clientX - rect.left
|
|
const dragDistance = (mouseX - startX) * 2.5 // 速度系数
|
|
scrollContainer.value.scrollLeft = scrollLeft - dragDistance
|
|
}
|
|
|
|
const endDrag = () => {
|
|
isDragging = false
|
|
scrollContainer.value.style.cursor = 'grab'
|
|
}
|
|
const getElementWidthByClass = (className) => {
|
|
const element = document.querySelector(`.${className}`)
|
|
if (element) {
|
|
// return window.getComputedStyle(element).width
|
|
const widthWithUnit = window.getComputedStyle(element).width
|
|
return widthWithUnit.slice(0, -2)
|
|
}
|
|
return null
|
|
}
|
|
const getLeft = () => {
|
|
let indexpageContainer = document.getElementsByClassName('map-box-allBoard')[0]
|
|
// console.log('距离左边的距离', indexpageContainer.getBoundingClientRect().left)
|
|
leftVal.value = indexpageContainer.getBoundingClientRect().left
|
|
}
|
|
const getWidthPx = () => {
|
|
let width = getElementWidthByClass('map-box-allBoard')
|
|
// console.log("pppppppppppppp",width)
|
|
widthVal.value = width
|
|
}
|
|
const getLeftWidth = () => {
|
|
nextTick(() => {
|
|
getWidthPx()
|
|
getLeft()
|
|
})
|
|
}
|
|
//根据type和列表返回对应中文
|
|
const filterTypeFun = (type, list) => {
|
|
if (list.length) {
|
|
let obj = list.find((item) => {
|
|
return item.value == type
|
|
})
|
|
return obj == undefined ? type : obj.label
|
|
} else {
|
|
return type
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
typeList.value = getDictOptions(DICT_TYPE.DEVICE_TYPE)
|
|
getAllData()
|
|
getList()
|
|
getLeftWidth()
|
|
window.addEventListener('resize', getLeftWidth)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', getLeftWidth)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.top-box {
|
|
width: 100%;
|
|
}
|
|
.top-item {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-right: 1px solid #e7eaec;
|
|
}
|
|
.top-item-title {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
color: #0d162a;
|
|
margin-bottom: 8px;
|
|
}
|
|
.top-item-num {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
color: #00329f;
|
|
}
|
|
.bottom-box {
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
.bottom-box-item {
|
|
width: 100%;
|
|
}
|
|
.bottom-box-item-title {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
.bottom-box-item-title-left {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #0d162a;
|
|
}
|
|
.bottom-box-item-title-right {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #1677ff;
|
|
cursor: pointer;
|
|
}
|
|
.bottom-box-item-table {
|
|
width: 100%;
|
|
}
|
|
.battery-box {
|
|
width: 22px;
|
|
height: 11px;
|
|
position: relative;
|
|
}
|
|
.battery-box-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: top;
|
|
}
|
|
.battery-box-inner {
|
|
width: 17px;
|
|
height: 8px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
.battery-box-inner-inner {
|
|
height: 100%;
|
|
}
|
|
.green-bg {
|
|
background: #52c41a;
|
|
}
|
|
.yellow-bg {
|
|
background: #f1cd0b;
|
|
}
|
|
.red-bg {
|
|
background: #c60606;
|
|
}
|
|
.battery-box-text {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #0d162a;
|
|
margin-left: 3px;
|
|
}
|
|
.battery-box-all {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.warn-msg {
|
|
display: flex;
|
|
}
|
|
.warn-msg-color {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
margin-top: 4px;
|
|
}
|
|
.warn-msg-text {
|
|
flex: 1;
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #0d162a;
|
|
margin-top: -3px;
|
|
}
|
|
/* 容器样式 */
|
|
.scroll-container {
|
|
width: 100%;
|
|
height: 104px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
cursor: grab;
|
|
user-select: none;
|
|
background: #fff;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* 隐藏滚动条 */
|
|
.scroll-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* 内容布局 */
|
|
.content {
|
|
display: inline-flex;
|
|
height: 100%;
|
|
padding: 20px 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 单个项目样式 */
|
|
.item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
padding: 17px 30px;
|
|
background: #fff;
|
|
transition: transform 0.2s;
|
|
border-right: 2px solid #e9e9e9;
|
|
}
|
|
|
|
/* .item:hover {
|
|
transform: translateY(-3px);
|
|
} */
|
|
|
|
/* 拖拽时状态 */
|
|
.scroll-container:active {
|
|
cursor: grabbing;
|
|
}
|
|
.scroll-container-item-left-title {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #0d162a;
|
|
margin-bottom: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
.scroll-container-item-left-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
vertical-align: top;
|
|
flex-shrink: 0;
|
|
}
|
|
.scroll-container-item-right {
|
|
flex-shrink: 0;
|
|
margin-left: 16px;
|
|
}
|
|
.noBoarder {
|
|
border-right: none;
|
|
}
|
|
.scroll-container-item-right-item {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
.scroll-container-item-right-item-title {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #0d162a;
|
|
flex-shrink: 0;
|
|
}
|
|
.scroll-container-item-right-item-num {
|
|
font-family:
|
|
PingFangSC,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #0d162a;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|