real3d-portalsite/src/views/cockpit/gdbh.vue

<template>
  <borderTemplate titleName="耕地保护" class="gdbh">
    <div class="content">
      <div class="selectTab">
        <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content_index">

      <div v-show="tab == options[1].value">
        <div class="content">
          <div class="item_back">
            <div class="icon">
              <div class="icon_jsyd">

              </div>
            </div>
            <div class="text_back">
              <p>建设项目占用耕地</p>
              <span>{{ balanceData.zy_gdmj }}</span>km²

            </div>
          </div>
          <div class="item_back">
            <div class="icon">
              <div class="icon_bcyd">

              </div>
            </div>
            <div class="text_back">
              <p>补充耕地</p>
              <span>{{ balanceData.cb_gdmj }}</span>km²

            </div>
          </div>
        </div>
        <div class="info">
          <div class="left_info">

            <ul>
              <li>
                <div class="icon"></div>

                <span class="zbph_label">其中水田</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">{{ balanceData.zy_st }}</span>
                  <span class="zbph_unit">km²</span>
                </span>
              </li>

              <li>
                <div class="icon"></div>

                <span class="zbph_label">损失粮食产能</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">{{ balanceData.zy_cn }}</span>
                  <span class="zbph_unit">吨</span>
                </span>
              </li>

            </ul>
          </div>
          <div class="right_info">
            <ul>
              <li>
                <div class="icon"></div>

                <span class="zbph_label">其中水田</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">{{ balanceData.cb_st }}</span>
                  <span class="zbph_unit">km²</span>
                </span>
              </li>

              <li>
                <div class="icon"></div>

                <span class="zbph_label">提升粮食产能</span>
                <br>

                <span class="zbph_value_unit">
                  <span class="zbph_value">{{ balanceData.cb_cn }}</span>
                  <span class="zbph_unit">吨</span>
                </span>
              </li>

            </ul>
          </div>

        </div>
      </div>

      <div v-show="tab == options[2].value">

        <div class="content" @click="vector_viewer">
          <div class="item">
            <div class="icon">
              <div class="icon_st">

              </div>
            </div>
            <div class="text">
              <p>流入耕地</p>
              <span>{{ zbpg_hz.jcpg.lrgd }}</span>km²
              <i style="pointer-events:all" :class="{ 'el-icon-view': true }"></i>

            </div>
          </div>
          <div class="item">
            <div class="icon">
              <div class="icon_sjd">

              </div>
            </div>
            <div class="text">
              <p>流出耕地</p>
              <span>{{ zbpg_hz.jcpg.lcgd }}</span>km²
              <i style="pointer-events:all" :class="{ 'el-icon-view': true }"></i>

            </div>
          </div>
          <div class="item">
            <div class="icon">
              <div class="icon_ht">

              </div>
            </div>
            <div class="text">
              <p>面积变化</p>
              <span>{{ mjbh }}</span>km²

            </div>
          </div>
        </div>

        <pie3d id="jcpg" unit="亩" :legendFlag=true ref="jcpg"></pie3d>

      </div>
      <div v-show="tab == options[0].value">
        <div class="content">
          <div class="item">
            <div class="icon">
              <div class="icon_st">

              </div>
            </div>
            <div class="text">
              <p>水田</p>
              <span>{{ store.state.cockpit_gdbh.gdxz.title.st_mj }}</span>km²

            </div>
          </div>
          <div class="item">
            <div class="icon">
              <div class="icon_sjd">

              </div>
            </div>
            <div class="text">
              <p>水浇地</p>
              <span>{{ store.state.cockpit_gdbh.gdxz.title.sjd_mj }}</span>km²

            </div>
          </div>
          <div class="item">
            <div class="icon">
              <div class="icon_ht">

              </div>
            </div>
            <div class="text">
              <p>旱地</p>
              <span>{{ store.state.cockpit_gdbh.gdxz.title.hd_mj }}</span>km²

            </div>
          </div>
        </div>

        <div id="gdxz_echart">

        </div>
      </div>
    </div>

  </borderTemplate>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import borderTemplate from "./borderTemplate.vue";
