新增项目周期，项目简介，项目进度

wulitaotao

2023-02-27 2c9fe4606e997b09eabb87afeb981d6ee924d420

新增项目周期，项目简介，项目进度

 src/components/Screen/bottom.vue

@@ -3,43 +3,23 @@
    <div class="bottom1">
      <div class="bottom11"></div>
      <div class="bottom12">
        <div
          :class="currMenu == item.menuName ? 'active' : ''"
          v-for="item in menuList"
          :key="item.menuName"
          class="bottombtn"
          @click="handleMenuClick(item)"
        >
          <el-popover
            popper-class="popover"
            placement="top"
            width="100"
            trigger="click"
          >
        <div :class="currMenu == item.menuName ? 'active' : ''" v-for="item in menuList" :key="item.menuName"
          class="bottombtn" @click="handleMenuClick(item)">
          <el-popover popper-class="popover" placement="top" width="100" trigger="click">
            <!-- å†…容 -->
            <span slot="reference">{{ item.menuName }}</span>
            <div class="popover-content">
              <div class="popover-content__header">项目信息</div>

              <div class="popover-content__search">
                <el-input
                  size="mini"
                  placeholder="请输入内容"
                  v-model="searchName"
                  @change="handleSearchChange(item)"
                >
                <el-input size="mini" placeholder="请输入内容" v-model="searchName" @change="handleSearchChange(item)">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <div class="popover-content__list">
                <div
                  class="popover-content__list__item"
                  v-for="(child, i) in currMenuList"
                  :key="child.id + i"
                  :class="currProject == child.name ? 'active' : ''"
                  @click="handlePopoverClick(child)"
                  :title="child.name"
                >
                <div class="popover-content__list__item" v-for="(child, i) in currMenuList" :key="child.id + i"
                  :class="currProject == child.name ? 'active' : ''" @click="handlePopoverClick(child)"
                  :title="child.name">
                  {{ child.name.slice(0, 8) }}
                </div>
              </div>
@@ -48,7 +28,8 @@
        </div>
      </div>
      <div class="bottom13">
        <img :src="yxImg" @click="ChangeBaseLayer" />
        <img :src="yxImg" @click="ChangeBaseLayer('yx')"  title="影像图" />
        <img :src="xrImg" @click="ChangeBaseLayer('xr')"  title="晕渲图"/>
      </div>
    </div>
    <div class="bottom2">
@@ -57,6 +38,7 @@
  </div>
