帮我修改drawer1抽屉的样式改成和文件图片综合排序点开后的抽屉一样

要将 `drawer1` 抽屉的样式改成交互图片中“综合排序”点击后显示的那个抽屉样式，可以参考以下步骤进行修改：

### HTML/模板部分
首先，确保 `drawer1` 在模板中的定义与交互图片中的样式一致。例如：

<el-drawer 
    v-model="drawer1" 
    size="30%" 
    direction="ttb" 
    :with-header="false" 
    class="custom-sort-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>

### CSS 样式部分
然后，定义一个新的 CSS 类 `custom-sort-drawer`，使其样式与目标抽屉一致。假设目标抽屉的背景渐变色、字体颜色等都已经明确，以下是示例：

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

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

.custom-sort-drawer ul li {
    padding: 1vw 0;
    font-size: 4vw;
    cursor: pointer;
    text-align: left; /* 如果需要左对齐 */
}

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

### 说明
1. **HTML部分**：使用 `el-drawer` 组件并设置相关的属性，如 `size`、`direction`、`:with-header` 和 `class`。
2. **CSS部分**：定义新的类 `custom-sort-drawer`，设置背景渐变色、内边距、字体颜色、圆角等样式。同时，针对 `ul` 和 `li` 元素设置具体的样式。

这样，当 `drawer1` 抽屉被打开时，它的样式就会与“综合排序”点击后显示的那个抽屉样式保持一致。