From 8465415d55c8b7ad0affa85a83e911275495fd54 Mon Sep 17 00:00:00 2001
From: zhangyao <zhangyao@1000mu.com>
Date: Thu, 15 Jun 2023 15:01:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=89=8B=E5=86=99?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=92=8C=E6=90=9C=E7=B4=A2=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E8=AF=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SearchKeyboard/SearchKeyboard.vue         |  2 +-
 src/components/TypeBtnList/TypeBtnList.vue    |  7 +++---
 src/components/Written/Written.vue            |  4 ++--
 src/i18n/lang/en.json                         |  3 ++-
 src/i18n/lang/tw.json                         |  3 ++-
 src/i18n/lang/zh.json                         |  3 ++-
 src/views/Search/Search.vue                   | 24 ++++++++++++-------
 7 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/SearchKeyboard/SearchKeyboard.vue b/src/components/SearchKeyboard/SearchKeyboard.vue
index a06f644..5070005 100644
--- a/src/components/SearchKeyboard/SearchKeyboard.vue
+++ b/src/components/SearchKeyboard/SearchKeyboard.vue
@@ -62,7 +62,7 @@
             background-color="#fff"
             border-radius="12px"
             stroke-style="#D8B78A"
-            fill-style="#fff"
+            fill-style="rgba(0, 0, 0, 0.03)"
             :width="700"
             :height="214"
             @result="result"
diff --git a/src/components/TypeBtnList/TypeBtnList.vue b/src/components/TypeBtnList/TypeBtnList.vue
index 9b9819f..895c75a 100644
--- a/src/components/TypeBtnList/TypeBtnList.vue
+++ b/src/components/TypeBtnList/TypeBtnList.vue
@@ -53,7 +53,7 @@ function changeType(item: TypeItem, index: number) {
       padding-bottom: 18px;
       font-size: 32px;
       font-family: 'font_bold';
-      color: rgb(0 0 0 / 60%);
+      color: rgb(0 0 0 / 40%);
       line-height: 57px;
       font-style: normal;
       font-weight: 400;
@@ -73,10 +73,9 @@ function changeType(item: TypeItem, index: number) {
       }
     }
     &.active {
-      font-size: 40px;
-      color: rgb(0 0 0 / 80%);
-
       h4 {
+        font-size: 40px;
+        color: rgb(0 0 0 / 80%);
         border-bottom: 6px solid #d7ba92;
       }
     }
diff --git a/src/components/Written/Written.vue b/src/components/Written/Written.vue
index 225d8f4..e607390 100644
--- a/src/components/Written/Written.vue
+++ b/src/components/Written/Written.vue
@@ -39,9 +39,9 @@ const props = withDefaults(defineProps<Props>(), {
   lang: 'CN',
   backgroundColor: '#f2f2f2',
   borderRadius: '10px',
-  fillText: '手写区域',
+  fillText: '手写输入区域',
   fillFontSize: '100px',
-  strokeStyle: '#000',
+  strokeStyle: 'rgba(0, 0, 0, 0.3)',
   fillStyle: 'rgba(85, 73, 54, 0.1)'
 })
 
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 664b0c3..0d9a8e3 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -26,7 +26,8 @@
   },
   "search": {
     "title": "全局搜索",
-    "valueTip": "Search",
+    "valueTip": "Please enter initial letters in English and Chinese",
+    "valueTipHand": "Please enter your Chinese name by hand",
     "act": "Activity",
     "brand": "Brand",
     "num": "Result"
diff --git a/src/i18n/lang/tw.json b/src/i18n/lang/tw.json
index 3f68c96..e301f8e 100644
--- a/src/i18n/lang/tw.json
+++ b/src/i18n/lang/tw.json
@@ -26,7 +26,8 @@
   },
   "search": {
     "title": "全局搜索",
-    "valueTip": "搜索",
+    "valueTip": "請輸入中英文首字母,例如XBK(星巴克)",
+    "valueTipHand": "請手寫輸入中文名查詢",
     "act": "活動",
     "brand": "品牌",
     "num": "搜索結果"
diff --git a/src/i18n/lang/zh.json b/src/i18n/lang/zh.json
index 4391294..59f9624 100644
--- a/src/i18n/lang/zh.json
+++ b/src/i18n/lang/zh.json
@@ -26,7 +26,8 @@
   },
   "search": {
     "title": "全局搜索",
-    "valueTip": "搜索",
+    "valueTip": "请输入中英文首字母，例如 XBK(星巴克)",
+    "valueTipHand": "请手写输入中文名查询",
     "act": "活动",
     "brand": "品牌",
     "num": "搜索结果"
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index dea9779..23fa809 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -40,13 +40,9 @@
           <!-- <img src="@/assets/images/search/searchSecondIcon.svg" class="second-icon" /> -->
         </div>
         <div v-if="input.length" class="saw" v-text="input"></div>
-        <input
-          v-model="input"
-          readonly
-          type="text"
-          :placeholder="mode === 'hand' ? '' : $t('search.valueTip')"
-          :class="{ istip: input.length === 0 }"
-        />
+        <!-- :placeholder=""  -->
+        <input v-model="input" readonly type="text" :class="{ istip: input.length === 0 }" />
+        <h4 v-if="input.length === 0" class="search-tip">{{ mode === 'hand' ? $t('search.valueTipHand') : $t('search.valueTip') }}</h4>
         <div v-if="input.length" class="close" @click="del">
           <svg width="22" class="icon" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
@@ -521,7 +517,8 @@ function closeActivityDetail() {
         height: 40px;
         margin-top: 10px;
       }
-      //&::-webkit-input-placeholder
+
+      &::input-placeholder,
       &::input-placeholder {
         position: absolute;
         top: 45%;
@@ -531,10 +528,19 @@ function closeActivityDetail() {
         font-family: 'font_regular';
 
         /* placeholder颜色  */
-        color: rgb(0 0 0 / 40%);
+        color: rgb(0 0 0 / 20%);
         transform: translateY(-50%);
       }
     }
+    .search-tip {
+      position: absolute;
+      top: 50%;
+      left: 96px;
+      font-size: 20px;
+      font-family: 'font_regular';
+      color: rgb(0 0 0 / 20%);
+      transform: translateY(-50%);
+    }
     .close {
       position: relative;
       width: 56px;