twin2025-ui/src/views/ai/pic_demo/index.vue

<template>
  <div class="app-container" style="display: flex;">
    <div style="width: 25%;height: 810px;border: 1px solid #ededed;background-color: #f4f4f4;">
      <el-form>
        <el-form-item label="花样分类" style="margin-left: 10px;margin-bottom: 0;">{{ tag_active }}</el-form-item>
        <el-form-item>
          <div>
            <div v-for="(item,index) in demo_type" :key="index">
              <div class="type_tag">{{ item.name }}</div>
              <div v-for="(t2) in item.list">
                <span class="type_tag2">{{ t2.name }} > </span>
                <span v-for="t3 in t2.list" :class="tag_active!=t3.name?'type_tag3':'type_tag3 active'" @click="clickTag(t3)">{{ t3.name }}</span>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="width: 20%;background-color: #f4f4f480;border-right: 1px solid #ededed;">
      <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>
          <el-input type="text" placeholder="输入关键词" v-model="searchText" style="width: 200px;margin-right: 5px;"></el-input><el-button type="primary" icon="search" @click="txtmatch">快搜</el-button>
        </el-form-item>
        <el-form-item label="以图搜图"></el-form-item>
        <el-form-item>
          <div style="width: 256px;height: 256px;background-color: rgb(238, 242, 245);">
            <img v-if="dialogImageUrl" :src="dialogImageUrl" style="width: 256px;height: 256px;">
            <img v-else src="/src/assets/images/noimg.png" style="width: 256px;height: 256px;">
          </div>
        </el-form-item>
        <el-form-item style="margin-bottom:0px">
          <el-upload
            class="upload-demo"
            action=""
            :on-success="handleSuccess"
            :on-error="handleError"
            :before-upload="beforeUpload"  
            :on-change="prevImg"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button type="primary" icon="upload">点击上传</el-button>
          </el-upload>
          <el-button icon="favourites" @click="resetQuery" style="margin-left: 10px;margin-bottom: 16px;">我的收藏</el-button>
        </el-form-item>
        <el-form-item label="只能上传 jpg/png 文件，且不超过 2M"></el-form-item>
        <el-form-item>
          <el-button :type="mayMatch?'primary':''" @click="match">AI匹配花样</el-button>
        </el-form-item>
      </el-form>
    </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>   
        <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;overflow: hidden;height: 100px;" v-html="item.desc"></div>
            </div>
          </div>          
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup name="pic_demo">
import { ref } from 'vue';
const { proxy } = getCurrentInstance();
const dialogImageUrl = ref('');
const tag_active=ref("");
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:[]},
  {"name":"文化符号",list:[]}
]);
const list00=[
  {"name":"玫瑰"},
  {"name":"牡丹"},
  {"name":"樱花"},
  {"name":"棕榈叶"},
  {"name":"芭蕉叶"},
];
const list01=[
  {"name":"水彩晕染花卉"},
  {"name":"几何化叶片"},
];
const list02=[
  {"name":"豹纹"},
  {"name":"斑马纹"},  
  {"name":"小熊"}, 
  {"name":"兔子"}, 
  {"name":"虎纹"}, 
  {"name":"狼纹"}, 
];
const list03=[
  {"name":"水墨山水"}, 
  {"name":"北欧极光"}, 
  {"name":"秋季枫叶"},
  {"name":"冬季雪花"},
];
const list10=[
  {"name":"条纹"}, 
  {"name":"菱形"}, 
  {"name":"千鸟格"}, 
];
const list11=[
{"name":"不规则色块"}, 
  {"name":"波点"}, 
  {"name":"孟菲斯风格"}, 
];
const list12=[
{"name":"佩斯利花纹"}, 
  {"name":"非洲图腾"}, 
];
const list20=[
{"name":"中国云纹"}, 
  {"name":"日本浮世绘"}, 
  {"name":"凯尔特结"}, 
];
const list21=[
{"name":"圣诞树"}, 
  {"name":"南瓜灯"}, 
];
const list22=[
{"name":"英文短句"}, 
  {"name":"激励语录"}, 
];
demo_type.value[0]["list"]=[
  {"name":"植物花卉",list:list00},
  {"name":"抽象植物",list:list01},
  {"name":"动物纹样",list:list02},
  {"name":"风景图案",list:list03},
]
demo_type.value[1]["list"]=[
  {"name":"传统几何",list:list10},
  {"name":"现代抽象",list:list11},
  {"name":"民族风",list:list12},
]
demo_type.value[2]["list"]=[
  {"name":"传统纹样",list:list20},
  {"name":"节日限定",list:list21},
  {"name":"文字标语",list:list22},
]

const showImgList=(ind)=>{
  imgLstInd.value = ind;
}
const handleSuccess = (response, file, fileList) => {
  console.log('上传成功', response);
};

const handleError = (error, file, fileList) => {
  console.error('上传失败', error);
};

const prevImg = (file)=>{
  mayMatch.value=false;
  macthresult.value=null;
  const isJPGorPNG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
  const isLt500KB = file.raw.size / 1024 < 2048;
   if (!isJPGorPNG) {
    dialogImageUrl.value = "";
    proxy.$modal.msgError("只能上传 JPG/PNG 格式的图片!");
    return
  }
  if (!isLt500KB) {
    dialogImageUrl.value = "";
    proxy.$modal.msgError('图片大小不能超过 2048KB!');
    return
  }
  mayMatch.value=true;
  dialogImageUrl.value = URL.createObjectURL(file.raw);
}

const beforeUpload = (file) => {
  
  return false;
};

const handleExceed = (files, fileList) => {
  ElMessage.warning(`限制上传 3 个文件，本次选择了 ${files.length} 个文件`);
};

const clickTag = (tag)=>{
  tag_active.value = tag.name
}

const txtmatch=()=>{
  if(searchText.value==''){
    proxy.$modal.msgError('请输入匹配关键词!');
    return;
  }
  macthresult.value=null;
  startMacth.value = true;
  setTimeout(() => {
    startMacth.value = false;
    macthresult.value=[
      {"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);
}

const match=()=>{
  if(tag_active.value==''){
    proxy.$modal.msgError('请先选择花样分类!');
    return;
  }
  if(!mayMatch.value){
    proxy.$modal.msgError('请选择上传正确的花样图片!');
    return;
  }
  startMacth.value = true;
  macthresult.value=null;
  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>平纹"},
    ];
  }, 3000);
  
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
}
</script>
<style>
.imglist{
  width: 200px;
  padding: 1%;
  background-color: #fff;
  height: 275px;
  margin-left: 10px;
  border-radius: 5px;
  display: flex;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}
.imglist img{
  height: 145px;
  width: 145px;
}
  .type_tag{
    font-weight: bold;
    width: 100px;
    background-color: #fefefe;
    margin: 10px;
    text-align: center;
  }

  .type_tag2{
    font-weight: bold;
    margin: 10px;
  }

  .type_tag3{
    color: #666;
    margin: 10px;
    cursor: pointer;
  }
  .type_tag3:hover{
    color: green;
    text-decoration: underline;
  }

  .type_tag3.active{
    color: green;
    text-decoration: underline;    
  }
</style>