lvkun996 1 rok temu
rodzic
commit
3f93df277f

+ 6 - 6
src/App.vue

@@ -5,13 +5,11 @@
         algorithm: designStore.theme,
         token: {
           colorPrimary: '#2468F2',
-          wireframe: true
+          wireframe: true,
+          fontFamily: `./fonts/SourceHanSansCN-Bold.otf`,
+          fontSize: 14,
+          borderRadius: 4
         },
-        // components: {
-        //   pagination: {
-
-        //   }
-        // }
       }"
     >
       <router-view/>
@@ -26,6 +24,8 @@ import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import { useDesignStore } from '@/store'
 import { useRouter } from 'vue-router'
+import path from 'path-browserify'
+console.log('path:', path.join('@', 'fonts/SourceHanSansCN-Bold.otf'))
 
 dayjs.locale('zh-cn')
 

+ 62 - 16
src/components/MicroComponents/styles.less

@@ -1,17 +1,29 @@
 @import url('@/styles/theme.less');
 
 .select-popup {
-  background-color: red;
-  align-items: center;
-  font-size: 30px;
-  :deep(.ant-select-selector) {
-    font-size: 30px;
-  }
+  // background-color: red;
+  // align-items: center;
+  // font-size: 30px;
+  // :deep(.ant-select-selector) {
+  //   font-size: 30px;
+  // }
 }
 
 .ant-select-selector {
-  font-size: 30px;
-  top: 0px;
+  width: 170px !important;
+  height: 43px !important;
+  // font-size: 30px;
+  // top: 0px;
+  background-color: #F3F4FB !important;
+  display: flex;
+  align-items: center;
+  .ant-select-selection-search {
+  
+    .ant-select-selection-search-input {
+      display: flex !important;
+      align-items: center !important;
+    }
+  }
 }
 
 
@@ -23,11 +35,6 @@
 
 }
 