</template>
<script>
let yunxuanLayer = null
import PipeLine from "@/assets/json/pipeline.json"
import {
  countProjectTour,
@@ -69,7 +51,10 @@
  data() {
    return {
      YXState: true,
      XRState: true,
      yunxuanLayer: null,//全球眩晕图
      yxImg: require("../../assets/img/Screen/yximg.png"),
      xrImg: require("../../assets/img/Screen/bdimg.png"),
      currMenu: "专题展示",
      currProject: "",
      searchName: "",
@@ -174,20 +159,50 @@
    this.getCountProjectTour()
  },
  methods: {
    ChangeBaseLayer() {
      if (this.YXState) {
        this.yxImg = require("../../assets/img/Screen/bdimg.png")
        //加载百度影像
        Viewer.imageryLayers._layers[1].show = true
        Viewer.imageryLayers._layers[2].show = false
        Viewer.imageryLayers._layers[3].show = false
      } else {
        this.yxImg = require("../../assets/img/Screen/yximg.png")
        Viewer.imageryLayers._layers[1].show = false
        Viewer.imageryLayers._layers[2].show = true
        Viewer.imageryLayers._layers[3].show = true
    ChangeBaseLayer(parm) {
      if (parm == 'yx') {
        if (this.YXState) {
          //this.yxImg = require("../../assets/img/Screen/bdimg.png")
          //加载百度影像
          Viewer.imageryLayers._layers[1].show = true
          Viewer.imageryLayers._layers[2].show = false
          Viewer.imageryLayers._layers[3].show = false
        } else {
          //this.yxImg = require("../../assets/img/Screen/yximg.png")
          Viewer.imageryLayers._layers[1].show = false
          Viewer.imageryLayers._layers[2].show = true
          Viewer.imageryLayers._layers[3].show = true
        }
        this.YXState = !this.YXState
      }
      this.YXState = !this.YXState

      if (parm == 'xr') {
        if (yunxuanLayer == null) {
          var urls = "https://tiles3.geovisearth.com/base/v1/ter"
          // æ˜Ÿå›¾åœ°çƒåœ°å½¢æ™•æ¸²
          yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
            "星图地球地形晕渲",
            {
              url:
                urls +
                "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
            },
            "0",
            undefined,
            true,
            ""
          )
        }
        if (this.XRState) {
          yunxuanLayer.item.show = true;
        } else {
          yunxuanLayer.item.show = false;
        }
        this.XRState = !this.XRState;
      }



    },
    handleMenuClick(menu) {
      this.currMenu = menu.menuName
@@ -249,7 +264,7 @@

    //项目展示
    DisplayCurrentProject(params) {
      console.log(params)
      

      //打开或者加载图层

@@ -278,7 +293,7 @@
      return menu.children
      // return menu.children.filter(item => item.name.indexOf(searchName) > -1)
    },
    handleSearchChange(currMenu) {},
    handleSearchChange(currMenu) { },
    async getCountProjectDisplay() {
      const res = await countProjectLocation()
      if (res.code === 200) {
@@ -290,7 +305,7 @@
            wkt: item.wkt,
          }
        })
    

      }
    },
    async getCountProjectTour() {
@@ -304,7 +319,7 @@
            wkt: item.wkt,
          }
        })
      

      }
    },
    //专题展示
@@ -369,6 +384,7 @@
      color: #fff;
      font-weight: 600;
      cursor: pointer;

      &.active {
        background: url(~@/assets/img/Screen/centerbtnc.png);
        background-size: 100% 100%;
@@ -389,6 +405,7 @@
    }
  }
}

