<template>
    <div class="page flex-col">
      <div class="group_1 flex-col"></div>
      <div class="group_2 flex-col"></div>
      <div class="group_3 flex-col justify-end">
        <!-- Status bar -->
        <div class="group_4 flex-row">
          <span class="text_1">9:41</span>
          <div class="box_1 flex-col"></div>
          <div class="box_2 flex-col"></div>
          <img
            class="image_1"
            src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd25660d878c1c723ef4b6d3179f8fc88.png"
          />
        </div>
        <!-- Header -->
        <div class="group_5 flex-row">
          <img
            class="thumbnail_1"
            src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG715af45decd916ba1800cb4e2a7551c7.png"
          />
          <span class="text_2">iAON AI Search</span>
          <img
            class="thumbnail_2"
            src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG3a72b01e44112e9b2907ba6d3ce1405f.png"
          />
          <div class="block_1 flex-col"></div>
          <div class="block_2 flex-col"></div>
        </div>
        <!-- Search input -->
        <div class="group_12 flex-col">
          <div class="text-wrapper_1 flex-row">
            <input v-model="searchInput" class="text_6" placeholder="输入任何内容..." />
          </div>
          <div class="block_5 flex-row justify-between">
            <div class="box_5 flex-col justify-center">
              <div class="group_13 flex-col"></div>
            </div>
            <div class="box_6 flex-col">
              <img
                class="thumbnail_3"
                src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGa3622f01b458c96a5a91b95a2bfd9714.png"
                @click="search"
              />
              <div class="group_14 flex-col"></div>
            </div>
          </div>
        </div>
        <!-- Search history -->
        <div class="image-text_2 flex-row justify-between">
          <div class="box_7 flex-col"><div class="box_8 flex-col"></div></div>
          <span class="text-group_2">搜索历史</span>
        </div>
        <!-- Search history items -->
        <div v-for="(item, index) in searchHistory" :key="index" class="group_15 flex-row justify-between">
          <div class="box_9 flex-col">
            <div class="section_1 flex-col">
              <div class="group_16 flex-col"></div>
            </div>
          </div>
          <span class="text_7">{{ item }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchInput: '',
        searchHistory: [
          '如何做一个Ai搜索引擎',
          '有哪些比较好用的开源项目管理工具？',
          '原型设计工具Axure、Figma、Pixso，哪个更好用？',
          '如何在Windows和Linux系统中通过ollama部署qwen大语言模型，并实现open-webui的访问',
          '搭建自己的GPT'
        ]
      };
    },
    methods: {
      search() {
        if (this.searchInput.trim()) {
          this.$emit('search', this.searchInput);
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 375px;
  height: 812px;
  overflow: hidden;
}

.group_1 {
  width: 376px;
  height: 376px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGdaa982ba4073f99f46823e930dcb9ae6.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin-top: 612px;
}

.group_2 {
  position: absolute;
  left: 0;
  top: 437px;
  width: 375px;
  height: 375px;
}

.group_3 {
  position: absolute;
  left: 0;
  top: 88px;
  width: 375px;
  height: 724px;
}

.group_4 {
  width: 341px;
  height: 18px;
  margin: -73px 0 0 21px;
}

.text_1 {
  width: 54px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 15px;
  letter-spacing: -0.30000001192092896px;
  font-family: SF Pro Text-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 15px;
}

.box_1 {
  background-color: rgba(25, 33, 61, 1);
  width: 17px;
  height: 11px;
  margin: 3px 0 0 219px;
}

.box_2 {
  background-color: rgba(25, 33, 61, 1);
  width: 16px;
  height: 11px;
  margin: 3px 0 0 5px;
}

.image_1 {
  width: 25px;
  height: 12px;
  margin: 3px 0 0 5px;
}

.group_5 {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 375px;
  height: 44px;
  margin-top: 11px;
}

.thumbnail_1 {
  width: 9px;
  height: 18px;
  margin: 13px 0 0 18px;
}

.text_2 {
  width: 118px;
  height: 22px;
  overflow-wrap: break-word;
  color: rgba(28, 28, 40, 1);
  font-size: 16px;
  font-family: PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 16px;
  margin: 11px 0 0 105px;
}

.thumbnail_2 {
  width: 15px;
  height: 15px;
  margin: 15px 20px 0 90px;
}

.block_1 {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 24px;
  height: 24px;
}

.block_2 {
  position: absolute;
  left: 335px;
  top: 10px;
  width: 24px;
  height: 24px;
}

.group_6 {
  width: 343px;
  height: 20px;
  margin: 10px 0 0 16px;
}

.group_7 {
  background-color: rgba(25, 33, 61, 1);
  height: 16px;
  margin-top: 2px;
  width: 16px;
}

.block_3 {
  width: 16px;
  height: 16px;
}

.group_8 {
  border-radius: 9999px;
  height: 16px;
  width: 16px;
  margin: 2px 0 0 16px;
}

.group_9 {
  width: 16px;
  height: 16px;
}

.text_3 {
  width: 71px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(102, 111, 141, 1);
  font-size: 12px;
  font-family: Inter-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin: 2px 0 0 4px;
}

.image-text_1 {
  width: 50px;
  height: 20px;
  margin-left: 170px;
}

.text-group_1 {
  width: 26px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(102, 111, 141, 1);
  font-size: 14px;
  font-family: Inter-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin-top: 2px;
}

.box_3 {
  height: 20px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd1a05d06d5bf2038ff730ba374addebd.png)
    100% no-repeat;
  background-size: 100% 100%;
  width: 20px;
}

.box_4 {
  width: 20px;
  height: 20px;
}

.group_10 {
  width: 266px;
  height: 32px;
  margin: 90px 0 0 55px;
}

.group_11 {
  height: 32px;
  width: 32px;
}

.block_4 {
  width: 32px;
  height: 32px;
}

.text_4 {
  width: 230px;
  height: 32px;
  overflow-wrap: break-word;
  color: rgba(45, 126, 255, 1);
  font-size: 32px;
  letter-spacing: -0.8000000715255737px;
  font-family: Inter-Extra Bold;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 32px;
}

.text_5 {
  width: 343px;
  height: 28px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 18px;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 28px;
  margin: 32px 0 0 16px;
}

.group_12 {
  height: 102px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGde50877415a0a77992deb2aad2bb84ad.png)
    100% no-repeat;
  background-size: 100% 100%;
  width: 339px;
  margin: 36px 0 0 18px;
}

