feat: 用户端新样式开发

mock/computePower.ts

@@ -18,7 +18,7 @@ export default [
     url: "/getPowerPoolsList",
     method: "post",
     response: req => {
-      console.log(req);
+      // console.log(req);
       return fetchMockSuccessFullByOther({ data: powerPoolsListData.data });
     }
   },
@@ -26,7 +26,7 @@ export default [
     url: "/getPowerGroupList",
     method: "post",
     response: req => {
-      console.log(req);
+      // console.log(req);
       return fetchMockSuccessFullByOther({ data: powerGroupListData.data });
     }
   }

src/layout/components/navbar.vue

@@ -32,7 +32,7 @@ const {
 </script>
 
 <template>
-  <div class="navbar bg-[#fff]">
+  <div class="navbar bg-transparent">
     <!-- <topCollapse
       v-if="device === 'mobile'"
       class="hamburger-container"

src/layout/components/sidebar/logo.vue

@@ -27,7 +27,8 @@ const { title } = useNav();
         class="sidebar-logo-link"
         :to="getTopMenu()?.path ?? '/'"
       >
-        <img src="/logo.svg" alt="logo" />
+        <!-- <img src="/logo.svg" alt="logo" /> -->
+        <img src="/src/assets/svg/nav_logo.svg" alt="logo" />
       </router-link>
       <router-link
         v-else
@@ -36,7 +37,7 @@ const { title } = useNav();
         class="text-center sidebar-logo-link"
         :to="getTopMenu()?.path ?? '/'"
       >
-        <img src="/logo.svg" alt="logo" />
+        <img src="/src/assets/svg/nav_logo.svg" alt="logo" />
       </router-link>
     </transition>
   </div>
@@ -44,7 +45,7 @@ const { title } = useNav();
 
 <style lang="scss" scoped>
 .sidebar-logo-box {
-  padding: 0 0 12px;
+  // padding: 0 0 12px;
   // margin: 0 20px;
   overflow: hidden;
   // border-bottom: 1px solid #fff3;
@@ -59,7 +60,7 @@ const { title } = useNav();
 
     img {
       display: inline-block;
-      width: 96px;
+      width: 120px;
     }
   }
 }

src/layout/components/sidebar/vertical.vue