.popover {
  display: flex;
  justify-content: center;
@@ -397,9 +414,11 @@
  background: url(~@/assets/img/Screen/centerTooltipBg.png);
  background-size: 100% 100%;
  border: none;

  .popper__arrow {
    display: none;
  }

  .popover-content {
    &__header {
      display: flex;
@@ -410,6 +429,7 @@
      height: 30px;
      font-size: 18px;
      color: #fff;

      &::before,
      &::after {
        margin: 0 5px;
@@ -421,15 +441,18 @@
        height: 8px;
      }
    }

    &__search {
      margin-top: 8px;
      width: 145px;
      text-align: center;

      .el-input {
        width: 125px;
        height: 21px;
        background: rgba(0, 48, 111, 0.2);
        border: 0.25px solid #2a80a9;

        &__inner {
          background: rgba(0, 48, 111, 0.2);
          border-radius: inherit;
@@ -437,6 +460,7 @@
          padding: 0 5px;
          color: #fff;
        }

        .el-input-group__append {
          width: 32px;
          border: none;
@@ -479,6 +503,7 @@
      }
    }
  }

  ::-webkit-scrollbar {
    width: 2px;
    height: 2px;

 src/components/Screen/left.vue

@@ -7,6 +7,9 @@
      <div class="current1" id="leftCurrent1">
        <div class="aside-title">数据申请次数</div>
        <count-data-apply></count-data-apply>
        <!-- <projectintroduction></projectintroduction> -->
        <!-- <projectState></projectState> -->
        <!-- <projectTime></projectTime> -->
      </div>
      <div class="current1" id="leftCurrent2">
        <div class="aside-title">用户访问量</div>
@@ -64,6 +67,12 @@
import BaseBarChart from "../chart/BaseBarChart.vue"
import BaseLineChart from "../chart/BaseLineChart.vue"
import BasePieChart from "../chart/BasePieChart .vue"
// import projectintroduction from "../chart/projectintroduction.vue"
// import projectState from "../chart/projectState.vue"
// import projectTime from "../chart/projectTime.vue"



export default {
  components: {
    ProjectTree,
@@ -72,7 +81,10 @@
    DataStorage,
    BaseBarChart,
    BaseLineChart,
    BasePieChart
    BasePieChart,
    // projectintroduction,
    // projectState,
    // projectTime
  },
  data() {
    return {

 src/components/Screen/mapsdk.vue

@@ -14,29 +14,29 @@
  },
  mounted() {
    this.init3DMap()
    this.$bus.$on("changeProject", name => {
      if (!yunxuanLayer) {
        var urls = "https://tiles3.geovisearth.com/base/v1/ter"
        // æ˜Ÿå›¾åœ°çƒåœ°å½¢æ™•æ¸²
        yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
          "星图地球地形晕渲",
          {
            url:
              urls +
              "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
          },
          "0",
          undefined,
          true,
          ""
        )
      }
      if (name == '全球项目') {
        yunxuanLayer.item.show = true
      } else {
        yunxuanLayer.item.show = false
      }
    })
    // this.$bus.$on("changeProject", name => {
    //   if (!yunxuanLayer) {
    //     var urls = "https://tiles3.geovisearth.com/base/v1/ter"
    //     // æ˜Ÿå›¾åœ°çƒåœ°å½¢æ™•æ¸²
    //     yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
    //       "星图地球地形晕渲",
    //       {
    //         url:
    //           urls +
    //           "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
    //       },
    //       "0",
    //       undefined,
    //       true,
    //       ""
    //     )
    //   }
    //   if (name == '全球项目') {
    //     yunxuanLayer.item.show = true
    //   } else {
    //     yunxuanLayer.item.show = false
    //   }
    // })
  },
  methods: {
    init3DMap() {
@@ -49,13 +49,8 @@
        SmartEarthRootUrl + "Workers/image/earth.jpg",
        function () {}
      )

      window.viewer = window.Viewer = window.sgworld._Viewer;



       Viewer.imageryLayers._layers[0].show = false

      Viewer.imageryLayers._layers[0].show = false
       sgworld.Navigate.jumpTo({      //跳转视角
            destination: new Cesium.Cartesian3.fromDegrees(110, 32, 50000000)
      });

 src/components/chart/projectState.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,169 @@
<template>
    <div class="projectState" ref="chart"></div>
</template>
  
<script>
import * as echarts from "echarts"
import { GetServicesVisitsCount } from "@/api/screen.js"
export default {
    data() {
        return {
            option: {},
        }
    },
    mounted() {
        // const option = this.initData()
        this.initChart()
    },
    methods: {
         initChart() {
            // const res = await GetServicesVisitsCount()

            // console.log(res.result);

            // if (res.code == 200) {
            // }
            // let xAxis = []
            // let yAxis = []

            // res.result.forEach(item => {
            //     xAxis.push(item.type)
            //     yAxis.push(item.count)
            // })

            // let data = [220, 182, 191, 234, 290, 330, 310]
            // const sideData = data.map(item => {
            //   return {
            //     name: item.name,
            //     value: item.number,
            //   }
            // })

            var XName = ["立项", "启动", "建设", "完成"]
            var data1 = [
                [100, 100, 100, 100],
                [100, 100, {
                    value: 100, symbol:
                        'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [50, 50],
                }]
            ]
            var Line = ["线1", "线2"];
            var color = ['#256589', '#3F88E9'];

            //数据处理
            var datas = [];
            Line.map((item, index) => {
                if (index == 0) {
                    datas.push(
                        {
                            symbolSize: 10,
                            symbol: 'circle',
                            hoverAnimation: false,
                            name: item,
                            type: "line",
                            data: data1[index],
                            itemStyle: {
                                normal: {
                                    borderWidth: 5,
                                    color: color[index],
                                }
                            }
                        }
                    )

                } else {
                    datas.push(
                        {
                            symbolSize: 10,
                            symbol: 'circle',
                            hoverAnimation: false,
                            name: item,
                            type: "line",
                            data: data1[index],
                            itemStyle: {
                                normal: {
                                    borderWidth: 5,
                                    color: color[index],
                                }
                            }
                        }
                    )

                }

            })

        let     option = {
                grid: {
                    left: '5%',
                    top: '30%',
                    bottom: '30%',
                    right: '5%',
                },
                yAxis: [
                    {
                        type: 'value',
                        position: 'right',
                        max: 100,
                        splitLine: {
                            show: false
                        }
                        ,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#6A989E',
                            }
                        },
                        axisLabel: {
                            inside: true,
                            show: true,
                            textStyle: {
                                color: '#90deff',// x轴颜色
                                fontWeight: 'normal',
                                fontSize: '12',
                                lineHeight: 20
                            }

                        },
                        data: XName,
                    }
                ],
                series: datas,
            };
            const chart = echarts.init(this.$refs.chart)

            chart.setOption(option)
            window.addEventListener("resize", function () {
                chart.resize()
            })
        },
    },
}
</script>
  
<style lang="scss" scoped>
.projectState {
    width: 100%;
    height: calc(100% - 30px);
}
</style>
  

 src/components/chart/projectTime.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,306 @@
<template>
    <div class="projectTime" ref="chart">

    </div>
</template>
<script>
import * as echarts from "echarts"
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            var dataArr = 60;
            var colorSet = '#45CAED';

            var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                    offset: 0,
                    color: '#8D00FF',
                },
                {
                    offset: 0.4,
                    color: '#0EBAFC',
                },
                {
                    offset: 1,
                    color: '#0EBAFC',
                },
            ]);
            var option = {
                title: {
                    text: '项目进度',
                    textStyle: {
                        color: '#7DAEEF',
                        fontSize: 12,
                    },
                    padding: 0,
                    top: '80%',
                    left: 'center',
                },
                xAxis: {
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                },
                yAxis: {
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                },
                series: [
                    // åˆ»åº¦
                    {
                        type: 'gauge',
                        radius: '82%',
                        startAngle: 220,
                        endAngle: -40,
                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#6B9DD7',
                                width: 1,
                            },
                            length: -8,
                        }, //刻度样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#6B9DD7',
                                width: 1,
                            },
                            length: -8,
                        }, //分隔线样式
                        axisLabel: {
                            color: 'rgba(255,255,255,0)',
                            fontSize: 12,
                        }, //刻度节点文字颜色
                        pointer: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        label: {
                            show: false,
                        },
                        // //仪表盘详情，用于显示数据。
                        // detail: {
                        //     show: true,
                        //     offsetCenter: [0, '50%'],
                        //     color: '#ACCFFF',
                        //     formatter: function (params) {
                        //         return '当前速度';
                        //     },
                        //     textStyle: {
                        //         fontSize: 16,
                        //     },
                        // },
                    },
                    {
                        name: '内部进度条',
                        type: 'gauge',
                        center: ['50%', '50%'],
                        radius: '78%',
                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [dataArr / 100, color],
                                    [1, 'rgba(107,157,215,.25)'],
                                ],
                                width: 8,
                            },
                        },
                        z: 4,
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        itemStyle: {
                            color: colorSet,
                        },
                        detail: {
                            show: false,
                        },
                        label: {
                            show: false,
                        },

                        title: {
                            //标题
                            show: true,
                            offsetCenter: [0, '35%'], // x, y，单位px
                            textStyle: {
                                color: '#ACCFFF',
                                fontSize: 16, //表盘上的标题文字大小
                                fontWeight: 400,
                                fontFamily: 'PingFangSC',
                            },
                        },
                        data: [
                            {
                                name: dataArr + '%',
                                value: dataArr,
                            },
                        ],
                        pointer: {
                            show: true,
                            length: '40%',
                            radius: '20%',
                            width: 4, //指针粗细
                        },
                    },
                    {
                        //指针上的圆
                        type: 'pie',
                        tooltip: {
                            show: false,
                        },
                        z: 5,
                        hoverAnimation: false,
                        legendHoverLink: false,
                        radius: ['0%', '6%'],
                        center: ['50%', '50%'],
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: 10,
                                itemStyle: {
                                    normal: {
                                        color: colorSet,
                                    },
                                },
                            },
                        ],
                    },
                    // å¤–一层圈
                    {
                        type: 'pie',
                        radius: '60%',
                        startAngle: 220,
                        endAngle: -40,
                        hoverAnimation: false,
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            {
                                value: 1,
                            },
                        ],
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#17A1FF',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(17, 90, 233, 0.16)',
                                        },
                                    ],
                                },
                                opacity: 0.12,
                            },
                        },
                    },
                    // å†…圆
                    {
                        type: 'pie',
                        radius: ['0', '50%'],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        z: 3,
                        data: [
                            {
                                value: dataArr,
                                itemStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#23A6FF',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(17, 90, 233, 0.21)  ',
                                            },
                                        ]),
                                        opacity: 0.59,
                                    },
                                },
                                label: {
                                    show: false,
                                },
                            },
                        ],
                        labelLine: {
                            show: false,
                        },
                    },
                ],
            };


            const chart = echarts.init(this.$refs.chart)

            chart.setOption(option)
            window.addEventListener("resize", function () {
                chart.resize()
            })
        },
    },
}

