+
+
+
+
请输入中英文首字母查询，例如 XBK (星巴克)
+
+
+
+
+
-
-
万象热搜
-
MIXC hot search
-
-
-
-
常见问题
-
common problem
+
+
+
+
+
+
-
-
-
{{ $t('more') }}
-
-
-
-
-
+
-
+
-
-
-
-
-
-
+
+
+
+
+
@@ -115,6 +102,9 @@ function handleLetter(item) {
function del() {
keywords.value = keywords.value.substring(0, keywords.value.length - 1)
}
+const clear = () => {
+ keywords.value = ''
+}
function setSearch() {
showVoice.value && store.SET_SHOW_VOICE(false)
@@ -140,154 +130,152 @@ onBeforeUnmount(() => {
position: relative;
z-index: 50;
}
-::-webkit-input-placeholder {
- position: relative;
- top: -8px;
- color: rgba(0, 0, 0, 0.4);
- font-size: 16px;
-}
+
.search-content {
position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
+ top: 315px;
+ right: 40px;
+ bottom: 302px;
+ left: 40px;
+ background: linear-gradient(180deg, #e0e3ee 0%, #d4d9e7 100%);
+ backdrop-filter: blur(10px);
+ border-radius: 24px;
display: flex;
flex-direction: column;
align-items: stretch;
- z-index: -1;
+ z-index: 2;
.title {
- font-weight: 700;
+ font-weight: 900;
font-size: 24px;
- color: rgba(0, 0, 0, 0.6);
- font-family: 'font_bold';
- padding-left: 64px;
- padding-bottom: 4px;
- }
- .title-en {
- font-size: 14px;
- line-height: 16px;
- text-transform: uppercase;
- color: rgba(0, 0, 0, 0.4);
- padding-left: 64px;
- margin-bottom: 32px;
- }
-}
-.input-wrapper {
- display: flex;
- align-items: center;
- padding-right: 5px;
- padding-left: 32px;
- width: 552px;
- height: 88px;
- background: #ffffff;
- box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 4px 30px rgba(0, 0, 0, 0.02);
- border-radius: 51px;
- margin-bottom: 56px;
- margin-top: 174px;
- margin-left: 432px;
-
- .search-icon {
- width: 40px;
- margin-right: 24px;
- }
- .input {
- border: none;
- outline: none;
- width: 262px;
- height: 78px;
- background: transparent;
- font-weight: 700;
- font-size: 48px;
+ line-height: 28px;
color: rgba(0, 0, 0, 0.8);
}
- .voice-icon {
- width: 190px;
- }
-}
-.flex {
- display: flex;
- justify-content: space-between;
- padding-right: 56px;
-}
-.facility-list {
- width: 432px;
- display: flex;
- flex-wrap: wrap;
- align-items: flex-start;
- padding-left: 64px;
- .margin {
- margin-right: 40px;
- margin-bottom: 38px;
+ .bar {
+ position: absolute;
+ top: -55px;
+ left: 28px;
+ right: 28px;
+ background: #ffffff;
+ box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
+ border-radius: 24px;
+ display: flex;
+ align-items: center;
+ padding-right: 10px;
+ padding-left: 40px;
+ height: 100px;
+ .icon {
+ width: 56px;
+ height: 56px;
+ background: center / cover no-repeat url(./icon.png);
+ }
+ .stick {
+ width: 4px;
+ height: 38px;
+ background: linear-gradient(180deg, #6c7ca6 0%, #879aca 100%);
+ margin: 0 32px;
+ }
+ .placeholder {
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 23px;
+ color: rgba(0, 0, 0, 0.2);
+ .meta {
+ color: rgba(81, 109, 216, 1);
+ }
+ }
+ .input {
+ flex: 1;
+ border: none;
+ outline: none;
+ width: 262px;
+ background: transparent;
+ font-weight: 700;
+ font-size: 48px;
+ line-height: 59px;
+ color: rgba(0, 0, 0, 0.8);
+ }
+ .clear {
+ display: flex;
+ width: 80px;
+ height: 80px;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 24px;
+ padding: 16px;
+ }
+ .voice-icon {
+ width: 190px;
+ }
}
-}
-.width {
- width: 552px;
-}
-.hot-scroll {
- position: relative;
- margin-bottom: 64px;
- margin-right: 20px;
- overflow: hidden;
- margin-left: 64px;
- height: 142px;
- :deep(.bscroll-vertical-scrollbar) {
- width: 6px !important;
- background: rgba(0, 0, 0, 0.02) !important;
- border-radius: 6px !important;
- opacity: 1 !important;
- .bscroll-indicator {
- width: 6px !important;
- background: rgba(0, 0, 0, 0.1) !important;
- border-radius: 6px !important;
- border: none !important;
+ .top {
+ height: 460px;
+ background: rgba(255, 255, 255, 0.6);
+ border-radius: 16px;
+ margin: 10px 10px 48px 10px;
+ display: flex;
+ justify-content: space-between;
+ padding-left: 46px;
+ .facs {
+ width: 300px;
+ padding-top: 111px;
+ .facility-list {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ width: 264px;
+ margin-top: 40px;
+ gap: 12px 24px;
+ }
+ }
+ .keyboard-wrapper {
+ flex: 1;
+ padding-top: 75px;
+ padding-left: 36px;
+ background: rgba(0, 0, 0, 0.05);
+ padding-right: 38px;
+ .tabs {
+ padding-right: 8px;
+ }
}
}
-}
-.recommend-item {
- display: inline-block;
- height: 59px;
- padding: 0 32px;
- font-weight: 700;
- font-family: 'font_bold';
- font-size: 16px;
- line-height: 59px;
- text-align: center;
- color: var(--color-black-opacity-6);
- background: var(--color-white-opacity);
- border-radius: 50px;
- margin-right: 16px;
- margin-bottom: 24px;
-}
-.question-box {
- display: flex;
- margin-left: 64px;
+ .recs {
+ padding-left: 56px;
+ .hot-scroll {
+ padding-top: 16px;
+ white-space: nowrap;
+ width: 944px;
- :deep(.question_item) {
- margin-right: 16px;
- }
- .more-question {
- display: flex;
- justify-content: center;
- align-items: center;
- background: rgba(255, 255, 255, 0.4);
- width: 160px;
- height: 225px;
- border-radius: 12px;
- font-weight: 700;
- font-size: 20px;
- font-family: 'font_bold';
- color: rgba(0, 0, 0, 0.6);
- padding: 0 60px;
+ .item {
+ position: relative;
+ display: inline-block;
+ max-width: 170px;
+ height: 52px;
+ background: rgba(255, 255, 255, 0.8);
+ border-radius: 100px;
+ .text {
+ text-align: center;
+ font-weight: 900;
+ font-size: 16px;
+ line-height: 52px;
+ color: rgba(0, 0, 0, 0.6);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding: 0 32px;
+ }
+ .medal {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ left: 4px;
+ top: -10px;
+ }
+ }
+ .item + .item {
+ margin-left: 24px;
+ }
+ }
}
}
-.search-left {
- width: 1048px;
- height: 722px;
- background: rgba(255, 255, 255, 0.6);
- border-radius: 12px;
- margin: 16px 16px 64px 16px;
-}
+
.search-right {
position: relative;
background: rgba(255, 255, 255, 0.6);
@@ -295,14 +283,6 @@ onBeforeUnmount(() => {
padding-left: 64px;
width: 696px;
- .keyboard-wrapper {
- position: absolute;
- left: 72px;
- right: 64px;
- bottom: 56px;
- top: 684px;
- }
-
.title,
.title-en {
margin-right: 76px;
@@ -313,13 +293,15 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: center;
position: fixed;
- left: 80px;
- top: 190px;
- width: 88px;
- height: 88px;
+ left: 0;
+ right: 0;
+ margin: auto;
+ bottom: 242px;
+ width: 120px;
+ height: 120px;
z-index: 52;
- background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
- border-radius: 12px;
+ background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+ border-radius: 24px;
img {
width: 56px;
}
diff --git a/src/components/Search/clear.png b/src/components/Search/clear.png
new file mode 100644
index 0000000..66818ce
Binary files /dev/null and b/src/components/Search/clear.png differ
diff --git a/src/components/Search/icon.png b/src/components/Search/icon.png
new file mode 100644
index 0000000..b2d303f
Binary files /dev/null and b/src/components/Search/icon.png differ
diff --git a/src/components/SearchResultItem/SearchResultItem.vue b/src/components/SearchResultItem/SearchResultItem.vue
index 09f2534..e669c5f 100644
--- a/src/components/SearchResultItem/SearchResultItem.vue
+++ b/src/components/SearchResultItem/SearchResultItem.vue
@@ -3,17 +3,10 @@
![]()
-
-
-
-
{{ switchLanguage(shop, 'shopName') }}
-
{{ shop.houseNumber }}
-
-
-
{{ switchLanguage(shop, 'industryFatherName') }}
-
![]()
-
-
+
+
{{ switchLanguage(shop, 'shopName') }}
+
+
{{ shop.floor }}
@@ -39,62 +32,52 @@ function handleShop() {
diff --git a/src/components/SearchResultList/SearchResultList.vue b/src/components/SearchResultList/SearchResultList.vue
index 34362eb..f33c7ca 100644
--- a/src/components/SearchResultList/SearchResultList.vue
+++ b/src/components/SearchResultList/SearchResultList.vue
@@ -2,11 +2,7 @@