-.ant-select-selector {
-  background-color: red !important;
-  // padding-top: 40px !important;
-}
-
 
 .ant-pagination {
   .ant-pagination-item-link {
@@ -77,6 +84,45 @@
   
 }
 
-// .ant-select-open {
-//   padding-top: 22px;
-// }
+.ant-input {
+  height: 43px;
+  border: none;
+  background-color: #F3F4FB;
+}
+
+.ant-input-affix-wrapper {
+  height: 43px;
+  border: none;
+  background-color: #F3F4FB;
+  box-sizing: border-box;
+  .ant-input {
+    height: 36px;
+    border: none;
+    background-color: #F3F4FB;
+  }
+}
+
+.ant-table {
+  .ant-table-container {
+    .ant-table-content {
+      .ant-table-thead {
+        .ant-table-cell {
+          background-color: #F3F4FB;
+          border-right: 2px solid #fff;
+          color: #666666;
+        }
+      }
+      .ant-table-cell {
+        height: 48px !important;
+      }
+    }
+  }
+}
+
+.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:first-child {
+  border-radius: 0px;
+}
+
+.ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child {
+  border-radius: 0px;
+}

+ 20 - 4
src/layout/breadcrumb.vue

@@ -1,7 +1,23 @@
 <template>
-  <a-breadcrumb style="margin: 16px 0">
-    <a-breadcrumb-item>Home</a-breadcrumb-item>
-    <a-breadcrumb-item>List</a-breadcrumb-item>
-    <a-breadcrumb-item>App</a-breadcrumb-item>
+  <a-breadcrumb  >
+    <a-breadcrumb-item v-for="item in breadcrumbs" :key="item.path" >
+      <a :href="item.path">{{item.name}}</a>
+    </a-breadcrumb-item>
   </a-breadcrumb>
 </template>
+
+<script lang="ts" setup >
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { routes } from '@/router/'
+const route = useRoute()
+console.log('route.matched:', route)
+
+const breadcrumbs = computed(() => {
+  return route.matched.map((route) => ({
+    path: route.path,
+    name: route.name
+  }))
+})
+
+</script>

+ 4 - 9
src/layout/components/Sidebar/index.vue

@@ -44,9 +44,9 @@
     collapsible
     v-model:collapsed="collapsed"
   >
-    <!-- <div class="logo" >
-      <img :src="logoPng" alt="" v-if="logoPng">
-    </div> -->
+    <div class="logo" >
+      <!-- <img :src="logoPng" alt="" v-if="logoPng"> -->
+    </div>
     <a-menu
       v-model:selectedKeys="selectedKeys"
       :openKeys="openKeys"
@@ -131,14 +131,9 @@ onMounted(() => {
 
 .logo {
   width: 100%;
-  height: 53px;
+  height: 23px;
   margin: 0px 0px;
   margin-top: 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-
 }
 
 .mobile-sider {

+ 11 - 8
src/layout/layout.vue

@@ -7,10 +7,9 @@
         <span style="width: 100%;" >
           <div class="content" id="content"  >
             <div class="router-view" >
-              <a-breadcrumb  style="margin-bottom: 21px;font-size: 16px;" >
-                <a-breadcrumb-item>系统概览</a-breadcrumb-item>
-                <a-breadcrumb-item>系统设计</a-breadcrumb-item>
-              </a-breadcrumb>
+              <div style="margin-bottom: 21px;font-size: 16px;"  >
+                <breadcrumb />
+              </div>
               <RouterView ></RouterView>
             </div>
           </div>
@@ -23,14 +22,20 @@
 import Navbar from './navbar.vue'
 import SiderBar from './components/Sidebar/index.vue'
 import { useIsMicro } from '@/hooks/effect'
+import breadcrumb from './breadcrumb'
 
 const isMicro = useIsMicro()
 
 </script>
 
 <style lang="less" scoped >
+
+@font-face {
+  font-family: 'MyCustomFont';
+  src: url('../fonts/SourceHanSansCN-Normal.otf') format('opentype');
+}
+
 .a-layout {
-  /* width: 100vw; */
   height: 100vh;
   overflow: hidden;
   .content {
@@ -47,9 +52,7 @@ const isMicro = useIsMicro()
       box-sizing: border-box;
       overflow: hidden;
       overflow-y: scroll;
-      // background: linear-gradient( 180deg, #E8FCFF 0%, #F3F6F9 39%, #F1F6FF 100%);
-      font-family: "Source Han Sans CN-Regular" !important;
-      font-weight: 400;
+      font-family: 'MyCustomFont', cursive !important;
       background: url('@/assets/bg.png') no-repeat top left;
       background-size: 100% 100%;
     }

+ 20 - 0
src/pages/Iot/dashboard/deviceAccess/index.vue

@@ -59,10 +59,30 @@
       </a-row>
       <div style="margin-top: 24px;" >
         <a-space>
+          <a-input placeholder="输入点什么" ></a-input>
+          <a-select>
+            <a-aelect-option v-for="item in [{name: 'hello', key: '1', value: 1}, {name: 'world', key: '2', value: 2}]" :key="item.key">{{item.name}}</a-aelect-option>
+          </a-select>
           <InputTsx  />
           <SelectTsx :list="[{name: 'hello', key: '1', value: 1}, {name: 'world', key: '2', value: 2}]" />
           <paginationTsx />
         </a-space>
+        <a-table
+          style="margin-top: 20px;"
+          :columns="columns"
+          :data-source="[
+            {
+              port: '测试协议',
+              address: '西点记忆'
+            },
+            {
+              port: '非测试协议',
+              address: '东点记忆'
+            },
+          ]"
+        >
+
+        </a-table>
       </div>
 
     </a-card>

+ 1 - 1
src/router/index.ts

@@ -1,7 +1,7 @@
 import { useIsMicro } from '@/hooks/effect'
 import vueRouter, { NavigationFailure, RouteRecordRaw, createRouter, createWebHistory, RouterView } from 'vue-router'
 import dashboard from '@/pages/iot/dashboard/deviceAccess/index.vue'
-
+//   component: () => import('@/layout/layout.vue'),
 const iot = {
   path: '/iot',
   name: '物联网',

+ 7 - 0
src/styles/theme.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'MyCustomFont' !important;
+  src: url('../fonts/SourceHanSansCN-Bold.otf');
+}
+body {
+  font-family: 'MyCustomFont' !important;
+}

+ 1 - 1
src/styles/theme.less

@@ -19,5 +19,5 @@
 
 
 body {
-  font-family: 'MyCustomFont', sans-serif !important;
+  font-family: 'MyCustomFont'!important;
 }