优化部分样式

zhangzengfei

2022-08-04 2e4133d2bbb0f4626cf336f3e456783b9fb7867e

 src/views/personalCenter/components/AddBox.vue

@@ -5,10 +5,7 @@
    <div class="close iconfont" @click="close()">&#xe60f;</div>

    <div class="search">
      <el-input
        v-model="searchContent"
        placeholder="请输入集群IP/集群名称/设备IP/设备名称"
      ></el-input>
      <el-input v-model="searchContent" placeholder="请输入集群IP/集群名称/设备IP/设备名称"></el-input>
      <div class="button" @click="listType = 'cluster'">搜索集群</div>
      <div class="button" @click="listType = 'equipment'">搜索设备</div>
    </div>
@@ -16,11 +13,7 @@
    <div class="clusterList">
      <div class="tableList" v-if="listType == 'cluster'">
        <div class="header">
          <div
            class="label"
            v-for="(item, index) in clusterHeader"
            :key="index"
          >
          <div class="label" v-for="(item, index) in clusterHeader" :key="index">
            {{ item }}
          </div>
        </div>
@@ -36,49 +29,20 @@
              </div>
              <div class="rowItem options">
                <!-- 添加 -->
                <span class="iconfont option" @click="showPasswordBox = true"
                  >&#xe63f;</span
                >
                <span class="iconfont option" @click="showPasswordBox = true">&#xe63f;</span>
                <!-- 集群详情  -->
                <span class="iconfont option" @click="showChildrenLIst(index)"
                  >&#xe63e;</span
                >
                <span class="iconfont option" @click="showChildrenLIst(index)">&#xe63e;</span>
              </div>
            </div>

            <div
              class="overList"
              :class="{ isShow: showClusterChild == index }"
            >
              <el-table
                :data="overList"
                :fit="true"
                header-row-class-name="overList-head"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="146"
                  class-name="index "
                >
                </el-table-column>
                <el-table-column
                  prop="id"
                  label="设备ID"
                  width="146"
                ></el-table-column>
            <div class="overList" :class="{ isShow: showClusterChild == index }">
              <el-table :data="overList" :fit="true" header-row-class-name="overList-head">
                <el-table-column label="序号" type="index" width="146" class-name="index "> </el-table-column>
                <el-table-column prop="id" label="设备ID"></el-table-column>

                <el-table-column
                  prop="ip"
                  label="设备IP"
                  width="146"
                ></el-table-column>
                <el-table-column prop="ip" label="设备IP" width="146"></el-table-column>

                <el-table-column
                  prop="name"
                  label="设备名称"
                  width="240"
                ></el-table-column>
                <el-table-column prop="name" label="设备名称" width="240"></el-table-column>
              </el-table>

              <div class="iconfont" @click="showClusterChild = null">
@@ -89,30 +53,12 @@
        </div>
      </div>

      <el-table
        :data="equipmentList"
        :fit="true"
        v-if="listType == 'equipment'"
      >
        <el-table-column
          label="序号"
          type="index"
          width="72"
          class-name="index"
        >
        </el-table-column>
      <el-table :data="equipmentList" :fit="true" v-if="listType == 'equipment'">
        <el-table-column label="序号" type="index" width="72" class-name="index"> </el-table-column>
        <el-table-column prop="id" label="设备ID" width="107"></el-table-column>
        <el-table-column
          prop="name"
          label="设备名称"
          width="107"
        ></el-table-column>
        <el-table-column prop="name" label="设备名称" width="107"></el-table-column>
        <el-table-column prop="ip" label="设备IP" width="107"></el-table-column>
        <el-table-column
          prop="cluster"
          label="所属集群"
          width="107"
        ></el-table-column>
        <el-table-column prop="cluster" label="所属集群" width="107"></el-table-column>
        <el-table-column label="状态" width="107">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1" class="status green">已添加</div>
@@ -124,9 +70,7 @@
          <template slot-scope="scope">
            <div class="options" v-if="scope">
              <!-- 添加 -->
              <span class="iconfont option" @click="showPasswordBox = true"
                >&#xe63f;</span
              >
              <span class="iconfont option" @click="showPasswordBox = true">&#xe63f;</span>
            </div>
          </template>
        </el-table-column>
@@ -137,8 +81,7 @@
      <div class="title">申请添加设备</div>
      <div class="des">
        <span class="iconfont">&#xe601;</span>
        如设备已加入集群，添加管理后集群下所有设备将在设备管理
        页面显示，并支持信息查看及管理。
        如设备已加入集群，添加管理后集群下所有设备将在设备管理 页面显示，并支持信息查看及管理。
      </div>
      <div class="ask">密钥信息请询问设备管理人员</div>
      <el-input v-model="auth_password"></el-input>
@@ -163,23 +106,23 @@
        {
          name: "集群1",
          ip: "192.168.7.45",
          status: "1",
          status: "1"
        },
        {
          name: "集群1",
          ip: "192.168.7.45",
          status: "1",
          status: "1"
        },
        {
          name: "集群1",
          ip: "192.168.7.45",
          status: "0",
          status: "0"
        },
        {
          name: "集群1",
          ip: "192.168.7.45",
          status: "0",
        },
          status: "0"
        }
      ],
      equipmentList: [
        {
@@ -187,64 +130,64 @@
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
          status: "1"
        }
      ],
      overList: [
        {
@@ -252,51 +195,51 @@
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
          status: "1"
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
          status: "1"
        }
      ],
      auth_password: "", //授权秘钥
    };
      auth_password: "" //授权秘钥
    }
  },
  methods: {
    close() {
      this.$emit("close");
      this.$emit("close")
    },
    showChildrenLIst(index) {
      if (this.showClusterChild === index) {
        this.showClusterChild = null;
        return;
        this.showClusterChild = null
        return
      } else if (!index) {
        this.showClusterChild = index;
        this.showClusterChild = index
      }
      this.showClusterChild = null;
      this.showClusterChild = null
      setTimeout(() => {
        this.showClusterChild = index;
      }, 400);
    },
  },
};
        this.showClusterChild = index
      }, 400)
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -595,4 +538,4 @@
    }
  }
}
</style>
</style>