q

src/api/Osp/svgApi.ts

@@ -84,6 +84,16 @@ export function getSvgData_api(data: any) {
     data,
   });
 }
+// 左下册 svg数据_量测
+export function getSvgMeasValue_api(data: any) { 
+  return request({
+    url: "/api/wwpm/biz/v1/device/meas_value",
+    method: "POST",
+    data,
+  });
+}
+
+
 
 
 

src/views/pages/CapacityAdjustmentPage/index.vue

@@ -60,13 +60,15 @@
           ></div>
           <!-- 右收缩箭头 -->
           <div class="title_bg title">
-            <div class="title_box">
+            <div class="title_box" @click="nengliangtiaojie">
               <img
                 src="@/assets/images/capAjustmentPage/ajust_logo.png"
                 alt=""
               />能量调节
             </div>
           </div>
+          <!-- <div class="capAjust_box content_bg" v-if="true"> -->
+
           <div class="capAjust_box content_bg" v-if="allFlag">
             <div class="infotitle">
               <span>可调资源</span>
@@ -449,6 +451,119 @@
       </div>
       <div class="send_info" v-if="true"></div>
     </div>
+    <div class="content_center_1">
+      <!-- <div class="run_detail" v-if="true"> -->
+
+      <div class="run_detail" v-if="runDetailFlage_1">
+        <div class="tip">
+          <img src="@/assets/images/osPage/run_detail_icon.png" alt="" />
+          <span class="jianbian">调节记录</span>
+          <div class="closebtn" @click="runDetailFlage_1 = false"></div>
+        </div>
+        <!-- <div class="title">
+          <div class="titlebg"><span>调节记录</span></div>
+        </div> -->
+        <div class="content">
+          <div class="table_box">
+            <el-table
+              :data=tableData_1
+              style="width: 100%; height: 100%"
+            >
+              <el-table-column label="调节目标" align="center">
+                <template #default="scope">
+                  <span style="margin-left: 10px">{{ scope.row.id }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="调节量" align="center">
+                <template #default="scope">
+                  <span style="margin-left: 10px">{{
+                    scope.row.run_content
+                  }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="执行时间" width="265" align="center">
+                <template #default="scope">
+                  <span style="margin-left: 10px">{{
+                    scope.row.run_time
+                  }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="执行状态" align="center">
+                <template #default="scope">
+                  <span style="margin-left: 10px">{{
+                    scope.row.run_status === 1 ? "完成" : "未完成"
+                  }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <!-- <div class="bottom">
+          <el-pagination
+            small
+            background
+            layout="prev,pager,next"
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div> -->
+      </div>
+      <div class="area_load" v-if="areaLoadFlag">
+        <div class="tip">
+          <img src="@/assets/images/osPage/area_load_icon.png" alt="" />
+          <span class="jianbian">台区负载情况</span>
+          <div class="closebtn" @click="areaLoadFlag = false"></div>
+        </div>
+        <div class="title">
+          <div class="titlebg"><span>台区自制情况</span></div>
+        </div>
+        <div class="content">
+          <div class="left">
+            <div class="number">
+              <div class="rate">
+                <div class="box">
+                  <div class="yuan"></div>
+                  <div class="key">&nbsp;&nbsp;转供次数&nbsp;:&nbsp;</div>
+                </div>
+                <div class="val">
+                  <div class="ratekw">&nbsp;10</div>
+                  <span>次</span>
+                </div>
+              </div>
+            </div>
+            <div class="numberBefore">
+              <div class="Btn1 bg1 fs25">转供前</div>
+              <div class="beforeEchart">
+                <beforeLine></beforeLine>
+              </div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="number">
+              <div class="rate">
+                <div class="box">
+                  <div class="yuan"></div>
+                  <div class="key">&nbsp;&nbsp;转供功率&nbsp;:&nbsp;</div>
+                </div>
+                <div class="val">
+                  <div class="ratekw">&nbsp;1023</div>
+                  <span>kW</span>
+                </div>
+              </div>
+            </div>
+            <div class="numberBefore">
+              <div class="Btn1 bg2 fs25">转供后</div>
+              <div class="beforeEchart">
+                <afterLine></afterLine>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -516,6 +631,16 @@ const getAllSourceAjust = () => {
     }
   });
 };
+
+let runDetailFlage_1=ref(false)
+const nengliangtiaojie=()=>{
+  runDetailFlage_1.value=true
+}
+
+
+
+
+
 // 获取线路的可调资源 参数是orgID 和mrid
 const getAllSourceAjust_Line = (mrid: string) => {
   let datainput = {
@@ -531,7 +656,7 @@ const getAllSourceAjust_Line = (mrid: string) => {
 
 let treeNodeKey = ref(""); //点击设备树二级服务获取的台区id去获取台区负载率
 let treeNodes = ref("");
-// 设备树传来的设备树节点id treeNode是节点数据
+// 设备树传来的设备树节点id treeNode是节c点数据
 const getTreeKey = (treeNode: any) => {
   rateDate_willFlag.value = false;
   treeNodeKey.value = treeNode.key; //线路的id
@@ -836,6 +961,32 @@ const changeSourceInfo = (val: string) => {
 //   // },
 // ]);
 
+
+// 执行明细
+// 执行明细
+// 表格
+interface TableDate {
+  id: string;
+  run_content: string;
+  run_time: string;
+  run_status: number;
+}
+let tableData_1 = reactive<TableDate[]>([
+  {
+    id: "西小站村V2G充电桩",
+    run_content: "20",
+    run_time: "2024-07-18 12:56",
+    run_status: 1,
+  },
+  {
+    id: "西小站电网台区储能",
+    run_content: "8",
+    run_time: "2024-07-18 12:32",
+    run_status: 1,
+  },
+,
+  
+]);
 // 右 -能量调节
 let progressContentFlag = ref(false);
 // 调节分析
@@ -1163,8 +1314,8 @@ const styleVar = computed(() => {
   position: absolute;
   right: changeHeight(16.98);
   top: changeHeight(25);
-  width: changeHeight(26.51);
+  width: changeHeight(46.51);
-  height: changeHeight(26.51);
+  height: changeHeight(46.51);
   background-image: url("@/assets/images/common/closebtn.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -2602,5 +2753,409 @@ const styleVar = computed(() => {
       }
     }
   }
+  .content_center_1 {
+    z-index: 5;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .linesvgbox {
+      box-sizing: border-box;
+      width: changeHeight(1338.06);
+      height: changeHeight(1218.37);
+      border: 1px solid red;
+    }
+
+    .run_detail {
+      box-sizing: border-box;
+      width: changeHeight(1338.06);
+      height: changeHeight(1218.37);
+      background: url("@/assets/images/osPage/run_detail_bg.png") no-repeat;
+      background-size: 100% 100%;
+      padding-top: 1%;
+      padding-left: changeHeight(27);
+
+      .tip {
+        height: 7%;
+        display: flex;
+        align-items: center;
+
+        img {
+          height: changeHeight(59);
+          margin-right: changeHeight(14);
+        }
+
+        /* 精品可视化素材店 */
+
+        font-weight: 600;
+        font-size: changeHeight(45);
+      }
+
+      .title {
+        height: changeHeight(152);
+        display: flex;
+        align-items: center;
+
+        .titlebg {
+          width: 100%;
+          height: changeHeight(82.15);
+          background: url("@/assets/images/osPage/run_detail_titlebg.png")
+            no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+
+          span {
+            margin-left: changeHeight(24);
+            font-weight: 400;
+          }
+        }
+      }
+
+      .content {
+        height: 68%;
+        margin-top: 1%;
+        margin-top: 5%;
+
+        :deep(.table_box) {
+          width: 100%;
+          height: 100%;
+          font-size: changeHeight(40) !important;
+
+          // 表格样式
+          .el-table,
+          tr,
+          th,
+          td {
+            background-color: transparent !important;
+          }
+
+          .el-table__body-wrapper {
+            color: #ffffff;
+          }
+
+          // 设置header的字体和高度
+          .el-table__header-wrapper {
+            .cell {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: changeHeight(40);
+              font-weight: 400;
+              height: changeHeight(93);
+              line-height: changeHeight(93);
+            }
+          }
+
+          // 设置行的字体和高度
+          .el-table__body-wrapper {
+            td {
+              // border-top: 1px solid rgba(255, 255, 255, 0.5);
+              // border-bottom: none;
+            }
+
+            //  控制每行的高度
+            .cell {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: changeHeight(100);
+              line-height: changeHeight(40);
+              font-size: changeHeight(38);
+              // font-weight: 400;
+            }
+          }
+
+          // el-table出现小白线 伪类
+          .el-table__inner-wrapper:before {
+            height: 0;
+          }
+
+          // 设置第一列单独样式
+          .el-table td:nth-child(1) {
+            color: #6ffbf7;
+            font-size: changeHeight(45) !important;
+          }
+
+          // 设置第一列单独样式
+          .el-table td:nth-child(2) {
+            font-size: changeHeight(50) !important;
+          }
+
+          // 设置第一列单独样式
+          .el-table td:nth-child(3) {
+            font-size: changeHeight(35) !important;
+          }
+
+          // 设置第一列单独样式
+          .el-table td:nth-child(4) {
+            color: #43fb55;
+            font-size: changeHeight(45) !important;
+          }
+
+          // 去除表格得所有边框
+          .el-table thead tr > th {
+            width: 90% !important;
+            background-color: rgba(0, 100, 156, 0.8) !important;
+            border: 0px 0px 10px #50ffff !important;
+            color: #fff;
+          }
+
+          // 更改表格每行背景颜色
+          .el-table tbody tr > td {
+            // background-color: rgb(26,28,119);
+            color: #fff;
+            border: transparent !important;
+          }
+
+          // 鼠标滑过每行的颜色
+          .el-table--enable-row-hover .el-table__body tr:hover > td {
+            background-color: rgba(145, 245, 255, 0.1) !important;
+          }
+
+          // 去除表格上边框
+          .el-table th.el-table__cell.is-leaf {
+            border: transparent !important;
+          }
+
+          //  去除表格下边框
+          .el-table::before,
+          .el-table--group::after,
+          .el-table--border::after {
+            background-color: unset !important;
+            border: transparent !important;
+          }
+
+          .el-table {
+            border: transparent !important;
+
+            background: linear-gradient(
+              180deg,
+              #01233c 0%,
+              rgba(8, 150, 255, 0.42) 100%
+            );
+          }
+        }
+      }
+
+      // 分页样式
+      :deep(.bottom) {
+        //
+        margin-right: changeHeight(27);
+        height: 8%;
+        display: flex;
+        justify-content: center;
+
+        // align-items: flex-start;
+        // 分页
+        .el-pagination {
+          .el-pagination__total {
+            border: 1px solid #fff;
+            border-radius: changeHeight(4);
+            padding: changeHeight(5) changeHeight(10);
+            color: rgba(255, 255, 255, 0.6);
+          }
+
+          .btn-prev,
+          .btn-next,
+          .el-pager li {
+            background-color: transparent;
+            color: rgba(87, 223, 242, 0.6);
+            border: 1px solid #57dff2;
+            border-radius: changeHeight(4);
+            margin: 0 changeHeight(5);
+            font-size: changeHeight(30);
+            padding: changeHeight(25) changeHeight(23); //图标大小
+          }
+
+          .el-icon {
+            font-size: changeHeight(25); //》 《箭头大小
+          }
+
+          .el-pager {
+            .is-active {
+              color: #6ffbf7;
+            }
+          }
+
+          .el-pagination__sizes {
+            margin-left: changeHeight(15);
+
+            .el-input {
+              width: changeHeight(100);
+              border: 1px solid #fff;
+              border-radius: changeHeight(4);
+
+              .el-input__wrapper {
+                background-color: transparent;
+                box-shadow: none !important;
+
+                .el-input__inner {
+                  color: rgba(255, 255, 255, 0.6);
+                }
+              }
+            }
+          }
+
+          .el-pagination__jump {
+            .el-input {
+              border: 1px solid #fff;
+              border-radius: changeHeight(4);
+
+              .el-input__wrapper {
+                box-shadow: none;
+                background-color: transparent;
+
+                .el-input__inner {
+                  color: rgba(255, 255, 255, 0.6);
+                }
+              }
+            }
+
+            span {
+              color: rgba(255, 255, 255, 0.6);
+            }
+          }
+        }
+      }
+    }
+
+    .area_load {
+      width: changeHeight(1747.34);
+      height: changeHeight(937.4);
+      box-sizing: border-box;
+      background: url("@/assets/images/osPage/area_load_bg.png") no-repeat;
+      background-size: 100% 100%;
+      padding-top: 1%;
+      padding-left: changeHeight(27);
+
+      .tip {
+        height: 7%;
+        display: flex;
+        align-items: center;
+
+        img {
+          height: changeHeight(54);
+          margin-right: changeHeight(14);
+        }
+
+        /* 精品可视化素材店 */
+
+        font-weight: 600;
+        font-size: changeHeight(50);
+      }
+
+      .title {
+        height: changeHeight(162);
+        display: flex;
+        align-items: center;
+
+        .titlebg {
+          width: 100%;
+          height: changeHeight(82);
+          background: url("@/assets/images/osPage/run_detail_titlebg.png")
+            no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+
+          span {
+            margin-left: 2%;
+            font-weight: 400;
+            font-size: changeHeight(40);
+          }
+        }
+      }
+
+      .content {
+        height: 75%;
+        display: flex;
+        margin-top: 1%;
+
+        .left,
+        .right {
+          flex: 1;
+
+          .number {
+            height: changeHeight(95);
+            display: flex;
+            justify-content: center;
+          }
+
+          .rate {
+            display: flex;
+            align-items: center;
+
+            .box {
+              display: flex;
+              align-items: center;
+
+              .yuan {
+                background: #50ffff;
+                width: changeHeight(15);
+                height: changeHeight(15);
+                border-radius: 50%;
+              }
+
+              .key {
+                font-size: changeHeight(35);
+              }
+            }
+
+            .val {
+              display: flex;
+              align-items: center;
+
+              .ratekw {
+                /* 9999 */
+                font-weight: 600;
+                font-size: changeHeight(45);
+
+                // color: #12e7e3;
+              }
+
+              span {
+                margin-top: changeHeight(5);
+                font-size: changeHeight(35);
+                // background-color: #00f0ff;
+                margin-left: changeHeight(5);
+              }
+            }
+          }
+
+          .numberBefore {
+            position: relative;
+
+            .Btn1 {
+              position: absolute;
+              height: changeHeight(60);
+              line-height: changeHeight(60);
+              font-size: changeHeight(35);
+              width: changeHeight(152.25);
+            }
+
+            .bg1 {
+              background: url("@/assets/images/btnType/btnblue.png") no-repeat;
+              background-size: 100% 100%;
+            }
+
+            .bg2 {
+              background: url("@/assets/images/btnType/btngreen.png") no-repeat;
+              background-size: 100% 100%;
+            }
+
+            .beforeEchart {
+              height: changeHeight(560);
+              width: changeHeight(800);
+            }
+          }
+        }
+
+        .right {
+        }
+      }
+    }
+  }
 }
 </style>

src/views/pages/carPage/index.vue

@@ -331,7 +331,7 @@
           ></el-pagination>
         </div>
       </div>
-      <!-- <div class="ajustCar" v-if="false"> -->
+      <!-- <div class="ajustCar" v-if="true"> -->
 
       <div class="ajustCar" v-if="ajustCarPageFlag">
         <div class="tip">
@@ -382,7 +382,7 @@
                 <el-date-picker
                   v-model="formData.start_date"
                   type="date"
-                  placeholder="Pick a date"
+                  placeholder="开始日期"
                   style="width: 100%"
                 />
               </el-col>
@@ -413,7 +413,7 @@
                 <el-date-picker
                   v-model="formData.end_date"
                   type="date"
-                  placeholder="Pick a date"
+                  placeholder="结束日期"
                   style="width: 100%"
                 />
               </el-col>

src/views/pages/homePage/index.vue

@@ -292,7 +292,7 @@
                       <div class="cen">
                         <div class="namebg">
                           配网（
-                          <div class="fs35">线路总数：1007条</div>
+                          <div class="fs35">线路总数：978条</div>
                           ）
                         </div>
                       </div>
@@ -348,7 +348,7 @@
                             />
                           </div>
                           <div class="photovoltaic_value1">
-                            <div class="hu">2 <span>条</span></div>
+                            <div class="hu">1<span>条</span></div>
                           </div>
                         </div>
                       </div>
@@ -383,7 +383,7 @@
                             />
                           </div>
                           <div class="photovoltaic_value1">
-                            <div class="hu">8427 <span>条</span></div>
+                            <div class="hu">8427 <span>台</span></div>
                           </div>
                         </div>
                         <div class="rowbox">
@@ -399,7 +399,7 @@
                             />
                           </div>
                           <div class="photovoltaic_value1">
-                            <div class="hu">8035 <span>条</span></div>
+                            <div class="hu">8035 <span>台</span></div>
                           </div>
                         </div>
                         <div class="rowbox">
@@ -538,7 +538,7 @@
                 class="icon_panel_left_on"
                 @click="stroedContentFlag = false"
               ></div>
-              <div class="title">
+              <div class="title" @click="alert_tongzhi">
                 <img src="@/assets/images/mainPage/icon_title4.png" alt="" />
                 <span>储</span>
               </div>
@@ -665,6 +665,27 @@
         </div>
       </div>
     </div>
+    <!-- 通知消息 -->
+      <div class="content_center_alert1" v-if="true">
+        <div class="run_detail" v-if="alert_tongzhiFlag">
+          <div class="tip">
+            <img src="@/assets/images/mainPage/icon_alert_pv.png" alt="" />
+            <span class="jianbian">通知</span>
+            <div class="closebtn" @click="alert_tongzhiFlag = false"></div>
+          </div>
+          <div class="content">
+            <div class="box">
+              <img src="@/assets/images/homePage/tongzhi.png" alt="" />
+              <div class="gaobottom">
+                <div class="gao">
+                  <!-- 接到10kV线路556调节需求30kW，时间17:00-18:00，待处理 -->
+                  [编号：48776100419]台区55608（10kV 556线路）于2024-07-12 14:36:54发生功率倒送，反向负载率1.52%。
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     <div class="black_box" v-if="alert_pvFlag"></div>
   </div>
 </template>
@@ -1267,6 +1288,10 @@ let storageEchart = reactive([
 const handlestorageTabDate = (val: any) => {
   storagetabDateFlag.value = val.id;
 };
+let alert_tongzhiFlag=ref(false)
+const alert_tongzhi=()=>{
+  alert_tongzhiFlag.value=true
+}
 // 充放点量时间选择器
 let selectDateObj = ref(null);
 // 向线型图传参数
@@ -2892,6 +2917,421 @@ const styleVar = computed(() => {
       }
     }
   }
+  .content_center_alert1 {
+  z-index: 1001;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .run_detail {
+    box-sizing: border-box;
+    width: changeHeight(938);
+    height: changeHeight(476.7);
+    // width:changeHeight(1338.06);
+    // height: changeHeight(1218.37);
+    background: url("@/assets/images/homePage/jinggaobg.png") no-repeat;
+    background-size: 100% 100%;
+    padding-top: 1%;
+    padding-left: changeHeight(27);
+
+    .box {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      img {
+        width: changeHeight(185);
+        height: changeHeight(185);
+      }
+      .gaobottom {
+        padding-left: 2%;
+        display: flex;
+        flex-direction: column;
+        font-size: changeHeight(43);
+
+        span,
+        .gao {
+          display: flex;
+          text-align: left;
+          flex-direction: flex-start;
+        }
+      }
+    }
+    .tip {
+      height: 14%;
+      // height: 7%;
+
+      display: flex;
+      align-items: center;
+
+      img {
+        height: changeHeight(49);
+        margin-right: changeHeight(14);
+      }
+
+      /* 精品可视化素材店 */
+
+      font-weight: 600;
+      font-size: changeHeight(45);
+    }
+
+    .title {
+      height: changeHeight(152);
+      display: flex;
+      align-items: center;
+
+      .titlebg {
+        width: 100%;
+        height: changeHeight(82.15);
+        background: url("@/assets/images/osPage/run_detail_titlebg.png")
+          no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+
+        span {
+          margin-left: changeHeight(35);
+          font-weight: 400;
+          font-size: changeHeight(35);
+        }
+      }
+    }
+
+    .content {
+      height: 68%;
+      margin-top: 1%;
+
+      :deep(.table_box) {
+        width: 100%;
+        height: 100%;
+        font-size: changeHeight(40) !important;
+
+        // 表格样式
+        .el-table,
+        tr,
+        th,
+        td {
+          background-color: transparent !important;
+        }
+
+        .el-table__body-wrapper {
+          color: #ffffff;
+        }
+
+        // 设置header的字体和高度
+        .el-table__header-wrapper {
+          .cell {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: changeHeight(40);
+            font-weight: 400;
+            height: changeHeight(93);
+            line-height: changeHeight(93);
+          }
+        }
+
+        // 设置行的字体和高度
+        .el-table__body-wrapper {
+          td {
+            // border-top: 1px solid rgba(255, 255, 255, 0.5);
+            // border-bottom: none;
+          }
+
+          //  控制每行的高度
+          .cell {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: changeHeight(100);
+            line-height: changeHeight(40);
+            font-size: changeHeight(38);
+            // font-weight: 400;
+          }
+        }
+
+        // el-table出现小白线 伪类
+        .el-table__inner-wrapper:before {
+          height: 0;
+        }
+
+        // 设置第一列单独样式
+        .el-table td:nth-child(1) {
+          color: #6ffbf7;
+          font-size: changeHeight(45) !important;
+        }
+
+        // 设置第一列单独样式
+        .el-table td:nth-child(2) {
+          font-size: changeHeight(50) !important;
+        }
+
+        // 设置第一列单独样式
+        .el-table td:nth-child(3) {
+          font-size: changeHeight(35) !important;
+        }
+
+        // 设置第一列单独样式
+        .el-table td:nth-child(4) {
+          color: #43fb55;
+          font-size: changeHeight(45) !important;
+        }
+
+        // 去除表格得所有边框
+        .el-table thead tr > th {
+          width: 90% !important;
+          background-color: rgba(0, 100, 156, 0.8) !important;
+          border: 0px 0px 10px #50ffff !important;
+          color: #fff;
+        }
+
+        // 更改表格每行背景颜色
+        .el-table tbody tr > td {
+          // background-color: rgb(26,28,119);
+          color: #fff;
+          border: transparent !important;
+        }
+
+        // 鼠标滑过每行的颜色
+        .el-table--enable-row-hover .el-table__body tr:hover > td {
+          background-color: rgba(145, 245, 255, 0.1) !important;
+        }
+
+        // 去除表格上边框
+        .el-table th.el-table__cell.is-leaf {
+          border: transparent !important;
+        }
+
+        //  去除表格下边框
+        .el-table::before,
+        .el-table--group::after,
+        .el-table--border::after {
+          background-color: unset !important;
+          border: transparent !important;
+        }
+
+        .el-table {
+          border: transparent !important;
+
+          background: linear-gradient(
+            180deg,
+            #01233c 0%,
+            rgba(8, 150, 255, 0.42) 100%
+          );
+        }
+      }
+    }
+
+    // 分页样式
+    :deep(.bottom) {
+      //
+      margin-right: changeHeight(27);
+      height: 8%;
+      display: flex;
+      justify-content: center;
+
+      // align-items: flex-start;
+      // 分页
+      .el-pagination {
+        .el-pagination__total {
+          border: 1px solid #fff;
+          border-radius: changeHeight(4);
+          padding: changeHeight(5) changeHeight(10);
+          color: rgba(255, 255, 255, 0.6);
+        }
+
+        .btn-prev,
+        .btn-next,
+        .el-pager li {
+          background-color: transparent;
+          color: rgba(87, 223, 242, 0.6);
+          border: 1px solid #57dff2;
+          border-radius: changeHeight(4);
+          margin: 0 changeHeight(5);
+          font-size: changeHeight(30);
+          padding: changeHeight(25) changeHeight(23); //图标大小
+        }
+
+        .el-icon {
+          font-size: changeHeight(25); //》 《箭头大小
+        }
+
+        .el-pager {
+          .is-active {
+            color: #6ffbf7;
+          }
+        }
+
+        .el-pagination__sizes {
+          margin-left: changeHeight(15);
+
+          .el-input {
+            width: changeHeight(100);
+            border: 1px solid #fff;
+            border-radius: changeHeight(4);
+
+            .el-input__wrapper {
+              background-color: transparent;
+              box-shadow: none !important;
+
+              .el-input__inner {
+                color: rgba(255, 255, 255, 0.6);
+              }
+            }
+          }
+        }
+
+        .el-pagination__jump {
+          .el-input {
+            border: 1px solid #fff;
+            border-radius: changeHeight(4);
+
+            .el-input__wrapper {
+              box-shadow: none;
+              background-color: transparent;
+
+              .el-input__inner {
+                color: rgba(255, 255, 255, 0.6);
+              }
+            }
+          }
+
+          span {
+            color: rgba(255, 255, 255, 0.6);
+          }
+        }
+      }
+    }
+  }
+  .area_load {
+    width: changeHeight(1156.86);
+    height: changeHeight(620.62);
+    box-sizing: border-box;
+    background: url("@/assets/images/osPage/area_load_bg.png") no-repeat;
+    background-size: 100% 100%;
+    padding-top: 1%;
+    padding-left: changeHeight(27);
+    .tip {
+      height: 7%;
+      display: flex;
+      align-items: center;
+
+      img {
+        height: changeHeight(32.46);
+        margin-right: changeHeight(14);
+      }
+
+      /* 精品可视化素材店 */
+
+      font-weight: 600;
+      font-size: changeHeight(35);
+    }
+    .title {
+      height: changeHeight(105.88);
+      display: flex;
+      align-items: center;
+      .titlebg {
+        width: changeHeight(842.04);
+        height: changeHeight(57.23);
+        background: url("@/assets/images/osPage/run_detail_titlebg.png")
+          no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        position: relative;
+        span {
+          margin-left: changeHeight(24);
+          font-weight: 400;
+        }
+        // 下拉菜单
+        :deep(.selectbox) {
+          position: absolute;
+          .example-showcase .el-dropdown-link {
+            cursor: pointer;
+            color: red !important;
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+    .content {
+      height: 75%;
+      display: flex;
+
+      .left,
+      .right {
+        flex: 1;
+        .number {
+          height: changeHeight(50);
+          display: flex;
+          justify-content: center;
+        }
+        .rate {
+          display: flex;
+          align-items: center;
+
+          .box {
+            display: flex;
+            align-items: center;
+
+            .yuan {
+              background: #50ffff;
+              width: changeHeight(8);
+              height: changeHeight(8);
+              border-radius: changeHeight(8);
+            }
+            .key {
+              font-size: changeHeight(18);
+            }
+          }
+          .val {
+            display: flex;
+            align-items: center;
+
+            .ratekw {
+              /* 9999 */
+              font-weight: 600;
+              font-size: changeHeight(25);
+
+              // color: #12e7e3;
+            }
+            span {
+              margin-top: changeHeight(5);
+              font-size: changeHeight(18);
+              // background-color: #00f0ff;
+              margin-left: changeHeight(5);
+            }
+          }
+        }
+        .numberBefore {
+          position: relative;
+          .Btn1 {
+            position: absolute;
+            height: changeHeight(39.59);
+            line-height: changeHeight(39.59);
+
+            width: changeHeight(100.8);
+          }
+          .bg1 {
+            background: url("@/assets/images/btnType/btnblue.png") no-repeat;
+            background-size: 100% 100%;
+          }
+          .bg2 {
+            background: url("@/assets/images/btnType/btngreen.png") no-repeat;
+            background-size: 100% 100%;
+          }
+          .beforeEchart {
+            height: changeHeight(400);
+            width: changeHeight(550);
+          }
+        }
+      }
+      .right {
+      }
+    }
+  }
+}
   .black_box {
     position: absolute;
     top: -20%;