修改文件代码drawer1的样式改成文件中图片的一样

要将 `drawer1` 的样式修改成类似于文件中提供的图片的样式，可以参考现有的 `el-drawer` 样式并进行调整。以下是如何修改 `drawer1` 样式的步骤：

### 修改 Vue 文件中的代码

1. **在 `<style>` 标签中添加新的样式**：

   .custom-drawer {
     background-color: #0093E9;
     background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
     padding: 2rem;
     color: #fff;
   }

   .custom-drawer ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .custom-drawer ul li {
     padding: 1rem 0;
     font-size: 1.5rem;
     cursor: pointer;
   }

   .custom-drawer ul li:hover {
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 0.5rem;
   }

2. **在 `<template>` 中应用新样式**：

   <el-drawer v-model="drawer1" size="50%" class="custom-drawer">
     <ul style="display: flex; flex-direction: column;">
       <li @click="sortBy('sales')">销量最高</li>
       <li @click="sortBy('distance')">距离最近</li>
       <li @click="sortBy('rating')">好评优先</li>
       <li @click="sortBy('starting-price')">起送价最低</li>
       <li @click="sortBy('delivery-fee')">配送费最低</li>
     </ul>
   </el-drawer>

### 解释

- **`.custom-drawer` 类**：定义了抽屉的背景颜色和渐变效果，并设置了内边距和文本颜色。
- **`.custom-drawer ul` 和 `.custom-drawer ul li` 类**：定义了列表项的样式，包括内边距、字体大小和鼠标悬停时的效果。

通过以上步骤，你可以将 `drawer1` 的样式修改成与文件中提供的图片类似的样式。希望这对你有帮助！如果有其他需求或问题，请随时告诉我。