优化样式

src/views/home/components/goods.vue

@@ -2,13 +2,13 @@
 
 <template>
     <div class="header">
-        <div class="menus">
+        <div class="menus scroll-x">
             <div class="item" :class="{ active: categorysActive == index }" v-for="(item, index) in categorys"
                 :key="item.id" @click="changeCategory(item, index)">
                 <el-text>{{ item.name }}</el-text>
             </div>
         </div>
-        <el-popover trigger="click" :width="800" title="全部分类" :visible="showPopover">
+        <el-popover trigger="click" :width="600" title="全部分类" :visible="showPopover">
             <template #reference>
                 <div class="all" @click="showMoreMenu">
                     <el-icon class="icon" :class="{ active: showPopover }">
@@ -16,7 +16,6 @@
                     </el-icon>
                 </div>
             </template>
-
             <template #default>
                 <div class="popover_wrap">
                     <el-button :plain="categorysActive != index" type="primary" v-for="(item, index) in categorys"
@@ -29,7 +28,7 @@
     </div>
     <div class="search_wrap">
         <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
+            <el-input placeholder="请输入商品名称查询" prefix-icon="Search" v-model="commdityName" clearable
                 @input="inputChange"></el-input>
         </div>
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'"
@@ -40,7 +39,8 @@
             <div class="item">
                 <div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
                 <div class="cover" v-if="shopListType == 'img'">
-                    <el-image :src="item.coverImg" style="width: 100%;height: 100%;background-color: #efefef;" fit="contain"></el-image>
+                    <el-image :src="item.coverImg" style="width: 100%;height: 100%;background-color: #efefef;"
+                        fit="contain"></el-image>
                 </div>
                 <div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
                 <div class="item_empty" v-if="shopListType == 'text'"></div>
@@ -205,7 +205,8 @@ defineExpose({
 .popover_wrap {
     display: flex;
     flex-wrap: wrap;
-    padding: 20px 0;
+    gap: var(--el-font-size-base);
+    padding: var(--el-font-size-base) 0;
 }
 
 .header {
@@ -216,14 +217,18 @@ defineExpose({
 }
 
 .menus {
+    flex: 1;
     display: flex;
     padding: 0 10px;
+    overflow-x: auto;
+    width: 100px;
 
     .item {
         padding: 0 10px;
         display: flex;
         align-items: center;
         position: relative;
+        white-space: nowrap;
 
         span {
             font-size: var(--el-font-size-base);
@@ -249,11 +254,12 @@ defineExpose({
 }
 
 .all {
-    width: var(--el-component-size-large);
+    width: calc(var(--el-component-size-large) + 10px);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
+    flex-shrink: 0;
 
     &::before {
         content: "";

src/views/home/components/settleAccount.vue

@@ -219,6 +219,7 @@ defineExpose({
 
                 .tag_wrap {
                     display: flex;
+                    flex-wrap: wrap;
                     padding-top: 10px;
                     padding-bottom: 10px;
 
@@ -227,6 +228,7 @@ defineExpose({
                         background-color: var(--el-color-danger);
                         color: #fff;
                         margin-right: 10px;
+                        margin-bottom: 10px;
                     }
                 }
 

src/views/home/index.vue

@@ -76,13 +76,8 @@
           <div class="button">
             <el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
               @click="createOrderHandle">
-              <div class="js">
-                <el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
-                <el-text class="t" style="margin-left: 30px">
-                  <span v-if="!createOrderLoading">结算</span>
-                  <span v-else>下单中...</span>
-                </el-text>
-              </div>
+              <span v-if="!createOrderLoading">结算(￥{{ cartInfo.totalAmount || 0 }})</span>
+              <span v-else>下单中...</span>
             </el-button>
           </div>
         </div>
@@ -294,7 +289,7 @@ async function queryCartAjax() {
 async function createCodeAjax() {
   try {
     if (process.env.VITE_DEV_SERVER_URL) {
-      masterId.value = '#8'
+      masterId.value = '#10'
     } else {
       const res = await createCode({
         shopId: store.userInfo.shopId
@@ -396,7 +391,7 @@ onMounted(() => {
         padding: var(--el-font-size-base);
 
         &.active {
-          background-color: #f5f5f5;
+          background-color: var(--primary-color-hover);
         }
 
         &:not(:last-child) {
@@ -419,6 +414,7 @@ onMounted(() => {
             background-color: var(--el-color-danger);
             color: #fff;
             margin-right: 10px;
+            margin-bottom: 10px;
           }
         }