// import highPie from "../../components/echartsTemplate/highPie.vue";
import pie3d from "../../components/echartsTemplate/3dPie.vue";
import { QueryOne, QueryList } from "../../api/cockpitNew";
import parse from "wellknown";

export default {
  components: { borderTemplate, pie3d },
  data() {
    return {
      sdata: {},
      tab: 'gdxz',
      mjbh: null,
      options: [
        { value: "gdxz", label: "耕地现状" },
        { value: "zbph", label: "占补平衡" },
        { value: "jcph", label: "进出平衡" },
      ],
      zbpg_hz: {
        zygd: {
          qzst: 0,
          sslscn: 0,
          mj: 0,
        },
        bcgd: {
          qzst: 0,
          tslscn: 0,
          mj: 0,
        },
        jcpg: {
          lrgd: 0,
          lcgd: 0,
          lc_st: 0,
          lc_hd: 0,
          lc_sjd: 0
        }

      },
      vector_data: null,
      balanceData: {
        cb_cn: 0,
        cb_gdm: 0,
        cb_st: 0,
        create_time: "20240101",
        id: "4602",
        zy_cn: 0,
        zy_gdmj: 0,
        zy_st: 0
      },//占补平衡数据存储
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合

  methods: {
    async init_info(params) {
      let obj = {
        jscType: 'sc_gdbh_xz_dlbm',
        id: params ? params.id : '4602'
      };
      let data = await QueryOne(obj);
      store.state.cockpit_gdbh.gdxz.title = data.data

      let obj_list = {
        jscType: 'sc_gdbh_xz_gddb',
        id: params ? params.id : '4602'
      };
      let data_list = await QueryList(obj_list);
      let yAxis = ['优等地', '高等地', '中等地', '低等地'];
      let yData = [];

      let echartData = [];
      data_list.data.forEach((res) => {
        if (res.dj == 1) {
          echartData.push(
            {
              "优等地": res.tbmj,
            }
          )
        }
        if (res.dj == 2) {
          echartData.push(
            {
              "高等地": res.tbmj,
            }
          )
        } if (res.dj == 3) {
          echartData.push(
            {
              "中等地": res.tbmj,
            }
          )
        } if (res.dj == 4) {
          echartData.push(
            {
              "低等地": res.tbmj,
            }
          )
        }
      })
      if (data_list.data.length == 3) {
        echartData.push({
          "低等地": 0
        });
      }
      if (data_list.data.length == 2) {
        echartData.push({
          "中等地": 0
        });
        echartData.push({
          "低等地": 0
        });
      }
      if (data_list.data.length == 1) {
        echartData.push({
          "高等地": 0
        });
        echartData.push({
          "中等地": 0
        });
        echartData.push({
          "低等地": 0
        });
      }
      if (data_list.data.length == 0) {
        echartData.push({
          "优等地": 0
        });
        echartData.push({
          "高等地": 0
        });
        echartData.push({
          "中等地": 0
        });
        echartData.push({
          "低等地": 0
        });
      }
      yData = echartData.map((res) => {
        for (let key in res) {
          return res[key]
        }
      })
      yAxis.reverse();
      yData.reverse();

      store.state.cockpit_gdbh.gdxz.list.yAxis = yAxis;
      store.state.cockpit_gdbh.gdxz.list.yData = yData;

      this.init_gdxz_echart();
    },
    async init_zbph_hz(params) {
      const that = this;
      let obj = {
        jscType: 'jsc_gdbh_zbph_hz',
        id: params ? params.id : '4602',
        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
        endTime: params ? params.endTime : store.state.cockpit_date[1],
      };
      let data = await QueryOne(obj);
      this.balanceData = data.data
      // this.zbpg_hz.zygd.qzst = data.data.zy_st
      // this.zbpg_hz.zygd.mj = data.data.zy_gdmj
      // this.zbpg_hz.zygd.sslscn = data.data.zy_cn

      // this.zbpg_hz.bcgd.qzst = data.data.cb_st
      // this.zbpg_hz.bcgd.mj = data.data.cb_gdmj
      // this.zbpg_hz.bcgd.tslscn = data.data.cb_cn
      // console.log('this.zbpg_hz: ', this.zbpg_hz);

      // store.state.cockpit_gdbh.zbph.bcgd = data.data
    },
    async init_zbph(params) {
      const that = this;
      let obj = {
        jscType: 'jsc_gdbh_zbph_gdbc',
        id: params ? params.id : '4602'
      };
      let data = await QueryOne(obj);
      store.state.cockpit_gdbh.zbph.bcgd = data.data
    },
    GetQueryOne_nt(datas) {
      let params = {
        ...datas,
        jscType: "jsc_gdbh_ztgh_nt",
      };
      QueryOne(params).then((res) => {
        this.sdata = { ...this.sdata, ...res.data };
      });
    },
    GetQueryOne_bh(datas) {
      let params = {
        ...datas,
        jscType: "jsc_gdbh_ztgh_bc",
      };
      QueryOne(params).then((res) => {
        this.sdata = { ...this.sdata, ...res.data };
      });
    },
    GetQueryList(datas) {
      let optionsData = [];
      let params = {
        ...datas,
        jscType: "jsc_gdbh_yelx_nt",
      };
      QueryList(params).then((res) => {
        if (res.data.length) {
          res.data.forEach((edata) => {
            optionsData.push({ name: edata.dlbmmc, value: edata.yjjbntmj });
          });
        } else {
          optionsData = [
            { name: "土地复垦", value: 0 },
            { name: "异地购买", value: 0 },
            { name: "补充耕地", value: 0 },
            { name: "增减挂", value: 0 },

          ];
        }

        this.$nextTick(() => {
          this.$refs.gdbh_echart_gdlr.setOptions([
            { name: "土地复垦", value: 12 },
            { name: "异地购买", value: 21 },
            { name: "补充耕地", value: 54 },
            { name: "增减挂", value: 22 },

          ]);
          this.$refs.gdbh_echart_gdlc.setOptions([
            { name: "林地", value: 22 },
            { name: "草地", value: 5 },
            { name: "交通用地", value: 13 },
            { name: "其他", value: 43 },

          ]);

        });
      });
    },
    init_gdxz_echart() {

      var dom = document.getElementById("gdxz_echart");
      var myChart = window.echarts.init(dom);
      let barTopColor = ["#CBB835", "#33C6E2", '#157FFE', '#8F48F0'];
      let barBottomColor = ["#D09311", "#279AB0", '#154AD2', '#670BFF'];
      let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        title: {
          show: false,
          text: '一行动一活动开展情况',
          top: 20,
          left: 'center',
          textStyle: {
            color: '#00eaff',
            fontSize: 18,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          formatter: '一行动一活动开展情况<br>{b}：{c}',
          backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
          textStyle: {
            color: '#fff'
          },
          borderColor: "rgba(18, 57, 60, .8)",
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(0, 11, 34, .4)',
            }
          }
        },
        grid: {
          top: '14%',
          bottom: '1%',
          left: '0%',
          right: '20%',
          containLabel: true
        },
        xAxis: {

          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#1C82C5'
            }
          },
          axisLabel: {
            show: false,
            rotate: 20,
            margin: 30,
            textStyle: {
              fontSize: 14,
              color: '#DEEBFF',
              align: 'center'
            }
          },
          interval: 0
        },
        yAxis: {
          data: store.state.cockpit_gdbh.gdxz.list.yAxis,

          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(28, 130, 197, .3)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#1C82C5'
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: '#DEEBFF',
            }
          },
        },

        series: [
          {
            name: '一行动一活动开展情况',
            type: 'pictorialBar',
            symbolSize: [8, 14],
            symbolOffset: [4, 0],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barBottomColor[params.dataIndex];
                }
              }
            },
            label: {
              textStyle: {
                rich: {
                  name: {
                    color: "#fff", //#BCD3E5
                    fontSize: 14,
                  },
                  value: {
                    color: "#64DAFF",
                    fontSize: 14,
                  },
                  unit: {
                    color: "#fff", //#BCD3E5
                    fontSize: 14,
                  },
                },
              },
              show: true,
              position: 'right',
              fontSize: 16,
              formatter: function (params) {
                return `{value|${params.value}}  {unit|km²}`;
              }
            },
            symbolPosition: 'end',
            data: store.state.cockpit_gdbh.gdxz.list.yData,

          }, {
            name: '一行动一活动开展情况',
            type: 'pictorialBar',
            symbolOffset: [-3, 0],

            symbolSize: [8, 14],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                }
              }
            },
            data: [22, 23, 18, 14],

          }, {
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                      offset: 1,
                      color: barTopColor[params.dataIndex]
                    },
                    {
                      offset: 0,
                      color: barBottomColor[params.dataIndex]
                    }
                    ]
                  );
                },
                opacity: .9
              }
            },
            z: 16,
            silent: true,
            barWidth: 15,
            barCategoryGap: '100%',
            data: store.state.cockpit_gdbh.gdxz.list.yData,

          }]
      };

      myChart.setOption(option);

    },
    async init_jcpg(params) {
      let res = await QueryList({
        jscType: "jsc_stxf_ywfl_tdzz",
        id: params ? params.id : '4602'

      });
      let arr = [];

      res.data.forEach((res) => {
        arr.push({
          name: res.zzlx,
          value: res.xmsl
        });



      })
    },
    vector_viewer() {

      store.setViewerFlagb(false);
      store.setToolBarShow(false);
      store.setXzqh_flag(false);
      store.setCockpit_vector({
        title: "进出平衡",
        tableData: [],
        word: "地类编码名称",
        tablejscType: 'jsc_tdgy_gy_zbmx',
        columns: [
          "进出状态",
          "地类编码",
          "地类编码名称",
        ],
      });
    },
    async init_jcph_table(params) {
      // const that = this;
      // let obj = {
      //   jscType: "jsc_gdbh_jcph_zbmc",
      //   id: params ? params.id : "4602",
      //   val2: 0,
      //   val1: 50000,
      //   beginTime: store.state.cockpit_date[1].slice(0, 4)
      // };
      // let data = await QueryList(obj);
      // data.data.map((res) => {
      //   if (res.geom) {
      //     res.geom = parse(res.geom.split(";")[1]);
      //   }
      // });

      // this.vector_data = data.data;
    },
    async init_jcpg_hz(params) {

      let res = await QueryOne({
        jscType: "jsc_gdbh_jcph_hz",
        id: params ? params.id : '4602',
        val0: store.state.cockpit_date[1].slice(0, 4)
      });
      this.zbpg_hz.jcpg.lrgd = res.data.lrgd == '暂无' || res.data.lrgd == 0 ? '暂无' : res.data.lrgd
      this.zbpg_hz.jcpg.lcgd = res.data.lcgd == '暂无' || res.data.lcgd == 0 ? '暂无' : res.data.lcgd


      if (this.zbpg_hz.jcpg.lrgd == '暂无' || this.zbpg_hz.jcpg.lcgd == '暂无') {
        this.mjbh = '暂无';

      } else {
        this.mjbh = (this.zbpg_hz.jcpg.lrgd - this.zbpg_hz.jcpg.lcgd).toFixed(2);

      }
      this.zbpg_hz.jcpg.lc_st = res.data.lc_st == '暂无' ? 0 : res.data.lc_st
      this.zbpg_hz.jcpg.lc_hd = res.data.lc_hd == '暂无' ? 0 : res.data.lc_hd
      this.zbpg_hz.jcpg.lc_sjd = res.data.lc_sjd == '暂无' ? 0 : res.data.lc_sjd


      let arr = [];
      arr.push({
        name: "流出水田",
        value: Number(this.zbpg_hz.jcpg.lc_st),
      })
      arr.push({
        name: "流出旱田",
        value: Number(this.zbpg_hz.jcpg.lc_hd),
      })
      arr.push({
        name: "流出水浇地",
        value: Number(this.zbpg_hz.jcpg.lc_sjd),
      })

      this.$refs.jcpg.setOptions(arr);

    },
  },
  mounted() {
    // const optionsData = [
    //   { name: "水田", value: 50 },
    //   { name: "水浇地", value: 20 },
    //   { name: "旱地", value: 30 },
    // ];
    // this.$nextTick(() => {
    //   this.$refs.echartRef.setOptions(optionsData);
    // });

    this.$nextTick((res) => {
      // this.init_info();
      // this.init_gdxz_echart();
      // this.init_zbph();
      // this.init_jcpg();
      // this.init_zbph_hz();
      // this.init_jcph_table();
      // this.init_jcpg_hz();
    })
  },
};
</script>
<style lang="scss" scoped>
#gdxz_echart {
  width: 25rem;
  height: 9.5rem;
  margin-top: 5rem;

}

