From 878ce80ef3ca88a2c108fbc713cd6ea461c44de1 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 13 十月 2021 13:51:03 +0800
Subject: [PATCH] 拓扑图
---
src/pages/settings/views/deviceInfo.vue | 293 +++-------------------------------------------------------
1 files changed, 17 insertions(+), 276 deletions(-)
diff --git a/src/pages/settings/views/deviceInfo.vue b/src/pages/settings/views/deviceInfo.vue
index 24a2499..1514332 100644
--- a/src/pages/settings/views/deviceInfo.vue
+++ b/src/pages/settings/views/deviceInfo.vue
@@ -8,43 +8,43 @@
<span class="general-info">璁惧淇℃伅</span>
</div>
<div class=" info-bar">
- <span class="name">璁惧ID</span>
+ <span class="name">璁惧ID锛�</span>
<span class="desc">{{ deviceInfo.server_id }}</span>
</div>
<div class=" info-bar">
- <span class="name">璁惧鍨嬪彿</span>
+ <span class="name">璁惧鍨嬪彿锛�</span>
<span class="desc">{{ deviceInfo.deviceModel }}</span>
</div>
- <div class=" info-bar">
- <span class="name">璁惧绫诲瀷</span>
+ <div class="info-bar">
+ <span class="name">璁惧绫诲瀷锛�</span>
<span class="desc">{{ deviceInfo.deviceDesc }}</span>
</div>
<div class=" info-bar">
- <span class="name">閫氶亾涓暟</span>
+ <span class="name">閫氶亾涓暟锛�</span>
<span class="desc">{{ deviceInfo.channelCount }}</span>
</div>
<div class=" info-bar">
- <span class="name">涓绘帶鐗堟湰</span>
+ <span class="name">涓绘帶鐗堟湰锛�</span>
<span class="desc">{{ deviceInfo.masterVersion }}</span>
</div>
<div class=" info-bar">
- <span class="name">web鐗堟湰</span>
+ <span class="name">web鐗堟湰锛�</span>
<span class="desc">{{ deviceInfo.webVersion }}</span>
</div>
<div class=" info-bar">
- <span class="name">纭洏淇℃伅</span>
+ <span class="name">纭洏淇℃伅锛�</span>
<span class="desc">{{ deviceInfo.disks }}</span>
</div>
<div class=" info-bar">
- <span class="name">CPU</span>
+ <span class="name">CPU锛�</span>
<span class="desc">{{ deviceInfo.cpu }}</span>
</div>
<div class=" info-bar">
- <span class="name">鍐呭瓨</span>
+ <span class="name">鍐呭瓨锛�</span>
<span class="desc">{{ deviceInfo.memory }}</span>
</div>
<div class=" info-bar">
- <span class="name">杩愯鏃堕棿</span>
+ <span class="name">杩愯鏃堕棿锛�</span>
<span class="desc">{{ deviceInfo.runningTime }}</span>
</div>
</div>
@@ -215,273 +215,14 @@
overflow: auto;
box-sizing: border-box;
padding: 10px 15px !important;
- /* .el-form-item.is-required:not(.is-no-asterisk)
- > .el-form-item__label:before,
- .el-form-item.is-required:not(.is-no-asterisk)
- .el-form-item__label-wrap
- > .el-form-item__label:before {
- display: none;
- }
- .el-select {
- width: 100%;
- }
- .el-form-item {
- margin-bottom: 10px;
- height: 50px;
- background: #f8f8f8;
- padding: 4px 20px;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border-radius: 10px;
- .el-form-item__label {
- text-align: left;
- line-height: 42px;
- }
- }
- .el-form-item__content {
- line-height: 40px;
- position: relative;
- font-size: 14px;
- }
- .ip-input-container {
- max-width: none !important;
- }
- .lang {
- position: relative;
- height: calc(83% - 0px);
- .title {
- height: 35px;
- line-height: 35px;
- font-size: 16px;
- text-align: left;
- margin-bottom: 5px;
- }
- .bar-group {
- overflow: auto;
- height: 100%;
- }
- .bar {
- height: 44px;
- background-color: #f8f8f8;
- border-radius: 10px;
- line-height: 44px;
- box-sizing: border-box;
- padding: 0 30px 0 20px;
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
- .left-part {
- .icon {
- color: rgba(191, 191, 191, 1);
- font-size: 16px;
- margin-right: 5px;
- }
- }
- .name {
- font-size: 15px;
- }
- .btns {
- width: 50px;
- display: flex;
- justify-content: space-between;
- color: rgba(191, 191, 191, 1);
- .el-icon-video-pause {
- cursor: pointer;
- font-size: 23px;
- vertical-align: middle;
- color: #409eff;
- }
- .el-icon-video-play {
- cursor: pointer;
- font-size: 23px;
- vertical-align: middle;
- color: #409eff;
- }
- }
- .desc {
- font-size: 14px;
- color: rgba(134, 134, 134, 1);
- }
- }
- .bar:hover {
- background-color: rgba(233, 233, 233, 1);
- }
- .add-group {
- margin: 10px auto;
- width: fit-content;
- }
- .upload-demo {
- -webkit-transition: all 0.3s;
- transition: all 0.5s;
- position: absolute;
- bottom: -40px;
+ }
- left: calc(50% - 145px);
- .el-upload-dragger {
- width: 290px;
- }
- }
- .add-btn {
- height: 40px;
- line-height: 40px;
- margin: 0 auto;
- cursor: pointer;
- width: fit-content;
- .icon {
- font-size: 32px;
- color: rgba(61, 104, 225, 1);
- }
- }
- .min-dur {
- box-sizing: border-box;
- padding: 0 20px;
- background-color: rgba(248, 248, 248, 1);
- height: 105px;
- margin-bottom: 20px;
- border-radius: 15px;
- .title {
- height: 45px;
- line-height: 45px;
+ .info-bar {
+ border-radius: 8px;
+ }
- text-align: left;
- box-sizing: border-box;
- padding: 0 6px;
- font-size: 14px;
- }
- }
-
- .min-dur:hover {
- background-color: rgba(233, 233, 233, 1);
- }
-
- .entity {
- display: flex;
- align-items: center;
- height: 30px;
-
- .sec {
- min-width: 30px;
- line-height: 80px;
- margin-right: 10px;
- color: rgba(120, 120, 120, 1);
- font-size: 14px;
- }
- .block {
- flex: 1;
- margin: 0 20px 0 6px;
- }
- .el-input-number--small {
- width: 100px;
- }
- .el-input-number.is-controls-right .el-input__inner {
- padding-left: 16px;
- }
- #cut_min_duration {
- .el-slider__bar {
- background-color: #3d68e1;
- }
- .el-slider__button-wrapper .el-tooltip {
- width: 18px;
- height: 18px;
- border: 4px solid #3d68e1;
- box-sizing: border-box;
- }
- }
-
- #cut_max_duration {
- .el-slider__bar {
- background-color: #ff9e6e;
- }
- .el-slider__button-wrapper .el-tooltip {
- width: 18px;
- height: 18px;
- border: 4px solid #ff9e6e;
- box-sizing: border-box;
- }
- }
- }
- }
- .save-btn {
- background-color: #3d68e1;
- width: 240px;
- height: 40px;
- margin: 0 auto;
- border-radius: 10px;
- color: #fff;
- line-height: 40px;
- cursor: pointer;
- font-size: 14px;
- margin-top: 20px;
- }
- .self-setting {
- .top-title {
- font-size: 16px;
- height: 30px;
- line-height: 30px;
- margin-bottom: 10px;
- }
- .icon-bar:hover {
- background-color: rgba(233, 233, 233, 1);
- }
- .icon-bar {
- cursor: pointer;
- background-color: rgba(248, 248, 248, 1);
- box-sizing: border-box;
- padding: 15px 25px;
- border-radius: 12px;
- margin-bottom: 12px;
- .bar-title {
- line-height: 20px;
- height: 20px;
- margin-bottom: 10px;
- display: flex;
- justify-content: space-between;
- .title {
- font-size: 14px;
- }
- }
- .entity {
- display: flex;
- .entity-img {
- background-color: rgba(248, 248, 248, 1);
- width: 50px;
- height: 50px;
- margin-right: 10px;
- img {
- width: 50px;
- height: 50px;
- }
- }
- }
- }
- .bg-bar {
- background-color: rgba(248, 248, 248, 1);
- box-sizing: border-box;
- padding: 15px 25px;
- border-radius: 12px;
- margin-bottom: 12px;
- .bg-list {
- display: flex;
- .bg-img {
- margin-right: 12px;
- cursor: pointer;
- // width: 120px;
- height: 80px;
- border: 2px solid transparent;
- img {
- border-radius: 5px;
- height: 100%;
- }
- }
- .bg-img:hover {
- border: 2px solid yellow;
- }
- .bg-list-active {
- border: 2px solid yellow;
- }
- }
- }
- } */
+ .info-bar .name {
+ color: #4F4F4F;
}
}
</style>
--
Gitblit v1.8.0