.text-wrapper_1 {
  width: 96px;
  height: 16px;
  margin: 12px 0 0 12px;
}

.text_6 {
  width: 96px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(186, 192, 204, 1);
  font-size: 14px;
  font-family: Inter-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
}

.block_5 {
  width: 72px;
  height: 28px;
  margin: 42px 0 4px 255px;
}

.box_5 {
  background-color: rgba(25, 33, 61, 1);
  height: 12px;
  margin-top: 9px;
  width: 13px;
}

.group_13 {
  width: 12px;
  height: 12px;
}

.box_6 {
  box-shadow: 0px 2px 5px 0px rgba(20, 88, 201, 0.17);
  background-image: linear-gradient(
    180deg,
    rgba(43, 122, 251, 1) 0,
    rgba(33, 116, 253, 1) 100%,
    rgba(33, 59, 253, 1) 100%
  );
  border-radius: 8px;
  height: 28px;
  border: 1px gradient;
  width: 44px;
  position: relative;
}

.thumbnail_3 {
  width: 12px;
  height: 12px;
  margin: 8px 0 0 16px;
}

.group_14 {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 28px;
}

.image-text_2 {
  width: 108px;
  height: 24px;
  margin: 36px 0 0 24px;
}

.box_7 {
  height: 20px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG25ea552c4bb821817684b6c731e663ca.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin-top: 2px;
  width: 20px;
}