</script>
<style  lang="scss">
.projectTime {
    height: calc(100% - 30px);
    width: 100%;
}
</style>

 src/components/chart/projectintroduction.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,105 @@
<template>
    <div class="projectintroduction">
        <div class="item">
            <div class="itemName">项目名称:</div>
            <div class="itemValue" :title="result.projname">{{ result.projname.length>15?result.projname.substring(0,15):result.projname }}</div>
        </div>
        <div class="item">
            <div class="itemName">项目状态:</div>
            <div class="itemValue">{{ result.projstate }}</div>
        </div>
        <div class="item">
            <div class="itemName">项目种类:</div>
            <div class="itemValue">{{ result.projtype }}</div>
        </div>
        <div class="item">
            <div class="itemName">所属部门:</div>
            <div class="itemValue">{{ result.corpname }}</div>
        </div>
        <div class="item">
            <div class="itemName">启动时间:</div>
            <div class="itemValue">{{ parseTime(result.createtime) }}</div>
        </div>
        <div class="item">
            <div class="itemName">工程内容:</div>
            <div class="itemValue">{{ result.contents.length>15? result.contents.substring(0,15): result.contents }}</div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            result:
                {
                    "eventid": "4dfd814a-a262-4a93-880b-5ef488883a35",
                    "country": "中国",
                    "projstate": "施工中",
                    "createtime": 1675071993161,
                    "gid": 38,
                    "conperiod": "24",
                    "datastatus": null,
                    "geom": "01010000208A110000925A28999C225C40F1811DFF05364040",
                    "createuser": 1,
                    "parentid": null,
                    "verid": 0,
                    "province": "湖北省",
                    "projname": "西气东输三线（中卫-枣阳）",
                    "contents": "管道线路施工",
                    "projtype": "管线施工",
                    "location": "武汉",
                    "dirid": "03",
                    "depid": null,
                    "corpname": "管道设计院",
                    "department": "勘察部门",
                    "updatetime": 1675072198376,
                    "belongsid": null,
                    "remarks": "测试用，内容虚构",
                    "updateuser": 1
                },
        }
    },
    methods: {
        //获取时间
        parseTime(timestamp){
            var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
            let strDate = Y+M+D;      
            return strDate;
        }

    }

}
</script>
<style lang="scss">
.projectintroduction {
    height: calc(100% - 30px);
    width: 100%;
    .item{
        margin: 5px;
        height: 30px;
        display: flex;
        flex-direction: row;
        border-bottom: dotted 1px  rgba(48,135,214,.2);
        .itemName{
            width: 40%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        .itemValue{
            width: 60%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #9ED2F5;
        }
    }
}
</style>