大屏左侧

odc.xiaohui

2024-02-28 7633cfbb1d9d75b316a004b69f7f9feea4233934

 src/views/daoAnOffice/left-center.vue

@@ -2,14 +2,149 @@
import { ref, reactive } from "vue";
import { graphic } from "echarts/core";
import { currentGET } from "@/api";


const options = reactive ( [
  {
    title: "高速路",
    name: "1",
    num: "195",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
  {
    title: "国省道",
    name: "1",
    num: "167",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
  {
    title: "县乡道",
    name: "1",
    num: "188",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,},
  {
    title: "农村道路",
    name: "1",
    num: "128",
    img:new URL('../../assets/img/gaosu.png', import.meta.url).href,
  }
])
const optionsT = reactive ( [
  {
    title: "货运车辆",
    name: "1",
    num: "619",
    img:new URL('../../assets/img/hycl.png', import.meta.url).href,},
  {
    title: "公交客运",
    name: "1",
    num: "258",
    img:new URL('../../assets/img/gjky.png', import.meta.url).href,},
  {
    title: "小型骑车",
    name: "1",
    num: "1234",
    img:new URL('../../assets/img/xxqc.png', import.meta.url).href,},
  {
    title: "摩托车",
    name: "1",
    num: "2355",
    img:new URL('../../assets/img/mtc.png', import.meta.url).href,
  }
])
const optionsS = reactive ( [
  {
    title: "货源车辆驾驶人",
    name: "1",
    num: "619",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
  {
    title: "公交客运驾驶人",
    name: "1",
    num: "258",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
  {
    title: "小型汽车驾驶人",
    name: "1",
    num: "1234",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,},
  {
    title: "摩托车驾驶人",
    name: "1",
    num: "2355",
    img:new URL('../../assets/img/qclc.png', import.meta.url).href,
  }
])
</script>

<template>
<div>
  道路里程数量
<div class="x-a">
  <div class="roadMileage">
    <p class="roadMileage-title">道路里程数量</p>
    <div style="display:flex;justify-content: space-between">
    <div v-for="(item,index) in options" :key="index" class="roadMileage-item">
        <img :src="item.img" alt="" class="roadMileage-item-img">
        <p class="roadMileage-item-title">{{item.title}}</p>
        <p class="roadMileage-item-num">{{item.num}}</p>
     </div>
    </div>
    </div>
  <div class="roadMileage">
    <p class="roadMileage-title">道路里程数量</p>
    <div style="display:flex;justify-content: space-between">
      <div v-for="(item,index) in optionsT" :key="index" class="roadMileage-item">
        <img :src="item.img" alt="" class="roadMileage-item-img">
        <p class="roadMileage-item-title">{{item.title}}</p>
        <p class="roadMileage-item-num">{{item.num}}</p>
      </div>
    </div>
  </div>
  <div class="roadMileage">
    <p class="roadMileage-title">道路里程数量</p>
    <div style="display:flex;justify-content: space-between">
      <div v-for="(item,index) in optionsS" :key="index" class="roadMileage-item">
        <img :src="item.img" alt="" class="roadMileage-item-img">
        <p class="roadMileage-item-title">{{item.title}}</p>
        <p class="roadMileage-item-num">{{item.num}}</p>
      </div>
    </div>
  </div>

</div>
</template>

<style scoped lang="scss"></style>
<style scoped lang="scss">
.x-a{
  background-color: #111E3C;
  border: 1px solid #29466A;
  padding: 10px 10px 20px;
}
.roadMileage{
  //display: flex;
  .roadMileage-title{
    margin: 10px 0;
    font-family: PingFang SC;
    font-weight: 600;
    color: #447ED6;
    line-height: 22px;

  }
  .roadMileage-item{
    padding: 15px 0;
    background: linear-gradient(0deg, rgba(13,29,50,0.55), rgba(34,82,154,0.55));
    //border: 1px solid #29466A;
    //opacity: 0.6;
    //background: #11223A;
    .roadMileage-item-img{
      width: 130px;
    }
    .roadMileage-item-title{
      text-align: center;
      font-family: PingFang SC;
      color: #44DBDD;
    }
    .roadMileage-item-num{
      text-align: center;
      font-weight: 800;
      font-family: PingFang SC;
      color: #FAE67D;
    }
  }
}
</style>