.gdbh {
  top: 2rem !important;

  .content {
    // border: #00FFFF 1px solid;
    // position: absolute;
    // left: 2%;
    // top: 10px;
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0rem;
    left: 0rem;
  }

  .item {
    width: 32%;
    height: 45px;
    display: inline-block;
    // border: #00FFFF 1px solid;
  }

  .icon {
    width: 45px;
    height: 45px;
    padding: 2%;
    border-radius: 8px;
    display: inline-block;

    background: no-repeat 50%;
    margin-left: 2.6rem;
    margin-bottom: 0.5rem;
  }

  .icongdbh0 {
    background-image: url("/static/images/overview/icongdbh0.png");
  }

  .icongdbh1 {
    background-image: url("/static/images/overview/icongdbh1.png");
  }

  .icongdbh2 {
    background-image: url("/static/images/overview/icongdbh2.png");
  }

  .icongdbh3 {
    background-image: url("/static/images/overview/icongdbh3.png");
  }

  .text {
    display: inline-block;
    // border: #00FFFF 1px solid;
    width: 100%;
    margin-bottom: 4px;
    text-align: center;
    margin-left: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    p {
      // font-kerning: normal;
      // font-family: "Arial Negreta", "Arial Normal", "Arial";
      // font-weight: bold;
      // font-size: 14px;
      // color: #bcd3e5;
      // line-height: 24px;

      font-kerning: normal;
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      font-size: 14px;
      color: #ffffff;
    }

    .sdvalue {
      // font-family: "Arial Negreta", "Arial Normal", "Arial";
      // font-weight: 700;
      // font-style: normal;
      // font-size: 18px;
      // color: #68F4FB;
      // line-height: 16px;

      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 700;
      font-style: normal;
      color: #68f4fb;
    }

    .unit {
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      font-weight: 400;
      font-size: 12px;
      color: #ecf6ff;
      line-height: 12px;
    }
  }

  .value {
    display: inline-block;

    // border: #00FFFF 1px solid;
    width: 50px;
  }

  #gdbh_echart_gdlr {

    width: 17rem;
    height: 10rem;
    position: fixed;
    top: 6rem;
    left: 96rem;
  }

  #gdbh_echart_gdlc {
    width: 17rem;
    height: 10rem;
    position: fixed;
    top: 6rem;
    left: 108rem;
    z-index: -1;
  }
}

