menduner/src/views/mall/home/index.vue

<template>
  <div style="min-width: 1184px;" class="white-bgc">
    <!-- 搜索框 -->
    <div class="py-5 stickyBox">
      <div class="search d-flex align-center">
        <v-text-field
          v-model="inputVal"
          placeholder="请输入关键词"
          color="primary"
          variant="plain"
          density="compact"
          clearable
          :hide-details="true"
          class="ml-3 px-2"
          style="height: 100%; line-height: 100%;"
          @keyup.enter="handleSearch"
        ></v-text-field>
        <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
      </div>
    </div>

    <!-- 轮播图 -->
    <Carousel />

    <!-- 热门商品 -->
    <HotGoods class="my-10 default-width" />
  </div>
</template>

<script setup>
defineOptions({ name: 'mall-home-index'})
import { ref } from 'vue'
import Carousel from './components/carousel.vue'
import HotGoods from './components/hotGoods.vue'
import { useMallStore } from '@/store/mall'

// 获取装修模版
useMallStore().getMallDiyTemplate()

const inputVal = ref('')
const handleSearch = () => {}
</script>

<style scoped lang="scss">
.stickyBox {
  position: sticky;
  top: 48px;
  z-index: 999;
  background-color: #fff;
}
.search {
  height: 50px;
  width: 800px;
  border: 2px solid var(--v-primary-base);
  border-radius: 5px;
  margin: 0 auto;
  .searchBtn {
    width: 180px;
    height: 50px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-color: var(--v-primary-base);
    cursor: pointer;
  }
}
</style>