1.首页可拖拽 2.没有名字去掉悬浮层 3.增加了背景

陶杰

2024-11-29 0ae255185f422781f8a5cc4c52ad56ee0d3a1e6e

 src/components/bridge.vue

@@ -72,7 +72,9 @@
        class="device-info"
        @click="show_info = false"
      >
        <div class="title">接口</div>
        <div class="info-container">
        <div class="info-block">
        <div class="title">上一次信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ current_show_info.status }}</div>
@@ -108,6 +110,47 @@
        <div class="each">
          <div class="label">操作系统:</div>
          <div class="value">{{ current_show_info.clhwOperating_System }}</div>
        </div>
        </div>
        <div class="info-block">
        <div class="title">当前信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ current_show_info.status }}</div>
        </div>
        <div class="each">
          <div class="label">IP地址:</div>
          <div class="value">{{ current_show_info.ip || "" }}</div>
        </div>
        <div class="each">
          <div class="label">Mac:</div>
          <div class="value">{{ current_show_info.mac }}</div>
        </div>
        <div class="each">
          <div class="label">桥架端口:</div>
          <div class="value">{{ current_show_info.networkPort }}</div>
        </div>
        <div class="each">
          <div class="label">交换机名字:</div>
          <div class="value">{{ current_show_info.switchName }}</div>
        </div>
        <div class="each">
          <div class="label">交换机端口:</div>
          <div class="value">{{ current_show_info.port }}</div>
        </div>
        <div class="each">
          <div class="label">名称:</div>
          <div class="value">{{ current_show_info.clhwName }}</div>
        </div>
        <div class="each">
          <div class="label">类型:</div>
          <div class="value">{{ current_show_info.clhwTier }}</div>
        </div>
        <div class="each">
          <div class="label">操作系统:</div>
          <div class="value">{{ current_show_info.clhwOperating_System }}</div>
        </div>
        </div>
        </div>
        <div class="button-to-switch" @click="toSwitchInfo(index)">交换机</div>
        <div class="button-del-port" @click="delPort(index)">删除</div>
@@ -434,11 +477,15 @@
      background-image: url("../assets/area/device-info-bg.svg");
      /* background-color: #a6c6e5; */
      background-size: 100% 100%;
      height: 24.4rem;
      width: 29rem;
      //height: 24.4rem;
      height: 39.4rem;
      //width: 29rem;
      width: 49rem;
      position: absolute;
      top: -31.5rem;
      transform: translate(-50%, 0%);
      //top: -31.5rem;
      top: -46.5rem;
      //transform: translate(-50%, 0%);
      transform: translate(-48%, 0%);
      left: 50%;
      z-index: 120;
      padding: 3.1rem;
@@ -571,4 +618,14 @@
    background-image: url("../assets/area/space-text-gray.svg") !important;
  }
}

.info-container {
  display: flex;
  justify-content: space-between;
}

.info-block {
  width: 45%; /* Adjust the width as needed */
}

</style>