.legend_gdlx {
  margin-top: 9rem;
  width: 25rem;
  height: 4rem;

  .gdbh_echart_gdlr_legend {
    height: 4rem;
    width: 12rem;
    background: no-repeat;

    background-image: url("/static/images/overview/gdbh_echart_gdlr_legend.png");
    display: inline-block;
  }

  .gdbh_echart_gdlc_legend {
    height: 4rem;
    width: 12rem;
    background: no-repeat;

    background-image: url("/static/images/overview/gdbh_echart_gdlc_legend.png");
    display: inline-block;
    float: right;
    margin-top: 1rem;
  }
}

.selectTab {
  position: absolute;
  right: 22px;
  bottom: 111px;
  z-index: 1;

  /deep/ .el-input__inner {
    // padding-right: 30px;
    width: 128px !important;
    height: 24px !important;
    line-height: 24px;
    padding-left: 22px;
    padding-right: 0px;
    font-size: 12px;
    color: #bcd3e5;
    border: none;
    // background: url("/static/images/overview/selectBg.png") no-repeat !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-size: 100% 100%;
  }

  /deep/ .el-input__icon {
    line-height: 1;
  }

  /deep/ .el-input__suffix {
    right: -2px;
  }

  /deep/ .el-select-dropdown__list {
    color: #bcd3e5 !important;
    background: linear-gradient(180deg,
        rgba(3, 115, 177, 0) 11%,
        rgba(3, 115, 177, 0.48) 100%);
    border-image: linear-gradient(360deg,
        rgba(75, 185, 250, 0.2),
        rgba(75, 185, 250, 0.05)) 1 1 !important;
    border: none;
  }

  /deep/ .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgba(87, 163, 226, 0.5);
  }

  /deep/ .el-select-dropdown__item {
    color: #ecf6ff;
  }
}



