yj合并

investmentNew/index.html

@@ -323,12 +323,120 @@
         </div>
       </div>
       <div class="right">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+        <div class="means">
+          <div class="meansWrap">
+            <div class="meansHead">
+              <img src="./img/1.png" alt="" />
+              固定资产
+            </div>
+            <div class="wrapMeansItem">
+              <div
+                v-for="(item, index) in meansList"
+                class="itemWid"
+                :class="[topIndex == index ? 'active': '']"
+              >
+                <div class="itemBac">
+                  <div>
+                    {{item.value}}
+                    <p>个</p>
+                  </div>
+                  <span>{{item.label}}</span>
+                </div>
+                <img
+                  v-if="index != meansList.length -1"
+                  src="./img/6.png"
+                  alt=""
+                />
+              </div>
+            </div>
+          </div>
+          <div class="shareholding">
+            <div class="meansHead">
+              <img src="./img/2.png" alt="" />
+              股权类
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="publicTitle">进度成本偏差概览</div>
+          <div class="progressCost">
+            <div class="costItem" v-for="(item, index) in costList">
+              <div class="itemTop">
+                <div class="topDiv">
+                  <p>项目数量</p>
+                  <div class="costNum">
+                    {{item.num}}
+                    <span>个</span>
+                  </div>
+                </div>
+                <div class="topDiv" style="margin-top: 1.875rem">
+                  <p>项目数量</p>
+                  <div class="costNum">
+                    {{item.value}}
+                    <span>亿</span>
+                  </div>
+                </div>
+              </div>
+              <div class="itemBottom">
+                <img class="aniLeft" src="./img/8.png" alt="" />
+                <div>{{item.status}}</div>
+                <img class="aniRight" src="./img/9.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="publicTitle">投资预算执行</div>
+          <div class="invest">
+            <div class="lp">
+              <div class="quan"></div>
+              <div class="bigq"></div>
+              <img :src="investData.investList[witchs].url" alt="" />
+              <div
+                class="plItem"
+                :style="{transform:'rotate('+innerDeg+'deg)'}"
+              >
+                <div
+                  :class="[witchs == index? 'active' : '']"
+                  v-for="(item, index) in investData.investList"
+                  :style="{ transform: 'translateY(-50%) rotate(-' + item.deg + 'deg)' }"
+                  @click="clickItem(index)"
+                >
+                  {{item.name}}
+                </div>
+              </div>
+            </div>
+            <div class="investInfoWrap">
+              <div class="investInfo">
+                预算额<span>{{investData.investList[witchs].yse}}</span>亿
+              </div>
+              <div class="investInfo">
+                已签合同额<span>{{investData.investList[witchs].yqhte}}</span>亿
+              </div>
+              <div class="investInfo">
+                产值认定额<span>{{investData.investList[witchs].czrde}}</span>亿
+              </div>
+              <div class="investInfo">
+                结算额<span>{{investData.investList[witchs].jse}}</span>亿
+              </div>
+              <div class="investInfo">
+                付款额<span>{{investData.investList[witchs].fke}}</span>亿
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="publicTitle">进度成本偏差</div>
+          <div class="echartsWrap" ref="echartR1"></div>
+        </div>
+        <div>
+          <div class="publicTitle">项目风险分析</div>
+          <div class="projectRisk">
+            <div class="riskWrap" ref="echartR2">1</div>
+            <div class="riskWrap">2</div>
+            <div class="riskWrap longRisk">3</div>
+          </div>
+        </div>
       </div>
     </div>
     <!-- <div style="width: 500px;height: 500px;" ref="echart1"></div> -->

investmentNew/js/index.js