.box_8 {
  width: 20px;
  height: 20px;
}

.text-group_2 {
  width: 80px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 20px;
  font-family: PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}

.group_15 {
  width: 179px;
  height: 32px;
  margin: 16px 0 0 24px;
}

.box_9 {
  background-color: rgba(240, 242, 245, 1);
  border-radius: 8px;
  height: 32px;
  width: 32px;
}

.section_1 {
  height: 16px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
    100% no-repeat;
  background-size: 100% 100%;
  width: 16px;
  margin: 8px 0 0 8px;
}

.group_16 {
  width: 16px;
  height: 16px;
}

.text_7 {
  width: 139px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 4px;
}

.group_17 {
  width: 278px;
  height: 32px;
  margin: 16px 0 0 24px;
}

.group_18 {
  background-color: rgba(240, 242, 245, 1);
  border-radius: 8px;
  height: 32px;
  width: 32px;
}

.section_2 {
  height: 16px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
    100% no-repeat;
  background-size: 100% 100%;
  width: 16px;
  margin: 8px 0 0 8px;
}

.box_10 {
  width: 16px;
  height: 16px;
}

.text_8 {
  width: 238px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 4px;
}

.group_19 {
  width: 327px;
  height: 32px;
  margin: 16px 0 0 24px;
}

.group_20 {
  background-color: rgba(240, 242, 245, 1);
  border-radius: 8px;
  height: 32px;
  width: 32px;
}

.block_6 {
  height: 16px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
    100% no-repeat;
  background-size: 100% 100%;
  width: 16px;
  margin: 8px 0 0 8px;
}

.section_3 {
  width: 16px;
  height: 16px;
}

.text_9 {
  width: 287px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 4px;
}

.group_21 {
  width: 327px;
  height: 32px;
  margin: 16px 0 0 24px;
}

.box_11 {
  background-color: rgba(240, 242, 245, 1);
  border-radius: 8px;
  height: 32px;
  width: 32px;
}

.box_12 {
  height: 16px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
    100% no-repeat;
  background-size: 100% 100%;
  width: 16px;
  margin: 8px 0 0 8px;
}

.block_7 {
  width: 16px;
  height: 16px;
}

.text_10 {
  width: 287px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 4px;
}

.group_22 {
  width: 139px;
  height: 32px;
  margin: 16px 0 0 24px;
}

.box_13 {
  background-color: rgba(240, 242, 245, 1);
  border-radius: 8px;
  height: 32px;
  width: 32px;
}

.box_14 {
  height: 16px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
    100% no-repeat;
  background-size: 100% 100%;
  width: 16px;
  margin: 8px 0 0 8px;
}

.group_23 {
  width: 16px;
  height: 16px;
}

.text_11 {
  width: 99px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin-top: 4px;
}

.group_24 {
  width: 247px;
  height: 58px;
  margin: 16px 0 0 24px;
}

.group_25 {
  background-color: rgba(240, 242, 245, 1);
  border-radius: 8px;
  height: 32px;
  width: 32px;
}

.group_26 {
  height: 16px;
  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
    100% no-repeat;
  background-size: 100% 100%;
  width: 16px;
  margin: 8px 0 0 8px;
}

.section_4 {
  width: 16px;
  height: 16px;
}

.group_27 {
  position: relative;
  width: 207px;
  height: 54px;
  margin-top: 4px;
}

.image-wrapper_1 {
  background-color: rgba(255, 255, 255, 0.1);
  height: 38px;
  width: 166px;
  margin: 16px 0 0 41px;
}

.image_2 {
  width: 134px;
  height: 34px;
  margin: 4px 0 0 16px;
}

.text_12 {
  position: absolute;
  left: 0;
  top: 0;
  width: 139px;
  height: 24px;
  overflow-wrap: break-word;
  color: rgba(25, 33, 61, 1);
  font-size: 14px;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}
/* Add your CSS styles here */
  </style>