Browse Source

🐞 fix: 修复搜索框不显眼的问题

Pchen. 3 weeks ago
parent
commit
9addf4b324
3 changed files with 46 additions and 11 deletions
  1. 1 1
      src/main.js
  2. 13 10
      src/pages/store/goodsList/index.vue
  3. 32 0
      src/styles/store-theme.less

+ 1 - 1
src/main.js

@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import './style.css'
-import '@/styles/store-theme.less'
 
 import { isElectron } from '@/utils/electron'
 
@@ -10,6 +9,7 @@ if (isElectron()) {
 
 import ArcoVue from '@arco-design/web-vue'
 import '@arco-themes/vue-mengtu/index.less'
+import '@/styles/store-theme.less'
 
 import ArcoVueIcon from '@arco-design/web-vue/es/icon'
 

+ 13 - 10
src/pages/store/goodsList/index.vue

@@ -11,14 +11,16 @@
         <h1 class="store-section-title">云商城</h1>
         <p class="store-section-desc">选购乐跑次数套餐,支付后自动到账</p>
       </div>
-      <a-input-search
-        v-model="keyword"
-        placeholder="搜索商品名称"
-        allow-clear
-        class="search"
-        @search="getGoods"
-        @clear="getGoods"
-      />
+      <div class="store-search-wrap">
+        <a-input-search
+          v-model="keyword"
+          placeholder="搜索商品名称"
+          allow-clear
+          class="store-search"
+          @search="getGoods"
+          @clear="getGoods"
+        />
+      </div>
     </header>
 
     <a-spin :loading="loading" class="store-spin goods-spin">
@@ -132,8 +134,9 @@ GetNotice()
   margin-bottom: 24px;
 }
 
-.search {
-  width: min(280px, 100%);
+.store-search-wrap {
+  width: min(300px, 100%);
+  flex-shrink: 0;
 }
 
 .goods-spin {

+ 32 - 0
src/styles/store-theme.less

@@ -91,3 +91,35 @@
   font-size: 0.9rem;
   color: @store-text-muted;
 }
+
+// 云商城搜索框(class 落在 Arco Input 根节点,须全局样式且覆盖 mengtu 主题)
+.store-search.arco-input-wrapper {
+  background-color: @store-card-bg !important;
+  border: 1px solid #c5d9cc !important;
+  border-radius: 999px !important;
+  box-shadow: @store-shadow !important;
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    border-color: @store-accent !important;
+    background-color: @store-card-bg !important;
+  }
+
+  &.arco-input-focus {
+    border-color: @store-accent !important;
+    box-shadow: 0 0 0 3px fade(@store-accent, 22%) !important;
+  }
+
+  .arco-input {
+    background: transparent !important;
+    color: @store-primary;
+
+    &::placeholder {
+      color: @store-text-muted;
+    }
+  }
+
+  .arco-input-suffix .arco-icon {
+    color: @store-accent;
+  }
+}