feat: 模型列表新样式开发

src/views/modelList/components/ModelCard.vue

@@ -12,8 +12,8 @@ interface CardProductType {
   description: string;
   deviceSort: string;
   updateTime: string;
-  type: number;
-  industry: number;
+  type: string;
+  industry: string;
 }
 
 const props = defineProps({
@@ -68,6 +68,11 @@ const cardClass = computed(() => [
   { "model-card_offline": props.device?.state === "离线" }
 ]);
 
+const deepAlgorithm = computed(() => [
+  "model-type",
+  { "model-type_deep": props.device?.type === "深度学习" }
+]);
+
 // const stateClass = computed(() => [
 //   "model-state",
 //   { "model-state_offline": props.device?.state === "离线" }
@@ -78,6 +83,7 @@ const cardClass = computed(() => [
   <div :class="cardClass" class="model_card_box">
     <div class="model-header">
       <div class="model-name">{{ device?.deviceSort }}</div>
+      <div class="model-type" :class="deepAlgorithm">{{ device?.type }}</div>
       <div class="model-icon">
         <img :src="getModelIcon(device?.industry)" />
       </div>
@@ -143,7 +149,28 @@ const cardClass = computed(() => [
     background-position: 100% 100%;
     background-size: cover;
     border-radius: 8px 8px 0 0;
-
+    .model-name {
+      margin-right: 8px;
+      max-width: 50%;
+      white-space: nowrap; /* 文本不换行 */
+      overflow: hidden; /* 超出部分隐藏 */
+      text-overflow: ellipsis; /* 超出部分显示为省略号 */
+    }
+    .model-type,
+    .model-type_deep {
+      width: 56px;
+      height: 20px;
+      font-size: 12px;
+      text-align: center;
+      font-weight: 500;
+      line-height: 20px;
+      color: #fff;
+      background: linear-gradient(180deg, #21c7ff 0%, #428cff 100%);
+      border-radius: 2px 2px 2px 2px;
+    }
+    .model-type_deep {
+      background: linear-gradient(180deg, #ffb21a 0%, #ff9b3e 100%);
+    }
     .model-icon {
       position: absolute;
       top: 8px;
@@ -156,6 +183,7 @@ const cardClass = computed(() => [
     width: 100%;
     height: 190px;
     padding: 16px;
+    background: #fafcff;
 
     .model-version,
     .model-provider,

src/views/modelList/index.vue

@@ -57,6 +57,9 @@ onMounted(() => {
 
 <template>
   <div class="main modelList_wrap">
+    <div class="modelList_header">
+      苏胜天大模型衍生模型库 <span class="text-[24px] text-[#154DDD]">256</span>
+    </div>
     <div
       class="modelList_body"
       v-loading="dataLoading"
@@ -116,9 +119,22 @@ onMounted(() => {
 </template>
 <style lang="scss">
 .modelList_wrap {
+  background-color: #ffffff;
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid rgba(21, 77, 221, 0.2);
+  .modelList_header {
+    box-sizing: border-box;
+    padding: 16px;
+    height: 62px;
+    font-family: Douyin Sans, Douyin Sans;
+    font-weight: bold;
+    font-size: 20px;
+    color: #333333;
+    border-bottom: 1px solid rgba(21, 77, 221, 0.2);
+  }
   .modelList_body {
     height: calc(100vh - 180px);
-    // /* background-color: orange; */
+    padding: 16px;
     overflow-x: hidden;
     overflow-y: scroll;
   }