update: 许可证信息页面更新

src/components/LicenseInfo/SidePanel.vue

@@ -13,12 +13,19 @@
       </div>
     </d-header>
     <d-content class="dcontent">
-      <div class="content-title"></div>
-      <div class="content-body">
-        <d-row>
+      <div class="dcontent-title">
+        <h1>许可证属性</h1>
+      </div>
+      <div class="dcontent-body">
+        <d-row :gutter="10">
           <d-col :span="8">
             <div class="content-body-col">
-              <span class="color-allow">允许的</span>
+              <div class="dcontent-body-col-title dcontent-body-col-title-1">
+                <div class="dcontent-body-col-title-icon">
+                  <img src="@/assets/imgs/jyh/license/allow.webp">
+                </div>
+                <span>允许的</span>
+              </div>
               <span>Commercial Use</span>
               <span>Modify</span>
               <span>Distribute</span>
@@ -28,7 +35,12 @@
           </d-col>
           <d-col :span="8">
             <div class="content-body-col">
-              <span class="color-info">必要的</span>
+              <div class="dcontent-body-col-title dcontent-body-col-title-2">
+                <div class="dcontent-body-col-title-icon">
+                  <img src="@/assets/imgs/jyh/license/warning.webp">
+                </div>
+                <span>必要的</span>
+              </div>
               <span>Include Copyright</span>
               <span>Include License</span>
               <span>State changes</span>
@@ -37,7 +49,12 @@
           </d-col>
           <d-col :span="8">
             <div class="content-body-col">
-              <span class="color-danger">受限的</span>
+              <div class="dcontent-body-col-title dcontent-body-col-title-3">
+                <div class="dcontent-body-col-title-icon">
+                  <img src="@/assets/imgs/jyh/license/notAllow.webp">
+                </div>
+                <span>受限的</span>
+              </div>
               <span>Place Warranty</span>
               <span>Hold Liable</span>
               <span>Use Trademark</span>
@@ -73,25 +90,84 @@ const emit = defineEmits(['close']);
   display: flex;
   flex-direction: column;
   align-items: start;