@@ -142,18 +142,22 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
-$--noneSelectedColor: rgb(255 255 255 / 80%);
+// $--noneSelectedColor: rgb(255 255 255 / 80%);
+$--noneSelectedColor: #666666;
 
 :deep(.el-loading-mask) {
   opacity: 0.45;
 }
 
 .sidebar-vertical-container {
-  width: 96px;
+  width: 120px;
 
   .menu_wrap {
-    background-color: #05102f;
+    // background-color: #05102f;
-    background-image: url("@/assets/svg/bgFooter.svg");
+    // margin: 0 auto;
+    // width: 88px;
+    background-color: transparent;
+    // background-image: url("@/assets/svg/bgFooter.svg");
     background-repeat: no-repeat;
     background-position: center bottom;
     background-size: contain;
@@ -167,11 +171,20 @@ $--noneSelectedColor: rgb(255 255 255 / 80%);
     height: calc(100vh - 92px);
 
     & > li {
-      padding-top: 16px;
+      // padding-top: 16px;
+      box-sizing: border-box;
+      margin: 16px auto 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 88px;
+      height: 76px;
       cursor: pointer;
 
       & > p {
         padding-top: 6px;
+        font-weight: bold;
       }
 
       .iconfont {
@@ -183,7 +196,7 @@ $--noneSelectedColor: rgb(255 255 255 / 80%);
       }
 
       &.active {
-        color: #fff;
+        color: #154ddd;
 
         /* inset: 0 8px;
         margin: 4px 0; */
@@ -192,9 +205,11 @@ $--noneSelectedColor: rgb(255 255 255 / 80%);
         content: "";
         background: var(--el-color-primary) !important;
         border-radius: 3px; */
-        .iconfont {
+        background: rgba(21, 77, 221, 0.1);
-          background-color: rgb(255 255 255 / 20%);
+        border-radius: 8px 8px 8px 8px;
-        }
+        // .iconfont {
+        //   background-color: rgb(255 255 255 / 20%);
+        // }
       }
     }
   }

src/layout/index.vue

@@ -189,7 +189,9 @@ const layoutHeader = defineComponent({
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 24px;
+  padding: 20px 32px;
+  background: url("@/assets/login/layout_bg.png") no-repeat 0 0;
+  background-size: cover;
 
   &::after {
     display: table;

src/style/sidebar.scss

@@ -41,7 +41,7 @@
 
   .main-container {
     // position: relative;
-    width: calc(100% - 96px - 20px);
+    width: calc(100% - 120px - 20px);
     height: 100%;
     min-height: 100%;
     padding: 0;
@@ -615,7 +615,8 @@ body[layout="vertical"] {
   /* 设置 */
   .set-icon {
     &:hover {
-      background: #f6f6f6;
+      // background: #f6f6f6;
+      background: transparent;
     }
   }
 }

src/views/login/index.vue

@@ -21,6 +21,7 @@ import "./login.scss";
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import globalization from "@/assets/svg/globalization.svg?component";
+import LoginLogo from "@/assets/login/login_logo.svg?component";
 import Lock from "@iconify-icons/ri/lock-fill";
 import Check from "@iconify-icons/ep/check";
 import User from "@iconify-icons/ri/user-3-fill";
@@ -89,7 +90,7 @@ onBeforeUnmount(() => {
   <div class="select-none login_wrap">
     <div class="flex flex-col justify-center login-container">
       <div class="login_head">
-        <svg
+        <!-- <svg
           xmlns="http://www.w3.org/2000/svg"
           width="200"
           height="70"
@@ -177,17 +178,19 @@ onBeforeUnmount(() => {
               fill="#154DDD"
             />
           </g>
-        </svg>
+        </svg> -->
       </div>
       <div class="flex items-center justify-center login_body">
-        <div class="text-center loginLeft">
+        <!-- <div class="text-center loginLeft">
           <h2>苏胜天AI配置基础平台</h2>
-          <!-- <component :is="toRaw(illustration)" /> -->
+        </div> -->
-        </div>
         <div class="login-box">
           <div class="login-form">
+            <div class="flex justify-center">
+              <component :is="toRaw(LoginLogo)" />
+            </div>
             <!-- <avatar class="avatar" /> -->
-            <h2 class="hf-1">欢迎登录</h2>
+            <h2 class="hf-1">智能制造公共服务平台</h2>
 
             <el-form
               ref="ruleFormRef"
@@ -207,6 +210,7 @@ onBeforeUnmount(() => {
                   prop="username"
                 >
                   <el-input
+                    class="h-12"
                     clearable
                     v-model="ruleForm.username"
                     :placeholder="t('login.username')"
@@ -218,6 +222,7 @@ onBeforeUnmount(() => {
               <Motion :delay="150">
                 <el-form-item prop="password">
                   <el-input
+                    class="h-12"
                     clearable
                     show-password
                     v-model="ruleForm.password"
@@ -229,8 +234,7 @@ onBeforeUnmount(() => {
 
               <Motion :delay="250">
                 <el-button
-                  class="w-full mt-4"
+                  class="w-full mt-4 h-12"
-                  size="default"
                   type="primary"
                   :loading="loading"
                   @click="onLogin(ruleFormRef)"

src/views/login/login.scss

@@ -5,7 +5,7 @@
   position: fixed;
   left: 0;
   top: 0;
-  background: url("@/assets/login/sst.png") no-repeat 0 0;
+  background: url("@/assets/login/sst.gif") no-repeat 0 0;
   background-size: cover;
 
   .login-container {
@@ -40,13 +40,16 @@
 
   .login-box {
     // width: calc(100vw - 704px - 240px);
-    width: 496px;
+    box-sizing: border-box;
-    height: 566px;
+    width: 480px;
+    height: 510px;
     display: flex;
     align-items: center;
     text-align: center;
-    background-color: white;
+    // background-color: white;
-    border-radius: 0px 16px 16px 0px;
+    border-radius: 8px;
+    border: 1px solid #ffffff;
+    background: rgba(255, 255, 255, 0.8);
   }
 
   .login-form {
@@ -61,9 +64,10 @@
 
   .login-form h2 {
     text-transform: uppercase;
-    margin: 32px 0;
+    margin: 24px 0;
-    font-size: 32px;
+    font-weight: bold;
-    font-weight: 400;
+    font-size: 36px;
+    color: #333333;
   }
 }
 

src/views/workbench/components/chart/bar.vue

@@ -23,8 +23,21 @@ const { setOptions } = useECharts(barChartRef, {
   theme
 });
 
-const name = ["1月", "2月", "3月", "4月", "5月", "6月"];
+const name = [
-const value = [100, 500, 400, 600, 700, 200];
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月"
+];
+const value = [100, 500, 400, 600, 700, 200, 100, 500, 400, 600, 700, 200];
 // const toolTims = null;
 const offsetX = 16;
 const offsetY = 8;
@@ -184,7 +197,7 @@ watch(
           type: "custom",
           renderItem: (params, api) => {
             const location = api.coord([api.value(0), api.value(1)]);
-            console.log("renderItem_api", location);
+            // console.log("renderItem_api", location);
 
             return {
               type: "group",

src/views/workbench/index.vue

@@ -3,7 +3,7 @@ import ReCol from "@/components/ReCol";
 import { barChart, pieChart, pie3DChart } from "./components/chart";
 import DeviceStatus from "./components/DeviceStatus.vue";
 import Notify from "./components/Notify.vue";
-import SwiperShow from "./components/SwiperShow.vue";
+// import SwiperShow from "./components/SwiperShow.vue";
 // import dataViewIcon1 from "@/assets/svg/icons/dataViewIcon1.svg";
 // import dataViewIcon2 from "@/assets/svg/icons/dataViewIcon1.svg";
 
@@ -12,7 +12,7 @@ defineOptions({
 });
 
 /**styles */
-const headStyles: string = "inline-block mb-3 text-base font-bold";
+const headStyles = "inline-block mb-3 text-base font-bold";
 
 /** 分析概览 */
 // const barChartData = [
@@ -42,6 +42,8 @@ const dataViewList = [
     color: "#FF861A",
     bgColor: "#FFE9D6",
     bigBgColor: "#FFFAF5",
+    bgImage: "/src/assets/home/abnormal_total.png",
+    bgIcon: "/src/assets/home/abnormal_icon.png",
     icon: "icon-yichangzongliang1"
   },
   {
@@ -50,6 +52,8 @@ const dataViewList = [
     color: "#5786FF",
     bgColor: "#D6E0FF",
     bigBgColor: "#F5F8FF",
+    bgImage: "/src/assets/home/equipment_total.png",
+    bgIcon: "/src/assets/home/equipment_icon.png",
     icon: "icon-shebeizongliang1"
   },
   {
@@ -58,6 +62,8 @@ const dataViewList = [
     color: "#5024FE",
     bgColor: "#DDD5FD",
     bigBgColor: "#F5F3FD",
+    bgImage: "/src/assets/home/coverage_workshop.png",
+    bgIcon: "/src/assets/home/coverage_icon.png",
     icon: "icon-fugaichejian"
   },
   {
@@ -65,6 +71,8 @@ const dataViewList = [
     value: "89300",
     color: "#14A1FF",
     bgColor: "#D6EFFF",
+    bgImage: "/src/assets/home/resource_utilization.png",
+    bgIcon: "/src/assets/home/resource_icon.png",
     bigBgColor: "#F5FBFF",
 
     icon: "icon-ziyuanshiyong1"
@@ -75,7 +83,7 @@ const dataViewList = [
 <template>
   <div class="main workbench_wrap">
     <el-row :gutter="24" justify="space-around">
-      <re-col
+      <!-- <re-col
         v-motion
         class="mb-[18px]"
         :value="24"
@@ -99,15 +107,15 @@ const dataViewList = [
             <SwiperShow />
           </div>
         </el-card>
-      </re-col>
+      </re-col> -->
       <!-- up -->
       <re-col
         v-motion
         class="mb-[18px]"
-        :value="8"
+        :value="24"
-        :md="8"
+        :md="24"
-        :sm="8"
+        :sm="24"
-        :xs="8"
+        :xs="24"
         :initial="{
           opacity: 0,
           y: 100
@@ -119,22 +127,29 @@ const dataViewList = [
             delay: 480
           }
         }"
+      >
+        <el-card
+          class="line-card"
+          shadow="always"
+          :body-style="{ padding: '16px 20px' }"
         >
           <span :class="headStyles">数据总览</span>
-
+          <ul class="flex justify-between flex-wrap h-[120px] dataView_box">
-        <ul class="flex justify-between flex-wrap h-[252px] dataView_box">
             <!-- <pieChart /> -->
-          <li v-for="(v, k) in dataViewList" :key="k" class="w-1/2">
+            <li v-for="(v, k) in dataViewList" :key="k" class="w-1/4">
               <el-card
                 class="line-card"
-              shadow="always"
+                shadow="never"
                 :body-style="{
-                backgroundColor: v.bigBgColor,
+                  // backgroundColor: v.bigBgColor,
-                padding: '20px 16px'
+                  backgroundImage: `url(${v.bgImage})`,
+                  backgroundSize: '100% 100%',
+                  padding: '20px 16px',
+                  position: 'relative'
                 }"
               >
-              <div class="flex items-center h-[77px]">
+                <div class="flex items-center h-[77px] relative">
-                <div
+                  <!-- <div
                     class="flex items-center justify-center"
                     style="width: 48px; height: 48px; border-radius: 50%"
                     :style="{ backgroundColor: v.bgColor }"
@@ -145,15 +160,21 @@ const dataViewList = [
                       style="font-size: 24px"
                       :style="{ color: v.color }"
                     />
-                </div>
+                  </div> -->
                   <div class="dataView_info">
                     <span>{{ v.label }}</span>
                     <p>{{ v.value }}</p>
                   </div>
                 </div>
+                <div
+                  class="w-[95px] h-[72px] absolute right-[1px] bottom-[1px]"
+                >
+                  <img :src="v.bgIcon" alt="" />
+                </div>
               </el-card>
             </li>
           </ul>
+        </el-card>
       </re-col>
       <re-col
         v-motion
@@ -180,7 +201,7 @@ const dataViewList = [
           shadow="always"
           :body-style="{ padding: '16px' }"
         >
-          <div class="flex justify-between h-[220px]"><DeviceStatus /></div>
+          <div class="flex justify-between h-[250px]"><DeviceStatus /></div>
         </el-card>
       </re-col>
       <re-col
@@ -208,12 +229,11 @@ const dataViewList = [
           shadow="always"
           :body-style="{ padding: '16px' }"
         >
-          <div class="flex justify-between h-[220px]">
+          <div class="flex justify-between h-[250px]">
             <pie3DChart :data="pie3Ddata.data" />
           </div>
         </el-card>
       </re-col>
-      <!-- down -->
       <re-col
         v-motion
         class="mb-[18px]"
@@ -233,24 +253,25 @@ const dataViewList = [
           }
         }"
       >
-        <span :class="headStyles">违规总量</span>
+        <span :class="headStyles">算力占用</span>
         <el-card
           class="line-card"
           shadow="always"
           :body-style="{ padding: '16px' }"
         >
-          <div class="flex justify-between h-[265px]">
+          <div class="flex justify-between h-[250px]">
-            <barChart />
+            <pieChart />
           </div>
         </el-card>
       </re-col>
+      <!-- down -->
       <re-col
         v-motion
         class="mb-[18px]"
-        :value="8"
+        :value="14"
-        :md="8"
+        :md="14"
-        :sm="8"
+        :sm="14"
-        :xs="8"
+        :xs="14"
         :initial="{
           opacity: 0,
           y: 100
@@ -263,24 +284,24 @@ const dataViewList = [
           }
         }"
       >
-        <span :class="headStyles">算力占用</span>
+        <span :class="headStyles">违规总量</span>
         <el-card
           class="line-card"
           shadow="always"
           :body-style="{ padding: '16px' }"
         >
           <div class="flex justify-between h-[265px]">
-            <pieChart />
+            <barChart />
           </div>
         </el-card>
       </re-col>
       <re-col
         v-motion
         class="mb-[18px]"
-        :value="8"
+        :value="10"
-        :md="8"
+        :md="10"
-        :sm="8"
+        :sm="10"
-        :xs="8"
+        :xs="10"
         :initial="{
           opacity: 0,
           y: 100
@@ -315,10 +336,13 @@ const dataViewList = [
   & > li {
     padding-right: 16px;
     margin-bottom: 16px;
-    &:nth-child(2n) {
+    &:nth-child(4n) {
       padding-right: 0;
     }
   }
+  .line-card {
+    border: none;
+  }
   .dataView_info {
     padding-left: 16px;
     & > span {