diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index a93d374..eacc9a7 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -85,16 +85,14 @@ body { padding: 0; margin: 0; .header-left { + width: 20%; height: 35px; - margin-left: 41px; margin-top: 13px; - .header-logo { - width: 290px; - height: 100%; - background: url(../img/logo.png); - background-size: 100% 100%; - background-repeat: no-repeat; - background-position: center; + line-height: 35px; + color: #fff; + letter-spacing: 2px; + span { + margin-left: 3%; } } .header-main { @@ -232,42 +230,43 @@ body { pointer-events: auto; padding: 0; margin: 0; - background: url(../img/botom-left.png); - background-size: 100% 105%; - background-repeat: no-repeat; - background-position: center; padding: 0 40px; .stats { - width: 80%; - height: 280px; + width: 100%; + height: 100px; margin-top: 15%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; - color: #fff; + color: #0144ef; font-size: 20px; font-weight: 600; .stat-item { - width: 50%; - height: 50%; + width: 45%; + height: 100%; background: url(../img/bottom-waring.png); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; // 禁止换行 white-space: nowrap; + margin-left: 2%; + margin-right: 3%; .stat-name { width: 100%; height: 50%; - line-height: 70px; + line-height: 42px; text-align: center; + span { + font-size: 3vw; + } } } } .drone-list { - width: 80%; - height: calc(100% - 280px); + width: 100%; + height: calc(100% - 200px); margin-top: 25px; .title { width: 100%; @@ -281,53 +280,216 @@ body { overflow: auto; margin-top: 10px; li { - width: 100%; - height: 83px; + width: 90%; + height: 60px; border-bottom: 1px dashed #ccc; - .top { + background: url(../img/uavBackfff.png); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; + padding: 5px; + color: #0144ef; + margin-left: 2%; + .details-one { width: 100%; - height: 30%; - display: flex; - align-items: center; - margin-top: 5px; - .left { - width: 20px; - height: 20px; - background: url(../img/index.png); - background-size: 100% 100%; - background-repeat: no-repeat; - background-position: center; - text-align: center; - line-height: 20px; - font-size: 10px; - color: #fff; - } - .text { - width: calc(100% - 20px); - height: 100%; - margin-left: 10px; - font-size: 14px; - font-weight: 400; - color: #d1f2ff; - text-align: left; - line-height: 20px; - } - } - .main { - width: calc(100% - 30px); - height: 65%; - margin-left: 30px; - .top_main { - width: 100%; + height: 100%; + .top { + width: 98%; height: 50%; display: flex; - align-items: center; - color: #fff; - font-size: 12px; - font-weight: 400; - text-align: left; + align-items: baseline; + margin-left: 5%; + position: relative; + .left { + width: 20px; + height: 20px; + background: url(../img/index.png); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; + text-align: center; + font-size: 10px; + position: absolute; + top: 60%; + transform: translateY(-50%); + line-height: 20px; + } .text { - width: 50%; + width: 68%; + height: 100%; + margin-left: 15%; + font-size: 16px; + font-weight: 400; + text-align: left; + line-height: 35px; + } + } + .main { + width: calc(100% - 30px); + height: 50%; + margin-left: 20px; + .top_main { + width: 100%; + height: 100%; + display: flex; + align-items: center; + font-weight: 400; + text-align: left; + .text { + width: 50%; + .color-ef { + color: #0144ef; + font-size: 14px; + } + .text-fff { + color: #000; + font-size: 12px; + } + } + } + } + } + .details-all { + width: 100%; + height: 100%; + .top { + width: 98%; + height: 10%; + display: flex; + align-items: baseline; + margin-left: 5%; + position: relative; + .left { + width: 20px; + height: 20px; + background: url(../img/index.png); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; + text-align: center; + font-size: 10px; + position: absolute; + top: 55%; + transform: translateY(-50%); + line-height: 20px; + } + .text { + width: 68%; + height: 100%; + margin-left: 15%; + font-size: 16px; + font-weight: 400; + text-align: left; + line-height: 35px; + } + } + .content-main { + width: calc(100% - 20px); + height: 92%; + margin-left: 20px; + .color-ef { + color: #0144ef; + font-size: 14px; + } + .text-fff { + color: #000; + font-size: 12px; + } + .content-top { + width: calc(100% - 10px); + height: 8%; + display: flex; + align-items: center; + font-weight: 400; + text-align: left; + .top-left { + width: 50%; + } + .top-right { + width: 50%; + } + } + .content-serial { + width: 100%; + height: 8%; + text-align: left; + .text-fff { + // 超出隐藏 + overflow: hidden; + text-overflow: ellipsis; + } + .color-ef-fw { + color: #0144ef; + font-size: 14px; + font-weight: 600; + } + .content-potions { + width: 100%; + height: 100%; + display: flex; + align-items: center; + flex-wrap: wrap; + p { + padding: 0; + margin: 0; + } + .content-potions-lon { + width: 100%; + display: flex; + flex-wrap: wrap; + align-items: center; + .text { + width: 100%; + font-size: 14px; + } + .characters { + width: 100%; + font-size: 14px; + color: #000; + } + } + .content-potions-bottom { + width: 100%; + display: flex; + text-align: left; + align-items: center; + .content-text { + width: 30%; + display: flex; + flex-wrap: wrap; + text-align: left; + align-items: center; + .text { + width: 100%; + font-size: 14px; + } + .characters { + width: 100%; + font-size: 14px; + color: #000; + } + } + } + .content-text1 { + width: 50%; + height: 100%; + display: flex; + flex-wrap: wrap; + text-align: left; + p { + padding: 0; + margin: 0; + } + .text { + width: 100%; + font-size: 14px; + } + .characters { + width: 100%; + font-size: 14px; + } + } + } } } } diff --git a/src/assets/img/Vector.png b/src/assets/img/Vector.png new file mode 100644 index 0000000..b525e0c Binary files /dev/null and b/src/assets/img/Vector.png differ diff --git a/src/assets/img/bottom-waring.png b/src/assets/img/bottom-waring.png index eeca7e8..93df6d7 100644 Binary files a/src/assets/img/bottom-waring.png and b/src/assets/img/bottom-waring.png differ diff --git a/src/assets/img/top.png b/src/assets/img/top.png index a38f4be..e95323b 100644 Binary files a/src/assets/img/top.png and b/src/assets/img/top.png differ diff --git a/src/assets/img/uavBackfff-big.png b/src/assets/img/uavBackfff-big.png new file mode 100644 index 0000000..e4a741a Binary files /dev/null and b/src/assets/img/uavBackfff-big.png differ diff --git a/src/assets/img/uavBackfff-big.svg b/src/assets/img/uavBackfff-big.svg new file mode 100644 index 0000000..d111122 --- /dev/null +++ b/src/assets/img/uavBackfff-big.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/uavBackfff.png b/src/assets/img/uavBackfff.png new file mode 100644 index 0000000..fb3ad09 Binary files /dev/null and b/src/assets/img/uavBackfff.png differ diff --git a/src/assets/img/uavBackred-big.png b/src/assets/img/uavBackred-big.png new file mode 100644 index 0000000..28f133a Binary files /dev/null and b/src/assets/img/uavBackred-big.png differ diff --git a/src/router/index.js b/src/router/index.js index 2a18444..b508568 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -9,23 +9,22 @@ const routes = [ name: "home", component: index, beforeEnter: (to, from, next) => { - next(); // 继续导航到/dashboard - // const expires = localStorage.getItem("expires"); - // const expiresTimestamp = new Date(expires).getTime(); - // const now = new Date().getTime(); - // if (expiresTimestamp && now > expiresTimestamp) { - // // 登录已过期，执行自动退出操作 - // localStorage.removeItem("setToken"); - // localStorage.removeItem("expires"); - // next("/login"); - // } - // const token = localStorage.getItem("setToken"); - // // 在导航到/dashboard路由之前执行的操作 - // if (!token) { - // next("/login"); // 如果非管理员用户访问/dashboard，则重定向到登录页面 - // } else { - // next(); // 继续导航到/dashboard - // } + const expires = localStorage.getItem("expires"); + const expiresTimestamp = new Date(expires).getTime(); + const now = new Date().getTime(); + if (expiresTimestamp && now > expiresTimestamp) { + // 登录已过期，执行自动退出操作 + localStorage.removeItem("setToken"); + localStorage.removeItem("expires"); + next("/login"); + } + const token = localStorage.getItem("setToken"); + // 在导航到/dashboard路由之前执行的操作 + if (!token) { + next("/login"); // 如果非管理员用户访问/dashboard，则重定向到登录页面 + } else { + next(); // 继续导航到/dashboard + } } }, { diff --git a/src/views/contentData/LeftSidebar/index.vue b/src/views/contentData/LeftSidebar/index.vue index 52e44e6..1957ef2 100644 --- a/src/views/contentData/LeftSidebar/index.vue +++ b/src/views/contentData/LeftSidebar/index.vue @@ -3,48 +3,132 @@
{{ item.name }}
-
{{ item.value }} 次
+
+ {{ item.value }} 次 +
-
- -
-
- -