feat(首页): 添加项目数据总览的悬浮展示框

hejianhao

2026-01-19 f1afaf9fb1f160e2517169dcfa6af43336d3f471

feat(首页): 添加项目数据总览的悬浮展示框

在项目数据总览部分添加了悬浮展示框，当鼠标悬停在"本月检查情况"按钮上时，会显示包含详细检查数据的悬浮框。同时更新了相关样式和图片资源。

修改了BASE_URL和SCREEN_URL为新的服务器地址。

 estate-frontend-v2024/src/views/common/constants.js

@@ -3,8 +3,8 @@
// 定义全局变量

// export const BASE_URL = 'http://47.93.28.249:8181'
export const BASE_URL = 'http://192.168.110.111:8080';
export const SCREEN_URL = 'http://192.168.110.22:8087/#/';
export const BASE_URL = 'http://221.182.45.100:8080';
export const SCREEN_URL = 'http://221.182.45.100:8087/#/ ';

// export const BASE_URL = 'http://localhost:8080';


 screen/src/assets/img/home/444Group 24 Copy@2x.png

 screen/src/view/home/index.vue

@@ -158,7 +158,7 @@
        </el-select>
        <div class="btn">搜索</div>
      </div>
      <div class="mt--33">
      <div class="mt--33 relative">
        <TitleBox>
          <template #title> 项目数据总览 </template>
          <template #content>
@@ -179,7 +179,7 @@
              <div class="ml--18">
                <div
                  @click="toPorjectList"
                  class="flex a-center pl--11 pr--13 py--6 bgimg2 cursor-pointer"
                  class="flex a-center pl--11 pr--13 py--6 bgimg2 cursor-pointer thisBox relative"
                >
                  <div class="c-fff fs--14 SHSR mr--29 lh--14 shrink0">
                    本月检查情况
@@ -188,6 +188,30 @@
                    src="../../assets/img/home/Shape@2x.png"
                    class="w--14 h--14 shrink0"
                  />
                  <div
                    @click="toPorjectList"
                    class="hoverBox pt--20 px--20 pb--26"
                  >
                    <div class="c-fff SHSBold fs--15 lh--15">本月检查情况</div>
                    <div class="flex a-center j-between mt--20">
                      <div class="px--13 py--13 bsh1">
                        <div class="c-fff fs---14 lh--14 SHSH">已检查数：</div>
                        <div class="fs--45 lh--45 ff54- color8">36</div>
                        <div class="mt--20 c-fff SHSR fs--13 lh--25">
                          <div>塔式起重机：30</div>
                          <div>施工升降机：6</div>
                        </div>
                      </div>
                      <div class="px--13 py--13 bsh2">
                        <div class="c-fff fs---14 lh--14 SHSH">未1检查数：</div>
                        <div class="fs--45 lh--45 ff54- color6">36</div>
                        <div class="mt--20 c-fff SHSR fs--13 lh--25">
                          <div>塔式起重机：30</div>
                          <div>施工升降机：6</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mt--13 flex bgcolor2 pl--9 pb--5 pt--4 pr--10">
                  <div class="flex mt--7 shrink0">
@@ -805,6 +829,14 @@
</script>

<style lang="less" scoped>
.bsh1 {
  box-shadow: inset 0px 0px 22px 0px rgba(11, 220, 140, 0.35);
}

.bsh2 {
  box-shadow: inset 0px 0px 22px 0px rgba(254, 219, 101, 0.3);
}

.bgimg4 {
  background-image: url("../../assets/img/home/Group 24 Copy@2x.png");
  background-size: 100% 100%;
@@ -966,6 +998,13 @@
  .color5 {
    color: rgba(204, 224, 248, 0.7);
  }

  .hoverBox {
    background-image: url("../../assets/img/home/444Group 24 Copy@2x.png");
    background-size: 100% 100%;
    width: 358px;
  }

  .picker {
    ::v-deep .el-input__icon {
      display: none;
@@ -1118,4 +1157,27 @@
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.thisBox .hoverBox {
  position: absolute;
  left: 100%;
  margin-left: 40px;
  top: -60px;
  display: none;
  z-index: 100;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40px;
    width: 40px;
    height: 100%;
    background: transparent;
  }
}

.thisBox:hover .hoverBox {
  display: block;
}
</style>