-  gap: 8px;
-  padding: 12px;
-
-  .dheader, .dcontent{
+  .dheader {
     width: 100%;
-    border-bottom: 1px solid gray;
-    padding: 12px;
   }
 
-  .dfooter {
+  .dcontent {
+    border-radius: 8px;
+    border: 1px solid #EEF0F5;
+    margin: 20px 0;
     width: 100%;
-    padding: 12px;
+    &-title {
+      height: 40px;
+      background-color: $devui-area;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+      h1 {
+        padding-left: 20px;
+        color: #252B3A;
+        font-weight: 800;
+        font-size: 14px;
+        line-height: 22px;
+        letter-spacing: 0px;
+      }
+    }
+
+    &-body {
+      padding: 20px;
+
+      &-col-title {
+        width: 100%;
+        height: 23px;
+        border-radius: 14px;
+        border: 1px solid;
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+        }
+        &-icon {
+          height: 100%;
+          width: 32px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 14px 0 0 14px;
+          margin-right: 8px;
+        }
+
+        &-1 {
+          border-color: #24B286;
+          .dcontent-body-col-title-icon {
+            background-color: #24B286;
+          }
+        }
+        &-2 {
+          border-color: #FAC20A;
+          .dcontent-body-col-title-icon {
+            background-color: #FAC20A;
+          }
+        }
+        &-3 {
+          border-color: $devui-danger;
+          .dcontent-body-col-title-icon {
+            background-color: $devui-danger;
+          }
+        }
+      }
+    }
   }
 
   .title {
     font-size: 20px;
     font-weight: bold;
     display: flex;
+    width: 100%;
     justify-content: space-between;
+    align-items: center;
     d-icon {
       cursor: pointer;
     }
@@ -111,6 +187,10 @@ const emit = defineEmits(['close']);
 }
 
 .dfooter {
+  border-radius: 8px;
+  border: 1px solid #EEF0F5;
+  padding: 20px;
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: start;
@@ -118,20 +198,7 @@ const emit = defineEmits(['close']);
 }
 
 .side-panel {
-  padding: 20px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
-
-.color-danger {
-  color: $devui-danger;
-}
-
-.color-info {
-  color: $devui-warning;
-}
-
-.color-allow {
-  color: $devui-success;
-}
 </style>

src/views/Jyh/LicenseInfo/index.vue

@@ -1,42 +1,60 @@
 <template>
   <div class="license-info-container">
-    <div class="license-info-content" :class="{ 'license-info-content-full': !showDetail, 'license-info-half': showDetail }">
+    <div class="license-info-content">
       <d-layout>
-        <d-header class="dheader">
-          <d-search icon-position="left" style="width: 200px" placeholder="搜索许可证名称"></d-search>
-          <d-search icon-position="left" style="width: 200px" placeholder="搜索组件名称"></d-search>
-          <d-select style="width: 200px" placeholder="许可证种类"></d-select>
-        </d-header>
         <d-content class="dcontent">
-          <d-table :data="list" :header-bg="true">
+          <d-table :data="list" style="width: 100%;">
+            <d-column type="index" width="40"></d-column>
             <d-column v-for="(column, index) in tableConfig" :field="column.field"
             :header="column.header" :sortable="column.sortable" :sort-method="column.sortMethod"></d-column>
             <d-column header="详情" width="100px">
               <template #default="scope">
-                <img src="@/assets/imgs/jyh/ic_digital_power_next_step_@2x.png" class="operation" @click="showDetail = !showDetail">
+                <a class="devui-link" @click="openPanel">查看</a>
               </template>
             </d-column>
           </d-table>
         </d-content>
-        <d-footer class="dfooter">Footer</d-footer>
       </d-layout>
     </div>
-    <div class="license-info-side" v-if="showDetail">
+    <div class="license-info-container-page">
+      <d-pagination
+        size="sm"
+        :total="pager.total"
+        v-model:pageSize="pager.pageSize"
+        v-model:pageIndex="pager.pageIndex"
+        :can-view-total="true"
+        :can-change-page-size="true"
+        :can-jump-page="true"
+        :max-items="5"
+      />
+    </div>
+  </div>
+  <d-drawer v-model="showDetail" style="width: 800px; padding: 20px" >
     <SidePanel @close="close"/>
-    </div>
-  </div>
+  </d-drawer>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import Table from '@/components/AIRepair/Table.vue';
 import SidePanel from '@/components/LicenseInfo/SidePanel.vue';
+const pager = ref({
+  pageIndex: 1,
+  pageSize: 30,
+  total: 10
+})
+const pageOptions = ref({
+
+})
 const showDetail = ref(false);
 
 const close = () => {
   showDetail.value = false;
 }
 
+const openPanel = () => {
+  showDetail.value = true;
+}
+
 const tableConfig = ref([
   {
     field: 'licenseName',
@@ -95,21 +113,18 @@ const list = ref([
 <style scoped lang="scss">
 
 .license-info-container {
-  height: calc(100vh - 250px);
   display: flex;
-  gap: 8px;
+  gap: 12px;
+  flex-direction: column;
   width: 100%;
-  background-color: $devui-global-bg-normal;
   .license-info-content {
-    flex-grow: 1;
-    height: 100%;
-    transition: width 0.3s;
-    &.license-info-content-full {
+    background-color: $devui-global-bg-normal;
+    border-radius: 10px;
+  }
+  &-page {
     width: 100%;
-    }
-    &.license-info-half {
-      width: 60%;
-    }
+    display: flex;
+    justify-content: end;
   }
 }
 
@@ -121,10 +136,10 @@ const list = ref([
   padding: 12px;
 }
 
-.license-info-side {
-  height: 100%;
-  width: 40%;
-  border-left: 1px solid #e8e8e8;
+.dfooter {
+  display: flex;
+  justify-content: end;
+  margin-top: 20px
 }
 
 .operation {