边框渐变、字体渐变

 

<a-input v-model:value="searchTerm" placeholder="搜索能力" @pressEnter="onSearch" @focus="handleSearchFocus">

          <template #prefix>

            <SearchOutlined style="font-size: 24px;color: #cacaca;" @click="onSearch" />

          </template>

          <template #suffix>

            <div>

              <img src="@/assets/images/single2/search-icon.png" alt="">

              <span @click.stop="goToAllAbility">浏览所有能力</span>

            </div>

          </template>

        </a-input>

 :deep(.ant-input-affix-wrapper) {
      height: 60px;
      border-radius: 12px;
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        linear-gradient(to right, #0AA7FF, #3658FF, #FF88EB) border-box;

      &:focus,
      &:hover {
        border: 2px solid transparent;
        background: linear-gradient(white, white) padding-box,
          linear-gradient(to right, #0AA7FF, #3658FF, #FF88EB) border-box;
        box-shadow: none;
      }

      .anticon svg {
        color: #006AFF;
      }
    }

span {

          font-size: 17px;

          background: linear-gradient(109.77deg, #3658FF 18.4%, #FF88EB 97.96%);

          -webkit-background-clip: text;

          -webkit-text-fill-color: transparent;

          background-clip: text;

          cursor: pointer;

        }