.content {
  position: absolute;
  left: 1%;
  width: 500px;
  top: 18%;
}

.item {
  width: 45%;
  height: 30%;
  display: inline-block;
  // border: #00FFFF 1px solid;

}

.icon {
  width: 50px;
  padding: 1.5%;
  border-radius: 8px;
  display: inline-block;
  height: 50px
}

.icon_st {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/st.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_sjd {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/sjd.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_ht {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/ht.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_jsyd {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/gdxz_jsyd.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_bcyd {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/gdxz_bcyd.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.item_back {
  width: 32%;
  height: 45px;
  display: inline-block;
  margin-right: 4rem;
  text-align: center;
}

.text_back {
  background: no-repeat 100%;
  background-image: url("/static/images/overview/zbph_back.png");
  width: 161px;
  height: 50px;
  display: inline-block;


  p {
    font-kerning: normal;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
  }

  span {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    color: #68F4FB;
  }
}

.text {
  display: inline-block;
  // border: #00FFFF 1px solid;
  width: 170px;

  p {
    font-kerning: normal;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
  }

  span {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    color: #68F4FB;
  }
}

.info {
  width: 21rem;
  height: 7rem;
  position: relative;
  top: 8rem;
  // right: -4rem;

  ul {
    list-style: none;

    .zbph_value_unit {}

    .zbph_unit {
      position: relative;
      left: 48px;
      bottom: 12px;
      font-size: 12px;

    }

    .zbph_label {
      display: inline-block;
      width: 93px;
      height: 16px;
      font-size: 15px;
      position: relative;
      top: -9px;
      font-weight: 600;
    }

    .zbph_value {
      color: #f9b447;
      position: relative;
      left: 43px;
      top: -10px;
      font-weight: 700;
    }
  }

  .icon {

    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, rgba(37, 177, 255, 0.6) 0%, rgba(0, 48, 83, 0.48) 100%);
    box-shadow: inset 0px 0 5px 0px #002B6C;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(100, 218, 255, 0.5);
  }

  .left_info {
    display: inline-block;
    width: 50%;
    height: 100%;
  }

  .right_info {
    width: 50%;
    height: 100%;
    float: right;
  }
}

#jcpg {
  width: 27rem;
  height: 10rem;
  position: absolute;
  right: -1rem;
  top: 4.5rem;
}
</style>