@@ -15,17 +15,233 @@ let app = new Vue({
       industryLayout: 0,//产业布局分析
       time1: '', // 4秒定时器
       time2: '', // 针对投前产业布局分析的定时器
+      meansList: [
+        {
+          label: "初步设计",
+          value: "106",
+        },
+        {
+          label: "详细设计",
+          value: "103",
+        },
+        {
+          label: "施工",
+          value: "62",
+        },
+        {
+          label: "完工",
+          value: "35",
+        },
+        {
+          label: "验收",
+          value: "42",
+        },
+        {
+          label: "结算",
+          value: "33",
+        },
+      ],
+      costList: [
+        {
+          num: 160,
+          value: 284,
+          status: "正偏差",
+        },
+        {
+          num: 280,
+          value: 129,
+          status: "容差内",
+        },
+        {
+          num: 103,
+          value: 1082,
+          status: "负偏差",
+        },
+      ],
+      investData: {
+        investList: [
+          {
+            name: "大地控股",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo15.png",
+          },
+          {
+            name: "云时代",
+            yse: "21.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo16.png",
+          },
+          {
+            name: "华舰体育",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo17.png",
+          },
+          {
+            name: "神农科技",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo18.png",
+          },
+          {
+            name: "山西焦煤",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo1.png",
+          },
+          {
+            name: "晋能控股",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo2.png",
+          },
+          {
+            name: "华阳新材",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo3.png",
+          },
+          {
+            name: "潞安化工",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo4.png",
+          },
+          {
+            name: "华新燃气",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo5.png",
+          },
+          {
+            name: "太重集团",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo6.png",
+          },
+          {
+            name: "国际能源",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo7.png",
+          },
+          {
+            name: "华远陆港",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo8.png",
+          },
+          {
+            name: "水控集团",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo9.png",
+          },
+          {
+            name: "文旅集团",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo10.png",
+          },
+          {
+            name: "交控集团",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo11.png",
+          },
+          {
+            name: "航产集团",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo12.png",
+          },
+          {
+            name: "山西建投",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo13.png",
+          },
+          {
+            name: "汾酒集团",
+            yse: "26.79",
+            yqhte: "9.64",
+            czrde: "121.59",
+            jse: "120.13",
+            fke: "36.4",
+            url: "./img/logos/logo14.png",
+          },
+        ],
+      },
+      inner: 0,
+      innerDeg: 0,
+      timer: null,
+      witchs: 0,
+      topIndex: 0,
     }
   },
   created () {
 
   },
   beforeDestroy () {
-
+    clearInterval(this.timer);
   },
   mounted () {
     this.time4s()
     this.timeNs()
+    this.filterLpData();
+    this.lpRotate();
     setTimeout(() => {
       this.leftEcharts1Fun()
       this.leftEcharts2Fun()
@@ -36,11 +252,529 @@ let app = new Vue({
       this.leftEcharts7Fun()
       this.leftEcharts8Fun()
       this.chinaEchartsFun()
+      this.initChartR1();
+      this.initChartR2();
     })
-    // this.moChart()
 
   },
   methods: {
+    initChartR1() {
+      let that = this;
+      let sumA = 42;
+      let right5 = [[1, 2, 3, 4, 5, 6]];
+      let commonCompany = [
+        "山西焦煤",
+        "山西焦煤",
+        "山西焦煤",
+        "山西焦煤",
+        "山西焦煤",
+        "山西焦煤",
+      ];
+      // 所有在100范围外的全部变成0，其他值相应增加/减少sumA
+      // right5.forEach((item) => {
+      //   item.forEach((item2) => {
+      //     if (Number(item2[1]) < 0) {
+      //       item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
+      //     } else if (Number(item2[1]) > 0) {
+      //       item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA);
+      //     }
+      //     if (Number(item2[1]) < -100 - sumA) {
+      //       item2[1] = that.$set(item2, 1, 0);
+      //       item2[1] = that.$set(item2, 2, 0);
+      //     } else if (Number(item2[1]) > 100 + sumA) {
+      //       item2[1] = that.$set(item2, 1, 0);
+      //       item2[1] = that.$set(item2, 2, 0);
+      //     }
+      //   });
+      // });
+
+      const itemStyle = {
+        // opacity: 0.8,
+        shadowBlur: 10,
+        shadowOffsetX: 0,
+        shadowOffsetY: 0,
+        shadowColor: "rgba(0,0,0,0.3)",
+      };
+      that.right2Chart = echarts.init(this.$refs["echartR1"]);
+      that.right2Chart.on("showTip", (params) => {
+        // 如果是7或者15并且满足防抖则切换
+        if (
+          (params.dataIndex == 5 || params.dataIndex == 11) &&
+          that.echartR2Fd
+        ) {
+          that.echartR2Fd = false;
+          setTimeout(() => {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
+            that.right2Chart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR2Fd = true;
+            }, 2000);
+          }, 1900);
+          // 如果是17表示到了最后一个，那么重新来一遍
+        } else if (params.dataIndex == 17 && that.echartR2Fd) {
+          that.echartR2Fd = false;
+          setTimeout(() => {
+            option.dataZoom[0].endValue = 0;
+            option.dataZoom[0].startValue = 5;
+            that.right2Chart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR2Fd = true;
+            }, 2000);
+          }, 1900);
+        }
+      });
+      let option = {
+        color: ["#04635E", "#697143", "#4A3042"],
+        dataZoom: [
+          {
+            // start: 9,//默认为@
+            // end: 100,//黑认认为1@0
+            type: "slider",
+            show: false,
+            // xAxisIndex: [0]
+            handlesize: 0, //滑动条的 左右2个滑动条的大小
+            startValue: 5, // 初始显示值
+            endValue: 0, // 结束显示值
+            height: 10, //组件高度
+            left: "5%",
+            right: "4%", //右边的距离
+            bottom: "25%", //底边的距离
+            borderColor: "#939",
+            fillerColor: "#269cdb",
+            borderRadius: 5,
+            backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
+            showDataShadow: false, //是否显示数据阴影
+            showDetail: false, //即拖拽时候是否显示详细数值信息
+            truerealtime: true, //是否实时更新
+            filterMode: "filter",
+          },
+          {
+            type: "inside",
+            show: true,
+            start: 1,
+            end: 100,
+            zoomOnMouseWheel: false, //滚轮是否触发缩放
+            moveOnMouseMove: false, //鼠标滚轮触发滚动
+          },
+        ],
+        legend: {
+          selectedMode: false,
+          top: 10,
+          right: "6%",
+          data: ["正偏差", "容差", "负偏差"],
+          textStyle: {
+            fontSize: 20,
+            color: "#fff",
+            fontFamily: "Microsoft YaHei",
+          },
+        },
+        textStyle: {
+          color: "#fff",
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          textStyle: {
+            color: "#FFF", // 文字的颜色
+            fontSize: "20", // 文字字体大小
+            fontFamily: "Microsoft YaHei",
+          },
+          formatter: (data) => {
+            return `${
+              data[0].value[0]
+            }<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+              data[0].color
+            }"></span> ${data[0].seriesName}：${that.numFormat(
+              data[0].data[2]
+            )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+              data[1].color
+            }"></span> ${data[1].seriesName}：${that.numFormat(
+              data[1].data[2]
+            )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+              data[2].color
+            }"></span> ${data[2].seriesName}：${that.numFormat(
+              data[2].data[2]
+            )}亿`;
+          },
+          axisPointer: {
+            //  // type: 'cross',',
+          },
+        },
+        grid: {
+          top: "10%",
+          right: "7%",
+          left: "7%",
+          bottom: "6%",
+        },
+        yAxis: {
+          min: -101 - sumA,
+          max: 101 + sumA,
+          maxInterval: 1,
+          splitLine: {
+            show: false,
+            // interval:,
+            lineStyle: {
+              color: "#68b4dd66",
+              type: "dashed",
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            // formatter: '{value}',
+            formatter(data) {
+              if (data == 100 + sumA) {
+                return "100%";
+              } else if (data == -100 - sumA) {
+                return "-100%";
+              } else if (data == -5 - sumA) {
+                return "-5%";
+              } else if (data == 5 + sumA) {
+                return "5%";
+              }
+            },
+            textStyle: {
+              color: "#fff",
+              fontSize: "20",
+              fontFamily: "Microsoft YaHei",
+            },
+          },
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            fontFamily: "Microsoft YaHei",
+          },
+        },
+        xAxis: {
+          data: commonCompany,
+          axisLine: {
+            show: false, //隐藏X轴轴线
+            lineStyle: {
+              color: "#005094",
+              width: 1,
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#68b4dd66",
+              type: "dashed",
+            },
+          },
+          axisTick: {
+            show: true, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            rotate: -20,
+            padding: [0, 0, 0, 0],
+            textStyle: {
+              color: "#fff", //X轴文字颜色
+              fontSize: 20,
+              fontFamily: "Microsoft YaHei",
+            },
+          },
+        },
+        series: [
+          {
+            name: "正偏差",
+            type: "scatter",
+            itemStyle: itemStyle,
+            data: right5[0],
+            symbolSize: function (data) {
+              if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
+                return 40;
+              } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
+                return 70;
+              } else if (data[2] > 100) {
+                return 100;
+              }
+            },
+            markLine: {
+              symbol: "none",
+              data: [
+                {
+                  name: "100%",
+                  yAxis: 100 + sumA,
+                  lineStyle: {
+                    // color: '#fff',
+                  },
+                  label: {
+                    show: false,
+                    formatter: "{b}",
+                    position: "right",
+                    color: "#fff",
+                    fontSize: 20,
+                    label: {
+                      show: false,
+                    },
+                  },
+                },
+                {
+                  name: "5%",
+                  yAxis: 5 + sumA,
+                  lineStyle: {
+                    // color: '#fff',
+                  },
+                  label: {
+                    show: false,
+                    formatter: "{b}",
+                    position: "right",
+                    color: "#fff",
+                    fontSize: 20,
+                  },
+                },
+                {
+                  name: "-5%",
+                  yAxis: -5 - sumA,
+                  lineStyle: {
+                    // color: '#fff',
+                  },
+                  label: {
+                    show: false,
+                    formatter: "{b}",
+                    position: "right",
+                    color: "#fff",
+                    fontSize: 20,
+                  },
+                },
+                {
+                  name: "100%",
+                  yAxis: -100 - sumA,
+                  lineStyle: {
+                    // color: '#fff',
+                  },
+                  label: {
+                    show: false,
+                    formatter: "{b}",
+                    position: "right",
+                    color: "#fff",
+                    fontSize: 20,
+                  },
+                },
+              ],
+            },
+          },
+          {
+            name: "容差",
+            type: "scatter",
+            itemStyle: itemStyle,
+            data: right5[1],
+            symbolSize: function (data) {
+              if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
+                return 40;
+              } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
+                return 70;
+              } else if (data[2] > 100) {
+                return 100;
+              }
+            },
+          },
+          {
+            name: "负偏差",
+            type: "scatter",
+            itemStyle: itemStyle,
+            data: right5[2],
+            symbolSize: function (data) {
+              if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
+                return 40;
+              } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
+                return 70;
+              } else if (data[2] > 100) {
+                return 100;
+              }
+            },
+          },
+        ],
+      };
+      that.right2Chart.on("click", function (param) {
+        if (that.versions) {
+          that.rightAdd.modelName = 1;
+          that.rightAdd.substraction =
+            param.seriesName == "正偏差"
+              ? 1
+              : param.seriesName == "容差"
+              ? 2
+              : 3;
+          that.rightAdd.projectStepCode = "";
+          that.projectNum = 313;
+          that.rightPenetrateTwo(
+            1,
+            param.seriesName == "正偏差"
+              ? 1
+              : param.seriesName == "容差"
+              ? 2
+              : 3,
+            that.findCode(param.name),
+            "right"
+          );
+        } else {
+          that.projectListTipShow = true;
+        }
+      });
+      that.right2Chart.setOption(option);
+      tools.loopShowTooltip(that.right2Chart, option, {
+        interval: 2000,
+        loopSeries: true,
+      });
+    },
+    initChartR2() {
+      let that = this;
+      that.right2Chart = echarts.init(this.$refs["echartR2"]);
+      let option = {
+        color: [
+          {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#91231F", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#F98784", // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
+          {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#9F7F00", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#FBE463", // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
+          {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#07806E", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#79FFEB", // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
+        ],
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "Email",
+            type: "bar",
+            stack: "Ad",
+            barWidth: 14,
+            emphasis: {
+              focus: "series",
+            },
+            itemStyle: {
+              barBorderRadius: [15, 15, 15, 15],
+            },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: "Union Ads",
+            type: "bar",
+            stack: "Ad",
+            itemStyle: {
+              barBorderRadius: [15, 15, 15, 15],
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: "Video Ads",
+            type: "bar",
+            stack: "Ad",
+            itemStyle: {
+              barBorderRadius: [15, 15, 15, 15],
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [150, 232, 201, 154, 190, 330, 410],
+          },
+        ],
+      };
+      that.right2Chart.setOption(option);
+    },
+    clickItem(index) {
+      console.log(index);
+      const angle = 360 / this.investData.investList.length;
+      this.witchs = index;
+      this.inner = index;
+      this.innerDeg = this.witchs * angle;
+      this.lpRotate();
+    },
+    lpRotate() {
+      const angle = 360 / this.investData.investList.length;
+      clearInterval(this.timer);
+      this.timer = setInterval(() => {
+        this.inner++;
+        this.topIndex++;
+        this.topIndex = this.topIndex % this.meansList.length;
+        this.witchs = this.inner % this.investData.investList.length;
+        this.innerDeg = this.inner * angle;
+      }, 2000);
+    },
+    filterLpData() {
+      const angle = 360 / this.investData.investList.length;
+      for (let i in this.investData.investList) {
+        this.investData.investList[i].deg = i * angle;
+        this.$set(this.investData.investList, i, {
+          ...this.investData.investList[i],
+          deg: i * angle,
+        });
+      }
+    },
     // 4秒定时器
     time4s () {
       let that = this
@@ -1519,10 +2253,10 @@ let app = new Vue({
               show: false
             }
           },
-          tooltip:{
+          tooltip: {
             trigger: 'item',
             formatter: function (params) {
-              console.log(params,'??????????')
+              console.log(params, '??????????')
             }
           },
           roam: false,

investmentNew/styles/index.css

@@ -748,3 +748,387 @@ i {
 .capitalize {
   text-transform: capitalize;
 }
+* right css start */
+.right {
+  display: grid;
+  grid-template-rows: 20% 34% 1fr;
+  gap: 10px;
+}
+
+.right .means {
+  grid-column: 1 / 3;
+  display: flex;
+}
+
+.wrapMeansItem {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex: 1;
+}
+
+.meansHead {
+  font-size: 2rem;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+}
+
+.meansHead img {
+  width: 3rem;
+  height: 2.5rem;
+  margin-right: 1.25rem;
+}
+
+.meansWrap {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+}
+
+.itemWid {
+  width: calc(100% / 8);
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  position: relative;
+}
+
+.itemWid img {
+  position: absolute;
+  right: -95px;
+  bottom: 15px;
+  width: 100px;
+}
+
+.itemBac {
+  background: url(../img/3.png) no-repeat;
+  background-size: 100% 100%;
+  font-size: 1.75rem;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #ffffff;
+  height: calc(100% - 1.75rem);
+  width: 100%;
+  position: relative;
+}
+
+.itemBac div {
+  font-size: 72px;
+  line-height: 60px;
+  font-family: Helvetica Neue Extra Black Cond;
+  font-weight: 400;
+  color: #68bdff;
+  position: absolute;
+  top: 75px;
+  left: 110px;
+  display: flex;
+  align-items: flex-end;
+}
+
+.itemBac div p {
+  font-size: 28px;
+  line-height: 28px;
+  margin-left: 10px;
+}
+
+.itemBac span {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+.active .itemBac {
+  background: url(../img/5.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.active .itemBac span,
+.active .itemBac div {
+  color: #ebde27;
+}
+
+.publicTitle {
+  width: 100%;
+  height: calc(100% / 7);
+  overflow: hidden;
+  background: url("../img/small-title.png") no-repeat center bottom; /*图标路径*/
+  background-size: 100% 50%;
+  display: flex;
+  align-items: center;
+  padding-left: 7%;
+  font-size: 36px;
+  font-style: oblique;
+  text-shadow: 2px 3px 1px black;
+  letter-spacing: 5px;
+}
+
+.progressCost {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: calc(100% - 100% / 7);
+  overflow: hidden;
+  padding: 1%;
+}
+.progressCost .costItem {
+  width: 30%;
+  height: 100%;
+}
+
+.progressCost .costItem .itemTop {
+  background: url(../img/70.png) no-repeat;
+  background-size: 100% 100%;
+  height: 76%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.itemTop p {
+  font-size: 1.75rem;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #ffffff;
+  position: relative;
+}
+
+.itemTop p::after {
+  content: "";
+  width: 0.75rem;
+  height: 0.75rem;
+  background: linear-gradient(0deg, #014198, #93ceff);
+  border-radius: 50%;
+  position: absolute;
+  left: -1.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.itemTop .topDiv {
+  padding-left: 1.25rem;
+  min-width: 220px;
+}
+
+.costNum {
+  font-family: Helvetica Neue Extra Black Cond;
+  font-weight: 400;
+  color: #68bdff;
+  display: flex;
+  align-items: flex-end;
+  margin-top: 1rem;
+  font-size: 60px;
+  line-height: 48px;
+  font-weight: bold;
+  color: #68bdff;
+}
+
+.costNum span {
+  font-size: 28px;
+  line-height: 28px;
+  margin-left: 0.625rem;
+}
+
+.progressCost .costItem .itemBottom {
+  background: url(../img/71.png) no-repeat;
+  background-size: 100% 100%;
+  height: 24%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.progressCost .costItem .itemBottom div {
+  font-size: 2rem;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #ffffff;
+}
+
+.costItem .itemBottom img {
+  width: 2rem;
+  height: 1.625rem;
+  position: relative;
+}
+
+.aniLeft {
+  animation: identifierl 1s infinite;
+}
+
+.aniRight {
+  animation: identifierr 1s infinite;
+}
+
+@keyframes identifierl {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 1.25rem;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes identifierr {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -1.25rem;
+  }
+  100% {
+    left: 0;
+  }
+}
+
+.invest {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: calc(100% - 100% / 7);
+}
+
+.invest .lp {
+  width: 53%;
+  height: calc(100% - 2rem);
+  display: flex;
+  align-items: center;
+  position: relative;
+  background: url(../img/10.png) no-repeat;
+  background-size: contain;
+  background-position: center;
+  margin: 1rem 0;
+}
+
+.lp img {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.quan {
+  width: 150px;
+  height: 150px;
+  border: 1px dashed #66bbfc;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.bigq {
+  width: 420px;
+  height: 420px;
+  border: 1px dashed #66bbfc;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.invest .lp .plItem {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 28px;
+  line-height: 28px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  color: #68bdff;
+  transform-origin: center center;
+  background: url(../img/11.png) no-repeat;
+  background-size: contain;
+  background-position: center;
+  transition: 0.5s;
+}
+
+.plItem .active {
+  color: #ebde27;
+}
+
+.invest .lp .plItem div {
+  position: absolute;
+  left: 130px;
+  top: 50%;
+  transform-origin: 200px 50%;
+  cursor: pointer;
+}
+
+.investInfoWrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 2.375rem 0;
+  height: 100%;
+}
+
+.investInfoWrap .investInfo {
+  font-size: 28px;
+  line-height: 28px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #ffffff;
+  display: flex;
+  align-items: flex-end;
+  position: relative;
+  padding-left: 20px;
+}
+
+.investInfoWrap .investInfo::after {
+  content: "";
+  width: 20px;
+  height: 20px;
+  border: 4px solid #68bdff;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: -10px;
+}
+
+.investInfoWrap .investInfo span {
+  font-size: 40px;
+  line-height: 31px;
+  display: inline-block;
+  font-family: Helvetica Neue Extra Black Cond;
+  font-weight: 400;
+  color: #68bdff;
+  margin: 0 16px;
+}
+
+.echartsWrap {
+  height: calc(100% - 100% / 7);
+}
+
+.projectRisk {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 10px;
+  width: 100%;
+  height: 100%;
+}
+
+.projectRisk .riskWrap {
+  height: 100%;
+  width: 100%;
+}
+.projectRisk .longRisk {
+  grid-column: 1 / 3;
+}
+
+/* right css end */