三级菜单样式调整

src/views/tool/Instead/components/popup-quan-hexiao.vue

@@ -2,22 +2,27 @@
   <div>
     <el-dialog width="400px" :title="title" v-model="show" @close="reset">
       <div class="u-p-15">
-        <div v-if="openSwitch">
+        <div v-if="openSwitch" class="openSwitch">
           <el-button
+            size="large"
             @click="changeKey('paysSel', index)"
             v-for="(item, index) in pays"
             :key="index"
             :type="paysSel == index ? 'primary' : ''"
           >
-            {{ item.text }}
+            <img :src="item.icon" alt="" style="width: 30px; height: 30px; margin-right: 10px" />
+            <span>
+              {{ item.text }}
+            </span>
           </el-button>
         </div>
-        <div class="u-m-t-20">
+
+        <div class="u-m-t-20 flex flex-col">
           <el-alert :closable="false" v-if="tips" :title="tips" type="warning" show-icon></el-alert>
         </div>
-        <div class="u-m-t-20">
+        <div class="u-m-t-20 flex justify-center">
           <el-form label-width="90px" label-position="left">
-            <el-form-item label="券码">
+            <el-form-item label="" label-width="0">
               <el-input
                 v-model="form.code"
                 @change="codeInputChange"
@@ -41,6 +46,8 @@
 <script>
 import { useUserStore } from "@/store/modules/user";
 import { getDouyinToken, setDouyinToken } from "@/utils/auth";
+import meituanIcon from "@/assets/icons/meituan.png";
+import tiktokIcon from "@/assets/icons/douyin.png";
 
 const user = useUserStore();
 import * as $Api from "@/api/coup/index.js";
@@ -87,9 +94,11 @@ export default {
       pays: [
         {
           text: "美团",
+          icon: meituanIcon,
         },
         {
           text: "抖音",
+          icon: tiktokIcon,
         },
       ],
       show: false,
@@ -232,4 +241,23 @@ export default {
   height: 164px;
   overflow: hidden;
 }
-</style>
+.openSwitch {
+  display: flex;
+  justify-content: center;
+}
+.flex {
+  display: flex;
+}
+.justify-center {
+  justify-content: center;
+}
+:deep(.el-form) {
+  width: 200px;
+}
+:deep(.el-alert) {
+  width: inherit;
+}
+.flex-col {
+  flex-direction: column;
+}
+</style>