aiforge/web_src/vuepages/pages/repos/components/SearchBar.vue

<template>
  <div>
    <div class="_repo_search">
      <div class="_repo_search_input_c">
        <div class="_repo_search_input">
          <input type="text" v-model="searchInputValue" placeholder="搜项目" />
        </div>
        <div class="_repo_search_btn">
          <svg xmlns="http://www.w3.org/2000/svg"
            class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 kdvdTY svg-icon-path-icon fill" viewBox="0 0 32 32"
            width="24" height="24">
            <defs data-reactroot="">
              <linearGradient id="ilac9fwnydq3lcx1,1,rs,1,f0dwf0xj,ezu9f0dw,f000,00lwrsktrs,rs1bhv8urs" x1="0" x2="100%"
                y1="0" y2="0"
                gradientTransform="matrix(-0.7069999999999999, -0.707, 0.707, -0.7069999999999999, 16, 38.624)"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#c9ffbf" stop-opacity="1" offset="0"></stop>
                <stop stop-color="#0ca451" stop-opacity="1" offset="1"></stop>
              </linearGradient>
            </defs>
            <g>
              <path fill="url(#ilac9fwnydq3lcx1,1,rs,1,f0dwf0xj,ezu9f0dw,f000,00lwrsktrs,rs1bhv8urs)"
                d="M14.667 2.667c6.624 0 12 5.376 12 12s-5.376 12-12 12-12-5.376-12-12 5.376-12 12-12zM14.667 24c5.156 0 9.333-4.177 9.333-9.333 0-5.157-4.177-9.333-9.333-9.333-5.157 0-9.333 4.176-9.333 9.333 0 5.156 4.176 9.333 9.333 9.333zM25.98 24.095l3.772 3.771-1.887 1.887-3.771-3.772 1.885-1.885z">
              </path>
            </g>
          </svg>
          <span style="margin-left:10px;">搜索</span>
        </div>
      </div>
      <div class="_repo_search_label">
        <a :href="`/explore/repos?q=&topic=${item}&sort=hot`"
          :style="{ backgroundColor: topicColors[index % topicColors.length] }" v-for="(item, index) in topics"
          :key="index">{{ item }}</a>
      </div>
    </div>
  </div>
</template>
<script>

import { getPromoteData } from '~/apis/modules/common';
// import { CLUSTERS, AI_CENTER, COMPUTER_RESOURCES, ACC_CARD_TYPE } from '~/const';
const COLOR_LIST = [
  'rgb(255, 104, 104)',
  'rgb(22, 132, 252)',
  'rgb(2, 202, 253)',
  'rgb(164, 145, 215)',
  'rgb(232, 64, 247)',
  'rgb(245, 182, 110)',
  'rgb(54, 187, 166)',
  'rgb(123, 50, 178)'
];
export default {
  name: "SearchBar",
  props: {
    // visible: { type: Boolean, default: false },
  },
  components: {},
  data() {
    return {
      searchInputValue: '',
      topicColors: COLOR_LIST,
      topics: [],
    };
  },
  methods: {
    xxx() {
    }
  },
  mounted() {
    getPromoteData('/repos/recommend_topics').then(res => {
      const data = res.data;
      try {
        const topics = JSON.parse(data);
        this.topics = topics;
      } catch (err) {
        console.log(err);
      }
    }).catch(err => {
      console.log(err);
    });
  },
};
</script>
<style scoped lang="less">
._repo_search {
  margin: 54px 0;
}

._repo_search_input_c {
  margin: 0 0 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

._repo_search_input {
  display: flex;
  align-items: center;
  width: 437px;
  height: 41px;
  border-color: rgba(47, 9, 69, 0.64);
  border-width: 1px;
  border-style: solid;
  color: rgba(16, 16, 16, 0.5);
  border-radius: 20px;
  font-size: 14px;
  padding: 20px;
  text-align: left;
  line-height: 20px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736765e-17%2C%20-0.9999999999999999%2C%200.008802475794500678%2C%206.123233995736765e-17%2C%201%2C%201.003)%22%3E%3Cstop%20stop-color%3D%22%23eeeade%22%20stop-opacity%3D%220.2%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23ece0e9%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
}

._repo_search_input input {
  width: 100%;
  height: 30px;
  border: none;
  background: transparent;
  outline: none;
}

._repo_search_btn {
  margin-left: 10px;
  width: 110px;
  height: 40px;
  border-style: none;
  border-color: unset;
  color: rgb(255, 255, 255);
  border-radius: 21px;
  font-size: 14px;
  text-align: center;
  font-weight: normal;
  font-style: normal;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.17728531855955676%2C%206.123233995736766e-17%2C%201%2C%200)%22%3E%3Cstop%20stop-color%3D%22%232f0945%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23341a7b%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

._repo_search_label {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

._repo_search_label a {
  background-color: rgb(2, 202, 253);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  margin: 0 5px 10px 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
}
</style>