新增备注组件，优化el样式变量

src/views/home.vue

@@ -105,16 +105,14 @@
           </div>
         </div>
         <div class="btm">
-          <div class="editor">
-            <el-icon>
-              <Edit />
-            </el-icon>
-          </div>
+          <el-button icon="Edit" @click="remarkRef.show()"></el-button>
           <div class="button">
-            <div class="js">
-              <el-text class="t">￥3.09</el-text>
-              <el-text class="t">结算</el-text>
-            </div>
+            <el-button type="primary" style="width: 100%;">
+              <div class="js">
+                <el-text class="t">￥3.09</el-text>
+                <el-text class="t" style="margin-left: 250px;">结算</el-text>
+              </div>
+            </el-button>
           </div>
         </div>
       </div>
@@ -166,12 +164,17 @@
     </div>
   </div>
   <skuModal />
+  <remarkModal ref="remarkRef" />
 </template>
 
 <script setup>
 import skuModal from '@/components/skuModal.vue'
+import remarkModal from '@/components/remarkModal.vue'
 
 import { ref } from 'vue'
+
+const remarkRef = ref(null)
+
 const shopListType = ref('text')
 
 // 切换商品显示模式
@@ -385,35 +388,14 @@ function changeShopListType() {
 
     .button {
       flex: 1;
-      display: flex;
-      align-items: center;
-      border-radius: 6px;
-      background-color: var(--primary-color);
-      padding: 0 20px;
 
-      &:hover {
-        cursor: pointer;
-        background-color: var(--el-color-primary-light-3);
-      }
-
-      &:active {
-        background-color: var(--el-color-primary-dark-2);
-      }
 
       .js {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
 
         .t {
           color: #fff;
           font-size: 20px;
         }
-
-        :deep(span) {
-          width: auto;
-          display: inline;
-        }
       }
     }
   }