feat: 模型列表数据大屏

1 year ago · e37535cbbe
parent a03af74bc2
commit e37535cbbe
17 changed files with 877 additions and 3 deletions
--- a/build/optimize.ts
+++ b/build/optimize.ts
@ -16,7 +16,8 @@ const include = [
  "pinyin-pro",
  "@vueuse/core",
  "@pureadmin/utils",
-  "responsive-storage"
+  "responsive-storage",
+  "vue-waterfall-plugin-next"
 ];

 /**
--- a/mock/list.ts
+++ b/mock/list.ts
--- a/package.json
+++ b/package.json
@ -56,7 +56,9 @@
    "vue": "^3.3.4",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.2.2",
-    "vue-types": "^5.1.0"
+    "vue-types": "^5.1.0",
+    "v3-infinite-loading": "^1.2.2",
+    "vue-waterfall-plugin-next": "^2.2.1"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.6.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -80,6 +80,9 @@ dependencies:
  swiper:
    specifier: ^11.0.5
    version: 11.0.5
+  v3-infinite-loading:
+    specifier: ^1.2.2
+    version: 1.2.2
  vue:
    specifier: ^3.3.4
    version: 3.3.4
@ -92,6 +95,9 @@ dependencies:
  vue-types:
    specifier: ^5.1.0
    version: 5.1.0(vue@3.3.4)
+  vue-waterfall-plugin-next:
+    specifier: ^2.2.1
+    version: 2.2.1(vue@3.3.4)

 devDependencies:
  "@commitlint/cli":
@ -9474,6 +9480,13 @@ packages:
    hasBin: true
    dev: true

+  /v3-infinite-loading@1.2.2:
+    resolution:
+      {
+        integrity: sha512-MWJc6yChnqeUasBFJ3Enu8IGPcQgRMSTrAEtT1MsHBEx+QjwvNTaY8o+8V9DgVt1MVhQSl3MC55hsaWLJmpRMw==
+      }
+    dev: false
+
  /v8-compile-cache-lib@3.0.1:
    resolution:
      {
@ -9724,6 +9737,33 @@ packages:
      vue: 3.3.4
    dev: false

+  /vue-waterfall-plugin-next@2.2.0(vue@3.3.4):
+    resolution:
+      {
+        integrity: sha512-rhrTdAlBnMWWt6737L+E08A7itgK3wHTy1NsSDgR9EPiBPuHYlth8jL2/hp2gIMAS4XUxJBtitfNUyK5qynkEA==
+      }
+    dependencies:
+      animate.css: 4.1.1
+      element-plus: 2.3.6(vue@3.3.4)
+    transitivePeerDependencies:
+      - "@vue/composition-api"
+      - vue
+    dev: false
+
+  /vue-waterfall-plugin-next@2.2.1(vue@3.3.4):
+    resolution:
+      {
+        integrity: sha512-wEPT9D9VLTPWxGKrIusBxj9JVyXyXU6RLEqKIm3mJt/DeaTUvKu0sZjLOKK9UztkcJV2LaRALwRoCDOOKbLsiw==
+      }
+    dependencies:
+      animate.css: 4.1.1
+      element-plus: 2.3.6(vue@3.3.4)
+      vue-waterfall-plugin-next: 2.2.0(vue@3.3.4)
+    transitivePeerDependencies:
+      - "@vue/composition-api"
+      - vue
+    dev: false
+
  /vue@3.3.4:
    resolution:
      {
--- a/src/assets/dataScreen/modelList/error.png
+++ b/src/assets/dataScreen/modelList/error.png
--- a/src/assets/dataScreen/modelList/generalIndustry.svg
+++ b/src/assets/dataScreen/modelList/generalIndustry.svg
--- a/src/assets/dataScreen/modelList/inUsed.svg
+++ b/src/assets/dataScreen/modelList/inUsed.svg
@ -0,0 +1,26 @@
+<svg width="265" height="172" viewBox="0 0 265 172" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="1" width="265" height="171" fill="url(#paint0_linear_9937_75626)"/>
+<path d="M248 170.228H264V156.052" stroke="#FFCF5F" stroke-width="2"/>
+<path d="M17 170.228H1V156.052" stroke="#FFCF5F" stroke-width="2"/>
+<path d="M248 1H264V15.1762" stroke="#20A0FD" stroke-width="2"/>
+<path d="M17 1H1V15.1762" stroke="#FFCF5F" stroke-width="2"/>
+<path opacity="0.3" d="M180 15.1763H210.443L233.103 24.0364H249" stroke="url(#paint1_linear_9937_75626)" stroke-width="1.5"/>
+<path opacity="0.3" d="M7 24.9224H37.4428L60.1027 33.7825H76" stroke="url(#paint2_linear_9937_75626)" stroke-width="1.5"/>
+<defs>
+<linearGradient id="paint0_linear_9937_75626" x1="132.5" y1="20.284" x2="132.5" y2="172" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCF5F" stop-opacity="0.4"/>
+<stop offset="0.0001" stop-color="#FFCF5F" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#FFCF5F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_9937_75626" x1="180" y1="15.1763" x2="247" y2="15.1763" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBE18" stop-opacity="0"/>
+<stop offset="0.48" stop-color="#FFBE18"/>
+<stop offset="1" stop-color="#FFBE18" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_9937_75626" x1="7" y1="24.9224" x2="74" y2="24.9224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFBE18" stop-opacity="0"/>
+<stop offset="0.48" stop-color="#FFBE18"/>
+<stop offset="1" stop-color="#FFBE18" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/dataScreen/modelList/loading.png
+++ b/src/assets/dataScreen/modelList/loading.png
--- a/src/assets/dataScreen/modelList/mechanicalIndustry.svg
+++ b/src/assets/dataScreen/modelList/mechanicalIndustry.svg
--- a/src/assets/dataScreen/modelList/modelIndustry.svg
+++ b/src/assets/dataScreen/modelList/modelIndustry.svg
@ -0,0 +1,19 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.40039 5.50039C4.40039 5.16902 4.66902 4.90039 5.00039 4.90039H8.00039C8.33176 4.90039 8.60039 5.16902 8.60039 5.50039C8.60039 5.83176 8.33176 6.10039 8.00039 6.10039H5.00039C4.66902 6.10039 4.40039 5.83176 4.40039 5.50039Z" fill="url(#paint0_linear_8867_89141)"/>
+<path d="M5.00039 8.90039C4.66902 8.90039 4.40039 9.16902 4.40039 9.50039C4.40039 9.83176 4.66902 10.1004 5.00039 10.1004H8.00039C8.33176 10.1004 8.60039 9.83176 8.60039 9.50039C8.60039 9.16902 8.33176 8.90039 8.00039 8.90039H5.00039Z" fill="url(#paint1_linear_8867_89141)"/>
+<path d="M2.66641 15.2664L1.3334 15.2664C1.00203 15.2664 0.733398 14.9978 0.733398 14.6664C0.733398 14.335 1.00203 14.0664 1.3334 14.0664H2.06641V1.99974C2.06641 1.48428 2.48428 1.06641 2.99974 1.06641H9.66641C10.1819 1.06641 10.5997 1.48428 10.5997 1.99974V4.6603L13.6425 6.48574C13.8232 6.59417 13.9338 6.78948 13.9338 7.00025V14.0664H14.6667C14.9981 14.0664 15.2667 14.335 15.2667 14.6664C15.2667 14.9978 14.9981 15.2664 14.6667 15.2664H13.3639C13.354 15.2669 13.3439 15.2671 13.3338 15.2671C13.3294 15.2671 13.325 15.2671 13.3205 15.267C13.3149 15.2669 13.3093 15.2667 13.3037 15.2664L9.99974 15.2664H2.66641ZM10.5997 14.0664H12.7338V7.33998L10.5997 6.05969V14.0664ZM9.39974 14.0664V2.26641H3.26641V14.0664H9.39974Z" fill="url(#paint2_linear_8867_89141)"/>
+<defs>
+<linearGradient id="paint0_linear_8867_89141" x1="7.99544" y1="0.990589" x2="3.14616" y2="15.7919" gradientUnits="userSpaceOnUse">
+<stop stop-color="#72BCFF"/>
+<stop offset="1" stop-color="#00F4FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8867_89141" x1="7.99544" y1="0.990589" x2="3.14616" y2="15.7919" gradientUnits="userSpaceOnUse">
+<stop stop-color="#72BCFF"/>
+<stop offset="1" stop-color="#00F4FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8867_89141" x1="7.99544" y1="0.990589" x2="3.14616" y2="15.7919" gradientUnits="userSpaceOnUse">
+<stop stop-color="#72BCFF"/>
+<stop offset="1" stop-color="#00F4FF"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/dataScreen/modelList/modelListTitle.svg
+++ b/src/assets/dataScreen/modelList/modelListTitle.svg
@ -0,0 +1,58 @@
+<svg width="544" height="46" viewBox="0 0 544 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42 39L64.3646 11H485.735L502 39H42Z" fill="url(#paint0_linear_8858_84286)"/>
+<path d="M42 33L64.3646 5H485.735L502 33H42Z" fill="url(#paint1_linear_8858_84286)" stroke="url(#paint2_linear_8858_84286)"/>
+<path d="M39.9998 31.8247L63.2352 2.09057" stroke="url(#paint3_linear_8858_84286)"/>
+<path d="M505 33L485 1" stroke="url(#paint4_linear_8858_84286)" stroke-width="1.5"/>
+<g style="mix-blend-mode:overlay" filter="url(#filter0_f_8858_84286)">
+<ellipse cx="268.5" cy="33.5" rx="41.5" ry="2.5" fill="white"/>
+</g>
+<path d="M30 14L20.1724 30L0 18.3636L30 14Z" fill="url(#paint5_linear_8858_84286)" fill-opacity="0.6"/>
+<path d="M30 11L20.1724 27L0 15.3636L30 11Z" fill="url(#paint6_linear_8858_84286)"/>
+<path d="M514 14L523.828 30L544 18.3636L514 14Z" fill="url(#paint7_linear_8858_84286)" fill-opacity="0.6"/>
+<path d="M514 11L523.828 27L544 15.3636L514 11Z" fill="url(#paint8_linear_8858_84286)"/>
+<defs>
+<filter id="filter0_f_8858_84286" x="217" y="21" width="103" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_8858_84286"/>
+</filter>
+<linearGradient id="paint0_linear_8858_84286" x1="272" y1="11" x2="272" y2="39" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1095F0" stop-opacity="0"/>
+<stop offset="1" stop-color="#1095F0" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8858_84286" x1="272" y1="7.5" x2="272" y2="33" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1095F0" stop-opacity="0"/>
+<stop offset="1" stop-color="#1095F0" stop-opacity="0.6"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8858_84286" x1="272" y1="23.5" x2="272" y2="33" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41E8FF" stop-opacity="0"/>
+<stop offset="0.0001" stop-color="#41D1FF" stop-opacity="0.011993"/>
+<stop offset="0.590607" stop-color="#41D1FF" stop-opacity="0.425"/>
+<stop offset="1" stop-color="#41D1FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_8858_84286" x1="40.6717" y1="30.3384" x2="62.7208" y2="3.7073" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#41D1FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_8858_84286" x1="504.487" y1="31.4516" x2="485.343" y2="2.66164" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#41D1FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_8858_84286" x1="-1.11207e-08" y1="19.8182" x2="25.3217" y2="22.0234" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#41D1FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_8858_84286" x1="-1.11207e-08" y1="16.8182" x2="25.3217" y2="19.0234" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#41D1FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_8858_84286" x1="544" y1="19.8182" x2="518.678" y2="22.0234" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#41D1FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_8858_84286" x1="544" y1="16.8182" x2="518.678" y2="19.0234" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#41D1FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/dataScreen/modelList/modelVersion.svg
+++ b/src/assets/dataScreen/modelList/modelVersion.svg
@ -0,0 +1,19 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.83775 4.4497C9.87625 4.32012 9.95569 4.20651 10.0642 4.12586C10.1726 4.04521 10.3043 4.00187 10.4395 4.00234H10.4633C10.5429 3.99463 10.6233 4.00606 10.6977 4.03567C10.772 4.06528 10.8383 4.11221 10.8908 4.17257C10.9342 4.23678 10.9594 4.3116 10.9636 4.389C10.9678 4.46641 10.9509 4.5435 10.9146 4.61202L9.04596 9.244C8.99643 9.38487 8.90246 9.50582 8.77822 9.58865C8.65398 9.67147 8.50619 9.71168 8.35711 9.70323C8.20803 9.71168 8.06023 9.67147 7.93599 9.58865C7.81174 9.50582 7.71778 9.38487 7.66824 9.244L5.79962 4.61202C5.76337 4.5435 5.74644 4.46641 5.75062 4.389C5.75481 4.3116 5.77996 4.23678 5.82338 4.17257C5.87595 4.11221 5.94218 4.06528 6.01654 4.03567C6.09091 4.00606 6.17127 3.99463 6.25094 4.00234H6.27469C6.40971 4.00251 6.5411 4.04609 6.64946 4.12665C6.75782 4.2072 6.83739 4.32046 6.87645 4.4497L8.36502 8.24237L9.83775 4.4497Z" fill="url(#paint0_linear_8867_89134)"/>
+<path d="M5.75 11C5.47386 11 5.25 11.2239 5.25 11.5C5.25 11.7761 5.47386 12 5.75 12H11C11.2761 12 11.5 11.7761 11.5 11.5C11.5 11.2239 11.2761 11 11 11H5.75Z" fill="url(#paint1_linear_8867_89134)"/>
+<path d="M4 1C2.89543 1 2 1.89543 2 3V12.5C2 13.6046 2.89543 14.5 4 14.5H12C13.1046 14.5 14 13.6046 14 12.5V3C14 1.89543 13.1046 1 12 1H4ZM12 2C12.5523 2 13 2.44772 13 3V12.5C13 13.0523 12.5523 13.5 12 13.5H4C3.44772 13.5 3 13.0523 3 12.5V3C3 2.44772 3.44772 2 4 2H12Z" fill="url(#paint2_linear_8867_89134)"/>
+<defs>
+<linearGradient id="paint0_linear_8867_89134" x1="7.99618" y1="0.927924" x2="2.85088" y2="14.5683" gradientUnits="userSpaceOnUse">
+<stop stop-color="#72BCFF"/>
+<stop offset="1" stop-color="#00F4FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8867_89134" x1="7.99618" y1="0.927924" x2="2.85088" y2="14.5683" gradientUnits="userSpaceOnUse">
+<stop stop-color="#72BCFF"/>
+<stop offset="1" stop-color="#00F4FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8867_89134" x1="7.99618" y1="0.927924" x2="2.85088" y2="14.5683" gradientUnits="userSpaceOnUse">
+<stop stop-color="#72BCFF"/>
+<stop offset="1" stop-color="#00F4FF"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/dataScreen/modelList/notUsed.svg
+++ b/src/assets/dataScreen/modelList/notUsed.svg
@ -0,0 +1,26 @@
+<svg width="265" height="171" viewBox="0 0 265 171" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="263" height="169" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="2"/>
+<rect width="265" height="171" fill="url(#paint0_linear_9937_75628)" fill-opacity="0.9"/>
+<path d="M248 170H264V154" stroke="#20A0FD" stroke-width="2"/>
+<path d="M17 170H1V154" stroke="#20A0FD" stroke-width="2"/>
+<path d="M248 1H264V17" stroke="#20A0FD" stroke-width="2"/>
+<path d="M17 1H1V17" stroke="#20A0FD" stroke-width="2"/>
+<path opacity="0.3" d="M180 17H210.443L233.103 27H249" stroke="url(#paint1_linear_9937_75628)" stroke-width="1.5"/>
+<path opacity="0.3" d="M7 28H37.4428L60.1027 38H76" stroke="url(#paint2_linear_9937_75628)" stroke-width="1.5"/>
+<defs>
+<linearGradient id="paint0_linear_9937_75628" x1="132.5" y1="0" x2="132.5" y2="171" gradientUnits="userSpaceOnUse">
+<stop stop-color="#07428E"/>
+<stop offset="1" stop-color="#07428E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_9937_75628" x1="180" y1="17" x2="247" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="#20A0FD" stop-opacity="0"/>
+<stop offset="0.48" stop-color="#20A0FD"/>
+<stop offset="1" stop-color="#20A0FD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_9937_75628" x1="7" y1="28" x2="74" y2="28" gradientUnits="userSpaceOnUse">
+<stop stop-color="#20A0FD" stop-opacity="0"/>
+<stop offset="0.48" stop-color="#20A0FD"/>
+<stop offset="1" stop-color="#20A0FD" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/dataScreen/modelList/phoneIndustry.svg
+++ b/src/assets/dataScreen/modelList/phoneIndustry.svg
--- a/src/pages/dataScreen/views/modelList/api.ts
+++ b/src/pages/dataScreen/views/modelList/api.ts
@ -0,0 +1,38 @@
+export function randomID(length = 6) {
+  return Number(
+    Math.random().toString().substr(3, length) + Date.now()
+  ).toString(36);
+}
+
+const COLORS = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
+
+function getRandomNum(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function randomColor() {
+  return COLORS[getRandomNum(0, 4)];
+}
+
+const website = "https://www.getphotoblanket.com";
+
+export const getList = ({ page = 1, pageSize = 20 }) => {
+  const url = `${website}/products.json?page=${page}&limit=${pageSize}`;
+  return fetch(url)
+    .then(res => res.json())
+    .then(res => res.products)
+    .then(res => {
+      return res.map((item: any) => {
+        return {
+          id: randomID(),
+          star: false,
+          price: item.variants[0].price,
+          src: {
+            original: item.images[0].src
+          },
+          backgroundColor: randomColor(),
+          name: item.title
+        };
+      });
+    });
+};
--- a/src/pages/dataScreen/views/modelList/modelList.scss
+++ b/src/pages/dataScreen/views/modelList/modelList.scss
@ -9,4 +9,145 @@
  .banner_side_right {
    transform: rotateY(180deg);
  }
+  .model-list-mid {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .model-list-title {
+      width: 554px;
+      height: 60px;
+      background: url("@/assets/dataScreen/modelList/modelListTitle.svg")
+        no-repeat center center;
+      font-size: 28px;
+      line-height: 40px;
+      text-align: center;
+      span {
+        font-size: 36px;
+        color: #00e1ff;
+      }
+    }
+    .model-list-box {
+      .model-box-inUsed,
+      .model-box-notUsed {
+        box-sizing: border-box;
+        position: relative;
+        padding: 65px 20px 24px;
+        margin-top: 40px;
+        margin-bottom: 4px;
+        width: 100%;
+        height: 172px;
+        background: linear-gradient(
+          180deg,
+          rgba(255, 207, 95, 0.4) 0%,
+          rgba(255, 207, 95, 0) 100%
+        );
+        background-image: url("@/assets/dataScreen/modelList/inUsed.svg");
+        background-repeat: no-repeat;
+        .model-box-state {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 48px;
+          height: 24px;
+          background: #faad14;
+          font-size: 12px;
+          color: #fff;
+          text-align: center;
+          line-height: 24px;
+          border-radius: 8px 0px 8px 0px;
+        }
+        .model-box-title {
+          margin-bottom: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          .model-box-name {
+            white-space: nowrap;
+            max-width: 8em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 16px;
+          }
+          .model-box-type,
+          .model-box-type-deep {
+            margin-left: 16px;
+            width: 56px;
+            height: 20px;
+            background: linear-gradient(180deg, #21c7ff 0%, #428cff 100%);
+            border-radius: 2px;
+            font-size: 12px;
+            text-align: center;
+            line-height: 20px;
+          }
+          .model-box-type-deep {
+            background: linear-gradient(180deg, #ffb21a 0%, #ff9b3e 100%);
+          }
+        }
+        .model-box-version,
+        .model-box-industry {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-size: 14px;
+          color: #fff;
+
+          .model-box-version-icon {
+            margin-right: 8px;
+            width: 16px;
+            height: 16px;
+            background: url("@/assets/dataScreen/modelList/modelVersion.svg")
+              no-repeat center center;
+          }
+          .model-box-industry-icon {
+            margin-right: 8px;
+            width: 16px;
+            height: 16px;
+            background: url("@/assets/dataScreen/modelList/modelIndustry.svg")
+              no-repeat center center;
+          }
+          .model-box-industry-describe {
+            white-space: nowrap;
+            max-width: 14em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        .model-box-version {
+          margin-bottom: 8px;
+        }
+        .model-box-icon,
+        .model-box-icon-phone,
+        .model-box-icon-mechanical {
+          position: absolute;
+          top: -40px;
+          left: 91px;
+          width: 72px;
+          height: 88px;
+          background: url("@/assets/dataScreen/modelList/generalIndustry.svg")
+            no-repeat center center;
+        }
+        .model-box-icon-phone {
+          background: url("@/assets/dataScreen/modelList/phoneIndustry.svg")
+            no-repeat center center;
+        }
+        .model-box-icon-mechanical {
+          background: url("@/assets/dataScreen/modelList/mechanicalIndustry.svg")
+            no-repeat center center;
+        }
+      }
+      .model-box-notUsed {
+        width: 100%;
+        height: 172px;
+        background: linear-gradient(
+          180deg,
+          #07428e 0%,
+          rgba(7, 66, 142, 0) 100%
+        );
+        background-image: url("@/assets/dataScreen/modelList/notUsed.svg");
+        background-repeat: no-repeat;
+      }
+    }
+  }
 }
--- a/src/pages/dataScreen/views/modelList/modelList.vue
+++ b/src/pages/dataScreen/views/modelList/modelList.vue
@ -1,13 +1,218 @@
 <script setup lang="ts">
+// import { getList } from "@/api/list";
+import { getModelList } from "@/api/list";
+import { getList } from "./api";
+import error from "@/assets/dataScreen/modelList/error.png";
+import loading from "@/assets/dataScreen/modelList/loading.png";
+import { ElLoading } from "element-plus";
+import "vue-waterfall-plugin-next/dist/style.css";
+import InfiniteLoading from "v3-infinite-loading";
+import { onMounted, reactive, ref, nextTick } from "vue";
+import backTop from "@/assets/svg/back_top.svg?component";
+import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
 defineOptions({
  name: "ModelList"
 });
+const options = reactive({
+  // 唯一key值
+  rowKey: "id",
+  // 卡片之间的间隙
+  gutter: 20,
+  // 是否有周围的gutter
+  hasAroundGutter: false,
+  // 卡片在PC上的宽度
+  width: 265,
+  // 自定义行显示个数，主要用于对移动端的适配
+  breakpoints: {
+    1200: {
+      // 当屏幕宽度小于等于1200
+      rowPerView: 4
+    },
+    800: {
+      // 当屏幕宽度小于等于800
+      rowPerView: 3
+    },
+    500: {
+      // 当屏幕宽度小于等于500
+      rowPerView: 2
+    }
+  },
+  // 动画效果 https://animate.style/
+  animationEffect: "animate__zoomInUp",
+  // 动画时间
+  animationDuration: 1000,
+  // 动画延迟
+  animationDelay: 300,
+  // 背景色
+  backgroundColor: "transparent",
+  // 图片字段选择器，如果层级较深，使用 xxx.xxx.xxx 方式
+  imgSelector: "src.original",
+  // 加载配置
+  loadProps: {
+    loading,
+    error
+  },
+  // 是否懒加载
+  lazyload: true
+});
+
+const page = ref(1);
+const list = ref([]);
+const pageSize = ref();
+const loadingInstance = ref();
+
+/** 加载更多 */
+function handleLoadMore() {
+  loadingInstance.value = ElLoading.service({
+    target: ".content",
+    background: "transparent",
+    text: "加载中"
+  });
+  getModelList({
+    page: page.value,
+    pageSize: pageSize.value
+  }).then(res => {
+    console.log(res);
+    setTimeout(() => {
+      list.value.push(...res.data.list);
+      page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 1000);
+  });
+}
+
+function handleDelete(item, index) {
+  list.value.splice(index, 1);
+}
+
+function handleClick(item) {
+  console.log(item);
+}
+
+function getModelIcon(params: string) {
+  if (
+    params == "电子、手机、SMT" ||
+    params == "手机、电子、手机、工件装配、SMT" ||
+    params == "手机、电子、SMT" ||
+    params == "手机、液晶显示屏"
+  ) {
+    return "model-box-icon-phone";
+  } else if (
+    params ==
+    "机械、金属工件、线缆、铸造、薄膜、玻璃、造纸、铝板带、铝箔、铜箔、无纺布"
+  ) {
+    return "model-box-icon-mechanical";
+  } else {
+    return "model-box-icon";
+  }
+}
+
+onMounted(() => {
+  handleLoadMore();
+});
 </script>

 <template>
  <div class="flex justify-between modelList">
    <div class="banner_side" />
-    <div>mid</div>
+    <div class="model-list-mid">
+      <div class="model-list-title ff1">
+        苏胜天大模型衍生模型库<span>{{ 256 }}</span>
+      </div>
+      <div class="model-list-box w-full">
+        <el-scrollbar height="810px" class="content">
+          <Waterfall :list="list" v-bind="options">
+            <template #item="{ item, url, index }">
+              <div
+                :class="
+                  item.state === '在线'
+                    ? 'model-box-inUsed'
+                    : 'model-box-notUsed'
+                "
+                @click="handleClick(item)"
+              >
+                <div class="model-box-state" v-if="item.state === '在线'">
+                  使用中
+                </div>
+                <div class="model-box-title">
+                  <div class="model-box-name ff1">
+                    {{ item.deviceSort }}
+                  </div>
+                  <div
+                    :class="
+                      item.type === '经典算法'
+                        ? 'model-box-type'
+                        : 'model-box-type-deep'
+                    "
+                  >
+                    {{ item.type }}
+                  </div>
+                </div>
+                <div class="model-box-version">
+                  <div class="model-box-version-icon" />
+                  版本：{{ item.version }}
+                </div>
+                <div class="model-box-industry">
+                  <div class="model-box-industry-icon" />
+                  <div class="model-box-industry-describe">
+                    适用行业：{{ item.industry }}
+                  </div>
+                </div>
+                <div :class="getModelIcon(item.industry)" />
+                <!-- {{ item }} -->
+                <!-- <div class="overflow-hidden">
+                  <LazyImg
+                    :url="url"
+                    class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+                  />
+                </div> -->
+                <!-- <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
+                  <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
+                    {{ item.deviceSort }}
+                  </h4>
+                  <div
+                    class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
+                  >
+                    <div class="text-gray-50">$ {{ item.price }}</div>
+                    <div>
+                      <button
+                        class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
+                        @click.stop="handleDelete(item, index)"
+                      >
+                        删除
+                      </button>
+                    </div>
+                  </div>
+                </div> -->
+              </div>
+            </template>
+          </Waterfall>
+
+          <!-- <div class="flex justify-center py-10">
+              <button
+                class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
+                @click="handleLoadMore"
+              >
+                加载更多
+              </button>
+            </div> -->
+
+          <el-backtop
+            title="回到顶部"
+            :right="35"
+            :visibility-height="400"
+            target=".content .el-scrollbar__wrap"
+          >
+            <backTop />
+          </el-backtop>
+
+          <!-- 加载更多 -->
+          <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
+        </el-scrollbar>
+      </div>
+    </div>
    <div class="banner_side banner_side_right" />
  </div>
 </template>