优化demo

src/views/ai/pic_demo/index.vue

@@ -52,16 +52,17 @@
     </div>
     <div style="width: 55%;background-color: #f4f4f480;padding-top: 2%;height: 800px;overflow-y: auto;">
       <el-form :inline="true" style="display: flex;  flex-direction: column;  justify-content: center;  align-items: center;">
-        <el-form-item label="匹配结果"></el-form-item>        
-        <el-form-item style="margin: 0;width: 100%;display: contents;text-align: center;">
-          <div v-if="macthresult" class="imglist" v-for="item in macthresult">
+        <el-form-item label="匹配结果"></el-form-item>   
+        <div v-if="startMacth">正在努力的匹配运算中...</div>     
+        <el-form-item  v-if="macthresult" v-for="(ele,index) in macthresult" style="margin: 0;width: 100%;text-align: center;">
+          <el-label style="width:100%;text-align: left;padding-left: 10px;font-weight: bold;cursor: pointer;text-decoration: underline;" @click="showImgList(index)">{{ '> '+ele.type }} ({{ '匹配结果数：'+ele.list.length }})</el-label>
+          <div class="imglist" v-if="imgLstInd==index" v-for="item in ele.list">
             <div>
               <img :src="item.url">
               <div style="width: 180px;">{{ item.filename }}</div>
-              <div style="width: 180px;text-align: left;padding-left: 10px;" v-html="item.desc"></div>
+              <div style="width: 180px;text-align: left;padding-left: 10px;overflow: hidden;height: 100px;" v-html="item.desc"></div>
             </div>
-          </div>
-          <div v-if="startMacth">正在努力的匹配运算中...</div>
+          </div>          
         </el-form-item>
       </el-form>
     </div>
@@ -77,6 +78,7 @@ const mayMatch=ref(false);
 const startMacth = ref(false)
 const macthresult=ref(null);
 const searchText=ref('');
+const imgLstInd=ref(-1);
 const demo_type=ref([
   {"name":"自然元素",list:[]},
   {"name":"几何图形",list:[]},
@@ -150,6 +152,10 @@ demo_type.value[2]["list"]=[
   {"name":"节日限定",list:list21},
   {"name":"文字标语",list:list22},
 ]
+
+const showImgList=(ind)=>{
+  imgLstInd.value = ind;
+}
 const handleSuccess = (response, file, fileList) => {
   console.log('上传成功', response);
 };
@@ -200,26 +206,34 @@ const txtmatch=()=>{
   setTimeout(() => {
     startMacth.value = false;
     macthresult.value=[
-      {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-            {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
-      {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      {"type":"PCX80039 几何元素",list:[
+        {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4酒.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4酒2.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4酒2.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4兰.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80039 几何元素-4兰绿.jpg","url":"/twin/src/assets/pic_demo/PCX80039 几何元素-4兰绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      ]},
+      {"type":"PCX80021 新天几何",list:[
+        {"filename":"PCX80021 新天几何-4粉.jpg","url":"/twin/src/assets/pic_demo/PCX80021 新天几何-4粉.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80021 新天几何-4黑红.jpg","url":"/twin/src/assets/pic_demo/PCX80021 新天几何-4黑红.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80021 新天几何-4灰.jpg","url":"/twin/src/assets/pic_demo/PCX80021 新天几何-4灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80021 新天几何-4蓝.jpg","url":"/twin/src/assets/pic_demo/PCX80021 新天几何-4蓝.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+        {"filename":"PCX80021 新天几何-4紫.jpg","url":"/twin/src/assets/pic_demo/PCX80021 新天几何-4紫.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      ]},
+      {"type":"PCX80038 古韵花都",list:[
+          {"filename":"PCX80038 古韵花都-9大红.jpg","url":"/twin/src/assets/pic_demo/PCX80038 古韵花都-9大红.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+          {"filename":"PCX80038 古韵花都-9红棕.jpg","url":"/twin/src/assets/pic_demo/PCX80038 古韵花都-9红棕.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+          {"filename":"PCX80038 古韵花都-9灰.jpg","url":"/twin/src/assets/pic_demo/PCX80038 古韵花都-9灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+          {"filename":"PCX80038 古韵花都-9酒红.jpg","url":"/twin/src/assets/pic_demo/PCX80038 古韵花都-9酒红.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+          {"filename":"PCX80038 古韵花都-9蓝灰.jpg","url":"/twin/src/assets/pic_demo/PCX80038 古韵花都-9蓝灰.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+          {"filename":"PCX80038 古韵花都-9墨绿.jpg","url":"/twin/src/assets/pic_demo/PCX80038 古韵花都-9墨绿.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+          {"filename":"PCX80038 古韵花都-9紫.jpg","url":"/twin/src/assets/pic_demo/PCX80038 古韵花都-9紫.jpg","desc":"几何图形<br>主色系：灰<br>64% 棉/28% 涤纶 37./58% 氨纶亲水, 温莎, 弹力, 四面弹, 温度调节<br>NKQ22-1-007KP<br>平纹"},
+      ]},
     ];
   }, 3000);
 }