From 401ed176c9f1bdd97ccdf827d9454b11a3891f79 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 08 八月 2025 23:10:50 +0800
Subject: [PATCH] 8.8 初始版本
---
src/views/home/index.vue | 33 ++++++++++++++++++++++++++++-----
1 files changed, 28 insertions(+), 5 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 999cd1e..32500ad 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -20,7 +20,7 @@
</div>
<div class="page-search">
<div class="search-data">
- <div class="left-See">{{ t('message.SeeMore') }} ></div>
+ <div class="left-See" @click="gotoPage()">{{ t('message.SeeMore') }} ></div>
<div class="left-data">121M</div>
<div class="left-text">{{ t('message.Compounds') }}</div>
</div>
@@ -28,13 +28,16 @@
<div class="searchTop">
<div class="searchInputBox">
<input v-model="pageData.searchText" type="text" placeholder="" />
- <el-button color="#16569C" :icon="Search" class="search-btn" round
+ <el-icon v-if="pageData.searchText != ''" class="clear-icon" @click="clearInput">
+ <CloseBold />
+ </el-icon>
+ <el-button color="#01644c" :icon="Search" class="search-btn" round
@click="gotoPage()"></el-button>
</div>
<ul class="searchExample">
<li class="example">{{ t('message.Example') }}:</li>
- <li class="example-item">aspirin</li>
- <li class="example-item">aspirin</li>
+ <li class="example-item" @click="gotoList(pageData.example)">{{ pageData.example }}
+ </li>
</ul>
</div>
<div class="searchBottom">
@@ -71,8 +74,13 @@
];
const pageData = reactive<home>({
- searchText: ""
+ searchText: "",
+ example: "aspirin"
})
+
+const clearInput = () => {
+ pageData.searchText = ""
+}
const currentLocale = computed({
get: () => locale.value,
@@ -86,6 +94,11 @@
const gotoPage = () => {
const query = { searchText: pageData.searchText };
router.push({ path: pathData.searchList, query })
+}
+
+const gotoList = (txt: any) => {
+ pageData.searchText = txt
+ gotoPage()
}
const goAi = () => {
@@ -276,6 +289,7 @@
height: 100%;
width: 8.1%;
border-radius: 60px;
+ font-size: 28px !important;
}
@@ -289,6 +303,14 @@
border: none;
outline: none
}
+
+ .clear-icon {
+ color: #212121;
+ font-size: 18px !important;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
.searchExample {
width: 91%;
@@ -312,6 +334,7 @@
margin-right: 15px;
margin-left: 15px;
padding: 2px 5px;
+ cursor: pointer;
}
}
--
Gitblit v1.9.1